/* ═══════════════════════════════════════════════════════════════════
   SS.VEGETA'S RAGE — splash
   Art direction: void-black stage, electric-ki blue, chromed display
   type, glass instrumentation panels. Everything layered for depth.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fonts ─────────────────────────────────────────────────────────── */
@font-face{font-family:Anton;src:url(/assets/font/anton-400.woff2)format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;src:url(/assets/font/barlow-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/font/barlow-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/font/barlow-600.woff2)format('woff2');font-weight:600;font-display:swap}

/* ── tokens ────────────────────────────────────────────────────────── */
:root{
  /* surface */
  --void:        oklch(11% 0.035 265);
  --void-deep:   oklch(7%  0.03  265);
  --panel:       oklch(24% 0.06  262 / .34);
  --panel-edge:  oklch(72% 0.14  254 / .26);
  --panel-edge-2:oklch(72% 0.14  254 / .07);

  /* ki */
  --ki:          oklch(66% 0.215 258);
  --ki-hot:      oklch(78% 0.19  247);
  --ki-core:     oklch(93% 0.09  240);
  --ki-violet:   oklch(58% 0.24  292);

  /* type */
  --ink:         oklch(96% 0.012 250);
  --ink-2:       oklch(80% 0.025 252);
  --ink-3:       oklch(62% 0.035 255);
  --ink-4:       oklch(48% 0.04  258);

  /* scale — fluid, viewport-locked so the whole thing holds one screen */
  --t-hero:  clamp(2.9rem, .5rem + 6.9vw, 7.6rem);
  --t-brand: clamp(1.15rem, .62rem + 1.28vw, 1.94rem);
  --t-body:  clamp(.92rem, .82rem + .26vw, 1.09rem);
  --t-micro: clamp(.62rem, .56rem + .17vw, .76rem);
  --t-num:   clamp(1.7rem, .95rem + 1.95vw, 3.05rem);

  --gut:     clamp(1.1rem, .45rem + 2.4vw, 3.6rem);

  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-io:      cubic-bezier(.65,.05,.36,1);
  --dur:    .42s;
  --dur-lg: .9s;

  --edge: 1px solid var(--panel-edge-2);
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--void-deep);
  color:var(--ink-2);
  font:400 var(--t-body)/1.62 Barlow,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
h1,h2,p,ol,li,figure{margin:0;padding:0}
ol{list-style:none}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;padding:.7em 1.1em;background:var(--ki);color:#04070f;border-radius:0 0 .4em 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--ki-hot);outline-offset:3px;border-radius:3px}

/* ═══ STAGE — the living backdrop ═════════════════════════════════════ */
.stage{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(120% 90% at 74% 42%, oklch(20% .09 262 / .55) 0%, transparent 62%),
  radial-gradient(90%  70% at 12% 18%, oklch(16% .07 268 / .40) 0%, transparent 58%),
  var(--void-deep);
}
.fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx--bg  {z-index:1}
.fx--aura{z-index:3;mix-blend-mode:screen;pointer-events:none}
.fx--fore{z-index:6;mix-blend-mode:screen;pointer-events:none}

/* art cluster — each layer parallaxes at its own depth */
.art{position:absolute;inset:0;z-index:2;will-change:transform}
/* Centering lives on the WRAPPERS, which GSAP never touches.
   GSAP reads getComputedStyle().transform — a resolved matrix — and
   bakes it as px. If it parses before the image contributes its height,
   the -50% vertical offset is frozen at ~0 and the art sits low. Keeping
   the offset on an untouched parent removes the race entirely. */
