/* ==========================================================================
   B.O.S.S. Dance Competition 2026 — landing page
   Campaign layout. Colour, type, spacing and shape all come from /tokens.
   Nothing here introduces a new hue: every colour below is a token reference.
   ========================================================================== */

:root{
  /* Local protection ramp. shape.css grants a linear ramp to full-bleed halftone
     imagery; the hero film is halftone on CREAM paper, so the ramp is the Ink
     analogue run left-to-right along the seam instead of bottom-up. */
  --seam-ramp-ink:linear-gradient(to right,
    color-mix(in srgb,var(--ink) 30%,transparent) 0%,
    color-mix(in srgb,var(--ink) 0%,transparent) 18%);
  --seam-ramp-ink-v:linear-gradient(to bottom,
    color-mix(in srgb,var(--ink) 0%,transparent) 74%,
    color-mix(in srgb,var(--ink) 26%,transparent) 100%);

  /* Hero display step. --type-mega (up to 200px) is a full-bleed size; the hero
     headline sits inside a ~620px slab, so it gets its own ceiling. */
  --hero-display:clamp(38px,min(5.6vw,8.4vh),84px);
  --hero-payoff:clamp(25px,min(3.5vw,5.2vh),52px);

  --masthead-h:58px;
}

/* ── page furniture ─────────────────────────────────────────────────────── */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* `overflow-x:hidden` on body makes BODY the scroll container: position:sticky
   on the masthead stops working and content below the fold stops painting.
   `clip` contains the full-bleed art without creating a scroll container. */
html,body{overflow-x:clip}

/* Paper grain over the whole page. Non-interactive. */
.paper-grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:var(--gutter);top:8px;background:var(--ink);color:var(--bone);padding:10px 16px;border:none}

/* Halftone dot field. `color` drives the dot; the mask fades dot COVERAGE,
   which is how a riso screen falls off — not a blur. */
.halftone{
  background-image:radial-gradient(currentColor 1.7px,transparent 1.8px);
  background-size:9px 9px;
}
.halftone--fade{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 72%);
}

/* ── sticker + crown marks ──────────────────────────────────────────────────
   Every mark is a CSS mask over `currentColor`, so one `color` declaration
   recolours it per act — the same contract the source SVGs use with
   fill="currentColor". No sticker is ever an <img> with a baked colour. */
.ic{display:block;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain}
.ic--crown{-webkit-mask-image:url(assets/logo/boss-crown.svg);mask-image:url(assets/logo/boss-crown.svg)}
.ic--lockup{-webkit-mask-image:url(assets/logo/boss-lockup-full.svg);mask-image:url(assets/logo/boss-lockup-full.svg)}
.ic--crown-brush{-webkit-mask-image:url(assets/stickers/crown-brush.svg);mask-image:url(assets/stickers/crown-brush.svg)}
.ic--sparkle{-webkit-mask-image:url(assets/stickers/sparkle.svg);mask-image:url(assets/stickers/sparkle.svg)}
.ic--burst{-webkit-mask-image:url(assets/stickers/impact-burst.svg);mask-image:url(assets/stickers/impact-burst.svg)}
.ic--street{-webkit-mask-image:url(assets/stickers/glyph-street-burst.svg);mask-image:url(assets/stickers/glyph-street-burst.svg)}
.ic--jazz{-webkit-mask-image:url(assets/stickers/glyph-jazz-flow.svg);mask-image:url(assets/stickers/glyph-jazz-flow.svg)}
.ic--kpop{-webkit-mask-image:url(assets/stickers/glyph-kpop-diamond.svg);mask-image:url(assets/stickers/glyph-kpop-diamond.svg)}
.ic--lightning{-webkit-mask-image:url(assets/stickers/lightning.svg);mask-image:url(assets/stickers/lightning.svg)}
.ic--checker{-webkit-mask-image:url(assets/stickers/checkerboard-fragment.svg);mask-image:url(assets/stickers/checkerboard-fragment.svg)}
.ic--arrow{-webkit-mask-image:url(assets/stickers/arrow-scrawl.svg);mask-image:url(assets/stickers/arrow-scrawl.svg)}

/* ── type helpers ───────────────────────────────────────────────────────── */

.kicker{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);
  font-size:var(--type-label);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);
  text-transform:uppercase}
.kicker::before{content:"";width:30px;flex:0 0 auto;border-top:var(--border-heavy) solid currentColor}

.display{font-family:var(--font-display);font-weight:var(--display-weight);
  font-stretch:var(--display-stretch);letter-spacing:var(--display-tracking);
  line-height:var(--display-leading);text-transform:uppercase;margin:0}

html[lang="zh-Hant"] .display{
  font-family:var(--font-display-cjk);line-height:var(--display-leading-cjk);letter-spacing:0}
html[lang="zh-Hant"] .display{text-transform:none}
/* The tagline is English only, in both languages (Ben, 17 Sep 2026). Marking it lang="en"
   keeps the Latin display face in the 中文 view instead of the CJK face. */
html[lang="zh-Hant"] .display[lang="en"],html[lang="zh-Hant"] .display [lang="en"]{
  font-family:var(--font-display);line-height:var(--display-leading);
  letter-spacing:var(--display-tracking);text-transform:uppercase}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap-min);padding:0 26px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;text-align:center;
  border:var(--border-rule) solid var(--ink);border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
