/* ═══════════════════════════════════════════════════════════════
   BAKA — MONOCHROME / モノクローム
   Michael Jackson × anime ink. Zero colour. One glove.
   Inversion engine: every panel owns --ink / --paper.
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0b0b0b; --paper:#f7f7f5;
  --f-disp:"Anton","Archivo Black",Impact,sans-serif;
  --f-heavy:"Archivo Black","Anton",sans-serif;
  --f-body:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-serif:"Cormorant Garamond",Georgia,serif;
  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.7,0,.3,1);
  --gut:clamp(1.1rem,4vw,4.5rem);
  --maxw:1560px;
  --beat:0;          /* 0..1 live audio bass, set by JS */
  --vel:0;           /* scroll velocity, set by JS */
}
.dark{--ink:#f4f4f2;--paper:#050505}
.light{--ink:#0b0b0b;--paper:#f7f7f5}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.js-on{scroll-behavior:auto}
body{
  font-family:var(--f-body);background:#050505;color:#f4f4f2;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overscroll-behavior-y:none;
}
img,video,svg,canvas{display:block;max-width:100%}
/* no single-word last lines anywhere; balance the short display lines, which
   otherwise strand orphans like the "ME." in the creed */
p{text-wrap:pretty}
h1,h2,h3,.creed__line,.act__t{text-wrap:balance}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:currentColor;color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sprite-defs{position:absolute;width:0;height:0;overflow:hidden}
/* author display rules outrank the UA's [hidden]{display:none}; without this the
   closed lightbox stays a full-viewport click-blocker over the whole page */
[hidden]{display:none!important}
/* pure decoration never eats a click — same bug class as the one above */
.film,.film__v,.film__grade,.vig,.plate__v,.plate__tone,.load-film,.load-veil,.tone,.halftone,.repeat__veil,.ticker,.hero__echo,.outro__echo{pointer-events:none}
.mono{font-family:var(--f-mono);font-weight:300;letter-spacing:.14em;text-transform:uppercase}
.skip{position:fixed;top:-100px;left:1rem;z-index:9999;padding:.7rem 1.1rem;background:#fff;color:#000;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}.skip:focus{top:1rem}
.motion-toggle{position:fixed;top:.75rem;right:.75rem;z-index:9700;padding:.65rem .8rem;border:1px solid rgba(255,255,255,.34);background:rgba(0,0,0,.72);color:#fff;font:500 .55rem var(--f-mono);letter-spacing:.14em;cursor:pointer}
/* ───────── glyphs ───────── */
.gl{color:var(--ink);overflow:visible}

/* ───────── ambient layers ───────── */
#grain,#scanlines,#spotlight,#beat-flash,#speedlines{position:fixed;inset:0;pointer-events:none;z-index:60}
#grain{
  z-index:64;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:grain 2.4s steps(1,end) infinite;
}
@keyframes grain{
  0%{background-position:0 0}20%{background-position:-32px 14px}40%{background-position:26px -22px}
  60%{background-position:-18px -28px}80%{background-position:34px 20px}100%{background-position:0 0}
}
#scanlines{z-index:63;opacity:.055;background:repeating-linear-gradient(to bottom,#fff 0 1px,transparent 1px 4px)}
#spotlight{z-index:59;mix-blend-mode:soft-light;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 70%)}
html.pointer-fine #spotlight{opacity:1}
#beat-flash{z-index:65;background:#fff;mix-blend-mode:difference;opacity:calc(var(--beat) * .055)}
/* the lines all radiate from H*.46, i.e. straight through wherever the copy sits.
   clear the middle the same way .repeat__veil does: they still streak in from the
   edges toward the vanishing point, they just stop before crossing the text. */
#speedlines{z-index:61;mix-blend-mode:difference;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 44% 38% at 50% 46%,transparent 38%,#000 100%);
          mask-image:radial-gradient(ellipse 44% 38% at 50% 46%,transparent 38%,#000 100%)}

/* ───────── screentone / halftone ───────── */
.tone,.halftone{position:absolute;inset:0;pointer-events:none}
.tone{background-image:radial-gradient(circle,var(--ink) .95px,transparent 1.05px);background-size:9px 9px;opacity:.085}
.tone--fine{background-size:6px 6px;opacity:.07}
.halftone{
  inset:-8%;background-image:radial-gradient(circle,var(--ink) 1.15px,transparent 1.3px);
  background-size:8px 8px;opacity:.3;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 55%,transparent 32%,#000 92%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 55%,transparent 32%,#000 92%);
}
.halftone--wide{-webkit-mask-image:linear-gradient(to bottom,#000,transparent 38%,transparent 62%,#000);
  mask-image:linear-gradient(to bottom,#000,transparent 38%,transparent 62%,#000);opacity:.22}

/* ───────── film / video grade ───────── */
.film{position:absolute;inset:0;overflow:hidden;z-index:0}
.film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050505;
  filter:grayscale(1) contrast(1.7) brightness(.62) saturate(0);transform:scale(1.08)}
.film--soft .film__v{filter:grayscale(1) contrast(1.35) brightness(.44);opacity:.62}
.light .film__v{filter:grayscale(1) contrast(1.5) brightness(1.05) invert(1);opacity:.13}
.film__grade{position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 45%,transparent 25%,var(--paper) 118%),
             linear-gradient(to bottom,color-mix(in srgb,var(--paper) 62%,transparent),transparent 26%,transparent 68%,var(--paper))}
.vig{position:absolute;inset:0;box-shadow:inset 0 0 min(28vw,320px) min(6vw,70px) var(--paper);
  background:radial-gradient(ellipse at center,transparent 42%,color-mix(in srgb,var(--paper) 75%,transparent) 100%)}
.vig--heavy{box-shadow:inset 0 0 min(40vw,460px) min(10vw,120px) var(--paper)}
/* ───────── cursor (difference blend = auto-inverts on any panel) ───────── */
/* z above #stage-load (9500) and .lbox (9200): at 9000 the drawn cursor was painted
   *under* both, and since `cursor:none` is forced there was no pointer at all on the
   intro screen or inside the lightbox — the two places with buttons to find. */
.cursor{position:fixed;left:0;top:0;z-index:9600;pointer-events:none;mix-blend-mode:difference;color:#fff;opacity:0}
html.pointer-fine .cursor{opacity:1}
/* the drawn cursor IS the cursor: kill the native one everywhere, including the
   elements that set their own (sliders, .cta, buttons) */
html.pointer-fine *{cursor:none!important}
/* the JS positions these with translate(-50%,-50%), so no centring margins here —
   with both, the dot sits 3px off the real pointer */
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff}
/* 2px, not 1: difference gives |247-255|=8, so on the white panels the ring is a
   genuinely black hairline — but a thin dark line on white doesn't bloom the way a
   thin light line on black does, so at 1px the inverted state read as a gray whisper
   and looked like the blend had failed. */
.cursor__ring{position:absolute;width:42px;height:42px;border:2px solid #fff;border-radius:50%;
  display:grid;place-items:center;transition:width .35s var(--e),height .35s var(--e),border-color .3s}
.cursor__glove{width:0;height:0;opacity:0;color:#fff;transition:opacity .3s,width .35s var(--e),height .35s var(--e)}
.cursor__label{position:absolute;left:0;top:26px;font-size:.56rem;letter-spacing:.2em;white-space:nowrap;
  transform:translate(-50%,0) scale(.7);opacity:0;transition:opacity .25s,transform .35s var(--e)}
.cursor.is-hot .cursor__ring{width:74px;height:74px}
.cursor.is-hot .cursor__glove{width:26px;height:26px;opacity:.9}
.cursor.is-lab .cursor__label{opacity:1;transform:translate(-50%,0) scale(1)}
.cursor.is-down .cursor__ring{width:26px;height:26px}

/* ───────── scroll rail ───────── */
.rail{position:fixed;right:clamp(.6rem,1.6vw,1.5rem);top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;mix-blend-mode:difference;color:#fff}
.rail__track{position:relative;width:1px;height:min(34vh,260px);background:rgba(255,255,255,.28)}
.rail__fill{position:absolute;inset:0 0 auto;height:0;background:#fff;transform-origin:top}
.rail__pct{font-size:.58rem;letter-spacing:.16em;color:#fff}
@media(max-width:820px){.rail{display:none}}

/* ───────── dot nav ───────── */
.dotnav{position:fixed;left:clamp(.6rem,1.6vw,1.5rem);top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:.95rem;mix-blend-mode:difference;color:#fff}
.dotnav a{display:flex;align-items:center;gap:.6rem}
.dotnav i{width:16px;height:1px;background:rgba(255,255,255,.4);transition:width .4s var(--e),background .3s}
.dotnav span{font-size:.53rem;letter-spacing:.18em;opacity:0;transform:translateX(-6px);
  transition:opacity .35s,transform .35s var(--e);white-space:nowrap}
.dotnav a:hover i,.dotnav a.on i{width:34px;background:#fff}
.dotnav a:hover span,.dotnav a.on span{opacity:1;transform:none}
.dotnav a.on i{height:2px}
@media(max-width:980px){.dotnav{display:none}}

/* ───────── panels ───────── */
.panel{position:relative;isolation:isolate;background:var(--paper);color:var(--ink);overflow:hidden}
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,11vh,9rem) var(--gut)}
/* ───────── section headers ───────── */
.shead{position:relative;display:flex;align-items:flex-end;gap:clamp(.8rem,2vw,2rem);
  padding-bottom:1.1rem;margin-bottom:clamp(2.4rem,6vh,4.5rem);border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.shead__idx{font-size:.62rem;letter-spacing:.3em;opacity:.6;padding-bottom:.55rem;flex:none}
.shead__t{font-family:var(--f-disp);font-weight:400;line-height:.82;letter-spacing:-.015em;
  font-size:clamp(2.6rem,9.5vw,8.5rem);text-transform:uppercase;flex:1 1 auto}
.shead__kana{font-family:var(--f-body);font-weight:900;font-size:clamp(.9rem,2.4vw,1.9rem);
  letter-spacing:.24em;opacity:.34;padding-bottom:.7rem;flex:none;writing-mode:horizontal-tb}

/* ───────── split text + reveal ───────── */
.split{display:block}
.split .wd{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block;will-change:transform,opacity}
html.js-on .split .ch{opacity:0;transform:translateY(.85em) rotate(3deg)}
/* the hero letters get a bigger throw than section headlines — they are the entrance */
html.js-on .hero__name .ch{transform:translateY(1.1em) rotate(-5deg) scale(1.35)}
html.js-on .reveal{opacity:0;transform:translateY(28px)}
html.no-motion .split .ch,html.no-motion .reveal,html.js-failed .split .ch,html.js-failed .reveal{opacity:1!important;transform:none!important}

/* ───────── stage loader ───────── */
#stage-load{position:fixed;inset:0;z-index:9500;background:#000;display:grid;place-items:center;overflow:hidden}
.load-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.7) brightness(.62);opacity:.58;transform:scale(1.12)}
.load-veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 62% 52% at 50% 50%,transparent,#000 92%),
  repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)}
.load-core{position:relative;z-index:2;display:grid;justify-items:center;gap:.9rem;padding:2rem;text-align:center;color:#fff;--paper:#000;--ink:#fff}
.load-disc{width:120px;height:auto;animation:hatBob 2.6s ease-in-out infinite}
.load-disc .gl{width:120px;height:auto;color:#fff;filter:drop-shadow(0 0 26px rgba(255,255,255,.25))}
@keyframes hatBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(4deg)}}
.load-kana{font-family:var(--f-body);font-weight:900;font-size:.8rem;letter-spacing:.55em;opacity:.5;margin-left:.55em}
.load-word{font-size:.6rem;letter-spacing:.42em;opacity:.75}
.load-count{font-family:var(--f-mono);font-weight:700;font-size:clamp(3rem,13vw,7rem);line-height:.9;letter-spacing:-.02em}
.load-bar{width:min(46vw,290px);height:1px;background:rgba(255,255,255,.2);overflow:hidden}
.load-bar>i{display:block;height:100%;width:0;background:#fff}
.enter-btn{position:relative;margin-top:1.1rem;padding:1.05rem 2.4rem;border:1px solid rgba(255,255,255,.55);color:#fff;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;overflow:hidden;
  display:grid;gap:.35rem;opacity:0;transform:translateY(14px);transition:opacity .6s var(--e),transform .6s var(--e),color .4s,border-color .4s}
.enter-btn.ready{opacity:1;transform:none}
.enter-btn__kana{font-family:var(--f-body);font-weight:900;font-size:.95rem;letter-spacing:.4em;margin-left:.4em}
.enter-btn::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--e);z-index:-1}
.enter-btn:hover{color:#000;border-color:#fff}
.enter-btn:hover::after{transform:scaleY(1)}
.load-hint{font-size:.54rem;letter-spacing:.24em;opacity:.34}
.load-iris{position:absolute;inset:0;pointer-events:none}
.load-iris>i{position:absolute;left:0;right:0;height:50.2%;background:#000;transition:transform 1.05s var(--e-io) .42s}
.load-iris>i:first-child{top:0}
.load-iris>i:last-child{bottom:0}
#stage-load.out{background:transparent;transition:background 0s .42s}
#stage-load.out .load-core,#stage-load.out .load-film,#stage-load.out .load-veil{opacity:0;transition:opacity .42s ease}
#stage-load.out .load-iris>i:first-child{transform:translateY(-100%)}
#stage-load.out .load-iris>i:last-child{transform:translateY(100%)}
#stage-load.gone{visibility:hidden}
/* ═════════ 00 · HERO ═════════ */
.hero{min-height:100svh;display:grid;place-items:center;padding:clamp(4rem,10vh,7rem) var(--gut)}
.rays{position:absolute;inset:-10%;z-index:1;width:120%;height:120%;opacity:.5;pointer-events:none;mix-blend-mode:overlay}
.rays line{stroke:var(--ink);stroke-width:.09}
.hero__kana{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  font-family:var(--f-body);font-weight:900;font-size:min(46vw,50vh);line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ink) 30%,transparent);white-space:nowrap}
.hero__core{position:relative;z-index:3;display:grid;justify-items:center;gap:clamp(.7rem,2vh,1.5rem);text-align:center}
/* a scrim only under the type: keeps BAKA legible over any frame of the film */
.hero__core::before{content:"";position:absolute;inset:-26% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 66% 60% at 50% 50%,color-mix(in srgb,var(--paper) 88%,transparent),transparent 78%)}
.hero__eyebrow{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.1rem);font-size:clamp(.5rem,1.15vw,.66rem);letter-spacing:.34em;opacity:.75}
.hero__eyebrow i{width:clamp(14px,3vw,40px);height:1px;background:currentColor;opacity:.5}
.hero__name{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;line-height:.78;
  font-size:min(28vw,25vh);letter-spacing:-.03em;
  text-shadow:0 0 calc(var(--beat) * 60px) color-mix(in srgb,var(--ink) 40%,transparent),0 6px 40px rgba(0,0,0,.6)}
.hero__crest{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.6rem);width:min(88vw,620px)}
.hero__crest .hr{flex:1;height:1px;background:currentColor;opacity:.35}
.hero__crest .gl{width:clamp(46px,7vw,80px);height:auto;flex:none;
  transform:scale(calc(1 + var(--beat) * .09));transition:transform .09s linear}
.hero__sub{font-size:clamp(.6rem,1.5vw,.8rem);letter-spacing:.22em;opacity:.85;min-height:1.4em}
.caret{display:inline-block;width:.55em;height:1em;margin-left:.25em;background:currentColor;vertical-align:-.14em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.hero__echo{position:absolute;left:0;right:0;bottom:clamp(4.5rem,13vh,10rem);z-index:2;pointer-events:none;
  display:grid;gap:.1rem;opacity:.14;overflow:hidden}
.echo-row{display:flex;width:max-content;font-family:var(--f-disp);font-size:clamp(2.4rem,7vw,6rem);line-height:.9;
  letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px var(--ink);white-space:nowrap}
.echo-row--a{animation:slideL 26s linear infinite}
.echo-row--b{animation:slideR 34s linear infinite;font-family:var(--f-body);font-weight:900;-webkit-text-stroke-width:1.2px;font-size:clamp(1.9rem,5.5vw,4.6rem)}
.echo-row--c{animation:slideL 42s linear infinite}
@keyframes slideL{to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.hero__edge{position:absolute;z-index:3;font-size:.53rem;letter-spacing:.3em;opacity:.42;white-space:nowrap}
.hero__edge--l{left:clamp(2.6rem,5vw,4.6rem);top:50%;transform:rotate(180deg) translateY(50%);writing-mode:vertical-rl}
.hero__edge--r{right:clamp(2.6rem,5vw,4.6rem);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-family:var(--f-body);font-weight:700;letter-spacing:.4em}
@media(max-width:980px){.hero__edge{display:none}}
.cue{position:absolute;left:50%;bottom:clamp(1.2rem,3vh,2.4rem);z-index:4;transform:translateX(-50%);
  display:grid;justify-items:center;gap:.5rem;font-size:.53rem;letter-spacing:.34em;opacity:.7}
.cue i{width:1px;height:clamp(26px,5vh,46px);background:currentColor;transform-origin:top;animation:cueRun 1.9s var(--e-io) infinite}
@keyframes cueRun{0%{transform:scaleY(0);opacity:0}35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(100%);opacity:0}}
/* ═════════ TICKERS — high repetition ═════════ */
.ticker{position:relative;z-index:5;background:var(--paper);color:var(--ink);padding:clamp(.6rem,1.5vh,1.2rem) 0;
  border-block:1px solid color-mix(in srgb,var(--ink) 20%,transparent);overflow:hidden;display:grid;gap:.15rem}
.ticker__row{overflow:hidden}
.ticker__in{display:flex;width:max-content;font-family:var(--f-disp);font-weight:400;
  font-size:clamp(1.5rem,4.2vw,3.3rem);line-height:1.06;text-transform:uppercase;white-space:nowrap;
  animation:slideL 30s linear infinite}
.ticker__row--rev .ticker__in{animation-name:slideR}
.ticker__in b{opacity:.35;padding:0 .12em;font-weight:400}
.ticker__row--out .ticker__in{color:transparent;-webkit-text-stroke:1px var(--ink)}
.ticker--slim .ticker__in{font-size:clamp(1rem,2.5vw,1.9rem)}

/* ═════════ 01 · CREED ═════════ */
.creed__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,5.5rem);align-items:start}
.creed__line{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.9rem,6vw,5.1rem);line-height:.95;
  text-transform:uppercase;letter-spacing:-.018em;text-indent:0}