.art__ambientWrap{
  position:absolute;left:50%;top:50%;
  width:min(122vw,1900px);
  transform:translate(-38%,-50%);
  /* screen-blending a rectangular plate leaves a visible box seam —
     feather it to nothing at the edges */
  -webkit-mask-image:radial-gradient(58% 58% at 52% 46%,#000 42%,transparent 100%);
          mask-image:radial-gradient(58% 58% at 52% 46%,#000 42%,transparent 100%);
}
.art__ambient{
  display:block;width:100%;height:auto;
  aspect-ratio:1672/941;
  opacity:.5;
  mix-blend-mode:screen;
  will-change:transform;
}
/* The art is a single plate, used as the operator supplied it.
   Feathering is SPLIT ACROSS TWO ELEMENTS deliberately: one mask-image
   per element, never two layers on one. Multiple mask layers composite
   with `add` (union) by default, and `mask-composite:intersect` did not
   take effect here — the union left the top edge fully opaque, which is
   exactly the hard line this is meant to remove. Two elements, two
   single-layer masks, no compositing to depend on. */
.art__figure{
  position:absolute;
  left:66.5%;top:50.5%;
  transform:translate(-50%,-50%);
  width:clamp(540px,71vw,1340px);
  display:block;
  z-index:2;
  /* horizontal falloff */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 85%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 85%,transparent 100%);
}
.art__plate{
  display:block;width:100%;height:auto;
  aspect-ratio:1672/941;
  filter:drop-shadow(0 0 90px oklch(52% .2 260 / .34));
  will-change:transform;
  /* vertical falloff — generous at the top, where the plate would
     otherwise cut a straight line across the sky */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 68%,transparent 97%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 68%,transparent 97%);
}
.stage__vignette{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  background:
    radial-gradient(75% 62% at 50% 48%, transparent 40%, oklch(6% .02 265 / .72) 100%),
    linear-gradient(to right, var(--void-deep) 0%, oklch(6% .02 265 / .5) 22%, transparent 46%);
}
.stage__scan{
  position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,transparent 0 2px,oklch(70% .1 255 / .1) 2px 3px);
  mix-blend-mode:overlay;
}
.stage__grain{
  position:absolute;inset:-50%;z-index:9;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-4%)} 50%{transform:translate(-3%,4%)}
  66%{transform:translate(4%,3%)}  83%{transform:translate(-4%,2%)}
  100%{transform:translate(0,0)}
}

/* ═══ SHELL ══════════════════════════════════════════════════════════ */
.shell{
  position:relative;z-index:10;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:
    "head  head"
    "lede  power"
    "clock clock"
    "foot  foot";
  gap:clamp(.5rem,1.4vh,1.4rem) var(--gut);
  padding:clamp(1rem,2.4vh,1.9rem) var(--gut) clamp(.9rem,2vh,1.5rem);
}

/* ── masthead ──────────────────────────────────────────────────────── */
.masthead{grid-area:head;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:clamp(.6rem,1vw,1.05rem)}
.brand__crest{
  width:clamp(40px,3.8vw,68px);height:auto;
  filter:drop-shadow(0 0 16px oklch(60% .2 258 / .62)) drop-shadow(0 0 34px oklch(55% .2 260 / .35));
  will-change:transform,filter;
}
.brand__name{
  font:400 var(--t-brand)/1 Anton,Impact,sans-serif;
  letter-spacing:.028em;text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(174deg,#fff 8%,#cfe0ff 44%,#7fa8f5 76%,#dce9ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 10px oklch(60% .18 256 / .38));
}
.brand__jp{
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Barlow,sans-serif;
  font-size:calc(var(--t-brand) * .47);line-height:1.25;
  color:var(--ink-3);letter-spacing:.16em;text-align:center;
}
.brand__tag{
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:.44em;text-transform:uppercase;
  color:var(--ki-hot);
  text-shadow:0 0 18px oklch(66% .21 258 / .58);
}
.est{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
  padding:.62em 1.05em;border-radius:2em;
  background:var(--panel);border:var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 oklch(80% .1 255 / .12);
}
.est svg{width:1.15em;height:1.15em;color:var(--ki-hot);stroke-width:1.5}

/* ── lede ──────────────────────────────────────────────────────────── */
/* no max-width here — the display line must be free to set its own
   measure; the prose below is capped individually instead */
.lede{grid-area:lede;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(.5rem,1.5vh,1.15rem)}
.eyebrow{
  display:flex;align-items:center;gap:.9em;
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:.52em;text-transform:uppercase;color:var(--ink-2);
}
.eyebrow__tick{
  width:clamp(18px,2.6vw,40px);height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--ki-hot));
  box-shadow:0 0 10px var(--ki);
}

