/* ═══════════════════════════════════════════════════════════════════
   NEBULLEM — v8
   Built against the measured grammar of mx.partners and mitchmyers.tv:
   one grotesque doing the shouting, a monospace doing the labelling,
   rooms that flip ground and ink, video used as layout rather than
   decoration, and motion kept to 0.3s.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. tokens ─────────────────────────────────────────────────── */
:root{
  --ink:      #EDEAE1;              /* never pure white — both references agree */
  --ink-60:   rgba(237,234,225,.60);
  --ink-38:   rgba(237,234,225,.38);
  --ink-14:   rgba(237,234,225,.14);
  --ground:   #050505;
  --panel:    #0C0C0C;
  --sig:      #FF3B30;              /* one hot accent, used sparingly */
  --sig-deep: #B3221B;              /* the same hue, dark enough for a light room */
  --paper:    #EDEAE1;
  --coal:     #0A0A0A;

  --d: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --m: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --s: 'Instrument Serif', Georgia, serif;

  --gut:  clamp(20px, 5vw, 76px);
  --max:  1720px;
  --nav:  clamp(58px, 6.4vh, 76px);

  --ez: cubic-bezier(.4,0,.2,1);
  --t:  .3s;                        /* measured: nothing on either site is slower */

  --t-xl:  clamp(52px, 11.4vw, 172px);
  --t-l:   clamp(38px, 8.2vw, 120px);
  --t-m:   clamp(29px, 4.5vw, 64px);
  --t-s:   clamp(20px, 2vw, 29px);
  --t-man: clamp(24px, 3.6vw, 58px);
  --t-b:   clamp(15px, 1.02vw, 17.5px);
  --t-lab: clamp(11px, .85vw, 14px);

  /* room tokens — the dark room is the default, everywhere on the page.
     .room.paper and .room.white re-declare these and every component
     below follows without a single override. */
  --fg:var(--ink); --bg:var(--ground);
  --line:rgba(237,234,225,.20); --edge:rgba(237,234,225,.38);
  --dim:rgba(237,234,225,.62); --faint:rgba(237,234,225,.50);
  --card:var(--panel); --accent:var(--sig); --on-accent:#000;
}

*,*::before,*::after{ box-sizing:border-box; }
/* every dark room draws its own field, inside its own box, so the
   texture stops at the section edge instead of running through it */
/* the canvas is a replaced element: with only inset:0 it lays out at
   its intrinsic (device-pixel) width and pushes the page sideways */