.creed__line+.creed__line{margin-top:.12em}
.creed__line:nth-child(2){padding-left:clamp(0px,4vw,4.5rem)}
.creed__line:nth-child(3){padding-left:clamp(0px,8vw,9rem)}
.creed__line em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}
.creed__note{margin-top:clamp(1.8rem,4vh,3rem);font-size:.68rem;letter-spacing:.17em;line-height:2.3;
  /* em, not ch: `ch` ignores letter-spacing, so 34ch here only held 26 characters
     and the two hand-placed breaks ragged into four stubs */
  opacity:.6;text-transform:none;max-width:34em}
.creed__marks{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(1.6rem,4vh,2.8rem);opacity:.45}
.creed__marks .gl{width:clamp(30px,4.6vw,54px);height:auto}

.plate{--ink:#f4f4f2;--paper:#050505;position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--paper);color:var(--ink);display:grid;place-items:center;box-shadow:0 30px 90px -40px rgba(0,0,0,.6)}
.plate__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.6) brightness(.55);opacity:.7}
.plate__tone{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 1px,transparent 1.15px);
  background-size:7px 7px;opacity:.16;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
.plate__fig{position:relative;z-index:2;width:52%;height:auto;
  filter:drop-shadow(0 0 40px rgba(255,255,255,.28));transform:scale(calc(1 + var(--beat) * .05))}
