/* Anh Trai "Say Hi" - one subject --u (1 design px of the 1440×900 artboard; phone column 464.29 × 1005).
   Two seasons, two flat colour fields: body.s1 (2024, cobalt) and body.s2 (2025, lime). */
: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(22 * var(--u));

  /* type scale by role: the same token on every breakpoint, only its value changes */
  --d-hero: calc(300 * var(--u));
  --d-mega: calc(220 * var(--u));
  --d-title: calc(120 * var(--u));
  --d-h2: calc(56 * var(--u));
  --d-item: calc(30 * var(--u));
  --d-name: calc(22 * var(--u));
  --t-xs: calc(11 * var(--u));
  --t-sm: calc(13 * var(--u));
  --t-md: calc(16 * var(--u));
  --t-lg: calc(21 * var(--u));
  --lh-solo: .86;
  --lh-stack: 1.08;

  --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));
  --r: calc(18 * var(--u));
  --ctl: calc(40 * var(--u));
}
@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));
    --d-hero: calc(124 * var(--u));
    --d-mega: calc(120 * var(--u));
    --d-title: calc(64 * var(--u));
    --d-h2: calc(38 * var(--u));
    --d-item: calc(24 * var(--u));
    --d-name: calc(15 * 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));
  }
}

/* the two seasons */
body.s1 { --bg: #2337ff; --ink: #ffffff; --acc: #ff6a3d; --soft: rgba(255, 255, 255, .66); --line: rgba(255, 255, 255, .22); --tile: rgba(255, 255, 255, .09); --tile-ink: rgba(255, 255, 255, .92); }
body.s2 { --bg: #d4ff3a; --ink: #0c0c0c; --acc: #5b2bff; --soft: rgba(12, 12, 12, .64); --line: rgba(12, 12, 12, .2); --tile: rgba(12, 12, 12, .07); --tile-ink: rgba(12, 12, 12, .9); }
body.s1 .s2-only, body.s2 .s1-only { display: none; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-optical-sizing: auto; font-weight: 400;
  font-size: var(--t-md); line-height: 1.45; background: var(--bg); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased;
}
body.is-loading, body.menu-open { overflow: hidden; }
img, video { 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: .16em; text-transform: uppercase; }

/* ---------- season wipe ---------- */
#wipe { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; clip-path: inset(0 0 0 100%); }
#wipe b { font-weight: 800; font-stretch: 75%; font-size: var(--d-hero); line-height: var(--lh-solo); letter-spacing: -.04em; }
body.is-loading #wipe { clip-path: inset(0); background: #2337ff; color: #fff; }

/* ---------- bar ---------- */
.bar { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: var(--s-8); padding: var(--top) var(--pad); pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar::before { content: ''; position: absolute; inset: 0; background: var(--bg); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .35s; z-index: -1; }
.bar.solid::before { opacity: 1; }
.mark { font-weight: 800; font-stretch: 80%; font-size: var(--t-lg); letter-spacing: -.01em; white-space: nowrap; }
.mark i { font-style: normal; font-weight: 400; }
.links { display: flex; gap: var(--s-6); }
.links a { font-size: var(--t-sm); font-weight: 600; opacity: .75; transition: opacity .3s; }
.links a:hover { opacity: 1; }
.season { margin-left: auto; display: flex; padding: calc(4 * var(--u)); border-radius: 999px; background: var(--ink); color: var(--bg); }
.season button { display: flex; align-items: center; gap: var(--s-2); line-height: 1; height: calc(var(--ctl) - 8 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px; font-size: var(--t-sm); transition: background .35s, color .35s; }
.season button b { font-weight: 700; }
.season button span { opacity: .7; }
.season button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.burger, .sheet { display: none; }

/* ---------- shared ---------- */
.art { position: absolute; left: var(--gx); top: 50%; width: var(--frame); height: var(--art-h); transform: translateY(-50%); }
.sec-head { display: grid; grid-template-columns: 1fr calc(400 * var(--u)); column-gap: var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.sec-head .lbl { grid-column: 1 / -1; color: var(--acc); margin-bottom: var(--s-4); }
.sec-head h2 { font-weight: 800; font-stretch: 75%; font-size: var(--d-title); line-height: var(--lh-solo); letter-spacing: -.035em; white-space: nowrap; }
.sec-note { color: var(--soft); }

/* ---------- 1. hero ---------- */
.hero { position: relative; }
.hero-view { position: relative; height: 100svh; overflow: hidden; }
.frame { position: absolute; z-index: 3; border-radius: var(--r); overflow: hidden; background: #000; will-change: transform; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.s1 .frame video[data-s="2"], body.s2 .frame video[data-s="1"] { visibility: hidden; }
.hero .art { z-index: 2; pointer-events: none; }
.word { position: absolute; left: calc(57.5 * var(--u)); top: calc(120 * var(--u)); font-weight: 800; font-stretch: 75%; line-height: var(--lh-solo); letter-spacing: -.045em; }
.word span { display: block; white-space: nowrap; }
.word .w1 { font-size: calc(var(--d-hero) * .42); letter-spacing: -.03em; }
.word .w2 { font-size: var(--d-hero); margin-top: calc(10 * var(--u)); }
.word .w2 i { display: inline-block; font-style: normal; transform-origin: 50% 90%; }
.tag { position: absolute; left: calc(57.5 * var(--u)); top: calc(500 * var(--u)); font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.lede { position: absolute; left: calc(57.5 * var(--u)); top: calc(540 * var(--u)); width: calc(420 * var(--u)); font-size: var(--t-lg); line-height: 1.32; }
.hold { position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: calc(48 * var(--u)); color: #fff; pointer-events: none; opacity: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); }
.hero-view::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(140 * var(--u)); background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent); opacity: var(--hold, 0); z-index: 4; pointer-events: none; }
.hero-view::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent); opacity: var(--hold, 0); z-index: 4; pointer-events: none; }
.hold b { font-weight: 800; font-stretch: 75%; font-size: var(--d-title); line-height: var(--lh-solo); letter-spacing: -.035em; white-space: nowrap; }
.hold span { font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding-bottom: calc(8 * var(--u)); text-align: right; }
.hero .cap { position: absolute; right: calc(57.5 * var(--u)); bottom: calc(40 * var(--u)); font-size: var(--t-xs); color: var(--soft); }

/* ---------- 2. 30 → 5 ---------- */
.lineup { position: relative; }
.lu-view { position: relative; height: 100svh; overflow: hidden; }
.lu-head { position: absolute; left: calc(57.5 * var(--u)); right: calc(57.5 * var(--u)); top: calc(118 * var(--u)); display: flex; align-items: flex-end; gap: var(--s-8); }
.lu-head .lbl { position: absolute; left: 0; top: calc(-26 * var(--u)); color: var(--acc); }
.lu-head h2 { display: flex; align-items: center; gap: var(--s-4); font-weight: 800; font-stretch: 75%; font-size: var(--d-title); line-height: var(--lh-solo); letter-spacing: -.04em; }
.lu-head .arr { display: inline-block; width: calc(90 * var(--u)); height: calc(10 * var(--u)); background: var(--acc); clip-path: polygon(0 35%, 80% 35%, 80% 0, 100% 50%, 80% 100%, 80% 65%, 0 65%); }
.lu-note { max-width: calc(520 * var(--u)); color: var(--soft); padding-bottom: calc(8 * var(--u)); }
.board { position: absolute; inset: 0; }
.tile { position: absolute; left: 0; top: 0; border-radius: calc(12 * var(--u)); background: var(--tile); overflow: hidden; }
.tile .nm { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-3); font-weight: 700; font-stretch: 85%; font-size: var(--d-name); line-height: 1.05; letter-spacing: -.01em; color: var(--tile-ink); z-index: 2; }
.tile .no { position: absolute; left: var(--s-4); top: var(--s-3); font-size: var(--t-xs); font-weight: 600; color: var(--soft); z-index: 2; }
.tile figure { position: absolute; inset: 0; opacity: 0; }
.tile figure img, .tile figure video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .65) 0, transparent 45%); }
.tile.best { z-index: 2; }
.tile.best .nm { color: #fff; }
.tile.best .no { color: rgba(255, 255, 255, .8); }
.tile .badge { position: absolute; right: var(--s-3); top: var(--s-3); z-index: 3; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--acc); color: #fff; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; opacity: 0; transform: scale(.6); }

/* ---------- 3. hits ---------- */
.hits { position: relative; z-index: 2; padding: var(--s-12) var(--pad) var(--s-10); }
.songs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-6); }
.song { position: relative; }
.song .clip { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.song .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.song .aw { display: inline-block; margin: var(--s-5) 0 var(--s-3); padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--ink); color: var(--bg); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.song h3 { font-weight: 800; font-stretch: 78%; font-size: var(--d-h2); line-height: var(--lh-stack); letter-spacing: -.03em; }
.song p { color: var(--soft); margin-top: var(--s-2); }
.awards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(250 * var(--u)), 1fr)); gap: var(--s-4); }
.awards li { padding: var(--s-5); border-radius: var(--r); background: var(--tile); min-height: calc(150 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); }
.awards .t { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.awards .w { font-weight: 800; font-stretch: 80%; font-size: var(--d-item); line-height: var(--lh-stack); letter-spacing: -.02em; }

/* ---------- 4. nights ---------- */
.nights { position: relative; z-index: 2; padding: var(--s-10) var(--pad) var(--s-12); }
.line { list-style: none; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); padding-top: var(--s-8); }
.line::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--s-8) + 7 * var(--u)); height: 2px; background: var(--ink); transform: scaleX(var(--draw, 0)); transform-origin: 0 50%; }
.line li { position: relative; padding-top: var(--s-8); }
.line li::before { content: ''; position: absolute; left: 0; top: 0; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: var(--ink); }
.line li.m1::before { background: #2337ff; box-shadow: 0 0 0 2px var(--ink); }
.line li.m2::before { background: #d4ff3a; box-shadow: 0 0 0 2px var(--ink); }
.line li.next::before { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.line .d { font-weight: 800; font-stretch: 75%; font-size: calc(var(--d-title) * .62); line-height: var(--lh-solo); letter-spacing: -.03em; white-space: nowrap; }
.line .y { font-size: var(--t-sm); font-weight: 600; color: var(--soft); margin: var(--s-2) 0 var(--s-4); }
.line .ss { display: inline-block; padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; font-size: var(--t-xs); font-weight: 700; margin-bottom: var(--s-3); }
.line .m1 .ss { background: #2337ff; color: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.line .m2 .ss { background: #d4ff3a; color: #0c0c0c; box-shadow: 0 0 0 1.5px var(--ink); }
.line h3 { font-weight: 700; font-stretch: 85%; font-size: var(--t-lg); line-height: 1.15; margin-bottom: var(--s-2); }
.line p { font-size: var(--t-sm); color: var(--soft); }
.line .next .d { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 2; padding: var(--s-10) var(--pad) var(--s-6); border-top: 1px solid var(--line); }
.foot-word { font-weight: 800; font-stretch: 75%; font-size: var(--d-mega); line-height: var(--lh-stack); letter-spacing: -.045em; margin-bottom: var(--s-8); }
.foot-word br + * { display: block; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); font-size: var(--t-sm); color: var(--soft); }
.foot-row p { max-width: calc(680 * var(--u)); }
.foot-row a { font-weight: 700; color: var(--ink); flex: none; }

/* ---------- phone column ---------- */
@media (max-width: 1151px) {
  .bar { gap: var(--s-4); }
  .links { display: none; }
  .mark { font-size: var(--t-md); }
  .season { margin-left: auto; }
  .season button { padding: 0 calc(12 * var(--u)); }
  .season button span { display: none; }
  .burger { display: grid; gap: calc(6 * var(--u)); place-content: center; width: var(--ctl); height: var(--ctl); border-radius: 50%; background: var(--ink); }
  .burger i { display: block; width: calc(18 * var(--u)); height: 2px; background: var(--bg); transition: transform .3s; }
  body.menu-open .burger i:nth-child(1) { transform: translateY(calc(4 * var(--u))) rotate(45deg); }
  body.menu-open .burger i:nth-child(2) { transform: translateY(calc(-4 * var(--u))) rotate(-45deg); }
  .sheet { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: 0 var(--pad); background: var(--bg); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s; }
  .sheet a { font-weight: 800; font-stretch: 75%; font-size: var(--d-title); line-height: var(--lh-stack); letter-spacing: -.03em; }
  body.menu-open .sheet { clip-path: inset(0); visibility: visible; transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }

  .word { left: calc(23.75 * var(--u)); top: calc(96 * var(--u)); }
  .word .w1 { font-size: calc(var(--d-hero) * .42); }
  .tag { left: calc(23.75 * var(--u)); top: calc(585 * var(--u)); }
  .lede { left: calc(23.75 * var(--u)); top: calc(618 * var(--u)); width: calc(416 * var(--u)); }
  .hero .cap { left: calc(23.75 * var(--u)); right: auto; bottom: auto; top: calc(790 * var(--u)); }

  .lu-head { left: calc(23.75 * var(--u)); right: calc(23.75 * var(--u)); top: calc(124 * var(--u)); flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .lu-head .arr { width: calc(60 * var(--u)); height: calc(8 * var(--u)); }
  .tile .nm { left: var(--s-3); right: var(--s-3); bottom: calc(7 * var(--u)); }
  .tile .no { display: none; }
  .tile .badge { font-size: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); white-space: nowrap; }

  .sec-head { grid-template-columns: 1fr; row-gap: var(--s-4); margin-bottom: var(--s-6); }
  .hits { padding: var(--s-10) var(--pad) var(--s-8); }
  .songs { grid-template-columns: 1fr; gap: var(--s-8); }
  .awards { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .awards li { min-height: calc(130 * var(--u)); padding: var(--s-4); }
  .line { grid-template-columns: 1fr; gap: var(--s-6); padding-top: 0; padding-left: var(--s-8); }
  .line::before { left: calc(7 * var(--u)); right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(var(--draw, 0)); transform-origin: 50% 0; }
  .line li { padding-top: 0; }
  .line li::before { left: calc(-48 * var(--u)); top: calc(8 * var(--u)); }
  .foot-row { flex-direction: column; align-items: flex-start; }
}

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