/* Magenta carries INK type at every size — Bone on Magenta is 3.07:1. */
.btn--primary{background:var(--accent-cta);color:var(--accent-cta-text);
  box-shadow:var(--shadow-offset-sm);height:58px;font-size:14px}
.btn--primary:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn--primary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);background:var(--cta-press)}

.btn--lg{height:clamp(62px,5vw,76px);font-size:clamp(15px,1.3vw,18px);
  padding:0 clamp(30px,3vw,46px);box-shadow:var(--shadow-offset)}
.btn--lg:hover{box-shadow:8px 8px 0 var(--ink)}
.btn--ghost-dark{background:transparent;color:var(--bone);border-color:var(--bone);height:50px}
.btn--ghost-dark:hover{background:var(--bone);color:var(--ink)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);height:50px}
.btn--ghost:hover{background:var(--ink);color:var(--bone)}

/* Disabled / not-yet-live states. The colour must follow the GROUND the control
   sits on: a Bone alpha is invisible on Bone. The previous version scoped these
   by variant order, so `.btn:not(.btn--primary):disabled` (0,3,0) out-specified
   `.btn--on-light:disabled` (0,2,0) and every light-ground disabled control
   painted itself in --bone-70 — invisible. */
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;box-shadow:none;transform:none;
  background:transparent;border-style:dashed}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:transparent;transform:none;
  box-shadow:none}
/* on Ink */
.btn--ghost-dark:disabled,.btn--ghost-dark[aria-disabled="true"],
.btn--ghost-dark:disabled:hover,.btn--ghost-dark[aria-disabled="true"]:hover{
  color:var(--text-on-dark-secondary);border-color:var(--line-on-dark);background:transparent}
/* on Bone — --ink-70 (6.55:1). Never --ink-55, which fails AA at every size. */
.btn--ghost:disabled,.btn--ghost[aria-disabled="true"],
.btn--on-light:disabled,.btn--on-light[aria-disabled="true"],
.btn--ghost:disabled:hover,.btn--ghost[aria-disabled="true"]:hover,
.btn--on-light:disabled:hover,.btn--on-light[aria-disabled="true"]:hover{
  color:var(--text-secondary);border-color:var(--ink-30);background:transparent}
/* The primary CTA keeps its shape pre-launch: it must read as not-yet-live,
   not disappear. --cta-disabled is the token's flat stand-in for opacity. */
.btn--primary:disabled,.btn--primary:disabled:hover{background:var(--cta-disabled);
  color:var(--ink);border-color:var(--ink);border-style:solid;box-shadow:none;
  transform:none;cursor:not-allowed}

/* base.css gives every <a> a magenta underline + hover fill. Buttons opt out. */
a.btn{border-bottom-style:solid}
a.btn--primary:hover{background:var(--accent-cta);color:var(--accent-cta-text)}
a.btn--ghost:hover{background:var(--ink);color:var(--bone)}
a.btn--ghost-dark:hover{background:var(--bone);color:var(--ink)}

/* ── secondary + utility links ───────────────────────────────────────────────
   The rules must stay easy to find without carrying a button's visual weight.
   These are text links: underline, no fill, no offset shadow, no pill. */
.link-quiet,.link-util{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  border-bottom:var(--border-hair) solid currentColor;padding-bottom:2px;
  min-height:var(--tap-min)}
.link-quiet{color:var(--text-on-dark-secondary)}   /* --bone-70, 8.36:1 on Ink */
.link-quiet:hover{background:transparent;color:var(--bone)}
.link-util{color:var(--text-body)}
.link-util:hover{background:transparent;color:var(--accent-cta)}
.link-quiet::after,.link-util::after{content:"\2192";font-size:13px;line-height:1}
.link-util .ic-wa{width:16px;height:16px;flex:0 0 auto}   /* WhatsApp glyph, in the link's own colour */
.hero__rules{margin:var(--space-4) 0 0}

/* The schedule is a state, not an action, until the running order is published. */
.status-note--closed{color:var(--text-on-dark-secondary);margin:var(--space-4) 0 0}
.status-note{font-family:var(--font-mono);font-size:13px;font-weight:400;
  letter-spacing:.04em;color:var(--text-secondary);margin:var(--space-4) 0 0}

/* ── stickers / stamps / tape ───────────────────────────────────────────── */

.stamp{
  display:inline-block;font-family:var(--font-mono);font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;
  border:var(--border-rule) solid var(--ink);background:var(--accent-cta);
  color:var(--accent-cta-text);white-space:nowrap}

.tape{
  position:absolute;height:34px;background:var(--accent-cta);opacity:.94;
  z-index:6;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%)}

/* ── masthead ───────────────────────────────────────────────────────────── */

.masthead{
  position:sticky;top:0;z-index:40;height:var(--masthead-h);
  background:var(--surface-dark);color:var(--text-on-dark);
  border-bottom:var(--border-heavy) solid var(--ink);
  display:flex;align-items:center}