.plate figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1rem 1.1rem;
  font-size:.53rem;letter-spacing:.24em;opacity:.75;border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.plate figcaption span{opacity:.5;font-family:var(--f-body);font-weight:700}
@media(max-width:900px){.creed__grid{grid-template-columns:1fr}.plate{aspect-ratio:4/3;max-height:60vh}}

/* ═════════ FIGURES ═════════ */
.figures{position:relative;z-index:5;background:var(--paper);color:var(--ink);padding:clamp(2.4rem,6vh,4.4rem) var(--gut)}
.figures__row{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2.6rem)}
.fig{display:grid;gap:.55rem;padding-left:clamp(.8rem,2vw,1.8rem);border-left:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.fig:first-child{border-left:0;padding-left:0}
.fig__n{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.7rem,5vw,4rem);line-height:.9;letter-spacing:-.035em}
.fig__l{font-family:var(--f-mono);font-weight:300;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
@media(max-width:720px){.figures__row{grid-template-columns:repeat(2,1fr);row-gap:2rem}.fig:nth-child(3){border-left:0;padding-left:0}}
/* ═════════ 02 · REPETITION MESH ═════════ */
.repeat{min-height:100svh;display:grid;place-items:center}
.repeat__mesh{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(var(--cols,12),1fr);align-content:center}
.repeat__mesh .cell{position:relative;aspect-ratio:1;display:grid;place-items:center;background:transparent;
  border-right:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);transition:background .45s var(--e)}
