/* Chông Gai 2026 - one subject --u (1 design px of the 1440×900 artboard; phone column 464.29 × 1005) */
:root {
  --vw: 100vw;
  --u: min(calc(var(--vw) / 1440), calc(100vh / 900), 1.4px);
  --u: min(calc(var(--vw) / 1440), calc(100svh / 900), 1.4px);   /* svh: the height without the phone's toolbars, so it never jumps */
  --frame: calc(1440 * var(--u));
  --art-h: calc(900 * var(--u));
  --gx: max(0px, calc((var(--vw) - var(--frame)) / 2));
  --pad: calc(var(--gx) + 57.5 * var(--u));
  --top: calc(24 * var(--u));

  --coal: #0b0706;
  --coal-2: #160d0a;
  --ash: #f3ece6;
  --dim: rgba(243, 236, 230, .62);
  --line: rgba(243, 236, 230, .16);
  --fire: #e2261c;
  --ember: #ff7a2f;
  --rain: #0c151b;

  --t-xs: calc(11 * var(--u));
  --t-sm: calc(13 * var(--u));
  --t-md: calc(16 * var(--u));
  --t-lg: calc(21 * var(--u));
  --s-2: calc(6 * var(--u));
  --s-3: calc(10 * var(--u));
  --s-4: calc(14 * var(--u));
  --s-5: calc(20 * var(--u));
  --s-6: calc(28 * var(--u));
  --s-8: calc(48 * var(--u));
  --s-10: calc(80 * var(--u));
  --s-12: calc(128 * var(--u));
  --ctl: calc(42 * var(--u));

  /* display scale by role: the same token on every breakpoint, only its value changes */
  --d-mega: calc(560 * var(--u));
  --d-hero: calc(332 * var(--u));
  --d-close: calc(300 * var(--u));
  --d-scene: calc(250 * var(--u));
  --d-section: calc(180 * var(--u));
  --d-title: calc(150 * var(--u));
  --d-sub: calc(92 * var(--u));
  --d-h2: calc(64 * var(--u));
  --d-item: calc(46 * var(--u));
  --d-label: calc(24 * var(--u));
  /* line height: solo = one line, never wraps (white-space: nowrap); stack = may wrap, room for Vietnamese marks */
  --lh-solo: .86;
  --lh-stack: 1.08;
}
@media (max-width: 1151px) {
  :root {
    /* the whole 464.29 × 1005 column fits the screen: on a short phone it scales down instead of losing its top */
    --u: min(calc(var(--vw) / 464.29), calc(100vh / 1005), 1.4px);
    --u: min(calc(var(--vw) / 464.29), calc(100svh / 1005), 1.4px);
    --frame: calc(464.29 * var(--u));
    --art-h: calc(1005 * var(--u));
    --pad: calc(var(--gx) + 23.75 * var(--u));
    --top: calc(16 * var(--u));
    --t-xs: calc(12 * var(--u));
    --t-sm: calc(14 * var(--u));
    --t-md: calc(17 * var(--u));
    --t-lg: calc(20 * var(--u));
    --ctl: calc(48 * var(--u));
    --d-mega: calc(250 * var(--u));
    --d-hero: calc(150 * var(--u));
    --d-close: calc(108 * var(--u));
    --d-scene: calc(96 * var(--u));
    --d-section: calc(96 * var(--u));
    --d-title: calc(76 * var(--u));
    --d-sub: calc(40 * var(--u));
    --d-h2: calc(40 * var(--u));
    --d-item: calc(30 * var(--u));
    --d-label: calc(20 * var(--u));
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--coal); color: var(--ash); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-weight: 400; font-size: var(--t-md); line-height: 1.5; background: var(--coal); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.is-loading, body.menu-open { overflow: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.lbl { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.dsp { font-family: 'Anton', 'Be Vietnam Pro', sans-serif; font-weight: 400; text-transform: uppercase; line-height: var(--lh-solo); letter-spacing: .005em; white-space: nowrap; }

/* ---------- crowd + opener ---------- */
#crowd { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
body.is-loading #crowd { z-index: 46; }
#opener { position: fixed; inset: 0; z-index: 45; background: var(--coal); display: grid; place-content: center; justify-items: center; gap: var(--s-4); }
.op-count { font-family: 'Anton', sans-serif; font-size: var(--d-section); line-height: var(--lh-solo); font-variant-numeric: tabular-nums; color: var(--ash); }
.op-label { font-size: var(--t-sm); color: var(--dim); letter-spacing: .04em; }

/* ---------- bar ---------- */
.bar { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--top) var(--pad); pointer-events: none; }
.bar > * { pointer-events: auto; }
.mark { display: flex; align-items: baseline; gap: var(--s-2); justify-self: start; }
.mark b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: var(--d-label); letter-spacing: .02em; }
.mark span { font-size: var(--t-xs); font-weight: 600; color: var(--fire); }
.hud { display: flex; align-items: baseline; gap: var(--s-3); opacity: 0; transition: opacity .4s; pointer-events: none; }
.hud.on { opacity: 1; }
.hud-n { font-family: 'Anton', sans-serif; font-size: var(--d-label); line-height: 1; display: inline-flex; }
.hud-n i { font-style: normal; color: var(--dim); }
.hud-t { font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em; }
.menu-btn { justify-self: end; display: flex; align-items: center; gap: var(--s-3); height: var(--ctl); padding: 0 calc(6 * var(--u)) 0 calc(18 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--fire); color: var(--ash); font-size: var(--t-sm); font-weight: 600; }
.mb-i { position: relative; display: grid; gap: calc(4 * var(--u)); place-content: center; width: calc(var(--ctl) - 12 * var(--u)); height: calc(var(--ctl) - 12 * var(--u)); background: var(--coal); border-radius: calc(3 * var(--u)); }
.mb-i i { display: block; width: calc(14 * var(--u)); height: 2px; background: var(--ash); transition: transform .35s, opacity .2s; }
body.menu-open .mb-i i:nth-child(1) { transform: translateY(calc(2px + 4 * var(--u))) rotate(45deg); }
body.menu-open .mb-i i:nth-child(2) { opacity: 0; }
body.menu-open .mb-i i:nth-child(3) { transform: translateY(calc(-2px - 4 * var(--u))) rotate(-45deg); }

/* ---------- sheet: the nine chapters as a running order ---------- */
.sheet { position: fixed; inset: 0; z-index: 29; background: var(--coal); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s .7s; }
body.menu-open .sheet { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.sh-in { position: absolute; left: var(--gx); top: 50%; width: var(--frame); height: var(--art-h); transform: translateY(-50%); display: grid; grid-template-columns: 1fr calc(420 * var(--u)); gap: var(--s-8); padding: calc(110 * var(--u)) calc(57.5 * var(--u)) calc(60 * var(--u)); }
.sh-list { list-style: none; align-self: center; }
.sh-list li { border-top: 1px solid var(--line); }
.sh-list li:last-child { border-bottom: 1px solid var(--line); }
.sh-list a { display: grid; grid-template-columns: calc(70 * var(--u)) 1fr auto; align-items: baseline; gap: var(--s-4); padding: calc(7 * var(--u)) 0; transition: color .25s, padding .35s cubic-bezier(.2, .8, .2, 1); }
.sh-list a .n { font-size: var(--t-xs); font-weight: 600; color: var(--fire); }
.sh-list a .nm { font-family: 'Anton', sans-serif; font-size: var(--d-item); line-height: var(--lh-stack); text-transform: uppercase; }
.sh-list a .sg { font-size: var(--t-sm); color: var(--dim); }
.sh-list a:hover, .sh-list a.on { color: var(--fire); padding-left: calc(16 * var(--u)); }
.sh-side { display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); }
.sh-peek { aspect-ratio: 1600 / 684; background: var(--coal-2); overflow: hidden; }
.sh-peek img { width: 100%; height: 100%; object-fit: cover; }
.sh-more { display: flex; gap: var(--s-6); font-weight: 600; }
.sh-more a { border-bottom: 1px solid var(--fire); padding-bottom: 2px; }

/* ---------- shared stage pieces ---------- */
.art { position: absolute; left: var(--gx); top: 50%; width: var(--frame); height: var(--art-h); transform: translateY(-50%); }
.media { position: absolute; inset: 0; overflow: hidden; background: var(--coal-2); }
.media video, .media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shade-b { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 7, 6, .92) 0, rgba(11, 7, 6, .55) 30%, transparent 55%); pointer-events: none; z-index: 1; }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-view { position: relative; height: 100svh; overflow: hidden; }
.hero-media { position: absolute; inset: 0; background: var(--coal); }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .dim { position: absolute; inset: 0; background: #000; opacity: var(--dim, .3); }
.hero-media .tint { position: absolute; inset: 0; background: var(--fire); mix-blend-mode: multiply; opacity: var(--tint, .85); }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 7, 6, .5) 0, transparent 30%, transparent 55%, rgba(11, 7, 6, .85) 100%); }
.hero .kick { position: absolute; left: calc(57.5 * var(--u)); top: calc(110 * var(--u)); font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hero .title { position: absolute; left: calc(57.5 * var(--u)); right: calc(57.5 * var(--u)); top: calc(150 * var(--u)); font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; line-height: var(--lh-solo); }
.hero .title span { display: block; white-space: nowrap; }
.hero .t-a { font-size: var(--d-sub); }
.hero .t-b { font-size: var(--d-hero); letter-spacing: -.005em; margin-top: calc(118 * var(--u)); }
.hero .lede { position: absolute; right: calc(57.5 * var(--u)); top: calc(150 * var(--u)); width: calc(330 * var(--u)); font-size: var(--t-md); font-weight: 300; line-height: 1.45; }
.hero .hint { position: absolute; left: calc(57.5 * var(--u)); bottom: calc(40 * var(--u)); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* ---------- chapters ---------- */
.ch { position: relative; }
.sc { position: relative; height: 100svh; overflow: hidden; background: var(--coal); }
.info { position: absolute; z-index: 3; }
.info .no { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fire); margin-bottom: var(--s-3); }
.info h2 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--d-h2); line-height: var(--lh-stack); margin-bottom: var(--s-4); }
.songs { list-style: none; counter-reset: s; }
.songs li { counter-increment: s; display: grid; grid-template-columns: calc(26 * var(--u)) 1fr; padding: calc(6 * var(--u)) 0; border-top: 1px solid var(--line); line-height: 1.3; }
.songs li::before { content: counter(s, decimal-leading-zero); font-size: var(--t-xs); color: var(--dim); padding-top: calc(3 * var(--u)); }
.songs b { font-weight: 600; }
.songs span { grid-column: 2; font-size: var(--t-sm); color: var(--dim); }
.info .src { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--dim); }
.info.bl { left: calc(57.5 * var(--u)); bottom: calc(56 * var(--u)); width: calc(440 * var(--u)); }
.info.br { right: calc(57.5 * var(--u)); bottom: calc(56 * var(--u)); width: calc(400 * var(--u)); }