.masthead .wrap{display:flex;align-items:center;gap:var(--space-4);width:100%}
.masthead__mark{display:flex;align-items:center;gap:10px;color:var(--bone);border-bottom:0}
.masthead__mark:hover{background:transparent;color:var(--bone)}
.masthead__crown{width:30px;height:22px;color:var(--acid-lime);flex:0 0 auto}
.masthead__crown .ic{width:100%;height:100%}
.masthead__name{font-family:var(--font-display);font-weight:900;font-stretch:125%;
  font-size:17px;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.masthead__nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-5)}
.masthead__link{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-on-dark-secondary);border-bottom:0}
.masthead__link:hover{background:transparent;color:var(--acid-lime)}
@media (max-width:880px){.masthead__link{display:none}}

.langtoggle{display:flex;border:var(--border-rule) solid var(--bone);border-radius:var(--radius-pill);
  overflow:hidden;flex:0 0 auto}
.langtoggle button{appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--bone);height:32px;padding:0 13px;line-height:1}
.langtoggle button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}

/* The Rules tab is a link, not a third language state: outlined like the toggle
   but never filled, with an arrow because it leaves the page for a PDF.
   content-box, so the 32px plus its border matches the toggle exactly. */
.masthead__rules{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  box-sizing:content-box;height:32px;padding:0 13px;
  border:var(--border-rule) solid var(--bone);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--bone)}
.masthead__rules:hover,.masthead__rules:focus-visible{background:var(--acid-lime);
  border-color:var(--acid-lime);color:var(--ink)}
/* Phones have to hold the mark, the tab and the toggle on one line, in English
   (the wider label) as well as Chinese. Sized by measurement at 360, 375, 390 and
   412px: tighter padding and a smaller name first; below 390px the arrow goes
   and the name steps down once more, which is what 360px Android phones need. */
@media (max-width:480px){
  .masthead .wrap,.masthead__nav{gap:var(--space-2)}
  .masthead__rules,.langtoggle button{padding:0 8px}
  .masthead__name{font-size:15px}
}
@media (max-width:389px){
  .masthead__rules span[aria-hidden]{display:none}
  .masthead__name{font-size:14px}
}

/* ── SECTION 1 · HERO ───────────────────────────────────────────────────── */

.hero{
  position:relative;z-index:2;
  /* A fixed height + overflow:hidden cropped the CTA pair on a short laptop
     window. The hero aims for 92vh but never crops: it grows to its content. */
  min-height:min(calc(92vh - var(--masthead-h)),920px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);
  /* seam sits at 1 / 2.32 = 43.1% — the marks below key to that number */
  background:var(--surface-dark);overflow:hidden;
  border-bottom:var(--border-block) solid var(--ink)}

/* the film — bleeds off the right, top and bottom edges */
.hero__film{position:relative;grid-column:2;grid-row:1;overflow:hidden;background:var(--bone)}
.hero__film img,.hero__film video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%;display:block}
.hero__film video{opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.hero__film video.is-playing{opacity:1}
.hero__film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--seam-ramp-ink)}

/* the paste-up — bleeds off the left, top and bottom edges */
.hero__slab{
  position:relative;z-index:4;grid-column:1;grid-row:1;
  background:var(--surface-dark);color:var(--text-on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-6) var(--space-6) var(--space-6)
          max(var(--gutter),calc((100vw - var(--max-width)) / 2 + var(--gutter)))}
.hero__slab::after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:6px;
  background:var(--acid-lime);z-index:5}

.hero__kicker{color:var(--acid-lime);margin-bottom:var(--space-3)}
.hero__title{font-size:var(--hero-display);margin:0}
.hero__title span{display:block}
/* An empty display line (中文 has one line where English has two) must not
   leave a gap the height of a mega cap. */
.hero__title span:empty,.styles__title span:empty,.closer__title span:empty{display:none}
.hero__eyebrow{font-family:var(--font-mono);font-size:var(--type-label);font-weight:500;
  letter-spacing:var(--label-tracking);text-transform:uppercase;line-height:1.6;
  font-stretch:normal;color:var(--text-on-dark-secondary);margin-bottom:var(--space-2);
  max-width:none}
.hero__payoff{font-size:var(--hero-payoff);color:var(--acid-lime);margin:0 0 var(--space-4)}
.hero__sub{font-size:var(--type-body);line-height:var(--body-leading);
  color:var(--text-on-dark-secondary);max-width:38ch;margin:0 0 var(--space-4)}

.facts{list-style:none;margin:0 0 var(--space-5);padding:0;
  border-top:var(--border-hair) solid var(--line-on-dark)}
.facts li{display:flex;gap:var(--space-4);align-items:baseline;padding:7px 0;
  border-bottom:var(--border-hair) solid var(--line-on-dark)}
.facts .k{flex:0 0 76px;font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-on-dark-tertiary)}
.facts .v{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--text-on-dark);
  letter-spacing:.02em}

.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero__cta .btn{flex:1 1 auto;min-width:206px}

/* pre-launch countdown — a lime rule, not a boxed control, and four units that
   hold one row at 390px */
.countdown{border-left:var(--border-heavy) solid var(--acid-lime);
  padding-left:var(--space-4);margin-bottom:var(--space-4)}
