/* Self-hosted fonts — Fraunces (display) + Newsreader (text), latin subset, variable
   weight, served same-origin: faster, private (no Google call), keeps the CSP strict.
   Re-fetch from the Google Fonts css2 API (Chrome UA) if a face ever changes. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/fraunces.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic.woff2) format('woff2');}
:root{
  --paper:#f5f2ea; --ink:#211e19; --muted:#5f594e; --line:#ddd6c8;
  /* MAT SYSTEM — one framing language with two GLOBAL dials (weight + bottom-bias).
     Each surface sets its own --ms (side mat, tuned to ~4.5% of that image's width);
     the foot derives as --ms x --mat-foot. Pure % can't track height-capped images in
     CSS, so sizes are per-surface; width-pinned wrappers (figs) use true %. */
  --mat:#fcfbf8; --key:rgba(33,30,25,0.18); --key-soft:rgba(33,30,25,0.15);
  --tile:#e7e1d4; --card:#efe9dd; --card-hover:#e9e1d0; --wall:#6f6450;   /* warm surfaces + the dimmed loupe wall (gallery dusk) */
  --mat-scale:1;     /* GLOBAL mat weight — 1.0 ≈ 5% (measured). Turn this one knob (e.g. 1.1 ≈ 5.5%). */
  --mat-foot:1.33;   /* foot ÷ side (bottom-weighting) */
  --serif:'Fraunces', Georgia, serif;
  --text:'Newsreader', Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
/* Control-contrast rule: every interactive affordance (dots, arrows, loupe close, links) sits at >=3:1 on the paper — tune control tones here, not per component. */
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--text);
  font-size:19px; line-height:1.6; -webkit-font-smoothing:antialiased;}
img{display:block;}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:2px;}
.wrap{max-width:1400px; margin:0 auto; padding:30px 52px 64px;}

header{display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--line);}
/* The wordmark is a deliberate LOGOTYPE in Newsreader (the calm text serif), not Fraunces —
   Fraunces' display J read too characterful at mark size. The photoapp "Copy matted" signature
   uses the same Newsreader, so the mark is identical on the web + in prints. consistency.cjs guards it. */
.mark{font-family:var(--text); font-size:25px; font-weight:500; letter-spacing:.01em; text-decoration:none; color:var(--ink);}
.mark small{font-family:var(--sans); font-size:12px; font-weight:400; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; margin-left:9px;}
nav{font-family:var(--sans); font-size:16px; display:flex; gap:22px;}
nav a{color:var(--ink); text-decoration:none; letter-spacing:.01em; padding:6px 1px; display:inline-block;}
nav a:hover{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}
nav a.on{color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}

/* prose links — on-palette (ink + underline), never the browser default blue: 404, essays, About, future copy */
.page-head a, .work-intro a, .essay a, .spread .text-page a, .land-text a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.page-head a:hover, .work-intro a:hover, .essay a:hover, .spread .text-page a:hover, .land-text a:hover{color:var(--muted);}

/* mobile menu button + overlay (button shown only on narrow screens) */
.menu-btn{display:none; align-items:center; gap:8px; background:none; border:0; cursor:pointer; color:var(--ink); font-family:var(--sans); font-size:14px; letter-spacing:.01em; padding:8px 2px;}
.menu-btn svg{display:block;}
.menu-overlay{position:fixed; inset:0; z-index:60; background:var(--paper); display:none; flex-direction:column; padding:24px 26px 40px;}
.menu-overlay.open{display:flex;}
.menu-top{display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; margin-bottom:28px; border-bottom:1px solid var(--line);}
.menu-mark{font-family:var(--text); font-size:23px; font-weight:500; color:var(--ink);}  /* Newsreader logotype — see .mark */
.menu-close{background:none; border:0; font:300 36px/1 var(--serif); color:var(--ink); cursor:pointer; padding:0 4px 6px;}
.menu-overlay a{font-family:var(--serif); font-size:30px; font-weight:500; color:var(--ink); text-decoration:none; padding:18px 2px; border-bottom:1px solid var(--line);}
.menu-overlay a.on{color:var(--muted);}
.menu-btn:focus-visible, .menu-close:focus-visible, .menu-overlay a:focus-visible{outline:3px solid var(--ink); outline-offset:3px;}