.repeat__mesh .cell .gl{width:54%;height:auto;opacity:.15;transform:scale(.84) rotate(0deg);
  transition:opacity .55s var(--e),transform .55s var(--e)}
.repeat__mesh .cell.lit .gl{opacity:.92;transform:scale(1.05)}
.repeat .cell:hover{--ink:#050505;--paper:#f4f4f2;background:var(--paper)}
.repeat .cell:hover .gl{opacity:1;transform:scale(1.12)}
.repeat__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 58% 44% at 50% 50%,var(--paper) 24%,color-mix(in srgb,var(--paper) 55%,transparent) 55%,transparent 80%)}
.repeat__over{position:relative;z-index:3;pointer-events:none;text-align:center;display:grid;justify-items:center;
  gap:clamp(.7rem,2vh,1.4rem);padding:0 var(--gut)}
.repeat__over .shead__idx{opacity:.7}
.repeat__word{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;line-height:.82;
  font-size:min(15vw,17vh);letter-spacing:-.03em}
/* 54ch, not 44: the first half of the line is 51ch, and at 44 it wrapped right
   before "a move" — leaving that as a two-word orphan line above the <br> */
.repeat__sub{max-width:54ch;font-size:clamp(.78rem,1.7vw,1rem);line-height:1.85;opacity:.72}
.repeat__strip{position:absolute;left:0;right:0;bottom:0;z-index:4;overflow:hidden;padding:.55rem 0;
  border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:color-mix(in srgb,var(--paper) 80%,transparent)}
.repeat__strip .ticker__in{font-size:clamp(.85rem,2vw,1.4rem);animation-duration:22s;opacity:.55}

/* ═════════ 03 · THREE ACTS ═════════ */
.acts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:color-mix(in srgb,var(--ink) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.act{--ink:#0b0b0b;--paper:#f7f7f5;position:relative;isolation:isolate;overflow:hidden;background:#f7f7f5;color:var(--ink);
  padding:clamp(1.6rem,3.2vw,3rem);display:grid;align-content:start;gap:clamp(.6rem,1.4vh,1rem);min-height:clamp(360px,46vh,520px)}
.act::before{content:"";position:absolute;inset:0;z-index:-1;background:#0b0b0b;transform:translateY(100.5%);transition:transform .6s var(--e)}
.act:hover,.act:focus-visible{--ink:#f7f7f5;--paper:#0b0b0b;outline:0}
.act:hover::before,.act:focus-visible::before{transform:translateY(0)}
.act__n{font-size:.55rem;letter-spacing:.34em;opacity:.5}
.act__fig{width:clamp(58px,8vw,96px);height:auto;margin:clamp(.4rem,1.5vh,1.2rem) 0;opacity:.9;
  transition:transform .6s var(--e)}
.act:hover .act__fig{transform:translateY(-6px) scale(1.08)}
.act__t{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.5rem,3.3vw,2.6rem);line-height:.95;
  text-transform:uppercase;letter-spacing:-.01em;display:grid;gap:.35rem}
.act__t span{font-family:var(--f-body);font-weight:900;font-size:.42em;letter-spacing:.3em;opacity:.4}
.act__q{font-size:.6rem;letter-spacing:.14em;text-transform:none;opacity:.62;font-style:normal}
.act__b{font-size:.86rem;line-height:1.85;opacity:.78;max-width:30ch}
.act__b,.act__q,.act__t,.act__n{transition:opacity .4s}
@media(max-width:900px){.acts__grid{grid-template-columns:1fr}.act{min-height:auto}}
/* ═════════ 04 · THE RECORD ═════════ */
.sound__bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,3rem);
  padding-bottom:1.1rem;margin-bottom:clamp(1.2rem,3vh,2rem);flex-wrap:wrap}