.countdown__heading{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-4);margin:0;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-on-dark-secondary)}
.countdown__date{color:var(--text-on-dark-tertiary);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.countdown__units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-2);margin:13px 0 10px}
.countdown__u{display:block;min-width:0}
.countdown__n{display:block;font-family:var(--font-mono);font-weight:700;
  font-size:clamp(30px,3.1vw,42px);line-height:1.1;letter-spacing:-.04em;
  color:var(--acid-lime);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.countdown__t{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-on-dark-tertiary);margin-top:3px}
.countdown__opening{font-size:var(--type-small);line-height:1.5;
  color:var(--text-on-dark-secondary);margin:0}
/* Capitals in English (Ben, 16 Sep). Chinese has no case, so the 中文 line is
   left as set. */
html[lang="en"] .countdown__opening{text-transform:uppercase;letter-spacing:.04em}

.hero .tape{width:210px;top:12%;left:calc(43.1% - 66px);transform:rotate(-7deg)}
.hero__crown{position:absolute;top:7%;left:calc(43.1% - 124px);width:92px;height:67px;
  color:var(--acid-lime);transform:rotate(-9deg);z-index:7}
.hero__crown .ic{width:100%;height:100%}
/* The Register tag sits on the Ink slab, not on the film: Magenta on Ink
   is 5.35:1 at any frame, whereas the film's own magenta would swallow it. */
.hero__cap{align-self:flex-start;margin-top:var(--space-3);margin-bottom:var(--space-1);
  transform:rotate(-2.5deg);box-shadow:var(--shadow-offset-sm)}
/* As a link the tag would inherit the global a:hover, Bone on Magenta (3.07:1).
   Its hover keeps Ink type on the press tone instead: 4.66:1, measured. */
a.stamp:hover,a.stamp:focus-visible{background:var(--cta-press);color:var(--accent-cta-text);
  box-shadow:5px 5px 0 var(--ink)}
.hero__burst{position:absolute;left:calc(43.1% + 46px);bottom:13%;width:58px;height:58px;
  color:var(--hot-magenta);transform:rotate(12deg);z-index:7}
.hero__burst .ic{width:100%;height:100%}

/* Mobile is a recomposition, not a squeeze. The film moves on top, the type goes
   POSTER-scale (width, not height, is the constraint here), and the CTA pair is
   re-ordered above the facts ledger so both buttons clear the fold on a phone —
   content/landing-page.md requires that. */
@media (max-width:1000px){
  :root{--hero-display:clamp(40px,13.4vw,64px);--hero-payoff:clamp(24px,8.2vw,42px)}
  .hero{grid-template-columns:1fr;height:auto;max-height:none;min-height:0}
  .hero__film{grid-column:1;grid-row:1;height:min(30vh,280px);min-height:180px}
  .hero__film::after{background:var(--seam-ramp-ink-v)}
  .hero__slab{grid-column:1;grid-row:2;padding:var(--space-5) var(--gutter) var(--space-6)}
  .hero__slab::after{top:-6px;bottom:auto;right:0;left:0;height:6px;width:auto}
  .hero__sub{margin-bottom:var(--space-4);max-width:none}
  /* Facts before the ask: date, time and venue now read before the CTA, which
     is simply the DOM order - the previous flex `order` overrides are gone. */
  .facts{margin:0 0 var(--space-4)}
  .facts li{padding:6px 0}
  .hero__cap{margin-top:var(--space-4);transform:rotate(-1.5deg);width:max-content}
  .hero__rules{margin-top:var(--space-3)}
  .countdown{padding-left:var(--space-3)}
  .countdown__n{font-size:clamp(28px,8.4vw,38px)}
  .countdown__t{font-size:10px;letter-spacing:.06em}
  .countdown__heading{font-size:11px;letter-spacing:.1em}
  .stamp{font-size:14px;padding:10px 16px}
  .hero .tape{width:148px;top:calc(min(30vh,280px) - 20px);left:auto;right:8%;transform:rotate(-7deg)}
  .hero__crown{top:calc(min(30vh,280px) - 46px);left:auto;right:calc(8% + 136px);width:64px;height:47px}
  .hero__burst{display:none}
  .hero__cta .btn{min-width:0;flex:1 1 100%}
}

@media (min-width:1001px) and (max-height:780px){
  .hero__slab{padding-top:var(--space-5);padding-bottom:var(--space-5)}
  .hero__sub{margin-bottom:var(--space-3)}
  .facts{margin-bottom:var(--space-4)}
  .facts li{padding:5px 0}
  .countdown{padding:9px 14px;margin-bottom:var(--space-2)}
  .countdown__n{font-size:20px}
  .btn--primary{height:52px}
  .btn--ghost-dark,.btn--ghost{height:46px}
  .hero__cap{margin-top:var(--space-2)}
}

/* On very wide screens the slab's left padding (which keeps its type aligned to
   the 1360px content grid) squeezes the column until "OWN THE" wraps. Give the
   slab a larger share back rather than shrinking the type. */
@media (min-width:1500px){
  .hero{grid-template-columns:minmax(0,1.5fr) minmax(0,1.35fr)}
  .hero .tape{left:calc(52.6% - 66px)}
  .hero__crown{left:calc(52.6% - 124px)}
  .hero__burst{left:calc(52.6% + 46px)}
}

