/* ── MOTION TOKENS — the signature durations in one place, so a review
   note ("slower", "softer") is a one-line change. no-motion still zeroes
   everything downstream, untouched. ── */
:root{
  --ease-out:cubic-bezier(.25,1,.5,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --vt-out:.5s;    /* page leave (was .34s, with a jumpy upward pop) */
  --vt-in:.9s;     /* page arrive (was .52s) */
  --sweep:1.35s;   /* legacy sweep token (in-place crossings) */
  --focus:1.2s;     /* focus reveal — opacity */
  --focus-blur:1.4s; /* focus reveal — blur resolves just after */
  --dissolve:1.4s; /* plate dissolve over its CSS stand-in */
}
/* ═══════════════════════════════════════════════════════════════════
   006d — the comp's four image blocks, each a FIXED AREA carrying its own
   generator render. Nothing is full-bleed-fixed, nothing parallaxes, and
   no plate's picture depends on scroll position in any way.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Atyp';src:url('../assets/fonts/Atyp-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Atyp';src:url('../assets/fonts/Atyp-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
/* THE CASCADE — 005's canonical field, ported verbatim on the client's call
   (1 Sep): sand at dawn, amber at midday, ember by evening, night at the
   foot. ONE gradient spans every page top to bottom; the field is the
   clock. `background-image`, never the `background:` shorthand — the
   shorthand silently kills the gradient (this shipped once in 005).
   Ink stays TRUE BLACK per the later 27 Aug call, not 005's #1a1410. */
body{
  --ink:#000000; --cream:#f3ead2; --accent:#ff5e00;
  --fg:var(--ink); --fg-2:rgba(0,0,0,.8); --fg-3:rgba(0,0,0,.72);
  --hair:rgba(0,0,0,.22);
  --ramp:linear-gradient(180deg,#f4e3ba 0%,#f3daae 12%,#f7b878 26%,#ff8c3c 40%,#ff5e00 54%,#ff5e00 78%,#d84800 85%,#7a2604 91%,#301004 96%,#0a0402 100%);
  font-family:'Atyp','Murecho','AFF JP Fallback','Hiragino Sans','Yu Gothic Medium',system-ui,sans-serif;color:var(--fg);
  background-image:var(--ramp);
  background-repeat:no-repeat;background-size:100% 100%;
  background-color:#000000;line-height:1.5; /* the fallback under the ramp, and what iOS shows past the page ends: black (client, 9 Sep) */
}
/* the landing's night is the ramp's own: the foot is transparent and no
   block paints itself, so the ramp is anchored from the BOTTOM. The orange
   holds to just above the date tile, then one long fall runs through the
   tile — rust behind the date, black by the tile's foot — and stays black
   under the FAQ and the foot. Signed in the FAQ is gone and the fall sits
   lower. Pixel stops, not percentages, because the page grows with the
   FAQ and with sign-in (client, 9 Sep). */
body.landing{
  --ramp:linear-gradient(180deg,#f4e3ba 0%,#f3daae 12%,#f7b878 26%,#ff8c3c 40%,#ff5e00 54%,
    #ff5e00 calc(100% - 1880px),#d84800 calc(100% - 1630px),#7a2604 calc(100% - 1430px),
    #301004 calc(100% - 1230px),#0a0402 calc(100% - 1080px),#0a0402 100%)}
/* the speakers wall is tall: anchored from the bottom too, so the last
   row of portraits stays on the orange and only the closing block and
   the foot take the fall (client, 9 Sep) */
body.speakers{
  --ramp:linear-gradient(180deg,#f4e3ba 0%,#f3daae 12%,#f7b878 26%,#ff8c3c 40%,#ff5e00 54%,
    #ff5e00 calc(100% - 720px),#d84800 calc(100% - 600px),#7a2604 calc(100% - 480px),
    #301004 calc(100% - 380px),#0a0402 calc(100% - 280px),#0a0402 100%)}
html.authed body.landing{
  --ramp:linear-gradient(180deg,#f4e3ba 0%,#f3daae 12%,#f7b878 26%,#ff8c3c 40%,#ff5e00 54%,
    #ff5e00 calc(100% - 1300px),#d84800 calc(100% - 1050px),#7a2604 calc(100% - 850px),
    #301004 calc(100% - 650px),#0a0402 calc(100% - 500px),#0a0402 100%)}
/* THE RUBBER BAND (client, 9 Sep). WebKit on iOS never paints a root
   background IMAGE into the overscroll area (LocalFrameView::
   calculateExtendedBackgroundMode returns empty for IOS_FAMILY); only the
   root background COLOUR is extended there. So the egg is built from the
   two things a phone will honour: site.js warms the root colour from black
   toward the brand orange as the page is dragged past an end (--pull), and
   the foot of every page carries an in-page bloom with the AFF "A" that
   rises with the same --pull, so the glow reads as one piece with the band
   beyond it. Desktop browsers, which do extend images, also get a tile
   painted by site.js. Without JS the band is simply black. */
html{background-color:#000000}
.foot{--pull:0;isolation:isolate}
/* the phone nav pill sits over the foot: it steps aside while you pull */
.pillnav{opacity:calc(1 - var(--pull,0));transition:opacity .12s linear}
.foot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:260px;pointer-events:none;z-index:-1;
  background:radial-gradient(70% 100% at 50% 100%,rgba(255,94,0,var(--pull)) 0%,rgba(138,42,4,calc(var(--pull)*.7)) 42%,rgba(0,0,0,0) 75%)}
.foot .pullmark{position:absolute;left:50%;bottom:26px;width:54px;height:52px;transform:translateX(-50%) translateY(calc((1 - var(--pull))*10px));
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='526%20420%20134%20126'%3E%3Cg%20fill='%23fff'%3E%3Cpath%20d='M625.7,453.9l-9-22.4s0,0,0,0c-4.1-10.3-11.4-11.5-14.3-11.5-2.9,0-10.2,1-14.5,11.2l-22.4,52.5c-2.1,5,.2,10.8,5.2,12.9,1.3.5,2.6.8,3.9.8,3.8,0,7.5-2.2,9.1-6l18.5-43.3,5.2,13.1c1.5,3.9,5.2,6.2,9.2,6.2s2.5-.2,3.7-.7c5.1-2,7.5-7.8,5.5-12.8Z'/%3E%3Cpath%20d='M567.1,504.9c-5-2.1-10.8.2-12.9,5.2l-8.1,18.9c-2.1,5,.2,10.8,5.2,12.9,1.3.5,2.6.8,3.9.8,3.8,0,7.5-2.2,9.1-6l8.1-18.9c2.1-5-.2-10.8-5.2-12.9Z'/%3E%3Cpath%20d='M655.9,529.4l-10.6-26.5c-2-5.1-7.8-7.5-12.8-5.5-5.1,2-7.5,7.8-5.5,12.8l10.6,26.5c1.5,3.9,5.2,6.2,9.2,6.2s2.5-.2,3.7-.7c5.1-2,7.5-7.8,5.5-12.8Z'/%3E%3Cpath%20d='M639.5,482.7c-7,0-12.6,5.7-12.6,12.6,0,.3-.2.5-.5.5s-.5-.2-.5-.5c0-7-5.7-12.6-12.6-12.6-.3,0-.5-.2-.5-.5s.2-.5.5-.5c7,0,12.6-5.7,12.6-12.6,0-.3.2-.5.5-.5s.5.2.5.5c0,7,5.7,12.6,12.6,12.6.3,0,.5.2.5.5s-.2.5-.5.5Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:var(--pull);pointer-events:none}
/* room for the mark under the copyright line: a quiet black strip that only
   lights up on the pull */
footer.foot{padding-bottom:calc(clamp(28px,5vh,48px) + 96px)}

::selection{background:var(--accent);color:#fff7e8}

/* On a PLATE the ground is busy, so the secondary and tertiary tokens hold
   more of their strength than they do on flat paper — the faded labels are
   the first thing to fail on a field. */
.plate{--fg-2:rgba(0,0,0,.92);--fg-3:rgba(0,0,0,.84)}
.plate.drk,.drk .plate{--fg-2:rgba(243,234,210,.92);--fg-3:rgba(243,234,210,.84)}

/* legibility, decided per plate from its own rendered pixels */
.drk{
  --fg:var(--cream); --fg-2:rgba(243,234,210,.92); --fg-3:rgba(243,234,210,.84);
  --hair:rgba(243,234,210,.24);
  color:var(--cream);
}
.drk .btn.solid{background:var(--cream);color:var(--ink)}
.plate,.plate *,.voices,.voices *{transition:color .8s cubic-bezier(.25,1,.5,1)}

/* ── THE PLATE: a block with a picture in it, and nothing else ── */
.plate{position:relative;isolation:isolate;overflow:hidden}
.plate > .plate-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;
  opacity:0;transition:opacity var(--dissolve) var(--ease-out)}
.plate > .plate-cv.lit{opacity:1}
html.no-motion .plate > .plate-cv{transition:none;opacity:1}
/* THE VEIL — a soft directional wash that engages only when the field
   beneath the type falls under the AA floor at its worst point. Strongest
   at the text edge, gone by mid-plate, so the picture keeps its drama. */
.plate > .plate-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1s cubic-bezier(.25,1,.5,1)}
.plate.veiled > .plate-scrim{opacity:1}
/* the wash holds full strength across the text column, then releases —
   --a is solved per plate in plates.js, so it is never stronger than the
   type actually needs */
.plate-scrim{--a:.6;--hold:54%;--fade:82%}
.plate-scrim.light{background:linear-gradient(96deg,
  rgba(248,240,220,var(--a)) 0%,
  rgba(248,240,220,var(--a)) var(--hold),
  rgba(248,240,220,calc(var(--a) * .34)) calc(var(--hold) + 12%),
  rgba(248,240,220,0) var(--fade))}
.plate-scrim.dark{background:linear-gradient(96deg,
  rgba(18,10,4,var(--a)) 0%,
  rgba(18,10,4,var(--a)) var(--hold),
  rgba(18,10,4,calc(var(--a) * .34)) calc(var(--hold) + 12%),
  rgba(18,10,4,0) var(--fade))}
@media(max-width:760px){
  .plate-scrim{--hold:72%;--fade:100%}
  .plate-scrim.light{background:linear-gradient(184deg,
    rgba(248,240,220,var(--a)) 0%,rgba(248,240,220,var(--a)) var(--hold),
    rgba(248,240,220,calc(var(--a) * .5)) 100%)}
  .plate-scrim.dark{background:linear-gradient(184deg,
    rgba(18,10,4,var(--a)) 0%,rgba(18,10,4,var(--a)) var(--hold),
    rgba(18,10,4,calc(var(--a) * .5)) 100%)}
}
html.no-motion .plate > .plate-scrim{transition:none}
.plate > *:not(.plate-cv):not(.plate-scrim){position:relative;z-index:2}
/* GENERATOR STRIPS — the moving gradients live as bounded artwork BETWEEN
   sections of the cascade, each matched to its hour of the field. They
   carry no type, so the no-type-no-veil rule leaves them untouched. */
.bleed{min-height:44vh}
.bleed.plate{isolation:isolate}

/* the CSS stand-in each plate wears until (or unless) the engine arrives */
.hero.plate{background:linear-gradient(180deg,#f4e3ba 0%,#f2d19f 42%,#ee9c4e 100%)}
.beats.plate{background:#ff5e00}
.room.plate{background:linear-gradient(180deg,#72380a 0%,#4a270c 55%,#301d0e 100%)}
/* stand-in for a-mark.jpg — dark ground, hot orange forms, so the block does
   not flash light before the picture arrives */
.joinplate{background:linear-gradient(200deg,#2a0f06 0%,#c24200 30%,#ff5e00 52%,#1a0a04 100%)}
/* THE GRAIN belongs to the gradient, not to the photographs. Laid over the
   page it sat on top of every headshot and read as a dither on the faces,
   so it is now scoped to the plates — the atmosphere — and lifted off any
   plate that carries portraits. */
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.plate.nograin::after{display:none}

/* ── type ── */
/* 005's type scale, carried verbatim — the display sizes the client saw */
h1{font-weight:400;font-size:clamp(38px,7vw,96px);line-height:1.05;letter-spacing:-.015em}
h2{font-weight:400;font-size:clamp(28px,4.4vw,58px);line-height:1.1;letter-spacing:-.014em;text-wrap:balance}
h3{font-weight:400;font-size:clamp(20px,2.3vw,30px);line-height:1.18;letter-spacing:-.008em}
.kicker{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--fg)}
/* 005's signature marker: the hour on the field, with its short rule */
.timecode{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3)}
.timecode::after{content:"";height:1px;width:56px;background:var(--hair)}
.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.66;color:var(--fg-2);max-width:52ch}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(34px,6.5vw,64px)}
/* In a COLUMN flex container, `margin:0 auto` sets the cross-axis margins to
   auto, which disables `align-items:stretch` — the wrap then shrink-wraps to
   its text and drifts inward whenever the headline is narrower than the
   column. width:100% restores the intended full-column measure. */
.hero > .wrap,.join .copy > .wrap{width:100%}
/* 005's B1 wrap-break: the hero statement runs the full column */

/* ── chrome ── */
.skip{position:fixed;left:16px;top:12px;z-index:200;transform:translateY(-300%);
  background:#000000;color:#f3ead2;padding:12px 18px;border-radius:999px;
  font-size:13px;letter-spacing:.06em;text-decoration:none;transition:transform .2s}
.skip:focus-visible{transform:none;outline:2px solid var(--accent);outline-offset:2px}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.drk :focus-visible{outline-color:var(--cream)}

/* ═══ THE TOP LINE — the lockup on the page's own column. It scrolls away
   with the page; the pill carries navigation. ═══ */
.top{position:absolute;top:0;left:0;right:0;z-index:60;
  padding:clamp(20px,2.6vw,38px) 0;pointer-events:none}
.topline{display:flex;align-items:center}
.top .mark{display:inline-block;color:#000000;pointer-events:auto}
.top .mark svg{height:clamp(30px,3.4vw,40px);width:auto;display:block}

/* ═══ THE PILL — the client's own navigation, restored. One body that
   carries the state and unfolds inside itself. ═══ */
.pillnav{position:fixed;top:16px;right:18px;z-index:90;
  display:flex;align-items:flex-start;gap:8px;max-width:calc(100vw - 28px)}
.pill{display:flex;flex-direction:column;align-items:stretch;border-radius:26px;
  background:rgba(14,9,5,.82);backdrop-filter:saturate(140%) blur(14px);
  border:1px solid rgba(243,234,210,.18);overflow:hidden;
  transition:border-radius .5s cubic-bezier(.16,1,.3,1)}
.pill .row{display:flex;align-items:center;gap:2px;padding:5px}
.pill a,.pill button{font-family:inherit;font-size:14px;letter-spacing:.03em;color:#f3ead2;
  background:none;border:0;cursor:pointer;padding:10px 17px;border-radius:999px;
  white-space:nowrap;text-decoration:none;transition:background .3s,color .3s}
.pill a:hover,.pill button:hover{background:rgba(243,234,210,.1)}
.pill a.go{background:#f3ead2;color:#000000}
.pill a.go:hover{background:#fff}
.pill .mono{width:30px;height:30px;border-radius:50%;flex:0 0 30px;margin-left:6px;
  background:#f3ead2;color:#000000;display:inline-flex;align-items:center;
  justify-content:center;font-size:13px;text-transform:uppercase}
.pill .uname{font-size:14px;color:#f3ead2;padding:10px 14px 10px 8px;white-space:nowrap;
  max-width:12ch;overflow:hidden;text-overflow:ellipsis}

/* the label crossfades in place rather than swapping text */
.menu-btn .mb-l{position:relative;display:inline-block;line-height:1}
.menu-btn .mb-l i{font-style:normal;display:block;transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.menu-btn .mb-l i:last-child{position:absolute;inset:0;opacity:0;transform:translateY(60%)}
.menu-btn.open .mb-l i:first-child{opacity:0;transform:translateY(-60%)}
.menu-btn.open .mb-l i:last-child{opacity:1;transform:none}

/* THE UNFOLD: the pill grows on a grid row, so there is no max-height to
   guess at and no jump when the content is taller than expected */
.linkwrap{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .58s cubic-bezier(.16,1,.3,1)}
.pill.open .linkwrap{grid-template-rows:1fr}
.links{overflow:hidden;display:flex;flex-direction:column;padding:0 5px;
  transition:padding .58s cubic-bezier(.16,1,.3,1)}
.pill.open .links{padding:4px 5px 8px}
.links > *{opacity:0;transform:translateY(-6px);
  transition:opacity .42s cubic-bezier(.25,1,.5,1),transform .5s cubic-bezier(.16,1,.3,1)}
.pill.open .links > *{opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 42ms + 120ms)}
.links a{padding:11px 18px}
/* the page you are on reads like the language toggle's active coin:
   solid accent, dark ink — unmissable in the open menu (client, 8 Sep) */
.links a.here{background:var(--accent);color:#16100b;border-radius:999px}
.links a.here:hover{color:#16100b}
.pill .who{padding:12px 18px 10px;border-bottom:1px solid rgba(243,234,210,.14);
  margin-bottom:4px}
.pill .who b{display:block;font-weight:400;font-size:15px;color:#f3ead2;overflow-wrap:anywhere}
.pill .who span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,234,210,.5);margin-top:3px}
.pill .signout{color:rgba(243,234,210,.55);font-size:13px;text-align:left}
html.no-motion .linkwrap,html.no-motion .links,html.no-motion .links > *,
html.no-motion .menu-btn .mb-l i{transition:none}

@media(max-width:640px){
  /* The bar spans the viewport and centres its pills inside it. It used to
     be positioned by `right:50%` alone, and a fixed box with only `right`
     set is shrink-to-fit against the distance to THAT edge — 187px here —
     so the row was squeezed to min-content and the language pill lost
     ~10px off its end behind `overflow:hidden`. Anchoring both edges gives
     the row its real width, and nothing has to shrink. */
  .pillnav{top:auto;bottom:14px;left:14px;right:14px;transform:none;
    max-width:none;justify-content:center;align-items:flex-end;
    pointer-events:none}
  .pillnav > *{pointer-events:auto}
  .pill.main{flex-direction:column-reverse}
  .pill.main .links{padding:0 5px}
  .pill.main.open .links{padding:8px 5px 4px}
  /* The name stays on mobile. 005 collapsed the pill to the coin alone
     under 640 to save width, but a lone initial reads as having lost who
     you are — the whole point of the pill is that it knows you. There is
     room: Menu + coin + a 10ch name clears 320px with margin to spare. */
  .pill .uname{max-width:10ch;padding-left:6px;padding-right:12px}
  .pill.lang{flex:0 0 auto}   /* never shrink — see .pill.lang below for align */
  /* OPTION 3 (client, 8 Sep): the language choice — a one-time setting —
     takes the top-right corner; Menu stays at the floor in thumb reach.
     The lockup goes mark-only (C | A) so the corner is free; the wordmark
     returns at tablet width. 70px = the mark region of the lockup SVG
     (viewBox x 312–662) at the 31px mobile height. */
  .pill.lang{position:fixed;top:14px;right:14px}
  .top .mark{width:70px;overflow:hidden;display:block}
  .top .mark .logo{width:auto}
  .pill a,.pill button{font-size:14px;padding:11px 15px}
}

/* ═══ 005's SECTION GRAMMAR, ported with its landing composition ═══ */
.sect{padding:clamp(72px,11vh,132px) 0}
.rule{height:1px;background:var(--hair);border:0}
.sect-h{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(28px,5vh,52px)}
.sect-h .kicker{flex:0 0 auto}
.sect-h .rule{flex:1}
.meta{margin-top:clamp(26px,4vh,40px);display:flex;flex-wrap:wrap;gap:8px 34px;font-size:15px;color:var(--fg-2)}
.hero .lede{margin-top:clamp(24px,4vh,44px);max-width:46ch}
/* the midday photo section — hdr-2 as 005 used it */
.midphoto{background-image:url('../assets/img/hdr-2.png');background-size:cover;background-position:center}
.mid-h{margin-top:20px;max-width:16ch}
.facts{margin-top:clamp(30px,5vh,56px)}
.fact{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;
  border-top:1px solid var(--hair);padding:clamp(20px,3vh,32px) 0}
.facts .fact:last-child{border-bottom:1px solid var(--hair)}
.facts .fact:first-child{border-top:0}
.fact-big{font-size:clamp(26px,3.6vw,52px);letter-spacing:-.02em;line-height:1.05}
.fact-small{font-size:13px;color:var(--fg-3)}
/* the evening tile — 005's split, image right */
.tile{display:grid;grid-template-columns:1fr 1fr;min-height:74vh}
.tile.flip .copy{order:2}
.tile .copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,7vh,96px) clamp(34px,6.5vw,64px)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile h2{margin-top:18px;max-width:15ch}
.tile .copy p{margin-top:16px;max-width:52ch;font-size:16px;line-height:1.7}
.dusk{background:linear-gradient(180deg,#201107 0%,#1b0f08 100%)}
/* the eased walk from the ramp's orange into the night — smoothstep stops,
   landing exactly on the FAQ ground's opening tone so the questions open
   without a seam */
.duskfall{height:clamp(180px,26vh,360px);background-image:linear-gradient(180deg,
  rgba(27,15,8,0) 0%,
  rgba(27,15,8,.05) 10%,
  rgba(27,15,8,.14) 20%,
  rgba(27,15,8,.27) 30%,
  rgba(27,15,8,.44) 40%,
  rgba(27,15,8,.61) 50%,
  rgba(27,15,8,.76) 60%,
  rgba(27,15,8,.88) 70%,
  rgba(27,15,8,.95) 80%,
  rgba(27,15,8,.99) 90%,
  #1b0f08 100%)}
@media(max-width:820px){.tile{grid-template-columns:1fr}.tile.flip .copy{order:0}.tile img{height:42vh}}

/* ── block 1 · hero ── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(130px,20vh,220px) 0 clamp(60px,10vh,100px)}
.hero .kicker{margin-bottom:clamp(22px,4vh,44px)}
/* 005's hero display override: the statement is BIG (9.5vw to 150px)
   on an unbounded wrap — base h1 (7vw/96) is for inner pages */
.hero h1{font-size:clamp(44px,9.5vw,150px);margin-bottom:0;max-width:15ch}
.factrow{display:flex;flex-wrap:wrap;gap:10px clamp(28px,5vw,80px);
  font-size:15px;color:var(--fg-2);margin-bottom:clamp(26px,4.5vh,48px)}
.cta{margin-top:clamp(26px,4vh,44px);display:flex;gap:14px;flex-wrap:wrap}
/* 005's button spec — 005.css overrides base: 15px, 13x28 */
.btn{display:inline-block;padding:13px 28px;border-radius:999px;font-size:15px;
  letter-spacing:.04em;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.btn.solid{background:var(--ink);color:var(--cream)}
.btn.line{border:1px solid var(--hair);color:var(--fg)}
.btn.solid:hover{background:var(--accent);color:#fff7e8}

/* ── block 2 · beats on the heat plate ── */
.beats{padding:clamp(110px,17vh,210px) 0}
.beatlist{list-style:none;max-width:1060px}
.beat{display:grid;grid-template-columns:96px 1fr;gap:0 26px;
  padding:clamp(26px,4.4vh,48px) 0;border-top:1px solid var(--hair)}
.beat:last-child{border-bottom:1px solid var(--hair)}
.beat .n{font-size:12px;font-weight:400;letter-spacing:.24em;color:var(--fg-3);padding-top:9px}
.beat h2{font-size:clamp(20px,2.3vw,30px);line-height:1.18;max-width:22ch;letter-spacing:-.008em}
.beat p{grid-column:2;margin-top:12px;color:var(--fg-2);max-width:52ch;font-size:16px;line-height:1.7}
@media(max-width:640px){.beat{grid-template-columns:1fr}.beat h2,.beat p{grid-column:1}}

/* ── block 3 · the figures on the dark band ── */
.room{padding:clamp(110px,18vh,220px) 0}
.room .kicker{margin-bottom:clamp(40px,7vh,86px)}
.fig{display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  padding:clamp(18px,3.2vh,34px) 0;border-top:1px solid var(--hair)}
.fig:last-of-type{border-bottom:1px solid var(--hair)}
.fig .n{font-style:normal;font-size:clamp(60px,9vw,150px);line-height:.95;letter-spacing:-.03em}
.fig span{font-size:clamp(15px,1.3vw,19px);color:var(--fg-2)}
.fig i{font-style:normal;font-size:13px;color:var(--fg-3);margin-left:auto}
@media(max-width:640px){.fig i{margin-left:0;width:100%}}

/* ── voices · no plate ── */
/* on the cascade the section sits on the field; the solver picks its ink */
.voices{padding:clamp(110px,18vh,220px) 0}
.voices .kicker{margin-bottom:clamp(26px,4vh,44px)}
.voices h2{margin-bottom:clamp(40px,7vh,84px)}
.krow{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,24px)}
@media(max-width:900px){.krow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.krow{grid-template-columns:repeat(2,1fr)}}
.kcard .shot{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:none}
.kcard:hover .shot{filter:none}
.kcard b{display:block;font-weight:400;font-size:15px}
.kcard span{display:block;font-size:12px;color:var(--fg-3);margin-top:3px;line-height:1.5}
.allvoices{display:inline-block;margin-top:clamp(36px,6vh,66px);color:var(--fg);
  text-decoration:none;font-size:16px;border-bottom:1px solid var(--hair);padding-bottom:6px}
.allvoices:hover{border-color:var(--accent)}

/* ═══ inner pages ═══ */
.page-hero{min-height:76svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(150px,24vh,260px) 0 clamp(70px,11vh,120px)}
.page-hero > .wrap{width:100%}
.page-hero .kicker{margin-bottom:clamp(20px,3.4vh,38px)}
.page-hero h1{max-width:15ch;margin-bottom:clamp(24px,4vh,44px)}
.page-hero .lede{max-width:56ch}
.band{padding:clamp(100px,16vh,200px) 0}
.band > .wrap{width:100%}
.band .kicker{margin-bottom:clamp(40px,7vh,86px)}
.lightroom{padding:clamp(100px,16vh,200px) 0;background:#f0e3c2}
.lightroom .kicker{margin-bottom:clamp(34px,5.5vh,64px)}

/* sessions (keynotes + elevated breakouts) */
.sess{display:grid;grid-template-columns:230px 1fr;gap:0 30px;
  padding:clamp(26px,4.4vh,50px) 0;border-top:1px solid var(--hair)}
.sesslist .sess:last-child{border-bottom:1px solid var(--hair)}
.sess .kind{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);padding-top:10px}
.sess h2{font-size:clamp(22px,2.5vw,38px);line-height:1.14;letter-spacing:-.012em;max-width:20ch}
.sess .who{margin-top:10px;font-size:15px;color:var(--fg-2)}
.sess p{margin-top:12px;color:var(--fg-2);max-width:56ch;font-size:16px;line-height:1.7}
@media(max-width:760px){.sess{grid-template-columns:1fr;gap:8px}}

/* panels */
.panel{display:grid;grid-template-columns:190px 1fr 1fr;gap:0 30px;align-items:start;
  padding:clamp(20px,3.4vh,36px) 0;border-top:1px solid var(--hair)}
.panels .panel:last-child{border-bottom:1px solid var(--hair)}
.panel .track{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.panel h2{font-weight:400;font-size:clamp(17px,1.7vw,22px);line-height:1.3;letter-spacing:-.008em}
.panel .who{font-size:13px;color:var(--fg-3);line-height:1.6}
@media(max-width:860px){.panel{grid-template-columns:1fr;gap:6px}}

/* speakers A–Z */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(20px,2.4vh,34px) clamp(14px,2vw,28px)}
.sgrid .shot{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  background:rgba(0,0,0,.08);filter:none}
.sgrid .scard:hover .shot{filter:none}
/* a portrait still to come is a quiet ruled frame, not a slab — it should
   read as a held place, not as a hole in the grid */
.sgrid .shot.missing{background:none;border:1px solid var(--hair);
  display:flex;align-items:flex-end;padding:13px;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);filter:none}
.sgrid figcaption b{display:block;font-weight:400;font-size:15px;margin-top:12px}
.sgrid figcaption span{display:block;font-size:12px;color:var(--fg-3);margin-top:3px;line-height:1.5}
@media(max-width:640px){
  .sgrid{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .sgrid figcaption b{font-size:14px}
}

/* schedule */
.sblock{margin-bottom:clamp(50px,8vh,100px)}
.sblock-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--hair);margin-bottom:8px}
.sblock-h h2{font-size:clamp(30px,4.6vw,72px);letter-spacing:-.02em;line-height:1}
.srange{font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--fg-3);white-space:nowrap}
.srow{display:grid;grid-template-columns:170px 1fr 150px;gap:0 26px;align-items:baseline;
  padding:clamp(16px,2.6vh,28px) 0;border-top:1px solid var(--hair)}
.srow:first-of-type{border-top:0}
.st{font-size:14px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.sh{font-size:clamp(16px,1.5vw,20px);line-height:1.35}
.sw{margin-top:6px;font-size:13px;color:var(--fg-3);line-height:1.6}
.sr{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);text-align:right}
@media(max-width:760px){
  .srow{grid-template-columns:1fr;gap:4px}
  .sr{text-align:left;margin-top:6px}
}

/* rooms */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.room{padding:clamp(22px,3.6vh,38px) clamp(18px,2vw,28px);background:transparent}
.room-n{font-size:clamp(17px,1.8vw,22px)}
.room-d{margin-top:8px;font-size:14px;color:var(--fg-2);line-height:1.6}

/* venue */
.mapwrap{border:1px dashed var(--hair);padding:clamp(16px,2.4vw,32px)}
.mapwrap svg{width:100%;height:auto;display:block}
/* the directions link sits under the map, not tucked against it */
.maplink{margin-top:clamp(20px,3vh,34px)}
.inforow{display:grid;grid-template-columns:200px 1fr 1fr;gap:0 26px;align-items:baseline;
  padding:clamp(18px,3vh,32px) 0;border-top:1px solid var(--hair)}
.inforows .inforow:last-child{border-bottom:1px solid var(--hair)}
.inforow .k{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.inforow .v{font-size:clamp(17px,1.7vw,22px)}
.inforow .nn{font-size:14px;color:var(--fg-2);line-height:1.6}
@media(max-width:760px){.inforow{grid-template-columns:1fr;gap:6px}}

/* a closing picture band — no copy sits on it */
.closer{height:clamp(280px,46vh,520px)}

/* faq */
.faq{border-top:1px solid var(--hair);padding:clamp(16px,2.6vh,26px) 0}
.faqlist .faq:last-child{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;font-size:clamp(16px,1.6vw,21px);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--fg-3);transition:transform .3s}
.faq[open] summary::after{content:"–"}
.faq p{margin-top:12px;color:var(--fg-2);max-width:70ch;font-size:16px;line-height:1.7}

/* ── block 4 · the split: copy left, the evening plate right ── */
.joingrid{display:grid;grid-template-columns:1fr 1fr;min-height:82vh}
.join .copy{display:flex;flex-direction:column;justify-content:center;
  background:#efe0bd;padding:clamp(110px,18vh,220px) 0}
/* the copy holds the PAGE'S OWN content column: its left edge lands exactly
   where every other .wrap on the page starts, so the left margin reads as a
   single unbroken line from the hero to the footer. */
.join .copy .wrap{max-width:none;margin:0;
  padding-left:calc(max(0px, (100vw - 1280px) / 2) + clamp(34px,6.5vw,64px));
  padding-right:clamp(28px,4vw,72px)}
@media(max-width:860px){
  .join .copy{padding:clamp(80px,13vh,150px) 0}
  .join .copy .wrap{padding-left:clamp(34px,6.5vw,64px);padding-right:clamp(34px,6.5vw,64px)}
}
.joinline{font-size:clamp(46px,6.6vw,110px);letter-spacing:-.025em;margin:clamp(18px,3vh,34px) 0}
.join .lede{margin-bottom:clamp(26px,4.4vh,46px)}
.ask{margin-top:clamp(22px,3.6vh,38px);font-size:14px;color:var(--fg-3)}
.joinplate{min-height:52vh}
@media(max-width:860px){
  .joingrid{grid-template-columns:1fr}
  .joinplate{min-height:56vh;order:2}
}

/* ── foot ── */
/* black, flat — not the old brown gradient (Ness, 27 Aug) */
.foot{background:transparent;color:var(--cream);
  --fg:#f3ead2;--fg-2:rgba(243,234,210,.8);--fg-3:rgba(243,234,210,.7);
  --hair:rgba(243,234,210,.24);
  padding:clamp(80px,13vh,150px) 0 clamp(28px,5vh,48px)}
.foot .mark{color:var(--cream);display:inline-block}
.foot .mark svg{height:clamp(30px,4.2vw,52px);width:auto;display:block}
.foot .row{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;
  margin-top:clamp(40px,7vh,80px);padding-top:18px;border-top:1px solid var(--hair)}
.fine{font-size:9px;letter-spacing:.12em;line-height:1.8;text-transform:uppercase;color:var(--fg-3)}

/* ═══ PAGE TRANSITIONS ═══
   Cross-document View Transitions: the outgoing page holds while the new
   one is built, then they cross over on the site's own curve — no flash of
   the old type, no empty frame. A paint hold covers the moment the slots
   are filled; browsers without View Transitions still get that. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut var(--vt-out) var(--ease-exit) both}
::view-transition-new(root){animation:vtIn var(--vt-in) var(--ease-soft) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}
html.booting body{opacity:0}
body{opacity:1;transition:opacity .18s ease-out}
html.no-motion::view-transition-old(root),
html.no-motion::view-transition-new(root){animation-duration:0s!important}
html.no-motion body{transition:none}

/* ═══ THE GATE ═══
   The landing is public; every other page is behind it. A signed-out
   arrival sees the room it cannot enter yet — veiled, never readable —
   and the veil lifts in place on success rather than reloading. */
html.gated body > main,
html.gated body > footer{
  filter:blur(18px) saturate(.82);
  transform:scale(1.02);
  pointer-events:none;user-select:none;
  transition:filter .9s cubic-bezier(.25,1,.5,1),transform .9s cubic-bezier(.16,1,.3,1)}
/* The veil scales the page up 2%, which pushes it ~14px past the viewport
   and lets a signed-out visitor pan sideways on every gated page. The
   content behind the veil is inert and unreadable by design, so clipping
   costs nothing. It has to be on BODY: main and footer are body's
   children, and clipping only the root still left 14.5px of pan — the
   root's overflow propagates to the viewport rather than containing them.
   `clip` not `hidden` so neither element becomes a scroll container. */
html.gated,
html.gated body{overflow-x:clip}
html.gated .pillnav{pointer-events:auto}
body > main,body > footer{transition:filter .9s cubic-bezier(.25,1,.5,1),transform .9s cubic-bezier(.16,1,.3,1)}
html.no-motion.gated body > main,
html.no-motion.gated body > footer{transition:none}

/* the sign-in module — the page stays visible behind it */
.gate-ov{position:fixed;inset:0;z-index:150;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(12,7,3,.55);
  backdrop-filter:blur(7px);opacity:0;transition:opacity .34s cubic-bezier(.25,1,.5,1)}
.gate-ov.open{opacity:1}
/* the worker's sign-in screen rides inside the overlay; its own body is
   transparent in embed mode so only the card shows over the blurred page */
.gate-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.gate-card{width:min(430px,100%);background:#160d06;color:var(--cream);
  border:1px solid rgba(243,234,210,.16);border-radius:20px;
  padding:clamp(26px,4vw,40px);
  transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.gate-ov.open .gate-card{transform:none;opacity:1}
.gate-card .kicker{color:rgba(243,234,210,.6)}
.gate-card h2{font-size:clamp(30px,3.4vw,44px);margin:14px 0 10px}
.gate-card .lede{color:rgba(243,234,210,.72);font-size:15px;margin-bottom:22px}
.gate-card label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,234,210,.55);margin-bottom:8px}
.gate-card input{width:100%;background:rgba(243,234,210,.07);color:var(--cream);
  border:1px solid rgba(243,234,210,.18);border-radius:12px;padding:14px 16px;
  font:inherit;font-size:15px;margin-bottom:18px}
.gate-card input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gate-msg{font-size:13px;color:rgba(243,234,210,.7);min-height:20px;margin-bottom:8px}
.gate-msg.bad{color:#ff5e00}
.gate-act{display:flex;gap:10px;flex-wrap:wrap}
.gate-card .btn.solid{background:var(--cream);color:var(--ink);border:0;cursor:pointer;font:inherit}
.gate-card .btn.line{border:1px solid rgba(243,234,210,.28);color:var(--cream);
  background:none;cursor:pointer;font:inherit}
html.no-motion .gate-ov,html.no-motion .gate-card{transition:none}

/* ═══ THE WELCOME — the two frames cross on the site's own light ═══ */
.hero .subhead{font-weight:400;font-size:clamp(22px,3vw,40px);line-height:1.15;
  letter-spacing:-.01em;margin-top:clamp(14px,2.4vh,26px);color:var(--fg-2);max-width:22ch;
  /* it takes over the headline's own breathing room below */
  margin-bottom:clamp(30px,5vh,56px)}
.hero:has(.subhead) h1{margin-bottom:0}
.hero.greet-out h1{
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.4) 12%,#000 26%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.4) 12%,#000 26%,#000 100%);
  transition:-webkit-mask-image .6s cubic-bezier(.4,0,1,1),mask-image .6s cubic-bezier(.4,0,1,1),
             opacity .6s cubic-bezier(.4,0,1,1);
  opacity:.06}
.hero.greet-in h1,.hero.greet-in .subhead{
  --m1:-30%;--m2:-20%;--m3:-6%;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 var(--m1),rgba(0,0,0,.35) var(--m2),transparent var(--m3));
  mask-image:linear-gradient(100deg,#000 0%,#000 var(--m1),rgba(0,0,0,.35) var(--m2),transparent var(--m3));
  transition:--m1 1.15s cubic-bezier(.22,1,.36,1),
             --m2 1.15s cubic-bezier(.22,1,.36,1),
             --m3 1.15s cubic-bezier(.22,1,.36,1)}
.hero.greet-in .subhead{transition-delay:.16s}
.hero.greet-in.greet-lit h1,.hero.greet-in.greet-lit .subhead{--m1:100%;--m2:114%;--m3:130%}
html.no-motion .hero.greet-out h1,html.no-motion .hero.greet-in h1,
html.no-motion .hero.greet-in .subhead{mask-image:none;-webkit-mask-image:none;opacity:1;transition:none}

/* ── load choreography (content only — the plates never animate in) ── */
/* The line mask clips to its box, and with line-height under 1 the
   descenders of g, p, y sit BELOW that box — so 'gathering' and 'shaping'
   lost their tails. Open the clip box downward and pull the same amount
   back off the margin, so the mask still hides a whole line while the
   rhythm of the headline is unchanged. */
h1 .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
h1 .ln i{display:block;font-style:normal;will-change:transform}
html.lc-hold h1 .ln i{transform:translateY(128%)}   /* clears the taller box */
html.lc-hold .hero .rv{opacity:0}
body.lc h1 .ln i{transform:none;transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
body.lc h1 .ln:nth-child(2) i{transition-delay:.09s}
body.lc h1 .ln:nth-child(3) i{transition-delay:.18s}
body.lc .hero .rv{opacity:1;transition:opacity .9s cubic-bezier(.25,1,.5,1)}
body.lc .hero .factrow.rv{transition-delay:.46s}
body.lc .hero .cta.rv{transition-delay:.58s}
@keyframes lcIns{to{opacity:1}}
@keyframes lcInsT{to{transform:none}}
html.lc-hold .hero .rv{animation:lcIns .8s cubic-bezier(.25,1,.5,1) 2.3s forwards}
html.lc-hold h1 .ln i{animation:lcInsT 1s cubic-bezier(.16,1,.3,1) 2.3s forwards}

/* ═══ THE REVEAL — focus (picked on the motion sampler, 20 Aug) ═══
   No movement at all: each element pulls into focus as it enters — blur
   resolving a beat after opacity. The Aperture keeps the rise; the Day
   reveals by optics, which is this direction's own language. */
@property --m1{syntax:'<percentage>';inherits:false;initial-value:-30%}
@property --m2{syntax:'<percentage>';inherits:false;initial-value:-20%}
@property --m3{syntax:'<percentage>';inherits:false;initial-value:-6%}

/* the hide only ARMS once site.js is present (html.rva) — until then
   everything paints visible, so a slow network never shows an empty page.
   site.js marks whatever is already in view as .in BEFORE arming, so the
   choreography belongs to what enters later, never to first paint. */
html.rva section:not(.hero) .rv:not(.in){opacity:0;filter:blur(14px);transition:none}
section:not(.hero) .rv{
  transition:opacity var(--focus) ease-out,filter var(--focus-blur) var(--ease-out)}
section:not(.hero) .rv.in{opacity:1;filter:blur(0)}

/* ═══ PORTRAITS ═══
   A wall of faces is the picture, not a thing to be revealed — a wipe
   across 34 headshots reads as a curtain. So the portraits do not animate
   in at all: they are simply present. The only movement is the print
   settling as it decodes (a short tonal rise, no transform, no wipe), and
   the name beneath it developing on the light sweep like every other line
   of type on the site. */
/* THE MASK — a portrait is not a pasted rectangle. Its lower edge is
   feathered so the figure settles INTO the ground it sits on, and a warm
   duotone ties the black-and-white to the field's own colour. Hovering
   lifts both: the mask opens and the face comes up in full colour. */
/* THE PORTRAIT REVEAL — deliberately small. No wipe, no slide: the print
   simply comes up, a touch dark and a hair large, and settles. Staggered
   by COLUMN so a suggestion of light crosses the wall left to right
   rather than each face performing on its own. */
html.rva .shot-rv:not(.in){opacity:0;transform:scale(1.028);transition:none}
.shot-rv{
  transition:opacity .85s cubic-bezier(.25,1,.5,1),
             transform 1.05s cubic-bezier(.16,1,.3,1)}
.shot-rv.in{opacity:1;transform:none;
  transition-delay:calc(var(--k,0) * 55ms)}
.shot-rv .shot{filter:brightness(.9)}
/* NB: this rule REPLACES the base .shot transition list on revealed
   cards, so the feather-stop transitions must ride along here too or
   hover snaps (found 7 Sep). The reveal stagger stays on filter only —
   hover must answer immediately. */
.shot-rv.in .shot{filter:brightness(1);
  transition:filter 1.1s cubic-bezier(.25,1,.5,1) calc(var(--k,0) * 55ms),
             transform .9s cubic-bezier(.25,1,.5,1),
             --fm1 .6s cubic-bezier(.25,1,.5,1),
             --fm2 .6s cubic-bezier(.25,1,.5,1),
             --fm3 .6s cubic-bezier(.25,1,.5,1)}
.shot-rv.in:hover .shot{filter:brightness(1)}
html.no-motion .shot-rv{opacity:1;transform:none;transition:none}
html.no-motion .shot-rv .shot{filter:none}

/* the feather's stops are REGISTERED custom properties because a
   mask-image gradient itself cannot animate — transitioning the stop
   positions slides the fade off the bottom instead of snapping it
   (client, 7 Sep). Browsers without @property keep a static feather. */
@property --fm1{syntax:'<percentage>';inherits:false;initial-value:76%}
@property --fm2{syntax:'<percentage>';inherits:false;initial-value:88%}
@property --fm3{syntax:'<percentage>';inherits:false;initial-value:100%}
.kcard .shot,.sgrid .shot{opacity:0;transform:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 var(--fm1,76%),rgba(0,0,0,.86) var(--fm2,88%),rgba(0,0,0,.55) var(--fm3,100%));
  mask-image:linear-gradient(180deg,#000 0%,#000 var(--fm1,76%),rgba(0,0,0,.86) var(--fm2,88%),rgba(0,0,0,.55) var(--fm3,100%));
  transition:opacity .55s cubic-bezier(.25,1,.5,1),
             filter .7s cubic-bezier(.25,1,.5,1),
             transform .9s cubic-bezier(.25,1,.5,1),
             --fm1 .6s cubic-bezier(.25,1,.5,1),
             --fm2 .6s cubic-bezier(.25,1,.5,1),
             --fm3 .6s cubic-bezier(.25,1,.5,1)}
/* the print comes toward you — 005's own hover — and the ground
   releases it; together they say 'this face opens' */
.kcard:hover .shot,.sgrid .scard:hover .shot{--fm1:104%;--fm2:126%;--fm3:148%;transform:scale(1.03)}
html.no-motion .kcard:hover .shot,html.no-motion .sgrid .scard:hover .shot{transform:none}
html.no-motion .kcard .shot,html.no-motion .sgrid .shot{transition:opacity .55s cubic-bezier(.25,1,.5,1)}
.kcard .shot.shown,.sgrid .shot.shown{opacity:1}
.sgrid .shot.missing{opacity:1}
html.no-motion .kcard .shot,html.no-motion .sgrid .shot{opacity:1;transition:none}
.kcap{margin-top:12px}

html.no-motion .rv{opacity:1!important;transform:none!important;animation:none!important;
  filter:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;transition:none!important}
html.no-motion h1 .ln i{transform:none!important;animation:none!important}

/* ═══════════════════════════════════════════════════════════════════
   RESTORED FROM THE BUILD THE CLIENT REVIEWED
   EN · JA, the speaker bios, and the scroll progress line.
   ═══════════════════════════════════════════════════════════════════ */

/* EN · JA — the segment sits beside the menu, active state in AFF orange
   (ink on #ff5e00 measures 5.5:1) */
.pill.lang{flex-direction:row;align-items:center;padding:5px;align-self:flex-start}
.pill.lang b{font-weight:400;font-size:12px;letter-spacing:.1em;line-height:19px;
  padding:11px 15px;border-radius:22px;cursor:pointer;user-select:none;
  color:rgba(243,234,210,.6);transition:background .3s cubic-bezier(.2,.7,.3,1),color .3s}
.pill.lang b:hover{color:#f3ead2}
.pill.lang b.on{background:#ff5e00;color:#000000}
.pill.lang b:focus-visible{outline:2px solid #ff5e00;outline-offset:2px}
/* EN·JP stays on the floor on mobile. The bar is bottom-anchored there and
   the menu unfolds UPWARD out of its own pill, so `align-self:flex-start`
   above — correct for the desktop bar, which hangs from the top — pinned
   the language pill to the top of that growing row and it rode up with the
   menu. This override has to live AFTER that rule, not in the mobile block
   higher up the file: same specificity, so source order decides. */
@media(max-width:640px){
  .pill.lang{align-self:flex-end}
}
html.ja-pending body{opacity:0}
html[lang="ja"] h1,html[lang="ja"] h2{letter-spacing:0}

/* the bio chip rides the corner of each portrait */
.shotwrap{position:relative;display:block;overflow:hidden;cursor:pointer}
.bio-btn{position:absolute;right:9px;bottom:9px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#f3ead2;background:rgba(14,9,5,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(243,234,210,.24);border-radius:999px;
  padding:6px 11px;cursor:pointer;
  transition:background .3s cubic-bezier(.2,.7,.3,1),color .3s,transform .3s}
.bio-btn:hover{background:rgba(14,9,5,.92);color:#fff;transform:translateY(-1px)}
.bio-btn:focus-visible{outline:2px solid #ff5e00;outline-offset:2px}

/* the card over the page */
.bio-overlay{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(10,7,4,.5);backdrop-filter:blur(22px) saturate(120%)}
.bio-overlay.open{display:flex}
.bio-card{width:min(680px,94vw);max-height:86vh;overflow:auto;border-radius:8px;
  background:#16100b;color:#f3ead2;border:1px solid rgba(243,234,210,.16);
  padding:clamp(24px,4vw,44px);position:relative;
  box-shadow:0 40px 120px rgba(0,0,0,.55)}
.bio-card .bio-head{display:flex;gap:22px;align-items:flex-start}
.bio-card img{width:104px;height:130px;object-fit:cover;flex:0 0 104px;
  background:rgba(243,234,210,.06);filter:none}
.bio-card #bio-name{font-weight:400;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.01em;line-height:1.1}
.bio-card .bio-role{margin-top:8px;font-size:14px;color:rgba(243,234,210,.72);line-height:1.5}
.bio-card p{margin-top:22px;font-size:15px;line-height:1.75;color:rgba(243,234,210,.86)}
.bio-card .bio-x{position:absolute;top:14px;right:14px;font-family:inherit;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(243,234,210,.62);
  background:none;border:1px solid rgba(243,234,210,.22);border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:color .3s,border-color .3s}
.bio-card .bio-x:hover{color:#f3ead2;border-color:rgba(243,234,210,.5)}
.bio-card .bio-x:focus-visible,.bio-seg b:focus-visible{outline:2px solid #ff5e00;outline-offset:2px}
.bio-seg{display:inline-flex;margin-top:12px;border:1px solid rgba(243,234,210,.24);
  border-radius:999px;overflow:hidden}
.bio-seg b{font-weight:400;font-size:11px;letter-spacing:.12em;padding:6px 12px;
  cursor:pointer;color:rgba(243,234,210,.58);user-select:none;transition:background .3s,color .3s}
.bio-seg b.on{background:#ff5e00;color:#000000}
@media(max-width:560px){.bio-card .bio-head{flex-direction:column}
  .bio-card img{width:88px;height:110px}}
html:not(.no-motion) .bio-overlay.open .bio-card{
  animation:bio-in .46s cubic-bezier(.16,1,.3,1)}
@keyframes bio-in{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}

/* the scroll progress line — a hairline of heat along the very top */
#scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--prog,0));
  background:linear-gradient(90deg,#ff5e00,#ffb066)}

/* ═══ EN ↔ JA — the swap is an optical dissolve ═══
   A same-document view transition: the page in one language melts out of
   focus and the other resolves in its place. .lang-vt scopes these frames
   so page-to-page navigation keeps its own vtOut/vtIn. */
.lang-vt::view-transition-old(root){animation:langOut .3s ease both}
.lang-vt::view-transition-new(root){animation:langIn .55s cubic-bezier(.22,1,.36,1) both}
@keyframes langOut{to{opacity:0;filter:blur(8px)}}
@keyframes langIn{from{opacity:0;filter:blur(8px)}}

/* ═══ 005's INNER PAGES — same standard as the landing: composition is the
   design, so the values below are 005's rendered values, mapped onto this
   build's class names. Heroes become short blocks (not centered viewports),
   content sits directly on the page ramp behind hairline rules, and the
   molten plate bands are gone from the inner pages. ═══ */

/* the kicker itself — 005's is lighter and quieter than 006d's */
.kicker{font-size:12px;font-weight:400;letter-spacing:.26em;color:var(--fg-3)}
.gate-card .kicker{color:rgba(243,234,210,.6)}

.page-hero{min-height:0;display:block;padding:clamp(150px,24vh,240px) 0 clamp(56px,9vh,110px)}
.page-hero .kicker{margin-bottom:18px}
.page-hero h1{margin-bottom:0}
.page-hero .lede{margin-top:clamp(24px,4vh,44px);max-width:52ch}

/* full-width photo strips between hero and content */
.bleed{display:block;width:100%;object-fit:cover}

.fine{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);line-height:1.9}

/* sessions → 005's keynote features */
.sess{grid-template-columns:220px 1fr;gap:12px 40px;padding:clamp(30px,5vh,54px) 0}
.sess .kind{font-weight:400;font-size:12px;padding-top:.5em;color:var(--fg-3)}
.sess h2{font-size:clamp(26px,3.4vw,44px);max-width:18ch}
.sess .who{margin-top:14px;font-size:15px;color:var(--fg)}
.sess p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--fg-2);max-width:58ch}
@media(max-width:820px){.sess{grid-template-columns:1fr}.sess .kind{padding-top:0}}

/* panels */
.panel{grid-template-columns:150px 1fr 300px;gap:10px 28px;padding:clamp(20px,3vh,30px) 0}
.panel .track{font-weight:400;font-size:12px;letter-spacing:.16em;padding-top:.35em}
.panel h2{font-size:clamp(17px,1.7vw,21px)}
.panel .who{font-size:13px;color:var(--fg-3)}
@media(max-width:860px){.panel .track{padding-top:0}}

/* speaker wall captions */
.sgrid figcaption b{font-size:16px;line-height:1.25;margin-top:12px}
.sgrid figcaption span{font-size:12px;line-height:1.45;margin-top:5px}

/* the schedule — the page is the day, sitting directly on the ramp */
.sched{max-width:1280px;margin:0 auto;padding:0 clamp(34px,6.5vw,64px)}
.sched .sblock{padding:clamp(26px,4vh,44px) 0;margin-bottom:0}
/* day parts sit a step under the page title, with real air before the
   grid below them (client, 8 Sep) */
.sched .sblock-h{padding-bottom:0;border-bottom:0;margin-bottom:clamp(28px,4.5vh,52px)}
.sched .sblock-h h2{font-size:clamp(38px,7vw,96px)}
.srange{font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.sched .srow{grid-template-columns:140px 1fr 150px;gap:8px 26px}
.st{font-size:15px;color:var(--fg-3)}
.sh{font-size:clamp(16px,1.6vw,19px)}
.sw{margin-top:5px;font-size:14px}
.sr{font-weight:400;font-size:12px;letter-spacing:.16em}

/* venue map, 005's framed figure */
.map-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:22px}
.map-foot{display:flex;justify-content:space-between;gap:24px;align-items:baseline;margin-top:18px}
.map-cap{font-size:13px;color:var(--fg-2);max-width:64ch;line-height:1.6}
.map-note{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* info rows to 005's measure */
.inforow{grid-template-columns:190px 1fr 320px;gap:8px 30px;padding:clamp(18px,3vh,32px) 0}
.inforow .k{font-weight:400}
.inforow .v{font-size:clamp(19px,2.2vw,28px)}
.inforow .nn{font-size:13px;color:var(--fg-3)}
@media(max-width:820px){.inforow{grid-template-columns:1fr}}

/* mobile guards — the port block above sits AFTER the build's original
   media queries in source order, so every mobile stack it would silently
   defeat is re-declared here, at the true end of the cascade */
@media(max-width:640px){.sgrid figcaption b{font-size:14px;line-height:1.3}.sgrid figcaption span{font-size:11px}}
@media(max-width:860px){.panel{grid-template-columns:1fr;gap:6px}}
@media(max-width:760px){.sched .srow{grid-template-columns:1fr;gap:4px}}

/* one rule per section: the sect-h owns the line, the first row must not
   repeat it (005's own rule, ported) — and 005's section headers carry
   more weight than body kickers */
.sesslist .sess:first-child,.panels .panel:first-child,
.inforows .inforow:first-child,.faqlist .faq:first-child{border-top:0}
.sect-h .kicker{font-size:13px;font-weight:700;color:var(--fg)}

/* Atyp's default seven is crossed; ss06 is the plain one — client ask */
body{font-feature-settings:'ss06' 1}

/* the generator strips: bounded fields between sections, no type on them.
   The gradient below is the stand-in each strip wears until the engine
   arrives (or where WebGL is unavailable) — same amber family as the field */
.bleed.plate{isolation:isolate;background:linear-gradient(100deg,#f0d3a0 0%,#ffa050 38%,#ff5e00 62%,#ff8c3c 82%,#f2d7a5 100%)}

/* nightfall: the dark tails were two-stop gradients, which read as a hard
   knee where the overlay bites into the orange. These are eased (smoothstep
   sampled) and run all the way to true black so the footer seam vanishes */
.nightfall{background-image:linear-gradient(180deg,
  rgba(20,11,6,0) 0%,
  rgba(20,11,6,.04) 9%,
  rgba(20,11,6,.13) 18%,
  rgba(20,11,6,.26) 27%,
  rgba(20,11,6,.42) 36%,
  rgba(20,11,6,.59) 45%,
  rgba(20,11,6,.74) 54%,
  rgba(20,11,6,.86) 63%,
  rgba(20,11,6,.94) 72%,
  rgba(20,11,6,.985) 81%,
  #140b06 88%,
  #000 100%)}
/* venue's tail carries the map, which wants its dark ground sooner */
.nightfall-deep{background-image:linear-gradient(180deg,
  rgba(20,11,6,0) 0%,
  rgba(20,11,6,.14) 8%,
  rgba(20,11,6,.38) 16%,
  rgba(20,11,6,.62) 24%,
  rgba(20,11,6,.81) 32%,
  rgba(20,11,6,.93) 40%,
  rgba(20,11,6,.985) 48%,
  #140b06 56%,
  #000 100%)}

/* every page settles to black before the foot: a fine eased fade hanging
   above the footer. On pages whose tail already ends at #000 it is
   invisible (black over black); on the ramp it is the day going out.
   pointer-events:none so nothing under its upper reaches loses clicks. */
.foot{position:relative}
.foot::before{content:none;position:absolute;bottom:100%;left:0;right:0;
  height:clamp(220px,32vh,420px);pointer-events:none;z-index:-1;
  background-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.03) 10%,
    rgba(0,0,0,.10) 20%,
    rgba(0,0,0,.22) 30%,
    rgba(0,0,0,.38) 40%,
    rgba(0,0,0,.56) 50%,
    rgba(0,0,0,.72) 60%,
    rgba(0,0,0,.85) 70%,
    rgba(0,0,0,.94) 80%,
    rgba(0,0,0,.985) 90%,
    #000 100%)}

/* the landing FAQ carries the night onward: the dusk tile ends at #1b0f08,
   so the questions sit on a ground that keeps descending — never brighter
   than the evening above it (client note, 1 Sep). Self-painted, so the
   field solver leaves it alone; the pre-footer fade finishes the walk. */
.sect.night{background-image:linear-gradient(180deg,#1b0f08 0%,#120a05 55%,#0a0503 100%)}

/* ═══ the speakers wall answers the field (client, 1 Sep): caption type
   brightens as the page descends — ink at the top of the wall where the
   ground is amber, cream by its foot where the ground has gone dark.
   site.js shades each card from its measured depth; these rules just make
   every caption piece inherit the card's shade. ═══ */
.sgrid figcaption span{color:inherit;opacity:.78}
.sgrid .shot.missing{color:inherit}

/* footer contacts (client, 1 Sep) — persistent in both states */
.foot .contacts{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(22px,3.5vh,36px)}
.foot .contacts .fine{text-transform:none;letter-spacing:.02em;font-size:13px}
.foot .contacts a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

/* signed in, "how do I attend" is answered — the FAQ retires with it */
html.authed .qna{display:none}

/* footer, relaid (client, 1 Sep): the date locks up with the mark, a step
   smaller; contacts become plain-language links */
.foot .lockup .footdate{display:block;margin-top:14px;font-size:10px}
.foot .contacts{flex-direction:column;gap:10px}
.foot .contacts a{color:var(--cream);font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* footer v3 (client, 1 Sep): one band — lockup left, links right on the
   same level, no hairline between them; only the copyright keeps its rule */
.foot .foot-main{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px}
.foot .contacts{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right;margin-bottom:0}
.foot .contacts a{color:var(--cream);font-size:13px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.foot .foot-main{align-items:flex-start;flex-direction:column}.foot .contacts{align-items:flex-start;text-align:left}}

/* roles may carry a deliberate line break (client, 1 Sep) */
.sgrid figcaption span,.bio-role{white-space:pre-line}

/* Phase 2: panels carry descriptions */
.panel p{margin-top:12px;font-size:14px;line-height:1.65;color:var(--fg-2);max-width:58ch}

/* track intros on the programming page (Phase 2 v2) */
.trackintro{border-top:1px solid var(--hair);padding:clamp(26px,4vh,44px) 0 clamp(10px,1.6vh,18px)}
.panels .trackintro:first-child{border-top:0}
.trackintro h3{font-size:clamp(19px,2vw,26px);letter-spacing:-.008em}
.trackintro p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--fg-2);max-width:58ch}
.trackintro + .panel{border-top:0}


/* ═══ JAPANESE TYPOGRAPHY (8 Sep) — answers Gita's 'sizing and aspect
   ratios look off, especially in Japanese'. The face is MURECHO — the
   project's own JP choice (Ness → Dave, 4 Aug, for the Pavilion titles;
   Taylor's 2024 shortlist) — self-hosted and unicode-ranged so English
   sessions never download a byte of it. Murecho is kana-first and lacks
   24 kanji the site uses (speaker names among them), so a weight-matched
   Noto subset sits underneath carrying exactly those glyphs. */
@font-face{font-family:'Murecho';src:url('../assets/fonts/Murecho-Regular.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+3000-30FF,U+31F0-31FF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'Murecho';src:url('../assets/fonts/Murecho-Bold.woff2') format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+3000-30FF,U+31F0-31FF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'AFF JP Fallback';src:url('../assets/fonts/AFFJPFallback-Regular.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+3000-30FF,U+31F0-31FF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'AFF JP Fallback';src:url('../assets/fonts/AFFJPFallback-Bold.woff2') format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+3000-30FF,U+31F0-31FF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}

/* kanji and kana fill the em box: Latin display leading crushes them.
   JP gets its own vertical rhythm, tracking neutralized, micro sizes
   lifted to the JP legibility floor, and phrase-aware headline wraps. */
html[lang="ja"] :is(h1,h2,h3,.fact-big,.joinline,.sess h2,.trackintro h3){letter-spacing:0}
html[lang="ja"] h1{line-height:1.22}
html[lang="ja"] h2,html[lang="ja"] .sess h2{line-height:1.32}
html[lang="ja"] h3,html[lang="ja"] .faq summary{line-height:1.4}
html[lang="ja"] .fact-big{line-height:1.2}
html[lang="ja"] .lede{line-height:1.9}
html[lang="ja"] :is(p,.sw,.who,.bio-role,.room-d,.map-cap){line-height:1.85}
html[lang="ja"] :is(h1,h2,h3,.sh,.faq summary){word-break:auto-phrase}
html[lang="ja"] .kicker{letter-spacing:.14em}
html[lang="ja"] .fine{font-size:11px;letter-spacing:.08em}
html[lang="ja"] .sgrid figcaption span{font-size:13px}

/* a single Return in a CMS bio is a line break; a blank line stays a
   paragraph (client, 8 Sep). pre-line renders the lone newlines the
   paragraph-splitter leaves inside each chunk — EN and JP alike. */
.bio-body p{white-space:pre-line}

/* the midday photo stands alone now — its copy was never on the approved
   doc (8 Sep); the band keeps its height as a pure picture */
.sect.midphoto{min-height:clamp(320px,52vh,560px)}

/* the voices block, re-spaced (client, 8 Sep): air between the eyebrow
   and the headline, breathing room above the lede, and the block itself
   loses the dead weight below — tighter section padding and a shorter
   dusk fall into the tile */
.lineup .kicker{margin-bottom:20px}
.lineup h2{margin-bottom:clamp(26px,3.6vh,40px)}
.lineup .allvoices{margin-top:clamp(30px,4.5vh,52px)}
.sect.lineup{padding:clamp(56px,8vh,96px) 0 clamp(40px,6vh,72px)}
.duskfall{height:clamp(130px,18vh,250px)}

/* ── the 8 Sep punch list ─────────────────────────────────────────────
   The public homepage carries the tracks and the high-level day; signed
   in, both retire and the same slot becomes a plain section directory.
   The speakers blurb runs the other way: it belongs to attendees. */
html.authed .pubonly{display:none}
.dironly{display:none}
html.authed .dironly{display:block}
/* the lineup block belongs to attendees entirely now (client, 8 Sep):
   the public landing goes hero, photo, tracks, the day, the tile */
.sect.lineup{display:none}
html.authed .sect.lineup{display:block}

.tracks{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4.4vh,48px) clamp(34px,4.5vw,64px);margin-top:clamp(28px,4.4vh,48px)}
@media(max-width:760px){.tracks{grid-template-columns:1fr}}
.track h3{font-weight:400;font-size:clamp(20px,2.2vw,30px);line-height:1.15;
  letter-spacing:-.01em;margin-bottom:10px}
.track p{font-size:15px;line-height:1.62;color:var(--fg-2);max-width:46ch}

.hlsched{margin-top:clamp(26px,4vh,44px)}
.hlrow{display:grid;grid-template-columns:minmax(170px,220px) 1fr;gap:6px 26px;
  padding:15px 0;border-bottom:1px solid var(--hair);
  font-size:clamp(15px,1.35vw,17px);line-height:1.5}
.hlrow span:first-child{color:var(--fg-3);font-variant-numeric:tabular-nums}
@media(max-width:640px){.hlrow{grid-template-columns:1fr;gap:2px}}

.dirlinks{display:flex;flex-direction:column}
.dirlink{display:block;padding:clamp(22px,3.4vh,36px) 0;
  border-bottom:1px solid var(--hair);color:var(--fg);text-decoration:none;
  font-size:clamp(28px,4vw,54px);line-height:1.1;letter-spacing:-.012em;
  transition:color .5s cubic-bezier(.25,1,.5,1)}
.dirlinks .dirlink:first-child{border-top:1px solid var(--hair)}
/* rollover eases to the site's white — no hard cut (client, 8 Sep).
   The reveal rule owns this element's transition list, so color is folded
   into that list rather than declared alone (clobber lesson #4). */
section:not(.hero) .dirlink.rv{transition:opacity var(--focus) ease-out,
  filter var(--focus-blur) var(--ease-out),color .5s cubic-bezier(.25,1,.5,1)}
.dirlink:hover{color:var(--cream)}

/* Deep in the day ramp the ground goes rust and black ink drowns (client,
   8 Sep — programming + schedule). site.js measures where each block sits
   on the body ramp and flips its ink to cream past the darkening point. */
.inkflip{--fg:var(--cream);--fg-2:rgba(243,234,210,.84);--fg-3:rgba(243,234,210,.7);
  --hair:rgba(243,234,210,.26);color:var(--fg)}

/* the event map speaks the street map's voice: Atyp caps, wide tracking.
   Title Case lives in the DOM so the JA dictionary can key on it. */
/* the Level 4 plate (client, 9 Sep): labels are live HTML over the
   supplied image, placed in percentages, sized in container units so
   they scale with the plate; callouts are left-aligned, room and stage
   labels centred and allowed to stack, as on the client's plan. */
.emap{position:relative;container-type:inline-size;background:#000}
.emap img{width:100%;height:auto;display:block}
.emap .lb{position:absolute;transform:translate(-50%,-50%);text-align:center;
  font-family:'Atyp','Murecho','AFF JP Fallback',system-ui,sans-serif;
  font-size:max(1.18cqw,9px);line-height:1.35;letter-spacing:.14em;text-transform:uppercase;
  color:#f3ead2;max-width:9cqw;word-break:keep-all;overflow-wrap:normal}
.emap .lb.on{color:#16100b;max-width:8cqw}
.emap .lb.call{transform:translate(0,-50%);text-align:left;max-width:none;white-space:nowrap}
.emap .lb.two{max-width:11cqw;white-space:normal}
.emap .lb.stk{max-width:5.6cqw}
.emap .lb.lv{font-size:max(1.06cqw,8px);letter-spacing:.2em}
.emap .lb.num{font-size:max(2.7cqw,20px);letter-spacing:0;font-weight:300}
.emap .lb.rule{width:5.4cqw;height:1px;background:#f3ead2;max-width:none}
html[lang="ja"] .emap .lb{letter-spacing:.04em;word-break:normal}
html[lang="ja"] .emap .lb.on,html[lang="ja"] .emap .lb.two,html[lang="ja"] .emap .lb.stk{max-width:none;white-space:nowrap}
/* small screens: the plate scales to fit (client, 9 Sep); the labels keep
   a reading floor and lose most of their tracking so they stay inside
   their rooms */
@media(max-width:700px){.emap .lb{font-size:max(1.18cqw,6.5px);letter-spacing:.02em;line-height:1.25}
  .emap .lb.lv{font-size:max(1.06cqw,5.5px)}.emap .lb.num{font-size:max(2.7cqw,13px)}
  .emap .lb.two{max-width:16cqw}.emap .lb.stk{max-width:7cqw}}
.event-map text{font-family:'Atyp','Murecho','AFF JP Fallback',system-ui,sans-serif;
  letter-spacing:1.6px;text-transform:uppercase}
html[lang="ja"] .event-map text{letter-spacing:.4px}

/* landing rhythm, tightened (client, 8 Sep): without its blurb the public
   lineup block tucks the link under the headline, and the stacked homepage
   sections share a shorter breath than the site-wide default */
.lineup .allvoices{margin-top:clamp(16px,2.4vh,26px)}
html.authed .lineup .allvoices{margin-top:clamp(26px,4vh,44px)}
.sect.lineup{padding-bottom:clamp(32px,4.6vh,56px)}
.sect.pubonly,.sect.dironly{padding:clamp(46px,6.8vh,84px) 0}

/* the two-step gate */
.gstep{margin-left:10px;color:rgba(243,234,210,.42)}
.gstep::before{content:'\00b7\2002'}
.g-back{background:none;border:0;color:rgba(243,234,210,.6);font-size:13px;
  margin-top:16px;padding:0;cursor:pointer;font-family:inherit;
  text-decoration:underline;text-underline-offset:3px}
.g-back:hover{color:var(--cream)}

/* rotated strip labels: tighter tracking so the words live inside their
   strips (client, 8 Sep — type was escaping the orange) */
.event-map .rot{letter-spacing:.7px}
html[lang="ja"] .event-map .rot{letter-spacing:.2px}

/* ── the schedule as the ROS grid (client, 8 Sep) ──────────────────────
   Time down the rail, the three stages across; Atrium moments span the
   width the way the deck bands its meals. Under 900px the lanes fold
   back into the chronological list. */
.stagegrid{margin-top:8px}
.sg-head,.sg-band{display:grid;grid-template-columns:120px 1fr 1fr 1fr;gap:12px 26px}
.sg-head{padding-bottom:12px;border-bottom:1px solid var(--hair)}
.sg-stage{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.sg-band{padding:20px 0;border-bottom:1px solid var(--hair)}
.sg-t{font-size:14px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.sg-time{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums;margin-bottom:5px}
.sg-span{grid-column:2 / -1}
/* a spanning row's title returns at a column's measure, not the full rail */
.sg-span .sh{max-width:30ch}
.sg-tag{margin-top:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
@media(min-width:901px){.sg-cell .sg-tag{display:none}.sg-span .sg-tag{display:block}}
@media(max-width:900px){
  .sg-head{display:none}
  .sg-band{grid-template-columns:1fr;gap:16px}
  .sg-cell.sg-empty{display:none}
  .sg-span{grid-column:auto}
}

/* phones: session titles in the schedule carry a little more weight.
   Atyp ships in Regular and Bold only, and Bold was too much, so this is
   the Regular with a hairline stroke: a medium by other means (client,
   10 Sep) */
@media(max-width:900px){.sched .sh{-webkit-text-stroke:.32px currentColor;paint-order:stroke fill}}

/* ── phone menu, re-animated (client, 10 Sep, Chrome on Android) ──
   The unfold animated a grid row, which is laid out on the main thread
   and stutters on a phone; and the open pill grew upward from the floor,
   so a tap on an item saw the panel collapse and the page jump. On phones
   the link panel is now its own floating card above the Menu pill, moved
   with transform and opacity only (compositor work, nothing re-laid-out),
   and the pill itself never changes size. */
@media(max-width:640px){
  .pill.main{overflow:visible;position:relative}
  .pill.main .linkwrap{position:absolute;left:0;right:0;bottom:calc(100% + 8px);
    display:block;grid-template-rows:none;
    /* no backdrop blur on the card: a blur re-rendered under a moving,
       fading layer is the one thing a phone GPU still stutters on */
    background:rgba(14,9,5,.96);-webkit-backdrop-filter:none;backdrop-filter:none;
    border:1px solid rgba(243,234,210,.18);border-radius:22px;will-change:transform,opacity;
    transform:translateY(10px) scale(.985);transform-origin:50% 100%;opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .36s cubic-bezier(.16,1,.3,1),opacity .24s cubic-bezier(.25,1,.5,1),visibility 0s linear .36s}
  .pill.main.open .linkwrap{transform:none;opacity:1;visibility:visible;pointer-events:auto;
    transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .22s cubic-bezier(.25,1,.5,1),visibility 0s}
  .pill.main .links,.pill.main.open .links{padding:8px 5px;transition:none}
  .pill.main .links > *{transform:translateY(4px);transition:opacity .26s cubic-bezier(.25,1,.5,1),transform .32s cubic-bezier(.16,1,.3,1)}
  .pill.main.open .links > *{transition-delay:calc(var(--i,0) * 24ms + 40ms)}
  .pill.main.leaving .linkwrap,.pill.main.leaving .links > *{transition:none}
  html.leaving main,html.leaving footer{opacity:0;transition:opacity .18s cubic-bezier(.25,1,.5,1)}
  .pill a,.pill button{-webkit-tap-highlight-color:transparent}
}