/* Fonts: the Figma set (Alice, 2026-10-12): Fraunces Light for display and Geist Mono for labels (OFL, Google Fonts,
   loaded in index.html); PP Neue Montreal Regular for all other text, with no tracking (Alice's non-commercial licence;
   local file in fonts/, git-ignored). Sizes and leading mirror the Figma text styles. */
@font-face { font-family: "Neue Montreal"; src: url(fonts/PPNeueMontreal-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Seven blues, lightest to darkest, one per axis. Values set by Alice in Figma, 2026-10-12. */
  --azul-1: #e9f0fc;
  --azul-2: #dae5f8;
  --azul-3: #b4caf0;
  --azul-4: #93afe2;
  --azul-5: #7492d3;
  --azul-6: #4863a1;
  --azul-7: #31498c;
  --tinta: #07122e;      /* replaces the reference's black */
  --papel: #ffffff;
  --brasa: #d45c78;      /* the one complementary colour: CTAs, dates, accents. Alice, 2026-10-12: rose replaced the orange #ff6b35 */

  --serif: "Fraunces", Georgia, serif;
  --sans: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --gutter: 16px;
  --bar: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Page behind a modal (menu, testimony, episode) stays put; iOS scrolls it otherwise */
html:has(dialog[open]) { overflow: hidden; }
/* Touch: no double-tap wait on controls, no text selection on a long press */
a, button { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }
body {
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.4 var(--sans);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.mono {
  font: 400 13px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; height: var(--bar);
}
.bar__mark {
  display: flex; align-items: center; padding: 0 var(--gutter);
  background: var(--tinta); color: var(--papel);
  text-decoration: none; font: 400 18px/1 var(--sans);
}
.bar__menu {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* Right edge lines up with the cover images (Alice). Names the axis being read (main.js; proposal, branch menos-referencia). */
  width: 516px; padding: 0 var(--gutter);
  background: var(--brasa); color: var(--tinta);
  border: 0; font: 400 18px/1 var(--sans); cursor: pointer;
}
.bar__atual { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.bar__atual .mono { font-size: 11px; }
.bar__menu i { font-style: normal; font-size: 22px; transition: transform 200ms var(--ease-out); }
@media (max-width: 767px) { .bar__menu { flex: 1; width: auto; } }

/* ---------- Menu panel (reference: stateofaidesign "Report Chapters") ----------
   Opens as a panel the width of the bar, growing down out of it; the page stays visible beside it.
   Occasional use: drawer curve, 450ms in, 250ms out. Rows rise from a mask, 40ms apart. */
.menu {
  position: fixed; inset: 0 auto 0 0;
  border: 0; padding: 0; margin: 0;
  width: 592px; max-width: 100vw; height: 100dvh; max-height: none;
  background: var(--brasa); color: var(--tinta);
  display: flex; flex-direction: column;
  --fechado: inset(0 0 calc(100% - var(--bar)) 0);
  clip-path: var(--fechado);
  transition: clip-path 250ms var(--ease-drawer), overlay 250ms allow-discrete, display 250ms allow-discrete;
}
.menu:not([open]) { display: none; }
.menu[open] { clip-path: inset(0 0 0 0); transition-duration: 450ms; }
@starting-style { .menu[open] { clip-path: var(--fechado); } }
.menu::backdrop { background: transparent; }

.menu__head {
  flex: none; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); border-bottom: 1px solid var(--tinta);
  font: 400 18px/1 var(--sans);
}
.menu__close { background: none; border: 0; color: inherit; cursor: pointer; font: 400 28px/1 var(--sans); width: 44px; height: 44px; margin-right: -12px; }

.menu__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) var(--gutter); min-height: 0; }
.menu ol { list-style: none; }
.menu li { border-bottom: 1px solid var(--tinta); }
.menu li a { display: block; padding: 6px 20px 2px; text-decoration: none; }
.menu__mask { display: block; overflow: hidden; }
.menu__t {
  --t: min(64px, 7.2vh);
  display: inline-flex; align-items: baseline; white-space: nowrap;
  font: 300 var(--t)/1.08 var(--serif); letter-spacing: -0.045em;
  transform: translateY(105%);
  transition: transform 250ms var(--ease-drawer);
}
/* Proposal (branch menos-referencia): the index leads as a mono label instead of a superscript after the title.
   Sits on the title's baseline, then rises so the tops of the digits meet the tops of the capitals at any size
   (cap heights measured: Fraunces 0.70em, Geist Mono digits 0.726em). */
.menu__t sup { flex: none; width: 48px; font: 400 13px/1 var(--mono); letter-spacing: 0.02em; vertical-align: baseline; position: relative; top: calc(0.726 * 13px - 0.7 * var(--t)); }
.menu[open] .menu__t { transform: none; transition-duration: 600ms; transition-timing-function: var(--ease-out); }
@starting-style { .menu[open] .menu__t { transform: translateY(105%); } }
.menu[open] li:nth-child(1) .menu__t { transition-delay: 120ms; }
.menu[open] li:nth-child(2) .menu__t { transition-delay: 160ms; }
.menu[open] li:nth-child(3) .menu__t { transition-delay: 200ms; }
.menu[open] li:nth-child(4) .menu__t { transition-delay: 240ms; }
.menu[open] li:nth-child(5) .menu__t { transition-delay: 280ms; }
.menu[open] li:nth-child(6) .menu__t { transition-delay: 320ms; }
.menu[open] li:nth-child(7) .menu__t { transition-delay: 360ms; }
.menu__legal { margin-top: 24px; padding-left: 20px; font-size: 11px; }

@media (hover: hover) and (pointer: fine) {
  .menu li a .menu__t { transition-property: transform, opacity; }
  .menu li a:hover .menu__t { opacity: 0.6; }
}
@media (max-width: 767px) {
  .menu { width: 100vw; }
  /* 7.2vh alone cut "Bolsonarismo" and pushed the numbers off a 375px phone */
  .menu__t { --t: min(64px, 7.2vh, 12vw); }
}

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: grid; grid-template-rows: 48svh 1fr; padding-top: 0; }
/* Band: prototype in design/hero/motion.html, round 4 (2026-10-12). Duotone tinta → azul-1 via #hero-duo.
   Wrappers (.hero__bg, .hero__p) carry the drift; the filtered images inside them are rasterised once. */
