/* NexusMKTG — site stylesheet. Tokens from the Nexus design system; two themes (paper, ink). */

/* ---------- Fonts (self-hosted; only the weights the site sets) ---------- */
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-Thin.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-RegularItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/SourceSerif4-Italic-latin.woff2") format("woff2");font-weight:300 400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --ink:#131110;--paper:#F7F5F0;--bronze:#7A5C33;--umber:#524C44;
  --paper-tint:#F1EEE7;--paper-deep:#E9E5DC;--paper-shade:#DED8CC;
  --rule-fine:#D9D3C7;--rule:#C7C0B1;--rule-strong:#A49C8D;--umber-light:#7C756B;
  --ink-raised:#1D1A18;--ink-rule:#332F2B;--ink-rule-strong:#4A443E;--on-ink-mute:#A9A29A;
  --bronze-deep:#5E4626;--bronze-light:#9C7A48;--bronze-wash:#EDE7DB;--link-on-inverse:#C9A876;
  --status-critical:#7B3A2C;

  --surface-page:var(--paper);--surface-raised:var(--paper-tint);--surface-sunken:var(--paper-deep);
  --text-primary:var(--ink);--text-secondary:var(--umber);--text-tertiary:var(--umber-light);--text-accent:var(--bronze);
  --text-on-accent:var(--paper);
  --border-hairline:var(--rule-fine);--border-default:var(--rule);--border-strong:var(--ink);--border-accent:var(--bronze);
  --link:var(--bronze);--link-hover:var(--bronze-deep);--focus-ring:var(--bronze);
  --field-line:#7C756B; /* form underlines: 4.2:1 on paper and on ink, per WCAG 1.4.11 */

  --font-sans:"Aeonik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-serif:"Source Serif 4",Georgia,serif;
  --page-max:1320px;--page-pad:clamp(20px,4vw,64px);
  --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-reveal:cubic-bezier(0.65,0,0.35,1);
  --nx-logo-ink:block;--nx-logo-paper:none;--nx-moon:inline-flex;--nx-sun:none;
  --ink-chapter-bg:#131110;--ink-chapter-alt-bg:#131110;
  /* One display size for every page hero (Site Revisions 01, item B): the homepage values. Post titles keep --display-post. */
  --display-page:clamp(36px,4.8vw,68px);--display-page-lh:1.04;--display-page-ls:-0.025em;--display-page-weight:300;
  --display-post:clamp(32px,4.4vw,58px);
  /* The section headline: every headline that is not a page hero or a post title (Site Revisions 07, item C). */
  --headline-section:clamp(26px,2.7vw,36px);--headline-section-lh:1.12;--headline-section-ls:-0.015em;--headline-section-weight:400;
  --header-h:76px;--section-gap:clamp(64px,8vw,112px);--grid-gutter:32px;
  /* One hero height for the secondary pages (Site Revisions 08, item B); the home hero keeps its own layout. */
  --hero-height:clamp(480px,40vw,560px);
  /* Ink-theme surface ramp, widened 2026-09-05 so adjacent sections differ about as much as paper vs paper-deep
     (L* steps of about 6 and 9 above Ink; warm, no blue cast). Before: raised #282218, sunken #0B0A08. */
  --ink-surface-sunken:#221E1A;--ink-surface-raised:#2A241F;
}
/* In the ink site theme an explicitly ink chapter would match the page ground, so it takes the sunken step instead. */
html[data-site-theme="ink"]{--ink-chapter-bg:var(--ink-surface-sunken)}
html[data-site-theme="ink"] .chapter[data-theme="ink"]{background:var(--surface-sunken)}
html[data-site-theme="ink"] .chapter[data-theme="ink"] .chapter-num{color:var(--surface-page)}
/* An ink chapter that follows a sunken one takes the raised step instead, so neighbors never share a tone. */
html[data-site-theme="ink"]{--ink-chapter-alt-bg:var(--ink-surface-raised)}
html[data-site-theme="ink"] .chapter--ink-alt[data-theme="ink"]{background:var(--surface-raised)}
html[data-site-theme="ink"] .quote-section[data-theme="ink"]{background:var(--surface-sunken)!important}
/* Dark scope: any element with data-theme="ink" (the whole page when the ink theme is on). */
[data-theme="ink"]{
  --surface-page:#131110;--surface-raised:var(--ink-surface-raised);--surface-sunken:var(--ink-surface-sunken);
  --text-primary:var(--paper);--text-secondary:var(--on-ink-mute);--text-tertiary:var(--on-ink-mute);--text-accent:var(--link-on-inverse);
  --border-hairline:#3B342B;--border-default:var(--ink-rule-strong);--border-strong:var(--paper);
  --link:var(--link-on-inverse);--link-hover:var(--paper);--focus-ring:var(--link-on-inverse);
  --status-critical:#D9977F; /* error text on ink surfaces; the paper-theme #7B3A2C fails on dark */
  --nx-logo-ink:none;--nx-logo-paper:block;
}
[data-theme="paper"]{
  --surface-page:var(--paper);--surface-raised:var(--paper-tint);--surface-sunken:var(--paper-deep);
  --text-primary:var(--ink);--text-secondary:var(--umber);--text-tertiary:var(--umber-light);--text-accent:var(--bronze);
  --border-hairline:var(--rule-fine);--border-default:var(--rule);--border-strong:var(--ink);
  --link:var(--bronze);--link-hover:var(--bronze-deep);--focus-ring:var(--bronze);
  --nx-logo-ink:block;--nx-logo-paper:none;
}
[data-site-theme="ink"]{--nx-moon:none;--nx-sun:inline-flex}
[data-site-theme="paper"]{--nx-moon:inline-flex;--nx-sun:none}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--surface-page);color-scheme:light}
html[data-site-theme="ink"]{color-scheme:dark}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:400 17px/1.62 var(--font-sans);text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-0.015em;text-wrap:balance}
p{margin:0}
a{color:var(--link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--link) 40%,transparent);transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out)}
a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
img,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
button{font-family:inherit}
::selection{background:var(--bronze);color:var(--paper)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border:0}
.skip-link:focus{top:12px}

