/* Pyxl — the midnight hero box, alone on the page. Tokens only. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-midnight-500);color:var(--color-paper-500);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,p,b,ol,li,figure{margin:0;padding:0}
ol{list-style:none}
a{color:var(--color-paper-500);text-decoration:none}
a:hover{color:var(--color-electric-blue-300)}

/* Navy top-left, warm bottom-right — the two off-centre radials of the brand's
   ambient glow, carried a little further so the whole field reads as lit. */
.stage{position:relative;min-height:100svh;overflow:hidden;display:flex}
.glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(74% 62% at 16% 10%,rgba(14,67,227,.40) 0%,rgba(14,67,227,0) 72%),radial-gradient(62% 56% at 88% 78%,rgba(252,115,83,.26) 0%,rgba(252,115,83,0) 70%)}
.col{position:relative;z-index:1;width:100%;max-width:calc(var(--container-max) + 2*clamp(20px,7vw,116px));margin:0 auto;padding:0 clamp(20px,7vw,116px) clamp(36px,4vw,56px);display:flex;flex-direction:column;align-items:center;text-align:center}
.masthead{align-self:flex-start;padding:clamp(26px,4vw,44px) 0 clamp(48px,7vw,92px)}
.masthead img{width:82px}

.h1{max-width:960px;font-family:var(--font-display);font-weight:400;font-size:clamp(38px,6.6vw,68px);line-height:1.0;letter-spacing:-.028em}
.h1 em{display:block;margin-top:4px;font-weight:300;font-style:italic}
.lede{max-width:940px;margin-top:22px;font-family:var(--font-body);font-size:clamp(15.5px,1.4vw,17px);line-height:1.7;color:rgba(251,248,241,.88);text-wrap:pretty}
.bridge{max-width:700px;margin-top:18px;font-family:var(--font-body);font-size:13.5px;line-height:22px;color:rgba(251,248,241,.58);text-wrap:balance}

.weave{width:100%;margin-top:clamp(20px,2.4vw,26px)}
.wv-fig{position:relative;width:100%;aspect-ratio:1240/500}
.wv-fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* A 2/998 dash on a pathLength of 1000 is a single round cap — a comet travelling
   the ribbon, rather than a long white segment cutting into it. */
.wv-run{stroke-dasharray:2 998;stroke-dashoffset:1000;animation:wvrun 9s linear infinite}
.wv-b{animation-delay:-4.5s}
@keyframes wvrun{to{stroke-dashoffset:0}}
/* Four fixed crossings at x = 155 / 465 / 775 / 1085 of a 1240 viewBox. Positions are
   classes, not inline styles, so a strict style-src CSP cannot strip them. */