/* ── ticker (hero → styles transition) ──────────────────────────────────── */

.ticker{position:relative;z-index:2;background:var(--accent-fill);color:var(--ink);
  border-bottom:var(--border-block) solid var(--ink);overflow:hidden;padding:12px 0}
.ticker__track{display:flex;width:max-content;animation:ticker 52s linear infinite}
.ticker__group{display:flex;flex:0 0 auto;align-items:center}
.ticker__group span{font-family:var(--font-mono);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:0 var(--space-4);white-space:nowrap}
/* A plain printed rule between items. Ink at 2px, the same weight as every
   other keyline in the system. */
.ticker__rule{width:var(--border-rule);height:19px;flex:0 0 auto;
  background:var(--ink);opacity:.55}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ── SECTION 2 · THREE STYLES ───────────────────────────────────────────── */

/* padding-bottom is not decoration: the chips are pulled up over the artwork and
   rotated, so they overhang the flow box, and overflow:hidden (needed to clip the
   halftone fields) was shaving their bottom edge and offset shadow off. */
.styles{position:relative;z-index:2;background:var(--surface-page);
  padding-top:clamp(36px,4vw,70px);padding-bottom:clamp(26px,2.8vw,46px);
  overflow:hidden}
.styles__fields{position:absolute;inset:0;z-index:0;pointer-events:none}
.styles__fields i{position:absolute;width:46vw;height:46vw;max-width:660px;max-height:660px;
  display:block}
/* The trio artwork is opaque, so fields behind it are invisible. They live in
   the heading band instead, clipped by the section's top edge. */
.styles__fields i:nth-child(1){color:var(--acid-lime);left:-9vw;top:-17vw;
  width:42vw;height:42vw;opacity:.55}
.styles__fields i:nth-child(2){color:var(--volt-violet);left:37%;top:-25vw;
  width:38vw;height:38vw;opacity:.4}
.styles__fields i:nth-child(3){color:var(--hot-magenta);right:-8vw;top:-15vw;
  width:40vw;height:40vw;opacity:.45}

.styles__head{position:relative;z-index:2}
.styles__title{font-size:clamp(46px,9.2vw,150px)}
.styles__title span{display:block;white-space:nowrap}
.styles__title span:last-child{margin-left:min(15vw,190px)}
@media (max-width:820px){
  .styles__head{grid-template-columns:1fr;gap:var(--space-4)}
  .styles__title span:last-child{margin-left:12vw}
}

.trio{position:relative;z-index:1;margin-top:clamp(-72px,-4.4vw,-16px)}
.trio__art{display:block;width:100%;height:auto}
/* The chips sit under the trio on every breakpoint now, at a size that reads
   from across the room rather than as a caption. */
.trio__chips{position:relative;z-index:3;display:flex;gap:var(--space-3);flex-wrap:wrap;
  transform:rotate(-2deg);margin:calc(-2.6vw - 12px) 0 0 3%;width:max-content;max-width:94%}
.chip{display:inline-flex;align-items:center;gap:11px;
  height:clamp(46px,4vw,58px);padding:0 clamp(20px,2vw,28px);
  border:var(--border-heavy) solid var(--ink);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:clamp(14px,1.25vw,18px);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:var(--shadow-offset)}
.chip .ic{width:clamp(15px,1.3vw,19px);height:clamp(15px,1.3vw,19px);flex:0 0 auto}
.chip--street{background:var(--cat-street);color:var(--cat-street-on)}
.chip--jazz{background:var(--cat-jazz);color:var(--cat-jazz-on)}
.chip--kpop{background:var(--cat-kpop);color:var(--cat-kpop-on)}

/* The campaign artwork is the trio at EVERY width — there is no alternate
   mobile composition and therefore no breakpoint where the two swap. */
@media (max-width:820px){
  .trio__chips{gap:8px;margin:calc(-2vw - 8px) 0 0 4%;max-width:92%}
  .chip{height:44px;padding:0 15px;font-size:13px;letter-spacing:.08em;gap:8px;
    border-width:var(--border-rule);box-shadow:var(--shadow-offset-sm)}
  .chip .ic{width:14px;height:14px}
}

/* ── SECTION 3 · sections ───────────────────────────────────────────────── */

/* Compression targets the quiet information areas. The hero and the trio
   section keep their scale - they are the campaign. */
.section{position:relative;z-index:2;padding-block:clamp(30px,2.9vw,50px)}
.section--raised{background:var(--surface-raised);
  border-block:var(--border-heavy) solid var(--ink)}
.section--dark{background:var(--surface-dark);color:var(--text-on-dark)}

/* One step down from --type-d2: these head the quiet information areas, and
   the display scale belongs to the hero, the trio and the closer. */
.h-sec{font-size:clamp(34px,4.4vw,64px);margin:0 0 var(--space-2)}
.h-lab{font-family:var(--font-mono);font-size:var(--type-label);font-weight:500;
  letter-spacing:var(--label-tracking);text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 var(--space-3)}
.section--dark .h-lab{color:var(--text-on-dark-tertiary)}