.wrap{max-width:var(--page-max);margin:0 auto;padding-left:var(--page-pad);padding-right:var(--page-pad)}
.page{background:var(--surface-page);color:var(--text-primary);display:flex;flex-direction:column;min-height:100vh}
.page > main{flex:1}

/* ---------- Type helpers ---------- */
.eyebrow{font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-secondary)}
.eyebrow--accent{color:var(--text-accent);letter-spacing:0.16em}
.rule-mark{width:48px;height:2px;background:var(--text-accent)}
.kicker{display:flex;flex-direction:column;gap:16px}
.display{font-weight:300;letter-spacing:-0.025em;line-height:1.04;text-wrap:balance}
.standfirst{margin:0;padding-top:24px;border-top:1px solid var(--border-hairline);font-size:clamp(18px,1.8vw,23px);font-weight:400;line-height:1.5;max-width:52ch;color:var(--text-secondary);text-wrap:pretty}
.prose{display:flex;flex-direction:column;gap:24px;font-size:17px;line-height:1.62;max-width:64ch}
.prose p{margin:0}
.lede{margin:0;font-size:clamp(21px,2.2vw,28px);font-weight:300;line-height:1.4;letter-spacing:-0.015em;max-width:52ch}
.caption{font-size:13px;color:var(--text-secondary)}
.serif-quote{margin:0;padding:0;font-family:var(--font-serif);font-weight:300;font-style:italic;letter-spacing:-0.01em;line-height:1.24}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:17px;white-space:nowrap;align-self:flex-start}
.arrow-link svg{width:15px;height:15px;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;font:500 15px/1.1 var(--font-sans);letter-spacing:0.01em;border-radius:0;text-decoration:none;cursor:pointer;transition:color 180ms var(--ease-out),background-color 180ms var(--ease-out),border-color 180ms var(--ease-out);box-shadow:none;white-space:nowrap}
.btn:active{filter:brightness(0.88)}
.btn--sm{padding:9px 16px;font-size:13px;gap:8px}
.btn--lg{padding:18px 34px;font-size:17px;gap:12px}
.btn--full{display:flex;width:100%}
.btn--primary{background:transparent;color:var(--text-primary);border:1px solid var(--text-primary)}
.btn--primary:hover{background:var(--text-primary);color:var(--surface-page);border-color:var(--text-primary)}
/* Bronze fills retired from buttons (Visual Identity Guide: bronze is a small accent; MASTER_PAGE_PROMPT: the primary button is an outline that fills). */

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--surface-page);border-bottom:1px solid var(--border-hairline);color:var(--text-primary)}
.site-header .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header a:not(.btn){border-bottom:none;color:inherit}
.brand{display:block}
.brand img{width:150px;height:auto}
.nx-logo-ink{display:var(--nx-logo-ink)}
.nx-logo-paper{display:var(--nx-logo-paper)}
.nav-desktop{display:none;align-items:center;gap:clamp(20px,3vw,40px);white-space:nowrap}
.nav-link{position:relative;display:inline-block;font:400 15px/1 var(--font-sans);letter-spacing:0.01em;color:var(--text-secondary);padding-bottom:4px;transition:color 180ms var(--ease-out)}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--border-strong);transition:width 280ms var(--ease-out)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--text-primary)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{width:100%}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--text-secondary);cursor:pointer;transition:color 180ms var(--ease-out)}
.icon-btn:hover{color:var(--text-accent)}
.icon-btn svg{width:18px;height:18px}
.icon-btn--menu{color:var(--text-primary)}
.icon-btn--menu svg{width:24px;height:24px}
.nx-moon{display:var(--nx-moon);align-items:center}
.nx-sun{display:var(--nx-sun);align-items:center}
.theme-toggle{margin:0 -8px}
.menu-btn{display:flex}
@media (min-width:880px){.nav-desktop{display:flex}.menu-btn{display:none}}
.site-menu{position:fixed;inset:0;z-index:60;background:#131110;color:#F7F5F0;display:none;flex-direction:column}
.site-menu[data-open]{display:flex;animation:nxMenuIn 280ms var(--ease-out)}
.site-menu .menu-bar{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 20px;border-bottom:1px solid #332F2B;flex:none}
.site-menu .menu-bar img{width:140px}
.site-menu nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:36px;padding:40px 24px}
.site-menu nav a{color:#F7F5F0;font-weight:300;font-size:34px;line-height:1.1;letter-spacing:-0.015em;border-bottom:none;align-self:flex-start}
.site-menu .menu-foot{padding:0 24px 40px;flex:none}
.site-menu .icon-btn{color:#A9A29A}
.site-menu .icon-btn--close{color:#F7F5F0}
@keyframes nxMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
body[data-menu-open]{overflow:hidden}

/* ---------- Chapter rail ---------- */
/* The rail lives in the left gutter, one grid gutter from the text column: its right edge sits at the column's left edge
   minus --grid-gutter, so its distance from the text is constant at every width. It shows only when the gutter can hold
   it: the rail's rendered width (41px) plus a grid gutter on each side (32px + 32px = 105px). The gutter is
   (100vw - --page-max) / 2 + --page-pad, which reaches 105px at 1417px, the rail threshold. Below that the rail is absent. */
.rail{display:none;position:fixed;left:calc((100vw - var(--page-max)) / 2 + var(--page-pad) - var(--grid-gutter));top:50%;transform:translate(-100%,-50%);z-index:30;flex-direction:column;gap:22px;align-items:flex-start}
.rail-track{position:relative;width:1px;height:72px;background:var(--border-hairline);margin-left:3px}
.rail-fill{position:absolute;top:0;left:0;width:1px;height:0;background:var(--text-accent)}
.rail-item{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:0.14em;color:var(--text-secondary);transition:color 280ms;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.rail-item b{width:14px;height:1px;background:transparent;transition:background 280ms}
.rail-item[aria-current="true"]{color:var(--text-primary)}
.rail-item[aria-current="true"] b{background:var(--text-accent)}
@media (min-width:1417px){.rail[data-ready]{display:flex}}

/* ---------- Heroes ---------- */
.hero{background:var(--surface-page);color:var(--text-primary)}
.hero--ruled{border-bottom:1px solid var(--border-hairline)}
.hero-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 clamp(32px,4vw,64px)}
.hero-copy{flex:1.4 1 440px;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(48px,6vw,88px) 0}
.hero-figure{flex:1 1 320px;margin:0;min-width:min(100%,320px);position:relative;overflow:hidden;min-height:280px;max-height:560px}
.hero-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-figure--tall{min-height:clamp(280px,50vw,460px)}
.hero-figure--tall img{inset:-48px 0;height:calc(100% + 96px)}
.hero-figure--plain{min-height:clamp(280px,50vw,460px)}
@media (min-width:880px){
  .hero:not(.home-hero) .hero-grid{min-height:var(--hero-height)}
  .hero:not(.home-hero) .hero-copy{padding:clamp(48px,6vw,88px) 0;justify-content:center}
  .hero:not(.home-hero) .hero-figure{min-height:280px;max-height:none;align-self:stretch}
}
.hero-display{font-size:var(--display-page);line-height:var(--display-page-lh);font-weight:var(--display-page-weight);letter-spacing:var(--display-page-ls);text-wrap:balance}
.hero-display--xl{font-size:var(--display-page)}
.hero-h1{margin:0;font-size:clamp(18px,1.8vw,23px);font-weight:400;line-height:1.5;max-width:52ch;color:var(--text-secondary);text-wrap:pretty}
.hero-h1--ruled{padding-top:24px;border-top:1px solid var(--border-hairline)}
.hero-h1--display{font-size:var(--display-page);line-height:var(--display-page-lh);font-weight:var(--display-page-weight);letter-spacing:var(--display-page-ls);color:var(--text-primary);max-width:none}
.hero-tag{margin-top:8px;padding-top:24px;border-top:1px solid var(--border-hairline);font-size:clamp(21px,2.1vw,27px);font-weight:300;letter-spacing:-0.015em;color:var(--text-primary)}
.scroll-cue{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-secondary)}
.scroll-cue::before{content:"";width:1px;height:36px;background:var(--border-hairline)}

/* Home hero */
.home-hero .hero-grid{padding:clamp(40px,6vw,88px) 0;gap:40px 48px}
.home-hero .hero-copy{flex:1.15 1 440px;padding:0}
.home-hero .hero-h1{font-size:clamp(17px,1.7vw,21px);line-height:1.55}
.hero-canvas-host{flex:1 1 320px;min-height:300px;position:relative}
.hero-canvas-host canvas{position:absolute;inset:0;pointer-events:none;color:var(--text-tertiary)}
.home-intro{border-top:1px solid var(--border-hairline)}
.home-intro .wrap{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.photo-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.photo-trio img{width:100%;height:clamp(200px,22vw,280px);object-fit:cover}

/* About hero */
.about-hero .hero-copy{flex:1.2 1 440px;gap:32px;padding:clamp(56px,7vw,96px) 0}
.about-name{text-wrap:balance}
.about-hero .hero-h1{padding-top:28px;border-top:1px solid var(--border-hairline);max-width:46ch}
.about-hero .hero-figure{flex:1 1 320px;min-width:min(100%,320px);min-height:clamp(320px,60vw,520px);max-height:none}

/* ---------- Chapters (numbered editorial sections) ---------- */
.chapter{position:relative;overflow:hidden;background:var(--surface-page);color:var(--text-primary)}
[data-theme]{color:var(--text-primary)}
.chapter--sunken{background:var(--surface-sunken)}
.chapter--raised{background:var(--surface-raised)}
.chapter-num{position:absolute;top:clamp(16px,3vw,40px);right:clamp(8px,2vw,32px);font-size:clamp(160px,26vw,380px);line-height:0.8;font-weight:200;color:var(--surface-sunken);user-select:none;pointer-events:none}
.chapter--sunken .chapter-num{color:var(--surface-page)}
.chapter--raised .chapter-num{color:var(--surface-page)}
[data-theme="ink"].chapter .chapter-num,[data-theme="ink"] .chapter .chapter-num{color:var(--surface-raised)}
[data-theme="ink"].chapter--raised .chapter-num{color:var(--surface-page)}
[data-theme="ink"].chapter--sunken .chapter-num{color:var(--surface-raised)}
/* A numeral may sit behind text at its outline weight, never under a link, a form field, or a button. Where a chapter's
   interactive element reaches into the numeral's space, the numeral shows only from the measured width at which that
   element clears it, and is absent below (Consultation 01: the application form; Work 01 and 02: the screenshot links). */
.chapter-num--from-1436{display:none}@media (min-width:1436px){.chapter-num--from-1436{display:block}}
.chapter-num--from-1726{display:none}@media (min-width:1726px){.chapter-num--from-1726{display:block}}
.chapter-num--from-1934{display:none}@media (min-width:1934px){.chapter-num--from-1934{display:block}}
.chapter .wrap{position:relative}
.chapter-grid{display:flex;flex-wrap:wrap;gap:40px 32px;padding:clamp(64px,8vw,112px) 0}
.chapter-grid--loose{padding:clamp(72px,9vw,136px) 0}
.chapter-grid--airy{padding:clamp(80px,10vw,144px) 0}
.chapter-head{flex:1 1 240px;max-width:380px}
.chapter-head-inner{display:flex;flex-direction:column;gap:16px}
.chapter-head--sticky .chapter-head-inner{position:sticky;top:108px}
.chapter-head h2,.headline-section{font-size:var(--headline-section);font-weight:var(--headline-section-weight);letter-spacing:var(--headline-section-ls);line-height:var(--headline-section-lh)}
.chapter-body{flex:2 1 440px;min-width:min(100%,440px);max-width:64ch}
.chapter-body--wide{max-width:70ch}
.chapter-body--narrow{flex:1.6 1 400px;min-width:min(100%,400px);max-width:60ch}
.chapter-body .prose{max-width:none}
.chapter-head--stacked{display:flex;flex-direction:column;gap:32px}
.chapter-grid--practice{gap:48px 32px;align-items:flex-start}
.chapter-body--stack28{display:flex;flex-direction:column;gap:28px}
.chapter-side{flex:1 1 280px;min-width:min(100%,260px)}
.inline-figure{margin:8px 0;display:flex;flex-direction:column;gap:10px}
.inline-figure img{width:100%;aspect-ratio:5/2;object-fit:cover}
.aside-figure{margin:0;display:flex;flex-direction:column;gap:10px}
.note-line{border-top:1px solid var(--border-hairline);padding-top:20px;color:var(--text-secondary)}
.note-line strong{color:var(--text-primary);font-weight:500}
/* Portfolio screenshots (client work) sit in .shot: rounded and clipped corners, a hairline, and the bottom 2.5% cropped
   because the Safari captures carry a white strip and rounded window corners there. Photography never uses this class. */
.shot{position:relative;overflow:hidden;border:1px solid var(--border-hairline);border-radius:1.4% / 2.9%;aspect-ratio:1600/796;width:100%;background:var(--surface-sunken)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;border:0;transform:none}
.shot a,.shot a:hover{border:0}
/* A screenshot that links to the live client site: no image hover exists on the site, so the hairline lifts to the secondary text token. */
.shot-link{display:block;border-bottom:none;color:inherit}
.shot-link:hover{border-bottom:none;color:inherit}
.shot-link .shot{transition:border-color 180ms var(--ease-out)}
.shot-link:hover .shot{border-color:var(--text-secondary)}
/* A homepage screenshot inside a journal article (post 202): the wrapper takes the image's own height instead of the Work
   page's 2:1 crop, the corner radius keeps the Work page's proportion at the article's width, and the arrow link sits close under it. */
.article .shot{aspect-ratio:auto;border-radius:min(1.4vw,10px)}
.article .shot img{height:auto;object-fit:fill}
.article .shot+.arrow-link{margin-top:-10px}

/* Photo bands. The neighbors' backgrounds meet at the image's vertical midpoint (top half from the section above,
   bottom half from the section below), so the parallax never reveals the page ground. Set per band with
   --band-top and --band-bottom; --ink-chapter-bg is what a data-theme="ink" chapter paints. */
.band{position:relative;overflow:hidden;--band-top:var(--surface-page);--band-bottom:var(--surface-page)}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:50%;z-index:0}
.band::before{top:0;background:var(--band-top)}
.band::after{bottom:0;background:var(--band-bottom)}
.band img{position:relative;z-index:1;display:block;width:100%;height:clamp(240px,36vw,480px);object-fit:cover}
.band--tall img{height:clamp(240px,38vw,500px)}
.band--taller img{height:clamp(280px,42vw,560px)}
.band--short img{height:clamp(220px,30vw,400px)}
.band--index img{height:clamp(240px,32vw,420px)}

/* Rows (stages, engagements, contact, privacy, journal) */
.rows{display:flex;flex-direction:column}
.rows > *{border-top:1px solid var(--border-hairline)}
.rows-end{border-top:1px solid var(--border-hairline)}
.stage{padding:22px 0;display:flex;gap:24px}
.stage-n{flex:none;width:32px;font-size:15px;font-variant-numeric:tabular-nums;color:var(--text-accent);padding-top:2px}
.stage-t{font-size:19px;font-weight:500;letter-spacing:-0.015em}
.stage-d{font-size:16px;line-height:1.55;color:var(--text-secondary);max-width:58ch}
.stage-body{display:flex;flex-direction:column;gap:6px}
.stage-body h3{font-size:19px;font-weight:500;letter-spacing:-0.015em}
.engagement{padding:26px 0;display:flex;flex-wrap:wrap;gap:8px 32px}
.engagement-name{flex:1 1 220px;display:flex;flex-direction:column;gap:4px}
.engagement-name h3{font-size:20px;font-weight:500;letter-spacing:-0.015em}
.engagement-price{font-size:15px;color:var(--text-accent)}
.engagement-desc{flex:1.4 1 280px;font-size:16px;line-height:1.55;color:var(--text-secondary)}
.pair-row{padding:28px 0;display:flex;flex-wrap:wrap;gap:16px 32px}
.pair-row--tight{padding:24px 0;gap:8px 32px}
.pair-label{flex:0 0 180px;font-size:13px;font-weight:500;letter-spacing:0.02em;color:var(--text-accent)}
.pair-body{flex:1 1 300px;display:flex;flex-direction:column;gap:20px}
.pair-body p{font-size:17px;line-height:1.62}
.big-mail{font-size:clamp(21px,2.4vw,30px);font-weight:300;letter-spacing:-0.015em;align-self:flex-start}

/* FAQ */
.faq details summary::-webkit-details-marker{display:none}
.faq details summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:18px;font-weight:500;letter-spacing:-0.01em}
.faq details summary svg{flex:none;width:16px;height:16px;color:var(--text-secondary);transition:transform 280ms var(--ease-reveal)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{margin:0;padding:0 40px 24px 0;font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:60ch}

/* Case grid (home) */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,4vw,56px)}
.case{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--border-hairline);padding-top:24px}
.case h2,.case h3{font-size:20px;font-weight:500;letter-spacing:-0.015em;line-height:1.3}
.case p{font-size:16px;line-height:1.55;color:var(--text-secondary);max-width:52ch}