.hero__band {
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1); /* easeInOutSine: drift that never seems to stop */
  --duo: url(#hero-duo);
  position: relative; overflow: hidden; background: var(--tinta);
  container-type: size;
}
.hero__defs { position: absolute; }
.hero__bg { position: absolute; inset: -6%; will-change: transform; animation: hero-zoom 22s var(--ease-in-out-sine) infinite alternate; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: contrast(1.25) var(--duo) blur(.3cqw); }
@keyframes hero-zoom {
  from { transform: translate3d(-2%, 1.5%, 0) scale(1); }
  to   { transform: translate3d(2%, -1.5%, 0) scale(1.18); }
}
/* Proposal "revelação" (branch menos-referencia, 2026-10-13). The band sits on a 12-column grid (5 on phones), drawn as
   hairlines. Slats: each holds the same sharp photo, offset so they line up as one picture; a CSS wave brings one slat
   into focus after another (opacity only, off the main thread), and main.js swaps in the next photo (Kristallnacht,
   Białystok) as each slat starts a new wave, while it is invisible. Candidates: grid-aligned windows that open and close
   from an edge with clip-path, as in round 4 (Alice, 2026-10-13); the name runs vertically along the window's left edge,
   inside the clip so it enters with the photo. */
.hero__band { --cols: 12; --step: 0.9s; }
.hero__slat {
  position: absolute; top: 0; bottom: 0; overflow: hidden;
  left: calc(var(--i) * 100% / var(--cols)); width: calc(100% / var(--cols));
  opacity: 0; will-change: opacity;
  animation: hero-foco 16s linear infinite; animation-delay: calc(var(--i) * var(--step));
}
.hero__slat > div { position: absolute; top: 0; height: 100%; width: calc(var(--cols) * 100%); left: calc(var(--i) * -100%); }
.hero__slat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: contrast(1.15) var(--duo) blur(.1cqw); }
@keyframes hero-foco {
  0%   { opacity: 0; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  10%  { opacity: 1; }
  28%  { opacity: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero__grade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, transparent calc(100% - 1px), rgba(233, 240, 252, .28) 0) 0 0 / calc(100% / var(--cols)) 100%;
}
.hero__p {
  /* The figure includes the name strip on its left (--lab), so one clip-path covers window and name */
  --lab: max(20px, 2cqw);
  position: absolute; z-index: 2; margin: 0 0 0 calc(-1 * var(--lab)); padding-left: var(--lab);
  width: calc(2 * 100% / var(--cols) + var(--lab));
  clip-path: inset(0 100% 0 0);
  will-change: transform; animation: hero-drift var(--d) var(--ease-in-out-sine) infinite alternate; animation-delay: var(--dl, 0s);
}
@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, var(--dy), 0); }
}
.hero__p--lula   { left: calc(2 * 100% / var(--cols)); top: 10%; --d: 19s; --dy: 7cqh; }
.hero__p--flavio { left: calc(7 * 100% / var(--cols)); top: 38%; --d: 21s; --dl: -9s; --dy: -7cqh; }
.hero__win { position: relative; aspect-ratio: 1; overflow: hidden; }
.hero__win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--duo); }
.hero__nome {
  position: absolute; left: 0; bottom: 0; width: var(--lab);
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; padding: .8cqw 0; background: var(--tinta); color: var(--azul-1);
  font-size: clamp(9px, .82cqw, 13px); white-space: nowrap;
}