.rfx{ position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; }
.room > .inner{ position:relative; z-index:1; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--d); font-size:var(--t-b); font-weight:400;
  line-height:1.55; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{ overflow:hidden; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
::selection{ background:var(--sig); color:#000; }

/* ── 2. rooms ───────────────────────────────────────────────────
   Every section declares its own ground and ink. Components below
   only ever read --fg / --bg / --line / --dim, so a room can be
   flipped to paper or to a white plate and every
   child follows without a single override. */
.room{
  position:relative; background:var(--bg); color:var(--fg);
  padding:clamp(78px,12.5vh,158px) var(--gut);
}
.room.paper{
  --fg:var(--coal); --bg:var(--paper);
  --line:rgba(10,10,10,.20); --edge:rgba(10,10,10,.46);
  --dim:rgba(10,10,10,.68); --faint:rgba(10,10,10,.61);
  --card:rgba(10,10,10,.04); --accent:var(--sig-deep); --on-accent:#FFF;
}
.room.white{
  --fg:var(--coal); --bg:#FFFFFF;
  --line:rgba(10,10,10,.18); --edge:rgba(10,10,10,.44);
  --dim:rgba(10,10,10,.66); --faint:rgba(10,10,10,.58);
  --card:rgba(10,10,10,.04); --accent:var(--sig-deep); --on-accent:#FFF;
}

.room.tight{ padding-block:clamp(52px,8vh,96px); }
.room.flush{ padding-inline:0; }
.inner{ width:100%; max-width:var(--max); margin-inline:auto; }
.room.flush > .inner{ padding-inline:0; }

/* ── 3. type ───────────────────────────────────────────────────── */
.dsp{
  font-weight:800; text-transform:uppercase; line-height:.86;
  font-stretch:88%; letter-spacing:-.012em; margin:0;
}
.dsp.xl{ font-size:var(--t-xl); letter-spacing:-.03em; }
.dsp.l { font-size:var(--t-l);  letter-spacing:-.016em; }
.dsp.m { font-size:var(--t-m);  letter-spacing:-.01em; }
.dsp.s { font-size:var(--t-s);  line-height:1.02; letter-spacing:0; }
.dot{ color:var(--accent); }

.lab{
  font-family:var(--m); font-size:var(--t-lab); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.4;
}
.ser{ font-family:var(--s); font-style:italic; font-weight:400;
  letter-spacing:-.005em; text-transform:none; }

.copy{ color:var(--dim); max-width:62ch; font-size:var(--t-b); }
.copy + .copy{ margin-top:1.1em; }

/* section header row — the strongest organising device on both sites */
.rh{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.4rem; padding-bottom:clamp(14px,1.8vh,22px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(38px,6.4vh,86px);
}
.rh-l,.rh-r{ font-family:var(--m); font-size:var(--t-lab); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; }
.rh-l{ display:flex; align-items:baseline; gap:1.4em; }
.rh-n{ color:var(--accent); font-weight:700; }
.rh-r{ color:var(--faint); text-align:right; }
@media (max-width:640px){ .rh-r{ display:none; } }

/* ── 4. links & buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.9em;
  font-family:var(--m); font-size:var(--t-lab); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:1.15em 1.9em; border:1px solid var(--fg); color:var(--fg);
  background:transparent; cursor:pointer;
  transition:background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.btn:hover{ background:var(--fg); color:var(--bg); }
.btn.solid{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.solid:hover{ background:var(--fg); border-color:var(--fg); color:var(--bg); }
.btn.ghost{ border-color:var(--edge); color:var(--dim); }
.btn.ghost:hover{ border-color:var(--fg); background:transparent; color:var(--fg); }

.mlink{
  font-family:var(--m); font-size:var(--t-lab); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  display:inline-flex; align-items:center; gap:.6em;
  transition:color var(--t) ease;
}
.mlink::after{ content:'↗'; font-size:1.15em; line-height:0;
  transition:transform var(--t) var(--ez); }
.mlink:hover{ color:var(--fg); }
.mlink:hover::after{ transform:translate(2px,-2px); }

/* ── 5. nav — always visible, never auto-hides ─────────────────── */
#nav{
  position:fixed; inset:0 0 auto 0; z-index:200; height:var(--nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-inline:var(--gut);
  color:var(--ink); mix-blend-mode:normal;
  transition:background var(--t) ease, color var(--t) ease,
             border-color var(--t) ease;
  border-bottom:1px solid transparent;
}
#nav.solid{ background:rgba(5,5,5,.82); backdrop-filter:blur(14px);
  border-bottom-color:var(--ink-14); }
#nav.on-paper{ color:var(--coal); }
#nav.on-paper.solid{ background:rgba(237,234,225,.90); border-bottom-color:rgba(10,10,10,.18); }
.nav-mark img{ height:clamp(15px,1.5vw,21px); width:auto;
  transition:filter var(--t) ease; }
#nav.on-paper .nav-mark img{ filter:invert(1); }
.nav-links{ display:flex; align-items:center; gap:clamp(16px,2.6vw,44px); }
.nav-links a{
  font-family:var(--m); font-size:var(--t-lab); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; opacity:.62;
  transition:opacity var(--t) ease, color var(--t) ease;
}
.nav-links a:hover,.nav-links a[aria-current]{ opacity:1; }
.nav-links a[aria-current]{ color:var(--sig); font-weight:700; }
#nav.on-paper .nav-links a[aria-current]{ color:var(--sig-deep); }
@media (max-width:700px){
  .nav-links{ gap:14px; }
  .nav-links a{ letter-spacing:.12em; }
  .nav-links a.hide-sm{ display:none; }
}

/* ── 6. boot ───────────────────────────────────────────────────── */
/* the wordmark and one hairline filling. Nothing else. */
#boot{ position:fixed; inset:0; z-index:400; background:var(--ground);
  display:grid; place-items:center; transition:opacity .42s ease; }
#boot.gone{ opacity:0; pointer-events:none; }
html.booted #boot{ display:none; }
body.booting{ overflow:hidden; }
.boot-in{ display:grid; justify-items:center;
  gap:clamp(18px,3.2vh,30px); width:clamp(126px,17vw,196px); }
.boot-mark{ width:100%; height:auto; }
.boot-bar{ position:relative; display:block; width:100%; height:1px;
  background:var(--ink-14); overflow:hidden; }
.boot-bar i{ position:absolute; inset:0; display:block;
  background:var(--ink); transform:scaleX(0); transform-origin:left center;
  transition:transform 2.2s cubic-bezier(.25,.55,.2,1); }

/* ── 7. cursor ─────────────────────────────────────────────────── */
@media (pointer:fine){
  body,a,button,summary,input,select,textarea,.tab{ cursor:none; }
  .cur{ position:fixed; left:0; top:0; z-index:500; pointer-events:none;
    width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
    background:var(--sig); will-change:transform;
    transition:width var(--t) var(--ez), height var(--t) var(--ez),
               margin var(--t) var(--ez), opacity var(--t) ease,
               background var(--t) ease; }
  .cur.big{ width:46px; height:46px; margin:-23px 0 0 -23px;
    background:rgba(255,59,48,.26); }
  .cur.hide{ opacity:0; }
}

/* ── 8. hero ───────────────────────────────────────────────────── */
.hero{
  position:relative; height:100svh; min-height:520px;
  display:grid; place-items:center; overflow:hidden; background:#000;
  padding:calc(var(--nav) + clamp(12px,2.6vh,30px)) var(--gut) clamp(16px,3.4vh,40px);
}
/* The grade below is white at the top, and white is the identity for
   multiply — so the top of the frame comes through at full brightness
   and the bar loses its footing on the brightest shots. This is a
   narrow scrim for the bar alone; it sits above the film and leaves
   the grade itself alone. */
.hero::before{ content:''; position:absolute; left:0; right:0; top:0;
  height:26%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.62) 0%,
             rgba(0,0,0,.28) 42%, transparent 100%); }
/* isolate:isolate keeps the multiply grade inside the film box — without
   it the blend reaches past the video and eats the page behind it */
.hero-film{ position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:min(100%, 56.25vw);
  overflow:hidden; isolation:isolate; }
.hero-film video,.hero-film img{ width:100%; height:100%; object-fit:cover; }
/* white at the top, black at the bottom, multiplied into the footage:
   white is the identity for multiply so the top frame is untouched and
   the fall to black crushes the bottom rather than washing grey over it */