/* Pull-quote section */
.quote-section .wrap{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);display:flex;justify-content:center}
.quote-section blockquote{font-size:clamp(30px,3.6vw,52px);line-height:1.22;max-width:26ch;text-align:center}

/* ---------- Forms ---------- */
.field{display:grid;gap:8px}
.field label{font-size:13px;line-height:1.34;letter-spacing:0.01em;color:var(--text-secondary)}
.field label .req{color:var(--text-accent)}
.input{width:100%;font:400 17px/1.62 var(--font-sans);color:var(--text-primary);background:transparent;border:0;border-bottom:1px solid var(--field-line);border-radius:0;padding:12px 0;outline:none;transition:border-color 180ms var(--ease-out);box-shadow:none}
.input:focus{border-bottom-color:var(--border-accent)}
.input[aria-invalid="true"]{border-bottom-color:var(--status-critical)}
textarea.input{resize:vertical;line-height:1.62}
.field-error{font-size:13px;color:var(--status-critical)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px 32px}
.form-stack{display:flex;flex-direction:column;gap:36px}
.form-status{border-top:1px solid var(--border-hairline);padding-top:32px;display:flex;flex-direction:column;gap:12px}
.form-status-title{font-size:clamp(21px,2vw,26px);font-weight:400;letter-spacing:-0.015em}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--surface-page);color:var(--text-primary)}
.newsletter-inner{border-top:1px solid var(--border-hairline);padding:clamp(56px,7vw,88px) 0 clamp(64px,8vw,96px);display:flex;flex-direction:column;gap:24px}
.newsletter h2{font-size:var(--headline-section);font-weight:var(--headline-section-weight);letter-spacing:var(--headline-section-ls);line-height:var(--headline-section-lh)}
.newsletter p{font-size:17px;line-height:1.62;color:var(--text-secondary);max-width:56ch}
.newsletter form{display:flex;flex-direction:column;gap:24px;margin-top:8px}
.newsletter .caption{margin:0}
@media (min-width:720px){
  .newsletter-inner{display:grid;grid-template-columns:4fr 1fr 7fr;gap:32px;align-items:start}
  .newsletter-head{display:flex;flex-direction:column;gap:20px}
  .newsletter-body{display:flex;flex-direction:column;gap:28px;padding-top:6px}
  .newsletter form{flex-direction:row;align-items:flex-end;margin-top:0}
  .newsletter form .field{flex:1;min-width:0}
  .newsletter .btn--full{display:inline-flex;width:auto}
}