/* 01 Đồng tâm - an iris opens from the centre, rings spread out from it */
.s-iris .media { clip-path: circle(0% at 50% 50%); }
.s-iris .rings { position: absolute; left: 50%; top: 50%; width: calc(1600 * var(--u)); height: calc(1600 * var(--u)); margin: calc(-800 * var(--u)) 0 0 calc(-800 * var(--u)); pointer-events: none; z-index: 1; }
.s-iris .rings circle { fill: none; stroke: var(--fire); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.s-iris .ring-text { position: absolute; left: 50%; top: 50%; width: calc(600 * var(--u)); height: calc(600 * var(--u)); margin: calc(-300 * var(--u)) 0 0 calc(-300 * var(--u)); pointer-events: none; z-index: 2; overflow: visible; }
.s-iris .ring-text text { fill: var(--ash); font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .32em; text-transform: uppercase; }
.s-iris .big { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: var(--d-scene); z-index: 2; pointer-events: none; }

/* 02 Hợp lực - two halves of the stage close in from both sides and lock */
.s-join .seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--fire); z-index: 2; transform: scaleY(0); box-shadow: 0 0 calc(30 * var(--u)) var(--fire); }
.s-join .big { position: absolute; top: calc(330 * var(--u)); font-size: var(--d-scene); z-index: 2; pointer-events: none; white-space: nowrap; }
.s-join .big.a { right: 50%; padding-right: calc(16 * var(--u)); }
.s-join .big.b { left: 50%; padding-left: calc(16 * var(--u)); }