.sound__hint{font-size:.55rem;letter-spacing:.22em;opacity:.55}
.sound__hint b{opacity:.4;padding:0 .5em;font-weight:300}
/* flex:none at a hard min(56vw,540px) overflowed the row, wrapped, and then left
   a 330px hole to the right of the trace. grow into the remainder instead.
   min-width:0 so the canvas can shrink past its own backing-store width. */
.sound__wave{flex:1 1 340px;min-width:0;height:66px;opacity:.9}
@media(max-width:760px){.sound__wave{flex:1 1 100%;height:52px}}

.tracklist{display:grid;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.trk{--ink:#f4f4f2;--paper:#050505;position:relative;isolation:isolate;overflow:hidden;color:var(--ink);
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(.7rem,2.2vw,2.2rem);
  width:100%;text-align:left;padding:clamp(.7rem,1.8vh,1.25rem) clamp(.6rem,1.6vw,1.3rem);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.trk::before{content:"";position:absolute;inset:0;z-index:-1;background:#f4f4f2;transform:translateX(-100.4%);
  transition:transform .5s var(--e)}
.trk:hover,.trk:focus-visible,.trk.playing{--ink:#050505;--paper:#f4f4f2;outline:0}
.trk:hover::before,.trk:focus-visible::before,.trk.playing::before{transform:translateX(0)}
.trk__n{font-family:var(--f-mono);font-weight:500;font-size:.6rem;letter-spacing:.12em;opacity:.45;min-width:2.4em}
.trk__t{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.05rem,3.1vw,2.4rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:-.012em;transition:transform .5s var(--e)}
.trk:hover .trk__t{transform:translateX(clamp(4px,1vw,14px))}
.trk__x{font-family:var(--f-mono);font-weight:300;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;opacity:.42;white-space:nowrap}
.trk__bars{display:flex;align-items:flex-end;gap:2px;height:15px;width:15px;opacity:0;transition:opacity .3s}
.trk.playing .trk__bars{opacity:.9}
.trk__bars i{width:2px;background:currentColor;height:25%;animation:eq .85s ease-in-out infinite alternate}
.trk__bars i:nth-child(2){animation-delay:.18s}
.trk__bars i:nth-child(3){animation-delay:.36s}
.trk__bars i:nth-child(4){animation-delay:.09s}
@keyframes eq{from{height:22%}to{height:100%}}
@media(max-width:640px){.trk{grid-template-columns:auto 1fr auto;gap:.7rem}.trk__x{display:none}}

/* ═════════ 05 · FRAMES ═════════ */
.frames__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.4rem,1vw,.9rem)}
.frame{--ink:#f4f4f2;--paper:#050505;position:relative;overflow:hidden;aspect-ratio:1;background:var(--paper);
  color:var(--ink);cursor:pointer;box-shadow:0 20px 60px -40px rgba(0,0,0,.7)}
.frame--w2{grid-column:span 2;aspect-ratio:2/1}
.frame--h2{grid-row:span 2;aspect-ratio:1/2}
.frame--w2.frame--h2{aspect-ratio:1}
.frame img,.frame__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.28) brightness(.92);transition:transform .9s var(--e),filter .6s}
.frame:hover img,.frame:hover .frame__v{transform:scale(1.07);filter:grayscale(1) contrast(1.45) brightness(1)}
.frame--art{display:grid;place-items:center;background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.15px);
  background-size:8px 8px;background-color:#050505}
.frame__fig{width:46%;height:auto;transition:transform .8s var(--e);filter:drop-shadow(0 0 30px rgba(255,255,255,.2))}
.frame--art:hover .frame__fig{transform:scale(1.12) rotate(-3deg)}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:baseline;gap:.7rem;
  padding:.85rem 1rem;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
  transform:translateY(101%);transition:transform .5s var(--e)}
.frame:hover figcaption,.frame:focus-visible figcaption{transform:none}
.frame figcaption .mono{font-size:.53rem;letter-spacing:.2em;opacity:.55}
.frame__l{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:1100px){.frames__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.frames__grid{grid-template-columns:repeat(2,1fr)}}
/* ═════════ 06 · LINKS ═════════ */
.rows{display:grid;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.link-row{--ink:#f4f4f2;--paper:#050505;position:relative;isolation:isolate;overflow:hidden;color:var(--ink);
  display:grid;grid-template-columns:auto auto auto 1fr auto;align-items:center;gap:clamp(.8rem,2.4vw,2.4rem);
  padding:clamp(.95rem,2.5vh,1.8rem) clamp(.6rem,1.6vw,1.4rem);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.link-row::before{content:"";position:absolute;inset:0;z-index:-1;background:#f4f4f2;transform:translateY(100.4%);
  transition:transform .55s var(--e)}
.link-row:hover,.link-row:focus-visible{--ink:#050505;--paper:#f4f4f2;outline:0}
.link-row:hover::before,.link-row:focus-visible::before{transform:translateY(0)}
.link-row__n{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.2em;opacity:.45}
.link-row__i{width:clamp(19px,2.3vw,27px);height:auto;flex:none;opacity:.85}
.link-row__t{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.5rem,4.8vw,3.9rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.015em;transition:transform .5s var(--e)}
.link-row:hover .link-row__t{transform:translateX(clamp(4px,1.2vw,16px))}
.link-row__h{font-size:.55rem;letter-spacing:.17em;text-transform:none;opacity:.5;justify-self:end;text-align:right}
.link-row__a{font-size:clamp(1.1rem,2.4vw,1.8rem);opacity:.35;transform:translateX(-10px);
  transition:transform .5s var(--e),opacity .4s}
.link-row:hover .link-row__a{opacity:1;transform:none}
@media(max-width:820px){
  .link-row{grid-template-columns:auto auto 1fr auto;row-gap:.35rem}
  .link-row__h{grid-column:2/-1;justify-self:start;text-align:left}
}

/* ═════════ 07 · OUTRO ═════════ */
.outro{min-height:100svh;display:grid;place-items:center;text-align:center;padding:clamp(5rem,13vh,9rem) var(--gut)}
.outro__hat{position:absolute;left:50%;top:clamp(2rem,9vh,6.5rem);z-index:1;transform:translateX(-50%);
  width:clamp(88px,14vw,190px);height:auto;opacity:.12;animation:hatBob 5.5s ease-in-out infinite}
.outro__core{position:relative;z-index:3;display:grid;justify-items:center;gap:clamp(1.3rem,4vh,2.5rem);max-width:56ch}
.outro__kana{font-family:var(--f-body);font-weight:900;font-size:clamp(1rem,2.8vw,1.9rem);letter-spacing:.55em;opacity:.28;margin-left:.55em}
.outro__text{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.05rem,2.7vw,2rem);line-height:1.65;min-height:5em}
.cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:clamp(.8rem,2vw,1.4rem);
  padding:1.1rem clamp(1.6rem,4vw,2.7rem);border:1px solid currentColor;
  font-family:var(--f-mono);font-weight:300;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  transition:color .45s var(--e)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);
  transform-origin:bottom;transition:transform .5s var(--e)}