.hero-veil{ position:absolute; inset:0; mix-blend-mode:multiply;
  background:linear-gradient(180deg, #fff 0%, #d0d0d0 28%,
             #5a5a5a 55%, #101010 78%, #000 100%); }

.hero-body{ position:relative; z-index:2; text-align:center; }
.hero-name{
  /* Helvetica here rather than Archivo, and a step down in size.
     The vh term keeps it inside the middle row on a short screen. */
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:min(clamp(40px, 8.6vw, 132px), 17vh); font-weight:700;
  text-transform:uppercase; line-height:.9; letter-spacing:-.028em;
  color:var(--ink); mix-blend-mode:exclusion; pointer-events:none;
  margin:0;
}
.hero-sub{ margin:clamp(20px,3vh,34px) auto 0; max-width:44ch;
  color:rgba(237,234,225,.86); font-size:clamp(14px,1.15vw,18px); }
.hero-row{ margin-top:clamp(24px,3.4vh,40px);
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-row .btn{ border-color:rgba(237,234,225,.5); color:var(--ink); }
.hero-row .btn:hover{ background:var(--ink); color:#000; border-color:var(--ink); }
/* the footage is red end to end, so a red fill here disappears on half
   the frames. Bone holds on every one of them; the accent comes back
   on hover. */
.hero-row .btn.solid{ background:var(--ink); border-color:var(--ink); color:#000; }
.hero-row .btn.solid:hover{ background:var(--sig); border-color:var(--sig); color:#000; }

/* ── 9. manifesto — sentence case, weight 500, one phrase hot ──── */
.man{
  font-size:var(--t-man); font-weight:500; line-height:1.12;
  letter-spacing:-.014em; max-width:34ch; color:var(--fg);
}
.man em{ font-style:normal; color:var(--accent); font-weight:700; }
.manifesto .ser{ color:var(--dim); }

/* ── 10. film index — one project, one screen ──────────────────── */
.films{ display:block; }
.film{
  position:relative; display:block; height:clamp(460px,88svh,1000px);
  overflow:hidden; background:#000; border-top:1px solid var(--ink-14);
}
.films .film:first-child{ border-top:0; }
.film video,.film > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.86);
  transition:filter .7s ease, transform 1.1s var(--ez);
}
.film:hover video,.film:hover > img{ filter:none; transform:scale(1.03); }
.film-veil{ position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.6)); }
.film-body{ position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding-inline:var(--gut); }
.film-spread{
  display:block; font-family:var(--m); font-weight:500;
  font-size:var(--t-lab); text-transform:uppercase;
  letter-spacing:.92em; text-indent:.92em; color:var(--ink);
  margin-bottom:clamp(10px,1.6vh,20px);
}
.film-title{
  display:block; font-size:var(--t-l); font-weight:800;
  text-transform:uppercase; line-height:.86; letter-spacing:-.018em;
  font-stretch:86%; color:var(--ink); mix-blend-mode:exclusion;
}
.film-tags{ display:flex; justify-content:center;
  gap:clamp(56px,17vw,300px); margin-top:clamp(12px,1.8vh,24px); }
.film-tags i{ font-style:normal; font-family:var(--m); font-weight:500;
  font-size:var(--t-lab); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); }
.film-no{ position:absolute; left:var(--gut); bottom:clamp(22px,4vh,44px);
  font-family:var(--m); font-size:var(--t-lab); font-weight:700;
  letter-spacing:.2em; color:var(--sig); }
.film-go{ position:absolute; right:var(--gut); bottom:clamp(22px,4vh,44px);
  font-family:var(--m); font-size:var(--t-lab); letter-spacing:.2em;
  text-transform:uppercase; color:rgba(237,234,225,.7);
  transition:color var(--t) ease; }
.film:hover .film-go{ color:var(--ink); }
/* a paper film inverts the whole plate, the way the references do once */
.film.paper{ background:var(--paper); }
.film.paper video,.film.paper > img{ filter:grayscale(1) contrast(1.02) brightness(1.04); }
.film.paper .film-veil{ background:linear-gradient(180deg,
  rgba(237,234,225,.1), rgba(237,234,225,.55)); }
.film.paper .film-title{ color:var(--coal); mix-blend-mode:normal; }
.film.paper .film-spread,.film.paper .film-tags i{ color:var(--coal); }
.film.paper .film-go{ color:rgba(10,10,10,.68); }
.film.paper .film-no{ color:var(--sig-deep); }
.film.paper:hover .film-go{ color:var(--coal); }

/* ── 11. tabs — the category switcher off mitchmyers ───────────── */
.tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--edge); }
.tab{
  flex:1 1 auto; min-width:140px; background:transparent; border:0;
  border-right:1px solid var(--edge);
  padding:clamp(14px,2.2vh,22px) clamp(12px,1.6vw,24px);
  font-family:var(--m); font-size:clamp(11px,.9vw,14px); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  text-align:center; cursor:pointer;
  transition:background var(--t) ease, color var(--t) ease;
}
.tab:last-child{ border-right:0; }
.tab:hover{ color:var(--fg); }
.tab[aria-selected="true"]{ background:var(--fg); color:var(--bg); }
.tabwrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); align-items:start;
  padding-top:clamp(34px,5.6vh,72px); }