/* the chromed hero word */
.title{
  font:400 var(--t-hero)/.86 Anton,Impact,sans-serif;
  text-transform:uppercase;letter-spacing:.004em;
  margin:.04em 0 .1em -.045em;
  position:relative;
  width:max-content;max-width:100%;
  background:linear-gradient(178deg,
      #ffffff 4%, #e8f1ff 20%, #9dbcf5 40%,
      #4f7fd4 52%, #cfe0ff 63%, #ffffff 76%, #86a9e8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 2px oklch(15% .05 262 / .8)) drop-shadow(0 0 42px oklch(62% .2 256 / .45));
  white-space:nowrap;
}
/* specular sheen sweeping across the chrome */
.title::after{
  content:attr(data-word);
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 38%,oklch(99% .04 245 / .92) 50%,transparent 62%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:280% 100%;
  animation:sheen 6.5s var(--ease-io) infinite;
  pointer-events:none;
}
@keyframes sheen{0%,62%{background-position:190% 0}100%{background-position:-90% 0}}

.blurb{color:var(--ink-2);max-width:40ch}

/* ── notify form ───────────────────────────────────────────────────── */
.notify{display:flex;flex-direction:column;gap:.72rem;align-items:flex-start;width:min(100%,25.5rem)}

.btn{
  --btn-glow:oklch(66% .21 258 / .34);
  position:relative;display:inline-flex;align-items:center;gap:.72em;
  padding:.86em 1.5em;border-radius:.62rem;cursor:pointer;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  border:1px solid var(--panel-edge);
  background:var(--panel);color:var(--ink);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color var(--dur) var(--ease-out-expo),
             background var(--dur) var(--ease-out-expo),
             box-shadow var(--dur) var(--ease-out-expo),
             color var(--dur) var(--ease-out-expo);
  will-change:transform;
  overflow:hidden;
}
.btn svg{width:1.25em;height:1.25em;color:var(--ki-hot);transition:color var(--dur)}
/* cursor-tracked bloom */
.btn::before{
  content:'';position:absolute;inset:-40%;
  background:radial-gradient(38% 60% at var(--mx,50%) var(--my,50%),var(--btn-glow),transparent 72%);
  opacity:0;transition:opacity var(--dur) var(--ease-out-expo);pointer-events:none;
}
.btn:hover{border-color:oklch(72% .15 254 / .6);box-shadow:0 8px 34px -14px oklch(60% .2 258 / .8)}
.btn:hover::before{opacity:1}
.btn:active{scale:.985}
.btn[aria-expanded=true]{border-color:oklch(72% .15 254 / .55);color:var(--ki-core)}

.field{
  position:relative;display:flex;align-items:center;width:100%;
  border-radius:.62rem;overflow:hidden;
  border:1px solid var(--panel-edge-2);
  background:oklch(18% .05 262 / .40);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color var(--dur) var(--ease-out-expo),box-shadow var(--dur) var(--ease-out-expo);
}
.field:focus-within{border-color:oklch(72% .16 254 / .68);box-shadow:0 0 0 3px oklch(60% .2 258 / .14),0 10px 40px -18px oklch(60% .2 258 / .9)}
.field__icon{width:1.15em;height:1.15em;flex:none;margin-inline:1em .1em;color:var(--ink-4);stroke-width:1.5;transition:color var(--dur)}
.field:focus-within .field__icon{color:var(--ki-hot)}
.field input{
  flex:1;min-width:0;border:0;background:none;padding:.92em .8em;
  color:var(--ink);letter-spacing:.012em;
}
.field input::placeholder{color:var(--ink-4)}
.field input:focus{outline:none}
.field__go{
  flex:none;display:grid;place-items:center;
  width:3.3em;align-self:stretch;border:0;cursor:pointer;
  background:linear-gradient(158deg,var(--ki-hot),var(--ki) 60%,var(--ki-violet));
  color:#050912;
  transition:filter var(--dur) var(--ease-out-expo);
}
.field__go svg{width:1.15em;height:1.15em;stroke-width:2.1}
.field__go:hover{filter:brightness(1.16) saturate(1.1)}
/* charge bar that fills on submit */
.field__charge{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--ki-hot),var(--ki-core));
  box-shadow:0 0 12px var(--ki-hot);
}
.notify__msg{font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ki-hot);min-height:1.2em;opacity:0}
.notify__msg[data-err]{color:oklch(72% .18 25)}

