/* ═══════════════════════════════════════════════════
   Yang Soon Ju - shared stylesheet
   Type switch: change --disp / --disp-w / --trim only.
   A. DM Serif Display  400  trim .030   ← shipped
   B. Libre Bodoni      700  trim .028
   C. Playfair Display  700  trim .034
   ═══════════════════════════════════════════════════ */
:root{
  --disp:'DM Serif Display', Didot, Georgia, serif;
  --disp-w:400;
  --trim:.030;

  --bg:#EFE7DA;
  --bg-2:#E7DECE;
  --ink:#141210;
  --accent:#CF4504;
  --accent-lt:#F0703A;
  --accent-deep:#7D0000;
  --grey:#655F56;
  --line:#D6CDBB;
  --f:'Archivo',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pad{padding:0 clamp(14px,3vw,40px)}
.wrap{max-width:1180px;margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ── bar ─────────────────────────────────────────── */
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;padding-bottom:26px;flex-wrap:wrap}
.meta{font-family:var(--f);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);text-decoration:none}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a:hover,.nav a:focus-visible{color:var(--accent-deep)}
.nav a[aria-current]{color:var(--ink)}
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:34px;padding:0;background:none;border:1px solid var(--line);cursor:pointer}
.menu-btn .bars{position:relative;display:block;width:18px;height:1px;background:var(--ink);transition:background .2s ease}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);transition:transform .25s ease,top .25s ease}
.menu-btn .bars::before{top:-6px}
.menu-btn .bars::after{top:6px}
.menu-btn[aria-expanded="true"] .bars{background:transparent}
.menu-btn[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}

/* ── page headings ───────────────────────────────── */
.head{padding-top:clamp(10px,2vw,28px);padding-bottom:clamp(8px,1.6vw,20px)}
.title{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(46px,12.5vw,172px);line-height:.87;letter-spacing:-.017em;margin:0;text-transform:uppercase}
.title--sm{font-size:clamp(38px,8vw,104px)}
.title em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--accent)}
.count{font-family:var(--f);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:16px 0 0}
.group-label{
  font-family:var(--f);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-deep);
  margin:0 0 15px;
}
.group-label + .ledger{margin-top:0}
.lede{font-size:clamp(15px,1.8vw,20px);line-height:1.55;max-width:62ch;margin:clamp(16px,2.4vw,28px) 0 0;color:#332F29}
.back{display:inline-block;font-family:var(--f);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);text-decoration:none;margin-bottom:clamp(18px,3vw,32px)}
.back:hover,.back:focus-visible{color:var(--accent)}
.sec{padding-top:clamp(56px,8vw,120px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:clamp(22px,3.4vw,42px)}
.sec-title{font-family:var(--disp);font-weight:var(--disp-w);margin:0;text-transform:uppercase;font-size:clamp(28px,5.2vw,72px);line-height:.95;letter-spacing:-.008em}
.sec-title em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--accent)}
.sec-title a{text-decoration:none;color:inherit;transition:color .2s ease}
.sec-title a:hover{color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--f);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--ink);padding:14px 24px;background:none;color:inherit;cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:hover,.btn:focus-visible{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bg)}

/* ── tone plates - swap the div for an <img> ─────── */
.img{position:relative;overflow:hidden}
.img::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.18;mix-blend-mode:overlay;pointer-events:none;
}
.img > img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* An .img with no file yet shows the path it is waiting for.
   Drop that JPG into place and the label disappears by itself. */
.img.missing::before{
  content:"↓ " attr(data-file);
  position:absolute;left:8px;right:8px;bottom:8px;z-index:3;
  font-family:var(--f);font-size:9px;letter-spacing:.06em;
  color:rgba(255,255,255,.82);text-shadow:0 1px 2px rgba(0,0,0,.5);
  word-break:break-all;line-height:1.4;
}
.img.missing{outline:1px dashed rgba(255,255,255,.28);outline-offset:-5px}
.img.missing > img{display:none}
/* A placeholder has no picture to set its height, so any rule that
   leaves the ratio to the file would collapse it to nothing and the
   tiles would stack. Give every empty slot a floor. */