.tp{ display:none; }
.tp.on{ display:contents; }
.tp-copy h3{ font-family:var(--s); font-style:italic; font-weight:400;
  font-size:clamp(30px,4.2vw,60px); line-height:1.02; letter-spacing:-.01em;
  margin-bottom:clamp(16px,2.4vh,28px); }
.tp-copy .copy{ font-family:var(--m); font-size:clamp(13px,.92vw,15px);
  line-height:1.75; }
.tp-copy .btn{ margin-top:clamp(20px,3vh,34px); }
.tp-media{ position:relative; aspect-ratio:16/10; overflow:hidden;
  background:#000; border:1px solid var(--line); }
.tp-media video,.tp-media img{ width:100%; height:100%; object-fit:cover; }
.tp-tag{ position:absolute; left:14px; bottom:12px; font-family:var(--m);
  font-size:var(--t-lab); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); mix-blend-mode:difference; }
@media (max-width:860px){
  .tabwrap{ grid-template-columns:minmax(0,1fr); }
  .tab{ min-width:50%; }
}

/* ── 12. figures ───────────────────────────────────────────────── */
.figs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.1vw,18px); }
.fig{ border:1px solid var(--line); background:var(--card);
  padding:clamp(20px,2.6vw,34px); min-height:clamp(150px,20vh,208px);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color var(--t) ease, background var(--t) ease; }
.fig:hover{ border-color:var(--accent); }
.fig-ico{ width:22px; height:22px; color:var(--accent); }
.fig-n{ display:block; font-size:clamp(30px,3.5vw,52px); font-weight:800;
  line-height:1; letter-spacing:-.03em; font-stretch:88%;
  margin-top:clamp(18px,2.6vh,30px); font-variant-numeric:tabular-nums; }
.fig-n b{ font-weight:800; color:var(--accent); font-size:.46em;
  margin-left:.12em; }
.fig-k{ display:block; margin-top:.7em; font-family:var(--m);
  font-size:var(--t-lab); letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); }
@media (max-width:980px){ .figs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .figs{ grid-template-columns:minmax(0,1fr); } }

/* ── 13. process ───────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,44px); }
.step{ border-top:1px solid var(--line); padding-top:clamp(18px,2.6vh,28px); }
.step-n{ display:block; font-size:clamp(34px,3.8vw,56px); font-weight:800;
  line-height:1; letter-spacing:-.03em; color:var(--accent);
  font-variant-numeric:tabular-nums; }
.step h3{ margin:clamp(12px,1.8vh,20px) 0 .55em; font-size:var(--t-s);
  font-weight:800; text-transform:uppercase; letter-spacing:-.005em;
  font-stretch:88%; }
.step p{ color:var(--dim); font-family:var(--m);
  font-size:clamp(12px,.86vw,14px); line-height:1.72; }
.step .dur{ display:block; margin-top:1.1em; font-family:var(--m);
  font-size:var(--t-lab); letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); }
@media (max-width:940px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns:minmax(0,1fr); } }

/* ── 14. tiers ─────────────────────────────────────────────────── */
.tier-foot{ margin:clamp(24px,3.4vh,40px) 0 0; max-width:70ch; }
.tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,22px); align-items:stretch; }
.tier{ border:1px solid var(--line); background:var(--card);
  padding:clamp(24px,3vw,42px); display:flex; flex-direction:column;
  transition:border-color var(--t) ease; }
.tier:hover{ border-color:var(--faint); }
.tier.feat{ border-color:var(--accent); }
.tier-k{ font-family:var(--m); font-size:var(--t-lab); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.tier h3{ margin:clamp(16px,2.4vh,26px) 0 0; font-size:clamp(26px,2.8vw,44px);
  font-weight:800; text-transform:uppercase; line-height:.94;
  letter-spacing:-.018em; font-stretch:86%; }
.tier-amt{ margin-top:clamp(14px,2vh,24px); font-size:clamp(32px,3.6vw,58px);
  font-weight:800; line-height:1; letter-spacing:-.03em; }
.tier-amt b{ display:block; margin-bottom:.55em; color:var(--accent);
  font-family:var(--m); font-size:var(--t-lab); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; }
.tier-note{ margin-top:.8em; font-family:var(--m); font-size:var(--t-lab);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.tier-h{ margin:clamp(22px,3vh,34px) 0 0; padding-top:clamp(16px,2vh,22px);
  border-top:1px solid var(--line); font-family:var(--m);
  font-size:var(--t-lab); letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); }
.tier ul{ margin-top:.4em; }
.tier li{ display:flex; gap:.9em; align-items:baseline;
  padding:clamp(10px,1.4vh,15px) 0; border-bottom:1px solid var(--line);
  font-size:clamp(14px,.98vw,16px); }
.tier li::before{ content:'+'; color:var(--accent); font-family:var(--m);
  font-weight:700; }
.tier .btn{ margin-top:auto; justify-content:center;
  padding-top:1.35em; padding-bottom:1.35em; }
.tier ul + .btn{ margin-top:clamp(24px,3.4vh,40px); }
@media (max-width:900px){ .tiers{ grid-template-columns:minmax(0,1fr); } }

/* ── 15. clients wall ──────────────────────────────────────────── */
/* five across, not six: the roster is faces rather than logos, and at
   six each one was small enough that the wall read as a shorter list
   than it is */
.wall{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px); }
.wcard{ display:block; }
.wc-im{ display:block; position:relative; aspect-ratio:1; overflow:hidden;
  background:var(--card); border:1px solid var(--line); }
