/* =====================================================================
   SOLARA STUDIOS — "The Light Room"
   A gallery at night. One gold light source. Work hung on an ink wall,
   each piece with a cream wall label. Type whispers; the work speaks.

   Brand Guidelines Ed. 01: Ink 60 / Paper Cream 30 / Solar Gold 10,
   Poppins throughout, gold reserved for moments that deserve emphasis.
   ===================================================================== */
@font-face{font-family:"Poppins";font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:300;font-style:italic;font-display:swap;src:url(/assets/fonts/poppins-300i.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format("woff2")}

:root{
  --ink:#121110; --paper:#F7F3EA; --gold:#C79A4B;
  --charcoal:#2B2825; --warm:#7B7568; --deep-gold:#8C6B2F; --ember:#A65A34;
  --mute:#A39D90;      /* secondary text on Ink,   7.0:1 */
  --soft:#D9D4C8;      /* body text on Ink,        13:1  */
  --ink-mute:#5F5A4F;  /* secondary text on Cream, 6.2:1 */
  --line:rgba(247,243,234,.12);
  --f:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--ink);color:var(--paper);font:400 1rem/1.7 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:1rem;z-index:300;background:var(--gold);color:var(--ink);padding:.7rem 1rem;font-weight:500;text-decoration:none;transform:translateY(-220%);transition:transform .25s var(--ease)}
.skip:focus{transform:none}

/* cross-document page transitions: the lights dim between rooms */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.28s var(--ease) both dim-out}
::view-transition-new(root){animation:.42s var(--ease) both dim-in}
@keyframes dim-out{to{opacity:0;filter:brightness(.4)}}
@keyframes dim-in{from{opacity:0;filter:brightness(.4)}}

/* ---------- type ---------- */
.kicker{font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.kicker--gold{color:var(--gold)}
.walltext{font-weight:300;font-size:clamp(1.9rem,4.8vw,4.4rem);line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
.prose{color:var(--soft);max-width:54ch}
.prose p+p{margin-top:1rem}
.link{text-decoration:none;border-bottom:1px solid rgba(247,243,234,.35);padding-bottom:.1rem;transition:border-color .3s var(--ease),color .3s var(--ease)}
.link:hover,.link:focus-visible{border-color:var(--gold);color:var(--gold)}

/* ---------- logo (guide p.07–08): intact, white on dark, ≥18px, clear space ---------- */
.mark{display:block;aspect-ratio:166/215;background:center/contain no-repeat;min-width:18px}
.mark--w{background-image:url(/assets/img/mark-white.png)}
.mark--b{background-image:url(/assets/img/mark-black.png)}

/* =====================================================================
   SIGNATURE HEADER — no nav bar. A signature, and one Index.
   ===================================================================== */
.sig{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.25rem var(--gut);pointer-events:none}
.sig>*{pointer-events:auto}
.sig::before{content:"";position:absolute;inset:0 0 -3.5rem 0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(18,17,16,.96) 45%,rgba(18,17,16,.75) 72%,rgba(18,17,16,0));
  opacity:0;transition:opacity .4s var(--ease)}
.scrolled .sig::before{opacity:1}
.sig-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.sig-brand .mark{width:20px;margin:.2rem}
.sig-name{font-size:.8125rem;font-weight:600;letter-spacing:.5em;margin-right:-.5em}

/* =====================================================================
   HERO — the light. A 3D armillary of gold rings that, as you scroll,
   turns flat into the banded glow from the brand book's cover.
   ===================================================================== */
.hero{position:relative;height:220vh}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#hero-canvas{opacity:0;transition:opacity 1.2s var(--ease)}
.gl-ready #hero-canvas{opacity:1}
.gl-ready #hero-fallback{opacity:0;transition:opacity 1.2s var(--ease)}
.hero-mark{position:absolute;left:50%;top:50%;width:clamp(40px,4.4vw,64px);transform:translate(-50%,-50%);z-index:2;
  opacity:clamp(0,calc(1 - var(--st,0) * 1.6),1);transition:opacity .2s linear}
.hero-sig{position:absolute;left:var(--gut);bottom:clamp(1.5rem,5vh,2.75rem);z-index:2;display:grid;gap:.4rem}
.hero-sig h1{font-size:.8125rem;font-weight:600;letter-spacing:.5em;line-height:1.4}
.hero-sig p{font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.hero-enter{position:absolute;right:var(--gut);bottom:clamp(1.5rem,5vh,2.75rem);z-index:2;display:flex;align-items:center;gap:.75rem;
  font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;min-height:44px;color:var(--soft)}
.hero-enter::after{content:"";width:1px;height:28px;background:linear-gradient(var(--gold),transparent);animation:drip 2.6s var(--ease-io) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-enter:hover,.hero-enter:focus-visible{color:var(--gold)}
.hero-statement{position:absolute;left:50%;top:52%;z-index:3;width:min(88vw,22ch);text-align:center;transform:translate(-50%,-50%);
  opacity:var(--st,0);pointer-events:none;text-shadow:0 2px 30px rgba(18,17,16,.9),0 0 60px rgba(18,17,16,.8)}
@media (max-width:640px){
  /* the scroll mark centres at the foot so it can't collide with the signature */
  .hero-enter span{display:none}
  .hero-enter{right:auto;left:50%;transform:translateX(-50%);bottom:1.1rem;min-height:0}
  .hero-sig{bottom:4.25rem}
}

/* =====================================================================
   THE WALL — work hung at varied scale. The visitor carries the light.
   ===================================================================== */
.room{position:relative;padding:clamp(6rem,14vw,11rem) var(--gut)}
.room-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 3rem;max-width:1480px;margin:0 auto clamp(3rem,7vw,6rem)}
.room-head h2{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:300;letter-spacing:-.015em}
.wall{position:relative;max-width:1480px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.5vw,2.5rem);row-gap:clamp(4rem,9vw,8rem)}
/* the dark: everything outside the visitor's light falls back (desktop, pointer only) */
.wall::after{content:"";position:absolute;inset:-6rem calc(-1 * var(--gut));z-index:2;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(circle 560px at var(--lx,50%) var(--ly,30%),rgba(18,17,16,0) 0,rgba(18,17,16,0) 42%,rgba(18,17,16,.5) 100%)}
.wall.lit::after{opacity:1}

.piece{grid-column:1/-1;display:grid;gap:1.1rem;align-content:start}
.piece>a{display:block;text-decoration:none;perspective:1200px}
.frame{position:relative;overflow:hidden;background:var(--charcoal);transform-style:preserve-3d;
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.frame--wide{aspect-ratio:16/10}.frame--portrait{aspect-ratio:4/5}.frame--square{aspect-ratio:1}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.piece>a:hover .frame img,.piece>a:focus-visible .frame img{transform:scale(1.03)}
.piece>a:hover .frame,.piece>a:focus-visible .frame{box-shadow:0 50px 90px -40px rgba(199,154,75,.28)}
/* a title card hangs where artwork has not been uploaded yet */
.plate{position:absolute;inset:0;display:grid;place-content:center;padding:2rem;text-align:center;
  background:radial-gradient(60% 55% at 50% 45%,rgba(199,154,75,.16),transparent 70%),var(--charcoal)}
.plate span{font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:300;letter-spacing:-.015em;line-height:1.15}
.plate::after{content:"";position:absolute;inset:clamp(.75rem,1.5vw,1.25rem);border:1px solid rgba(247,243,234,.08);pointer-events:none}

/* the wall label (the 30%): cream card, ink type, like a museum caption */
.label{position:relative;z-index:5;justify-self:start;background:var(--paper);color:var(--ink);padding:.95rem 1.1rem 1rem;min-width:13.5rem;max-width:20rem;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.8)}
.label .no{display:block;font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.label .t{display:block;font-size:1.0625rem;font-weight:500;letter-spacing:-.005em;line-height:1.3;margin-top:.35rem}
.label .m{display:block;font-size:.8125rem;color:var(--ink-mute);margin-top:.15rem;line-height:1.45}
.label a{text-decoration:none}
.label a::after{content:"";position:absolute;inset:0}
.label:focus-within{outline:2px solid var(--gold);outline-offset:3px}

@media (min-width:900px){
  /* the hang: five positions, then it repeats. No two neighbours share a scale. */
  .wall .piece:nth-child(5n+1){grid-column:1/9}
  .wall .piece:nth-child(5n+2){grid-column:9/13;margin-top:clamp(6rem,14vw,12rem)}
  .wall .piece:nth-child(5n+3){grid-column:2/7}
  .wall .piece:nth-child(5n+4){grid-column:7/13;margin-top:clamp(3rem,8vw,7rem)}
  .wall .piece:nth-child(5n+5){grid-column:4/9}
  /* labels stay in flow so they can never collide; the indent gives the rhythm */
  .wall .piece:nth-child(5n+1) .label{margin-left:clamp(2rem,8%,6rem)}
  .wall .piece:nth-child(5n+3) .label{margin-left:clamp(1rem,5%,3rem)}
  .wall .piece:nth-child(5n+2) .label,.wall .piece:nth-child(5n+4) .label{justify-self:end;text-align:left}
}
@media (max-width:899px){
  .wall .piece:nth-child(even){margin-left:14%}
  .wall .piece:nth-child(odd){margin-right:8%}
}

.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filters a{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:.55rem 1.1rem;min-height:44px;border-radius:9999px;display:inline-flex;align-items:center;
  border:1px solid var(--line);color:var(--soft);transition:border-color .3s,color .3s,background .3s}
.filters a:hover,.filters a:focus-visible{border-color:var(--paper);color:var(--paper)}
.filters a[aria-current="page"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.empty{max-width:40rem;margin:0 auto;text-align:center;display:grid;gap:1rem;justify-items:center;padding:4rem 0}

/* =====================================================================
   FOUNDERS — three portraits, hung at the same height. No hierarchy.
   ===================================================================== */
.portraits{max-width:1280px;margin:0 auto;display:grid;gap:clamp(3rem,6vw,4.5rem) clamp(1.25rem,3vw,2.5rem)}
@media (min-width:760px){.portraits{grid-template-columns:repeat(3,minmax(0,1fr))}}
.portrait{display:grid;gap:1.1rem;align-content:start}
.portrait figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--charcoal)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.02) brightness(.86);transform:scale(1.01);
  transition:filter .9s var(--ease),transform 1.2s var(--ease)}
