/* =====================================================================
   Copa Internacional de Vôlei de Praia 2027 · "De sol a sol" — núcleo visual
   Tokens, tipografia, a gramática de leitura (grade, véu, cápsula, placar,
   cartão, números, moldura de quadra, rede, sol, trajetória, areia) e o chassi
   (pré-show, HUD, vinhetas de set, índice, mockups de marca). Capítulo nunca
   edita este arquivo: estilos de capítulo ficam em css/chapters/NN-id.css,
   todos sob #id. Ver design/CHAPTER_GUIDE.md.
   ===================================================================== */

/* ---------- Fontes ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin-wdth-italic.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin-ext-wdth-italic.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  /* escala de texto da peça inteira (1,1 desde o início: o cliente pediu texto maior nas peças irmãs).
     Todo font-size absoluto é calc(V * var(--ts)); em/% herdam. ?ts=1.2 muda na hora. */
  --ts: 1.1;
  --ts-page: var(--ts);
  --ts-screen: 1;
  --night: #0a1822;
  --navy: #102633;
  --navy-2: #17394b;
  --navy-3: #22475b;
  --slate: #50616a;
  --clay: #cb572d;
  --clay-2: #a33f1a;            /* terracota escuro: rótulo pequeno na areia (5,6:1 na areia, 4,7:1 no pior grão) e fundo da .tag (5,6:1 com areia) */
  --sun: #f2976d;
  --flare: #ffc88a;
  --sand: #f4efe5;
  --sand-2: #ebe7de;
  --sand-3: #e2dccf;
  --mist: #d9e2e5;
  --sea: #1e5b6a;
  --text: #f4efe5;
  --text-2: rgba(244, 239, 229, .82);
  --text-3: rgba(244, 239, 229, .6);
  --line: rgba(217, 226, 229, .16);
  --line-2: rgba(217, 226, 229, .3);
  --ink-text: #102633;           /* texto sobre areia */
  --ink-text-2: rgba(16, 38, 51, .76);
  --ink-text-3: rgba(16, 38, 51, .7);   /* .58 dava 3,8:1 composto na areia; .7 dá 5,5:1 */
  --ink-line: rgba(16, 38, 51, .16);

  --f-display: 'Archivo', 'Arial', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wide: 122%;                  /* largura da display */

  --gutter: clamp(20px, 4.6vw, 72px);
  --maxw: 1320px;
  --gap: clamp(16px, 2vw, 32px);
  --hud-h: 64px;
  --tide: clamp(28px, 4.4vw, 72px); /* altura da onda da borda de maré */
  --r: 10px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 6px rgba(0, 0, 0, .26), 0 18px 48px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 6px rgba(16, 38, 51, .07), 0 18px 44px rgba(16, 38, 51, .13);
  --sun-f: 0;                    /* fração do sol no arco (0 nascente → 1 poente), escrita pelo core.js */
}
/* Projetor 2560 (≥ 2400 × 1300): a peça inteira é a composição de 1920 ampliada. */
@media (min-width: 2400px) and (min-height: 1300px) {
  :root { --ts-screen: 1.3; --maxw: 1760px; --hud-h: 84px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
/* sem âncora de rolagem: no WebKit ela empurrava o salto imediato para dentro de pins 15–30 mil px adiante */
html, body { overflow-anchor: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { --ts: calc(var(--ts-page) * var(--ts-screen)); margin: 0; background: var(--night); font-family: var(--f-body); font-size: calc((clamp(16px, .55vw + 10px, 19px)) * var(--ts, 1)); line-height: 1.55; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote, table { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--sun); color: var(--navy); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: fixed; left: 12px; bottom: calc(100% + 8px); z-index: 1000; padding: 10px 14px; background: var(--sun); color: var(--navy); font-weight: 700; }
.skip-link:focus { top: 12px; bottom: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Camadas globais ---------- */
main { position: relative; z-index: 2; }
.fx-vignette { position: fixed; inset: 0; z-index: 45; pointer-events: none; background: radial-gradient(125% 95% at 50% 45%, transparent 62%, rgba(6, 14, 20, .38) 100%); }
.fx-grain { position: fixed; inset: -50%; z-index: 46; pointer-events: none; opacity: .05; mix-blend-mode: overlay; 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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,3%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }
.reduced .fx-grain { animation: none; }
.fx-flash { position: fixed; inset: 0; z-index: 47; pointer-events: none; opacity: 0; background: radial-gradient(90% 80% at 50% 50%, #fff 0%, rgba(255, 236, 212, .9) 40%, rgba(242, 151, 109, .35) 75%, transparent 100%); }

/* ---------- Capítulo ---------- */
.ch { position: relative; padding-block: clamp(104px, 15vh, 190px); isolation: isolate; overflow-x: clip; }
.ch:has(> .stage, > .pin-spacer > .stage), .ch.ch--flush { padding-block: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1560px; }
.stage { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: clip; background: var(--night); }
.stage > .wrap { height: 100%; }
.ch--todo { min-height: 80vh; display: grid; place-items: center; border-top: 1px dashed var(--line); }
.ch--deep { background: linear-gradient(180deg, var(--night), var(--navy) 16%, var(--navy) 84%, var(--night)); }

/* Capítulo de areia (dados, tabelas, programação): areia com a BORDA DE MARÉ em cima e embaixo — a orla.
   A chapa é o ::before, recortada por máscara (onda em SVG nas pontas + retângulo no meio). O ::after é a
   espuma: um fio claro na mesma onda. ch--sand-flat-top / -flat-bottom tiram a onda de um lado. */
.ch--sand { color: var(--ink-text); padding-block: calc(clamp(104px, 15vh, 190px) + var(--tide)); }
.ch--sand::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(110% 60% at 100% 0%, rgba(242, 151, 109, .16), transparent 62%),
    radial-gradient(90% 55% at 0% 100%, rgba(217, 226, 229, .5), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .32 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    var(--sand);
  --wave-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C 110 20 230 18 360 38 S 610 70 760 46 S 1040 12 1200 34 V80 H0Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 36 C 160 62 330 64 480 44 S 770 12 930 30 S 1110 60 1200 42 V0 H0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave-t) top / 100% var(--tide) no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--tide) + 2px) no-repeat, var(--wave-b) bottom / 100% var(--tide) no-repeat;
  mask: var(--wave-t) top / 100% var(--tide) no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--tide) + 2px) no-repeat, var(--wave-b) bottom / 100% var(--tide) no-repeat;
}
.ch--sand::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--tide); z-index: -1; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C 110 20 230 18 360 38 S 610 70 760 46 S 1040 12 1200 34' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 54 C 120 30 240 28 370 46 S 620 76 770 54 S 1050 22 1200 42' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
.ch--sand.ch--flat-top { padding-top: clamp(104px, 15vh, 190px); }
.ch--sand.ch--flat-top::before { -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--tide) + 1px) no-repeat, var(--wave-b) bottom / 100% var(--tide) no-repeat; mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--tide) + 1px) no-repeat, var(--wave-b) bottom / 100% var(--tide) no-repeat; }
.ch--sand.ch--flat-top::after { display: none; }
.ch--sand.ch--flat-bottom { padding-bottom: clamp(104px, 15vh, 190px); }
.ch--sand.ch--flat-bottom::before { -webkit-mask: var(--wave-t) top / 100% var(--tide) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--tide) + 1px) no-repeat; mask: var(--wave-t) top / 100% var(--tide) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--tide) + 1px) no-repeat; }