.wc-im img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); opacity:.82;
  transition:filter var(--t) ease, opacity var(--t) ease, transform .7s var(--ez); }
.wcard:hover .wc-im img{ filter:none; opacity:1; transform:scale(1.05); }
.wc-blank{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(24px,2.4vw,38px); font-weight:800; color:var(--faint); }
.wc-meta{ display:flex; align-items:baseline; justify-content:space-between; min-width:0;
  gap:.6rem; margin-top:.7em; font-family:var(--m); font-size:var(--t-lab);
  letter-spacing:.1em; text-transform:uppercase; }
.wc-n{ color:var(--fg); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.wc-s{ color:var(--faint); flex:none; }
/* the closing tile spans the row rather than sitting square at the end
   of it — the roster keeps growing and a lone tile on a fresh row looks
   like a mistake at every count that does not divide evenly */
.wcard.more{ grid-column:1 / -1; }
.wcard.more .wc-im{ aspect-ratio:auto; min-height:clamp(92px,11vh,132px);
  display:grid; place-items:center; text-align:center; border-style:dashed; }
.wcard.more:hover .wc-im{ border-color:var(--fg); }
.wcard.more span{ font-family:var(--m); font-size:var(--t-lab);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  line-height:1.9; }
.wcard.more:hover span{ color:var(--fg); }
@media (max-width:1100px){ .wall{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:860px){ .wall{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .wall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ── 16. framed project cards ──────────────────────────────────── */
.pcards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,30px); }
.pcard{ display:block; border:1px solid var(--line);
  transition:border-color var(--t) ease; }
.pcard:hover{ border-color:var(--faint); }
.pc-frame{ position:relative; display:block; aspect-ratio:16/9;
  overflow:hidden; background:#000; border-bottom:1px solid var(--line); }
.pc-frame img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.66) contrast(1.05);
  transition:filter .5s ease, transform 1s var(--ez); }
.pcard:hover .pc-frame img{ filter:grayscale(1) brightness(.42) blur(3px); transform:scale(1.04); }
.pc-frame video.on-air,.pc-frame iframe.on-air{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border:0; opacity:0; transition:opacity .45s ease; pointer-events:none; }
.pcard.live .pc-frame video.on-air,.pcard.live .pc-frame iframe.on-air{ opacity:1; }
.pc-title{ position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding-inline:6%; z-index:2;
  font-size:clamp(26px,3.4vw,60px); font-weight:800; text-transform:uppercase;
  line-height:.9; letter-spacing:-.02em; font-stretch:78%; color:var(--ink);
  text-shadow:0 2px 40px rgba(0,0,0,.55); }
.pc-foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:1rem; padding:clamp(14px,2vh,20px) clamp(14px,1.6vw,22px); }
.pc-kind{ font-family:var(--m); font-size:var(--t-lab); letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); }
.pc-name{ display:block; margin-top:.45em; font-size:clamp(14px,1vw,17px);
  color:var(--fg); }
.pc-go{ font-family:var(--m); font-size:var(--t-lab); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--edge);
  padding:.7em 1em; transition:color var(--t) ease, border-color var(--t) ease; }
.pcard:hover .pc-go{ color:var(--fg); border-color:var(--fg); }
@media (max-width:820px){ .pcards{ grid-template-columns:minmax(0,1fr); } }

/* ── 17. table ─────────────────────────────────────────────────── */
.tbl{ border:1px solid var(--edge); }
.tbl-h,.tbl-r{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:1rem; padding:clamp(12px,1.7vh,17px) clamp(14px,1.6vw,22px);
  font-family:var(--m); font-size:clamp(11px,.82vw,13px);
  letter-spacing:.1em; text-transform:uppercase; }
.tbl-h{ background:var(--card); color:var(--faint); letter-spacing:.2em;
  border-bottom:1px solid var(--line); }
.tbl-r{ border-bottom:1px solid var(--line); color:var(--dim);
  transition:background var(--t) ease, color var(--t) ease; }
.tbl-r:last-child{ border-bottom:0; }
.tbl-r:hover{ background:var(--card); color:var(--fg); }
.tbl-r b{ font-weight:500; color:var(--fg); }

/* ── 18. form ──────────────────────────────────────────────────── */
.formgrid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,86px); align-items:start; }
@media (max-width:900px){ .formgrid{ grid-template-columns:minmax(0,1fr); } }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(12px,1.4vw,22px); }
@media (max-width:560px){ .two{ grid-template-columns:minmax(0,1fr); } }
.field{ margin-bottom:clamp(14px,2vh,22px); }
.field label{ display:block; margin-bottom:.6em; font-family:var(--m);
  font-size:var(--t-lab); letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); }
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--edge);
  padding:.9em 0; color:var(--fg); font-size:clamp(15px,1.1vw,18px);
  border-radius:0; transition:border-color var(--t) ease; }
.field textarea{ min-height:clamp(120px,18vh,190px); resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--accent); }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--ground); color:var(--ink); }
.field ::placeholder{ color:var(--faint); }
.aside-block{ padding-block:clamp(16px,2.4vh,24px);
  border-top:1px solid var(--line); }
.aside-block:first-child{ border-top:0; padding-top:0; }
.aside-block h3{ font-family:var(--m); font-size:var(--t-lab);
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  margin-bottom:.7em; }
.aside-block p{ font-size:clamp(15px,1.1vw,18px); }
.aside-block a:hover{ color:var(--accent); }