/* ---------- Closing section ---------- */
.closing{background:var(--surface-raised);color:var(--text-primary)}
.closing-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(32px,4vw,72px);padding:clamp(56px,7vw,96px) 0}
.closing-copy{flex:1.2 1 420px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.closing h2{font-size:var(--headline-section);font-weight:var(--headline-section-weight);letter-spacing:var(--headline-section-ls);line-height:var(--headline-section-lh)}
.closing p{font-size:17px;line-height:1.62;color:var(--text-secondary);max-width:52ch}
.closing figure{flex:1 1 340px;margin:0;position:relative;overflow:hidden;min-height:320px;max-height:460px;min-width:min(100%,300px)}
.closing figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-page);color:var(--text-primary);border-top:1px solid var(--border-hairline)}
.site-footer .wrap{padding-top:clamp(64px,8vw,96px)}
.site-footer a{color:var(--text-primary);border-bottom:none;transition:color 180ms var(--ease-out);font-size:15px}
.site-footer a:hover{color:var(--link)}
.footer-grid{display:flex;flex-direction:column;gap:48px}
.footer-brand{display:flex;flex-direction:column;gap:18px}
.footer-brand img{width:156px}
.footer-brand p{font-size:15px;line-height:1.6;color:var(--text-secondary);max-width:34ch}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px}
.footer-col{display:flex;flex-direction:column;gap:14px}
.footer-col .eyebrow{letter-spacing:0.16em;margin-bottom:4px}
.footer-col a.eyebrow{font-size:11px}
.footer-col--contact{grid-column:1 / -1}
.footer-col .muted{font-size:15px;color:var(--text-secondary)}
.footer-bar{margin-top:clamp(56px,7vw,80px);border-top:1px solid var(--border-hairline);padding:16px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bar .copy{font-size:13px;color:var(--text-secondary)}
.footer-bar-right{display:flex;align-items:center;gap:16px}
.footer-bar a{font-size:13px;color:var(--text-secondary)}
.footer-bar .theme-toggle{margin:0 -13px 0 0}
@media (min-width:720px){
  .footer-grid{display:grid;grid-template-columns:5fr 2fr 2fr 3fr;gap:32px;align-items:start}
  .footer-brand{gap:20px}
  .footer-brand img{width:168px}
  .footer-cols{display:contents}
  .footer-col--contact{grid-column:auto}
  .footer-col .eyebrow{margin-bottom:6px}
}

/* ---------- Journal index ---------- */
.journal-filters{background:var(--surface-sunken)}
.journal-filters .wrap{padding-top:clamp(40px,5vw,64px)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{cursor:pointer;border:1px solid var(--border-default);background:transparent;color:var(--text-primary);padding:9px 16px;font:500 13px/1.2 var(--font-sans);letter-spacing:0.02em;transition:border-color 180ms var(--ease-out),background-color 180ms var(--ease-out),color 180ms var(--ease-out)}
.chip[aria-pressed="true"]{background:var(--text-primary);color:var(--surface-page);border-color:var(--text-primary)}
.chip-desc{margin-top:20px;font-size:14px;line-height:1.6;color:var(--text-secondary);max-width:64ch;min-height:22px}
.journal-list{background:var(--surface-sunken)}
.journal-list .wrap{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(64px,8vw,112px)}
.post-row{display:block;color:inherit;border-bottom:none;border-top:1px solid var(--border-hairline);padding:26px 0;transition:background-color 180ms var(--ease-out)}
.post-row:hover{background:var(--surface-raised);color:inherit}
.post-row[hidden]{display:none}
.post-row-grid{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline}
.post-row .pillar{flex:0 0 200px;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-secondary)}
.post-row .post-main{flex:1.4 1 300px;display:flex;flex-direction:column;gap:6px}
.post-row h2,.post-row h3{font-size:20px;font-weight:500;letter-spacing:-0.015em;line-height:1.3}
.post-row .summary{font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:56ch}
.post-row .meta{flex:0 0 110px;font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.journal-hero .hero-figure{min-height:clamp(280px,50vw,480px)}

/* ---------- Journal post ---------- */
.post-header .wrap{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(40px,5vw,64px)}
.post-head{max-width:820px;display:flex;flex-direction:column;gap:20px}
.post-head .kicker{gap:14px}
.post-head h1{font-size:var(--display-post);font-weight:300;letter-spacing:-0.025em;line-height:1.06}
.byline{font-size:14px;color:var(--text-secondary)}
.post-layout .wrap{padding-bottom:var(--section-gap)}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--section-gap) var(--grid-gutter);align-items:start}
.post-main{min-width:0}
.post-aside{min-width:0}
.post-aside-inner{display:flex;flex-direction:column;gap:40px}
.author-card,.letter-compact{border-top:1px solid var(--border-hairline);padding-top:24px;display:flex;flex-direction:column;gap:14px}
.author-card p{font-size:17px;line-height:1.62;color:var(--text-secondary);max-width:56ch}
.letter-compact h2{font-size:var(--headline-section);font-weight:var(--headline-section-weight);letter-spacing:var(--headline-section-ls);line-height:var(--headline-section-lh)}
.letter-compact p{font-size:15px;line-height:1.6;color:var(--text-secondary);max-width:44ch}
.letter-compact form{display:flex;flex-direction:column;gap:20px;margin-top:6px}
.letter-compact .caption{margin:0}
/* Two columns from 1100px: below that the sidebar would fall under 240px beside the 64ch measure. */
@media (min-width:1100px){
  .post-grid{grid-template-columns:64ch minmax(0,33.333%)}
  .post-aside{position:sticky;top:calc(var(--header-h) + var(--section-gap))}
  .post-aside[data-no-stick]{position:static}
}
.article{max-width:64ch;font-size:17px;line-height:1.7;border-top:1px solid var(--border-hairline);padding-top:clamp(32px,4vw,48px)}
.article > *{margin:0 0 26px}
.article > *:last-child{margin-bottom:0}
.article h2{font-size:clamp(23px,2.4vw,30px);font-weight:400;letter-spacing:-0.015em;line-height:1.2;margin-top:44px}
.article h3{font-size:20px;font-weight:500;letter-spacing:-0.01em;line-height:1.3;margin-top:32px}
.article blockquote{margin:32px 0;padding:0;font-family:var(--font-serif);font-weight:300;font-style:italic;font-size:clamp(24px,2.5vw,32px);line-height:1.3;letter-spacing:-0.01em}
.article blockquote p{margin:0}
.article ul,.article ol{padding-left:1.3em;display:flex;flex-direction:column;gap:10px}
.article li{padding-left:4px}
.article strong{font-weight:500}
.article hr{border:0;border-top:1px solid var(--border-hairline);margin:40px 0}
.article table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.article th,.article td{text-align:left;padding:10px 12px 10px 0;border-top:1px solid var(--border-hairline);vertical-align:top}
.article th{font-weight:500}
.article .table-wrap{overflow-x:auto}
.article img{width:100%;height:auto}
.article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.92em}
.post-figure{margin:clamp(40px,5vw,56px) 0 0;max-width:820px;position:relative;overflow:hidden;height:clamp(260px,36vw,460px)}
.post-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-footer .wrap{padding-bottom:clamp(48px,6vw,72px)}
.author-block{max-width:820px;border-top:1px solid var(--border-accent);padding-top:clamp(28px,3.5vw,40px);display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center}
.author-block img{width:72px;height:72px;object-fit:cover;object-position:50% 30%;flex:none}
.author-block > div{flex:1 1 300px;display:flex;flex-direction:column;gap:6px}
.author-block p{font-size:17px;line-height:1.62;color:var(--text-secondary);max-width:56ch}
.related .wrap{padding-top:0;padding-bottom:var(--section-gap)}
.related-inner{display:flex;flex-direction:column;gap:24px}
.related .post-row{padding:22px 0}
.related .post-row h3{font-size:19px}