/* ---------- Grade ----------
   .lay = 12 colunas. O capítulo só posiciona: style="--span: 1 / 7" ou as classes prontas. */
.lay { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(28px, 4vh, 56px); align-items: start; }
.lay > * { grid-column: var(--span, 1 / -1); min-width: 0; }
.lay--center { align-items: center; }
.lay--end { align-items: end; }
.left { --span: 1 / 7; } .right { --span: 7 / 13; }
.left-5 { --span: 1 / 6; } .right-7 { --span: 6 / 13; }
.left-4 { --span: 1 / 5; } .right-8 { --span: 5 / 13; }
.left-7 { --span: 1 / 8; } .right-5 { --span: 8 / 13; }
.center-8 { --span: 3 / 11; } .center-10 { --span: 2 / 12; }
.stack { display: grid; gap: clamp(14px, 2vh, 24px); align-content: start; }
.stack--lg { gap: clamp(22px, 3.4vh, 40px); }

/* ---------- Tipografia ---------- */
.display, .h2, .h3, .num { font-family: var(--f-display); font-stretch: var(--wide); text-transform: uppercase; }
.display { font-weight: 900; font-size: calc((clamp(46px, 6vw, 112px)) * var(--ts, 1)); line-height: 1.04; letter-spacing: -.012em; padding-top: .05em; text-wrap: balance; }
.display--xl { font-size: calc((clamp(64px, 9.2vw, 176px)) * var(--ts, 1)); line-height: .98; }
.display--sm { font-size: calc((clamp(38px, 4.4vw, 80px)) * var(--ts, 1)); }
.h2 { font-weight: 900; font-size: calc((clamp(32px, 3.3vw, 58px)) * var(--ts, 1)); line-height: 1.06; letter-spacing: -.008em; text-wrap: balance; }
.h3 { font-weight: 800; font-size: calc((clamp(19px, 1.45vw, 26px)) * var(--ts, 1)); line-height: 1.16; letter-spacing: 0; }
.num { font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; padding-top: .06em; }
.num--sun { color: var(--sun); }
.num--clay { color: var(--clay); }
.label { font-family: var(--f-display); font-stretch: 108%; font-style: normal; font-weight: 700; font-size: calc((clamp(12px, .42vw + 8.6px, 15px)) * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; color: var(--text-3); }
.label--sun { color: var(--sun); }
.label--clay { color: var(--clay); }
.ch--sand .label { color: var(--slate); }
.ch--sand .label--sun, .ch--sand .label--clay { color: var(--clay-2); } /* terracota escuro: o --clay em letra pequena dá ~4:1 na areia (reprova AA) */
.lede { font-size: calc((clamp(19px, .9vw + 10px, 25px)) * var(--ts, 1)); line-height: 1.45; color: var(--text); max-width: 38ch; font-weight: 400; text-wrap: pretty; }
.body { color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.body + .body { margin-top: 1em; }
.lede b, .body b { color: var(--text); font-weight: 600; }
.ch--sand .lede { color: var(--ink-text); }
.ch--sand .body { color: var(--ink-text-2); }
.ch--sand .body b, .ch--sand .lede b { color: var(--ink-text); }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.u-sun { color: var(--sun); } .u-clay { color: var(--clay); } .u-flare { color: var(--flare); } .u-navy { color: var(--navy); } .u-sand { color: var(--sand); }
.footnote { box-sizing: content-box; font-size: calc(14px * var(--ts, 1)); line-height: 1.5; color: var(--text-3); max-width: 90ch; }
.ch--sand .footnote { color: var(--ink-text-2); } /* a ressalva obrigatória: 6,6:1 na areia */
.credit { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 239, 229, .74); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.ch--sand .credit { color: var(--ink-text-3); text-shadow: none; }
/* crédito dentro de foto: plaqueta própria (a regra de areia deixaria o texto escuro sobre a foto) */
.photo > .credit, .ch--sand .photo > .credit,
.credit--plate, .ch--sand .credit--plate { padding: 4px 10px 3px; border-radius: 999px; background: rgba(10, 24, 34, .62); color: rgba(244, 239, 229, .88); text-shadow: none; }
/* .credit--plate: a mesma plaqueta para crédito solto sobre filme ou foto de fundo (fora de .photo) */
.credit--plate { display: inline-block; }

/* SplitText com máscara: folga para til e circunflexo */
.sl-mask, .sw-mask, .sc-mask { padding-top: .24em; margin-top: -.24em; padding-bottom: .08em; margin-bottom: -.08em; }
.sw, .sc { display: inline-block; }

/* ---------- Cápsula (a bola, o sol) ---------- */
.tag {
  display: inline-block; padding: .44em 1.05em .38em; border-radius: 999px; font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: calc((clamp(12px, .5vw + 8.4px, 17px)) * var(--ts, 1)); letter-spacing: .1em; line-height: 1.1; text-transform: uppercase; white-space: nowrap;
  background: var(--clay-2); color: var(--sand); /* --clay com areia dava 3,7:1 (reprova AA em letra de 12–17 px) */
}
.tag--sun { background: var(--sun); color: var(--navy); }
.tag--sand { background: var(--sand); color: var(--navy); }
.tag--navy { background: var(--navy); color: var(--sun); }
.tag--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ch--sand .tag--line { color: var(--ink-text); box-shadow: inset 0 0 0 1.5px rgba(16, 38, 51, .3); }
.tag--lg { font-size: calc((clamp(15px, .8vw + 9px, 23px)) * var(--ts, 1)); }

/* ---------- Legenda de cena (lower third) ---------- */
.lt { display: inline-grid; grid-template-columns: 10px auto; column-gap: 12px; align-items: center; row-gap: 2px; }
.lt::before { content: ''; grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(242, 151, 109, .22); align-self: center; }
.lt b { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: calc((clamp(15px, .55vw + 10px, 20px)) * var(--ts, 1)); line-height: 1.15; letter-spacing: .02em; }
.lt span { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); line-height: 1.4; }
.lt--box { padding: 12px 18px 12px 14px; border-radius: var(--r); background: rgba(10, 24, 34, .8); box-shadow: var(--shadow-1); }
.ch--sand .lt span { color: var(--ink-text-2); }

/* Carimbo de lugar e hora ("BEIRA-MAR · 06:12") */
.stamp { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.stamp i { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px rgba(242, 151, 109, .22), 0 0 12px rgba(255, 200, 138, .6); }
.stamp--plate { padding: 7px 13px 7px 11px; border-radius: 999px; color: var(--text); background: rgba(10, 24, 34, .64); box-shadow: 0 2px 14px rgba(10, 24, 34, .28); }
.ch--sand .stamp { color: var(--ink-text-2); }

/* Chip (fato curto): cápsula com fio pêssego */
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1.05em .44em; border-radius: 999px; font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc((clamp(12px, .4vw + 9.4px, 15px)) * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--sand); background: rgba(244, 239, 229, .06); box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .55); }
.chip--sun { background: var(--sun); color: var(--navy); box-shadow: none; }
.ch--sand .chip { color: var(--ink-text); background: rgba(16, 38, 51, .05); box-shadow: inset 0 0 0 1.5px rgba(203, 87, 45, .45); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Véu (texto sobre foto sempre tem véu) ---------- */
.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scrim--l { background: linear-gradient(90deg, rgba(10, 24, 34, .94) 0%, rgba(10, 24, 34, .8) 26%, rgba(16, 38, 51, .42) 50%, rgba(16, 38, 51, 0) 70%); }
.scrim--r { background: linear-gradient(270deg, rgba(10, 24, 34, .94) 0%, rgba(10, 24, 34, .8) 26%, rgba(16, 38, 51, .42) 50%, rgba(16, 38, 51, 0) 70%); }
.scrim--b { background: linear-gradient(0deg, rgba(10, 24, 34, .95) 0%, rgba(10, 24, 34, .7) 26%, rgba(10, 24, 34, 0) 58%); }
.scrim--t { background: linear-gradient(180deg, rgba(10, 24, 34, .85) 0%, rgba(10, 24, 34, 0) 26%); }
.scrim--dusk { background: linear-gradient(90deg, rgba(16, 38, 51, .96) 0%, rgba(16, 38, 51, .78) 30%, rgba(203, 87, 45, .18) 58%, rgba(203, 87, 45, 0) 74%); }
.scrim--all { background: rgba(10, 24, 34, .55); }
.scrim--lit { background: linear-gradient(90deg, rgba(244, 239, 229, .96) 0%, rgba(244, 239, 229, .8) 30%, rgba(244, 239, 229, 0) 64%); }
.aura { text-shadow: 0 0 2px rgba(10, 24, 34, .6), 0 2px 12px rgba(10, 24, 34, .55), 0 6px 34px rgba(10, 24, 34, .5); }

/* ---------- Mídia ---------- */
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo { position: relative; overflow: hidden; background: var(--navy); border-radius: var(--r); box-shadow: var(--shadow-1); isolation: isolate; }
.photo > img, .photo > picture > img, .photo > video { width: 100%; height: 100%; object-fit: cover; }
.photo > .credit { position: absolute; right: 12px; bottom: 10px; z-index: 2; }
.photo--flat { border-radius: 0; box-shadow: none; }
.ch--sand .photo { box-shadow: var(--shadow-2); }
.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.fade-r { -webkit-mask-image: linear-gradient(270deg, transparent, #000 22%); mask-image: linear-gradient(270deg, transparent, #000 22%); }
.fade-b { -webkit-mask-image: linear-gradient(0deg, transparent, #000 24%); mask-image: linear-gradient(0deg, transparent, #000 24%); }
/* Linhas da quadra: moldura fina afastada da foto, como a linha que delimita a quadra de areia */
.court { position: relative; }
.court::after { content: ''; position: absolute; inset: calc(-1 * clamp(8px, .9vw, 14px)); border: 2px solid rgba(244, 239, 229, .78); border-radius: calc(var(--r) + 6px); pointer-events: none; }
.ch--sand .court::after { border-color: rgba(16, 38, 51, .5); }

/* ---------- Cartão e placa ---------- */
.card { position: relative; padding: clamp(20px, 2vw, 32px); border-radius: var(--r); background: rgba(16, 38, 51, .8); border: 1px solid var(--line); box-shadow: var(--shadow-1); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
.card::after { content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, transparent, rgba(255, 200, 138, .45), transparent); pointer-events: none; }
.card--sand { background: #fbf8f2; border-color: var(--ink-line); box-shadow: var(--shadow-2); color: var(--ink-text); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card--clay { background: linear-gradient(160deg, var(--clay-2) 0%, #8a3414 100%); border-color: rgba(244, 239, 229, .16); color: var(--sand); } /* areia sobre o degradê: ≥ 5,6:1 */
.card--sun { background: var(--sun); color: var(--navy); border-color: transparent; }
.is-tablet .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(16, 38, 51, .94); }
.is-tablet .card--sand { background: #fbf8f2; }
.is-tablet .card--clay { background: linear-gradient(160deg, var(--clay-2) 0%, #8a3414 100%); }
.is-tablet .card--sun { background: var(--sun); }

/* ---------- Números ---------- */
.stat { display: grid; gap: .35em; align-content: start; }
.stat__n { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: calc((clamp(40px, 4.2vw, 80px)) * var(--ts, 1)); line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; padding-top: .06em; }
.stat__n small { font-size: .46em; letter-spacing: 0; margin-left: .06em; }
.stat__l { font-family: var(--f-display); font-stretch: 108%; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: calc((clamp(13px, .45vw + 9.4px, 17px)) * var(--ts, 1)); line-height: 1.25; color: var(--text-2); max-width: 24ch; }
.ch--sand .stat__l { color: var(--ink-text-2); }
.stat--sun .stat__n { color: var(--sun); }
.stat--clay .stat__n { color: var(--clay); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.stat-row > .stat { padding: clamp(16px, 2vh, 24px) clamp(14px, 1.6vw, 26px) 0 0; }
.stat-row > .stat + .stat { padding-left: clamp(14px, 1.6vw, 26px); border-left: 1px solid var(--line); }
.ch--sand .stat-row { border-top-color: var(--ink-line); }
.ch--sand .stat-row > .stat + .stat { border-left-color: var(--ink-line); }

/* Odômetro (brilho só com filter: drop-shadow no pai — text-shadow é recortado coluna a coluna) */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.odo__col { display: inline-block; height: 1.04em; overflow: hidden; vertical-align: bottom; padding-inline: .06em; margin-inline: -.06em; }
@supports (overflow: clip) { .odo__col { overflow: visible; overflow-y: clip; padding-inline: 0; margin-inline: 0; } }
.odo > span { white-space: pre; }
.odo__strip { display: flex; flex-direction: column; }
.odo__strip > span { height: 1.04em; line-height: 1.04; }

/* ---------- Placar ---------- */
.board { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc((clamp(14px, .35vw + 11px, 17px)) * var(--ts, 1)); border-radius: var(--r); overflow: clip; }
.board th, .board td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.board thead th { position: sticky; top: var(--board-top, calc(var(--hud-h) + 8px)); z-index: 3; background: var(--navy); color: var(--sand); font-family: var(--f-display); font-stretch: 108%; font-weight: 800; font-size: calc((clamp(12px, .4vw + 9.4px, 15px)) * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--clay); }
.board td { color: var(--text-2); }
.board td:first-child { color: var(--text); font-weight: 600; }
.board td.is-hl, .board th.is-hl { background: rgba(242, 151, 109, .08); }
.yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(242, 151, 109, .16); color: var(--sun); }
.yes svg { width: 16px; height: 16px; }
.ch--sand .board { background: #fbf8f2; box-shadow: var(--shadow-2); }
.ch--sand .board th, .ch--sand .board td { border-bottom-color: var(--ink-line); }
.ch--sand .board td { color: var(--ink-text-2); }
.ch--sand .board td:first-child { color: var(--ink-text); }
.ch--sand .yes { background: rgba(203, 87, 45, .12); color: var(--clay); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 28px; border-radius: 999px; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: calc(16px * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; transition: transform .25s var(--ease-out), filter .25s, background .25s, color .25s; text-decoration: none; }
.btn:disabled { opacity: .35; cursor: progress; }
.btn--primary { background: var(--sun); color: var(--navy); }
.btn--primary:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn--ghost { color: var(--sand); background: rgba(244, 239, 229, .07); box-shadow: inset 0 0 0 1.5px rgba(244, 239, 229, .3); }
.btn--ghost:not(:disabled):hover { background: rgba(244, 239, 229, .14); }
.btn svg { width: 18px; height: 18px; fill: none; }

/* ---------- Sol, trajetória, rede ---------- */
/* o disco com halo: atrás de títulos na hora dourada. Tamanho por --sun-size (medido pela altura). */
.sun { position: absolute; width: var(--sun-size, 44vmin); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff1dc 0%, #ffd9a8 12%, var(--flare) 22%, var(--sun) 36%, rgba(203, 87, 45, .42) 52%, rgba(203, 87, 45, .12) 64%, transparent 72%); }
/* trajetória da bola: parábola tracejada, desenhada pela rolagem (drawSVG no tracejado não funciona: anime
   um clipPath/mask ou a opacidade por trecho; ou desenhe o path cheio .arc--solid) */
.arc { fill: none; stroke: url(#g-arc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(242, 151, 109, .45)); }
.arc--solid { stroke-dasharray: none; stroke-width: 3.5; }
.ball { width: var(--ball, 44px); height: var(--ball, 44px); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
/* a bola é a Mikasa do campeonato (#ball): o nome MIKASA mede ~12% da bola e só é legível a partir de ~30 px de bola
   na tela 1×. --ball-word: 1 escreve o nome, 0 põe o traço azul no lugar. Abaixo de 1200 px de largura as bolas de
   26–30 px (03, 08, 12, 16) trocam o nome pelo traço; em 1,5× e 2× o nome sai sempre. Vinheta, pré-show, 02 e 14
   (≥ 40 px) escrevem sempre; o 19 (20 px) só em 1,5× ou mais. */
@media (max-width: 1199.98px) and (max-resolution: 1.49dppx) { .ball { --ball-word: 0; } }
/* malha da rede: cantos, meio-tom, nunca fundo cheio */
.net { position: absolute; width: min(46vw, 720px); aspect-ratio: 1; pointer-events: none; z-index: -1; color: var(--mist); opacity: .07;
  background:
    repeating-linear-gradient(0deg, currentColor 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 26px);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  transform: perspective(900px) rotateX(38deg) rotateZ(-14deg); }
.stage .net { z-index: 1; }
.net--tl { left: -12vw; top: -14vw; }
.net--br { right: -12vw; bottom: -14vw; }
.ch--sand .net { color: var(--navy); opacity: .06; }

/* ---------- Mockup de marca (CV.mock) ---------- */
.mock { position: relative; aspect-ratio: var(--mock-ar, 16 / 9); overflow: hidden; container-type: inline-size; }
.mock > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.mock__ink { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; }
.mock__panel { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; align-items: center; justify-content: space-around; gap: .8em; white-space: nowrap; overflow: visible;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; }
.mock__panel span { display: block; }
.mock--plain .mock__ink { display: none; }

/* ---------- Pré-show: o amanhecer ---------- */
.boot { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--night); overflow: hidden; --p: 0; }
/* Horizonte e faixas, medidos de cima: --hz = linha d'água; --hill = altura dos morros da Ilha sobre ela
   (baixos: ~7% da tela, menos em pé); --glow = faixa do amanhecer acima dos morros. O texto fica todo acima
   dessa faixa, sobre o navy (a luz quente não sobe atrás da letra). --sun-s = lado do sol. */
.boot { --hz: 78%; --hill: min(7.5vh, 5.5vw); --glow: clamp(44px, 10vh, 150px); --sun-s: min(30vmin, 340px); }
.boot__sky { position: absolute; inset: 0;
  background:
    radial-gradient(min(70vw, 1100px) calc(var(--hill) * 1.5 + var(--glow)) at 50% var(--hz), rgba(255, 200, 138, calc(.06 + var(--p) * .5)), rgba(242, 151, 109, calc(var(--p) * .16)) 55%, transparent),
    linear-gradient(180deg, #06121a 0%, #0d2432 40%, #122c3b calc(var(--hz) - var(--hill) - var(--glow)), color-mix(in srgb, #1b3a4a, #b8664f calc(var(--p) * 60%)) calc(var(--hz) - var(--hill) * .6), color-mix(in srgb, #24485a, #f2976d calc(var(--p) * 80%)) var(--hz)); }
/* O sol nasce atrás da Ilha: sobe com --p até a borda do disco apontar no selado do meio dos morros (o
   carimbo termina às 05:12; o disco branco nunca aparece inteiro). Centro: --hz + .45 lado → selado. */
.boot__sun { position: absolute; left: 50%; top: var(--hz); width: var(--sun-s); aspect-ratio: 1; transform: translate(-50%, calc(-5% - var(--p) * (23.7% + var(--hill) * .54))); }
.boot__sun i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fff6e8 0%, #ffe2b8 22%, #ffc88a 34%, #f6a57c 40%, rgba(242, 151, 109, .55) 44%, rgba(203, 87, 45, .22) 58%, transparent 72%); }
.boot__isle { position: absolute; left: 0; top: calc(var(--hz) - var(--hill)); width: 100%; max-width: none; height: calc(var(--hill) + 2px); display: block; pointer-events: none; }
/* o maciço do fundo fica na névoa: navy de madrugada, cinza-violeta quando o céu acende atrás (sempre mais escuro que ele) */
.boot__isle-far { fill: color-mix(in srgb, #1a3643, #3a3b48 calc(var(--p) * 100%)); }
.boot__isle-rim { opacity: calc(.1 + var(--p) * .9); }
/* o mar: fio de luz na beira da Ilha e o reflexo do amanhecer como brilho suave, sem listras */
.boot__sea { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0;
  background: linear-gradient(90deg, transparent 12%, rgba(255, 200, 138, calc(.08 + var(--p) * .42)) 50%, transparent 88%) 0 0 / 100% 1px no-repeat, linear-gradient(180deg, #16323f, #0a1822 80%); }
.boot__sea::before, .boot__sea::after { content: ''; position: absolute; top: 0; pointer-events: none; }
.boot__sea::before { left: 50%; width: calc(var(--sun-s) * 1.15); height: 80%; transform: translateX(-50%); opacity: calc(.08 + var(--p) * .92); filter: blur(6px);
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 196, 140, .5), rgba(242, 151, 109, .22) 42%, rgba(242, 151, 109, .06) 72%, transparent); }
.boot__sea::after { left: 0; right: 0; height: 36%; opacity: var(--p); background: radial-gradient(46% 100% at 50% 0%, rgba(242, 151, 109, .16), transparent 80%); }
.boot__center { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: calc(100% - var(--hz) + var(--hill) + var(--glow)); width: min(1240px, 100% - 40px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 20px; }
.boot__k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.boot__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(242, 151, 109, .22), 0 0 14px rgba(255, 200, 138, .7); }
.boot__emblem { width: clamp(72px, 9vmin, 112px); height: clamp(72px, 9vmin, 112px); filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
.boot__title { display: grid; gap: .1em; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; text-wrap: balance; } /* "Copa Internacional" numa linha só onde cabe: a faixa acima dos morros é curta */
.boot__title span { font-size: calc((clamp(34px, 4.6vw, 76px)) * var(--ts, 1)); color: var(--sand); }
.boot__title b { font-size: calc((clamp(20px, 2.4vw, 40px)) * var(--ts, 1)); color: var(--sun); font-weight: 800; letter-spacing: .02em; }
.boot__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc(16px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.boot__load { width: min(460px, 100%); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; margin-top: 4px; }
.boot__load i { height: 3px; border-radius: 3px; background: rgba(244, 239, 229, .14); position: relative; overflow: hidden; }
.boot__load i::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--clay), var(--sun), var(--flare)); }
.boot__pct { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .16em; color: var(--sun); } /* sobre o navy: ≥ 7:1 */
.boot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
/* a frase que ensina a rolar: areia plena, corpo de leitura, sobre o navy acima do amanhecer */
.boot__hint { font-size: calc(17px * var(--ts, 1)); line-height: 1.45; color: var(--sand); letter-spacing: .01em; text-wrap: balance; text-shadow: 0 1px 10px rgba(10, 24, 34, .6); }
.boot__hint b, .boot__hint span { display: block; } /* duas linhas: o gesto de entrar em cima, os atalhos embaixo */
.boot__hint b { font-weight: 600; }
.boot .btn { transition: filter .25s, background .25s, color .25s; } /* sem transição de transform: brigava com a entrada do GSAP */
.boot .btn--ghost { color: var(--sand); background: rgba(10, 24, 34, .5); box-shadow: inset 0 0 0 1.5px var(--sand); }
.boot__ball { position: absolute; left: 50%; top: 100%; width: 72px; height: 72px; margin-left: -36px; opacity: 0; pointer-events: none; }
html:not(.is-booting) .boot { display: none; }
@media (max-height: 820px) { .boot__center { gap: 12px; } .boot__emblem { width: 56px; height: 56px; } }
@media (max-height: 740px) { .boot__center { gap: 10px; } .boot__emblem { width: 48px; height: 48px; } }
@media (min-width: 1800px) and (min-height: 1000px) {
  .boot { --ts: calc(var(--ts-page, 1.1) * 1.18); }
  .boot__center { width: min(1640px, 100% - 40px); gap: 24px; }
  .boot__load { width: min(560px, 100%); }
  .boot .btn { min-height: 60px; padding: 0 34px; }
}
@media (min-width: 2400px) and (min-height: 1300px) {
  .boot { --ts: calc(var(--ts-page, 1.1) * 1.45); }
  .boot__center { width: min(2100px, 100% - 40px); gap: 30px; }
  .boot__load { width: min(700px, 100%); }
  .boot .btn { min-height: 72px; padding: 0 42px; }
}

/* ---------- HUD: o relógio da arena ---------- */
/* Grade: os lados nunca ficam menores que o próprio conteúdo (minmax(max-content, 1fr)) e dividem a sobra.
   Com folga, a pílula fica no centro da tela; sem folga, ela anda para o lado mais curto e encolhe com
   reticências — o bloco da direita (relógio e botões) nunca sai da tela. */
.hud { position: fixed; z-index: 60; inset: 0 0 auto 0; height: var(--hud-h); display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: 16px; padding: 0 clamp(14px, 2vw, 28px); pointer-events: none; transition: transform .6s var(--ease-out), opacity .6s; }
/* véu da barra: mais denso na faixa do HUD (o texto do capítulo que passa por baixo entre paradas brigava com a
   marca do canto) e esmaece nos 30 px abaixo */
.hud::before { content: ''; position: absolute; inset: 0 0 -30px; z-index: -1; background: linear-gradient(180deg, rgba(10, 24, 34, .88), rgba(10, 24, 34, .68) calc(var(--hud-h) - 8px), transparent); pointer-events: none; transition: background .5s; }
.hud > * { pointer-events: auto; }
.is-booting .hud, .is-booting .hud__progress { opacity: 0; transform: translateY(-14px); }
.hud__brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; justify-self: start; min-width: 0; }
.hud__emblem { width: 36px; height: 36px; flex: none; }
.hud__name { display: grid; line-height: 1.05; font-family: var(--f-display); text-transform: uppercase; }
.hud__name b { font-stretch: 118%; font-weight: 900; font-size: calc(15px * var(--ts, 1)); letter-spacing: .01em; }
.hud__name span { font-stretch: 108%; font-weight: 700; font-size: calc(12px * var(--ts, 1)); letter-spacing: .14em; color: var(--sun); }
.hud__chapter { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc(14px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--sand); white-space: nowrap; padding: 7px 16px; border-radius: 999px; background: rgba(10, 24, 34, .52); border: 1px solid var(--line); max-width: min(46vw, 100%); min-width: 0; overflow: hidden; justify-self: center; }
/* reticências no texto (num contêiner flex elas não funcionam: cortava no meio da letra) */
.hud__chapter [data-hud-title] { display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud__chapter b { flex: none; font-family: var(--f-mono); color: var(--sun); font-weight: 700; font-size: calc(13px * var(--ts, 1)); }
.hud__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--sun); flex: none; }
.hud__right { justify-self: end; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hud__right > * { flex: none; white-space: nowrap; }
.hud__sky { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: 999px; background: rgba(10, 24, 34, .62); border: 1px solid var(--line); }
.hud__arc { width: 54px; height: 23px; overflow: visible; }
.hud__arc-path { fill: none; stroke: rgba(244, 239, 229, .34); stroke-width: 1.3; stroke-dasharray: 1.5 3.2; }
.hud__arc-line { stroke: rgba(244, 239, 229, .5); stroke-width: 1.3; }
.hud__arc-sun { fill: var(--flare); filter: drop-shadow(0 0 3px rgba(255, 200, 138, .9)); transition: fill .6s; }
.hud__arc-sun.is-down { fill: var(--slate); filter: none; }
.hud__sky output { font-family: var(--f-mono); font-weight: 700; font-size: calc(14px * var(--ts, 1)); color: var(--sand); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hud__tele { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px 7px; border-radius: 999px; font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; background: rgba(10, 24, 34, .62); border: 1px solid var(--line); }
.hud__tele output { font-family: var(--f-mono); color: var(--sand); font-weight: 700; font-size: calc(14px * var(--ts, 1)); letter-spacing: .02em; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; } /* sem zero à esquerda: "9" e "99" ocupam o mesmo lugar */
.hud__tele span { color: var(--sun); }
.hud__tele small { font-size: calc(12px * var(--ts, 1)); }
.hud__btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--sand); border: 1px solid var(--line); background: rgba(10, 24, 34, .62); transition: color .2s, border-color .2s, background .2s; }
.hud__btn svg { width: 18px; height: 18px; }
.hud__btn:hover, .hud__btn[aria-pressed="true"], .hud__btn[aria-expanded="true"] { color: var(--sun); border-color: rgba(242, 151, 109, .6); background: rgba(242, 151, 109, .12); }
.hud__progress { position: fixed; z-index: 61; left: 0; right: 0; top: 0; height: 8px; overflow: clip; pointer-events: none; transition: opacity .5s; }
.hud__progress > i { position: absolute; inset: 0 0 auto 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--clay), var(--sun), var(--flare)); }
.hud__progress > b { position: absolute; left: -4px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--flare); box-shadow: 0 0 10px var(--flare); }
.hud__acts { position: absolute; inset: 0; }
.hud__acts li { position: absolute; top: 0; width: 2px; height: 8px; background: rgba(244, 239, 229, .55); }
@media (max-width: 1180px) { .hud__name span { display: none; } }
@media (max-width: 1100px) { .hud__name { display: none; } .hud__chapter { max-width: 100%; } }
@media (max-width: 1280px) { .hud__tele { display: none; } } /* a contagem também está no 21; em tela estreita o título do capítulo tem prioridade */
@media (max-width: 900px) { .hud__arc { display: none; } }
/* Projetor 2560: a barra cresce para 84 px e a letra para ~1,43×; emblema, arco e botões acompanham (ficavam no 1×) */
@media (min-width: 2400px) and (min-height: 1300px) {
  .hud__brand { gap: 14px; }
  .hud__emblem { width: 48px; height: 48px; }
  .hud__right { gap: 8px; }
  .hud__arc { width: 70px; height: 30px; }
  .hud__btn { width: 52px; height: 52px; }
  .hud__btn svg { width: 22px; height: 22px; }
}

/* HUD sobre capítulo de areia (core.js marca html[data-tone]) */
/* areia quase opaca até a base da barra (o texto do capítulo que passa por baixo ao rolar entre paradas encavalava
   com a marca do canto), e só então esmaece */
[data-tone="light"] .hud::before { background: linear-gradient(180deg, rgba(244, 239, 229, .99), rgba(244, 239, 229, .96) calc(var(--hud-h) - 4px), rgba(244, 239, 229, 0)); }
[data-tone="light"] .hud__name b { color: var(--navy); }
[data-tone="light"] .hud__name span { color: var(--clay-2); } /* --clay dava 3,7:1 na areia em 13 px */
[data-tone="light"] .hud__chapter, [data-tone="light"] .hud__tele, [data-tone="light"] .hud__btn, [data-tone="light"] .hud__sky { background: rgba(16, 38, 51, .9); border-color: rgba(16, 38, 51, .9); }

/* Índice */
.index { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(10, 24, 34, .93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-y: auto; padding: 96px var(--gutter) 40px; }
.index__inner { width: min(1400px, 100%); display: grid; gap: 28px; }
.index__acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 28px; }
@media (max-width: 1099px) { .index__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 820px) { .index { padding-top: 84px; padding-bottom: 24px; } .index__inner { gap: 20px; } }
.index__act a span { text-wrap: balance; }
.index__act h3 { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: calc(14px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--sun); }
.index__act a { display: flex; gap: 10px; padding: 8px 0; text-decoration: none; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: calc(17px * var(--ts, 1)); line-height: 1.14; color: var(--text-2); border-bottom: 1px solid var(--line); transition: color .2s, padding .25s var(--ease-out); }
.index__act a small { font-family: var(--f-mono); font-weight: 500; font-size: calc(12px * var(--ts, 1)); color: var(--text-3); padding-top: 3px; } /* --slate dava 2,8:1 no véu do índice */
.index__act a:hover, .index__act a[aria-current="true"] { color: var(--sand); padding-left: 6px; }
.index__act a[aria-current="true"] small { color: var(--sun); }

/* ---------- Vinheta de set (corte de ato) ----------
   HTML gerado por scripts/build.mjs (actCard); animação em js/fx.js. A rede desce como cortina de malha por
   cima do fim do capítulo anterior (camada FIXA, fora do .stage, visibility só na janela da vinheta), a
   bola cruza a tela em parábola, a rede sobe e revela a cena do novo horário. Nenhuma pessoa. */
.act-card { padding-block: 0; }
.act-card__stage { background: var(--night); }
.act-card__bg { position: absolute; inset: 0; transform-origin: 60% 50%; }
.act-card__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-card--flip .act-card__bg img { transform: scaleX(-1); } /* foto espelhada (build.mjs → ACT_ART): tira o objeto de baixo do placar */
/* toda imagem gerada leva o crédito: canto inferior direito, no gutter da coluna, longe da lista de capítulos */
.act-card__credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(18px, 3.2vh, 36px); }
.act-card__sky { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .7; }
.act-card__veil { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 24, 34, .92) 0%, rgba(10, 24, 34, .78) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .32), rgba(10, 24, 34, .36) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .6), rgba(10, 24, 34, .06) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .86), rgba(10, 24, 34, .2) 100%),
    linear-gradient(0deg, rgba(10, 24, 34, .88) 0%, rgba(10, 24, 34, .4) 22%, rgba(10, 24, 34, 0) 44%),
    linear-gradient(180deg, rgba(10, 24, 34, .5) 0%, rgba(10, 24, 34, 0) 18%); }
.act-card__txt { position: relative; z-index: 3; height: 100%; display: grid; align-content: end; gap: clamp(14px, 2.2vh, 26px); padding-bottom: clamp(56px, 12vh, 140px); }
.act-card__txt > * { justify-self: start; }
.act-card__hour { display: inline-flex; align-items: center; gap: 16px; font-family: var(--f-mono); font-weight: 700; font-size: calc((clamp(20px, 1.6vw, 30px)) * var(--ts, 1)); letter-spacing: .06em; color: var(--sand); }
.act-card__hour svg { width: clamp(70px, 6vw, 110px); height: auto; overflow: visible; }
/* rótulo da hora: fora do fluxo (a caixa da hora, onde a bola pousa, não muda) e entra junto com ela */
.act-card__hour { position: relative; }
.act-card__hk { position: absolute; left: 0; bottom: 100%; margin-bottom: .5em; font-family: var(--f-mono); font-weight: 500; font-size: calc(12px * var(--ts, 1)); letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; color: var(--sand); white-space: nowrap; text-shadow: 0 1px 8px rgba(10, 24, 34, .7); }
.act-card__hour .h-path { fill: none; stroke: rgba(244, 239, 229, .45); stroke-width: 1.4; stroke-dasharray: 1.5 3.5; vector-effect: non-scaling-stroke; }
.act-card__hour .h-line { stroke: rgba(244, 239, 229, .6); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.act-card__hour .h-sun { fill: var(--flare); filter: drop-shadow(0 0 5px rgba(255, 200, 138, .9)); }
.act-card__num { display: flex; gap: 10px; align-items: center; }
.act-card__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: calc((clamp(56px, 8.4vw, 160px)) * var(--ts, 1)); line-height: .98; letter-spacing: -.02em; color: var(--sand); text-wrap: balance; }
.act-card__list { display: flex; flex-wrap: wrap; gap: 8px 10px; max-width: 980px; }
.act-card__list a { display: inline-flex; gap: 8px; align-items: baseline; padding: 7px 14px 6px; border-radius: 999px; text-decoration: none; font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc(15px * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); background: rgba(10, 24, 34, .62); box-shadow: inset 0 0 0 1px var(--line-2); }
.act-card__list a small { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); color: var(--sun); font-weight: 500; }
.act-card__arc { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 2; overflow: visible; pointer-events: none; }
.act-card__arc path { fill: none; stroke: url(#g-arc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 12; filter: drop-shadow(0 0 6px rgba(242, 151, 109, .5)); }
.act-card__ball { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(40px, 4vw, 64px); height: clamp(40px, 4vw, 64px); pointer-events: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4)); } /* sem margem: o alignOrigin do motionPath já centra */
/* a cortina de rede: fixa, pinta por cima do capítulo anterior */
.act-card__net { position: fixed; inset: 0; z-index: 40; visibility: hidden; pointer-events: none; transform: translateY(-104%); }
.act-card:not(.is-near) .act-card__net { visibility: hidden !important; }
.act-card__mesh { position: absolute; inset: 0; background: rgba(10, 24, 34, .78); }
.act-card__mesh::before { content: ''; position: absolute; inset: 0; opacity: .5;
  background:
    repeating-linear-gradient(0deg, rgba(217, 226, 229, .9) 0 1.5px, transparent 1.5px 34px),
    repeating-linear-gradient(90deg, rgba(217, 226, 229, .9) 0 1.5px, transparent 1.5px 34px); }
.act-card__band { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(34px, 5vh, 58px); background: var(--navy); box-shadow: 0 -2px 0 rgba(244, 239, 229, .85) inset, 0 2px 0 rgba(244, 239, 229, .85) inset, 0 20px 40px rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; gap: 22px;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: calc((clamp(14px, 1.1vw, 20px)) * var(--ts, 1)); color: var(--sand); white-space: nowrap; overflow: hidden; }
.act-card__band i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); flex: none; }
.act-card__score { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); top: calc(var(--hud-h) + clamp(24px, 5vh, 56px)); display: grid; grid-auto-flow: column; gap: 4px; font-family: var(--f-mono); }
.act-card__score span { display: grid; place-items: center; min-width: 68px; padding: 10px 13px 9px; border-radius: 8px; background: rgba(10, 24, 34, .82); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(15px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.act-card__score span.is-on { background: var(--sun); color: var(--navy); box-shadow: none; font-weight: 700; }
.act-card__score span.is-done { color: var(--sand); }
.reduced .act-card__net { display: none; }

/* ---------- Portão do celular ---------- */
.phone-gate { display: none; }
/* Coluna flexível centrada por margens automáticas: quando não cabe (celular deitado, 750 × 342) ela começa do topo
   e rola — o align-content: center da grade empurrava o emblema para -76 px, fora do alcance da rolagem. */
.is-phone .phone-gate { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 26px; text-align: center; overflow: auto; background: var(--night); }
.phone-gate > * { flex: none; max-width: 100%; min-width: 0; }
.is-phone body > *:not(.phone-gate):not(svg) { display: none !important; }
.phone-gate__bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(80% 50% at 50% 100%, rgba(242, 151, 109, .45), transparent 70%), linear-gradient(180deg, #06121a, #10283a 60%, #6b3b2e); }
.phone-gate__emblem { width: 84px; height: 84px; margin-top: auto; }
.phone-gate__k { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sun); }
/* "INTERNACIONAL" mede ~11,1 em nesta letra: o corpo acompanha a largura útil (tela − 52 px de respiro) e para em
   30 px — com 30 px fixos a palavra passava da tela em 320 e 360 */
.phone-gate__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: clamp(20px, calc((100vw - 52px) / 11.6), 30px); line-height: 1.02; }
.phone-gate__name b { display: block; font-size: .62em; color: var(--sun); margin-top: 4px; }
.phone-gate__meta { font-size: 15px; color: var(--text-2); max-width: 30ch; }
.phone-gate__t { margin-top: 10px; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: .04em; }
.phone-gate__p { font-size: 15px; color: var(--text-2); max-width: 32ch; }
.phone-gate__btn { margin-top: 6px; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--sun); color: var(--navy); font-family: var(--f-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.phone-gate__c { margin-top: 8px; margin-bottom: auto; font-size: 14px; color: var(--text-2); }