/* ── 19. faq ───────────────────────────────────────────────────── */
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:baseline; justify-content:space-between;
  gap:2rem; padding:clamp(18px,2.6vh,28px) 0; cursor:pointer;
  list-style:none; font-size:var(--t-s); font-weight:800;
  text-transform:uppercase; letter-spacing:-.005em; font-stretch:88%;
  transition:color var(--t) ease; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--m); color:var(--accent);
  font-size:.7em; transition:transform var(--t) var(--ez); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--accent); }
.faq p{ padding-bottom:clamp(20px,3vh,30px); max-width:70ch;
  color:var(--dim); font-family:var(--m); font-size:clamp(12px,.9vw,14.5px);
  line-height:1.8; }

/* ── 20. signoff ───────────────────────────────────────────────── */
.signoff{ text-align:center; }
.signoff .lab{ color:var(--faint); }
.signoff h2{ margin:clamp(18px,2.6vh,32px) auto 0; max-width:16ch; }
.signoff p{ margin:clamp(18px,2.6vh,30px) auto 0; max-width:52ch;
  color:var(--dim); }
.signoff .btn{ margin-top:clamp(24px,3.4vh,40px); }

/* ── 21. footer — the white plate ──────────────────────────────── */
.foot{ padding-bottom:clamp(28px,4vh,44px); }
.foot-cta{ display:block; text-align:center;
  padding-bottom:clamp(50px,8vh,110px); }
.foot-cta .dsp{ font-size:clamp(26px,7.4vw,120px); font-stretch:76%;
  letter-spacing:-.02em; overflow-wrap:anywhere;
  transition:opacity var(--t) ease; }
.foot-cta:hover .dsp{ opacity:.62; }
.foot-mark{ height:clamp(26px,3vw,44px); width:auto; filter:invert(1); }
.foot-rule{ height:1px; background:var(--line); margin-block:clamp(20px,3vh,32px); }
.foot-cols{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(28px,5vw,90px); }
.foot-cols h4{ font-size:clamp(20px,2.2vw,32px); font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em; font-stretch:78%;
  margin-bottom:clamp(16px,2.4vh,26px); }
.foot-links{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.4em clamp(20px,3vw,50px); align-content:start; }
.foot-links a{ padding-block:.35em; }
.foot-info{ border-left:1px solid var(--line);
  padding-left:clamp(20px,3vw,50px); }
.foot-info li{ font-family:var(--m); font-size:clamp(12px,.88vw,14px);
  letter-spacing:.02em; line-height:2; color:var(--dim); }
.foot-info a:hover{ color:var(--fg); }
.foot-base{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; font-family:var(--m); font-size:var(--t-lab);
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
@media (max-width:760px){
  .foot-cols{ grid-template-columns:minmax(0,1fr); }
  .foot-info{ border-left:0; padding-left:0; border-top:1px solid var(--line);
    padding-top:clamp(20px,3vh,28px); }
  .foot-links{ grid-template-columns:minmax(0,1fr); }
}

/* ── 22. artwork band ──────────────────────────────────────────── */
.artband{ position:relative; overflow:hidden; background:#000; color:var(--ink);
  padding-block:clamp(90px,15vh,180px); }
.ab-strip{ position:absolute; inset:0; display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr)); gap:2px; opacity:.78; }
.ab-strip img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04) brightness(.92); }
/* dark enough behind the copy to hold it, light enough at the edges
   that the covers are the point again */
.ab-scrim{ position:absolute; inset:0;
  background:radial-gradient(62% 66% at 50% 50%,
    rgba(0,0,0,.90) 0%, rgba(0,0,0,.80) 42%,
    rgba(0,0,0,.52) 72%, rgba(0,0,0,.30) 100%); }
.ab-body{ position:relative; z-index:2; text-align:center;
  padding-inline:var(--gut); }
.ab-body .lab{ color:var(--ink-38); }
.ab-body h2{ margin:clamp(16px,2.4vh,28px) auto 0; max-width:16ch; }
.ab-sub{ margin:clamp(16px,2.4vh,28px) auto 0; max-width:48ch;
  color:var(--ink-60); }
.ab-body .btn{ margin-top:clamp(22px,3.2vh,36px);
  border-color:var(--sig); color:var(--sig); }
.ab-body .btn:hover{ background:var(--sig); color:#000; }
@media (max-width:820px){ .ab-strip{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ── 23. artwork room ──────────────────────────────────────────── */
.wall-page{ background:#000; }
#space{ position:fixed; inset:0; z-index:2; perspective:900px;
  overflow:hidden; pointer-events:none; }
#field{ position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d; will-change:transform; }
.art{ position:absolute; left:0; top:0; width:var(--cell); height:var(--cell);
  margin-left:calc(var(--cell)/-2); margin-top:calc(var(--cell)/-2);
  pointer-events:auto; }
.art img{ width:100%; height:100%; object-fit:cover; background:#000; }
.star{ position:absolute; left:0; top:0; width:8px; height:8px;
  margin:-4px 0 0 -4px; border-radius:50%; background:var(--ink); }
#fog{ position:fixed; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 30%,
             rgba(0,0,0,.62) 74%, #000 100%); }
#depth{ height:1px; }
#wallhead{ position:fixed; z-index:6; left:var(--gut); right:var(--gut);
  top:clamp(96px,16vh,180px); pointer-events:none; max-width:22ch;
  transition:opacity .5s ease, transform .6s var(--ez); }
#wallhead .wh-sub{ margin-top:clamp(14px,2vh,24px); max-width:38ch;
  color:var(--ink-60); font-family:var(--m);
  font-size:clamp(12px,.88vw,14px); line-height:1.8; }
#wallhead.away{ opacity:0; transform:translateY(-22px); }
#wallcount,#walltitle{ position:fixed; z-index:6; pointer-events:none;
  bottom:clamp(20px,3vh,36px); font-family:var(--m); font-size:var(--t-lab);
  font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
#wallcount{ right:var(--gut); color:var(--ink-38);
  font-variant-numeric:tabular-nums; }
#wallcount .wc-n{ color:var(--sig); font-weight:700; }
#wallcount .wc-t{ color:var(--ink-38); }
#walltitle{ left:var(--gut); color:var(--ink-60); max-width:36ch; opacity:0;
  transition:opacity var(--t) ease; }