.hero__text {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter);
  padding: 24px var(--gutter) var(--gutter); border-top: 1px solid var(--tinta);
}
.hero__lede { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.hero__lede p:first-child { font-size: 20px; line-height: 1.25; max-width: 300px; }
.hero__title { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; }
.hero__title h1 {
  font: 300 clamp(56px, 10.55vw, 176px)/0.82 var(--serif);
  letter-spacing: -0.045em;
  white-space: nowrap; /* no bleed: the Figma title sits inside its column */
}
.hero__title h1 .line { display: block; padding: 0.12em 0 0.1em; margin: -0.12em 0 -0.1em; }
.hero__title h1 em { font-style: italic; }
/* Focus-in (proposal, branch menos-referencia): titles go from blurred to sharp instead of rising from a mask */
.hero__title h1 .line > span { display: block; opacity: 0; filter: blur(14px); transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out); }
.hero.is-in h1 .line > span { opacity: 1; filter: none; }
.hero.is-in h1 .line:nth-child(2) > span { transition-delay: 80ms; }
.scroll-hint { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.scroll-hint span { color: var(--brasa); }

@media (max-width: 767px) {
  /* Phone: the band starts below the fixed bar (it hid Lula's face); the hero fills the first screen,
     title and lede on top, the credit and "Role para ler" (last) together at the bottom (Alice, 2026-10-12) */
  .hero { grid-template-rows: 38svh 1fr; padding-top: var(--bar); }
  /* Phone: five columns; each portrait two columns wide, the middle one left free for the pogrom.
     Names sit horizontally outside the window, Lula's under it, Flávio's over it. */
  .hero__band { --cols: 5; --step: 2.16s; }
  .hero__slat:nth-child(n+6) { display: none; }
  .hero__p { --lab: 18px; margin: 0; padding: 0; width: calc(2 * 100% / var(--cols)); }
  .hero__p--lula   { left: 0; top: 6%; padding-bottom: var(--lab); --dy: 5cqh; }
  .hero__p--flavio { left: 60%; top: 34%; padding-top: var(--lab); --dy: -5cqh; }
  .hero__nome { writing-mode: horizontal-tb; transform: none; width: auto; height: var(--lab); font-size: 9px; padding: 0 6px; }
  .hero__p--flavio .hero__nome { left: auto; right: 0; bottom: auto; top: 0; }
  .hero__text { display: flex; flex-direction: column; padding-bottom: 24px; }
  .hero__title, .hero__lede { display: contents; }
  .hero__title h1 { white-space: normal; margin-right: 0; font-size: 50px; }
  .hero__lede p:first-child { order: 1; margin-top: 32px; font-size: 18px; }
  .hero__lede .mono { order: 2; margin-top: auto; padding-top: 32px; }
  .scroll-hint { order: 3; margin-top: 16px; }
}

/* ---------- Opening modules (Alice, Figma 2026-10-12) ---------- */
.mod { padding: var(--bar) var(--gutter) var(--gutter); }
.mod--inflexao { padding-top: 72px; }
.mod__meta { padding: 14px 0; border-top: 1px solid var(--tinta); min-height: 45px; }
.linha { font: 300 clamp(30px, 2.9vw, 42px)/1.04 var(--serif); letter-spacing: -0.03em; }
.mod--inflexao .linha { margin-top: 32px; max-width: 709px; }

.mod--gravura figure { aspect-ratio: 1408 / 798; overflow: hidden; position: relative; }
.mod--gravura figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 6px; background: rgba(7,18,46,0.8); color: #fff; font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.02em; }
/* Images come into focus instead of settling from a scale (proposal, branch menos-referencia) */
.mod--gravura img { width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(16px); transition: opacity 900ms var(--ease-out), filter 1200ms var(--ease-out); }
.mod--gravura.is-in img { opacity: 1; filter: none; }

/* padding-bottom keeps the ~88px under the text that min-height gave the shorter opening (script of 2026-10-13 is longer) */
.mod--cruz { min-height: 486px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 596fr) minmax(0, 796fr); column-gap: var(--gutter); }
.mod--cruz .abertura { grid-column: 2; }