.img.missing{min-height:clamp(120px,14vw,220px)}
.t-bone{background:linear-gradient(158deg,#D9CEBA,#A2947C 60%,#6E6555)}
.t-rose{background:linear-gradient(158deg,#C97F77,#94473F 62%,#552522)}
.t-blood{background:linear-gradient(158deg,#7E312D,#4A1917 65%,#241010)}
.t-olive{background:linear-gradient(158deg,#5E644B,#363B2A 62%,#1D2016)}
.t-ash{background:linear-gradient(158deg,#8F8A81,#4E4A44 60%,#26241F)}
.t-ink{background:linear-gradient(158deg,#3A3835,#1D1C1A 60%,#0E0D0D)}
.t-sand{background:linear-gradient(158deg,#C2B296,#8C7F66 60%,#554D3E)}
.t-clay{background:linear-gradient(158deg,#B98A6E,#7E5540 62%,#432D22)}
.t-slate{background:linear-gradient(158deg,#8E96A0,#4E555E 60%,#262A2F)}

/* ── home: wordmark, stacks, strips ──────────────── */
.eyebrow{font-family:var(--disp);font-weight:var(--disp-w);text-align:right;font-size:clamp(15px,2.3vw,30px);line-height:1.15;text-transform:uppercase;letter-spacing:.005em;margin:0 0 .1vw}
.eyebrow em{font-style:italic;text-transform:none;letter-spacing:0}
.mark-wrap{overflow:hidden}
.wordmark{font-family:var(--disp);font-weight:var(--disp-w);margin:0;line-height:.84;letter-spacing:0;text-transform:uppercase;white-space:nowrap;display:block;font-size:15vw}
.stack{font-family:var(--disp);font-weight:var(--disp-w);text-align:right;font-size:clamp(15px,2.3vw,30px);line-height:1.18;text-transform:uppercase;letter-spacing:.005em;margin:clamp(28px,6vw,88px) 0 clamp(14px,2vw,26px)}
.stack--left{text-align:left;margin-left:clamp(0px,8vw,140px)}
.stack em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--accent)}

/* The line above a strip introduces it, so it sits close; underneath,
   the number and the hover label already hold 40px, and the next
   heading was adding its own 88 on top of that. Set both sides here
   instead, and stop the heading below from piling on. */
.strip{overflow:hidden;margin:clamp(20px,2.6vw,38px) 0 clamp(10px,1.4vw,22px)}
.strip + .pad .stack{margin-top:0}
/* A section following a strip starts on its own 120px of padding, which
   lands on top of the strip's margin and the number row - three lots of
   space doing one job. Halved here; sections elsewhere keep the full
   rhythm. */
.strip + .pad > .sec:first-child,
.strip + .pad > .slab:first-child{padding-top:clamp(30px,4vw,58px)}
/* Set --strip-gap on a .strip to change the spacing for that run:
   style="--strip-gap:4px". */
.track{display:flex;gap:var(--strip-gap,10px);will-change:transform}
.frame{flex:0 0 auto;width:clamp(112px,13.2vw,178px);cursor:zoom-in;position:relative}
.strip--wide .frame{width:clamp(168px,20.5vw,272px)}
.strip--wide .frame .img{aspect-ratio:3/2}

/* ── mixing orientations in one strip ──
   A run keeps a single height and lets each tile take the width its
   shape asks for, so portrait and landscape can stand side by side and
   still line up top and bottom. --strip-h is whatever height that
   strip's ordinary tiles already come out at.

       <div class="frame wide">   landscape, 3:2
       <div class="frame square"> square
       <div class="frame tall">   portrait, 3:4 - the default

   Works in either strip: a landscape tile can sit in the portrait run
   and vice versa. */
.strip{--strip-h:calc(clamp(112px,13.2vw,178px) * 4 / 3)}
.strip--wide{--strip-h:calc(clamp(168px,20.5vw,272px) / 1.5)}

.frame.wide{width:calc(var(--strip-h) * 3 / 2)}
.frame.wide .img{aspect-ratio:3/2}
.frame.square{width:var(--strip-h)}
.frame.square .img{aspect-ratio:1}
.frame.tall{width:calc(var(--strip-h) * 3 / 4)}
.frame.tall .img{aspect-ratio:3/4}
/* Width comes from the frame, never from the ratio. Without this a
   placeholder in the wide strip takes its height from the min-height
   floor and its width from the 3:2 ratio, ending up wider than the
   frame holding it - so the tiles overlap and the gap disappears. */
.frame .img{width:100%;aspect-ratio:3/4;transition:opacity .3s ease,transform .3s ease}
.frame .no{display:block;text-align:center;font-family:var(--f);font-size:10px;letter-spacing:.1em;color:var(--grey);padding:8px 0 0}
/* the label only appears on hover, so it is taken out of the flow -
   otherwise every frame reserves a line of empty space for it, and the
   strip carries a 16px band under it that never shows anything */
.frame .lbl{position:absolute;left:0;right:0;top:100%;display:block;text-align:center;font-family:var(--disp);font-style:italic;font-size:13px;color:var(--accent-deep);opacity:0;transition:opacity .25s ease;pointer-events:none}
.strip:hover .img{opacity:.3}
.frame:hover .img{opacity:1;transform:translateY(-4px)}
.frame:hover .lbl{opacity:1}
.frame:hover .no{color:var(--ink)}

/* ── lightbox ────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;background:rgba(18,16,14,.96)}
.lb.open{display:flex}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(14px,3vw,40px);flex:0 0 auto}
.lb-count{font-family:var(--f);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9C958A}
.lb-close{width:42px;height:42px;flex:0 0 auto;background:none;border:1px solid #3A362F;color:var(--bg);cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease}
.lb-close:hover,.lb-close:focus-visible{background:var(--accent);border-color:var(--accent)}
.lb-track{flex:1 1 auto;display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 50vw;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.lb-track::-webkit-scrollbar{display:none}
.lb-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.lb-slide{flex:0 0 auto;scroll-snap-align:center}
.lb-slide .media{position:relative;overflow:hidden;aspect-ratio:var(--arn);height:min(66vh, calc(86vw / var(--arn)));opacity:.38;transition:opacity .35s ease}
/* Once a picture is in the slide it sets the width - the frame hugs the
   image instead of letterboxing it inside a guessed ratio. */
/* Until the file is in, the slide holds the shape data-arn declares, so
   the track can be measured and the right plate centred straight away.
   The picture's own shape takes over once it has loaded. */
.lb-slide .media.loaded:has(> img){aspect-ratio:auto;width:auto;max-width:86vw}
/* a slide told to keep its ratio crops to it instead of hugging the file */
.lb-slide .media.fixed:has(> img){aspect-ratio:var(--arn);width:auto}
.lb-slide .media.fixed > img{width:100%;height:100%;object-fit:cover;max-width:none}
.lb-slide .media > img{width:auto;height:100%;max-width:86vw;object-fit:contain;display:block}
.lb-slide.active .media{opacity:1}
.lb-cap{flex:0 0 auto;text-align:center;padding:16px clamp(14px,3vw,40px) clamp(20px,4vh,42px)}
.lb-cap .n{display:block;font-family:var(--f);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9C958A}
.lb-cap .t{display:block;margin-top:4px;font-family:var(--disp);font-style:italic;font-size:clamp(18px,2.4vw,28px);color:var(--bg)}
.lb-hint{display:block;margin-top:12px;font-family:var(--f);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6B655C}

/* ── cards & grids ───────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,34px);margin:clamp(28px,4vw,52px) 0 0;padding:0;list-style:none}

.card{display:block;text-decoration:none;color:inherit}
.card .img{aspect-ratio:4/5;transition:opacity .25s ease}
.card:hover .img,.card:focus-visible .img{opacity:.86}
.card .n{display:block;font-family:var(--f);font-size:10px;letter-spacing:.16em;color:var(--accent-deep);margin-top:12px}
.card h2,.card h3{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(19px,2.1vw,26px);line-height:1.05;letter-spacing:.005em;margin:6px 0 5px;text-transform:uppercase;transition:color .2s ease}
.card:hover h2,.card:hover h3,.card:focus-visible h2,.card:focus-visible h3{color:var(--accent)}
.card .tags{font-family:var(--f);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin:0}
.card .client{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-deep)}
.card p.note{font-size:13.5px;line-height:1.55;color:#4A453D;margin:9px 0 0;max-width:40ch}
.card[data-status="archive"] .img{filter:saturate(.72)}
/* a project with no page yet: shown, but plainly not a link */
.card--todo{cursor:default}
.card--todo:hover h2,.card--todo:hover h3{color:inherit}
.card--todo:hover .img{opacity:1}
.card--todo .tags::after{content:" - page not built";color:var(--accent-deep)}
li.item{margin:0}

/* ── filter chips ────────────────────────────────── */
.filters{margin:clamp(26px,3.6vw,48px) 0 0;border-top:1px solid var(--line);padding-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{font-family:var(--f);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink);padding:10px 15px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.chip .ct{color:var(--grey);margin-left:7px;font-size:10px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip[aria-pressed="true"] .ct{color:#A9A196}
/* The archive tab is not one of the project filters - it swaps the whole
   view for the drawing archive - so it carries its own colour and sits
   apart from the row. */
.chip--archive{
  border-color:var(--accent);color:var(--accent);
  display:inline-flex;align-items:center;gap:9px;
}
.chip--archive .ct{color:var(--accent);opacity:.7}
.chip--archive:hover{background:rgba(207,69,4,.09);border-color:var(--accent)}
.chip--archive[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--bg);
}
.chip--archive[aria-pressed="true"] .ct{color:var(--bg);opacity:.82}

/* the second archive tab - same behaviour, its own colour so the two
   sections are not mistaken for each other */
.chip--archive-2{border-color:var(--forest,#4C5A46);color:#4C5A46}
.chip--archive-2 .ct{color:#4C5A46;opacity:.7}
.chip--archive-2:hover{background:rgba(76,90,70,.1);border-color:#4C5A46}
.chip--archive-2[aria-pressed="true"]{background:#4C5A46;border-color:#4C5A46;color:var(--bg)}
.chip--archive-2[aria-pressed="true"] .ct{color:var(--bg);opacity:.82}
.chips .sep{
  align-self:stretch;width:1px;background:var(--line);
  margin:0 7px;padding:0;list-style:none;
}

.tools{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px}
.toggle{display:inline-flex;align-items:center;gap:9px;font-family:var(--f);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .box{width:15px;height:15px;border:1px solid var(--line);position:relative;flex:0 0 auto;transition:background .2s ease,border-color .2s ease}
.toggle input:checked + .box{background:var(--accent-deep);border-color:var(--accent-deep)}
.toggle input:checked + .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.toggle input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.empty{font-family:var(--disp);font-style:italic;font-size:clamp(19px,2.4vw,28px);color:var(--grey);padding:clamp(40px,7vw,90px) 0;margin:0}

/* ── spreads ─────────────────────────────────────── */
.spread{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(22px,4vw,58px);align-items:center;padding-top:clamp(50px,8vw,120px)}
.spread:nth-of-type(even) .spread-fig{order:2}
.spread-fig .img{aspect-ratio:4/5}
.spread-fig .cap{display:block;margin-top:9px;font-family:var(--f);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

.spread h2{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(28px,5vw,66px);line-height:.96;letter-spacing:-.012em;margin:12px 0 8px;text-transform:uppercase}
.spread h2 em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--accent)}
.spread .kind{font-family:var(--f);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0}
.spread .intro{font-size:clamp(15px,1.7vw,18px);line-height:1.6;color:#332F29;margin:18px 0 0;max-width:48ch}

.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:clamp(26px,4vw,46px) 0}
.specs dt{font-family:var(--f);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 6px}
.specs dd{margin:0;font-size:13.5px;line-height:1.5;color:#332F29}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.8vw,22px);margin-bottom:clamp(24px,3.6vw,42px)}
.plates figure{margin:0}
.plates .img{aspect-ratio:1/1}
.plates figcaption{font-family:var(--f);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:8px}
.body{max-width:66ch}
.body p{font-size:15px;line-height:1.7;color:#332F29;margin:0 0 1.15em}
.body a{color:var(--accent-deep)}
.pull{font-family:var(--disp);font-style:italic;font-size:clamp(20px,2.8vw,34px);line-height:1.24;border-left:2px solid var(--accent);padding-left:clamp(16px,2.4vw,28px);margin:clamp(24px,3.6vw,42px) 0;max-width:44ch}

/* ── ledger / cv lists ───────────────────────────── */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger li{display:block;padding:0;border-bottom:1px solid var(--line)}
.ledger .lrow{display:grid;grid-template-columns:52px 1fr 220px 90px;gap:18px;align-items:baseline;padding:16px 6px;text-decoration:none;color:inherit;transition:background .22s ease,color .22s ease,padding .22s ease}
a.lrow:hover,a.lrow:focus-visible{background:var(--ink);color:var(--bg);padding-left:16px}
a.lrow:hover .n{color:var(--accent-lt)}
a.lrow:hover .k,a.lrow:hover .y{color:#A9A196}
.ledger .n{font-family:var(--f);font-size:11px;letter-spacing:.12em;color:var(--accent-deep)}
.ledger .t{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(16px,1.9vw,23px);line-height:1.26}
.ledger .k,.ledger .y{font-family:var(--f);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.ledger .y{text-align:right}

/* ── accordion ───────────────────────────────────── */
details{border:1px solid var(--line);background:var(--bg-2);margin-bottom:9px}
summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--f);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--disp);font-size:21px;line-height:1;color:var(--accent-deep)}
details[open] summary::after{content:"\2013"}
details[open] summary{border-bottom:1px solid var(--line)}
details p{margin:0;padding:16px 22px 22px;font-size:14px;line-height:1.65;color:#332F29;max-width:64ch}

/* ── timeline ────────────────────────────────────── */
.line{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);margin-left:6px}
.line li{position:relative;padding:0 0 clamp(26px,3.4vw,40px) clamp(20px,3vw,34px)}
.line li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;background:var(--accent);border-radius:50%}
.line .yr{font-family:var(--f);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.line h3{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(19px,2.2vw,27px);margin:6px 0 7px;text-transform:uppercase;line-height:1.06}
.line p{margin:0;font-size:14.5px;line-height:1.62;color:#332F29;max-width:56ch}

/* ── form ────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.field input,.field select,.field textarea{
  font-family:var(--f);font-size:14px;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);padding:13px 14px;border-radius:0;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* ── dark surfaces ───────────────────────────────── */
.slab{background:var(--ink);color:var(--bg);padding:clamp(28px,5vw,64px);margin-top:clamp(60px,9vw,130px)}
.slab .sec-head{border-bottom-color:#35322C}
.slab .sec-title em{color:var(--accent-lt)}
.slab .lede{color:#C7C0B4}
.slab .btn{border-color:var(--bg);color:var(--bg)}
.slab .btn:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:clamp(20px,3vw,34px)}
.rooms .r{aspect-ratio:4/3;position:relative}
/* a room slot hung the other way up - same width, portrait crop */
.rooms .r.tall{aspect-ratio:3/4}
.rooms .r span{position:absolute;left:10px;bottom:8px;z-index:3;font-family:var(--f);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* A foot of shade under the label, so the room name holds against a
   pale photograph. Only on a filled slot - an empty one keeps ::before
   for the path it is waiting for. */
/* an empty slot prints the file it wants along the bottom, so the room
   name steps up a line to make room for it */
.rooms .r.missing span{bottom:26px}
.rooms .r:not(.missing)::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none}

body.dark{background:#100F0D;color:var(--bg)}
body.dark .meta{color:#8E8779}
body.dark .nav a[aria-current]{color:var(--bg)}
body.dark .nav a:hover{color:var(--accent-lt)}
body.dark .menu-btn{border-color:#33302A}
body.dark .menu-btn .bars,body.dark .menu-btn .bars::before,body.dark .menu-btn .bars::after{background:var(--bg)}
body.dark .lede{color:#C7C0B4}
body.dark .count,body.dark .sec-head{color:#8E8779}
body.dark .sec-head{border-bottom-color:#2C2925}
body.dark .sec-title em{color:var(--accent-lt)}
body.dark .back{color:var(--accent-lt)}
body.dark .btn{border-color:var(--bg);color:var(--bg)}
body.dark .btn:hover{background:var(--bg);color:#100F0D}
body.dark .body p{color:#C7C0B4}
body.dark .rule,body.dark .foot,body.dark details{border-color:#2C2925}
body.dark .fine{color:#6C665B}
body.dark .foot p{color:#A9A296}
body.dark .foot a{border-bottom-color:#2C2925}

/* ── galleries: many shots inside one project ────── */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.4vw,16px);margin:0;padding:0;list-style:none}
.gallery li{margin:0}
.gallery .shot{display:block;text-decoration:none;color:inherit;cursor:zoom-in}
.gallery .shot .img{aspect-ratio:1/1;transition:opacity .25s ease,transform .25s ease}
.gallery .shot[data-arn="0.75"] .img{aspect-ratio:3/4}
.gallery .shot[data-arn="1.5"]  .img{aspect-ratio:3/2}
.gallery:hover .shot .img{opacity:.42}
.gallery .shot:hover .img,.gallery .shot:focus-visible .img{opacity:1;transform:translateY(-3px)}
.gallery figcaption{font-family:var(--f);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-top:7px}
.gallery .shot:hover figcaption{color:var(--ink)}

/* feature image at the head of a project */
.feature{margin:clamp(24px,3.6vw,44px) 0 0}
.feature .img{aspect-ratio:16/9}
.feature .cap{display:block;margin-top:10px;font-family:var(--f);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* two vertical plates in place of one wide opener */
.feature--pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.8vw,22px)}

@media (max-width:560px){ .feature--pair{grid-template-columns:1fr} }

/* second-level chips, for material within a discipline */
.chips--sub .chip{border-style:dashed}

@media (max-width:820px){ .gallery{grid-template-columns:repeat(3,1fr)} .feature .img{aspect-ratio:4/3} }
@media (max-width:560px){ .gallery{grid-template-columns:repeat(2,1fr)} }

/* ── dense archive grid + sticky material jump bar ── */
.contents{
  font-family:var(--disp);font-weight:var(--disp-w);
  font-size:clamp(17px,2.2vw,26px);line-height:1.5;
  margin:clamp(20px,3vw,34px) 0 0;max-width:60ch;color:var(--grey);
}
.contents a{
  color:var(--ink);text-decoration:none;font-style:italic;
  border-bottom:1px solid var(--line);transition:border-color .2s ease,color .2s ease;
}
.contents a:hover,.contents a:focus-visible{color:var(--accent);border-color:var(--accent)}
.contents .n{font-family:var(--f);font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--grey)}
.contents a[aria-current]{color:var(--accent);border-color:var(--accent)}
.contents--inline{font-size:clamp(16px,1.9vw,22px);margin:14px 0 0}
.band{padding-top:clamp(40px,6vw,80px);scroll-margin-top:64px}
.gallery--dense{grid-template-columns:repeat(6,1fr);gap:clamp(6px,1vw,12px)}
.gallery--dense figcaption{display:none}
.gallery--dense .shot .img{aspect-ratio:1/1}
.gallery--dense .shot[data-arn="0.75"] .img{aspect-ratio:3/4}
.gallery--dense .shot[data-arn="1.5"]  .img{aspect-ratio:3/2}
/* A run shown short. The held-back plates are on the page - so the
   viewer opens on the whole set - but out of view until the button
   beneath is pressed. */
.clip .hold{display:none}

.more{margin-top:16px}
.more button{
  font-family:var(--f);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--ink);padding:12px 20px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.more button:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (max-width:820px){ .gallery--dense{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .gallery--dense{grid-template-columns:repeat(3,1fr)} }

/* ── exhibition sequence ── */
.gallery--seq{grid-template-columns:repeat(2,1fr);gap:clamp(12px,2.4vw,30px);margin-top:clamp(30px,5vw,64px)}
.gallery--seq .full{grid-column:1/-1}
.gallery--seq .shot .img{aspect-ratio:3/2}
.gallery--seq .full .shot .img{aspect-ratio:16/9}
/* a full-width plate that names its own ratio keeps it, rather than
   being cropped to the 16:9 band - artwork sheets read better whole */
.gallery--seq .full .shot[data-arn="1.5"]  .img{aspect-ratio:3/2}
.gallery--seq .full .shot[data-arn="0.75"] .img{aspect-ratio:3/4}
.gallery--seq .tall .shot .img{aspect-ratio:3/4}
.gallery--seq figcaption{font-family:var(--f);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8E8779;margin-top:10px}
.gallery--seq .shot:hover + figcaption{color:var(--bg)}
@media (max-width:640px){ .gallery--seq{grid-template-columns:1fr} .gallery--seq .shot .img{aspect-ratio:4/3} }

/* ── archive bands: one orientation per material ──
   Fixed boxes mean no measuring and no reflow. Pictures are cropped to
   fit, so the subject wants to sit near the middle of the frame. */
.gallery--dense .shot[data-arn="1.33"] .img{aspect-ratio:4/3}
.gallery--dense.wide{grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){ .gallery--dense.wide{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .gallery--dense.wide{grid-template-columns:repeat(2,1fr)} }

/* ── mosaic: text sits in the grid, not between the grids ──
   Fixed row height, so a picture and a paragraph occupy the same kind
   of cell and the eye reads across rather than in bands. */
.mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,17.5vw,250px);
  gap:clamp(8px,1.4vw,18px);margin:clamp(28px,4vw,52px) 0 0;padding:0;list-style:none;
}
.mosaic .cell{margin:0;position:relative;min-width:0}
.mosaic .cell--w2{grid-column:span 2}

.mosaic .shot{display:block;height:100%;cursor:zoom-in}
.mosaic .shot .img,
.mosaic .shot[data-arn] .img{aspect-ratio:auto;width:100%;height:100%}
.mosaic figure{margin:0;height:100%}
.mosaic figcaption{
  position:absolute;left:10px;bottom:9px;z-index:2;
  font-family:var(--f);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.5);opacity:0;transition:opacity .25s ease;
}
.mosaic .cell:hover figcaption{opacity:1}
.mosaic:hover .shot .img{opacity:.45}
.mosaic .shot:hover .img,.mosaic .shot:focus-visible .img{opacity:1}

.mosaic .cell--text{
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  padding:clamp(14px,1.7vw,24px);border:1px solid var(--line);background:var(--bg-2);
}
.mosaic .cell--text .lbl{font-family:var(--f);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.mosaic .cell--text h3{
  font-family:var(--disp);font-weight:var(--disp-w);margin:0;
  font-size:clamp(19px,2.1vw,28px);line-height:1.06;text-transform:uppercase;
}
.mosaic .cell--text h3 em{font-style:italic;text-transform:none;color:var(--accent)}
.mosaic .cell--text p{margin:8px 0 0;font-size:13px;line-height:1.55;color:#3A362F}
.mosaic .cell--text.ink{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.mosaic .cell--text.ink .lbl{color:var(--accent-lt)}
.mosaic .cell--text.ink p{color:#C7C0B4}
.mosaic .cell--text.ink h3 em{color:var(--accent-lt)}
.mosaic .cell--text.red{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bg)}
.mosaic .cell--text.red .lbl{color:rgba(255,255,255,.72)}
.mosaic .cell--text.red p{color:rgba(255,255,255,.88)}
.mosaic .cell--text.orange{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.mosaic .cell--text.orange .lbl{color:rgba(255,255,255,.78)}
.mosaic .cell--text.orange p{color:rgba(255,255,255,.9)}
.mosaic .cell--text.orange h3 em{color:#3B1503}
.mosaic .cell--text.quote{justify-content:center;background:none;border-color:var(--line)}
.mosaic .cell--text.quote h3{font-style:italic;text-transform:none;font-size:clamp(18px,2vw,26px);line-height:1.25}

/* ── natural: the picture decides its own height ──
   No aspect-ratio, no cover, no fixed cell height - the image is drawn
   whole at the column width. Empty slots fall back to 5:8 so the grid
   still holds its shape before any file exists. */
.mosaic--natural{grid-auto-rows:auto}
.mosaic--natural .cell{grid-row:auto;align-self:start}
.mosaic--natural .shot{height:auto}
.mosaic--natural figure{height:auto}
.mosaic--natural .shot .img,
.mosaic--natural .shot[data-arn] .img{
  aspect-ratio:auto !important;
  height:auto !important;
  width:100%;
  overflow:visible;
}
.mosaic--natural .shot .img > img{
  width:100%;height:auto !important;
  object-fit:fill;display:block;
}
/* nothing loaded yet - keep a placeholder box */
.mosaic--natural .shot .img.missing{aspect-ratio:5/8 !important;overflow:hidden}
/* before any file exists there is no <img> to set a height, so give the
   empty box one - otherwise the cells collapse on top of each other */
.mosaic--natural .shot .img:not(.missing):empty{aspect-ratio:5/8 !important}
.mosaic--natural .cell--text{align-self:stretch}
/* placeholder shape for a slot whose picture has not loaded yet;
   an <img> that does load overrides it and sets its own height */
.mosaic--natural .plate58{min-height:0}

/* Placeholder shape while a page has no files yet. Once a picture
   loads it sets its own height and these stop mattering. */
/* 2:3 held in the tile whatever the file's own shape is.
   Rows must be auto - the base mosaic's fixed row height would
   otherwise squash the plate into landscape. */
.mosaic--23{grid-auto-rows:auto}
.mosaic--23 .cell{grid-row:auto;align-self:start}
.mosaic--23 .shot{height:auto}
.mosaic--23 figure{height:auto}
.mosaic--23 .shot .img{aspect-ratio:2/3 !important;height:auto !important;overflow:hidden}
.mosaic--23 .shot .img > img{width:100%;height:100%;object-fit:cover}

/* landscape grid - 3:2 plates, rows sized to fit them */
.mosaic--32{grid-auto-rows:auto}
.mosaic--32 .cell{grid-row:auto;align-self:start}
.mosaic--32 .shot{height:auto}
.mosaic--32 figure{height:auto}
.mosaic--32 .shot .img{aspect-ratio:3/2 !important;height:auto !important;overflow:hidden}
.mosaic--32 .shot .img > img{width:100%;height:100%;object-fit:cover}
.mosaic--32 .cell--text{align-self:stretch}

/* generic column spans, for grids wider than three */
.mosaic .cell--s2{grid-column:span 2}
.mosaic .cell--s3{grid-column:span 3}
.mosaic .cell--s2 .shot .img,
.mosaic .cell--s3 .shot .img{aspect-ratio:3/2 !important}
/* a span that carries its own data-arn keeps that shape instead */
.mosaic .cell--s2 .shot[data-arn="0.667"] .img{aspect-ratio:2/3 !important}
.mosaic .cell--s2 .shot[data-arn="0.75"] .img{aspect-ratio:3/4 !important}

/* a cell that spans the whole row - use for one long piece */
.mosaic .cell--w3{grid-column:1/-1}
.mosaic .cell--w3 .shot .img{height:auto !important;overflow:hidden}
.mosaic .cell--w3 .shot .img > img{width:100%;height:100%;object-fit:cover}
/* a long piece with no ratio of its own falls back to a wide band */
.mosaic .cell--w3 .shot:not([data-arn]) .img{aspect-ratio:5/2 !important}

/* a band heading inside a mosaic - names a series without a picture */
.mosaic .cell--label{
  grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:14px 2px 0;margin-top:clamp(10px,2vw,24px);
}
.mosaic .cell--label h3{
  font-family:var(--disp);font-weight:var(--disp-w);margin:0;
  font-size:clamp(19px,2.4vw,30px);line-height:1;text-transform:uppercase;
}
.mosaic .cell--label h3 em{font-style:italic;text-transform:none;color:var(--accent)}
.mosaic .cell--label .lbl{font-family:var(--f);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* ── per-plate ratios ──
   A ratio set on one plate wins over whatever the grid or reel uses by
   default, so a set can change shape partway down. data-arn on the same
   link keeps the viewer in step. */
.mosaic .shot[data-arn="0.561"] .img{aspect-ratio:561/1000 !important}
.reel .shot[data-arn="0.561"] .img{aspect-ratio:561/1000 !important}
.mosaic .shot[data-arn="0.625"] .img{aspect-ratio:5/8 !important}
.reel .shot[data-arn="0.625"] .img{aspect-ratio:5/8 !important}
.mosaic .shot[data-arn="0.667"] .img{aspect-ratio:2/3 !important}
.reel .shot[data-arn="0.667"] .img{aspect-ratio:2/3 !important}
.mosaic .shot[data-arn="0.7"]   .img{aspect-ratio:7/10 !important}
.mosaic .shot[data-arn="0.75"]  .img{aspect-ratio:3/4 !important}
.mosaic .shot[data-arn="0.8"]   .img{aspect-ratio:4/5 !important}
.mosaic .shot[data-arn="1"]     .img{aspect-ratio:1/1 !important}
.mosaic .shot[data-arn="1.33"]  .img{aspect-ratio:4/3 !important}
.mosaic .shot[data-arn="1.5"]   .img{aspect-ratio:3/2 !important}
.mosaic .shot[data-arn="2"]   .img{aspect-ratio:2/1 !important}
/* the two shapes the FASH 345 print sheets come in: the garment sheet
   at 600x781, and the tall repeat strip at 239x800 */
.mosaic .shot[data-arn="0.768"] .img{aspect-ratio:600/781 !important}
.mosaic .shot[data-arn="0.3"]   .img{aspect-ratio:239/800 !important}
.mosaic .shot[data-arn="0.25"]  .img{aspect-ratio:1/4 !important}
.mosaic--23 .cell--text{align-self:stretch}
/* A landscape plate set into the portrait grid. It takes its height
   from the row rather than from its own ratio, so its top and bottom
   edges line up with the plates beside it. The picture is cropped to
   fill that box; the viewer still shows it at its true 3:2. */
.mosaic--23 .cell--w2{grid-column:span 2;align-self:stretch}
.mosaic--23 .cell--w2 .shot,
.mosaic--23 .cell--w2 figure{height:100%}
.mosaic--23 .cell--w2 .shot .img{
  aspect-ratio:auto !important;
  height:100% !important;
}
.mosaic--23 .cell--w2 .shot .img > img{width:100%;height:100%;object-fit:cover}

/* The same rule in the 4:5 grid, so a mixed page reads in level rows:
   a two-column plate takes its height from the row rather than from its
   own ratio, and is cropped to fill it. The viewer still opens it at its
   true shape. The floor is only there for a wide plate that ends up
   alone on the last row, where there is no neighbour to set the height. */
.mosaic--45 .cell--w2{grid-column:span 2;align-self:stretch}
.mosaic--45 .cell--w2 .shot,
.mosaic--45 .cell--w2 figure{height:100%}
.mosaic--45 .cell--w2 .shot .img{
  aspect-ratio:auto !important;
  height:100% !important;
  min-height:clamp(150px,17.5vw,250px);
}
/* taken out of flow, so the wide plate's own proportions cannot push
   the row taller than the plates beside it */
.mosaic--45 .cell--w2 .shot .img > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.mosaic--45 .shot .img:not(:has(> img[src])){aspect-ratio:4/5 !important}
/* caption sits on the picture, as everywhere else. The plate has no
   fixed height here, so anchor it to the plate rather than the cell. */
.mosaic--natural .shot{position:relative}
.mosaic--natural figcaption{
  position:absolute;left:10px;bottom:9px;top:auto;z-index:2;
  color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.5);
  opacity:0;transition:opacity .25s ease;margin:0;
}
.mosaic--natural .cell:hover figcaption{opacity:1}

/* 4:5 plates on a fixed column, no row-span arithmetic needed */
.mosaic--45{grid-auto-rows:auto}
.mosaic--45 .cell{grid-row:auto}
.mosaic--45 .shot .img,
.mosaic--45 .shot[data-arn] .img{aspect-ratio:4/5;height:auto}
.mosaic--45 .cell--text{min-height:100%}
/* A wide plate set beside narrow ones, as in the portrait grid above.
   Two columns of a three-column grid is wider than one, so a plate left
   to its own ratio stands taller than its neighbours and opens a gap
   under them. It takes its height from the row instead and crops to
   fill; the viewer still shows the picture whole at its true ratio.
   The floor is only for a wide plate that ends up alone on its row,
   with no neighbour to set the height. */
.mosaic--45 .cell--w2,
.mosaic--45 .cell--s2{align-self:stretch}
.mosaic--45 .cell--w2 .shot,.mosaic--45 .cell--w2 figure,
.mosaic--45 .cell--s2 .shot,.mosaic--45 .cell--s2 figure{height:100%}
.mosaic--45 .cell--w2 .shot .img,.mosaic--45 .cell--w2 .shot[data-arn] .img,
.mosaic--45 .cell--s2 .shot .img,.mosaic--45 .cell--s2 .shot[data-arn] .img{
  aspect-ratio:auto !important;
  height:100% !important;
  min-height:clamp(150px,17.5vw,250px);
  overflow:hidden;
}
.mosaic--45 .cell--w2 .shot .img > img,
.mosaic--45 .cell--s2 .shot .img > img{width:100%;height:100%;object-fit:cover}

/* a band that separates one body of work from the next */
.mosaic .cell--band{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,44px);flex-wrap:wrap;
  padding:clamp(26px,4.4vw,58px) clamp(20px,3vw,40px);
  margin:clamp(14px,2.4vw,30px) 0;
  background:var(--ink);color:var(--bg);border:0;
}
.mosaic .cell--band h3{
  font-family:var(--disp);font-weight:var(--disp-w);margin:0;
  font-size:clamp(26px,4.4vw,58px);line-height:.98;text-transform:uppercase;letter-spacing:-.01em;
}
.mosaic .cell--band h3 em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--accent-lt)}
.mosaic .cell--band .lbl{display:block;font-family:var(--f);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:12px}
.mosaic .cell--band p{margin:0;font-size:14px;line-height:1.6;color:#C7C0B4;max-width:44ch}

/* every picture upright - cells are one column by two rows, so a
   portrait plate and a text block still share the same grid */
.mosaic--tall{grid-auto-rows:clamp(104px,11.6vw,192px)}

@media (max-width:900px){

  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(160px,32vw,230px)}
  .mosaic .cell--w2{grid-column:span 2}
}
/* ── three-column mosaic ──
   A named class rather than an inline grid-template, so the narrow-screen
   steps below can still reach it. Two columns under 900px, one under 520. */
.mosaic--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .mosaic--3{grid-template-columns:repeat(2,1fr)}
  /* on one or two columns a wide plate has no neighbour to take its
     height from, so it goes back to its own shape */
  .mosaic--45 .cell--w2 .shot .img{
    aspect-ratio:3/2 !important;height:auto !important;min-height:0;
  }
  .mosaic--45 .cell--w2 .shot .img > img{position:static}
}
@media (max-width:520px){
  .mosaic--3{grid-template-columns:1fr}
}

/* ── exhibition runs ──
   Rows that alternate landscape and portrait, each row a grid of its
   own so a row of two can sit above a row of three. Held to the same
   column as the text - the scale comes from how few sit in a row, not
   from bleeding past the margins. */
.runs{margin:0}
.runs .gallery{margin:0 0 clamp(10px,1.5vw,22px)}
.runs .gallery:last-child{margin-bottom:0}

/* ── one plate to the row ──
   The featured sheets, and any row that would otherwise sit half-empty. */
.mosaic--1{grid-template-columns:1fr}

/* ── two-column mosaic ── */
.mosaic--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){
  .mosaic--2{grid-template-columns:1fr}
}

/* ── four-column mosaic ── */
.mosaic--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .mosaic--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .mosaic--4{grid-template-columns:repeat(2,1fr)}
}

/* ── five-column mosaic ──
   For long narrow plates hung side by side. Three columns under 900px,
   two under 520. */
.mosaic--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){
  .mosaic--5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .mosaic--5{grid-template-columns:repeat(2,1fr)}
}

/* ── twelve-column mosaic ──
   Fine enough to divide by four and by six, so a set can run four
   plates to a row and then six. Six columns under 900px, four under
   520, where a three-column plate fills the row. */
.mosaic--12{grid-template-columns:repeat(12,1fr)}
@media (max-width:900px){
  .mosaic--12{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:520px){
  .mosaic--12{grid-template-columns:repeat(4,1fr)}
  .mosaic--12 .cell--s3{grid-column:1/-1}
}

/* ── a set of plates at declared shapes ──
   Rows sized by the plates rather than the other way round: every cell
   keeps the ratio its data-arn asks for, however many columns it spans,
   and nothing is stretched to match a neighbour. For sets where the
   shapes are already known and consistent row by row. */
.mosaic--set{grid-auto-rows:auto}
.mosaic--set .cell{grid-row:auto;align-self:start}
.mosaic--set .shot,
.mosaic--set figure{height:auto}
.mosaic--set .shot .img{height:auto !important}

/* ── six-column mosaic ──
   Wide plates sit on three columns, two to a row; the tall repeat
   strips sit one to a column, six to a row. Three columns under 900px,
   two under 520, where a three-column plate simply fills the row. */
.mosaic--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){
  .mosaic--6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .mosaic--6{grid-template-columns:repeat(2,1fr)}
  .mosaic--6 .cell--s3{grid-column:1/-1}
}

@media (max-width:520px){
  .mosaic{grid-template-columns:1fr}
  .mosaic .cell--w2,.mosaic .cell--h2{grid-column:auto;grid-row:auto}
}

/* ── reel ──
   One series to a row, running off the right edge. Drag, scroll, or use
   the arrow keys. Twenty plates cost the same vertical space as four. */
.reel-band{padding-top:clamp(34px,5vw,64px)}
.reel-head{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(14px,2vw,22px);
}
.reel-head h3{
  font-family:var(--disp);font-weight:var(--disp-w);margin:0;
  font-size:clamp(20px,2.6vw,34px);line-height:1;text-transform:uppercase;
}
.reel-head h3 em{font-style:italic;text-transform:none;color:var(--accent)}
.reel-head .lbl{font-family:var(--f);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.reel-head .n{margin-left:auto;font-family:var(--f);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.reel-note{margin:0 0 clamp(14px,2vw,20px);font-size:14px;line-height:1.6;color:#4A453D;max-width:56ch}

.reel{
  display:flex;gap:clamp(8px,1.2vw,14px);margin:0;padding:0 0 4px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.reel::-webkit-scrollbar{display:none}
.reel.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.reel > li{flex:0 0 auto;margin:0;scroll-snap-align:start;width:clamp(132px,15vw,196px)}
/* the plate that opens a series: square, and wide enough that its
   height still matches the 2:3 plates beside it */
.reel > li.lead{width:clamp(198px,22.5vw,294px)}
.reel > li.lead .shot .img{aspect-ratio:1/1 !important}

.reel .shot[data-arn="0.7"] .img{aspect-ratio:7/10 !important}
.reel .shot[data-arn="0.75"] .img{aspect-ratio:3/4 !important}
.reel .shot[data-arn="0.8"] .img{aspect-ratio:4/5 !important}
.reel .shot[data-arn="1"] .img{aspect-ratio:1/1 !important}
.reel .shot[data-arn="1.33"] .img{aspect-ratio:4/3 !important}
.reel .shot[data-arn="1.5"] .img{aspect-ratio:3/2 !important}
.reel .shot{display:block;cursor:zoom-in;position:relative}
.reel .shot .img{aspect-ratio:2/3;overflow:hidden;transition:opacity .25s ease}
.reel .shot .img > img{width:100%;height:100%;object-fit:cover}
.reel:hover .shot .img{opacity:.42}
.reel .shot:hover .img,.reel .shot:focus-visible .img{opacity:1}
.reel figure{margin:0}
.reel figcaption{
  position:absolute;left:9px;bottom:8px;z-index:2;
  font-family:var(--f);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.5);
  opacity:0;transition:opacity .25s ease;
}
.reel li:hover figcaption{opacity:1}
/* the run continues past the edge - say so */
.reel-band::after{
  content:"";display:block;height:1px;
}
.reel-hint{
  margin:10px 0 0;font-family:var(--f);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);
}

/* ── stack run ──
   One piece to a row at a fixed width. No aspect-ratio anywhere, so
   each picture sets its own height - a short piece stays short and a
   tall one stays tall. Nothing is cropped. */
.stack-run{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,3vw,44px);
  margin:clamp(28px,4vw,52px) 0 0;padding:0;list-style:none;
}
.stack-run > li{width:100%;margin:0}
.stack-run figure{margin:0}
.stack-run .shot{display:block;position:relative;cursor:zoom-in}
.stack-run .shot .img{
  aspect-ratio:auto !important;
  height:auto !important;
  width:100%;overflow:hidden;
  transition:opacity .25s ease;
}
.stack-run .shot .img > img{
  width:100%;height:auto !important;
  object-fit:fill;display:block;
}
/* nothing loaded yet - hold a plausible band so the run does not collapse */
.stack-run .shot .img.missing{aspect-ratio:5/3 !important;min-height:0}
.stack-run:hover .shot .img{opacity:.45}
.stack-run .shot:hover .img,.stack-run .shot:focus-visible .img{opacity:1}
.stack-run figcaption{
  position:absolute;left:12px;bottom:10px;z-index:2;
  font-family:var(--f);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.5);
  opacity:0;transition:opacity .25s ease;
}
.stack-run li:hover figcaption{opacity:1}

/* ── footer ──────────────────────────────────────── */
.foot{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:clamp(56px,8vw,110px) 0 20px}
.foot--3{grid-template-columns:repeat(3,1fr)}
.foot h4{font-family:var(--f);margin:0 0 8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
body.dark .foot h4{color:var(--accent-lt)}
.foot p{margin:0;font-size:13.5px;line-height:1.6;color:#4A453D}
.foot a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
.rule{height:1px;background:var(--line);margin-top:26px}
.fine{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A8377;padding:14px 0 40px;margin:0}

.reveal{opacity:0;transform:translateY(15px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ── responsive ──────────────────────────────────── */
@media (max-width:880px){
  .menu-btn{display:inline-flex}
  .nav{order:3;width:100%;flex-direction:column;gap:0;max-height:0;overflow:hidden;border-top:1px solid transparent;transition:max-height .3s ease,border-color .3s ease}
  .nav.open{max-height:460px;border-top-color:var(--line)}
  .nav a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:12px}
}
@media (max-width:900px){
  .ledger .lrow{grid-template-columns:40px 1fr;row-gap:4px}
  .ledger .k,.ledger .y{grid-column:2;text-align:left}
  .specs{grid-template-columns:1fr 1fr}
  .rooms,.foot{grid-template-columns:1fr 1fr}
  .stack--left{margin-left:0}
}
@media (max-width:820px){
  .grid,.grid--2{grid-template-columns:repeat(2,1fr)}
  .spread{grid-template-columns:1fr;gap:20px}
  .spread:nth-of-type(even) .spread-fig{order:0}
  .spread-fig .img{aspect-ratio:4/3}
  .form{grid-template-columns:1fr}
}
@media (max-width:560px){
  .foot{grid-template-columns:1fr}
  .plates{grid-template-columns:1fr 1fr}
  .plates figure:last-child{grid-column:span 2}
  .plates figure:last-child .img{aspect-ratio:4/3}
  .chip{padding:9px 12px;font-size:10px}
  .eyebrow,.stack{text-align:left}
  .lb-slide .media{height:min(56vh, calc(90vw / var(--arn)))}
  .lb-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .nav,.peek .media{transition:none}
  .track{transform:none !important}
}