/* 03 Trí tưởng tượng khổng lồ - the name fills the screen and the stage grows out of it */
.s-giant .media { clip-path: inset(47% 47% 47% 47%); }
.s-giant .big { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: var(--d-section); line-height: var(--lh-stack); z-index: 2; pointer-events: none; }
.s-giant .big span { display: block; white-space: nowrap; }

/* 04 Nhỏ xíu - the stage shrinks to a small frame on the dark, measured like a model */
.s-tiny .media { transform-origin: 50% 50%; }
.s-tiny .dims { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 2; }
.s-tiny .dims i { position: absolute; background: var(--fire); }
.s-tiny .dims .h { left: 0; right: 0; top: calc(-18 * var(--u)); height: 1px; }
.s-tiny .dims .v { top: 0; bottom: 0; right: calc(-18 * var(--u)); width: 1px; }
.s-tiny .dims .h::before, .s-tiny .dims .h::after, .s-tiny .dims .v::before, .s-tiny .dims .v::after { content: ''; position: absolute; background: var(--fire); }
.s-tiny .dims .h::before, .s-tiny .dims .h::after { top: -3px; width: 1px; height: 7px; }
.s-tiny .dims .h::before { left: 0; } .s-tiny .dims .h::after { right: 0; }
.s-tiny .dims .v::before, .s-tiny .dims .v::after { left: -3px; width: 7px; height: 1px; }
.s-tiny .dims .v::before { top: 0; } .s-tiny .dims .v::after { bottom: 0; }
.s-tiny .dims b { position: absolute; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; color: var(--fire); white-space: nowrap; }
.s-tiny .dims .bw { left: 50%; top: calc(-36 * var(--u)); transform: translateX(-50%); }
.s-tiny .dims .bh { left: calc(100% + 26 * var(--u)); top: 50%; transform: translateY(-50%); }
.s-tiny .info { left: 50%; top: calc(590 * var(--u)); width: calc(300 * var(--u)); margin-left: calc(-150 * var(--u)); }
.s-tiny .info h2 { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; text-transform: none; font-size: var(--t-md); margin-bottom: var(--s-3); }
.s-tiny .info .songs li { padding: calc(3 * var(--u)) 0; font-size: var(--t-sm); }
.s-tiny .big { position: absolute; left: calc(57.5 * var(--u)); top: calc(130 * var(--u)); font-size: var(--d-scene); z-index: 2; pointer-events: none; }