/* ---------- Quote (reference 2.3) ---------- */
.quote[hidden] { display: none; }
.quote { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.quote__who { background: var(--tinta); color: var(--papel); padding: 16px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; }
.quote__glyph { font: 400 120px/0.8 var(--serif); color: var(--brasa); }
.quote__author { align-self: start; padding-top: 220px; }
.quote__author p:first-child { font-size: 18px; margin-bottom: 6px; }
.quote__author .mono { color: rgba(255,255,255,0.6); }
.quote__author { opacity: 0; transform: translateY(48px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.quote.is-in .quote__author { opacity: 1; transform: none; transition-delay: 150ms; }
.quote__text { background: var(--azul-2); padding: 24px var(--gutter); }
.quote__text blockquote { font: 300 clamp(36px, 3.6vw, 52px)/1.02 var(--serif); letter-spacing: -0.035em; max-width: 16ch; }

/* ---------- Axis covers (reference 2.4, structure by Alice) ---------- */
.capa {
  --bg: var(--azul-1); --fg: var(--tinta);
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column;
  padding: var(--bar) var(--gutter) var(--gutter);
  min-height: 100vh;
  /* Covers stack (reference 2.4) at every size. One taller than the screen sticks once its bottom reaches the
     screen's bottom, so it is read whole before the next slides over it; --h is its height, set in main.js. */
  position: sticky; top: min(0px, calc(100svh - var(--h, 100svh)));
}
.capa[data-n="1"] { --bg: var(--azul-1); }
.capa[data-n="2"] { --bg: var(--azul-2); }
.capa[data-n="3"] { --bg: var(--azul-3); }
.capa[data-n="4"] { --bg: var(--azul-4); }
.capa[data-n="5"] { --bg: var(--azul-5); }
.capa[data-n="6"] { --bg: var(--azul-6); --fg: var(--papel); }
.capa[data-n="7"] { --bg: var(--azul-7); --fg: var(--papel); }

.capa__meta { border-top: 1px solid var(--fg); height: 29px; flex: none; }
/* Two rows: name | opening, then image | list + CTA. The bottom row takes the image's height,
   so "Nesse eixo" always starts at the image's top and the CTA ends at its bottom (Alice, 2026-10-12). */
.capa__main {
  flex: 1; display: grid; column-gap: var(--gutter); row-gap: 32px;
  grid-template-columns: minmax(0, 596fr) minmax(0, 796fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "nome abertura" "img fim";
}
.capa__name { grid-area: nome; }
.capa__main > .abertura { grid-area: abertura; }
.capa__img, .capa > .capa__main > .stats { grid-area: img; align-self: start; }
.capa__fim { grid-area: fim; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; }
.capa__fim .eixo-lista { max-width: 594px; }

.capa__name { font: 300 clamp(64px, 7.2vw, 104px)/0.9 var(--serif); letter-spacing: -0.045em; }
.capa__name .line { display: block; padding-bottom: 0.06em; }
.capa__name .line > span { display: block; opacity: 0; filter: blur(12px); transition: opacity 800ms var(--ease-out), filter 800ms var(--ease-out); }
.capa__name .line:nth-child(2) > span { transition-delay: 60ms; }
.capa__name .line:nth-child(3) > span { transition-delay: 120ms; }
.capa.is-in .capa__name .line > span { opacity: 1; filter: none; }

.capa__img { position: relative; width: min(100%, 576px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--tinta);
  opacity: 0; filter: blur(16px); transition: opacity 900ms var(--ease-out), filter 1200ms var(--ease-out); }
.capa.is-in .capa__img { opacity: 1; filter: none; }
.capa__img img { width: 100%; height: 100%; object-fit: cover; }
.capa__img figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 6px; background: rgba(7,18,46,0.8); color: #fff; font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.02em; }
/* Cover images (Alice, 2026-10-12): the hero's duotone (#hero-duo, tinta → azul-1) plus a light static grain */
.capa__img--duo img { filter: url(#hero-duo); }
.capa__img--duo figcaption { z-index: 1; max-width: calc(100% - 16px); line-height: 1.3; }
.capa__img--duo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.abertura { display: flex; flex-direction: column; gap: 32px; max-width: 594px; }
/* Figma "Texto/Corpo": Neue Montreal 16 / 150%, no tracking, 16px between paragraphs */
.corpo { font: 400 16px/1.5 var(--sans); }
.corpo + .corpo { margin-top: 16px; }
.capa .abertura, .capa .eixo-lista {
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.capa.is-in .abertura { opacity: 1; transform: none; transition-delay: 120ms; }
.capa.is-in .eixo-lista { opacity: 1; transform: none; transition-delay: 220ms; }

.eixo-lista ul { list-style: none; margin-top: 32px; }
.eixo-lista li { padding: 16px 0; border-bottom: 1px solid var(--fg); font-size: 15px; line-height: 1.3; }
/* Episode rows that open the episode dialog (test on axis 01, 2026-10-12): date | title | arrow */
.eixo-lista li:has(.ep) { padding: 0; }
/* No label above the episodes: the list's top hairline sits on the image's top edge */
.eixo-lista ul:first-child { margin-top: 0; border-top: 1px solid var(--fg); }
.ep {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  width: 100%; padding: 16px 8px 16px 0; background: transparent; border: 0; color: inherit; text-align: left;
  font: inherit; cursor: pointer; transition: background-color 200ms ease;
}
.ep__data { font-size: 11px; opacity: 0.7; white-space: nowrap; }
.ep__seta { transition: transform 200ms var(--ease-out); }
.ep:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
/* Press feedback for touch, where the hover tint never shows */
.ep:active { background: color-mix(in srgb, var(--fg) 10%, transparent); transition-duration: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .ep:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
  .ep:hover .ep__seta { transform: translateX(4px); }
}

/* Axis 07: the two numbers take the photo's place */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); border-top: 1px solid var(--fg); padding-top: 16px; }
.stat__v { font: 300 clamp(64px, 6vw, 96px)/0.9 var(--serif); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat__l { margin-top: 10px; max-width: 30ch; }
.stat .mono { margin-top: 10px; opacity: 0.7; }

.capa__cta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 16px; background: var(--tinta); color: var(--papel);
  font: 400 18px/1 var(--sans); text-decoration: none;
}
.capa[data-n="7"] .capa__cta { background: var(--brasa); color: var(--tinta); }
.capa__cta .mono { opacity: 0.6; font-size: 10px; }

/* Desktop: covers stack over each other with sticky alone (reference 2.4), only when a whole cover fits. */
@media (min-width: 1024px) and (min-height: 720px) {
  .capa { position: sticky; top: 0; height: 100vh; min-height: 0; }
  /* A cover with five or more episodes (02 Lula, 05 Flávio, script of 2026-10-13) does not fit one screen: it grows
     instead of clipping its list, and sticks once its bottom reaches the screen's bottom, as on smaller screens. */
  .capa:has(.eixo-lista li:nth-child(5)) { top: min(0px, calc(100svh - var(--h, 100svh))); height: auto; min-height: 100vh; }
  /* A long opening takes height from the photo first, which crops shorter */
  .capa__main { grid-template-rows: 1fr minmax(0, auto); min-height: 0; }
  .capa__img { max-height: 100%; }
}

@media (max-width: 1023px) {
  .mod--cruz { grid-template-columns: 1fr; min-height: 0; padding-bottom: 64px; }
  .mod--cruz .abertura { grid-column: 1; margin-top: 24px; }
  .capa { min-height: 0; padding-bottom: 32px; }
  .capa__main { display: flex; flex-direction: column; gap: 24px; }
  .capa__fim { display: contents; }
  /* Scales down on narrow phones so "Diga-me com" (axis 04) stays on one line at 320px */
  .capa__name { order: 1; font-size: min(56px, 15.5vw); margin-top: 12px; }
  .capa__main > .abertura { order: 2; }
  .eixo-lista { order: 3; }
  .capa__img, .stats { order: 4; width: 100%; margin-top: 8px; }
  .capa__cta { order: 5; }
  .capa { scroll-margin-top: var(--bar); }
}
@media (max-width: 767px) {
  .linha { font-size: 28px; }
  .quote { grid-template-columns: 1fr; min-height: 0; }
  .quote__text { order: -1; padding-bottom: 64px; }
  .quote__text blockquote { font-size: 40px; }
  .quote__who { grid-template-columns: 1fr; gap: 24px; }
  .quote__author { padding-top: 0; }
}
@media (max-width: 599px) {
  .stats { grid-template-columns: 1fr; }
  .stat__v { font-size: 72px; }
}

/* ---------- Vozes: carousel before the footer (reference 2.5, case studies) ----------
   Cards up to 460x560 desktop (scaled to the viewport, see --voz-h) / 267px phones on a 16px gap, arrows top-right, 16px accent bar under each thumbnail.
   Hover widens the card to 580px, turns the bar brasa and reveals one line. Unlike the reference the track
   snaps (reference 7.1 note). Alice asked for a slower, softer hover (2026-10-12): the widening is on-screen
   morphing, so strong ease-in-out at 600ms; colour 400ms ease; the extra line follows 120ms later. */
.vozes {
  padding: 72px 0 96px; overflow: hidden;
  /* Thumbnail height follows the viewport so title + cards fit one fold (Alice, 2026-10-12);
     600px covers the fixed bar, label, title, card captions and some air; Alice then asked for 20% more, then
     50% on top of that, then 10% less across the board, cap included (2026-10-12), so short screens trade the
     captions for bigger images. Width and quote scale with it. */
  --voz-h: calc(min(560px, clamp(300px, 100svh - 600px, 560px) * 1.8) * 0.9);
}
.vozes > .mod__meta { margin: 0 var(--gutter); }
.vozes__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 32px var(--gutter) 40px; }
.vozes__head h2 { font: 300 clamp(44px, 5.6vw, 80px)/0.92 var(--serif); letter-spacing: -0.045em; max-width: 12ch; padding-bottom: 0.06em; }
.vozes__setas { display: flex; gap: 8px; flex: none; }
.vozes__seta {
  width: 56px; height: 56px; border: 0; background: var(--tinta); color: var(--papel);
  font: 400 22px/1 var(--sans); cursor: pointer;
  transition: opacity 150ms ease, transform 120ms var(--ease-out), background-color 300ms ease;
}
.vozes__seta:disabled { opacity: 0.5; cursor: default; }
.vozes__seta:not(:disabled):active { transform: scale(0.96); }

.vozes__trilho {
  list-style: none; display: flex; gap: 16px; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 0 var(--gutter); scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.vozes__trilho::-webkit-scrollbar { display: none; }
.voz { flex: 0 0 calc(var(--voz-h) * 460 / 560); min-width: 0; scroll-snap-align: start; }
.voz > a, .voz__abrir { display: block; width: 100%; text-decoration: none; color: inherit; }
.voz__abrir { border: 0; padding: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.voz__abrir > span { display: block; }
.voz__thumb {
  display: block; position: relative; height: var(--voz-h); overflow: hidden; background: var(--tinta);
  border-bottom: 16px solid var(--azul-3); transition: border-color 400ms ease;
}
.voz__thumb img { width: 100%; height: 100%; object-fit: cover; }
.voz--video .voz__thumb img { object-position: 50% 58%; }
/* Golem post cover in black and white so it stays inside the palette (Alice, 2026-10-12) */
.voz--post .voz__thumb img { filter: grayscale(1); }
.voz--depoimento .voz__thumb { display: flex; align-items: flex-end; padding: 16px; color: var(--papel); }
/* Opening quote hangs into the margin so the text block stays aligned */
.voz__citacao { display: block; font: 300 calc(var(--voz-h) * 38 / 560)/1.04 var(--serif); letter-spacing: -0.03em; max-width: 14ch; text-indent: -0.4em; padding-left: 0.4em; }
.voz__play { position: absolute; left: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: var(--brasa); display: grid; place-items: center; }
.voz__play::after { content: ""; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--tinta); }
.voz__tipo { margin-top: 16px; opacity: 0.6; }
.voz__titulo { margin-top: 8px; font: 400 24px/1.1 var(--sans); }
.voz__meta { margin-top: 6px; font-size: 14px; line-height: 1.35; opacity: 0.6; }
.voz__mais {
  margin-top: 12px; font-size: 15px; line-height: 1.35; max-width: 46ch;
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  /* Widening is the reference's own effect: neighbours shift right. Four cards, so the layout cost is accepted. */
  .voz { transition: flex-basis 600ms var(--ease-in-out); }
  .voz:hover, .voz:has(:focus-visible) { flex-basis: calc(var(--voz-h) * 580 / 560); }
  .voz:hover .voz__thumb, .voz:has(:focus-visible) .voz__thumb { border-bottom-color: var(--brasa); }
  .voz:hover .voz__mais, .voz:has(:focus-visible) .voz__mais {
    opacity: 1; transform: none;
    transition-duration: 500ms; transition-delay: 120ms;
  }
  .vozes__seta:not(:disabled):hover { background: var(--azul-7); }
}
@media (hover: none) { .voz__mais { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .vozes { padding: 48px 0 64px; }
  .vozes__head { padding-bottom: 24px; }
  .vozes__head h2 { font-size: 44px; }
  .vozes__seta { width: 44px; height: 44px; }
  .voz { flex-basis: 267px; }
  .voz__thumb { height: 334px; }
  .voz__citacao { font-size: 26px; }
}

/* ---------- Testimony modal (full screen, dark blue; Alice, 2026-10-12, replaced the drawer) ----------
   Same two columns as the rest of the page: author left, title and text right.
   Motion (animate skill; purpose: spatial consistency). The modal grows out of the card's dark thumbnail
   into the full screen with clip-path, 650ms strong ease-in-out (on-screen morph); author, title and text
   then rise 16px and fade in, 60ms apart, 600ms strong ease-out. Closing reverses into the card in 420ms.
   Driven by WAAPI in main.js because the start shape is the card's live position.
   Native <dialog> for focus trap, Esc and an inert page. */
.depo {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--tinta); color: var(--papel);
}
.depo:not([open]) { display: none; }
.depo::backdrop { background: transparent; }

.depo__fechar {
  position: absolute; top: 24px; right: 24px; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.depo__fechar svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform 300ms var(--ease-out); }
.depo__fechar:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .depo__fechar:hover { background: rgba(255, 255, 255, 0.12); }
  .depo__fechar:hover svg { transform: rotate(90deg); }
}
.depo__corpo {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 596fr) minmax(0, 796fr); column-gap: var(--gutter);
  padding: 72px 40px 120px;
}
.depo__lado { align-self: start; position: sticky; top: 0; }
.depo__autor { font-size: 20px; line-height: 1.25; }
.depo__meta { margin-top: 10px; font-size: 20px; line-height: 1.4; color: var(--azul-3); max-width: 22ch; }
.depo__texto { max-width: 660px; }
.depo__titulo { font: 300 clamp(40px, 3.6vw, 52px)/1.04 var(--serif); letter-spacing: -0.035em; margin-bottom: 48px; }
.depo__texto .corpo { font-size: 20px; line-height: 1.5; }
.depo__texto .corpo + .corpo { margin-top: 24px; }
.depo__fonte { color: var(--azul-3); }
.ep__eixo { font-size: 11px; color: var(--azul-3); margin-bottom: 16px; }
.ep__citacao { margin: 40px 0; padding-left: 0.4em; text-indent: -0.4em; }
.ep__citacao p { font: 300 clamp(28px, 2.6vw, 38px)/1.12 var(--serif); letter-spacing: -0.03em; }
.ep__citacao footer { margin-top: 16px; text-indent: 0; font-size: 11px; color: var(--azul-3); }
.ep__fontes { margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 16px; }
.ep__fontes .mono { font-size: 11px; color: var(--azul-3); }
.ep__fontes ul { list-style: none; margin-top: 8px; }
.ep__fontes li { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.ep__fontes a { display: block; padding: 14px 0; color: inherit; text-decoration: none; font-size: 15px; line-height: 1.35; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .ep__fontes a:hover { color: var(--azul-3); } }
@media (max-width: 767px) {
  /* Solid disc: the text scrolls under the × on a phone */
  .depo__fechar { top: 8px; right: 8px; background: var(--tinta); }
  .depo__corpo { display: block; padding: 64px var(--gutter) 80px; }
  .depo__lado { position: static; margin-bottom: 32px; }
  .depo__autor, .depo__meta { font-size: 16px; }
  .depo__titulo { font-size: 34px; margin-bottom: 32px; }
  .depo__texto .corpo { font-size: 17px; }
}

/* ---------- Footer ---------- */
.fim {
  background: var(--azul-7); color: var(--papel);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--bar) + 16px) var(--gutter) clamp(40px, 6vw, 96px);
}
.fim__mark { margin: 120px 0 0; font: 300 clamp(48px, 8.4vw, 168px)/0.9 var(--serif); letter-spacing: -0.04em; text-wrap: balance; }
/* Same focus-in as the hero and cover titles */
.fim__mark .line { display: block; padding: 0.12em 0 0.1em; margin: -0.12em 0 -0.1em; }
.fim__mark .line > span { display: block; opacity: 0; filter: blur(14px); transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out); }
.fim__mark .line:nth-child(2) > span { transition-delay: 80ms; }
.fim__nos { white-space: nowrap; }
.fim__bandeira { display: inline-block; height: 0.55em; width: auto; margin-left: 0.25em; vertical-align: baseline; }
.fim.is-in .fim__mark .line > span { opacity: 1; filter: none; }
.fim .mono { color: rgba(255,255,255,0.7); }
/* Numbers band (test): hairlines top and bottom, dividers between cells, as in the reference */
.fim__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.8fr);
  border-top: 1px solid rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.4); }