.spread{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,84px);align-items:start}
@media (max-width:900px){.spread{grid-template-columns:1fr;gap:var(--space-8)}}

.ledger{list-style:none;margin:var(--space-4) 0 0;padding:0;
  border-top:var(--border-rule) solid var(--ink)}
.ledger li{display:flex;align-items:baseline;gap:var(--space-4);padding:10px 0;
  border-bottom:var(--border-hair) solid var(--line-hairline)}
.ledger__n{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(20px,2.3vw,30px);letter-spacing:-.01em;flex:0 0 auto;min-width:100px}
.ledger__t{flex:1 1 auto;min-width:0}
.ledger__t b{display:block;font-family:var(--font-display);font-weight:900;font-stretch:125%;
  font-size:17px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15}
.ledger__t small{display:block;font-size:var(--type-caption);color:var(--text-secondary);
  margin-top:3px}
.ledger__fee{font-family:var(--font-display);font-weight:900;font-stretch:125%;
  font-size:clamp(26px,3.4vw,46px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;flex:0 0 auto;text-align:right;white-space:nowrap}
.foot-note{font-size:var(--type-caption);line-height:1.7;color:var(--text-secondary);
  margin:var(--space-3) 0 0;max-width:54ch}

/* ── early bird band ────────────────────────────────────────────────────── */

.earlybird{position:relative;z-index:2;background:var(--accent-fill);color:var(--ink);
  border-block:var(--border-block) solid var(--ink);padding-block:clamp(26px,3.2vw,46px);
  overflow:hidden}
.earlybird .wrap{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;position:relative;z-index:2}
.earlybird__big{font-family:var(--font-display);font-weight:900;font-stretch:125%;
  font-size:clamp(58px,9.2vw,142px);line-height:.82;letter-spacing:-.03em;
  text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.earlybird__body{max-width:46ch}
.earlybird__lab{font-family:var(--font-mono);font-size:var(--type-label);font-weight:700;
  letter-spacing:var(--label-tracking);text-transform:uppercase;margin:0 0 var(--space-2)}
.earlybird__txt{font-size:var(--type-lead);line-height:var(--lead-leading);font-weight:500;
  margin:0 0 var(--space-3)}
.earlybird__win{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;display:inline-block;background:var(--ink);color:var(--bone);
  padding:8px 13px}
.earlybird__dots{position:absolute;inset:0;color:var(--ink);opacity:.15;z-index:1}
@media (max-width:820px){
  .earlybird .wrap{grid-template-columns:1fr;gap:var(--space-4)}
  .earlybird__big{font-size:clamp(52px,17vw,96px)}
}

/* ── how to enter, staircase ────────────────────────────────────────────── */

.steps{position:relative;margin-top:var(--space-6)}
.steps__list{list-style:none;display:grid;grid-template-columns:1.05fr 1.2fr 1.2fr 1fr;
  gap:clamp(18px,2.6vw,40px);margin:0;padding:0;position:relative;z-index:1}
.step:nth-child(2){padding-top:22px}
.step:nth-child(3){padding-top:44px}
.step:nth-child(4){padding-top:66px}
.step__n{display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border:var(--border-heavy) solid var(--ink);
  border-radius:var(--radius-circle);background:var(--surface-raised);
  font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:23px;
  letter-spacing:-.02em;margin-bottom:var(--space-4)}
.step--pay .step__n{background:var(--accent-cta);color:var(--accent-cta-text);
  box-shadow:var(--shadow-offset-sm)}
.step p{font-size:var(--type-body);line-height:1.55;color:var(--text-body);margin:0;
  max-width:30ch}
/* Step 2 is the one that must not be missed: the form asks for the payment
   reference, so paying comes before filling it in. */
.step--pay p{font-weight:500}
@media (max-width:900px){
  .steps__list{grid-template-columns:1fr;gap:var(--space-6)}
  .step,.step:nth-child(2),.step:nth-child(3),.step:nth-child(4){padding-top:0}
  .step{display:grid;grid-template-columns:64px 1fr;gap:var(--space-4);align-items:start}
  .step__n{margin-bottom:0}
}

/* Register button on its own row below step 04, clear of the steps. Wide on desktop, full
   width on phones. Empty once registration closes, so it takes no space. */
.how__cta{margin-top:var(--space-7)}
.how__cta .btn{min-width:min(100%,380px)}
.how__cta:empty{display:none}
@media (max-width:900px){
  /* Stacked steps are 32px apart; the button sits further off so it reads as its own row. */
  .how__cta{margin-top:var(--space-8)}
  .how__cta .btn{width:100%}
}

/* ── awards, dark ───────────────────────────────────────────────────────── */

.awards{position:relative;overflow:hidden}
.awards__crown{position:absolute;right:-4vw;top:-2vw;width:min(38vw,430px);
  aspect-ratio:208/152;color:var(--accent-award);opacity:.18;z-index:0;
  transform:rotate(-8deg)}
.awards__crown .ic{width:100%;height:100%}
.awards .wrap{position:relative;z-index:2}
.awards__bands{font-family:var(--font-display);font-weight:900;font-stretch:125%;
  font-size:clamp(24px,3.1vw,44px);line-height:1.06;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--accent-award);margin:var(--space-4) 0 var(--space-3);
  max-width:26ch}
.awards__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);margin-top:var(--space-5);align-items:start}
@media (max-width:900px){.awards__grid{grid-template-columns:1fr;gap:var(--space-7)}}
/* `.awards p` (0,1,1) was beating `.awards__bands` (0,1,0) and rendering the
   five score bands at caption size. Scope the body rule to the grid. */