/* 05 Cội nguồn - bamboo blinds turn open on the stage */
.s-blind .slats { position: absolute; inset: 0; display: flex; perspective: calc(1600 * var(--u)); z-index: 1; pointer-events: none; }
.s-blind .slats i { flex: 1; background: linear-gradient(90deg, #1d120d 0, #2b1a12 45%, #140b08 100%); border-right: 1px solid rgba(0, 0, 0, .5); }
.s-blind .slats i::after { content: ''; display: block; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 calc(38 * var(--u)), rgba(255, 122, 47, .12) calc(38 * var(--u)) calc(40 * var(--u))); }
.s-blind .big { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: var(--d-scene); z-index: 2; pointer-events: none; color: var(--ember); }

/* 06 Mời buồn sang chơi - the colour drains, rain falls, the type goes soft */
.s-rain .wash { position: absolute; inset: 0; background: var(--rain); opacity: 0; }
.s-rain .frame { position: absolute; right: calc(57.5 * var(--u)); top: calc(120 * var(--u)); width: calc(780 * var(--u)); height: calc(333 * var(--u)); overflow: hidden; z-index: 1; }
.s-rain .frame video { width: 100%; height: 100%; object-fit: cover; }   /* the cold grade is baked into the clip */
.s-rain canvas.rainfall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.s-rain .soft { position: absolute; left: calc(57.5 * var(--u)); top: calc(110 * var(--u)); width: calc(500 * var(--u)); font-family: 'Be Vietnam Pro', sans-serif; font-weight: 300; font-style: italic; font-size: var(--d-sub); line-height: var(--lh-stack); letter-spacing: -.02em; z-index: 3; }
.s-rain .soft .w { display: inline-block; }
.s-rain .info { left: calc(57.5 * var(--u)); right: calc(57.5 * var(--u)); top: calc(500 * var(--u)); }
.s-rain .info h2 { display: none; }
.s-rain .info .songs { columns: 2; column-gap: calc(80 * var(--u)); }
.s-rain .info .songs li { break-inside: avoid; }

/* 07 Hit - a split-flap board: tiles flip away off the stage, the songs roll in */
.s-hit .tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(6, 1fr); perspective: calc(1400 * var(--u)); z-index: 1; pointer-events: none; }
.s-hit .tiles i { background: #120a07; border: 1px solid rgba(243, 236, 230, .06); transform-origin: 50% 0; backface-visibility: hidden; }
.s-hit .big { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: var(--d-mega); line-height: var(--lh-solo); color: var(--fire); z-index: 2; pointer-events: none; }
.s-hit .board { list-style: none; position: absolute; right: calc(57.5 * var(--u)); bottom: calc(56 * var(--u)); z-index: 3; display: grid; gap: calc(4 * var(--u)); }
.s-hit .board { --tw: calc(40 * var(--u)); --th: calc(56 * var(--u)); gap: calc(5 * var(--u)); }
.s-hit .board li { display: flex; gap: calc(2 * var(--u)); }
.s-hit .board b { position: relative; display: grid; place-items: center; width: var(--tw); height: var(--th); background: #241712; border-top: 1px solid rgba(255, 255, 255, .06); font-family: 'Anton', sans-serif; font-weight: 400; font-size: calc(var(--th) * .57); text-transform: uppercase; border-radius: calc(2 * var(--u)); box-shadow: inset 0 calc(var(--th) / 2) 0 rgba(255, 255, 255, .035); }
.s-hit .board b:not(.sp)::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .7); }   /* the flap's hinge */
.s-hit .board b.sp { background: transparent; box-shadow: none; width: calc(var(--tw) * .4); }
.s-hit .info .songs { display: none; }