footer{display:flex; justify-content:space-between; font-family:var(--sans); font-size:12px;
  color:var(--muted); letter-spacing:.02em; margin-top:72px; padding-top:18px; border-top:1px solid var(--line);}
footer a{color:var(--muted); text-decoration:underline; text-underline-offset:3px;}

.stage{position:relative; height:min(78vh,1080px); margin-top:36px; display:flex; align-items:center; justify-content:center;}
.stage img{position:absolute; max-width:100%; max-height:100%; width:auto; height:auto; opacity:0; transition:opacity 0.25s ease; pointer-events:none; cursor:zoom-in;}
.stage img.active{opacity:1; pointer-events:auto;}
.dots{display:flex; justify-content:center; gap:2px; margin-top:14px;}
.dot{width:30px; height:30px; padding:0; border:0; background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.dot::before{content:""; width:11px; height:11px; border-radius:50%; background:var(--muted); transition:background .3s;}
.dot.on::before{background:var(--ink);}

/* hero arrows — high-contrast disc; on touch/small screens they auto-hide (hero.js adds .idle) + reappear on interaction */
.arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:50px; height:50px; padding:0 0 4px; border:0; border-radius:50%; background:rgba(252,251,248,0.92); color:var(--ink); font:300 30px/1 var(--serif); cursor:pointer; opacity:.92; box-shadow:0 0 0 1px rgba(33,30,25,0.22); transition:opacity .2s, background .2s; display:flex; align-items:center; justify-content:center;}
.arrow.prev{left:12px;}
.arrow.next{right:12px;}
.arrow:hover{opacity:1; background:var(--mat);}
.arrow.idle{opacity:0; pointer-events:none; transition:opacity .6s;}   /* gentle fade-out; wakes fast via the base .2s */

/* loupe / lightbox — a matted print, floated with space on a dimmed ground */
.lightbox{position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; background:var(--wall); padding:4vmin; cursor:zoom-out;}
.lightbox.open{display:flex;}
/* loupe mat: CSS fallback (portrait-tuned); loupe.js overrides --ms to exactly 5% of the rendered image so BOTH orientations match the page */
.lb-mat{display:inline-block; background:var(--mat); box-sizing:border-box; --ms:calc(clamp(16px,1.7vw,26px) * var(--mat-scale)); padding:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key); cursor:default;}
.lb-mat img{display:block; max-width:72vw; max-height:72vh; width:auto; height:auto;}
.lb-close{position:fixed; top:16px; right:22px; z-index:51; width:46px; height:46px; padding:0 0 3px; border:0; border-radius:50%; background:rgba(245,242,234,0.14); color:var(--paper); font:300 28px/1 var(--serif); cursor:pointer; transition:background .2s;}
.lb-close:hover{background:rgba(245,242,234,0.26);}
.lb-close:focus-visible{outline:3px solid var(--ink); outline-offset:3px;}
.intro{text-align:center; color:var(--muted); font-size:22px; line-height:1.5; max-width:30rem; margin:34px auto 0;}

.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:64px;}
.door{cursor:pointer; text-decoration:none; color:var(--ink); display:block;}
.door .pic{aspect-ratio:3/4; overflow:hidden; background:var(--tile); border:1px solid var(--key-soft);}
.door .pic picture, .folio .pic picture{display:block; width:100%; height:100%;}  /* a <Plate> wrapper must fill the cover tile so the img height:100% + object-fit:cover resolves */
.door .pic img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s ease;}
.door:hover .pic img{transform:scale(1.03);}
.door .name{font-family:var(--serif); font-size:22px; font-weight:500; margin:14px 0 2px;}
.door .sub{font-family:var(--sans); font-size:13px; color:var(--muted);}