.fim__cel { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: clamp(160px, 15vw, 216px); padding: 16px 16px 16px 0; }
.fim__cel + .fim__cel { padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.4); }
.fim__rotulo { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; max-width: 9em; }
.fim__num { font: 300 clamp(64px, 8vw, 128px)/0.85 var(--serif); letter-spacing: -0.04em; }
.fim__leg { font-size: 18px; }
/* Closing note (test, 2026-10-13): small text aligned to the top of the numbers */
.fim__cel--nota { justify-content: flex-start; }
/* Optical offset: the numerals' ink starts ~0.09em below their box; the note's caps ~4.8px below its own */
.fim__nota { font-size: 15px; line-height: 1.4; margin-top: calc(clamp(64px, 8vw, 128px) * 0.09 - 4.8px); color: rgba(255,255,255,0.7); max-width: 32em; text-wrap: pretty; }
@media (max-width: 767px) {
  .fim__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fim__cel:first-child { grid-column: 1 / -1; min-height: 0; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,0.4); }
  .fim__cel:nth-child(2) { padding-left: 0; border-left: 0; }
  .fim__leg { font-size: 15px; }
  .fim__cel.fim__cel--nota { grid-column: 1 / -1; min-height: 0; padding: 16px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.4); }
  .fim__nota { margin-top: 0; }
}

/* ---------- Reduced motion: keep the fades, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__title h1 .line > span, .capa__name .line > span, .fim__mark .line > span { filter: none !important; transition: opacity 200ms ease; }
  .hero__bg, .hero__p, .hero__slat { animation: none; }
  .hero__slat:nth-child(4n+2) { opacity: .9; }
  .hero__p { clip-path: none; }
  .voz { transition: none !important; }
  .voz__mais { transform: none !important; }
  .depo__fechar svg, .ep__seta { transition: none; }
  .quote__author, .abertura, .eixo-lista, .capa__img, .mod--gravura img { transform: none !important; filter: none !important; transition-property: opacity; transition-duration: 200ms; }
  .menu, .menu[open] { clip-path: none; transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; opacity: 1; }
  @starting-style { .menu[open] { opacity: 0; } }
  .menu__t, .menu[open] .menu__t { transform: none; transition: none; }
}