/* 08 Gai Nước - the audience answers the stage: touch the water */
.s-water { background: radial-gradient(ellipse at 50% 115%, #4a0f09 0, #1a0907 45%, var(--coal) 75%); cursor: crosshair; }
.s-water canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-water .big { position: absolute; left: 0; right: 0; top: calc(290 * var(--u)); text-align: center; font-size: var(--d-title); z-index: 2; pointer-events: none; }
.s-water .sub { position: absolute; left: 0; right: 0; top: calc(460 * var(--u)); text-align: center; font-size: var(--t-md); font-weight: 300; color: var(--dim); z-index: 2; pointer-events: none; }
.s-water .info h2, .s-water .info .songs { display: none; }

/* 09 Mỹ mãn - full colour, the name rises with the crowd */
.s-final .big { position: absolute; left: 0; right: 0; top: calc(120 * var(--u)); text-align: center; font-size: var(--d-close); line-height: var(--lh-solo); z-index: 2; pointer-events: none; }
.s-final .big span { display: inline-block; }
.s-final .media { background: #000; }
.s-final .info.br { bottom: calc(170 * var(--u)); }
.s-final .info h2 { display: none; }

/* ---------- roster: a roll call that lights name by name ---------- */
.roster { position: relative; z-index: 7; background: var(--coal); padding: var(--s-12) var(--pad); }
.ro-head { display: grid; grid-template-columns: 1fr calc(380 * var(--u)); align-items: end; column-gap: var(--s-8); margin-bottom: var(--s-10); }
.ro-head .lbl { grid-column: 1 / -1; color: var(--fire); margin-bottom: var(--s-4); }
.ro-head h2 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--d-section); line-height: var(--lh-solo); white-space: nowrap; }
.ro-note { color: var(--dim); }
.names { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: var(--d-h2); line-height: 1.24; }
.names .nm { white-space: nowrap; color: rgba(243, 236, 230, .14); transition: color .35s; }
.names .nm.lit { color: var(--ash); }
.names .nm.lead.lit { color: var(--fire); }
.names .sep { display: inline-block; width: calc(26 * var(--u)); height: calc(4 * var(--u)); margin: 0 calc(16 * var(--u)); vertical-align: .32em; background: rgba(243, 236, 230, .14); transform: skewX(-30deg); }
.names sup { font-family: 'Be Vietnam Pro', sans-serif; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; vertical-align: 3.2em; margin-left: calc(6 * var(--u)); color: var(--ash); }

/* ---------- next: the ticket ---------- */
.next { position: relative; z-index: 7; background: var(--coal); padding: var(--s-10) var(--pad) var(--s-12); }
.ticket { position: relative; display: grid; grid-template-columns: 1fr calc(300 * var(--u)); background: var(--fire); color: var(--coal); border-radius: calc(10 * var(--u)); transform: rotate(-2deg); }
.ticket::before, .ticket::after { content: ''; position: absolute; right: calc(286 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: var(--coal); }
.ticket::before { top: calc(-14 * var(--u)); } .ticket::after { bottom: calc(-14 * var(--u)); }
.tk-main { padding: calc(48 * var(--u)) calc(56 * var(--u)); }
.tk-main h2 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--d-title); line-height: var(--lh-stack); margin: var(--s-4) 0 var(--s-5); }
.tk-main h2 .nw { white-space: nowrap; }
.tk-note { max-width: calc(560 * var(--u)); font-size: var(--t-md); }
.tk-stub { padding: calc(48 * var(--u)) calc(40 * var(--u)); border-left: 2px dashed rgba(11, 7, 6, .45); display: grid; align-content: center; gap: var(--s-2); }
.tk-q { font-family: 'Anton', sans-serif; font-size: var(--d-item); margin-bottom: var(--s-5); }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 7; background: var(--coal); overflow: hidden; }
.foot-word { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: var(--d-close); line-height: var(--lh-solo); text-align: center; color: var(--fire); padding-top: var(--s-8); white-space: nowrap; }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--pad); color: var(--dim); font-size: var(--t-sm); border-top: 1px solid var(--line); }
.foot-row p { max-width: calc(680 * var(--u)); }
.foot-row a { font-weight: 600; color: var(--ash); flex: none; }