.portrait:hover img,.portrait:focus-within img{filter:none;transform:scale(1.04)}
/* the gallery light rakes across the portrait when you approach */
.portrait figure::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);
  background:radial-gradient(80% 60% at 30% 20%,rgba(199,154,75,.26),transparent 60%);mix-blend-mode:screen}
.portrait:hover figure::after,.portrait:focus-within figure::after{opacity:1}
.portrait .small img{object-fit:contain;background:var(--ink)}
.portrait .ini{position:absolute;inset:0;display:grid;place-content:center;font-size:clamp(4rem,9vw,7rem);font-weight:300;
  background:radial-gradient(55% 45% at 50% 45%,rgba(199,154,75,.22),transparent 72%),var(--charcoal)}
.portrait .label{justify-self:stretch;max-width:none}
.portrait .label .links{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.7rem}
.portrait .label .links a{font-size:.75rem;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(18,17,16,.3);position:relative;z-index:1}
.portrait .label .links a::after{display:none}
.portrait .label .links a:hover,.portrait .label .links a:focus-visible{border-color:var(--deep-gold);color:var(--deep-gold)}

/* =====================================================================
   PROCESS — a path of light: five stops, one glowing point travels it
   ===================================================================== */
.path{position:relative;max-width:1200px;margin:0 auto;display:grid;gap:2.5rem}
@media (min-width:900px){.path{grid-template-columns:repeat(5,1fr);gap:1.5rem}}
.path::before{content:"";position:absolute;background:var(--line)}
@media (min-width:900px){.path::before{left:0;right:0;top:9px;height:1px}}
@media (max-width:899px){.path::before{left:9px;top:0;bottom:0;width:1px}}
.path .orb{position:absolute;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--gold) 45%,rgba(199,154,75,0) 72%);
  box-shadow:0 0 28px 8px rgba(199,154,75,.35);pointer-events:none;left:0;top:0;transform:translate(var(--ox,0),var(--oy,0))}
.stop{position:relative;padding-left:2.75rem;display:grid;gap:.45rem}
@media (min-width:900px){.stop{padding:2.75rem 1rem 0 0}}
.stop::before{content:"";position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);background:var(--ink);transition:background .5s var(--ease)}
@media (min-width:900px){.stop::before{left:0;top:5px}}
.stop.reached::before{background:var(--gold)}
.stop h3{font-size:1.125rem;font-weight:500}
.stop p{font-size:.875rem;color:var(--mute);max-width:24ch}

/* =====================================================================
   COMMUNITY — a lit doorway
   ===================================================================== */
.door{position:relative;max-width:1180px;margin:0 auto;display:grid;gap:2rem;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,5rem);overflow:hidden;background:var(--charcoal);isolation:isolate}
.door::before{content:"";position:absolute;z-index:-1;right:-10%;top:-40%;width:70%;aspect-ratio:1;background:repeating-radial-gradient(circle,rgba(199,154,75,.14) 0 2px,transparent 2px 30px);
  mask:radial-gradient(circle,#000 20%,transparent 68%);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%)}
@media (min-width:900px){.door{grid-template-columns:minmax(0,1.3fr) auto;align-items:end}}
.door h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:300;letter-spacing:-.02em;line-height:1.1}

/* ---------- buttons: understated, gold only where it matters ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:0 1.75rem;border-radius:9999px;text-decoration:none;cursor:pointer;
  font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;border:1px solid rgba(247,243,234,.3);background:none;color:var(--paper);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn--gold:hover,.btn--gold:focus-visible{background:var(--paper);border-color:var(--paper)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:progress}

/* =====================================================================
   PROJECT ROOM
   ===================================================================== */
.p-hero{position:relative;min-height:88vh;min-height:88svh;display:grid;align-items:end;padding:7rem var(--gut) 3rem;overflow:hidden;isolation:isolate}
.p-hero>.bg{position:absolute;inset:0;z-index:-1}
.p-hero>.bg img,.p-hero>.bg video{width:100%;height:100%;object-fit:cover}
.p-hero>.bg--art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 3%,rgba(18,17,16,.35) 45%,rgba(18,17,16,.55))}
.p-hero>.bg--plate{display:grid}
.p-hero .plate{position:absolute;inset:0}
.p-hero .plate span{font-size:clamp(2.5rem,8vw,6.5rem)}
.p-hero .label{max-width:24rem}
.p-body{max-width:1480px;margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--gut);display:grid;gap:2rem 5rem}
@media (min-width:960px){.p-body{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}}
.gallery{max-width:1480px;margin:0 auto;padding:0 var(--gut);display:grid;gap:clamp(1rem,2vw,1.75rem)}
@media (min-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery figure:first-child,.gallery figure.full{grid-column:1/-1}}
.gallery figure{background:var(--charcoal)}
.gallery figcaption{font-size:.8125rem;color:var(--mute);padding:.6rem 0}
.p-section{max-width:1480px;margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--gut) 0}
.next{display:block;text-decoration:none;margin-top:clamp(5rem,10vw,8rem);padding:clamp(4rem,9vw,7rem) var(--gut);border-top:1px solid var(--line);text-align:center}
.next .t{display:block;font-size:clamp(2rem,6vw,4.5rem);font-weight:300;letter-spacing:-.025em;line-height:1.1;margin-top:.75rem;transition:color .35s var(--ease)}
.next:hover .t,.next:focus-visible .t{color:var(--gold)}

/* =====================================================================
   STUDIO
   ===================================================================== */
.statement-room{padding:clamp(9rem,20vw,15rem) var(--gut) clamp(5rem,10vw,8rem);text-align:center;display:grid;justify-items:center;gap:2rem;position:relative;overflow:hidden}
.statement-room::before{content:"";position:absolute;left:50%;top:48%;width:min(120vmin,1200px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(199,154,75,.22) 0,rgba(140,107,47,.1) 30%,transparent 62%)}
.statement-room .walltext{max-width:18ch}
.disciplines{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.25rem;font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.disciplines li+li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:1.25rem;vertical-align:middle}
.cream-room{background:var(--paper);color:var(--ink);padding:clamp(5rem,10vw,8rem) var(--gut)}
.cream-room .kicker{color:var(--ink-mute)}
.cream-room .prose{color:var(--ink-mute)}
.pillars{max-width:1180px;margin:clamp(2rem,4vw,3rem) auto 0;display:grid;border-top:1px solid rgba(18,17,16,.14)}
@media (min-width:900px){.pillars{grid-template-columns:repeat(2,1fr);column-gap:4rem}}
.pillars li{padding:1.3rem 0;border-bottom:1px solid rgba(18,17,16,.14);display:grid;gap:.25rem}
.pillars h3{font-size:1rem;font-weight:600}
.pillars p{font-size:.875rem;color:var(--ink-mute);max-width:46ch}
.two{max-width:1180px;margin:0 auto;display:grid;gap:2.5rem 5rem}
@media (min-width:900px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}}

/* =====================================================================
   COMMISSION (enquiry form)
   ===================================================================== */
.commission{max-width:1180px;margin:0 auto;padding:clamp(8rem,16vh,11rem) var(--gut) clamp(5rem,10vw,8rem);display:grid;gap:3rem 5rem}
@media (min-width:1000px){.commission{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.form{display:grid;gap:1.75rem}
@media (min-width:720px){.form{grid-template-columns:1fr 1fr}}
.form>*{min-width:0}
.fld{display:grid;gap:.5rem;min-width:0}
.fld.full{grid-column:1/-1}
.fld label,.fld legend{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:0}
.fld label small,.fld legend small{text-transform:none;letter-spacing:0;font-weight:400}
.fld input,.fld textarea{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid rgba(247,243,234,.28);border-radius:0;padding:.55rem 0 .75rem;
  font-size:1.125rem;font-weight:300;transition:border-color .3s var(--ease)}
.fld textarea{min-height:8rem;resize:vertical;line-height:1.55}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--gold)}
.fld input:focus-visible,.fld textarea:focus-visible{box-shadow:0 2px 0 var(--gold)}
.fld ::placeholder{color:rgba(163,157,144,.75)}
fieldset.fld{border:0;margin:0;padding:0;min-inline-size:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{cursor:pointer;padding:.65rem 1.15rem;min-height:44px;border-radius:9999px;display:inline-flex;align-items:center;border:1px solid rgba(247,243,234,.25);
  font-size:.875rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--paper);transition:background .3s,color .3s,border-color .3s}