#walltitle.on{ opacity:1; }
@media (max-width:700px){ #walltitle{ display:none; } }
.wall-page.flat #space,.wall-page.flat #fog,.wall-page.flat #wallcount{ display:none; }
.flatgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:3px; padding:clamp(150px,24vh,260px) var(--gut) clamp(60px,9vh,110px); }
.flatgrid img{ width:100%; aspect-ratio:1; object-fit:cover; }

/* ── 24. lightbox ──────────────────────────────────────────────── */
#player{ position:fixed; inset:0; z-index:450; display:none;
  place-items:center; padding:clamp(16px,4vw,60px);
  background:rgba(0,0,0,.9); opacity:0; transition:opacity .3s ease; }
#player.open{ display:grid; }
#player.shown{ opacity:1; }
.pl-box{ width:min(1180px,100%); }
.pl-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1.4rem; padding-bottom:.9rem; border-bottom:1px solid var(--ink-14);
  font-family:var(--m); font-size:var(--t-lab); letter-spacing:.18em;
  text-transform:uppercase; }
.pl-kind{ color:var(--ink-38); }
.pl-frame{ aspect-ratio:16/9; background:#000; margin-top:1rem; }
.pl-frame iframe{ width:100%; height:100%; border:0; }
.pl-foot{ display:flex; justify-content:space-between; gap:1.4rem;
  padding-top:.9rem; font-family:var(--m); font-size:var(--t-lab);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-38); }
.pl-foot a:hover{ color:var(--sig); }
.pl-close{ display:block; margin:0 0 .9rem auto; background:transparent;
  border:1px solid var(--ink-14); padding:.7em 1.1em; cursor:pointer;
  font-family:var(--m); font-size:var(--t-lab); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-60);
  transition:color var(--t) ease, border-color var(--t) ease; }
.pl-close:hover{ color:var(--ink); border-color:var(--ink); }

/* ── 24b. the sent note ────────────────────────────────────────
   Its own colours rather than room tokens: it is a fixed overlay and
   can appear over a light room or a dark one. */
#note{ position:fixed; inset:0; z-index:460; display:none;
  place-items:center; padding:clamp(16px,5vw,60px);
  background:rgba(0,0,0,.88); opacity:0; transition:opacity .3s ease; }
#note.open{ display:grid; }
#note.shown{ opacity:1; }
.note-box{ width:min(520px,100%); background:var(--panel);
  border:1px solid rgba(237,234,225,.20); color:var(--ink);
  padding:clamp(28px,4vw,48px); text-align:center;
  transform:translateY(10px); transition:transform .3s var(--ez); }
#note.shown .note-box{ transform:none; }
.note-box .lab{ color:var(--sig); font-weight:700; }
.note-box h2{ margin:clamp(14px,2.2vh,22px) 0 0;
  font-size:clamp(26px,3.2vw,44px); font-weight:800; text-transform:uppercase;
  line-height:.98; letter-spacing:-.02em; font-stretch:86%; }
.note-box .note-body{ margin:clamp(12px,2vh,18px) auto 0; max-width:38ch;
  color:rgba(237,234,225,.62); font-size:clamp(14px,1vw,16.5px); }
.note-box .btn{ margin-top:clamp(20px,3vh,30px);
  border-color:var(--ink); color:var(--ink); }
.note-box .btn:hover{ background:var(--ink); color:#000; }
.form-err{ margin-top:1rem; color:var(--sig); font-family:var(--m);
  font-size:var(--t-lab); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; }

/* ── 25. reveals ───────────────────────────────────────────────── */
.rise{ opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ez), transform .55s var(--ez); }
.rise.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important;
    transition-duration:.01ms !important; }
  .rise{ opacity:1; transform:none; }
  .cur{ display:none; }
}

/* ── 26. page head ─────────────────────────────────────────────── */
.phead{ padding-block:clamp(150px,23vh,280px) clamp(56px,8vh,110px); }
.phead h1{ max-width:14ch; }
.phead .psub{ margin-top:clamp(20px,3vh,38px); max-width:52ch;
  color:var(--dim); font-size:clamp(15px,1.15vw,19px); }
.sec-note{ color:var(--dim); max-width:66ch;
  margin-bottom:clamp(26px,4vh,52px); }
.hint{ margin-top:clamp(18px,2.6vh,28px); font-family:var(--m);
  font-size:var(--t-lab); letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--gut); top:12px; z-index:600; background:var(--sig);
  color:#000; padding:.7em 1em; }