.kicker{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.page-head{text-align:center; max-width:38rem; margin:46px auto 42px;}
.page-head .kicker{display:block; margin-bottom:16px;}
.page-head h1{font-family:var(--serif); font-weight:500; font-size:34px; margin:16px 0 18px; letter-spacing:.01em;}
.page-head .statement{color:var(--muted); font-size:20px; line-height:1.6;}

.essay{max-width:40rem; margin:0 auto;}
.essay .kicker{display:block; margin:46px 0 14px;}
.essay h1{font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.18; margin:0 0 12px;}
.essay .meta{font-family:var(--sans); font-size:13px; color:var(--muted); letter-spacing:.03em; margin-bottom:32px;}
.essay-hero{margin:0 0 30px;}
.essay-hero img{width:100%;}
.essay h2{font-family:var(--serif); font-weight:500; font-size:23px; margin:40px 0 10px;}
.essay p{font-size:22px; line-height:1.68; margin:0 0 1.1em;}
.essay p.lead::first-letter, .text-page .standfirst + p::first-letter, .land-text .standfirst + p::first-letter{-webkit-initial-letter:3; initial-letter:3; font-family:var(--serif); font-weight:500; margin-right:0.14em; color:var(--ink);}
.pull{font-family:var(--serif); font-style:italic; font-size:25px; line-height:1.4;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; margin:34px 0; text-align:center;}
.essay .essay-note{font-style:italic; color:var(--muted); font-size:17px; margin-top:34px;}  /* essay end-note (provenance) */
.essay .contact{margin-top:30px;}  /* About: space above the get-in-touch line */

.field-kicker{display:flex; justify-content:space-between; font-family:var(--sans); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:40px 0 16px;}
.field-kicker a{color:var(--muted); text-decoration:none;}  /* Days entry back-link */
.spread{display:grid; grid-template-columns:54% 1fr; grid-template-areas:"img text" "alt text"; align-items:start; border:1px solid var(--line); background:var(--paper);}
.spread .img-page{grid-area:img; padding:38px; text-align:center;}
.spread .img-page img{display:block; width:100%; height:auto;}
.spread .text-page{grid-area:text; padding:38px 40px; border-left:1px solid var(--line);}
.spread h1{font-family:var(--serif); font-weight:500; font-size:29px; margin:0 0 6px;}
.spread .field-meta{font-family:var(--sans); font-size:12px; letter-spacing:.05em; color:var(--muted); margin-bottom:22px;}
.spread p{font-size:22px; line-height:1.66; margin:0 0 1em;}
.img-page .caption{font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--muted); margin-top:11px;}
.spread .alt{grid-area:alt; padding:0 38px 36px; text-align:center;}
.spread .alt .lab{font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px;}
.spread .alt img{width:auto; height:auto; max-width:min(100%,360px); margin-left:auto; margin-right:auto; box-sizing:border-box; --ms:calc(16px * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.spread .alt .note{font-family:var(--text); font-style:italic; font-size:15px; color:var(--muted); line-height:1.45; margin:9px auto 0; max-width:34ch;}
.tech{font-family:var(--sans); font-size:12px; color:var(--muted); margin-top:16px; letter-spacing:.02em;}
.field-nav{display:flex; justify-content:space-between; font-family:var(--sans); font-size:13px; color:var(--muted); margin-top:18px;}

@media (max-width:760px){
  .wrap{padding:22px 22px 44px;}
  header{align-items:center; position:sticky; top:0; z-index:40; background:var(--paper);}
  nav{display:none;}
  .menu-btn{display:flex;}
  .stage{height:min(64vh,540px);}
  .doors{grid-template-columns:1fr; gap:30px;}
  .page-head h1, .essay h1{font-size:30px;}
}

.work-intro{text-align:center; max-width:34rem; margin:44px auto 38px;}
.work-intro .kicker{display:block; margin-bottom:14px;}
.work-intro p{color:var(--muted); font-size:19px; margin:0;}
.work-index{display:grid; grid-template-columns:repeat(2,1fr); gap:40px 30px; max-width:1050px; margin-left:auto; margin-right:auto;}
.folio{text-decoration:none; color:var(--ink); display:block;}
.folio .pic{aspect-ratio:3/4; overflow:hidden; background:var(--tile); border:1px solid var(--key-soft);}
.folio .pic img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s ease;}
.folio:hover .pic img{transform:scale(1.04);}
.folio .name{font-family:var(--serif); font-size:24px; font-weight:500; margin:16px 0 3px;}
.folio .desc{font-family:var(--sans); font-size:13px; color:var(--muted); line-height:1.5;}
.crumb{font-family:var(--sans); font-size:13px; color:var(--muted); text-decoration:none; display:inline-block; margin:6px 0 0;}
@media (max-width:760px){ .work-index{grid-template-columns:1fr; gap:34px;} }

.spread .standfirst{font-family:var(--text); font-style:italic; font-size:22px; line-height:1.45; color:var(--ink); margin:0 0 20px; max-width:32ch;}

.field-archive{margin-top:6px;}
.year{font-family:var(--serif); font-weight:500; font-size:15px; letter-spacing:.03em; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:8px; margin:42px 0 4px;}
.entry{display:flex; gap:22px; align-items:flex-start; text-decoration:none; color:var(--ink); padding:22px 2px; border-bottom:1px solid var(--line);}
.entry .ethumb{flex:0 0 88px;}
.entry .ethumb img{width:88px; height:110px; object-fit:cover; display:block;}
.entry .ebody{flex:1;}
.entry .etitle{font-family:var(--serif); font-size:21px; font-weight:500; margin:0 0 5px;}
.entry .etake{font-family:var(--text); font-style:italic; font-size:17px; color:var(--ink); line-height:1.45; margin:0 0 9px;}
.entry .emeta{font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase;}
.entry .eno{flex:0 0 auto; font-family:var(--sans); font-size:12px; color:var(--muted); letter-spacing:.05em; padding-top:3px;}
.entry:hover .etitle{text-decoration:underline; text-underline-offset:3px;}
@media (max-width:760px){ .entry .ethumb{flex:0 0 66px;} .entry .ethumb img{width:66px; height:84px;} .entry .eno{display:none;} }

.prev-link{display:inline-block; font-family:var(--sans); font-size:13px; color:var(--muted); text-decoration:none; margin-top:42px;}
.next-entry{display:flex; align-items:center; gap:30px; text-decoration:none; color:var(--ink); background:var(--card); padding:26px 30px; margin-top:18px; transition:background .3s;}
.next-entry:hover{background:var(--card-hover);}
.next-entry .nthumb{flex:0 0 190px;}
.next-entry .nthumb img{width:190px; height:138px; object-fit:cover; display:block;}
.next-entry .nbody{flex:1; min-width:0;}
.next-entry .nkick{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.next-entry .ntitle{font-family:var(--serif); font-size:29px; font-weight:500; line-height:1.12; margin:0 0 6px;}
.next-entry .ntake{font-family:var(--text); font-style:italic; font-size:18px; color:var(--muted); line-height:1.45;}
.next-entry .narrow{flex:0 0 auto; font-family:var(--serif); font-size:40px; color:var(--muted); transition:transform .3s, color .3s;}
.next-entry:hover .ntitle{text-decoration:underline; text-underline-offset:3px;}
.next-entry:hover .narrow{transform:translateX(6px); color:var(--ink);}
@media (max-width:640px){ .next-entry{gap:18px; padding:20px;} .next-entry .nthumb{flex:0 0 110px;} .next-entry .nthumb img{width:110px; height:84px;} .next-entry .ntitle{font-size:23px;} .next-entry .ntake{font-size:16px;} .next-entry .narrow{display:none;} }

.land-hero img{width:100%; display:block;}
.land-hero .caption{font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--muted); margin-top:11px; text-align:center;}
.land-body{max-width:40rem; margin:42px auto 0;}
.land-text{flex:1; min-width:0;}
.land-text h1{font-family:var(--serif); font-weight:500; font-size:29px; margin:0 0 6px;}
.land-text .field-meta{font-family:var(--sans); font-size:12px; letter-spacing:.05em; color:var(--muted); margin-bottom:18px;}
.land-text .standfirst{font-family:var(--text); font-style:italic; font-size:22px; line-height:1.45; color:var(--ink); margin:0 0 20px; max-width:34ch;}
.land-text p{font-size:22px; line-height:1.66; margin:0 0 1em;}
.land-aside{margin-top:42px; text-align:center;}
.land-aside .lab{font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px;}
.land-aside img{width:auto; height:auto; max-width:min(100%,360px); margin-left:auto; margin-right:auto; display:block; box-sizing:border-box; --ms:calc(16px * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.land-aside .note{font-family:var(--text); font-style:italic; font-size:15px; color:var(--muted); line-height:1.45; margin:9px auto 0; max-width:34ch;}
@media (max-width:880px){
  .spread{grid-template-columns:1fr; grid-template-areas:"img" "text" "alt";}
  .spread .img-page{padding:22px 22px 0;}
  .spread .text-page{padding:24px; border-left:0; border-top:1px solid var(--line);}
  .spread .alt{padding:24px; border-top:1px solid var(--line);}
}

.portfolio-seq{margin-top:6px;}
.portfolio-seq img{cursor:zoom-in;}

.seed{display:flex; justify-content:center; margin:0 0 44px;}
.seed img{max-width:560px; max-height:730px; width:auto; height:auto; display:block; box-sizing:border-box; --ms:calc(26px * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.pair{display:flex; gap:clamp(24px,2.8vw,48px); align-items:flex-start; margin:0 0 58px;}
.pair img{min-width:0; width:100%; height:auto; display:block;}
@media (max-width:640px){ .seed img{max-width:100%; --ms:calc(16px * var(--mat-scale));} .pair{flex-direction:column; gap:18px; margin-bottom:30px; align-items:stretch;} }

.gmat{--mx:calc(clamp(15px,1.65vw,23px) * var(--mat-scale)); background:var(--mat); box-sizing:border-box; padding:var(--mx) var(--mx) calc(var(--mx) * var(--mat-foot)); outline:1px solid var(--key); flex-shrink:1; flex-basis:calc(2 * var(--mx)); min-width:0;}
.gmat img{width:100%; display:block;}

/* solo feature — a single image standing alone, large, capped to the viewport */
.feature{display:flex; justify-content:center; margin:0 0 clamp(40px,6vh,84px);}
.feature img{display:block; max-width:100%; max-height:80vh; width:auto; height:auto; box-sizing:border-box; --ms:calc(clamp(24px,2.8vw,46px) * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.stage img{--ms:calc(clamp(21px,2.75vh,31px) * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
/* large plates — tuned per representative width so all land on ~4.5% side / ~6% foot */
.land-hero img{--ms:calc(clamp(28px,3vw,44px) * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.essay-hero img{--ms:calc(clamp(22px,2.5vw,38px) * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.spread .img-page img{--ms:calc(clamp(17px,1.75vw,25px) * var(--mat-scale)); border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
@media (max-width:640px){ .essay-hero img, .spread .img-page img, .land-hero img{--ms:calc(16px * var(--mat-scale));} }

.vp-series{font-family:var(--serif); font-weight:500; font-size:21px; color:var(--ink); margin:48px 0 0; padding-bottom:10px; border-bottom:1px solid var(--line);}
.vp-series .sub{font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--muted); margin-left:12px; text-transform:uppercase;}

.essay.article{max-width:52rem;}
.fig{margin:34px 0; clear:both;}
.fig .matw{display:block; box-sizing:border-box; background:var(--mat); border:1px solid var(--key); --ms:calc(4.5% * var(--mat-scale)); padding:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot));}
.fig .matw img{width:100%; display:block;}
.fig .cap{font-family:var(--sans); font-size:12px; color:var(--muted); margin-top:9px; letter-spacing:.02em;}
.fig-right{float:right; width:46%; margin:8px 0 22px 38px; clear:none;}
.fig-left{float:left; width:46%; margin:8px 38px 22px 0; clear:none;}
.fig-wide{width:min(66rem,92vw); margin-left:50%; transform:translateX(-50%);}
.fig-full{width:min(86rem,94vw); margin-left:50%; transform:translateX(-50%);}
.fig:not(.fig-left):not(.fig-right):not(.fig-plate) .matw{max-width:min(100%, 105vh); margin-left:auto; margin-right:auto;}

.about-portrait{margin:6px 0 38px; width:min(54rem,92vw); margin-left:50%; transform:translateX(-50%);}
.about-portrait img{display:block; width:100%; height:auto; border:1px solid var(--key-soft);}
.article h2{clear:both;}
@media (max-width:640px){
  .fig-right, .fig-left{float:none; width:100%; margin:28px 0;}
  .fig-wide, .fig-full{width:100%; margin:28px 0 34px; transform:none; margin-left:0;}
}

.spread .img-page img, .essay-hero img, .fig-wide img, .land-hero img{max-height:82vh; width:auto; max-width:100%; height:auto; display:block; margin-left:auto; margin-right:auto;}
@media (max-height:900px){ .pair{max-width:1080px; margin-left:auto; margin-right:auto;} }

.fig-plate{clear:both; text-align:center; max-width:min(56vh,540px); margin-left:auto; margin-right:auto;}
.fig-plate .cap{text-align:center;}

/* Chaptered portfolios — a multi-part Work shows ONE chapter at a time; chapters.js pages between
   them (title arrows + a foot "next"). Single-chapter Works never emit `.acts`, so are untouched. */
.act{display:none;}
.act.active{display:block;}
.act-head{text-align:center; max-width:38rem; margin:6px auto 30px;}
.act-of{display:block; font-family:var(--sans); font-size:12px; letter-spacing:.22em; color:var(--muted); margin-bottom:12px;}
.act-title-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;}
.act-title{font-family:var(--serif); font-weight:500; font-size:27px; letter-spacing:.01em; margin:0;}
.act-nav-slot{display:flex; align-items:center;}
.act-title-row > .act-nav-slot:first-child{justify-content:flex-end;}
.act-title-row > .act-nav-slot:last-child{justify-content:flex-start;}
.act-nav{background:none; border:0; cursor:pointer; font:300 34px/1 var(--serif); color:var(--muted); padding:2px 8px; transition:color .2s, transform .2s;}
.act-nav:hover{color:var(--ink);}
.act-title-row > .act-nav-slot:first-child .act-nav:hover{transform:translateX(-3px);}
.act-title-row > .act-nav-slot:last-child .act-nav:hover{transform:translateX(3px);}
.act-intro{color:var(--muted); font-size:20px; line-height:1.6; margin:16px auto 0; max-width:34rem;}
.act-foot{display:flex; justify-content:center; margin:6px 0;}
.act-foot-next{display:inline-flex; align-items:baseline; gap:12px; background:none; border:0; border-top:1px solid var(--line); cursor:pointer; color:var(--ink); padding:22px 16px 0; transition:color .2s;}
.act-foot-next .afn-lab{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.act-foot-next .afn-title{font-family:var(--serif); font-size:22px; font-weight:500;}
.act-foot-next .afn-arrow{font-family:var(--serif); font-size:26px; color:var(--muted); transition:transform .2s, color .2s;}
.act-foot-next:hover .afn-arrow{transform:translateX(4px); color:var(--ink);}
@media (max-width:640px){ .act-title{font-size:23px;} .act-nav{font-size:30px;} }

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  .door:hover .pic img, .folio:hover .pic img{transform:none;}
}





/* ============================================================================
   ART SITE — Chris Brock retrospective. Captioned plates, chaptered contents,
   cover landing + foreword. Built on the house tokens (paper/ink, mat system).
   ============================================================================ */

/* landing cover */
.land-cover{display:flex; flex-direction:column; align-items:center; text-align:center; margin:30px auto 8px; max-width:900px;}
.cover-pic{display:flex; justify-content:center; width:100%;}
.cover-pic img{max-height:min(62vh,720px); max-width:100%; width:auto; height:auto;
  box-sizing:border-box; --ms:calc(20px * var(--mat-scale));
  border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.cover-text{margin-top:30px;}
.cover-text h1{font-family:var(--serif); font-weight:500; font-size:46px; letter-spacing:.01em; margin:0;}
.cover-sub{font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:14px 0 0;}
.cover-blurb{font-family:var(--text); font-style:italic; color:var(--muted); font-size:20px; line-height:1.6; max-width:32rem; margin:18px auto 0;}

/* chapter page head — roman numeral cue */
.page-head .act-of{display:block; font-family:var(--sans); font-size:12px; letter-spacing:.22em; color:var(--muted); margin:14px 0 4px;}
.page-head .crumb{margin-bottom:4px;}

/* captioned plate sequence */
.art-seq{max-width:760px; margin:8px auto 0;}
.artplate{margin:0 0 64px; text-align:center;}
.artplate .frame{display:flex; justify-content:center;}
.artplate .frame img{max-width:100%; max-height:74vh; width:auto; height:auto; box-sizing:border-box;
  --ms:calc(20px * var(--mat-scale));
  border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.artplate figcaption{max-width:34rem; margin:18px auto 0;}
.pl-title{display:block; font-family:var(--serif); font-style:italic; font-weight:500; font-size:21px; color:var(--ink); line-height:1.35;}
.pl-meta{display:block; font-family:var(--sans); font-size:12.5px; letter-spacing:.04em; color:var(--muted); margin-top:7px;}
.pl-note{display:block; font-family:var(--text); font-size:16px; line-height:1.6; color:var(--muted); margin-top:12px;}

/* prev / next chapter */
.chapter-nav{display:flex; justify-content:space-between; gap:20px; margin:8px auto 0; max-width:760px; border-top:1px solid var(--line); padding-top:22px;}
.chapter-nav .cn{text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:3px; max-width:46%;}
.chapter-nav .cn.next{text-align:right; margin-left:auto;}
.cn-lab{font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--muted);}
.cn-title{font-family:var(--serif); font-size:19px; font-weight:500;}
.chapter-nav .cn:hover .cn-title{color:var(--muted);}

/* foreword */
.foreword{max-width:38rem; margin:0 auto;}
.foreword .page-head{margin-bottom:30px;}
.foreword p{font-size:19px; line-height:1.72; margin:0 0 20px;}
.fw-lead{font-size:21px; line-height:1.7;}
.fw-lead::first-letter{font-family:var(--serif); font-weight:500; font-size:3.1em; float:left; line-height:.82; padding:6px 10px 0 0; color:var(--ink);}
.fw-sign{font-family:var(--serif); font-style:italic; color:var(--muted); margin-top:30px;}
.dedication{border-top:1px solid var(--line); margin-top:40px; padding-top:30px; text-align:center;}
.dedication p{font-family:var(--text); font-style:italic; color:var(--muted); font-size:17.5px; line-height:1.7; max-width:32rem; margin:0 auto 16px;}

/* life dates on the cover */
.cover-dates{font-family:var(--sans); font-size:13px; letter-spacing:.24em; color:var(--muted); margin:10px 0 0;}

/* home hero — full content-column width, landscape (the Staithes painting) */
.land-cover{max-width:none;}
.cover-pic img{width:100%; height:auto; max-height:none; --ms:calc(18px * var(--mat-scale));}

/* three home gateways (Paintings · Retrospective · For Dad) */
.doors.three{grid-template-columns:repeat(3,1fr); max-width:1080px; margin-left:auto; margin-right:auto;}
@media (max-width:760px){ .doors.three{grid-template-columns:1fr; gap:30px;} }
/* the splash painting is itself a study — show it's zoomable */
.cover-pic img{cursor:zoom-in;}

/* tribute page — portrait plate + signature */
.tribute-portrait{display:flex; flex-direction:column; align-items:center; margin:0 0 34px;}
.tribute-portrait img{max-width:280px; height:auto; box-sizing:border-box; --ms:calc(12px * var(--mat-scale));
  border-style:solid; border-color:var(--mat); border-width:var(--ms) var(--ms) calc(var(--ms) * var(--mat-foot)); outline:1px solid var(--key);}
.tribute-portrait .pl-meta{margin-top:12px;}
.fw-sign-sub{font-size:16px; color:var(--muted);}