.mission{
  display:flex;align-items:center;gap:.62em;
  font-size:calc(var(--t-body) * .88);color:var(--ink-3);
}
.mission svg{width:1.25em;height:1.25em;flex:none;color:var(--ki);stroke-width:1.5}

/* ── power panel ───────────────────────────────────────────────────── */
.power{
  grid-area:power;justify-self:end;align-self:end;
  width:min(100%,20.5rem);
  padding:clamp(.85rem,1.5vh,1.3rem) clamp(1rem,1.6vw,1.5rem);
  border-radius:.85rem;border:var(--edge);
  background:linear-gradient(158deg,oklch(26% .07 262 / .40),oklch(16% .05 265 / .30));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 oklch(82% .1 255 / .14),0 24px 60px -34px oklch(4% .02 265);
}
.power__head{
  display:flex;align-items:center;gap:.55em;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
}
.power__head svg{width:1.2em;height:1.2em;color:var(--ki-hot);fill:var(--ki-hot);stroke-width:1.2}
.power__value{
  font:400 var(--t-num)/1.05 Anton,Impact,sans-serif;
  letter-spacing:.012em;margin:.12em 0 .2em;
  color:var(--ki-core);
  text-shadow:0 0 26px oklch(70% .19 252 / .62);
  font-variant-numeric:tabular-nums;
}
.power__plus{color:var(--ki-hot)}
.power__wave,.power__spark{width:100%;display:block}
.power__wave{height:clamp(20px,3.4vh,30px)}
.power__spark{height:clamp(26px,4.4vh,40px);margin-top:.25rem}
.power__foot{
  margin-top:.5em;font-size:calc(var(--t-micro) * .95);font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-4);text-align:center;
}

/* ── countdown ─────────────────────────────────────────────────────── */
/* One "Launching in" label owns the whole strip; each cell is just a
   number and its unit. The old per-cell labels (Launch/Layouts/Archive/
   Community) were site pillars pasted onto time units and read as noise. */
.clock{grid-area:clock}
.clock__panel{
  display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));
  align-items:stretch;
  border-radius:.85rem;border:var(--edge);
  background:linear-gradient(180deg,oklch(24% .06 262 / .34),oklch(14% .04 265 / .26));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 oklch(82% .1 255 / .12),0 24px 60px -38px oklch(4% .02 265);
  overflow:hidden;
}
.clock__head{
  display:flex;align-items:center;gap:.6em;
  padding:clamp(.7rem,1.7vh,1.25rem) clamp(.9rem,1.6vw,1.5rem);
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.35;
  background:oklch(60% .16 258 / .06);
  border-right:1px solid var(--panel-edge-2);
}
.clock__head svg{width:1.5em;height:1.5em;flex:none;color:var(--ki-hot);stroke-width:1.4}
/* two elements, not a <br>: hiding a <br> on small screens fuses the
   words into LAUNCHINGIN, since the text nodes have no whitespace */
.clock__words{display:flex;flex-direction:column}
.clock__grid{display:contents}
.cell{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  padding:clamp(.7rem,1.7vh,1.25rem) .6rem;
  transition:background var(--dur) var(--ease-out-expo);
}
.cell + .cell::before{
  content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,var(--panel-edge-2),transparent);
}
.cell:hover{background:oklch(60% .16 258 / .07)}
.cell__num{
  font:400 var(--t-num)/1.02 Anton,Impact,sans-serif;
  color:var(--ki-hot);font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px oklch(64% .21 258 / .55);
}
.cell__unit{font-size:calc(var(--t-micro) * .95);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}