/* ── 27. odds ──────────────────────────────────────────────────── */
.manifesto .copy{ margin-top:clamp(26px,4vh,50px); }
.manifesto .man + .copy{ margin-top:clamp(26px,4vh,50px); }
.manifesto .btn{ margin-top:clamp(22px,3.2vh,38px); }
.story{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,80px); align-items:start; }
.story h2{ font-family:var(--s); font-style:italic; font-weight:400;
  font-size:clamp(28px,4vw,58px); line-height:1.04; letter-spacing:-.012em;
  max-width:18ch; }
.story .copy{ margin-top:clamp(22px,3.2vh,38px); font-family:var(--m);
  font-size:clamp(13px,.92vw,15px); line-height:1.8; }
/* no plate, no border — the mark just sits in the space and drifts */
.story-media{ display:grid; place-items:center;
  padding-block:clamp(12px,3vh,40px); }
.story-media img{ width:min(100%,340px); height:auto; object-fit:contain;
  animation:float 7s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(-7px); }
                  50%   { transform:translateY(7px); } }
@media (prefers-reduced-motion: reduce){ .story-media img{ animation:none; } }
.room.paper .story-media img{ filter:invert(1); }
@media (max-width:860px){ .story{ grid-template-columns:minmax(0,1fr); } }
.creed{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,44px); }
.creed article{ border-top:1px solid var(--line);
  padding-top:clamp(16px,2.4vh,26px); }
.creed h3{ font-size:var(--t-s); font-weight:800; text-transform:uppercase;
  font-stretch:88%; letter-spacing:-.005em; margin-bottom:.6em; }
.creed p{ color:var(--dim); font-family:var(--m);
  font-size:clamp(12px,.86vw,14px); line-height:1.75; }
@media (max-width:860px){ .creed{ grid-template-columns:minmax(0,1fr); } }
.crew{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px); }
.crew article{ border:1px solid var(--line); background:var(--card);
  transition:border-color var(--t) ease; }
.crew article:hover{ border-color:var(--accent); }
.crew .ph{ display:block; aspect-ratio:4/5; overflow:hidden;
  background:var(--card); }
.crew .ph img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); opacity:.86;
  transition:filter var(--t) ease, opacity var(--t) ease,
             transform .7s var(--ez); }
.crew article:hover .ph img{ filter:none; opacity:1; transform:scale(1.04); }
.crew .who{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.7rem; min-width:0; padding:clamp(12px,1.7vh,18px) clamp(12px,1.2vw,18px)
  clamp(6px,.8vh,9px); }
.crew .nm{ font-size:clamp(15px,1.1vw,19px); font-weight:800;
  text-transform:uppercase; font-stretch:88%; letter-spacing:-.005em; }
.crew .role{ font-family:var(--m); font-size:var(--t-lab); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); text-align:right; }
/* where they are and what clock they are on, a step down from the role */
.crew .loc{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.7rem; min-width:0; font-family:var(--m);
  font-size:clamp(10px,.72vw,11.5px); letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
  padding:0 clamp(12px,1.2vw,18px) clamp(13px,1.8vh,18px);
  border-top:0; }
.crew .loc b{ font-weight:500; color:var(--dim); }
@media (max-width:900px){ .crew{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .crew{ grid-template-columns:minmax(0,1fr); } }

/* the open seat, sitting under the four who are already here.
   Dashed, so it reads as a place still to be filled rather than as
   another card. Class-scoped copy, never `.join p` — a bare element
   selector here would outrank .lab and blow up the label. */
.join{ margin-top:clamp(10px,1.2vw,20px);
  border:1px dashed var(--edge); background:var(--card);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,56px); align-items:center;
  padding:clamp(24px,3.2vw,46px);
  transition:border-color var(--t) ease; }
.join:hover{ border-color:var(--accent); }
.join .lab{ color:var(--faint); }
.join h3{ margin-top:clamp(12px,1.6vh,18px);
  font-size:clamp(24px,2.7vw,42px); font-weight:800; text-transform:uppercase;
  font-stretch:86%; letter-spacing:-.015em; line-height:.96; }
.join-body{ margin-top:clamp(12px,1.7vh,20px); max-width:72ch;
  color:var(--dim); font-family:var(--m);
  font-size:clamp(12px,.88vw,14.5px); line-height:1.78; }
.join .btn{ white-space:nowrap; }
@media (max-width:760px){
  .join{ grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vh,30px); }
  .join .btn{ justify-content:center; }
}
.asides{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,44px); margin-top:clamp(34px,5vh,68px);
  padding-top:clamp(26px,4vh,48px); border-top:1px solid var(--line); }
.asides .aside-block{ border-top:0; padding-top:0; }
@media (max-width:760px){ .asides{ grid-template-columns:minmax(0,1fr); gap:0; }
  .asides .aside-block{ border-top:1px solid var(--line);
    padding-top:clamp(16px,2.4vh,24px); }
  .asides .aside-block:first-child{ border-top:0; padding-top:0; } }
.chead h1{ max-width:11ch; margin-top:clamp(30px,5vh,70px); }
.chead .psub{ margin-top:clamp(24px,3.6vh,44px); max-width:56ch;
  font-size:clamp(16px,1.4vw,24px); color:var(--dim); }
.chead .psub em{ font-style:normal; color:var(--accent); font-weight:600; }

/* the artwork room runs bright footage right under the bar, so the bar
   keeps its ground there from the first frame rather than on scroll */
.wall-page #nav{ background:rgba(5,5,5,.82); backdrop-filter:blur(14px);
  border-bottom-color:rgba(237,234,225,.14); }