.cta:hover{color:var(--paper)}
.cta:hover::before{transform:scaleY(1)}
.cta__a{transition:transform .5s var(--e)}
.cta:hover .cta__a{transform:translateX(6px)}
html.js-on .cta{opacity:0;visibility:hidden}
html.js-on .cta.on,html.js-failed .cta{opacity:1;visibility:visible;transition:opacity .8s var(--e)}
.outro__echo{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;padding:.5rem 0;opacity:.15;pointer-events:none}
.outro__echo .ticker__in{font-size:clamp(1rem,2.4vw,1.8rem);animation-duration:36s}

/* ═════════ FOOTER ═════════ */
.foot{--ink:#f4f4f2;--paper:#050505;position:relative;z-index:5;background:var(--paper);color:var(--ink);
  padding:clamp(2.2rem,6vh,3.8rem) var(--gut);border-top:1px solid rgba(255,255,255,.13)}
.foot__in{max-width:var(--maxw);margin:0 auto;display:grid;gap:.9rem;justify-items:center;text-align:center}
.foot__brand{display:flex;align-items:center;gap:.9rem;font-size:.56rem;letter-spacing:.18em;opacity:.62}
.foot__hat{width:32px;height:auto;opacity:.75}
.foot__credit{font-size:.5rem;letter-spacing:.15em;opacity:.34;line-height:2}
.foot__credit a{border-bottom:1px solid currentColor}
.foot__credit b{opacity:.5;padding:0 .3em;font-weight:300}
.foot__egg{font-size:.48rem;letter-spacing:.26em;opacity:0;transition:opacity .7s}
.foot:hover .foot__egg{opacity:.28}
/* ═════════ AUDIO DECK ═════════ */
.deck{--ink:#f4f4f2;--paper:#050505;position:fixed;left:clamp(.6rem,2vw,1.5rem);bottom:clamp(.6rem,2vw,1.5rem);
  z-index:200;width:min(92vw,344px);color:var(--ink);background:rgba(5,5,5,.8);
  -webkit-backdrop-filter:blur(20px) saturate(0);backdrop-filter:blur(20px) saturate(0);
  border:1px solid rgba(255,255,255,.16);overflow:hidden;
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--e),transform .7s var(--e)}
.deck.on{opacity:1;transform:none}
.deck__chrome{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.7rem .75rem}
.deck__toggle{width:23px;height:23px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.26)}
.deck__toggle i{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);transition:transform .45s var(--e)}
.deck[data-collapsed="false"] .deck__toggle i{transform:rotate(135deg) translate(-1px,-1px)}
.deck__meta{min-width:0}
.deck__eyebrow{display:flex;align-items:center;gap:.42rem;font-size:.46rem;letter-spacing:.2em;opacity:.5;margin-bottom:.2rem}
.deck__dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;flex:none}
.deck.is-playing .deck__dot{opacity:1;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.35}}
.deck__kana{font-family:var(--f-body);font-weight:700;letter-spacing:.18em;opacity:.55}
.deck__title{font-family:var(--f-mono);font-weight:500;font-size:.66rem;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck__play{width:37px;height:37px;flex:none;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.deck__play svg{width:16px;height:16px}
.deck__play:hover{background:#f4f4f2;color:#050505;border-color:#f4f4f2}
.i-pause,.i-mute{display:none}
.deck.is-playing .i-play{display:none}.deck.is-playing .i-pause{display:block}
.deck.is-muted .i-vol{display:none}.deck.is-muted .i-mute{display:block}
.deck__body{display:grid;gap:.55rem;padding:0 .75rem;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--e),opacity .35s,padding-bottom .6s var(--e)}
.deck[data-collapsed="false"] .deck__body{max-height:460px;opacity:1;padding-bottom:.8rem}
.deck__wave{width:100%;height:52px;opacity:.85}
.deck__seek,.deck__vol{-webkit-appearance:none;appearance:none;width:100%;height:12px;background:none;cursor:pointer}
.deck__seek:disabled{opacity:.35;cursor:default}
.deck__seek::-webkit-slider-runnable-track,.deck__vol::-webkit-slider-runnable-track{height:1px;background:rgba(255,255,255,.3)}
.deck__seek::-webkit-slider-thumb,.deck__vol::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;
  border-radius:50%;background:#f4f4f2;margin-top:-4px}
.deck__seek::-moz-range-track,.deck__vol::-moz-range-track{height:1px;background:rgba(255,255,255,.3)}
.deck__seek::-moz-range-thumb,.deck__vol::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:#f4f4f2}
.deck__times{display:flex;justify-content:space-between;font-size:.48rem;letter-spacing:.12em;opacity:.42}
.deck__row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.deck__group{display:flex;align-items:center;gap:.15rem}
.deck__vol{width:62px}
.deck__ib{width:28px;height:28px;display:grid;place-items:center;opacity:.55;transition:opacity .25s,background .25s}
.deck__ib svg{width:15px;height:15px}
.deck__ib:hover{opacity:1;background:rgba(255,255,255,.1)}
.deck__ib[aria-pressed="true"],.deck__ib[aria-expanded="true"]{opacity:1;background:rgba(255,255,255,.16)}
.deck__list{max-height:172px;overflow-y:auto;display:grid;border-top:1px solid rgba(255,255,255,.13);padding-top:.4rem;scrollbar-width:thin}
.deck__list button{display:grid;grid-template-columns:auto 1fr;gap:.55rem;text-align:left;padding:.38rem .35rem;
  font-family:var(--f-mono);font-weight:300;font-size:.54rem;letter-spacing:.06em;opacity:.55;transition:opacity .2s,background .2s,color .2s}
.deck__list button:hover{opacity:1;background:rgba(255,255,255,.09)}
.deck__list button.on{opacity:1;background:#f4f4f2;color:#050505}
.deck__list span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){.deck{width:calc(100vw - 1.2rem);left:.6rem;right:.6rem}}
/* ═════════ LIGHTBOX ═════════ */
.lbox{--ink:#f4f4f2;--paper:#050505;position:fixed;inset:0;z-index:9200;color:var(--ink);
  background:rgba(3,3,3,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:clamp(3rem,8vh,5.5rem) clamp(1rem,6vw,5.5rem);opacity:0;transition:opacity .45s var(--e)}
.lbox.on{opacity:1}
.lbox__fig{display:grid;gap:1.1rem;justify-items:center;max-width:100%}
.lbox__stage{display:grid;place-items:center;transform:scale(.94);opacity:0;transition:transform .6s var(--e),opacity .45s}
.lbox.on .lbox__stage{transform:none;opacity:1}
.lbox__stage img,.lbox__stage video{max-width:min(92vw,1080px);max-height:74vh;width:auto;height:auto;
  object-fit:contain;filter:grayscale(1) contrast(1.22)}
.lbox__stage svg{width:min(56vw,380px);height:auto;color:var(--ink)}
.lbox__cap{font-size:.55rem;letter-spacing:.24em;opacity:.6;text-align:center}
.lbox__x{position:absolute;top:clamp(.9rem,2.5vh,1.5rem);right:clamp(1rem,3vw,1.8rem);font-size:.55rem;letter-spacing:.2em;opacity:.65;transition:opacity .25s}
.lbox__x:hover{opacity:1}
.lbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:1.15rem;opacity:.45;transition:opacity .25s}
.lbox__nav:hover{opacity:1}
.lbox__nav--p{left:clamp(.4rem,2vw,1.5rem)}
.lbox__nav--n{right:clamp(.4rem,2vw,1.5rem)}
.lbox__count{position:absolute;bottom:clamp(.9rem,2.5vh,1.5rem);left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.24em;opacity:.42}
body.lb-open,body.locked{overflow:hidden}

/* ═════════ 02 · DARK ROMANCE ═════════ */
.rose{position:relative;overflow:hidden}
.rose__petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.rose .petal{position:absolute;top:-8%;color:var(--ink);opacity:0;
  animation-name:petalFall;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.rose .petal svg{width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.18))}
@keyframes petalFall{
  0%{opacity:0;transform:translate3d(0,-12%,0) rotate(0)}
  12%{opacity:.4}
  88%{opacity:.4}
  100%{opacity:0;transform:translate3d(var(--sway,0px),108vh,0) rotate(300deg)}
}
.rose__grid{position:relative;z-index:3;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.rose__plate{position:relative;display:grid;place-items:center;aspect-ratio:3/4;overflow:hidden;
  background:radial-gradient(ellipse 72% 60% at 50% 42%,color-mix(in srgb,var(--ink) 10%,transparent),transparent 72%);
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.rose__big{position:relative;z-index:2;width:50%;height:auto;transform-origin:50% 92%;
  filter:drop-shadow(0 0 40px rgba(255,255,255,.22));animation:roseSway 7s ease-in-out infinite}
@keyframes roseSway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
.rose__ring{position:absolute;z-index:1;width:min(62%,270px);aspect-ratio:1;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);animation:spin360 26s linear infinite}
.rose__ring::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--ink) 14%,transparent)}
@keyframes spin360{to{transform:rotate(360deg)}}
.rose__plate figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1rem;
  font-size:.53rem;letter-spacing:.24em;opacity:.72;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  background:linear-gradient(to top,color-mix(in srgb,var(--paper) 82%,transparent),transparent)}
