/* Hallmark · shape: Cartaz de rua em duas cenas, o caos de abas na primeira tela e a arrumação em um cartão de segunda-feira ao rolar · genre: editorial · theme: custom (Cartaz do Magpie, herdado do DESIGN.md) · job: join · idea: "a lista de espera conta a semana de abas virando a mensagem de segunda" · vibe: "cartaz de rua que se arruma sozinho"
 * paper: #F9F5E6 · surface: absolute · accent: #FC463C · display: Archivo Black · body: Work Sans · hero: título em três linhas, uma frase e o botão tomate à esquerda, cartões de aba tortos espalhados à direita · nav: faixa amarela com a marca e o adesivo · footer: uma linha sob filete · imagery: nenhuma, cartões de cor do Cartaz · signature: os cartões de aba se arrumando num cartão de segunda-feira
 * axes: light/grotesk-heavy/chromatic-red · posture: loud · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V4 · weakest: E, sem foto porque o contrato ainda não definiu a imagem da página; a prova é o próprio fluxo da segunda */
/* Hallmark · waive 7b · surface: absolute nos cartões de aba e no texto sobre o cobalto, pares de contraste do DESIGN.md · branco sobre o cobalto como o Cartaz fixou */
@import url("./tokens.css");
@import url("./base.css");
@import url("./shared.css");

.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl) var(--space-xl); min-height: calc(100svh - 64px); }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 1.02; letter-spacing: var(--tracking-display); font-weight: 400; margin-bottom: var(--space-lg); }
.hero .lead { margin-bottom: var(--space-lg); }
.scatter { position: relative; min-height: 460px; }
.tab { background: var(--tab-bg, var(--cat-cobalt)); color: var(--tab-ink, var(--on-cobalt)); border: var(--rule-hair) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-sm) var(--space-md); font-weight: 600; font-size: var(--text-sm); line-height: 1.4; }
.scatter .tab { position: absolute; left: var(--x); top: var(--y); max-width: 62%; rotate: var(--r); }
.tab.cobalt { --tab-bg: var(--cat-cobalt); --tab-ink: var(--on-cobalt); }
.tab.mint { --tab-bg: var(--cat-mint); --tab-ink: var(--on-category); }
.tab.pink { --tab-bg: var(--cat-pink); --tab-ink: var(--on-category); }
.tab.lilac { --tab-bg: var(--cat-lilac); --tab-ink: var(--on-category); }
.tab.tomato { --tab-bg: var(--cat-tomato); --tab-ink: var(--on-category); }
.tab.yellow { --tab-bg: var(--cat-yellow); --tab-ink: var(--on-category); }
.scrub { --p: 1; }
.pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.caps { display: grid; gap: var(--space-lg); justify-items: start; }
.cap { font-family: var(--font-display); font-size: var(--text-section); line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 14ch; }
.board { position: relative; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: visible; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-header); color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-family: var(--font-display); font-size: var(--text-lg); }
.board-body { display: grid; gap: var(--space-md); padding: var(--space-lg); position: relative; }
.board .tab { font-size: var(--text-md); }
.board .tab.gone { display: none; }
.samples { font-size: var(--text-sm); color: var(--color-muted); }
.live .scrub { height: 320svh; }
.live .pin { position: sticky; top: 0; height: 100svh; padding-block: 0; }
.live .caps { position: relative; min-height: 40svh; align-content: center; }
.live .cap { position: absolute; left: 0; top: 50%; translate: 0 -50%; }
.live .cap.c1 { opacity: clamp(0, calc((0.5 - var(--p)) * 8), 1); }
.live .cap.c2 { opacity: clamp(0, calc((var(--p) - 0.55) * 8), 1); }
.live .board-head { opacity: clamp(0, calc((var(--p) - 0.55) * 6), 1); }
.live .board-body .tab:not(.gone) { --e: clamp(0, calc((var(--p) - 0.1) * 1.8), 1); translate: calc(var(--x) * (1 - var(--e))) calc(var(--y) * (1 - var(--e))); rotate: calc(var(--r) * (1 - var(--e))); }
.live .board .tab.gone { display: block; position: absolute; left: var(--gx); top: var(--gy); rotate: var(--r); opacity: clamp(0, calc(1 - (var(--p) - 0.25) * 4), 1); scale: calc(1 - clamp(0, calc((var(--p) - 0.25) * 3), 1) * 0.6); z-index: 2; }
.live .samples { opacity: clamp(0, calc((var(--p) - 0.7) * 5), 1); }
.data { padding-block: var(--space-xl) var(--space-2xl); }
.data .panel { display: grid; gap: var(--space-lg); justify-items: start; background: var(--color-header); color: var(--color-ink); border: var(--rule-hair) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-lg); }
.data h2 { font-size: var(--text-section); line-height: 1.04; letter-spacing: var(--tracking-display); font-weight: 400; max-width: 16ch; }
@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); min-height: 0; }
  .scatter { min-height: 360px; }
  .pin { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-content: center; }
  .live .caps { min-height: 20svh; }
  .board-body { padding: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* Posição dos cartões (o CSP proíbe style="" no HTML) */
.scatter .s1 { --x: 2%; --y: 2%; --r: -4deg; }
.scatter .s2 { --x: 34%; --y: 20%; --r: 3deg; }
.scatter .s3 { --x: 4%; --y: 40%; --r: -2deg; }
.scatter .s4 { --x: 30%; --y: 58%; --r: 5deg; }
.scatter .s5 { --x: 2%; --y: 76%; --r: -5deg; }
.scatter .s6 { --x: 38%; --y: 88%; --r: 2deg; }
.board .b1 { --x: -30px; --y: -70px; --r: -5deg; }
.board .b2 { --x: 50px; --y: 30px; --r: 4deg; }
.board .b3 { --x: -20px; --y: 90px; --r: -3deg; }
.board .b4 { --x: 80px; --y: -20px; --r: 6deg; }
.board .g1 { --gx: -6%; --gy: -10%; --r: -8deg; }
.board .g2 { --gx: 62%; --gy: -14%; --r: 7deg; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast); background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-md); font-weight: 600; }
.skip:focus { top: var(--space-md); }