.awards__grid p{font-size:var(--type-small);line-height:1.65;
  color:var(--text-on-dark-secondary);max-width:58ch;margin:0 0 var(--space-3)}
.specials{list-style:none;margin:var(--space-3) 0 0;padding:0;
  border-top:var(--border-hair) solid var(--line-on-dark)}
.specials li{display:flex;align-items:center;gap:var(--space-3);padding:8px 0;
  border-bottom:var(--border-hair) solid var(--line-on-dark);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.05em;
  color:var(--text-on-dark);line-height:1.5}
.specials .ic{width:14px;height:14px;color:var(--accent-award);flex:0 0 auto}

/* ── key dates ──────────────────────────────────────────────────────────────
   Two columns, hairline rows, and the two dates that actually bind marked in
   Volt Violet. Violet is a ground token elsewhere; as type it is only ever used
   HERE, on Bone, where it measures 5.96:1. It is never put on Ink (2.76:1). */
.dates{list-style:none;margin:var(--space-5) 0 0;padding:0;
  border-top:var(--border-rule) solid var(--ink)}
.dates li{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:var(--space-4);align-items:baseline;padding:12px 0;
  border-bottom:var(--border-hair) solid var(--line-hairline)}
.dates .d{font-family:var(--font-mono);font-size:15px;font-weight:500;letter-spacing:.04em;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.dates .w{font-size:var(--type-body);line-height:1.5}
.dates .m{display:none}
.dates li.is-key .d{color:var(--volt-violet);font-weight:700}
.dates li.is-key .w{font-weight:700}
html[lang="zh-Hant"] .dates li{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
@media (max-width:640px){
  .dates li{grid-template-columns:minmax(0,116px) minmax(0,1fr);gap:var(--space-3)}
  .dates .d{font-size:13px}
  .dates .w{font-size:var(--type-small)}
  html[lang="zh-Hant"] .dates li{grid-template-columns:minmax(0,130px) minmax(0,1fr)}
}

/* ── rules / audience / questions ───────────────────────────────────────── */

.support{display:grid;grid-template-columns:1.35fr 1fr 1fr;
  border-top:var(--border-rule) solid var(--ink);margin-top:var(--space-6)}
.support > div{padding:var(--space-5) var(--space-6) var(--space-4) 0}
.support > div + div{border-left:var(--border-hair) solid var(--line-hairline);
  padding-left:var(--space-6)}
.support h3{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:20px;
  text-transform:uppercase;letter-spacing:-.01em;margin:0 0 var(--space-3)}
.support p{font-size:var(--type-small);line-height:1.65;color:var(--text-secondary);
  margin:0 0 var(--space-3)}
@media (max-width:900px){
  .support{grid-template-columns:1fr}
  .support > div{padding:var(--space-5) 0}
  .support > div + div{border-left:0;border-top:var(--border-hair) solid var(--line-hairline);
    padding-left:0}
}

/* ── FINAL CTA · closing frame ──────────────────────────────────────────────
   Volt Violet ground, stacked: lockup, four-line headline, then the trio wide
   across the bottom on a halftone band. Bone is 5.96:1 on Violet and Lime is
   5.12:1, but every Bone ALPHA fails here (--bone-70 is 3.64:1), so nothing in
   this section may use the on-dark secondary tokens. */
.closer{position:relative;z-index:2;background:var(--accent-ground);color:var(--bone);
  border-top:var(--border-block) solid var(--ink);overflow:hidden;
  padding-top:clamp(38px,4.2vw,70px)}
.closer .wrap{position:relative;z-index:3}
.closer .link-quiet,.closer [class*="on-dark"]{color:var(--bone)}

/* The dot floor the dancers stand on, full width, behind them. */
.closer::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(110px,17vw,260px);pointer-events:none;
  background-image:radial-gradient(var(--ink) 1.2px,transparent 1.7px);
  background-size:7px 7px;opacity:.3}

.closer__lockup{display:block;width:clamp(160px,19vw,240px);aspect-ratio:925/730;
  color:var(--bone);margin-bottom:clamp(26px,3.4vw,52px)}
.closer__lockup .ic{width:100%;height:100%}

.closer__title{font-size:clamp(54px,12vw,124px);margin:0}
.closer__title span{display:block}
.closer__title span:nth-child(3),.closer__title span:nth-child(4){color:var(--acid-lime)}

.closer__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin-top:clamp(22px,2.6vw,40px);align-items:center}
.closer__cta:empty{display:none}

/* Top-aligned and taller than their frame, so heads are always whole and the
   feet are what the bottom edge cuts. */
/* Sized by WIDTH so all three always fit side by side, then the frame is set a
   little shorter than they are — the bottom edge takes the feet, never a head.
   Sizing by height instead made three 805x987 figures ~700px wide on a 390px
   phone, so only fragments showed. */