/* ── footer ────────────────────────────────────────────────────────── */
.foot{grid-area:foot;display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}
.foot__mark{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.4rem);width:100%;max-width:62rem}
.foot__rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--panel-edge-2),transparent)}
.foot__crown{width:1.35em;height:1.35em;flex:none;color:var(--ki-hot);fill:var(--ki-hot);stroke-width:1.1;filter:drop-shadow(0 0 12px var(--ki))}
.foot__words{
  font-size:var(--t-micro);font-weight:500;letter-spacing:.36em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
}
.foot__legal{font-size:calc(var(--t-micro) * .93);line-height:1.62;color:var(--ink-4);max-width:74ch}

/* ── motion toggle ─────────────────────────────────────────────────── */
.motion-toggle{
  position:fixed;right:.75rem;bottom:.75rem;z-index:40;
  display:grid;place-items:center;width:2.3rem;height:2.3rem;
  border-radius:50%;cursor:pointer;
  border:1px solid var(--panel-edge-2);background:oklch(18% .05 262 / .55);
  color:var(--ink-3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:color var(--dur),border-color var(--dur),opacity var(--dur);
  opacity:.42;
}
.motion-toggle:hover{opacity:1;color:var(--ki-hot);border-color:var(--panel-edge)}
.motion-toggle svg{width:1.05rem;height:1.05rem}
html[data-motion=off] .motion-toggle{color:var(--ink-4)}
html[data-motion=off] .motion-toggle svg{opacity:.5}

/* ═══ ENTRANCE — pre-animation state, cleared by JS ═══════════════════ */
html.is-loading [data-rise],
html.is-loading .title{opacity:0}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */

/* short-and-wide: keep everything on one screen */
@media (max-height:660px) and (min-width:900px){
  :root{--t-hero:clamp(2.6rem,.6rem + 5.4vw,5.4rem);--t-num:clamp(1.4rem,.8rem + 1.4vw,2.1rem)}
  .power__spark{display:none}
  .foot__legal{display:none}
}

/* tablet / stacked */
@media (max-width:900px){
  body{overflow:auto}
  .shell{
    height:auto;min-height:100%;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "lede" "power" "clock" "foot";
    gap:clamp(1.2rem,3.4vh,2.2rem);
    padding-block:clamp(1.2rem,3vh,2rem) clamp(1.4rem,3vh,2rem);
  }
  .lede{max-width:none;align-self:auto;padding-top:clamp(9rem,34vh,17rem)}
  .power{justify-self:stretch;width:100%;max-width:none}
  .art__figure{left:43%;top:27%;width:clamp(600px,100vw,940px)}
  .art__ambientWrap{transform:translate(-30%,-62%)}
  .art__ambient{opacity:.42}
  .stage{position:fixed}
  .stage__vignette{background:
    radial-gradient(80% 55% at 62% 22%,transparent 34%,oklch(6% .02 265 / .8) 100%),
    linear-gradient(to bottom,transparent 0%,oklch(6% .02 265 / .82) 46%,var(--void-deep) 76%)}
  .title{white-space:normal}
}

/* phone */
@media (max-width:600px){
  :root{--t-hero:clamp(2.9rem,1.2rem + 11vw,4.6rem)}
  .masthead{flex-direction:column;align-items:flex-start;gap:.9rem}
  .clock__panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clock__head{
    grid-column:1 / -1;justify-content:center;
    border-right:0;border-bottom:1px solid var(--panel-edge-2);
    padding-block:.55rem;
  }
  .clock__words{flex-direction:row;gap:.34em}
  .cell{gap:.15rem}
  .cell:nth-child(3)::before{content:none}
  .cell:nth-child(3),.cell:nth-child(4){border-top:1px solid var(--panel-edge-2)}
  .foot__words{white-space:normal;letter-spacing:.22em}
  .art__figure{left:38%;top:30%;width:clamp(430px,145vw,700px)}
  .lede{padding-top:clamp(7rem,26vh,12rem)}
  .notify{width:100%}
}

@media (max-width:380px){
  .brand__crest{width:42px}
  .est{padding:.5em .8em;letter-spacing:.13em}
}

/* ═══ REDUCED MOTION — static composition must still read ════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .stage__grain{animation:none}
  .title::after{animation:none;opacity:0}
}
html[data-motion=off] .stage__grain{animation:none}
html[data-motion=off] .title::after{animation:none;opacity:0}
html[data-motion=off] .stage__scan{opacity:.08}