.chips label:hover{border-color:var(--paper)}
.chips input:checked+label{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.chips input:focus-visible+label{outline:2px solid var(--gold);outline-offset:3px}
.err{font-size:.875rem;color:#E0A56B}
.fld.bad input,.fld.bad textarea{border-bottom-color:#E0A56B}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.notice{grid-column:1/-1;padding:1.25rem 1.4rem;border-left:2px solid var(--gold);background:var(--charcoal);display:grid;gap:.4rem}
.notice--err{border-left-color:#E0A56B}
.aside{display:grid;gap:1.75rem;align-content:start}
.aside div{display:grid;gap:.3rem}
.aside a{text-decoration:none;color:var(--soft)}
.aside a:hover,.aside a:focus-visible{color:var(--gold)}

/* =====================================================================
   COLOPHON — a gallery colophon, not a link farm
   ===================================================================== */
.colophon{padding:clamp(5rem,10vw,8rem) var(--gut) 2.5rem;display:grid;justify-items:center;text-align:center;gap:1.5rem;border-top:1px solid var(--line)}
.colophon .mark{width:26px;margin:.4rem}
.colophon .name{font-size:.8125rem;font-weight:600;letter-spacing:.5em;margin-right:-.5em}
.colophon .line{color:var(--mute);max-width:36ch;font-size:.9375rem}
.colophon nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem}
.colophon nav a{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--soft)}
.colophon nav a:hover,.colophon nav a:focus-visible{color:var(--gold)}
.colophon small{font-size:.75rem;color:var(--mute);line-height:1.8}

/* ---------- entrances (sparing): pieces rise onto the wall ---------- */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js .rise.in{opacity:1;transform:none}

/* ---------- error pages ---------- */
.errpage{min-height:100vh;min-height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;gap:1.25rem;padding:6rem var(--gut)}
.errpage .code{font-size:clamp(4rem,14vw,9rem);font-weight:300;line-height:1;letter-spacing:-.04em;color:rgba(199,154,75,.22);-webkit-text-stroke:1.5px var(--gold)}

@media (pointer:coarse){.btn,.chips label,.filters a{min-height:44px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .rise{opacity:1;transform:none}
  .hero{height:auto}.hero-stage{position:relative}
  .hero-statement{--st:1;position:absolute;top:auto;bottom:22%;transform:translateX(-50%)}
  .wall::after{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- utilities (kept as classes: the CSP allows no inline styles) ---------- */
.room--first{padding-top:clamp(8rem,16vh,11rem)}
.room--tight{padding-top:0}
.room--centred{text-align:center}
.stack{display:grid;gap:1rem}
.stack--lg{gap:2rem;align-content:start}
.stack--centre{justify-items:center;gap:1.75rem}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.measure{max-width:1180px;margin:0 auto}
.prose--wide{max-width:60ch}
.walltext--md{font-size:clamp(2rem,4.6vw,3.6rem)}
.walltext--sm{font-size:clamp(1.5rem,3vw,2.4rem)}
.walltext--narrow{max-width:16ch}
.room-sub{margin-top:.75rem}
.lede{font-size:1.25rem;font-weight:300;color:var(--paper)}
.spaced{margin-top:1.5rem}
.kicker--head{margin-bottom:1.25rem}
.full{grid-column:1/-1}
.gallery--flush{padding:0}

/* =====================================================================
   ENVIRONMENTS — the atmosphere behind a section. Painted behind
   everything, never interactive, removed entirely under reduced motion.
   ===================================================================== */
.env{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.room,.statement-room,.door,.hero-stage{isolation:isolate}
.room>*:not(.env),.statement-room>*:not(.env){position:relative;z-index:1}

/* =====================================================================
   BUTTONS — light passes through, the arrow turns, an orbit spins up.
   Nothing follows the cursor.
   ===================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(247,243,234,.22) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .9s var(--ease)}
.btn--gold::before{background:linear-gradient(105deg,transparent 38%,rgba(18,17,16,.18) 50%,transparent 62%)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(130%)}
.btn--go::after{content:"→";display:inline-block;font-size:1rem;line-height:1;transition:transform .5s var(--ease)}
.btn--go:hover::after,.btn--go:focus-visible::after{transform:translateX(5px) rotate(-45deg)}
/* the commission CTA: a small solar system starts turning inside it */
.btn--orbit{padding-left:3.1rem}
.btn--orbit .orb-mark{position:absolute;left:1.15rem;top:50%;width:15px;height:15px;margin-top:-7.5px;pointer-events:none}
.btn--orbit .orb-mark::before,.btn--orbit .orb-mark::after{content:"";position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;opacity:.45;
  transition:transform .7s var(--ease),opacity .5s var(--ease)}
.btn--orbit .orb-mark::after{inset:4px;border-style:dashed}
.btn--orbit:hover .orb-mark::before,.btn--orbit:focus-visible .orb-mark::before{transform:rotate(180deg) scale(1.12);opacity:1}
.btn--orbit:hover .orb-mark::after,.btn--orbit:focus-visible .orb-mark::after{animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =====================================================================
   SECTION METADATA — technical labels, the way a gallery tags a room
   ===================================================================== */
.meta-head{display:grid;gap:.35rem}
.meta-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.1rem;font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.meta-line b{color:var(--gold);font-weight:500}
.meta-line span{display:inline-flex;align-items:center;gap:.6rem}
.meta-line span::before{content:"";width:16px;height:1px;background:currentColor;opacity:.5}
.room-no{font-size:clamp(3.5rem,11vw,9rem);font-weight:300;line-height:.85;letter-spacing:-.04em;
  color:rgba(199,154,75,.14);-webkit-text-stroke:1.5px rgba(199,154,75,.5);font-variant-numeric:tabular-nums}

/* =====================================================================
   STATEMENT SCENE — the one place type is allowed to shout
   ===================================================================== */
.scene-statement{position:relative;padding:clamp(7rem,18vw,13rem) var(--gut);overflow:hidden}
.scene-statement .inner{max-width:1480px;margin:0 auto;display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
.huge{font-weight:300;font-size:clamp(2.6rem,9.5vw,9rem);line-height:.96;letter-spacing:-.035em;text-wrap:balance;margin:0}
.huge em{font-style:normal;color:var(--gold)}
/* outlined, but with enough fill and stroke to stay readable at any size */
.huge .out{color:rgba(247,243,234,.30);-webkit-text-stroke:1.5px var(--soft);paint-order:stroke fill}
.scene-statement .foot{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:1.25rem}
.scene-statement .foot p{max-width:46ch;color:var(--mute);font-size:.9375rem}

/* =====================================================================
   FOUNDERS — a collective, not three identical cards
   ===================================================================== */
.collective{max-width:1480px;margin:0 auto;display:grid;gap:clamp(3rem,7vw,6rem)}
@media (min-width:860px){
  .collective{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
  .collective .portrait:nth-child(1){grid-column:1/6}
  .collective .portrait:nth-child(2){grid-column:7/11;margin-bottom:clamp(2rem,6vw,5rem)}
  .collective .portrait:nth-child(3){grid-column:4/8;margin-top:clamp(1rem,4vw,3rem)}
  .collective .portrait:nth-child(2) figure{aspect-ratio:1}
  .collective .portrait:nth-child(3) figure{aspect-ratio:5/4}
}
.portrait .who{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.portrait .no{font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-variant-numeric:tabular-nums}
.portrait .nm{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:300;letter-spacing:-.025em;line-height:1}
.portrait .role{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.portrait .links--open{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.35rem}
.portrait .links--open a{font-size:.8125rem;text-decoration:none;color:var(--soft);border-bottom:1px solid rgba(247,243,234,.25);padding-bottom:.1rem;transition:color .3s,border-color .3s}
.portrait .links--open a:hover,.portrait .links--open a:focus-visible{color:var(--gold);border-color:var(--gold)}
.portrait .body{display:grid;gap:.5rem;padding-top:.25rem}

/* =====================================================================
   EXHIBITION — one piece gets to break the frame
   ===================================================================== */
@media (min-width:900px){
  .wall .piece:nth-child(5n+1) .frame{margin-left:calc(-1 * var(--gut))}
  .wall .piece:nth-child(5n+1){grid-column:1/9}
}
.piece .pno{position:absolute;top:-1.6rem;left:0;font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums;z-index:3}
@media (prefers-reduced-motion:reduce){
  .env{display:none}
  .btn::before{display:none}
  .btn--orbit:hover .orb-mark::after{animation:none}
}
.huge--narrow{max-width:14ch}

/* =====================================================================
   INDEX — a network index, not a menu
   ===================================================================== */
.sig-right{display:flex;align-items:center;gap:1.25rem}
.cart-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;text-decoration:none;
  font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.cart-link b{display:inline-grid;place-content:center;min-width:1.35rem;height:1.35rem;border-radius:50%;background:var(--gold);color:var(--ink);font-size:.6875rem;font-weight:600;letter-spacing:0}
.cart-link:hover,.cart-link:focus-visible{color:var(--gold)}
.index-title{position:relative;text-align:center;margin-bottom:2rem;font-size:.625rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.index li a{grid-template-columns:auto 1fr auto;gap:1.25rem}
.ix-no{font-size:.75rem;font-weight:500;letter-spacing:.14em;color:var(--gold);font-variant-numeric:tabular-nums;align-self:center}
.ix-name{font-size:clamp(1.75rem,5vw,3rem);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.ix-note{font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);text-align:right}
@media (max-width:640px){.ix-note{display:none}}

/* =====================================================================
   PRACTICE — disciplines as an editorial catalogue
   ===================================================================== */
.practice{max-width:1480px;margin:0 auto;border-top:1px solid var(--line)}
.practice li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.5rem;align-items:baseline;
  padding:clamp(1.25rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line);transition:background .5s var(--ease)}
@media (min-width:760px){.practice li{grid-template-columns:5rem minmax(0,1fr) minmax(0,1fr)}}
.practice li:hover{background:rgba(199,154,75,.04)}
.p-no{font-size:.75rem;font-weight:500;letter-spacing:.16em;color:var(--gold);font-variant-numeric:tabular-nums}
.practice h3{font-size:clamp(1.75rem,4.5vw,3.25rem);font-weight:300;letter-spacing:-.025em;line-height:1;margin:0;transition:transform .5s var(--ease)}
.practice li:hover h3{transform:translateX(10px)}
.practice p{color:var(--mute);font-size:.9375rem;grid-column:2/-1}
@media (min-width:760px){.practice p{grid-column:3}}
.p-line{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.practice li:hover .p-line{transform:scaleX(1)}

/* =====================================================================
   COMMUNITY NODES
   ===================================================================== */
.nodes{max-width:1480px;margin:0 auto;display:grid;gap:1px;background:var(--line);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));border:1px solid var(--line)}
.nodes li{background:var(--ink);padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:.5rem;transition:background .5s var(--ease)}
.nodes li:hover{background:rgba(199,154,75,.05)}
.n-no{font-size:.6875rem;font-weight:500;letter-spacing:.2em;color:var(--gold);font-variant-numeric:tabular-nums}
.n-name{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:300}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{max-width:1180px;margin:0 auto;border-top:1px solid var(--line)}
.faq li{border-bottom:1px solid var(--line)}
.faq summary{display:flex;gap:1.25rem;align-items:baseline;padding:1.25rem 0;cursor:pointer;list-style:none;
  font-size:clamp(1.05rem,2.2vw,1.4rem);font-weight:300;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--gold);font-size:1.25rem;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover,.faq summary:focus-visible{color:var(--gold)}
.q-no{font-size:.6875rem;font-weight:500;letter-spacing:.18em;color:var(--gold);font-variant-numeric:tabular-nums}
.faq .a{padding:0 0 1.4rem 3.1rem;color:var(--soft);max-width:60ch}
@media (max-width:640px){.faq .a{padding-left:0}}

/* =====================================================================
   FINAL SCENE — the return to the Solara world
   ===================================================================== */
.final{position:relative;min-height:88vh;min-height:88svh;display:grid;place-content:center;padding:clamp(5rem,12vw,9rem) var(--gut);overflow:hidden;text-align:center}
.final-inner{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(1.5rem,4vw,2.5rem)}
.final .huge{max-width:14ch}

/* =====================================================================
   OBJECTS — shop, product, cart
   ===================================================================== */
.objects{max-width:1480px;margin:0 auto;display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.object a{display:grid;gap:1rem;text-decoration:none}
.object .frame{transition:transform .7s var(--ease)}
.object a:hover .frame,.object a:focus-visible .frame{transform:translateY(-6px)}
.object-meta{display:grid;gap:.25rem}
.object-meta .no{font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.object-meta .nm{font-size:1.25rem;font-weight:300}
.object-meta .pr{font-size:.875rem;color:var(--mute);font-variant-numeric:tabular-nums}
.product{display:grid;gap:clamp(2rem,5vw,4rem);max-width:1480px;margin:0 auto;padding:clamp(8rem,16vh,11rem) var(--gut) clamp(4rem,8vw,7rem)}
@media (min-width:900px){.product{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.product-art{display:grid;gap:1rem;position:relative}
.product-art img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--charcoal)}
.product-art .plate{position:relative;aspect-ratio:1}
.product-info{display:grid;gap:1.1rem;align-content:start;position:sticky;top:6rem}
@media (max-width:899px){.product-info{position:static}}
.product-name{font-size:clamp(2rem,4.5vw,3.25rem);font-weight:300;letter-spacing:-.025em;line-height:1.05;margin:0}
.product-price{font-size:1.25rem;color:var(--gold);font-variant-numeric:tabular-nums;margin:0}
.buy{display:grid;gap:1.25rem;margin-top:.5rem}
.buy .qty{max-width:7rem}
.buy .qty input{background:transparent;border:0;border-bottom:1px solid rgba(247,243,234,.28);color:var(--paper);padding:.5rem 0;font-size:1.1rem;width:100%}
.buy .qty input:focus{outline:none;border-bottom-color:var(--gold)}
.notice--dev{border-left-color:var(--mute);display:grid;gap:.35rem}
.small{font-size:.8125rem}
.cart{max-width:1480px;margin:0 auto;display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){.cart{grid-template-columns:minmax(0,1fr) minmax(0,19rem);align-items:start}}
.cart-lines{border-top:1px solid var(--line)}
.cart-lines li{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem 1.25rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.cart-lines .thumb{width:72px;aspect-ratio:1;background:var(--charcoal);overflow:hidden;position:relative}
.cart-lines .thumb img{width:100%;height:100%;object-fit:cover}
.line-meta{display:grid;gap:.2rem;min-width:0}
.line-meta .no{font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.line-meta .nm{font-size:1.0625rem;text-decoration:none}
.line-meta .nm:hover{color:var(--gold)}
.line-meta .vr{font-size:.8125rem;color:var(--mute)}
.line-qty{display:flex;align-items:center;gap:.5rem}
.line-qty input{width:3.75rem;background:transparent;border:1px solid var(--line);color:var(--paper);padding:.4rem .5rem;text-align:center}
.line-total{font-variant-numeric:tabular-nums;grid-column:3}
.line-remove{grid-column:2/-1;justify-self:start}
.linkbtn{background:none;border:0;color:var(--mute);text-decoration:underline;cursor:pointer;font-size:.8125rem;padding:.4rem 0;min-height:36px}
.linkbtn:hover,.linkbtn:focus-visible{color:var(--gold)}
.cart-total{display:grid;gap:.75rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--line);align-content:start}
.cart-total .total{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:300;font-variant-numeric:tabular-nums;margin:0}

/* a low-resolution portrait is shown at a size its source can carry */
.portrait--lowres figure{max-width:min(300px,100%)}
.portrait--lowres img{image-rendering:auto}

/* metadata on the cream room needs the ink-side colours, not the dark ones */
.cream-room .meta-line{color:var(--ink-mute)}
.cream-room .meta-line b{color:var(--deep-gold)}
.cream-room .room-no{color:rgba(140,107,47,.18);-webkit-text-stroke-color:rgba(140,107,47,.55)}

/* =====================================================================
   FOUNDER PROFILE — an animated portrait keeps its own proportions
   ===================================================================== */
.portrait figure.is-animated{aspect-ratio:auto;background:var(--charcoal)}
.portrait figure.is-animated img{height:auto;object-fit:contain;filter:none}
.portrait figure a{display:block;height:100%}
.portrait .ini-link{display:grid;place-content:center;height:100%;text-decoration:none}
a.nm{text-decoration:none;transition:color .3s var(--ease)}
a.nm:hover,a.nm:focus-visible{color:var(--gold)}
.profile{display:grid;gap:clamp(2rem,5vw,4.5rem);max-width:1480px;margin:0 auto;padding:clamp(8rem,16vh,11rem) var(--gut) clamp(3rem,7vw,5rem);position:relative}
@media (min-width:900px){.profile{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.profile-art figure{margin:0;background:var(--charcoal);overflow:hidden;position:relative;border:1px solid var(--line)}
.profile-art figure.is-animated img{width:100%;height:auto;display:block}
.profile-art figure:not(.is-animated) img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.profile-art .ini--lg{display:grid;place-content:center;aspect-ratio:4/5;font-size:clamp(5rem,12vw,9rem);font-weight:300;
  background:radial-gradient(55% 45% at 50% 45%,rgba(199,154,75,.2),transparent 72%),var(--charcoal)}
.profile-art .muted{margin-top:.75rem}
.profile-body{display:grid;gap:1.1rem;align-content:start}
.profile-body .role{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0}
.profile-links ul{margin-top:.5rem;border-top:1px solid var(--line)}
.profile-links li{border-bottom:1px solid var(--line)}
.profile-links a{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;justify-content:space-between;
  padding:.85rem 0;text-decoration:none;transition:color .3s var(--ease)}
.profile-links a span:first-child{font-size:1.0625rem;font-weight:300}
.profile-links .u{font-size:.8125rem;color:var(--mute)}
.profile-links a:hover,.profile-links a:focus-visible{color:var(--gold)}
.profile-links a:hover .u,.profile-links a:focus-visible .u{color:var(--gold)}

/* an animated portrait is never enlarged much past its own resolution */
.profile-art figure.is-animated{max-width:min(380px,100%)}
.portrait figure.is-animated{max-width:min(320px,100%)}

/* =====================================================================
   PRACTICE — four disciplines, four compositions. Each alternates side
   and carries its own accent, so the pages are siblings, not copies.
   ===================================================================== */
.practice-list{max-width:1480px;margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem);display:grid;gap:clamp(4rem,10vw,9rem)}
.practice-list .disc{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (min-width:860px){
  .practice-list .disc{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .practice-list .disc:nth-child(even) .disc-art{order:2}
  .practice-list .disc:nth-child(even) .disc-body{order:1}
  .practice-list .disc:nth-child(2){padding-left:clamp(2rem,6vw,6rem)}
  .practice-list .disc:nth-child(3){padding-right:clamp(2rem,6vw,6rem)}
  .practice-list .disc:nth-child(4){padding-left:clamp(1rem,3vw,3rem)}
}
.disc-art{display:block;border:1px solid var(--line);background:linear-gradient(160deg,rgba(247,243,234,.03),transparent 60%);overflow:hidden;
  transition:border-color .6s var(--ease),transform .7s var(--ease)}
.disc-art:hover{transform:translateY(-6px)}
.plate-art{display:block;width:100%;height:auto;aspect-ratio:4/5;padding:clamp(1.5rem,4vw,3rem)}
.disc--gold{color:var(--gold)}
.disc--cream{color:var(--soft)}
.disc--violet{color:#9b7cff}
.disc--ember{color:var(--ember)}
.disc:hover .disc-art{border-color:currentColor}
.disc-body{display:grid;gap:.9rem;color:var(--paper)}
.disc-body h2{font-size:clamp(2.25rem,6vw,4.5rem);font-weight:300;letter-spacing:-.03em;line-height:.95;margin:0}
.disc-body h2 a{text-decoration:none}
.disc-body h2 a:hover,.disc-body h2 a:focus-visible{color:inherit;opacity:.72}
.disc-line{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:300;color:currentColor;margin:0;max-width:30ch}
.disc-line--lg{font-size:clamp(1.15rem,2.4vw,1.75rem);max-width:26ch}
.disc-tags{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.8125rem;color:var(--mute)}
.disc-tags li{position:relative}
.disc-tags li+li::before{content:"";position:absolute;left:-.75rem;top:.6em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.disc-hero{position:relative;display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;max-width:1480px;margin:0 auto;
  padding:clamp(8rem,17vh,12rem) var(--gut) clamp(3rem,7vw,5rem)}
@media (min-width:900px){.disc-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.disc-hero-body{display:grid;gap:1.1rem;position:relative;z-index:1}
.disc-hero-art{position:relative;z-index:1;border:1px solid var(--line);max-width:26rem;justify-self:end;width:100%}
@media (max-width:899px){.disc-hero-art{justify-self:start;max-width:18rem}}
.includes{max-width:1180px;margin:0 auto;border-top:1px solid var(--line)}
.includes li{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line);
  font-size:clamp(1.05rem,2.2vw,1.45rem);font-weight:300}
.i-no{font-size:.6875rem;font-weight:500;letter-spacing:.18em;color:var(--gold);font-variant-numeric:tabular-nums}
.disc-work{max-width:1480px;margin:0 auto;display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.disc-work a{display:grid;gap:.9rem;text-decoration:none}
.dw-meta{display:grid;gap:.2rem}
.dw-meta .no{font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.dw-meta .nm{font-size:1.125rem;font-weight:300}

/* =====================================================================
   PARTNERS
   ===================================================================== */
.partner{max-width:1480px;margin:0 auto;display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:860px){.partner{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}}
.partner-mark{display:grid;place-content:center;aspect-ratio:4/3;border:1px solid var(--line);
  background:radial-gradient(70% 60% at 50% 40%,rgba(199,154,75,.10),transparent 70%)}
.partner-mark span{font-size:clamp(2rem,5vw,3.5rem);font-weight:600;letter-spacing:.32em;margin-right:-.32em;color:var(--soft)}
.partner-body{display:grid;gap:1rem}
.partner-body h2{font-size:clamp(2rem,5vw,3.5rem);font-weight:300;letter-spacing:-.03em;line-height:1;margin:0}

/* =====================================================================
   JOURNAL — a publication, not a card grid
   ===================================================================== */
.lead-entry{max-width:1480px;margin:0 auto clamp(3rem,7vw,5rem)}
.lead-entry a{display:grid;gap:clamp(1.25rem,3vw,2.5rem);text-decoration:none}
@media (min-width:860px){.lead-entry a{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:end}}
.lead-art{position:relative;display:block;aspect-ratio:16/9;background:var(--charcoal);overflow:hidden}
.lead-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.lead-entry a:hover .lead-art img,.lead-entry a:focus-visible .lead-art img{transform:scale(1.03)}
.lead-body{display:grid;gap:.7rem}
.lead-title{font-size:clamp(1.75rem,4vw,3rem);font-weight:300;letter-spacing:-.025em;line-height:1.05}
.lead-stand{color:var(--mute);max-width:44ch}
.entries{max-width:1480px;margin:0 auto;border-top:1px solid var(--line)}
.entries li{border-bottom:1px solid var(--line)}
.entries a{display:grid;gap:.4rem 2.5rem;padding:clamp(1.25rem,3vw,2rem) 0;text-decoration:none;transition:padding-left .5s var(--ease)}
@media (min-width:860px){.entries a{grid-template-columns:12rem minmax(0,1fr) minmax(0,1fr);align-items:baseline}}
.entries a:hover,.entries a:focus-visible{padding-left:1rem}
.e-meta{display:flex;gap:.75rem;font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.e-meta b{color:var(--gold);font-weight:500}
.e-title{font-size:clamp(1.25rem,2.6vw,1.9rem);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.e-stand{color:var(--mute);font-size:.9375rem;max-width:46ch}
.entry{max-width:46rem;margin:0 auto;padding:clamp(8rem,16vh,11rem) var(--gut) 0}
.entry-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3rem)}
.entry-title{font-size:clamp(2rem,5.5vw,3.75rem);font-weight:300;letter-spacing:-.03em;line-height:1.02;margin:0}
.entry-stand{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:300;color:var(--soft);max-width:38ch;margin:0}
.entry-art{margin:0 0 clamp(2rem,5vw,3rem);background:var(--charcoal)}
.entry-art img{width:100%;height:auto;display:block}
.entry-body{display:grid;gap:1.25rem;color:var(--soft);font-size:1.0625rem;line-height:1.75}
.entry-body p{max-width:68ch}
.foot-cta{margin:.5rem 0 1rem}
.disc-body .btn,.partner-body .btn,.disc-hero-body .btn{justify-self:start}
.stack .btn,.stack--lg .btn{justify-self:start}

/* =====================================================================
   PAPER — the brand's 30% cream, used as real structure rather than a
   card. A spread, not a section: ink type on paper, full bleed.
   ===================================================================== */
.paper{background:var(--paper);color:var(--ink);padding:clamp(4.5rem,11vw,9rem) var(--gut);position:relative}
.paper::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(18,17,16,.12)}
.paper a{color:inherit}
.paper .prose{color:var(--ink-mute)}
.paper .rule{border:0;border-top:1px solid rgba(18,17,16,.16);margin:0}

/* the editorial voice: one italic line that carries a whole spread */
.said{font-weight:300;font-style:italic;font-size:clamp(1.6rem,4.2vw,3.4rem);line-height:1.12;letter-spacing:-.02em;max-width:22ch;margin:0}
.paper .said{color:var(--ink)}

/* =====================================================================
   CATALOGUE — the exhibition index. Titles carry the page; artwork
   appears beside a row only when it actually exists.
   ===================================================================== */
.catalogue{max-width:1480px;margin:0 auto;border-top:1px solid rgba(18,17,16,.22)}
.cat-row{position:relative;border-bottom:1px solid rgba(18,17,16,.22)}
.cat-row > a{display:grid;gap:.1rem 2rem;align-items:baseline;padding:clamp(1.15rem,2.8vw,2.1rem) 0;text-decoration:none;
  transition:padding-left .5s var(--ease)}
@media (min-width:860px){.cat-row > a{grid-template-columns:4.5rem minmax(0,1fr) auto}}
.cat-no{font-size:.75rem;font-weight:500;letter-spacing:.14em;color:var(--ink-mute);font-variant-numeric:tabular-nums;
  transition:color .4s var(--ease)}
.cat-no::after{content:" —";opacity:.45}
.cat-title{font-size:clamp(2rem,6.4vw,5.5rem);font-weight:300;letter-spacing:-.04em;line-height:.95;
  transition:transform .55s var(--ease),color .4s var(--ease)}
.cat-meta{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
  transition:color .4s var(--ease)}
@media (min-width:860px){.cat-meta{text-align:right;align-self:center}}
.cat-row > a:hover .cat-title,.cat-row > a:focus-visible .cat-title{transform:translateX(clamp(.5rem,1.5vw,1.5rem));color:var(--gold-on-paper)}
.cat-row > a:hover .cat-no,.cat-row > a:focus-visible .cat-no,
.cat-row > a:hover .cat-meta,.cat-row > a:focus-visible .cat-meta{color:var(--gold-on-paper)}
/* a rule draws itself under the hovered row: the only "component" here is a line */
.cat-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cat-row:hover::after,.cat-row:focus-within::after{transform:scaleX(1)}
/* artwork is pulled out of the archive: cropped, tilted, overlapping the type */
.cat-art{position:absolute;right:clamp(2rem,8vw,9rem);top:50%;width:min(26vw,340px);aspect-ratio:4/5;z-index:3;
  pointer-events:none;overflow:hidden;opacity:0;
  transform:translate(2.5rem,-46%) rotate(4deg) scale(.94);
  clip-path:inset(12% 0 0 0);
  box-shadow:0 34px 70px -34px rgba(18,17,16,.55);
  transition:opacity .38s var(--ease),transform .62s var(--ease),clip-path .62s var(--ease)}
.cat-art img{width:100%;height:100%;object-fit:cover}
.cat-row:hover .cat-art,.cat-row:focus-within .cat-art{opacity:1;clip-path:inset(0 0 0 0);
  transform:translate(0,-52%) rotate(-2.5deg) scale(1)}
@media (max-width:859px){.cat-art{display:none}}
@media (prefers-reduced-motion:reduce){
  .cat-art{transition:opacity .2s linear;transform:translate(0,-50%) rotate(0) scale(1);clip-path:none}
  .cat-row > a:hover .cat-title{transform:none}
}

/* =====================================================================
   ROLES — a sentence, not a grid of boxes
   ===================================================================== */
.roles{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.4rem;max-width:22ch;font-weight:300;line-height:1.05}
.roles li{letter-spacing:-.02em}
.roles li:nth-child(1){font-size:clamp(2rem,6vw,4.5rem)}
.roles li:nth-child(2){font-size:clamp(1.4rem,3.6vw,2.6rem);font-style:italic}
.roles li:nth-child(3){font-size:clamp(2.4rem,7vw,5.5rem)}
.roles li:nth-child(4){font-size:clamp(1.2rem,3vw,2.2rem)}
.roles li:nth-child(5){font-size:clamp(1.8rem,5vw,3.6rem);font-style:italic}
.roles li:nth-child(6){font-size:clamp(2.6rem,7.5vw,6rem)}
.roles-note{max-width:26ch;color:var(--ink-mute);font-size:.9375rem}

/* section headers, used selectively */
.head--plain{display:grid;gap:.6rem;max-width:1480px;margin:0 auto clamp(2.5rem,6vw,4.5rem)}
.head--margin{display:grid;gap:.6rem 2.5rem;max-width:1480px;margin:0 auto clamp(2.5rem,6vw,4.5rem)}
@media (min-width:860px){.head--margin{grid-template-columns:5.5rem minmax(0,1fr)}}
.head--margin .m-no{font-size:.6875rem;font-weight:500;letter-spacing:.2em;color:var(--gold);font-variant-numeric:tabular-nums;padding-top:.7em}
.paper .head--margin .m-no{color:var(--deep-gold)}

/* a wordmark, cropped by the viewport, behind the sculpture */
.hero-word{position:absolute;left:50%;bottom:clamp(-1.5rem,-2vw,-.5rem);transform:translateX(-50%);z-index:1;pointer-events:none;
  font-size:clamp(7rem,21vw,20rem);font-weight:600;letter-spacing:.06em;line-height:.8;white-space:nowrap;
  color:rgba(247,243,234,.045);opacity:calc(1 - var(--st,0))}
@media (prefers-reduced-motion:reduce){.hero-word{opacity:.5}}
.said--tight{margin-top:.75rem}
.after-index{max-width:1480px;margin:clamp(2rem,4vw,3rem) auto 0}
.work-open{position:relative;min-height:62vh;min-height:62svh;display:grid;align-content:end;gap:1.25rem;
  padding:clamp(9rem,20vh,14rem) var(--gut) clamp(3rem,6vw,5rem);overflow:hidden}
.work-title{position:relative;z-index:1;letter-spacing:-.04em}
.work-title em{font-style:italic;color:var(--gold)}
.work-said{position:relative;z-index:1;color:var(--mute);max-width:26ch}
@media (min-width:1100px){
  .work-open{grid-template-columns:minmax(0,1fr) minmax(0,.55fr);align-items:end}
  .work-said{justify-self:end;text-align:right;padding-bottom:1.5rem}
}
.index-h{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:300;letter-spacing:-.02em;margin:0}
.filters--ink a{border-color:rgba(18,17,16,.2);color:var(--ink-mute)}
.filters--ink a:hover,.filters--ink a:focus-visible{border-color:var(--ink);color:var(--ink)}
.filters--ink a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* the signature flips to ink while a paper spread passes behind it */
.on-paper .sig{color:var(--ink)}
.on-paper .sig::before{background:linear-gradient(rgba(247,243,234,.96) 45%,rgba(247,243,234,.72) 72%,rgba(247,243,234,0))}
.on-paper .sig-brand .mark--w{background-image:url(/assets/img/mark-black.png)}
.on-paper .cart-link b{background:var(--deep-gold);color:var(--paper)}
.sig,.sig::before,.sig-brand .mark{transition:color .45s var(--ease),background .45s var(--ease)}
/* buttons on paper invert too */
.paper .btn{border-color:rgba(18,17,16,.25);color:var(--ink)}
.paper .btn:hover,.paper .btn:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.paper :focus-visible{outline-color:var(--deep-gold)}
.roles-spread{display:grid;gap:1.25rem 3rem}
@media (min-width:900px){
  .roles-spread{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:end}
  .roles-h{grid-column:1/-1}
  .roles-note{align-self:end;padding-bottom:.6rem}
}
.roles{max-width:none}

/* gold is lighter than it looks on cream: paper uses a deeper cut so small
   labels clear AA (4.45:1 -> 6.0:1) */
:root{--gold-on-paper:#6F5220}
.paper .head--margin .m-no,.cream-room .meta-line b,.paper .meta-line b,.cat-row > a:hover,.cat-row > a:focus-visible{color:var(--gold-on-paper)}

/* =====================================================================
   THE ARCHIVE — three category worlds. Different shapes, different
   plates, no cards.
   ===================================================================== */
.archive{max-width:1480px;margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem);display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:1000px){
  .archive{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .cat--poster{grid-column:1/5}
  .cat--banner{grid-column:5/13;margin-top:clamp(3rem,8vw,7rem)}
  .cat--vfx{grid-column:2/10;margin-top:clamp(1rem,3vw,3rem)}
}
.cat > a{display:grid;gap:1.1rem;text-decoration:none}
.cat-frame{position:relative;display:block;overflow:hidden;background:var(--charcoal);border:1px solid var(--line);
  transition:transform .7s var(--ease),border-color .6s var(--ease)}
.cat--poster .cat-frame{aspect-ratio:2/3}
.cat--banner .cat-frame{aspect-ratio:21/8}
.cat--vfx .cat-frame{aspect-ratio:16/9}
.cat > a:hover .cat-frame,.cat > a:focus-visible .cat-frame{transform:translateY(-8px);border-color:var(--gold)}
.cat-plate{position:absolute;inset:0;transition:transform 1.2s var(--ease),opacity .8s var(--ease)}
.cat > a:hover .cat-plate{transform:scale(1.04)}
/* each category's plate is drawn, not stock: sheets, strips, frames */
.cat-plate--poster{background:
  linear-gradient(160deg,rgba(247,243,234,.06),transparent 55%),
  repeating-linear-gradient(90deg,rgba(199,154,75,.14) 0 1px,transparent 1px 44px),var(--charcoal)}
.cat-plate--banner{background:
  repeating-linear-gradient(0deg,rgba(199,154,75,.12) 0 1px,transparent 1px 26px),
  radial-gradient(120% 90% at 10% 50%,rgba(199,154,75,.16),transparent 60%),var(--charcoal)}
.cat-plate--vfx{background:
  repeating-linear-gradient(90deg,rgba(123,77,255,.10) 0 2px,transparent 2px 9px),
  radial-gradient(70% 70% at 70% 40%,rgba(61,168,255,.14),transparent 65%),var(--charcoal)}
.cat-text{display:grid;gap:.35rem}
.cat-index{font-size:.6875rem;font-weight:500;letter-spacing:.22em;color:var(--gold);font-variant-numeric:tabular-nums}
.cat-name{font-size:clamp(2rem,5.5vw,4rem);font-weight:300;letter-spacing:-.035em;line-height:.95}
.cat-line{color:var(--mute);max-width:34ch}
.cat-count{font-size:.8125rem;color:var(--soft);opacity:.7}

/* =====================================================================
   THE OVERLAY — a second layer, not a modal box
   ===================================================================== */
.archive-layer{position:fixed;inset:0;z-index:250;background:rgba(9,9,8,.96);display:grid;grid-template-rows:auto minmax(0,1fr);
  opacity:0;transition:opacity .42s var(--ease)}
.archive-open .archive-layer{opacity:1}
.archive-open body,body.archive-open{overflow:hidden}
.archive-open main,.archive-open .colophon,.archive-open .sig{filter:blur(3px) brightness(.55);transition:filter .5s var(--ease)}
.ar-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--gut);border-bottom:1px solid var(--line)}
.ar-meta{display:flex;gap:1.25rem;font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0}
.ar-close{background:none;border:1px solid var(--line);color:var(--paper);padding:.6rem 1.25rem;min-height:44px;border-radius:9999px;cursor:pointer;
  font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.ar-close:hover,.ar-close:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ar-scroll{overflow-y:auto;overscroll-behavior:contain;padding:clamp(2rem,6vw,4.5rem) var(--gut) clamp(4rem,10vw,7rem)}
.ar-scroll:focus{outline:none}
.ar-head{max-width:1480px;margin:0 auto clamp(2rem,5vw,3.5rem);display:grid;gap:.75rem}
.ar-head h2{font-size:clamp(2.5rem,8vw,6.5rem);font-weight:300;letter-spacing:-.04em;line-height:.92;margin:0}
.ar-head p{color:var(--mute);max-width:44ch;margin:0}
.ar-gallery{max-width:1480px;margin:0 auto;display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
@media (min-width:900px){
  .ar-gallery{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  /* five hanging positions, so no two neighbours share a shape */
  .ar-piece--0{grid-column:1/8}
  .ar-piece--1{grid-column:9/13;margin-top:clamp(2rem,6vw,5rem)}
  .ar-piece--2{grid-column:3/9}
  .ar-piece--3{grid-column:7/13}
  .ar-piece--4{grid-column:1/6;margin-top:clamp(1rem,3vw,2rem)}
}
.ar-piece{margin:0;display:grid;gap:.75rem;opacity:0;transform:translateY(18px);animation:ar-in .7s var(--ease) forwards}
.ar-piece--1{animation-delay:.06s}.ar-piece--2{animation-delay:.12s}.ar-piece--3{animation-delay:.18s}.ar-piece--4{animation-delay:.24s}
@keyframes ar-in{to{opacity:1;transform:none}}
.ar-piece img{width:100%;height:auto;display:block;background:var(--charcoal)}
.ar-plate{display:grid;place-content:center;aspect-ratio:4/5;padding:2rem;text-align:center;background:
  radial-gradient(60% 55% at 50% 45%,rgba(199,154,75,.14),transparent 70%),var(--charcoal)}
.ar-plate span{font-size:clamp(1.2rem,2.4vw,2rem);font-weight:300}
.ar-piece figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;font-size:.875rem;color:var(--mute)}
.ar-t{color:var(--paper)}
.ar-link{margin-left:auto;text-decoration:none;border-bottom:1px solid rgba(247,243,234,.3);color:var(--soft)}
.ar-link:hover,.ar-link:focus-visible{color:var(--gold);border-color:var(--gold)}
.ar-empty{max-width:46ch;display:grid;gap:1rem;justify-items:start;color:var(--mute)}
.ar-empty .said{color:var(--paper)}
@media (prefers-reduced-motion:reduce){
  .ar-piece{opacity:1;transform:none;animation:none}
  .archive-open main,.archive-open .colophon,.archive-open .sig{filter:none}
  .archive-layer{transition:none}
}

/* the plates get built, not just tinted: a sheet, a stack of strips, a frame */
.cat-plate::before,.cat-plate::after{content:"";position:absolute;pointer-events:none}
.cat-plate--poster::before{inset:12% 16%;border:1px solid rgba(247,243,234,.16);
  background:linear-gradient(180deg,rgba(247,243,234,.07),transparent 60%)}
.cat-plate--poster::after{left:16%;right:16%;bottom:18%;height:1px;background:rgba(199,154,75,.5)}
.cat-plate--banner::before{left:6%;right:6%;top:26%;height:14%;border:1px solid rgba(247,243,234,.18);
  background:linear-gradient(90deg,rgba(199,154,75,.22),transparent 70%)}
.cat-plate--banner::after{left:6%;right:24%;bottom:26%;height:14%;border:1px solid rgba(247,243,234,.1)}
.cat-plate--vfx::before{inset:18% 12%;border:1px solid rgba(247,243,234,.14)}
.cat-plate--vfx::after{left:50%;top:50%;width:min(34%,150px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(61,168,255,.4),rgba(123,77,255,.18) 45%,transparent 70%)}
.cat > a:hover .cat-plate--vfx::after{transform:translate(-50%,-50%) scale(1.15);transition:transform .9s var(--ease)}

/* =====================================================================
   THE ARCHIVE ROOMS — each category is a different room, not one modal.
   Posters is paper. Banners is ink. VFX is the dark.
   ===================================================================== */
.archive-layer{--ar-bg:#0a0908;--ar-fg:var(--paper);--ar-mute:var(--mute);--ar-rule:var(--line);--ar-accent:var(--gold);
  background:var(--ar-bg);color:var(--ar-fg)}
.archive-layer[data-cat="poster"]{--ar-bg:var(--paper);--ar-fg:var(--ink);--ar-mute:var(--ink-mute);
  --ar-rule:rgba(18,17,16,.18);--ar-accent:var(--gold-on-paper)}
.archive-layer[data-cat="banner"]{--ar-bg:var(--ink);--ar-fg:var(--paper);--ar-accent:var(--gold)}
.archive-layer[data-cat="vfx"]{--ar-bg:#08070a;--ar-fg:var(--paper);--ar-accent:#9b7cff}
.ar-top{border-bottom:1px solid var(--ar-rule)}
.ar-meta{color:var(--ar-mute)}
.ar-meta span:first-child{color:var(--ar-accent)}
.ar-close{border-color:var(--ar-rule);color:var(--ar-fg)}
.ar-close:hover,.ar-close:focus-visible{background:var(--ar-fg);color:var(--ar-bg);border-color:var(--ar-fg)}
.ar-scroll{position:relative}
/* the category number, set enormous and cropped: the room's own signage */
.ar-ghost{position:absolute;right:calc(-1 * clamp(1rem,3vw,4rem));top:clamp(-2rem,-3vw,-1rem);z-index:0;pointer-events:none;
  font-size:clamp(11rem,34vw,32rem);font-weight:600;line-height:.72;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--ar-accent);opacity:.16}
.ar-head{position:relative;z-index:1}
.ar-head h2{font-size:clamp(2.75rem,9vw,7.5rem)}
.ar-head p{color:var(--ar-mute);font-style:italic;font-weight:300;font-size:clamp(1rem,1.8vw,1.35rem);max-width:34ch}
.ar-gallery{position:relative;z-index:1}
.ar-piece figcaption{color:var(--ar-mute);border-top:1px solid var(--ar-rule);padding-top:.6rem}
.ar-t{color:var(--ar-fg)}
.ar-link{color:var(--ar-fg);border-bottom-color:var(--ar-rule)}
.ar-link:hover,.ar-link:focus-visible{color:var(--ar-accent);border-color:var(--ar-accent)}
.ar-plate{background:radial-gradient(60% 55% at 50% 45%,color-mix(in srgb,var(--ar-accent) 18%,transparent),transparent 70%),
  color-mix(in srgb,var(--ar-fg) 6%,var(--ar-bg))}
.ar-plate span{color:var(--ar-fg)}
.ar-empty{color:var(--ar-mute)}
.ar-empty .said{color:var(--ar-fg)}
.ar-empty .btn{border-color:var(--ar-rule);color:var(--ar-fg)}
.ar-empty .btn:hover,.ar-empty .btn:focus-visible{background:var(--ar-fg);color:var(--ar-bg);border-color:var(--ar-fg)}
/* entrance: the room arrives, the page behind it recedes */
.archive-layer{transform:scale(1.015)}
.archive-open .archive-layer{transform:none;transition:opacity .42s var(--ease),transform .55s var(--ease)}
.archive-open main,.archive-open .colophon,.archive-open .sig{filter:blur(4px) brightness(.5);transform:scale(.985)}
main,.colophon{transition:filter .5s var(--ease),transform .5s var(--ease)}
.archive-open .ar-head h2{animation:ar-in .65s var(--ease) both .05s}
.archive-open .ar-head p{animation:ar-in .65s var(--ease) both .12s}
.archive-open .ar-ghost{animation:ar-in .8s var(--ease) both .02s}
@media (prefers-reduced-motion:reduce){
  .archive-layer,.archive-open .archive-layer{transform:none;transition:none}
  .archive-open main,.archive-open .colophon,.archive-open .sig{transform:none}
  .archive-open .ar-head h2,.archive-open .ar-head p,.archive-open .ar-ghost{animation:none}
}
/* the empty state is a statement, not a gallery item */
.ar-gallery > .ar-empty{grid-column:1/-1;max-width:34ch;gap:1.25rem}
.ar-empty .said{max-width:18ch}
/* attribution, shown only when it exists */
.credit-line span{color:var(--mute)}
.credits{margin-top:1.5rem;display:grid;gap:.4rem}
.credits ul{display:grid;gap:.25rem;color:var(--soft);font-size:.9375rem}
/* the pulled artwork sits in the right third; the title stops short of it so a
   long name is never clipped by its own image */
@media (min-width:1100px){
  .cat-row > a{grid-template-columns:4.5rem minmax(0,60%) auto}
  .cat-art{right:clamp(1rem,3vw,3rem);width:min(22vw,300px)}
}
/* the discipline label steps aside as the artwork takes the row, rather than
   being half-covered by it */
.cat-row.has-art:hover .cat-meta,.cat-row.has-art:focus-within .cat-meta{opacity:0;transform:translateX(.5rem)}
.cat-meta{transition:color .4s var(--ease),opacity .35s var(--ease),transform .45s var(--ease)}
@media (prefers-reduced-motion:reduce){.cat-row.has-art:hover .cat-meta{opacity:1;transform:none}}
/* the artwork is taller than one row, so every label steps aside while it is
   out, not just the hovered one */
.catalogue:has(.has-art:hover) .cat-meta,.catalogue:has(.has-art:focus-within) .cat-meta{opacity:0;transform:translateX(.5rem)}
/* a project with no artwork yet: the title carries the opening, stated once */
.p-open{position:relative;display:grid;align-content:end;gap:1rem;overflow:hidden;
  min-height:58vh;min-height:58svh;padding:clamp(9rem,20vh,13rem) var(--gut) clamp(2.5rem,5vw,4rem)}
.p-open > *:not(.env){position:relative;z-index:1}
.p-open .huge{max-width:16ch}
.sig-ext{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--soft);min-height:44px;display:inline-flex;align-items:center}
.sig-ext:hover,.sig-ext:focus-visible{color:var(--gold)}
.on-paper .sig-ext{color:var(--ink)}
.on-paper .sig-ext:hover,.on-paper .sig-ext:focus-visible{color:var(--gold-on-paper)}
@media (max-width:520px){.sig-ext{display:none}}

/* =====================================================================
   PRICING — a price list set like the catalogue, not a pricing table
   ===================================================================== */
.price-room{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.price-group{max-width:1480px;margin:0 auto clamp(2rem,4vw,3rem)}
.price-label{font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-on-paper);margin:0 0 .75rem}
.price-list{border-top:1px solid rgba(18,17,16,.18)}
.price-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.75rem;
  padding:.85rem 0;border-bottom:1px solid rgba(18,17,16,.14)}
.p-name{font-size:clamp(1.05rem,2.2vw,1.5rem);font-weight:300;letter-spacing:-.015em}
.p-dot{height:1px;border-bottom:1px dotted rgba(18,17,16,.3);transform:translateY(-.25em)}
.p-price{font-size:clamp(1rem,1.8vw,1.25rem);font-variant-numeric:tabular-nums;color:var(--ink)}
.merch-soon{color:var(--mute);max-width:20ch}

/* =====================================================================
   COMMISSION — an enquiry in four steps, set editorially
   ===================================================================== */
.commission-open{position:relative;display:grid;gap:1rem;overflow:hidden;
  padding:clamp(8rem,17vh,12rem) var(--gut) clamp(2rem,4vw,3rem)}
.commission-open > *:not(.env){position:relative;z-index:1}
.commission-said{color:var(--mute);max-width:30ch}
.commission-aside{font-size:.9375rem;color:var(--mute)}
.commission{display:grid;gap:clamp(2rem,5vw,4.5rem);max-width:1480px;margin:0 auto;padding:0 var(--gut) clamp(5rem,10vw,8rem)}
@media (min-width:1000px){.commission{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}}
.enquiry{display:grid;gap:clamp(2rem,4vw,3.25rem)}
.e-section{border:0;margin:0;padding:0;min-inline-size:0;display:grid;gap:1.25rem}
.e-section legend{display:flex;align-items:baseline;gap:.9rem;padding:0 0 .75rem;width:100%;
  border-bottom:1px solid var(--line);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.e-no{color:var(--gold);font-variant-numeric:tabular-nums}
.e-grid{display:grid;gap:1.5rem}
@media (min-width:720px){.e-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.e-grid .fld.full{grid-column:1/-1}}
.enquiry select{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid rgba(247,243,234,.28);border-radius:0;
  color:var(--paper);padding:.55rem 0 .75rem;font:300 1.125rem/1.4 var(--f);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 14px) 1.15rem,calc(100% - 8px) 1.15rem;background-size:6px 6px;background-repeat:no-repeat}
.enquiry select:focus{outline:none;border-bottom-color:var(--gold)}
.enquiry select:focus-visible{box-shadow:0 2px 0 var(--gold)}
.enquiry select option{background:var(--ink);color:var(--paper)}
.enquiry .fld small.muted{font-size:.8125rem;color:var(--mute)}
.e-submit{display:grid;gap:.85rem;justify-items:start}
.commission-done{min-height:76vh;min-height:76svh;display:grid;place-content:center;text-align:center;
  padding:clamp(7rem,16vh,11rem) var(--gut);position:relative;overflow:hidden}
.commission-done > *:not(.env){position:relative;z-index:1}

/* =====================================================================
   OPENING PANEL — the existing hero content, given a proper footing
   ===================================================================== */
.hero-panel{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(1.5rem,5vh,3rem);z-index:2;
  display:grid;gap:clamp(.9rem,2vw,1.4rem);align-items:end;pointer-events:none}
.hero-panel > *{pointer-events:auto}
.hero-panel .hero-sig{position:static;display:grid;gap:.4rem}
.hero-note{max-width:26ch;font-weight:300;font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.015em;color:var(--soft);margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
@media (min-width:1000px){
  .hero-panel{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:1.5rem 3rem}
  .hero-panel .hero-sig{grid-column:1;grid-row:1}
  .hero-note{grid-column:1;grid-row:2;max-width:30ch}
  .hero-actions{grid-column:2;grid-row:1/3;align-self:end;justify-content:flex-end}
}
@media (max-width:999px){
  .hero-enter{display:none}
  .hero-note{max-width:22ch;font-size:1.05rem}
}
.hero{height:230vh}
@media (prefers-reduced-motion:reduce){.hero{height:auto}}
/* the panel's own actions replace the old corner scroll cue, which collided with them */
.hero-enter{display:none}

/* =====================================================================
   TOP CONTROLS — the sections sit in the top bar on wider screens, so the
   homepage shows its navigation immediately. The Index button stays for
   narrow screens; the two are never both on screen, so no duplicate nav.
   ===================================================================== */
.sig-nav{display:none}
.sig-nav ul{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.sig-nav a{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--soft);min-height:44px;display:inline-flex;align-items:center;transition:color .3s var(--ease)}
.sig-nav a:hover,.sig-nav a:focus-visible{color:var(--gold)}
.sig-nav a[aria-current="page"]{color:var(--gold)}
.sig-nav .sig-cta{padding:.55rem 1.15rem;border:1px solid rgba(247,243,234,.3);border-radius:9999px;min-height:40px}
.sig-nav .sig-cta:hover,.sig-nav .sig-cta:focus-visible{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.on-paper .sig-nav a{color:var(--ink)}
.on-paper .sig-nav a:hover,.on-paper .sig-nav a:focus-visible,.on-paper .sig-nav a[aria-current="page"]{color:var(--gold-on-paper)}
.on-paper .sig-nav .sig-cta{border-color:rgba(18,17,16,.28)}
.on-paper .sig-nav .sig-cta:hover,.on-paper .sig-nav .sig-cta:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (min-width:1100px){
  .sig-nav{display:block}
  .index-btn{display:none}
}
.hero-panel{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.hero-panel{grid-template-columns:minmax(0,1fr)}}

/* A lazily-loaded portrait needs its space reserved, or the box is 0px tall and
   the browser never fetches it. contain keeps the real proportions inside. */
.portrait figure.is-animated{aspect-ratio:2/3;display:block}
.portrait figure.is-animated > a{display:block;width:100%;height:100%}
.portrait figure.is-animated img{width:100%;height:100%;object-fit:contain}

/* =====================================================================
   TOP BAR — the whole navigation, horizontal, at the top of every page.
   There is no second menu and no overlay panel.
   ===================================================================== */
.sig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1rem clamp(1.5rem,4vw,3rem)}
.topnav{min-width:0}
.topnav ul{display:flex;align-items:center;justify-content:flex-end;gap:clamp(.9rem,2vw,2rem);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.1rem 0}
.topnav ul::-webkit-scrollbar{display:none}
.topnav li{flex:0 0 auto}
.topnav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;text-decoration:none;
  font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
  transition:color .3s var(--ease)}
.topnav a:hover,.topnav a:focus-visible{color:var(--gold)}
.topnav a[aria-current="page"]{color:var(--gold)}
.topnav .sig-cta{padding:.5rem 1.1rem;border:1px solid rgba(247,243,234,.3);border-radius:9999px;min-height:38px}
.topnav .sig-cta:hover,.topnav .sig-cta:focus-visible{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.on-paper .topnav a{color:var(--ink)}
.on-paper .topnav a:hover,.on-paper .topnav a:focus-visible,.on-paper .topnav a[aria-current="page"]{color:var(--gold-on-paper)}
.on-paper .topnav .sig-cta{border-color:rgba(18,17,16,.28)}
.on-paper .topnav .sig-cta:hover,.on-paper .topnav .sig-cta:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (max-width:820px){
  /* the bar keeps its shape: the links become a compact scrolling row inside it */
  .sig{grid-template-columns:1fr;gap:.35rem;padding-top:.85rem;padding-bottom:.6rem}
  .topnav ul{justify-content:flex-start;gap:1.1rem}
  .topnav a{font-size:.625rem;letter-spacing:.16em}
  .topnav .sig-cta{padding:.4rem .85rem;min-height:34px}
}
@media (max-width:820px){
  /* a soft edge so the scrolling row reads as scrollable rather than cut off */
  .topnav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}