/* site.css: shared tokens and typography craft for every page.
   Loaded after fonts.css. Page-specific styles still live in each page;
   rules here use html:root / html body to win over older page rules without !important where possible. */

html:root{
  --paper:#f3f2ee; --on-paper:#0e0e0e; --on-paper-2:#6f6d68;
  --ink:#0e0e0e; --on-ink:#f3f2ee;
  --hair:rgba(14,14,14,.16); --rule-p:rgba(14,14,14,.85);
  --pad:20px; --gap:20px;
  --font:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --head:var(--font);
  /* Type roles (prefer these tokens over ad-hoc sizes)
     --fs-label     section labels / nav chrome
     --fs-cap       captions / meta
     --fs-body      body copy
     --fs-lead      ledes / about tag
     --fs-statement case statements / closes
     --fs-headline  next-project titles / mid display
     --fs-display   case page titles / splash name
  */
  --fs-label:11px;
  --fs-cap:12px;
  --fs-body:clamp(15px, 14px + .25vw, 18px);
  --fs-lead:clamp(18px, 15px + .6vw, 24px);
  --fs-statement:clamp(30px, 4.2vw, 60px);
  --fs-headline:clamp(40px, 22px + 5vw, 104px);
  --fs-display:clamp(72px, 12.5vw, 210px);
  --s-section:clamp(72px, 10vw, 140px);
}
@media (min-width:900px){ html:root{ --pad:28px; --gap:28px } }

/* images carry width/height for layout stability; let CSS keep control of the rendered size */
:where(img[width][height]){height:auto}

html body{
  font-family:var(--font);
  font-variant-numeric:tabular-nums lining-nums;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

/* skip link + screen-reader text */
.skip{position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:-80px;z-index:1000;background:var(--on-paper);color:var(--paper);
  padding:12px 16px;font:500 14px/1 var(--font);text-decoration:none;transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
h2.label{font-weight:inherit;margin-top:0;font-family:inherit}

/* body copy: left aligned, no forced hyphenation, one fluid size on every width */
html body .body{font-size:var(--fs-body);line-height:1.55}
html body .body p,html body .body li{text-wrap:pretty}

/* headlines: balanced lines, no widows */
h1,h2,h3,.label,.statement p,.close p,.next strong,.slide h2,.pn strong,.row h3,.mini{text-wrap:balance}

/* hanging punctuation on statements (Safari supports it natively) */
.statement p,.close p{hanging-punctuation:first allow-end}

/* trim the empty space above caps and below the baseline on page titles */
@supports (text-box:trim-both cap alphabetic){ main h1{text-box:trim-both cap alphabetic} }

/* small caps-style labels read slightly looser, display type slightly tighter (optical sizing by hand) */
.cap,.label,.meta,.specs,.credits{letter-spacing:.01em}

/* considered underlines */
.body a,.cap a,.cap .more,.meta a,.credits a{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-skip-ink:auto;
  transition:text-decoration-thickness .15s,text-underline-offset .15s}
.body a:hover,.cap a:hover,.cap .more:hover,.meta a:hover,.credits a:hover{text-decoration-thickness:2px;text-underline-offset:.16em}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- dark mode (opt-in from the footer switch; remembered per browser) ---------- */
html[data-theme="dark"]:root{
  --paper:#111110; --on-paper:#efeee9; --on-paper-2:#a19e96;
  --hair:rgba(239,238,233,.16); --rule-p:rgba(239,238,233,.8);
  --ink:#070707; --on-ink:#efeee9; --on-ink-2:rgba(239,238,233,.6);
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--paper);color:var(--on-paper)}

/* ---------- motion switch: everything stops, content stays visible ---------- */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-motion="off"] .tl,html[data-motion="off"] .tw span{opacity:1!important}