.rose__plate figcaption span{opacity:.5;font-family:var(--f-body);font-weight:700}
.rose__verse{font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.26;letter-spacing:.004em}
.rose__verse+.rose__verse{margin-top:clamp(.8rem,2vh,1.4rem)}
.rose__verse em{font-style:normal;font-family:var(--f-disp);font-weight:400;font-size:1.04em;
  letter-spacing:-.01em;text-transform:uppercase;padding:0 .06em}
.rose__note{margin-top:clamp(1.4rem,3.5vh,2.4rem);font-size:.66rem;letter-spacing:.16em;
  line-height:2.3;opacity:.55;text-transform:none;max-width:40em}
.vows{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem);margin-top:clamp(2rem,5vh,3.4rem)}
.vow{position:relative;padding:clamp(1rem,1.6vw,1.5rem) 0;border-top:1px solid color-mix(in srgb,var(--ink) 26%,transparent)}
.vow__n{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.3em;opacity:.5}
.vow__i{width:clamp(32px,4vw,46px);height:auto;margin:.7rem 0;opacity:.9;transition:transform .5s var(--e)}
.vow:hover .vow__i{transform:translateY(-4px) scale(1.08)}
.vow__t{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.02rem,2vw,1.45rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;display:grid;gap:.3rem;margin-bottom:.5rem}
.vow__t span{font-family:var(--f-body);font-weight:900;font-size:.4em;letter-spacing:.22em;opacity:.4}
.vow__b{font-size:.78rem;line-height:1.75;opacity:.68}
.rose__edge{position:absolute;right:clamp(1rem,3vw,2.4rem);top:50%;z-index:4;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:.5rem;letter-spacing:.3em;opacity:.26;white-space:nowrap}
@media(max-width:900px){
  .rose__grid{grid-template-columns:1fr}
  .vows{grid-template-columns:1fr}
  .rose__plate{aspect-ratio:4/3;max-height:52vh}
  .rose__edge{display:none}
}

