:root{--fg:#f2f2f2;--bg:#000;--muted:#bdbdbd;--rule:#333;--top:#c8c8c8;--accent:#f20d0d;--max:1440px}
*{box-sizing:border-box}
html{font-family:Lato,"Helvetica Neue",Arial,sans-serif;color:var(--fg);background:var(--bg);font-size:17px;line-height:1.36;font-weight:400}
body{margin:0;background:#000;color:#f2f2f2}
header{width:100%;max-width:none;margin:0;padding:7px 2.3%;display:flex;align-items:center;justify-content:space-between;gap:48px;color:#c8c8c8}
.brand{display:flex;align-items:center;gap:10px;color:#c8c8c8!important;text-decoration:none!important;font-size:16px;font-weight:400;letter-spacing:.035em;white-space:nowrap}
.brand img{width:32px;height:27px;object-fit:contain}
nav{display:flex;align-items:center;justify-content:flex-end;gap:36px;margin-left:auto;flex-wrap:wrap}
header nav a{color:#c8c8c8!important;text-decoration:none!important;font-size:16px;font-weight:400}
a,a:visited{color:inherit}
a:hover,a:focus-visible,a:hover:visited,a:focus-visible:visited{color:var(--accent)!important;text-decoration:none!important}
main{width:100%;max-width:1440px;margin:0 auto;padding:0 4.2%}
.intro{font-size:clamp(1.4rem,1.7vw,2rem);line-height:1.4;padding:42px 0 58px;max-width:1100px}
.post-list{border-top:1px solid var(--rule);width:100%;margin:18px auto 0}
.post-list article{display:grid;grid-template-columns:74px minmax(0,1fr);gap:18px;padding:28px 0 30px;border-bottom:1px solid #444;align-items:start}
.post-list time{color:#eee;font-size:15px;line-height:1.4;text-transform:uppercase;padding-top:10px;white-space:nowrap}
.post-list h2{margin:0;font-size:clamp(2.5rem,6.6vw,5.8rem);line-height:1.03;font-weight:300;letter-spacing:-.035em}
.post-list h2 a,.post-list h2 a:visited{color:#d0d0d0;text-decoration:none!important}
.post-list h2 a:hover,.post-list h2 a:focus-visible,.post-list h2 a:hover:visited,.post-list h2 a:focus-visible:visited{color:var(--accent)!important;text-decoration:none!important}
.post{max-width:780px;margin:48px auto 90px}
.page{max-width:1280px;margin:26px auto 90px}
.post h1,.page h1{font-size:clamp(3.1rem,6vw,4.8rem);line-height:1.08;margin:28px 0 48px;font-weight:300;letter-spacing:-.035em;color:#f2f2f2}
.post h1{color:var(--accent)}
.post p,.page p,.post li,.page li{max-width:72ch}
.post p,.page p{margin:0 0 1rem}
.post img,.page img{max-width:100%;height:auto}
.post blockquote,.page blockquote{border-left:4px solid #555;padding:1.15rem 1.35rem;margin:1rem 0;background:#242424;color:#f2f2f2}
.post .caption,.page .caption{font-family:inherit;font-size:.8rem;line-height:1.35;color:#aaa;margin-top:-.65rem}
.post .dropcap:first-letter,.page .dropcap:first-letter{float:left;font-size:4.2em;line-height:.8;padding:.04em .08em 0 0}
.post span[style*="letter-spacing"],.page span[style*="letter-spacing"]{display:inline}
.post img,.page img{display:block;margin:1.4rem 0}
.video-embed{position:relative;width:100%;max-width:900px;aspect-ratio:16/9;margin:1.5rem 0 2rem;overflow:hidden}
.video-embed iframe{width:100%;height:100%;border:0}
/* The previous-work page is intentionally narrower than the site frame. */
.work-page{max-width:714px;margin:24px auto 90px}
.work-page h1{margin:34px 0 42px}
.work-page > p,.work-page > ul,.work-page > .video-embed,.work-page > img,.work-page .wp-block-group > p,.work-page .wp-block-group > ul,.work-page .wp-block-group > .wp-block-columns{margin-left:0!important;max-width:100%}
.work-page p > strong:only-child{display:block;color:var(--accent);font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:2.1rem 0 .45rem}
.work-page p:has(> strong:only-child){margin-bottom:.35rem}
.work-page p > strong:only-child + *{margin-top:0}
.work-page ul{padding-left:1.25rem;margin:.9rem 0 2rem}
.work-page li{margin:.2rem 0}
.work-page img{max-width:100%;height:auto}
.about-page{max-width:960px;margin:24px auto 90px;font-size:18px}
.about-page h1{margin:34px 0 58px}
/* About is a single centered editorial column, not a two-column WordPress layout. */
.about-page .wp-block-columns{display:block!important;width:100%!important;max-width:100%!important;margin:1.1rem 0!important;gap:0!important}
.about-page .wp-block-column{display:block!important;width:100%!important;max-width:100%!important;flex-basis:auto!important;margin:0!important}
.about-page .wp-block-column p{max-width:72ch}
.about-page .wp-block-column img{max-width:125px;height:auto}
.about-page .wp-block-column p:first-child img{float:right;width:125px;margin:0 0 12px 22px;padding:4px;border:1px dashed #333}
.about-page .wp-block-spacer{height:10px!important}
.about-page .wp-block-separator{border:0;border-top:1px solid #444;margin:2.5rem 0}

.about-page > p,.about-page .wp-block-column p{line-height:1.4;letter-spacing:-.01em}
.about-page > p:first-of-type img{float:left;width:125px;height:auto;margin:0 22px 12px 0;padding:0;border:0}
.about-page blockquote{background:#242424;color:#fff;border:0;border-left:4px solid #555;padding:1.15rem 1.35rem;margin:1rem 0;line-height:1.35;letter-spacing:-.015em}
.about-page blockquote p{margin:0;max-width:none;color:#fff}
.about-page blockquote strong{color:#fff}
.about-page hr{border:0;border-top:1px solid #444;margin:2.5rem 0}
.about-intro,.about-work-resume{display:block;max-width:100%;gap:0;align-items:start}
.about-intro,.about-work-resume{margin-left:0}
.about-intro p{margin-top:0}
.about-work-resume{border-top:0;padding-top:0;margin-top:1.5rem}
.about-resume{border-left:1px solid #777;padding-left:24px}
.about-resume-label{color:var(--accent);font-size:1.5rem;letter-spacing:-.02em;font-weight:400;margin-bottom:.6rem}
.about-resume ul{margin-top:1.8rem;padding-left:1.2rem}
/* Contact form follows the original vertical, editorial layout. */
.contact-page{max-width:1280px;margin:24px auto 90px}
.contact-page h1{margin:34px 0 52px}
.contact-page > p{max-width:650px;margin-left:90px;margin-right:0}
.contact-page .contact-form{width:100%;max-width:650px;margin:2.3rem 0 3rem 90px}
.contact-form label{display:block;margin:1.65rem 0 .55rem;font-size:14px;line-height:1.3;font-weight:700;color:#f2f2f2}
.contact-form label span{color:var(--accent)}
.contact-form input:not([type=hidden]),.contact-form textarea{display:block;width:100%;max-width:100%;padding:7px 9px;border:1px solid #ddd;border-radius:0;background:#aaa;color:#111;font:inherit;line-height:1.35}
.contact-form input:not([type=hidden]){max-width:390px;height:32px}
.contact-form textarea{min-height:86px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #aaa;outline-offset:2px}
.contact-form button{margin-top:1.2rem;padding:10px 15px;border:1px solid #777;border-radius:0;background:#222;color:#aaa;font:inherit;font-size:14px;font-weight:400;cursor:pointer}
.contact-form button:hover,.contact-form button:focus-visible{background:#333;color:#fff!important;border-color:#aaa}
.contact-form .honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-page .form-status{margin-left:90px;max-width:650px}
.form-status{padding:.8rem 1rem;border-left:3px solid var(--accent);background:#242424;color:#fff}
.form-status.success{border-color:#39804b}.form-status.error{border-color:var(--accent)}
.site-footer{max-width:1440px;margin:0 auto;padding:28px 24px 38px;border-top:1px solid #333;text-align:center;color:#ccc}
.site-footer nav{display:flex;justify-content:center;align-items:center;gap:7px;margin:0 auto 18px;font-size:18px}
.site-footer nav a{color:#ddd;text-decoration:underline!important;text-underline-offset:2px}
.site-footer nav span{color:#888}
.site-footer p{margin:0;font-size:11px;line-height:1.4;color:#ccc}
.site-footer p a{color:#ddd;text-decoration:underline}
@media(max-width:700px){
 header{align-items:center;padding:10px 18px;gap:18px}header nav{gap:16px}header nav a{font-size:14px}.brand{font-size:14px}.brand img{width:29px;height:25px}
 main{padding:0 20px}.post-list article{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:20px 0}.post-list time{font-size:12px;padding-top:6px}.post-list h2{font-size:clamp(2rem,8vw,3rem)}
 .post,.page,.work-page,.about-page,.contact-page{margin-top:24px;margin-bottom:55px}.post h1,.page h1{font-size:clamp(2.7rem,11vw,4rem);margin:25px 0 38px}
 .about-intro,.about-work-resume{display:block;margin-left:0}.work-page > p,.work-page > ul,.work-page > .video-embed,.work-page > img,.work-page .wp-block-group > p,.work-page .wp-block-group > ul,.work-page .wp-block-group > .wp-block-columns{margin-left:0;max-width:100%}.contact-page > p,.contact-page .contact-form,.contact-page .form-status{margin-left:0}.about-resume{border-left:0;border-top:1px solid #555;padding:1rem 0 0;margin-top:1rem}.about-page > p:first-of-type img{width:105px}
 .contact-form input:not([type=hidden]){max-width:100%}.contact-page h1{margin-bottom:38px}
 .site-footer nav{font-size:14px;gap:5px;flex-wrap:wrap}
}

/* Editorial reading pass: inspired by Kottke's Neue Haas Unica treatment. */
html{font-family:"Neue Haas Unica","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;line-height:1.58;font-weight:400;letter-spacing:-.008em}
body{font-family:inherit;font-size:1rem;line-height:inherit;letter-spacing:inherit}
.post,.page,.work-page,.about-page,.archive-page{font-family:inherit}
.post p,.page p,.work-page p,.about-page p,.archive-page p,
.post li,.page li,.work-page li,.about-page li,.archive-page li{
  font-size:1rem;line-height:1.62;letter-spacing:-.008em;max-width:68ch
}
.post p,.page p,.work-page p,.about-page p,.archive-page p{margin-bottom:1.2rem}
.post h1,.page h1{line-height:1.06;letter-spacing:-.04em;margin-bottom:2.2rem}
.post-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:.42rem;color:#aaa;font-size:.78rem;line-height:1.4;letter-spacing:.015em;margin:0 0 1.1rem}
.post-meta time{white-space:nowrap;color:#aaa}
.post-meta-divider{color:#777}
.post .story-tags{font-size:1em;color:#aaa;letter-spacing:0}
.post .story-tags a{color:#aaa;text-decoration:none}
.post .story-tags a:hover{color:var(--accent);text-decoration:none}
.archive-page .archive-tag{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;text-decoration:none;white-space:normal}
.archive-page .archive-tag:hover{border:0;color:var(--accent)}
.archive-topics{line-height:2}
.archive-page .archive-topics h2,.archive-page .archive-months h2{margin-bottom:.7rem}
.archive-post-list article{border-color:#333}
.archive-post-list h2 a{color:#ddd}
.archive-post-list time{color:#aaa}

/* Compact navigation: keep every destination visible on narrow screens. */
header{gap:24px}
header nav{gap:24px;flex-wrap:nowrap;white-space:nowrap}
@media(max-width:700px){
  header{padding:9px 14px;gap:10px;flex-wrap:nowrap}
  header nav{gap:clamp(6px,1.8vw,11px);flex-wrap:nowrap;white-space:nowrap;min-width:0}
  header nav a{font-size:clamp(11px,3.1vw,13px);letter-spacing:-.025em}
  .brand{gap:6px;font-size:clamp(11px,3.2vw,13px);letter-spacing:.01em}
  .brand img{width:25px;height:23px;flex:0 0 auto}
  .post,.page,.work-page,.about-page,.contact-page{font-size:18px}
  .post p,.page p,.work-page p,.about-page p,.archive-page p,
  .post li,.page li,.work-page li,.about-page li,.archive-page li{font-size:17px;line-height:1.6}
}
@media(max-width:360px){
  header{padding-left:10px;padding-right:10px;gap:7px}
  header nav{gap:6px}
  header nav a{font-size:11px}
  .brand{font-size:11px;gap:4px}
  .brand img{width:22px;height:21px}
}


/* Pass 5: archive metadata and page-width corrections. */
.archive-page h1{font-size:clamp(3.1rem,6vw,4.8rem);line-height:1.06;letter-spacing:-.04em;font-weight:300;margin:28px 0 2.2rem;color:#f2f2f2}
.archive-post-list article{display:block;margin:1.7rem 0;padding:0 0 1.25rem;border-bottom:1px solid #333}
.archive-post-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem;color:#aaa;font-size:.78rem;line-height:1.4;letter-spacing:.015em;margin:0 0 .7rem}
.archive-post-meta time{white-space:nowrap;color:#aaa;text-transform:uppercase;letter-spacing:.06em}
.archive-post-meta .story-tags{display:inline;font-size:1em;color:#aaa;white-space:normal}
.archive-post-meta .story-tags a{color:#aaa;text-decoration:none}
.archive-post-meta .story-tags a:hover{color:var(--accent);text-decoration:none}
.archive-post-list h2{margin:0;font-size:clamp(1.8rem,4vw,3rem);line-height:1.12;font-weight:300;letter-spacing:-.025em}
.about-page{display:block;width:100%;max-width:960px;margin:24px auto 90px}
.about-page>*{max-width:100%}
.about-page p,.about-page li{max-width:68ch}
@media(max-width:700px){.archive-page h1{font-size:clamp(2.7rem,11vw,4rem);margin:25px 0 38px}.archive-post-list h2{font-size:clamp(1.8rem,7vw,2.5rem)}}


/* Pass 6: normalize interior-page alignment and restore the About page flow. */
.about-page,
.contact-page{width:100%;max-width:960px;margin:24px auto 90px}
.about-page h1,
.contact-page h1{font-size:clamp(3.1rem,6vw,4.8rem);line-height:1.06;letter-spacing:-.04em;font-weight:300;color:#f2f2f2}
.about-intro{display:block;width:100%;max-width:100%;margin:0}
.about-intro p{max-width:68ch}
.about-intro img{float:right;width:155px;max-width:32%;height:auto;margin:0 0 1rem 1.5rem;padding:0;border:0}
.about-work-resume{display:block;width:100%;max-width:100%;margin:1.5rem 0 0;padding:0}
.about-main-text{width:100%;max-width:100%}
.about-main-text p,.about-main-text ul{max-width:68ch}
.about-resume{width:100%;max-width:100%;border:0;border-top:1px solid #555;padding:1.1rem 0 0;margin:1.8rem 0 2.2rem}
.about-resume-label{margin:0 0 .6rem}
.about-resume ul{display:flex;gap:1rem 2rem;flex-wrap:wrap;margin:.5rem 0 0;padding-left:1.2rem}
.about-testimonials{display:block;width:100%;max-width:100%;clear:both;overflow-wrap:anywhere}
.about-testimonials blockquote{display:block;width:100%;max-width:100%;margin:1rem 0;padding:1.15rem 1.35rem;box-sizing:border-box}
.about-testimonials blockquote p{max-width:none}
.contact-page > p{max-width:68ch;margin-left:0;margin-right:0}
.contact-page .contact-form{width:100%;max-width:650px;margin:2.3rem 0 3rem}
.contact-page .form-status{margin-left:0;max-width:650px}
@media(max-width:700px){
  .about-page,.contact-page{width:100%;max-width:100%;margin:24px auto 55px}
  .about-intro img{width:110px;max-width:36%;margin:0 0 .75rem 1rem}
  .about-resume ul{display:block}
}

/* Pass 7: keep About and Contact on the same readable editorial measure. */
.about-page,.contact-page{width:100%;max-width:714px;margin:24px auto 90px}
.about-page .about-testimonials{width:100%;max-width:100%;margin:2rem 0 0;clear:both;overflow-wrap:anywhere}
.about-page .about-testimonials blockquote{width:100%;max-width:100%;box-sizing:border-box;margin:1rem 0;padding:1.15rem 1.35rem}
.about-page .about-testimonials blockquote p{max-width:none}
.contact-page > p,.contact-page .contact-form,.contact-page .form-status{margin-left:0;max-width:650px}
@media(max-width:700px){.about-page,.contact-page{max-width:100%;margin:24px auto 55px}.contact-page > p,.contact-page .contact-form,.contact-page .form-status{margin-left:0;max-width:100%}}