/* ---------- phone column ---------- */
@media (max-width: 1151px) {
  .bar { grid-template-columns: 1fr auto; }
  .hud { display: none; }
  .mb-t { display: none; }
  .menu-btn { padding: 0 calc(6 * var(--u)); }

  .sh-in { grid-template-columns: 1fr; padding: calc(90 * var(--u)) calc(23.75 * var(--u)) calc(40 * var(--u)); align-content: center; }
  .sh-list a { grid-template-columns: calc(40 * var(--u)) 1fr; }
  .sh-list a .sg, .sh-peek { display: none; }

  .hero .kick { left: calc(23.75 * var(--u)); top: calc(100 * var(--u)); }
  .hero .title { left: calc(23.75 * var(--u)); right: calc(23.75 * var(--u)); top: calc(140 * var(--u)); }
  .hero .title span { white-space: normal; }
  .hero .t-b { line-height: var(--lh-stack); margin-top: calc(20 * var(--u)); }
  .hero .lede { left: calc(23.75 * var(--u)); right: auto; top: calc(545 * var(--u)); width: calc(330 * var(--u)); }
  .hero .hint { left: calc(23.75 * var(--u)); bottom: auto; top: calc(690 * var(--u)); }

  .info.bl, .info.br { left: calc(23.75 * var(--u)); right: calc(23.75 * var(--u)); width: auto; top: auto; bottom: calc(100 * var(--u)); }
  .songs li { padding: calc(4 * var(--u)) 0; }
  .shade-b { background: linear-gradient(0deg, rgba(11, 7, 6, .95) 0, rgba(11, 7, 6, .8) 45%, transparent 75%); }

  .s-iris .big { top: 34%; }
  .s-iris .ring-text { width: calc(380 * var(--u)); height: calc(380 * var(--u)); margin: calc(-190 * var(--u)) 0 0 calc(-190 * var(--u)); top: 34%; }
  .s-iris .rings { top: 34%; }
  .s-join .big { top: calc(240 * var(--u)); }
  .s-giant .big { top: 36%; }
  .s-tiny .big { left: calc(23.75 * var(--u)); top: calc(100 * var(--u)); }
  .s-tiny .info { left: calc(23.75 * var(--u)); right: calc(23.75 * var(--u)); width: auto; margin-left: 0; top: calc(680 * var(--u)); }
  .s-blind .big { top: 36%; }
  .s-rain .frame { left: calc(23.75 * var(--u)); right: calc(23.75 * var(--u)); width: auto; top: calc(300 * var(--u)); height: calc(178 * var(--u)); }
  .s-rain .soft { left: calc(23.75 * var(--u)); top: calc(90 * var(--u)); width: calc(416 * var(--u)); }
  .s-rain .info { left: calc(23.75 * var(--u)); right: calc(23.75 * var(--u)); top: calc(510 * var(--u)); }
  .s-rain .info .songs { column-gap: var(--s-5); }
  .s-rain .info .songs li { font-size: var(--t-sm); grid-template-columns: calc(22 * var(--u)) 1fr; }
  .s-hit .tiles { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(10, 1fr); }
  .s-hit .big { top: 36%; }
  .s-hit .board { left: calc(23.75 * var(--u)); right: auto; bottom: calc(100 * var(--u)); }
  .s-hit .board { --tw: calc(21 * var(--u)); --th: calc(30 * var(--u)); gap: calc(4 * var(--u)); }
  .s-hit .info { bottom: calc(220 * var(--u)); }
  .s-water .big { top: calc(290 * var(--u)); }
  .s-water .sub { top: calc(380 * var(--u)); padding: 0 calc(40 * var(--u)); }
  .s-final .big { top: calc(190 * var(--u)); }
  .s-final .info.br { top: calc(330 * var(--u)); bottom: auto; }

  .roster { padding: var(--s-10) var(--pad); }
  .ro-head { grid-template-columns: 1fr; row-gap: var(--s-4); margin-bottom: var(--s-8); }
  .names .sep { width: calc(16 * var(--u)); margin: 0 calc(8 * var(--u)); }
  .next { padding: var(--s-8) var(--pad) var(--s-10); }
  .ticket { grid-template-columns: 1fr; transform: rotate(-1.5deg); }
  .ticket::before, .ticket::after { display: none; }
  .tk-main { padding: calc(32 * var(--u)) calc(28 * var(--u)); }
  .tk-stub { border-left: 0; border-top: 2px dashed rgba(11, 7, 6, .45); padding: calc(24 * var(--u)) calc(28 * var(--u)); grid-template-columns: auto 1fr; column-gap: var(--s-5); align-items: baseline; }
  .tk-q { margin: 0; }
  .foot-row { flex-direction: column; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  #opener { display: none; }
}

/* scene foreground sits in the artboard frame; full-bleed layers (media, tiles, slats, canvases) sit under it */
.sc > .art { z-index: 3; pointer-events: none; }
.sc > .art .info { pointer-events: auto; }