/* ---------- page transitions between home and case pages ---------- */
@view-transition{navigation:auto}
::view-transition-group(gm-hero),::view-transition-group(gm-title){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
html[data-motion="off"]::view-transition-group(*),html[data-motion="off"]::view-transition-old(*),html[data-motion="off"]::view-transition-new(*){animation:none!important}

/* ---------- footer controls: copy email, dark mode, motion ---------- */
.gm-prefs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px}
.gm-prefs button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em}
.gm-prefs .gm-copy{border:1px solid currentColor;padding:0 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.gm-prefs .gm-copy:hover{background:var(--on-ink,#f3f2ee);color:var(--ink,#0e0e0e)}
.gm-sw i{width:28px;height:16px;border-radius:8px;border:1px solid currentColor;position:relative;opacity:.8}
.gm-sw i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:currentColor;transition:transform .2s}
.gm-sw[aria-checked="true"] i::after{transform:translateX(12px)}
.gm-sw[aria-checked="true"] i{opacity:1}

/* ---------- toast ---------- */
.gm-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:200;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--on-paper,#0e0e0e);color:var(--paper,#f3f2ee);padding:10px 14px;font:500 13px/1.2 var(--font);transition:opacity .2s,transform .2s}
.gm-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- command palette ---------- */
.gm-cmdk{border:1px solid var(--on-paper);padding:0;width:min(560px,calc(100vw - 32px));background:var(--paper);color:var(--on-paper);margin-top:14vh}
.gm-cmdk::backdrop{background:rgba(10,10,10,.5)}
.gm-cmdk input{width:100%;border:0;border-bottom:1px solid var(--hair,rgba(14,14,14,.16));padding:16px 18px;font:500 18px/1.2 var(--font);background:transparent;color:inherit;outline:none}
.gm-cmdk ul{list-style:none;margin:0;padding:6px;max-height:min(50vh,360px);overflow:auto}
.gm-cmdk li{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;font-size:15px;cursor:pointer}
.gm-cmdk li em{font-style:normal;font-size:12px;color:var(--on-paper-2)}
.gm-cmdk li[aria-selected="true"]{background:var(--on-paper);color:var(--paper)}
.gm-cmdk li[aria-selected="true"] em{color:inherit;opacity:.7}
.gm-cmdk li.none{cursor:default;color:var(--on-paper-2)}
.gm-cmdk p{margin:0;padding:8px 14px;border-top:1px solid var(--hair,rgba(14,14,14,.16));font-size:11px;color:var(--on-paper-2)}
.gm-cmdk kbd{font:inherit;border:1px solid var(--hair,rgba(14,14,14,.2));padding:1px 5px;margin-right:2px}

/* reading progress bar, every page */
.gm-rp{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--on-paper);z-index:200;pointer-events:none}

/* page motion stop/start — lives in the header (not a floating pill over content) */
.gm-pm{font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.gm-pm:hover{opacity:.6}
.gm-pm:focus-visible{outline:2px solid currentColor;outline-offset:3px}
header.top .gm-pm{justify-self:end}
header.top .nav .gm-pm,header.top .top-r .gm-pm{margin-left:clamp(10px,1.6vw,18px)}
html[data-halt="on"] .gm-pm,html[data-motion="off"] .gm-pm{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
  header.top .gm-pm{font-size:10px;letter-spacing:.1em}
}

/* November 2026 polish: shared legibility, safe areas and predictable controls.
   Deliberately does not change artwork crops, page copy or motion choreography. */
html{scroll-padding-top:clamp(64px,8vw,112px)}
html body :where(.gut){padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
html body :where(.row,.meta,.credits,.bento,.mosaic,.social,.social2,.room-grid)>*{min-width:0}
html body :where(.body,.lede,.case-opening){overflow-wrap:break-word}
html body :where(figcaption,.cap){font-family:var(--font);font-size:var(--fs-cap);line-height:1.45;letter-spacing:.01em;overflow-wrap:break-word}
html body :where(.body p,.body li){max-width:70ch}
html body :where(button,a,input,summary):focus-visible{outline:2px solid currentColor;outline-offset:3px}
html body :where(button,[role="button"]){touch-action:manipulation}
html body :where(.top,.portfolio-nav){padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
html body :where(.top .nav,.portfolio-nav nav){min-width:0}
html body :where(.top a,.portfolio-nav a){text-underline-offset:.25em}
@media(max-width:700px){
  html:root{--pad:clamp(16px,4.5vw,20px);--gap:16px}
  html body :where(.row,.meta,.credits,.room-grid)>*{min-width:0}
  html body :where(.cap,figcaption){font-size:12px}
  html body :where(.top,.portfolio-nav){column-gap:12px}
}
@media(prefers-reduced-motion:reduce){
  html body :where(.rv){opacity:1;transform:none}
  html body :where(.gm-ab-photo,.gm-press,.gm-exp,.gm-ab-contact){animation:none}
}