/* ---------- 404 ---------- */
.notfound main{display:flex;align-items:stretch}
.notfound .hero-grid{width:100%}
.notfound .hero-copy{padding:clamp(64px,9vw,140px) 0}
.notfound h1{font-size:var(--display-page);font-weight:var(--display-page-weight);letter-spacing:var(--display-page-ls);line-height:var(--display-page-lh)}
.notfound .lede-sm{font-size:clamp(17px,1.8vw,21px);line-height:1.55;color:var(--text-secondary);max-width:44ch}
.link-row{display:flex;flex-wrap:wrap;gap:16px 32px;padding-top:24px;border-top:1px solid var(--border-hairline);margin-top:8px}

/* ---------- Mobile image rhythm (Site Revisions 01, item A). Desktop untouched. ---------- */
@media (max-width:879px){
  .chapter-head--sticky .chapter-head-inner{position:static}
  /* A1: the books image stays out of the intro trio on mobile */
  .home-intro .photo-trio > .trio-books,.home-intro .photo-trio > .trio-townhouses{display:none} /* lazy + display:none: never requested on mobile; the intro shows the coffee table image only */
  /* A2: 01 · The lookup reads headline, two paragraphs, studio photo, third paragraph */
  .home-lookup .chapter-grid{display:flex;flex-direction:column;gap:24px}
  .home-lookup .chapter-head,.home-lookup .chapter-body{display:contents}
  .home-lookup .kicker{order:1;margin-bottom:16px}
  .home-lookup .chapter-body > p:nth-of-type(1){order:2}
  .home-lookup .chapter-body > p:nth-of-type(2){order:3}
  .home-lookup .chapter-head > img{order:4;margin:8px 0}
  .home-lookup .chapter-body > p:nth-of-type(3){order:5}
  /* A3: 04 · The practice reads headline, paragraph, portrait, pull quote, link */
  .home-practice .chapter-grid{display:flex;flex-direction:column;gap:28px}
  .home-practice .chapter-head,.home-practice .chapter-body,.home-practice .chapter-side{display:contents}
  .home-practice .chapter-head-inner{order:1;margin-bottom:12px}
  .home-practice .chapter-body > p{order:2}
  .home-practice .aside-figure{order:3;margin:4px 0}
  .home-practice .chapter-body > blockquote{order:4}
  .home-practice .chapter-body > .arrow-link{order:5}
  /* Revisions 02, B: each case card reads title, text, screenshot on mobile */
  .case > h2{order:1}
  .case > p{order:2}
  .case > .shot{order:3;margin-top:6px}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0ms!important;transition-duration:0ms!important;scroll-behavior:auto!important}
}
@media print{
  .site-header,.site-menu,.rail,.newsletter,.closing,.theme-toggle{display:none!important}
  [data-reveal],[data-mask],[data-zoom]{opacity:1!important;transform:none!important;clip-path:none!important}
}