/* Sized by WIDTH so all three always fit side by side, then the frame is set a
   little shorter than they are — the bottom edge takes the feet, never a head.
   They start BELOW the type block: no figure ever sits under a headline or a
   button. */
.closer__figs{position:relative;z-index:2;display:flex;justify-content:center;
  align-items:flex-start;overflow:hidden;
  margin-top:clamp(18px,2.4vw,40px);
  height:min(46vw,560px)}
.closer__figs img{width:min(40%,486px);height:auto;flex:none;margin:0 -3%;display:block}
.closer__figs img:nth-child(1){transform:rotate(-4deg)}
.closer__figs img:nth-child(2){width:min(44%,534px);z-index:2}
.closer__figs img:nth-child(3){transform:rotate(4deg)}

@media (max-width:820px){
  .closer__cta .btn{flex:1 1 100%}
  /* Three figures cannot grow much on a 390px phone without losing an arm off
     each edge — hold them a little narrower here than on desktop. */
  .closer__figs img{width:37%}
  .closer__figs img:nth-child(2){width:40%}
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.footer{position:relative;z-index:2;background:var(--surface-dark);color:var(--text-on-dark);
  padding-block:var(--space-6)}
.footer .wrap{display:grid;gap:var(--space-5)}
.footer__ig{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.1em;
  color:var(--acid-lime);border-bottom:0;justify-self:start}          /* 14.13:1 on Ink */
.footer__ig:hover{background:transparent;color:var(--bone)}
/* One grid cell for the follow line and the handle, so the footer stays two columns wide. */
.footer__social{display:grid;gap:var(--space-2);justify-items:start}
.footer__follow{margin:0;font-family:var(--font-body);font-size:var(--type-lead);font-weight:700;
  line-height:1.25;color:var(--acid-lime)}                            /* 14.13:1 on Ink */
.footer__meta{display:grid;gap:9px;margin:0;font-size:var(--type-caption);line-height:1.6;
  color:var(--text-on-dark-secondary)}
.footer__meta a{color:var(--text-on-dark-secondary);max-width:66ch;
  border-bottom-color:var(--bone-40);justify-self:start}
.footer__meta a:hover{background:var(--hot-magenta);color:var(--ink)}
@media (min-width:1001px){
  .footer .wrap{grid-template-columns:auto minmax(0,1fr);align-items:center;
    gap:var(--space-8)}
  .footer__meta{text-align:right;justify-items:end}
  .footer__meta a{justify-self:end}
}

/* ── unresolved-token annotation ────────────────────────────────────────── */

.token{font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:1;
  background:var(--error);color:var(--bone);width:16px;height:16px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;border-bottom:0;
  border-radius:var(--radius-circle)}
/* A control whose href is still a {{TOKEN}} must never look wired up. */
.btn[data-unwired]{border-style:dashed;border-color:var(--error-on-dark)}
.btn--ghost[data-unwired],.btn--on-light[data-unwired]{border-color:var(--error)}
.tokenbar{position:fixed;left:var(--space-4);bottom:var(--space-4);z-index:60;
  max-width:min(430px,92vw);background:var(--ink);color:var(--bone);
  border:var(--border-rule) solid var(--error);padding:12px 30px 12px 14px;
  font-family:var(--font-mono);font-size:11px;line-height:1.8}
.tokenbar b{display:block;color:var(--error-on-dark);letter-spacing:.14em;text-transform:uppercase;
  font-size:10px;margin-bottom:6px}
.tokenbar ul{margin:0;padding-left:16px}
.tokenbar button{position:absolute;top:5px;right:7px;background:transparent;border:0;
  color:var(--text-on-dark-secondary);cursor:pointer;font-family:var(--font-mono);
  font-size:15px;line-height:1;padding:4px}

/* ── restrained motion ──────────────────────────────────────────────────── */

/* Without JS these never get `is-in`, so the opacity:0 start state is scoped to
   html.js — a no-JS visitor gets the whole page, just without the reveal. */
.js .rise{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-camera)}
.js .rise.is-in{opacity:1;transform:none}
.js .pop{opacity:0;transform:scale(.86) rotate(-7deg);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-snap)}
.js .pop.is-in{opacity:1;transform:none}
.hero__crown.pop.is-in{transform:rotate(-9deg)}
.hero__cap.pop.is-in{transform:rotate(-2.5deg)}
.trio__chips.pop.is-in{transform:rotate(-2deg)}
@media (max-width:1000px){.hero__cap.pop.is-in{transform:rotate(-1.5deg)}}
/* Must out-specify `.js .rise` (0,2,0) or the opacity:0 start state survives
   here and reduced-motion visitors wait on JS to see the page. */
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .pop{opacity:1;transform:none;transition:none}
  .js .hero__crown.pop{transform:rotate(-9deg)}
  .js .hero__cap.pop{transform:rotate(-2.5deg)}
  .js .trio__chips.pop{transform:rotate(-2deg)}
}

@media print{.masthead,.ticker,.tokenbar,.hero__film{display:none}}

/* .stamp sets display:inline-block, which beats the browser's own [hidden] rule
   and would leave a removed Register tag on screen. */
[hidden]{display:none!important}