.wv-lab{position:absolute;width:21%;transform:translateX(-50%);display:flex;flex-direction:column;text-align:center}
.wv-lab--1{left:12.5%;bottom:67.6%}
.wv-lab--2{left:37.5%;top:67.6%}
.wv-lab--3{left:62.5%;bottom:67.6%}
.wv-lab--4{left:87.5%;top:67.6%}
.wv-born{font-family:var(--font-body);font-size:10.5px;line-height:16px;color:rgba(251,248,241,.6)}
.wv-thing{margin:5px 0;font-family:var(--font-display);font-weight:400;font-size:clamp(15px,1.6vw,20px);line-height:1.15;color:var(--color-paper-500)}
.wv-lands{font-family:var(--font-body);font-weight:500;font-size:12px;line-height:18px}
.wv-list{display:none}
.lane-key{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3.4vw,40px);margin-top:var(--space-16)}
.lane-key span{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:10px;line-height:15.5px;letter-spacing:var(--tracking-system);text-transform:uppercase}
.lane-key i{display:block;width:26px;height:1.6px;border-radius:2px;flex:0 0 auto;background:currentColor}
/* The two lane accents. Electric-blue-300 and coral are the midnight-legible pair. */
.lane-b{color:#4A79F5}
.lane-c{color:#FC7353}

/* Roster band: the lead figure holds a tall cell on the left, the four supporting
   figures sit two-by-two beside it. */
.scale{width:100%;margin-top:clamp(26px,3vw,34px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);text-align:left}
.hs-lead,.hs-cell{border-radius:var(--radius-card);background:rgba(251,248,241,.045);border:var(--stroke-hairline) solid rgba(251,248,241,.18)}
.hs-lead{grid-row:span 2;padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;justify-content:center}
.hs-label{font-family:var(--font-body);font-weight:600;font-size:10px;letter-spacing:1.9px;text-transform:uppercase;color:rgba(251,248,241,.5)}
.hs-lead b{margin-top:12px;font-family:var(--font-display);font-weight:400;font-size:clamp(58px,6.6vw,90px);line-height:.92;letter-spacing:-.034em}
.hs-lead p{margin-top:14px;max-width:300px;font-family:var(--font-body);font-size:13.5px;line-height:20px;color:rgba(251,248,241,.72);text-wrap:pretty}
.hs-cell{padding:clamp(18px,1.8vw,24px)}
.hs-cell b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,38px);line-height:1.05;letter-spacing:-.03em}
.hs-cell span{display:block;margin-top:6px;font-family:var(--font-body);font-size:11.5px;line-height:17px;color:rgba(251,248,241,.66)}
.tally{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.rail{width:100%;margin-top:clamp(24px,2.6vw,32px);padding-top:var(--space-16);border-top:var(--stroke-hairline) solid rgba(251,248,241,.2);display:grid;grid-template-columns:200px minmax(0,1fr);gap:6px 30px;text-align:left}
.rail-label{font-family:var(--font-body);font-weight:600;font-size:10px;line-height:15.5px;letter-spacing:var(--tracking-system);text-transform:uppercase;color:rgba(251,248,241,.5);padding-top:3px}
.rail p{max-width:720px;font-family:var(--font-body);font-size:12.5px;line-height:20px;color:rgba(251,248,241,.66);text-wrap:pretty}

.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-16);margin-top:clamp(30px,3.4vw,44px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:48px;padding:0 var(--space-28);border-radius:var(--radius-pill);background:var(--color-paper-500);color:var(--color-midnight-500);font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:var(--tracking-button);text-transform:uppercase;transition:var(--transition-button)}
.btn:hover{background:var(--color-electric-blue-500);color:var(--color-paper-500)}
.btn--ghost{background:transparent;color:var(--color-paper-500);box-shadow:inset 0 0 0 0.625px rgba(251,248,241,.32)}
.btn--ghost:hover{background:rgba(251,248,241,.08);color:var(--color-paper-500)}
.copyright{margin-top:clamp(28px,3.2vw,44px);font-family:var(--font-body);font-size:var(--size-caption);line-height:var(--lh-caption);letter-spacing:.02em;color:rgba(251,248,241,.58)}

/* Between the tablet break and the full frame the label columns need vertical room,
   so the ribbon band gets a taller box rather than a change of layout. */
@media (max-width:1119px) and (min-width:900px){
  .wv-fig{aspect-ratio:1240/640}
  .wv-lab{width:23.5%}
  .wv-born{font-size:10px;line-height:15px}
  .wv-thing{font-size:16px}
  .wv-lands{font-size:11px;line-height:17px}
}
@media (max-width:899px){
  .wv-fig{aspect-ratio:auto;height:clamp(96px,16vw,150px)}
  .wv-lab{display:none}
  .wv-list{display:block;margin-top:18px;text-align:left;border-top:var(--stroke-hairline) solid rgba(251,248,241,.2)}
  .wv-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:15px 0 16px;border-bottom:var(--stroke-hairline) solid rgba(251,248,241,.2)}
  .wv-n{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.6px;line-height:20px}
  .wv-list .wv-born,.wv-list .wv-thing,.wv-list .wv-lands{display:block}
  .wv-list .wv-thing{margin:3px 0 4px;font-size:19px;line-height:23px}
  .scale{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-lead{grid-column:span 2;grid-row:auto}
}
@media (max-width:560px){
  .rail{grid-template-columns:minmax(0,1fr)}
  .rail-label{padding-top:0}
  .scale{grid-template-columns:minmax(0,1fr)}
  .hs-lead{grid-column:auto}
  .btn{width:100%}
}