/* ═════════ 04 · THE LIMIT / F1 ═════════ */
.limit{position:relative;overflow:hidden}
.limit__stripes{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(115deg,transparent 0 46px,color-mix(in srgb,var(--ink) 6%,transparent) 46px 48px)}
.limit__check{position:absolute;right:0;top:0;width:min(42vw,440px);height:72px;z-index:1;pointer-events:none;opacity:.5;
  background-image:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 70%);mask-image:linear-gradient(to right,transparent,#000 70%)}
.limit .wrap{position:relative;z-index:3}
.limit__lead{font-size:clamp(.95rem,2vw,1.3rem);line-height:1.7;max-width:52ch;opacity:.82;margin-bottom:clamp(2rem,5vh,3.2rem)}
.limit__lead em{font-family:var(--f-serif);font-style:italic;opacity:.92}
.limit__lead strong{font-family:var(--f-disp);font-weight:400;letter-spacing:.01em;font-size:1.1em}
.limit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,3rem);align-items:stretch;margin-bottom:clamp(2rem,5vh,3rem)}
.limit__hero{position:relative;display:grid;place-items:center;min-height:clamp(220px,32vh,340px);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  background:radial-gradient(ellipse 80% 70% at 50% 60%,color-mix(in srgb,var(--ink) 8%,transparent),transparent 74%)}
.limit__car{width:76%;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.22));animation:carHover 3.4s ease-in-out infinite}
@keyframes carHover{0%,100%{transform:translateX(-2.5%)}50%{transform:translateX(2.5%)}}
.limit__num{position:absolute;left:clamp(1rem,2vw,1.6rem);top:clamp(.9rem,2vw,1.4rem);z-index:2;display:grid;line-height:.8}
.limit__num .mono{font-size:.5rem;letter-spacing:.3em;opacity:.5}
.limit__num b{font-family:var(--f-disp);font-weight:400;font-size:clamp(2.8rem,8vw,5.6rem)}
.limit__hero figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.85rem 1rem;
  font-size:.5rem;letter-spacing:.24em;opacity:.7;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  background:linear-gradient(to top,color-mix(in srgb,var(--paper) 80%,transparent),transparent)}
.telemetry{display:grid;align-content:center;gap:clamp(.5rem,1.2vh,.9rem);padding:clamp(1.2rem,2.4vw,2rem);
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.telemetry__h{display:flex;align-items:center;gap:.5rem;font-size:.54rem;letter-spacing:.2em;opacity:.6;margin-bottom:.4rem}
.telemetry__h .deck__dot{background:currentColor;animation:pulse 1.4s ease-in-out infinite}
.tele-row{display:grid;grid-template-columns:5.5em 1fr;grid-template-areas:"k v" "bar bar";gap:.25rem .6rem;align-items:baseline}
.tele-k{grid-area:k;font-size:.56rem;letter-spacing:.18em;opacity:.55}
.tele-v{grid-area:v;justify-self:end;font-size:.58rem;letter-spacing:.08em;opacity:.8}
.tele-v b{font-family:var(--f-mono);font-weight:700;font-size:1.5em;letter-spacing:-.01em;opacity:1}
.tele-bar{grid-area:bar;height:3px;margin-top:.1rem;background:color-mix(in srgb,var(--ink) 16%,transparent);overflow:hidden}
.tele-bar u{display:block;height:100%;width:0;background:currentColor;transition:width .12s linear}
.tele-meta{display:flex;justify-content:space-between;gap:.6rem;margin-top:.5rem;padding-top:.7rem;
  font-size:.56rem;letter-spacing:.14em;opacity:.72;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.tele-meta b{font-family:var(--f-disp);font-weight:400;font-size:1.5em;letter-spacing:0;margin-left:.35em}
.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:color-mix(in srgb,var(--ink) 18%,transparent);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.gstat{background:var(--paper);padding:clamp(1rem,2vw,1.8rem);display:grid;gap:.5rem;align-content:center;min-height:clamp(112px,16vh,150px)}
.gstat__n{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:.9;letter-spacing:-.01em}
.gstat__l{font-family:var(--f-mono);font-weight:300;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;line-height:1.55}
.limit__strip{position:absolute;left:0;right:0;bottom:0;z-index:4;overflow:hidden;padding:.5rem 0;
  border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:color-mix(in srgb,var(--paper) 80%,transparent)}
.limit__strip .ticker__in{font-size:clamp(.8rem,1.8vw,1.3rem);animation-duration:20s;opacity:.5}
@media(max-width:900px){
  .limit__grid{grid-template-columns:1fr}
  .grid-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){.limit__strip{display:none}}

/* konami: the whole stage flips. black or white. */
html.inverted{filter:invert(1)}
/* #grain is `overlay`, so it does need counter-inverting here. .cursor must NOT be:
   it is difference-blended, and difference + the html-level invert already cancel to
   correct contrast. Counter-inverting made its ink black, |backdrop-0| = backdrop,
   i.e. the cursor vanished completely whenever konami was active. */
html.inverted #grain,html.inverted #speedlines{filter:invert(1)}
/* a film that failed to load leaves the panel alone */
.film__v.dead,.frame__v.dead,.plate__v.dead{display:none}

/* ═════════ REDUCED MOTION / FALLBACKS ═════════ */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
html.no-motion{scroll-behavior:auto}
html.no-motion .echo-row,html.no-motion .ticker__in{animation:none!important;transform:none!important}
html.no-motion #grain,html.no-motion #speedlines,html.no-motion #scanlines,html.no-motion #beat-flash{display:none}
html.no-motion .caret,html.no-motion .rose__big,html.no-motion .rose__ring,html.no-motion .limit__car,html.no-motion .petal{animation:none!important}

/* ═════════ RESPONSIVE TRIM ═════════ */
@media(max-width:620px){
  :root{--gut:1.1rem}
  .shead{flex-wrap:wrap;gap:.5rem}
  .shead__kana{padding-bottom:0}
  .creed__line:nth-child(2),.creed__line:nth-child(3){padding-left:0}
  .hero__echo{bottom:8.5rem;opacity:.1}
  .repeat__veil{background:radial-gradient(ellipse 92% 42% at 50% 50%,var(--paper) 34%,transparent 88%)}
  .cue{display:none}          /* the deck owns the bottom of the screen down here */
  p br{display:none}          /* hand-placed breaks rag badly this narrow; each is preceded by a space so words stay apart */
}
@media(hover:none){
  .cursor,#spotlight{display:none}
  .frame figcaption{transform:none;background:linear-gradient(to top,rgba(0,0,0,.88),transparent)}
  .act::before{display:none}
}