/* =====================================================
   psicologia em pauta - home + leitura, design system v0.3 PREMIUM
   Base: maquete home-v1 (chrome Awwwards-tier) + SPA cinematográfica
   (cortina clip-path + article view). Ligado ao Supabase.
   OKLCH paleta · ticker · magnetic cursor · scroll progress
   theme toggle persistente · circadiano · kinetic typography
   ===================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* === tipografia === */
  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* === escala fluida === */
  --fs-counter: clamp(72px, 15vw, 220px);
  --fs-hero: clamp(64px, 12vw, 220px);
  --fs-featured: clamp(40px, 4.5vw, 72px);
  --fs-h2: clamp(32px, 4vw, 64px);
  --fs-h3: clamp(28px, 3.6vw, 56px);
  --fs-body-lg: clamp(18px, 1.4vw, 22px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-mono: 12px;
  --fs-mono-sm: 11px;

  /* leitura (article view) */
  --fs-title: clamp(32px, 4.2vw, 60px);
  --fs-dek: clamp(20px, 1.8vw, 26px);
  --fs-article-h2: clamp(28px, 2.6vw, 38px);
  --measure: 620px;

  /* === spacing === */
  --gutter: clamp(24px, 4vw, 80px);
  --section: clamp(76px, 8vw, 128px); /* S172-EXT-7: era clamp(96px,14vw,220px) — gaps entre seções viraram buracos cavernosos, não respiro */

  /* === motion === */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cinema: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.4s;
  --dur-slow: 0.7s;
  --dur-cinema: 1.2s;
  --dur-curtain-close: 0.8s;
  --dur-curtain-open: 0.9s;

  /* === radii === */
  --r-sm: 2px;
  --r-md: 6px;
  --r-pill: 999px;

  /* === altura real do header (medida em JS no load + resize · L1) ===
     fallback ~71px enquanto o JS não mede. Tudo que dependia de offset hardcoded
     (ticker top, offset de âncora) deriva daqui. */
  --h-header: 71px;
  /* folga extra somada ao header p/ scroll de âncora não colar no chrome */
  --anchor-gap: 32px;
}

/* === LIGHT THEME (default) === */
html[data-resolved="light"] {
  color-scheme: light;
  --bg: oklch(98.5% 0.005 80);
  --bg-elevated: oklch(100% 0 0);
  --bg-inverse: oklch(12% 0.01 80);
  --fg: oklch(15% 0.01 80);
  --fg-inverse: oklch(98.5% 0.005 80);
  --fg-muted: oklch(15% 0.01 80 / 0.62);
  /* subtle subiu de 0.40 (2.69:1) → 0.58 (4.79:1) p/ passar WCAG AA em texto · R4 */
  --fg-subtle: oklch(15% 0.01 80 / 0.58);
  --rule: oklch(15% 0.01 80 / 0.10);
  --rule-strong: oklch(15% 0.01 80 / 0.22);
  --accent: oklch(48% 0.18 25);
  --accent-bright: oklch(60% 0.22 25);
  --accent-deep: oklch(32% 0.14 25);
  /* accent garantido p/ texto pequeno (≥4.5:1 sobre --bg light) · sobrescrito por fase nas extremas (dawn/dusk) */
  --accent-text: var(--accent);

  /* cores verticais OKLCH (luma controlada · chroma consistente) */
  --v-clinica: oklch(48% 0.08 145);
  --v-neuro: oklch(42% 0.14 250);
  --v-sociedade: oklch(45% 0.18 28);
  --v-filosofia: oklch(22% 0.02 280);
  --v-tecnologia: oklch(46% 0.18 350);
  /* verticais quentes com luma baixada só em light p/ AA · comportamento 4.30→5.50 · desenvolvimento 4.87→5.55 · saúde 4.41→5.46 (R4) */
  --v-comportamento: oklch(52% 0.14 60);
  --v-educacao: oklch(50% 0.01 280);
  --v-desenvolvimento: oklch(52% 0.14 50);
  --v-psicanalise: oklch(48% 0.09 70);
  --v-saude: oklch(50% 0.11 155);
  --v-cadeira: var(--accent);

  --noise-opacity: 0.45;
  --shadow-elev: 0 1px 0 oklch(0% 0 0 / 0.04), 0 6px 24px oklch(0% 0 0 / 0.04);
  --curtain-bg: oklch(7% 0.015 280);
  --curtain-fg: oklch(96% 0.005 80);
}

/* === CIRCADIANO · camada cromática (override de --accent + --accent-soft + ambient por hora) ===
   Background permanece neutro (light/dark via toggle).
   A "voz cromática" pulsa com o relógio em TODOS elementos --accent.
   ================================================================ */

html[data-circadian="dawn"] {
  --accent: oklch(60% 0.18 38);
  --accent-bright: oklch(72% 0.20 38);
  --accent-deep: oklch(40% 0.15 38);
  --accent-soft: oklch(60% 0.18 38 / 0.10);
  --accent-text: var(--accent);
  --vignette-opacity: 0.45;
}
html[data-circadian="day"] {
  --accent-soft: oklch(48% 0.18 25 / 0.06);
  --accent-text: var(--accent);
  --vignette-opacity: 0.18;
}
html[data-circadian="dusk"] {
  --accent: oklch(56% 0.23 58);
  --accent-bright: oklch(70% 0.25 58);
  --accent-deep: oklch(38% 0.19 58);
  --accent-soft: oklch(56% 0.23 58 / 0.12);
  --accent-text: var(--accent);
  --vignette-opacity: 0.55;
}
html[data-circadian="night"] {
  --accent: oklch(46% 0.22 360);
  --accent-bright: oklch(60% 0.25 360);
  --accent-deep: oklch(32% 0.18 360);
  --accent-soft: oklch(46% 0.22 360 / 0.10);
  --accent-text: var(--accent);
  --vignette-opacity: 0.40;
}

/* === --accent-text · luma garantida p/ TEXTO PEQUENO nas fases quentes em LIGHT (R4) ===
   só em light: dawn (accent 4.10:1) e dusk (4.75:1) ficavam sub-4.5 quando usados como
   texto miúdo. Aqui um tom mais escuro do mesmo matiz garante ≥4.5:1 sobre --bg.
   day/night em light já passam (6.91 / 7.00). Dark não é tocado (--accent-text = --accent). */
html[data-resolved="light"][data-circadian="dawn"] {
  --accent-text: oklch(52% 0.18 38); /* 5.72:1 sobre --bg light */
}
html[data-resolved="light"][data-circadian="dusk"] {
  --accent-text: oklch(52% 0.21 58); /* 5.60:1 sobre --bg light */
}

/* texto miúdo em accent (mono/kicker/labels) usa --accent-text p/ garantir AA nas fases quentes.
   Não afeta elementos display grandes (títulos/em), que podem manter o accent vivo. */
html[data-resolved="light"][data-circadian="dawn"] .section-mark span,
html[data-resolved="light"][data-circadian="dawn"] .ritual-label,
html[data-resolved="light"][data-circadian="dawn"] .vertical-tag,
html[data-resolved="light"][data-circadian="dawn"] .next-label,
html[data-resolved="light"][data-circadian="dawn"] .next-num,
html[data-resolved="light"][data-circadian="dawn"] .next-vertical,
html[data-resolved="light"][data-circadian="dawn"] .curtain-progress-label,
html[data-resolved="light"][data-circadian="dawn"] .menu-link-num,
html[data-resolved="light"][data-circadian="dawn"] .menu-label,
html[data-resolved="light"][data-circadian="dawn"] .menu-time,
html[data-resolved="light"][data-circadian="dawn"] .scriba-role-big,
html[data-resolved="light"][data-circadian="dusk"] .section-mark span,
html[data-resolved="light"][data-circadian="dusk"] .ritual-label,
html[data-resolved="light"][data-circadian="dusk"] .vertical-tag,
html[data-resolved="light"][data-circadian="dusk"] .next-label,
html[data-resolved="light"][data-circadian="dusk"] .next-num,
html[data-resolved="light"][data-circadian="dusk"] .next-vertical,
html[data-resolved="light"][data-circadian="dusk"] .curtain-progress-label,
html[data-resolved="light"][data-circadian="dusk"] .menu-link-num,
html[data-resolved="light"][data-circadian="dusk"] .menu-label,
html[data-resolved="light"][data-circadian="dusk"] .menu-time,
html[data-resolved="light"][data-circadian="dusk"] .scriba-role-big {
  color: var(--accent-text);
}

/* dark bg + circadian phase: luma elevada pra contraste sobre preto */
html[data-resolved="dark"][data-circadian="dawn"] {
  --accent: oklch(74% 0.18 38);
  --accent-bright: oklch(84% 0.20 38);
  --accent-deep: oklch(56% 0.16 38);
  --accent-soft: oklch(74% 0.18 38 / 0.14);
}
html[data-resolved="dark"][data-circadian="day"] {
  --accent-soft: oklch(62% 0.22 25 / 0.10);
}
html[data-resolved="dark"][data-circadian="dusk"] {
  --accent: oklch(74% 0.23 58);
  --accent-bright: oklch(84% 0.25 58);
  --accent-deep: oklch(56% 0.19 58);
  --accent-soft: oklch(74% 0.23 58 / 0.16);
}
html[data-resolved="dark"][data-circadian="night"] {
  --accent: oklch(70% 0.25 360);
  --accent-bright: oklch(82% 0.28 360);
  --accent-deep: oklch(50% 0.21 360);
  --accent-soft: oklch(70% 0.25 360 / 0.14);
}

/* === DARK THEME (manual toggle OU auto+prefers-dark) === */
html[data-resolved="dark"] {
  color-scheme: dark;
  --bg: oklch(11% 0.005 280);
  --bg-elevated: oklch(15% 0.008 280);
  --bg-inverse: oklch(98% 0.005 80);
  --fg: oklch(96% 0.005 80);
  --fg-inverse: oklch(15% 0.01 80);
  --fg-muted: oklch(96% 0.005 80 / 0.62);
  --fg-subtle: oklch(96% 0.005 80 / 0.55); /* R4 2ª camada (S172-EXT-3): 0.40→0.55 passa AA texto no dark (~4.6:1) */
  --rule: oklch(96% 0.005 80 / 0.10);
  --rule-strong: oklch(96% 0.005 80 / 0.22);
  --accent: oklch(62% 0.22 25);
  --accent-bright: oklch(72% 0.24 25);
  --accent-deep: oklch(48% 0.18 25);

  /* cores verticais ajustadas pra dark (luma elevada) */
  --v-clinica: oklch(68% 0.12 145);
  --v-neuro: oklch(64% 0.16 250);
  --v-sociedade: oklch(64% 0.20 28);
  --v-filosofia: oklch(70% 0.02 280);
  --v-tecnologia: oklch(64% 0.20 350);
  --v-comportamento: oklch(72% 0.16 60);
  --v-educacao: oklch(70% 0.01 280);
  --v-desenvolvimento: oklch(70% 0.15 50);
  --v-psicanalise: oklch(66% 0.11 70);
  --v-saude: oklch(70% 0.12 155);
  --v-cadeira: var(--accent);

  --noise-opacity: 0.5;
  --shadow-elev: 0 1px 0 oklch(0% 0 0 / 0.5), 0 6px 32px oklch(0% 0 0 / 0.4);
  --curtain-bg: oklch(3% 0 0);
  --curtain-fg: oklch(96% 0.005 80);
}

/* === fallback enquanto theme resolve === */
html:not([data-resolved]) {
  --bg: #FAFAF7;
  --fg: #0A0A0A;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "ss01", "cv11", "kern";
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt", "onum";
  text-rendering: optimizeLegibility;
  transition: background 1.2s var(--ease), color 1.2s var(--ease);
  position: relative;
}

/* === vinheta circadiana ambient · pinta o canvas com a luz da hora === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,
      color-mix(in oklch, var(--accent) 12%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%,
      color-mix(in oklch, var(--accent) 8%, transparent) 0%,
      transparent 50%);
  opacity: var(--vignette-opacity, 0.3);
  transition: background 2s var(--ease), opacity 2s var(--ease);
}

::selection {
  background: var(--accent);
  color: var(--fg-inverse);
}

::-moz-selection {
  background: var(--accent);
  color: var(--fg-inverse);
}

/* === noise overlay === */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

html[data-resolved="dark"] .noise-overlay {
  mix-blend-mode: soft-light;
}

/* === scroll progress bar === */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  z-index: 999;
  transition: width 0.08s linear;
  box-shadow: 0 0 12px var(--accent);
}

body[data-view="article"] .scroll-progress,
body[data-view="scriba"] .scroll-progress { opacity: 0; }

/* === custom cursor === */
.cursor {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease);
  mix-blend-mode: difference;
}

.cursor-follower {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  top: 0; left: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: width var(--dur-base) var(--ease), height var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  display: grid;
  place-items: center;
}

.cursor-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
  white-space: nowrap;
}

.cursor.is-hover {
  width: 0;
  height: 0;
  opacity: 0;
}

.cursor-follower.is-hover {
  width: 96px;
  height: 96px;
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}

.cursor-follower.is-hover .cursor-label {
  opacity: 1;
  color: var(--accent);
}

/* =====================================================
   CORTINA CINEMATOGRÁFICA · clip-path circular emanando do click
   ===================================================== */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--curtain-bg);
  color: var(--curtain-fg);
  pointer-events: none;
  clip-path: circle(0% at 50% 50%);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.curtain.is-closing {
  clip-path: circle(150% at var(--origin-x, 50%) var(--origin-y, 50%));
  transition: clip-path var(--dur-curtain-close) var(--ease-cinema);
}

.curtain.is-opening {
  clip-path: circle(0% at var(--origin-x, 50%) var(--origin-y, 50%));
  transition: clip-path var(--dur-curtain-open) var(--ease-cinema);
}

.curtain-noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='5'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  pointer-events: none;
}

.curtain-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s var(--ease) 0.2s, transform 0.5s var(--ease) 0.2s;
  text-align: center;
}

.curtain.is-closing .curtain-content {
  opacity: 1;
  transform: scale(1);
}

.curtain-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.14em;
  color: color-mix(in oklch, var(--curtain-fg) 70%, transparent);
}

.curtain-mark {
  color: color-mix(in oklch, var(--curtain-fg) 85%, transparent);
}

.curtain-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--curtain-vertical-color, var(--accent));
  box-shadow: 0 0 14px var(--curtain-vertical-color, var(--accent));
  animation: curtain-pulse 1.4s ease-in-out infinite;
}

.curtain-vertical {
  color: var(--curtain-vertical-color, var(--accent));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

@keyframes curtain-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.curtain-counter {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(140px, 26vw, 320px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--curtain-fg);
  font-variant-numeric: tabular-nums;
  position: relative;
  text-shadow:
    0 0 60px color-mix(in oklch, var(--curtain-vertical-color, var(--accent)) 70%, transparent),
    0 0 140px color-mix(in oklch, var(--curtain-vertical-color, var(--accent)) 35%, transparent);
}

.curtain-info {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.4;
  color: color-mix(in oklch, var(--curtain-fg) 75%, transparent);
  max-width: 28ch;
  text-align: center;
  text-wrap: balance;
}

.curtain-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 280px;
  max-width: 78vw;
}

.curtain-progress-track {
  position: relative;
  width: 100%;
  height: 1px;
  background: color-mix(in oklch, var(--curtain-fg) 18%, transparent);
  overflow: hidden;
}

.curtain-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--curtain-vertical-color, var(--accent));
  box-shadow: 0 0 12px var(--curtain-vertical-color, var(--accent));
}

.curtain-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.curtain-progress-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--curtain-vertical-color, var(--accent));
  font-weight: 500;
}

.curtain-progress-pct {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: color-mix(in oklch, var(--curtain-fg) 50%, transparent);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* === viewfinder corners · sensação cine === */
.curtain-corners {
  position: absolute;
  inset: clamp(28px, 4vw, 56px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease) 0.3s;
}

.curtain.is-closing .curtain-corners { opacity: 1; }

.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in oklch, var(--curtain-fg) 35%, transparent);
}
.corner.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.corner.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.corner.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }

/* === header === */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gutter);
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-elev);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.018em;
  text-decoration: none;
  color: var(--fg);
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.wordmark-text {
  position: relative;
}

.wordmark-text::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}

.wordmark:hover .wordmark-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.wordmark-mark {
  font-size: 10px;
  color: var(--accent);
  font-weight: 400;
  vertical-align: super;
  transform: translateY(-4px);
  display: inline-block;
}

.primary-nav {
  display: flex;
  gap: 32px;
  justify-content: center;
}

.primary-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}

.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease);
}

.primary-nav a:hover::after {
  width: 100%;
}

/* header durante leitura: nav some, wordmark vira "voltar" implícito */
body[data-view="article"] .primary-nav,
body[data-view="scriba"] .primary-nav { opacity: 0; pointer-events: none; }

.header-controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.date-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
}

/* === circadian dot · indicador da fase atual === */
.circadian-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(75% 0.18 90);
  box-shadow: 0 0 10px oklch(75% 0.18 90 / 0.7);
  transition: background 1.2s var(--ease), box-shadow 1.2s var(--ease);
  flex-shrink: 0;
  cursor: help;
}

html[data-circadian="dawn"] .circadian-dot {
  background: oklch(72% 0.18 35);
  box-shadow: 0 0 10px oklch(72% 0.18 35 / 0.7);
}
html[data-circadian="day"] .circadian-dot {
  background: oklch(78% 0.16 90);
  box-shadow: 0 0 10px oklch(78% 0.16 90 / 0.65);
}
html[data-circadian="dusk"] .circadian-dot {
  background: oklch(62% 0.22 50);
  box-shadow: 0 0 12px oklch(62% 0.22 50 / 0.75);
}
html[data-circadian="night"] .circadian-dot {
  background: oklch(58% 0.18 280);
  box-shadow: 0 0 10px oklch(58% 0.18 280 / 0.7);
}

/* === circadian bar · linha temporal 24h fixed bottom === */
.circadian-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 99;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: color-mix(in oklch, var(--bg) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
}

body[data-view="article"] .circadian-bar,
body[data-view="scriba"] .circadian-bar { opacity: 0; }

.circadian-bar-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    oklch(28% 0.13 280) 0%,
    oklch(35% 0.14 285) 18%,
    oklch(62% 0.18 30) 24%,
    oklch(82% 0.10 80) 32%,
    oklch(85% 0.06 90) 50%,
    oklch(82% 0.10 80) 68%,
    oklch(60% 0.20 40) 76%,
    oklch(40% 0.16 320) 82%,
    oklch(28% 0.13 280) 100%
  );
  opacity: 0.65;
}

.circadian-bar-marker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 6px;
  background: var(--fg);
  transform: translateX(0);
  transition: transform 60s linear, background 1.2s var(--ease);
  box-shadow: 0 0 8px var(--fg);
}

.circadian-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .circadian-bar { height: 20px; padding: 0 20px; }
  .circadian-bar-label { font-size: 9px; }
}

/* === theme toggle === */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 0;
}

.theme-toggle button {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  cursor: none;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.theme-toggle button:hover {
  color: var(--fg);
}

.theme-toggle button[aria-checked="true"] {
  background: var(--fg);
  color: var(--fg-inverse);
}

.theme-toggle button[aria-checked="true"]:hover {
  color: var(--fg-inverse);
}

.theme-toggle button svg {
  display: block;
}

/* === ticker tape === */
.ticker {
  position: fixed;
  /* cola logo abaixo do header real medido em JS (L1) — nunca invade o header */
  top: var(--h-header);
  left: 0; right: 0;
  z-index: 99;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 36px;
  display: flex;
  align-items: center;
}

body[data-view="article"] .ticker,
body[data-view="scriba"] .ticker { opacity: 0; pointer-events: none; }

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: ticker-scroll 60s linear infinite;
  padding-left: 100vw;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-item em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-serif);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.ticker-dot {
  color: var(--accent);
  font-size: 6px;
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

/* === section mark · numerador editorial discreto === */
.section-mark {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-subtle);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.section-mark span {
  color: var(--accent);
  font-weight: 500;
}

.section-mark-inverse {
  color: color-mix(in oklch, var(--fg-inverse) 50%, transparent);
}

.section-mark-inverse span {
  color: var(--accent-bright);
}

/* =====================================================
   HOME VIEW wrapper · esconde atrás da cortina durante leitura
   ===================================================== */
.home-view {
  position: relative;
  z-index: 2;
  transition: opacity var(--dur-base) var(--ease), transform 0.6s var(--ease);
}

body[data-view="article"] .home-view,
body[data-view="scriba"] .home-view {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

body[data-view="article"] .site-footer,
body[data-view="scriba"] .site-footer { opacity: 0; pointer-events: none; }

body[data-view="article"] .hamburger-toggle,
body[data-view="scriba"] .hamburger-toggle { opacity: 0; pointer-events: none; }

/* === pauta ritual === */
.pauta-ritual {
  min-height: 100vh;
  min-height: 100dvh;  /* R7: viewport dinâmico — evita o "pulo" no mobile quando a barra de URL recolhe */
  padding: 180px var(--gutter) var(--section);
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.ritual-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1.7fr;
  align-items: center;
  gap: calc(var(--gutter) * 1.5);
  width: 100%;
  position: relative;
}

/* coluna esquerda do ritual: caption + counter + data + stats como bloco coeso */
.ritual-left {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 460px;
}

.ritual-counter,
.ritual-meta {
  min-width: 0;
}

.ritual-counter {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(84px, 11vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--fg);
  display: flex;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  animation: counter-breath 6s ease-in-out infinite;
}

@keyframes counter-breath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

.counter-percent {
  font-size: 0.3em;
  color: var(--accent);
  margin-left: 0.06em;
  margin-top: 0.28em;
  font-weight: 400;
  align-self: flex-start;
}

.ritual-meta {
  margin-top: 4px;
}

.ritual-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0;
}

.ritual-date {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--fg);
  margin-bottom: 32px;
  font-feature-settings: "onum";
}

.ritual-date em {
  font-style: italic;
  color: var(--fg-muted);
}

.ritual-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}

.ritual-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ritual-stats strong {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 42px;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-feature-settings: "tnum";
}

.ritual-stats span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* === featured cadeira === */
.featured-cadeira {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
  position: relative;
}

.featured-cadeira[hidden] { display: none; }

.vertical-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 36px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tag-divider {
  opacity: 0.5;
  margin: 0 2px;
}

.featured-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-featured);
  line-height: 0.88;
  letter-spacing: -0.048em;
  margin-bottom: 44px;
  text-wrap: balance;
  /* PT-BR: hifeniza palavras longas (ex.: "desenvolvimento") em vez de estourar a medida (I3) */
  hyphens: auto;
  -webkit-hyphens: auto;
  font-variation-settings: "opsz" 60;
}

.featured-lede {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.45;
  max-width: 660px;
  color: var(--fg);
  margin-bottom: 36px;
  text-wrap: pretty;
}

.featured-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  margin-bottom: 40px;
}

.byline-dot {
  color: var(--fg-subtle);
}

.featured-byline strong {
  color: var(--fg);
  font-weight: 600;
}

.featured-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  text-decoration: none;
  align-self: flex-start;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--accent);
  background: transparent;
  cursor: none;
  transition: gap var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  position: relative;
}

.featured-cta::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}

.featured-cta:hover {
  color: var(--accent);
  gap: 20px;
}

.featured-cta:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.cta-arrow {
  transition: transform var(--dur-base) var(--ease);
}

.featured-cta:hover .cta-arrow {
  transform: translateX(4px);
}

/* =====================================================
   SEÇÕES POR VERTICAL · miolo agrupado
   ===================================================== */
.secoes {
  /* S.02 é uma faixa COMPACTA (esteira de 1 fileira) — padding menor que o --section
     padrão (220px), senão a esteira curta flutua num vazio preto (S172-EXT-7). */
  padding: clamp(64px, 6vw, 92px) var(--gutter);
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 2;
}

.secoes-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 24px;
}

.secoes-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(32px, 3.8vw, 56px);
  letter-spacing: -0.04em;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 0.96;
}

.secoes-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.secoes-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  max-width: 36ch;
}

.sections-state {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}

.vertical-section {
  margin-top: 0;
  border-top: 1px solid var(--rule-strong);
  padding-top: 18px;
}

.vertical-section + .vertical-section {
  margin-top: 72px;
}

.vertical-section-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.vertical-section-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--vertical-color, var(--accent));
}

.vertical-section-count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

.vertical-section-count strong {
  color: var(--vertical-color, var(--accent));
  font-weight: 500;
}

/* entries dentro de cada seção (estética index editorial vivo) */
.entries {
  list-style: none;
}

.entry {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
  transition: padding var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  position: relative;
  cursor: none;
  align-items: start;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  color: var(--fg);
}

.entry:first-child { border-top: none; }

.entry::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 100%;
  background: var(--vertical-color);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-base) var(--ease);
}

.entry::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: color-mix(in oklch, var(--vertical-color) 4%, transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  pointer-events: none;
  z-index: -1;
}

.entry:hover {
  padding-left: 24px;
}

.entry:hover::before {
  transform: scaleY(1);
}

.entry:hover::after {
  opacity: 1;
}

.entry-number {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--vertical-color);
  padding-top: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.entry-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.entry-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 20px;
  transition: color var(--dur-base) var(--ease);
  max-width: 24ch;
  text-wrap: balance;
}

.entry:hover .entry-title {
  color: var(--vertical-color);
}

.entry-lede {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 68ch;
  margin-bottom: 24px;
  text-wrap: pretty;
}

.entry-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-subtle);
  align-items: center;
}

.entry-scriba {
  color: var(--fg);
  font-weight: 600;
}

.entry-time {
  color: var(--fg-muted);
}

.entry-arrow {
  align-self: center;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--fg-subtle);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  text-align: right;
}

.entry:hover .entry-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--vertical-color);
}

/* === verticais === */
.verticais {
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 2;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-h2);
  letter-spacing: -0.04em;
  margin-bottom: 80px;
  line-height: 0.94;
  max-width: 18ch;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.verticais-list {
  list-style: none;
  border-top: 1px solid var(--rule);
}

.verticais-list li {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 40px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  cursor: none;
  position: relative;
}

.verticais-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 100%;
  background: var(--vc);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease);
}

.verticais-list li::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--vc) 5%, transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  pointer-events: none;
  z-index: -1;
}

.verticais-list li:hover {
  padding-left: 24px;
}

.verticais-list li:hover::before {
  transform: scaleY(1);
}

.verticais-list li:hover::after {
  opacity: 1;
}

.v-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--vc);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.v-name {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(36px, 4.5vw, 80px);
  letter-spacing: -0.03em;
  color: var(--fg);
  transition: color var(--dur-base) var(--ease), letter-spacing var(--dur-base) var(--ease);
  line-height: 1;
  /* nomes de vertical longos (desenvolvimento, comportamento) hifenizam no mobile (I3) */
  hyphens: auto;
  -webkit-hyphens: auto;
}

.verticais-list li:hover .v-name {
  color: var(--vc);
  letter-spacing: -0.025em;
}

.v-arrow {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--fg-subtle);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  text-align: right;
}

.verticais-list li:hover .v-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--vc);
}

/* M1 (S172-EXT-3): contagem de peças por vertical (a S.03 virou a porta do feed) */
.v-count {
  margin-left: auto;
  padding-right: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease-out);
}
.verticais-list li:hover .v-count { color: var(--vc); }

/* M1: botão "voltar às recentes" no sub do feed — herda o mono/lowercase do .secoes-sub */
.feed-reset {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.feed-reset:hover { border-bottom-color: currentColor; }

/* Onda 4 (S172-EXT-3): captura de e-mail */
.subscribe-section { padding: clamp(64px, 10vw, 150px) var(--gutter); }
.subscribe {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--rule, var(--fg-subtle));
  border-radius: 4px;
  background: var(--bg-elevated, var(--bg));
}
.subscribe-kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  text-transform: lowercase; letter-spacing: 0.08em;
  color: var(--accent-text); margin: 0 0 10px;
}
.subscribe-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -0.02em;
  color: var(--fg); margin: 0 0 8px; line-height: 1.1;
}
.subscribe-sub { font-size: var(--fs-small); color: var(--fg-muted); margin: 0 0 22px; }
.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe-input {
  flex: 1 1 220px; min-width: 0; padding: 14px 16px;
  font-family: var(--font-sans); font-size: 16px;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule, var(--fg-subtle)); border-radius: 3px;
}
.subscribe-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.subscribe-btn {
  padding: 14px 30px; font-family: var(--font-mono); font-size: var(--fs-mono);
  text-transform: lowercase; letter-spacing: 0.06em;
  color: var(--bg); background: var(--accent); border: 0; border-radius: 3px;
  cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out);
}
.subscribe-btn:hover { opacity: 0.88; }
.subscribe-btn:disabled { opacity: 0.5; cursor: default; }
.subscribe-msg {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  margin: 12px 0 0; min-height: 1.2em; color: var(--fg-muted);
}
.subscribe-msg[data-state="ok"] { color: var(--accent-text); }
.subscribe-msg[data-state="err"] { color: #c0392b; }

/* Onda 4: busca na pauta */
.feed-search { margin-top: 22px; }
.feed-search-input {
  width: 100%; max-width: 440px; padding: 12px 16px;
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule, var(--fg-subtle)); border-radius: 3px;
}
.feed-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feed-search-input::placeholder { color: var(--fg-subtle); }

/* Onda 4: salvar pra depois */
.saved-filter {
  margin-left: 12px; padding: 12px 16px;
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--accent-text); background: transparent;
  border: 1px solid var(--rule, var(--fg-subtle)); border-radius: 3px;
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out);
}
.saved-filter:hover { border-color: var(--accent); }
.article-save-row { margin-bottom: 32px; }
.article-save {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; font-family: var(--font-mono); font-size: var(--fs-mono);
  color: var(--fg-muted); background: transparent;
  border: 1px solid var(--rule, var(--fg-subtle)); border-radius: 3px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.article-save:hover { color: var(--fg); border-color: var(--fg-subtle); }
.article-save[data-saved="1"] { color: var(--accent-text); border-color: var(--accent); }
.article-save[data-saved="1"] .save-icon { transform: rotate(45deg); }
.save-icon { display: inline-block; font-size: 1.15em; line-height: 1; transition: transform var(--dur-fast) var(--ease-out); }

/* S.02 recentes — esteira rolante + cards na MESMA linguagem dos scribas (S172-EXT-6) */

/* CARD base: reto (sem raio), hover INVERTE (bg→fg), barra de acento desliza + seta aparece */
.feed-card {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  padding: 30px 28px;
  background: var(--bg);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.feed-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--vertical-color); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease); z-index: 3; pointer-events: none;
}
.feed-card::after {
  content: '→'; position: absolute; top: 27px; right: 24px;
  font-family: var(--font-display); font-size: 18px; color: var(--fg-subtle);
  opacity: 0; transform: translateX(-8px); pointer-events: none; z-index: 3;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.feed-card:hover { background: var(--fg); color: var(--fg-inverse); }
.feed-card:hover::before { transform: scaleX(1); }
.feed-card:hover::after { opacity: 1; transform: translateX(0); color: var(--fg-inverse); }
.feed-card-kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  text-transform: lowercase; letter-spacing: 0.04em;
  color: var(--vertical-color); padding-right: 34px;
}
.feed-card-title {
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
  letter-spacing: -0.018em; line-height: 1.24; color: inherit; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-card-title::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.feed-card-dek {
  font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-card:hover .feed-card-dek { color: color-mix(in oklch, var(--fg-inverse) 70%, transparent); }
.feed-card-meta {
  margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-mono);
}
.feed-card-author { position: relative; z-index: 2; color: var(--fg-muted); text-decoration: none; }
.feed-card:hover .feed-card-author { color: color-mix(in oklch, var(--fg-inverse) 62%, transparent); }
a.feed-card-author:hover { text-decoration: underline; text-underline-offset: 3px; }
.feed-card-time { color: var(--fg-subtle); white-space: nowrap; }
.feed-card:hover .feed-card-time { color: color-mix(in oklch, var(--fg-inverse) 48%, transparent); }

/* GRID hairline (modos intencionais: vertical / busca / salvas) — igual ao .scribas-list */
.feed-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* ESTEIRA ROLANTE (recentes) — belt horizontal, auto-scroll, pausa no hover/foco */
.feed-conveyor {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.feed-conveyor-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; width: max-content;
  animation: feed-conveyor 120s linear infinite;
}
.feed-conveyor:hover .feed-conveyor-track,
.feed-conveyor:focus-within .feed-conveyor-track { animation-play-state: paused; }
.feed-conveyor .feed-card {
  flex: 0 0 330px; width: 330px;
  border-right: 1px solid var(--rule);
}
@keyframes feed-conveyor { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .feed-conveyor { overflow-x: auto; }
  .feed-conveyor-track { animation: none; }
  .feed-conveyor-track > [aria-hidden="true"] { display: none; }
}
@media (max-width: 560px) {
  .feed-cards { grid-template-columns: 1fr; }
  .feed-conveyor .feed-card { flex-basis: 82vw; width: 82vw; }
}

.verticais-note {
  margin-top: 56px;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--fg-muted);
  max-width: 60ch;
  text-wrap: pretty;
}

.verticais-note em {
  font-weight: 600;
  color: var(--fg);
  font-style: italic;
}

/* === scribas === */
.scribas {
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 2;
}

.scribas-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.scriba {
  background: var(--bg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  cursor: none;
  position: relative;
  overflow: hidden;
}

.scriba::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

.scriba::after {
  content: '→';
  position: absolute;
  top: 32px; right: 28px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--fg-subtle);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.scriba:hover {
  background: var(--fg);
  color: var(--fg-inverse);
}

.scriba:hover::before {
  transform: scaleX(1);
}

.scriba:hover::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--fg-inverse);
}

.scriba-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.018em;
}

.scriba-role {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.scriba:hover .scriba-role {
  color: color-mix(in oklch, var(--fg-inverse) 62%, transparent);
}

.scriba-editor {
  background: color-mix(in oklch, var(--accent) 8%, var(--bg));
}

.scriba-editor .scriba-role {
  color: var(--accent);
  font-weight: 500;
}

.scriba-editor:hover {
  background: var(--accent);
  color: oklch(98% 0 0);
}

.scriba-editor:hover::before {
  background: oklch(98% 0 0);
}

.scriba-editor:hover .scriba-role {
  color: color-mix(in oklch, oklch(98% 0 0) 85%, transparent);
}

.scriba-editor:hover::after {
  color: oklch(98% 0 0);
}

/* === footer === */
.site-footer {
  padding: var(--section) var(--gutter) 56px;
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  position: relative;
  z-index: 2;
}

.manifesto-fragment {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 44px);
  line-height: 1.32;
  max-width: 1100px;
  margin-bottom: 120px;
  letter-spacing: -0.01em;
  border-left: 3px solid var(--accent);
  padding-left: 36px;
  text-wrap: pretty;
  background: linear-gradient(90deg,
    var(--accent-soft, transparent) 0%,
    transparent 60%);
}

.manifesto-fragment p::first-letter {
  font-size: 1.4em;
  font-weight: 400;
  color: var(--accent);
  padding-right: 0.04em;
}

.manifesto-fragment cite {
  display: block;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-style: normal;
  color: color-mix(in oklch, var(--fg-inverse) 50%, transparent);
  text-transform: lowercase;
  letter-spacing: 0.08em;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 80px;
  padding-top: 60px;
  border-top: 1px solid color-mix(in oklch, var(--fg-inverse) 15%, transparent);
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  color: color-mix(in oklch, var(--fg-inverse) 50%, transparent);
  font-weight: 400;
}

.footer-col a {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 19px;
  color: var(--fg-inverse);
  text-decoration: none;
  padding: 8px 0;
  transition: color var(--dur-base) var(--ease), padding-left var(--dur-base) var(--ease);
  letter-spacing: -0.008em;
  position: relative;
}

.footer-col a:hover {
  color: var(--accent-bright);
  padding-left: 14px;
}

.footer-col a::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-12px, -50%);
  font-size: 14px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  color: var(--accent-bright);
}

.footer-col a:hover::before {
  opacity: 1;
  transform: translate(0, -50%);
}

/* R8 · destinos institucionais ainda inexistentes: mostrados como "em breve",
   desabilitados e não-clicáveis (não fingem um destino que não existe). */
.footer-soon {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: -0.008em;
  color: color-mix(in oklch, var(--fg-inverse) 38%, transparent);
  padding: 8px 0;
  cursor: not-allowed;
  user-select: none;
}

.soon-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in oklch, var(--fg-inverse) 55%, transparent);
  border: 1px solid color-mix(in oklch, var(--fg-inverse) 22%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  white-space: nowrap;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .footer-soon { font-size: 17px; padding: 6px 0; }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid color-mix(in oklch, var(--fg-inverse) 15%, transparent);
  flex-wrap: wrap;
  gap: 16px;
}

.copyright,
.footer-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: color-mix(in oklch, var(--fg-inverse) 50%, transparent);
  text-transform: lowercase;
  letter-spacing: 0.06em;
}

.footer-meta strong {
  color: var(--fg-inverse);
  font-weight: 600;
}

/* === scroll reveal === */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-cinema) var(--ease-out), transform var(--dur-cinema) var(--ease-out);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* === page load sequence === */
@keyframes header-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes ticker-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes section-mark-fade {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.site-header {
  animation: header-slide-in 0.8s var(--ease-out) 0.1s both;
}

.ticker {
  animation: ticker-fade-in 1s var(--ease) 0.6s both;
}

.pauta-ritual .section-mark {
  animation: section-mark-fade 0.8s var(--ease-out) 0.4s both;
}

/* === I1 · View Transition do toggle de tema (crossfade root) ===
   Só a troca claro↔escuro passa por startViewTransition (ver app.js). Aqui afinamos
   o crossfade do snapshot root pra ficar suave e curto. A cortina clip-path NÃO usa
   View Transitions — segue intacta. Desligado em reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* === skip-link (Fase 4 · R3 · WCAG 2.4.1 Bypass Blocks) ===
   fora da tela até receber foco por teclado; aí desliza pro topo. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  margin: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: oklch(98% 0 0);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid oklch(98% 0 0);
  outline-offset: 2px;
}

/* === focus visible (acessibilidade real) === */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: var(--r-sm);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
}

/* =====================================================
   ARTICLE VIEW · overlay (cortina revela) · stagger reveal
   ===================================================== */
.article-view {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.article-view.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.article-view[hidden] { display: none; }

.article-controls {
  position: fixed;
  top: 80px;
  right: var(--gutter);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.article-view.is-visible .article-controls {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease) 0.6s, transform 0.4s var(--ease) 0.6s;
}

.share-btn,
.close-article {
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 9px 14px 9px 12px;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.share-btn:hover {
  background: var(--vertical-color, var(--accent));
  border-color: var(--vertical-color, var(--accent));
  color: oklch(98% 0 0);
}

.close-article:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(98% 0 0);
}

.share-btn svg { display: block; }

.share-btn.is-copied {
  background: oklch(55% 0.15 145);
  border-color: oklch(55% 0.15 145);
  color: oklch(98% 0 0);
}

.close-icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}
.close-icon span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.close-icon span:nth-child(1) { transform: rotate(45deg); }
.close-icon span:nth-child(2) { transform: rotate(-45deg); }

.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--vertical-color, var(--accent)), var(--accent-bright));
  z-index: 201;
  transition: width 0.08s linear;
  box-shadow: 0 0 12px var(--vertical-color, var(--accent));
  transform-origin: left center;
}

/* === I2 · barra de progresso de leitura scroll-driven em CSS puro ===
   o scroller é a própria .article-view (overflow-y:auto), não o root → timeline nomeada nela.
   Onde houver suporte (Baseline 2024), o JS deixa de mexer no width: a barra é animada
   no compositor (escala 0→1 conforme o scroll da view). Fallback: o listener JS continua
   setando width onde animation-timeline não existe. */
.article-view {
  scroll-timeline-name: --pep-article-scroll;
  scroll-timeline-axis: block;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .reading-progress {
      width: 100%;
      transform: scaleX(0);
      transition: none;
      animation: pep-reading-progress linear both;
      animation-timeline: --pep-article-scroll;
    }
    @keyframes pep-reading-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

.article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 130px var(--gutter) 80px;
  position: relative;
  --vertical-color: oklch(48% 0.10 145);
}

/* === STAGGER REVEAL · article entering === */
.article-header {
  margin-bottom: 88px;
}

.article-tags,
.article-title,
.article-dek,
.article-byline,
.article-body > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.article-view.is-visible .article-tags { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.article-view.is-visible .article-title { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }
.article-view.is-visible .article-dek { transition-delay: 0.75s; opacity: 1; transform: translateY(0); }
.article-view.is-visible .article-byline { transition-delay: 0.85s; opacity: 1; transform: translateY(0); }

/* body paragraphs reveal */
.article-view.is-visible .article-body > * {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

/* LCP (S172-EXT-3): peça pré-renderizada (SSG) pinta IMEDIATO. O conteúdo já está
   no HTML estático — não faz sentido escondê-lo com opacity:0 até a hidratação.
   A animação de entrada (stagger) fica preservada para a navegação SPA, porque o
   app.js remove o data-prerendered logo após o 1º paint. */
.article-view[data-prerendered] .article-tags,
.article-view[data-prerendered] .article-title,
.article-view[data-prerendered] .article-dek,
.article-view[data-prerendered] .article-byline,
.article-view[data-prerendered] .article-body > * {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
}

.article-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.10em;
  color: var(--fg-muted);
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.article-num {
  color: var(--vertical-color);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.article-vertical {
  color: var(--vertical-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.article-divider { color: var(--fg-subtle); }

.article-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: 36px;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.article-dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-dek);
  line-height: 1.4;
  color: var(--fg-muted);
  margin-bottom: 44px;
  text-wrap: pretty;
  max-width: 36ch;
}

.article-byline {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.article-byline strong { color: var(--fg); font-weight: 600; }

.article-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.65;
}

.article-body p {
  margin-bottom: 28px;
  text-wrap: pretty;
}
.article-body p em { font-style: italic; color: var(--fg-muted); }
.article-body p strong { font-weight: 600; color: var(--fg); }

/* drop cap massive · entrada especial */
.has-dropcap {
  position: relative;
}
.dropcap {
  float: left;
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(80px, 9vw, 124px);
  line-height: 0.82;
  padding: 8px 16px 0 0;
  margin-top: 6px;
  color: var(--vertical-color);
  font-feature-settings: "ss01";
  transition: color 0.6s var(--ease);
}

.article-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-article-h2);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 72px;
  margin-bottom: 28px;
  text-wrap: balance;
  position: relative;
}
.article-h2::before {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--vertical-color);
  margin-bottom: 32px;
  opacity: 0.5;
}

.pull-quote {
  margin: 64px calc(-1 * var(--gutter)) 64px calc(-1 * var(--gutter));
  padding: 48px var(--gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.pull-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.3;
  color: var(--vertical-color);
  text-wrap: balance;
}
.pull-quote p::before { content: '"'; opacity: 0.4; margin-right: 4px; }
.pull-quote p::after { content: '"'; opacity: 0.4; margin-left: 4px; }

/* === ARTICLE FOOTER · próxima peça + back === */
.article-footer {
  margin-top: 120px;
  padding-top: 64px;
  border-top: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  gap: 48px;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 1.2s;
}

.article-view.is-visible .article-footer { opacity: 1; }

/* === cross-references (Fase 4 · L3): mais do autor + mais na vertical === */
.article-crossrefs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  /* 1 col preenche; 2 cols dividem */
  gap: 40px 48px;
}
.article-crossrefs[hidden] { display: none; }
.crossref-col { display: flex; flex-direction: column; gap: 16px; }
.crossref-col[hidden] { display: none; }
.crossref-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-subtle);
  font-weight: 500;
}
.crossref-label span { color: var(--accent); text-transform: none; letter-spacing: 0; }
.crossref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.crossref-link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
  text-decoration: none;
  cursor: none;
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease);
}
.crossref-link:hover,
.crossref-link:focus-visible { color: var(--accent); }
@media (max-width: 640px) {
  .article-crossrefs { grid-template-columns: 1fr; gap: 32px; }
  .crossref-link { cursor: pointer; }
}

.next-piece {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.next-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 500;
}

.next-cta {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  width: 100%;
  text-align: left;
  cursor: none;
  color: var(--fg);
  transition: padding var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  position: relative;
}

.next-cta:hover {
  padding-left: 20px;
}

.next-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.next-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.next-vertical {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 500;
}

.next-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
  text-wrap: balance;
  transition: color var(--dur-base) var(--ease);
}

.next-cta:hover .next-title { color: var(--accent); }

.next-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-subtle);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}
.next-meta > span:first-child { color: var(--fg); font-weight: 600; }

.next-arrow {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--fg-subtle);
  text-align: right;
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.next-cta:hover .next-arrow {
  transform: translateX(8px);
  color: var(--accent);
}

.back-to-index {
  background: transparent;
  border: none;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  align-self: flex-start;
  transition: gap var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.back-to-index:hover {
  color: var(--accent);
  gap: 18px;
}

.back-icon {
  font-family: var(--font-display);
  font-size: 16px;
}

/* =====================================================
   GATILHOS DE AUTOR · nome do scriba clicável (entry + byline destaque)
   cursor magnético cuida do label "ver autor"; aqui só a afford. visual + foco
   ===================================================== */
.entry-scriba-link {
  cursor: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, var(--vertical-color, var(--accent)) 45%, transparent);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.entry-scriba-link:hover,
.entry-scriba-link:focus-visible {
  color: var(--vertical-color, var(--accent));
  text-decoration-color: var(--vertical-color, var(--accent));
}

.byline-author-link {
  cursor: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, var(--accent) 50%, transparent);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.byline-author-link:hover,
.byline-author-link:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

@media (max-width: 768px) {
  .entry-scriba-link, .byline-author-link { cursor: pointer; }
}

/* =====================================================
   FASE 2.1 (S172) · entries = LINKS reais (crawlable + a11y nativa)
   o título vira <a> com hit-area esticada (::after cobre o card inteiro);
   o autor é <a> irmão ACIMA do overlay. Sem aninhar interativos.
   Mantém todo o layout/hover/cursor do .entry (que já é position:relative).
   ===================================================== */
a.entry-title {
  text-decoration: none;
  cursor: none;
}
.entry-link::after {              /* hit-area do card → abre a peça */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.entry-meta .entry-scriba-link {  /* autor clicável acima da hit-area do título */
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  a.entry-title { cursor: pointer; }
}

/* =====================================================
   SCRIBA VIEW · página do autor (overlay paralelo à article view)
   mesma mecânica: fixed + opacity + cortina revela
   ===================================================== */
.scriba-view {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.scriba-view.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scriba-view[hidden] { display: none; }

.scriba-controls {
  position: fixed;
  top: 80px;
  right: var(--gutter);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.scriba-view.is-visible .scriba-controls {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease) 0.6s, transform 0.4s var(--ease) 0.6s;
}

.close-scriba {
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 9px 14px 9px 12px;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.close-scriba:hover {
  background: var(--vertical-color, var(--accent));
  border-color: var(--vertical-color, var(--accent));
  color: oklch(98% 0 0);
}

.close-scriba .back-icon { font-size: 14px; line-height: 1; }

.scriba-profile {
  max-width: 920px;
  margin: 0 auto;
  padding: 130px var(--gutter) 100px;
  position: relative;
  --vertical-color: var(--accent);
}

/* stagger reveal do header (espelha a article view) */
.scriba-tags,
.scriba-display,
.scriba-role-big,
.scriba-bio,
.scriba-byline {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.scriba-view.is-visible .scriba-tags { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.scriba-view.is-visible .scriba-display { transition-delay: 0.62s; opacity: 1; transform: translateY(0); }
.scriba-view.is-visible .scriba-role-big { transition-delay: 0.70s; opacity: 1; transform: translateY(0); }
.scriba-view.is-visible .scriba-bio { transition-delay: 0.78s; opacity: 1; transform: translateY(0); }
.scriba-view.is-visible .scriba-byline { transition-delay: 0.86s; opacity: 1; transform: translateY(0); }

.scriba-header {
  margin-bottom: 72px;
}

.scriba-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.10em;
  color: var(--fg-muted);
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.scriba-kicker { color: var(--fg-muted); }
.scriba-divider { color: var(--fg-subtle); }

.scriba-vertical {
  color: var(--vertical-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.scriba-display {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-title);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-variation-settings: "opsz" 60;
}

.scriba-role-big {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--vertical-color);
  font-weight: 500;
  margin-bottom: 28px;
}

.scriba-bio {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-dek);
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 46ch;
  margin-bottom: 36px;
  text-wrap: pretty;
}

.scriba-bio[hidden] { display: none; }

.scriba-byline {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.scriba-byline strong {
  color: var(--vertical-color);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* lista de peças do scriba · reusa .entries/.entry; só revela em bloco */
.scriba-pieces {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out) 0.95s, transform 0.6s var(--ease-out) 0.95s;
}
.scriba-view.is-visible .scriba-pieces,
.article-view.is-visible .scriba-pieces {
  /* o HUB de vertical (#pageView) reusa .scriba-pieces mas a overlay dele é .article-view,
     não .scriba-view — sem esta variante a lista ficava opacity:0 INVISÍVEL (bug S172-EXT-7). */
  opacity: 1;
  transform: translateY(0);
}

.scriba-pieces .entries {
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

/* HUB de vertical (#pageView = .article-view, coluna estreita de leitura): as entries da
   .scriba-pieces ficavam gigantes (~600px cada → lista de 9000px). Compacta SÓ no hub
   (o scriba page, .scriba-view, mantém o tamanho generoso). S172-EXT-7. */
.article-view.is-visible .scriba-pieces .entry { padding: 22px 0; gap: 28px; }
.article-view.is-visible .scriba-pieces .entry-title {
  font-size: clamp(19px, 2vw, 23px); max-width: none; margin-bottom: 7px; line-height: 1.15;
}
.article-view.is-visible .scriba-pieces .entry-lede {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 10px; max-width: none;
}

.scriba-empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--fg-muted);
  padding: 48px 0;
  border-top: 1px solid var(--rule-strong);
  text-wrap: pretty;
}

.scriba-footer {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid var(--rule-strong);
  display: flex;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 1.1s;
}
.scriba-view.is-visible .scriba-footer { opacity: 1; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) {
  .ritual-grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 60px;
  }
  .ritual-left { max-width: none; }
  .featured-cadeira {
    grid-column: 1;
    grid-row: auto;
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 60px;
  }
}

@media (max-width: 880px) {
  .primary-nav { display: none; }
  .site-header { padding: 16px 24px; }
}

@media (max-width: 768px) {
  body { cursor: auto; }
  .cursor, .cursor-follower { display: none; }

  /* === header compactado === */
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px 18px;
  }
  .wordmark { font-size: 15px; }
  .wordmark-mark { font-size: 9px; transform: translateY(-3px); }
  .header-controls { gap: 10px; }
  .theme-toggle { padding: 2px; }
  .theme-toggle button { width: 26px; height: 26px; }
  .circadian-dot { width: 6px; height: 6px; }
  .date-mono { display: none; }

  /* === ticker: altura menor no mobile; top vem de --h-header (medido em JS) === */
  .ticker { height: 32px; }

  /* === ritual padding-top dá espaço pra header + ticker === */
  .pauta-ritual {
    padding-top: 110px;
    padding-bottom: 60px;
  }

  .ritual-grid { gap: 48px; }

  /* === vertical-tag quebra limpa sem divider === */
  .vertical-tag {
    display: block;
    line-height: 1.6;
    margin-bottom: 24px;
    letter-spacing: 0.12em;
  }
  .tag-divider { display: none; }

  /* === featured title respiro reduzido === */
  .featured-title { margin-bottom: 28px; }
  .featured-lede { margin-bottom: 24px; font-size: 16px; line-height: 1.55; }
  .featured-byline { margin-bottom: 28px; font-size: 12px; gap: 8px; }
  .byline-dot { display: none; }
  .featured-byline > * { display: block; line-height: 1.6; }
  .featured-byline > .byline-name { display: inline; }
  .featured-cta { font-size: 12px; padding: 12px 0; }

  /* === section mark === */
  .section-mark {
    left: 18px;
    top: var(--gutter);
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  /* === section titles === */
  .section-title { line-height: 1; margin-bottom: 56px; }
  .secoes-header { margin-bottom: 48px; gap: 16px; }
  .secoes-title { line-height: 1; }

  /* === stats grid === */
  .ritual-stats {
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }
  .ritual-stats strong { font-size: 36px; }
  .ritual-stats span { font-size: 11px; }

  /* === seções por vertical === */
  .vertical-section + .vertical-section { margin-top: 56px; }
  .vertical-section-name { font-size: clamp(24px, 7vw, 36px); }

  /* === entries === */
  .entry {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 0;
  }
  .entry-number { padding-top: 0; font-size: 11px; }
  .entry-arrow { display: none; }
  .entry-title { max-width: 100%; }
  .entry-lede { font-size: 15px; line-height: 1.55; }
  .entry-meta { gap: 14px 18px; font-size: 11px; }
  .entry:hover { padding-left: 12px; }

  /* === verticais === */
  .verticais-list li {
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .v-num { font-size: 10px; }
  .v-arrow { display: none; }
  .v-name { font-size: clamp(28px, 9vw, 44px) !important; }
  .verticais-list li:hover { padding-left: 12px; }
  .verticais-note { margin-top: 36px; font-size: 15px; }

  /* === scribas === */
  .scribas-list {
    grid-template-columns: 1fr;
  }
  .scriba { padding: 28px 24px; }
  .scriba-name { font-size: 20px; }
  .scriba::after { top: 28px; right: 24px; }

  /* === footer === */
  .manifesto-fragment {
    padding-left: 20px;
    border-left-width: 2px;
    margin-bottom: 64px;
    font-size: 20px;
    line-height: 1.4;
  }

  .footer-nav {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 40px;
    margin-bottom: 56px;
  }
  .footer-col a { font-size: 17px; padding: 6px 0; }
  .footer-col a:hover { padding-left: 10px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .site-footer { padding-bottom: 80px; }

  /* === circadian-bar === */
  .circadian-bar { height: 22px; padding: 0 18px; }
  .circadian-bar-label { font-size: 9px; letter-spacing: 0.10em; }

  /* === article view mobile === */
  .article { padding: 100px 22px 60px; }
  .article-header { margin-bottom: 56px; }
  .article-tags { gap: 8px; margin-bottom: 32px; font-size: 11px; }
  .article-title { margin-bottom: 24px; }
  .article-dek { margin-bottom: 32px; max-width: 100%; }
  .article-byline { padding-top: 20px; }
  .dropcap { font-size: clamp(56px, 14vw, 84px); padding-right: 10px; }
  .article-h2 { margin-top: 48px; margin-bottom: 20px; }
  .article-h2::before { width: 40px; margin-bottom: 24px; }
  .pull-quote { margin: 40px -22px 40px -22px; padding: 32px 22px; }
  .article-footer { margin-top: 80px; padding-top: 48px; gap: 32px; }
  .next-cta { grid-template-columns: 40px 1fr; gap: 16px; padding: 24px 0; }
  .next-arrow { display: none; }
  .next-cta:hover { padding-left: 12px; }
  .article-controls { top: 64px; right: 18px; gap: 6px; }
  .share-btn, .close-article { padding: 6px 12px 6px 10px; }
  .share-label { display: none; }
  .curtain-counter { font-size: clamp(96px, 28vw, 200px); }

  /* === scriba view mobile === */
  .scriba-profile { padding: 100px 22px 70px; }
  .scriba-header { margin-bottom: 48px; }
  .scriba-tags { gap: 8px; margin-bottom: 24px; font-size: 11px; }
  .scriba-display { margin-bottom: 18px; }
  .scriba-role-big { margin-bottom: 20px; }
  .scriba-bio { margin-bottom: 28px; max-width: 100%; }
  .scriba-byline { padding-top: 20px; }
  .scriba-footer { margin-top: 64px; padding-top: 40px; }
  .scriba-controls { top: 64px; right: 18px; gap: 6px; }
  .close-scriba { padding: 6px 12px 6px 10px; }
}

@media (max-width: 440px) {
  .wordmark-text { font-size: 13px; }
  .wordmark { gap: 2px; }
  .theme-toggle button { width: 24px; height: 24px; }
  .header-controls { gap: 8px; }
  .pauta-ritual { padding-top: 104px; }
  .featured-title { font-size: clamp(44px, 13vw, 72px); }
  .section-title { font-size: clamp(36px, 11vw, 56px); }
  .secoes-title { font-size: clamp(36px, 11vw, 56px); }
  .ritual-counter { font-size: clamp(64px, 22vw, 120px); }
  .ritual-stats strong { font-size: 32px; }
  .manifesto-fragment { font-size: 18px; }
}

/* =====================================================
   HAMBURGER PILL · floating bottom-center
   ===================================================== */

.hamburger-toggle {
  position: fixed;
  bottom: 56px;
  left: 50%;
  z-index: 250;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--rule-strong);
  box-shadow:
    0 8px 28px oklch(0% 0 0 / 0.08),
    0 1px 0 oklch(100% 0 0 / 0.06) inset;
  cursor: none;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  transition:
    transform var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    opacity var(--dur-base) var(--ease);
  padding: 0;
}

.hamburger-toggle:hover {
  transform: translateX(-50%) translateY(-2px);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  box-shadow:
    0 12px 36px var(--accent-soft, oklch(48% 0.18 25 / 0.10)),
    0 0 0 4px color-mix(in oklch, var(--accent) 8%, transparent),
    0 1px 0 oklch(100% 0 0 / 0.08) inset;
  border-color: var(--accent);
}

.hamburger-icon {
  position: relative;
  width: 22px;
  height: 12px;
  display: block;
}

.hamburger-line {
  position: absolute;
  left: 0;
  height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s var(--ease),
    background 0.5s var(--ease),
    width 0.4s var(--ease);
}

.hamburger-line-top {
  top: 0;
  width: 100%;
}

.hamburger-line-mid {
  top: 50%;
  margin-top: -0.75px;
  width: 60%;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), width 0.4s var(--ease);
}

.hamburger-line-bottom {
  bottom: 0;
  width: 70%;
  right: 0;
  left: auto;
}

.hamburger-toggle:hover .hamburger-line-top {
  width: 70%;
}

.hamburger-toggle:hover .hamburger-line-bottom {
  width: 100%;
}

.hamburger-toggle:hover .hamburger-line-mid {
  opacity: 1;
  transform: scaleX(1);
  width: 40%;
}

/* Open state · lines viram X */
.hamburger-toggle[aria-expanded="true"] {
  background: var(--bg-elevated);
  border-color: var(--accent);
}

.hamburger-toggle[aria-expanded="true"] .hamburger-line-top {
  width: 100%;
  transform: translateY(5px) rotate(45deg);
  background: var(--accent);
}

.hamburger-toggle[aria-expanded="true"] .hamburger-line-bottom {
  width: 100%;
  right: auto;
  left: 0;
  transform: translateY(-5px) rotate(-45deg);
  background: var(--accent);
}

.hamburger-toggle[aria-expanded="true"] .hamburger-line-mid {
  opacity: 0;
  transform: scaleX(0);
}

/* =====================================================
   MENU OVERLAY · fullscreen teatral
   ===================================================== */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in oklch, var(--bg) 96%, var(--accent));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}

.menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay[hidden] {
  display: none;
}

.menu-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px var(--gutter) 130px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}

.menu-header {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: lowercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
}

.menu-overlay.is-open .menu-header {
  opacity: 1;
  transform: translateY(0);
}

.menu-label {
  color: var(--accent);
  font-weight: 500;
}

.menu-divider {
  color: var(--fg-subtle);
}

.menu-counter span {
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.menu-nav {
  flex: 1;
  display: flex;
  align-items: center;
}

.menu-list {
  list-style: none;
  width: 100%;
  border-top: 1px solid var(--rule);
}

.menu-item {
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.menu-overlay.is-open .menu-item:nth-child(1) { transition-delay: 0.15s; }
.menu-overlay.is-open .menu-item:nth-child(2) { transition-delay: 0.22s; }
.menu-overlay.is-open .menu-item:nth-child(3) { transition-delay: 0.29s; }
.menu-overlay.is-open .menu-item:nth-child(4) { transition-delay: 0.36s; }
.menu-overlay.is-open .menu-item:nth-child(5) { transition-delay: 0.43s; }

.menu-overlay.is-open .menu-item {
  opacity: 1;
  transform: translateY(0);
}

.menu-item a {
  display: grid;
  grid-template-columns: 70px 1fr 60px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  transition: padding var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  cursor: none;
  position: relative;
}

.menu-item a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-base) var(--ease);
}

.menu-link-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.1em;
  font-weight: 500;
  align-self: center;
}

.menu-link-text {
  text-wrap: balance;
}

.menu-link-arrow {
  text-align: right;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--fg-subtle);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.menu-item a:hover {
  padding-left: 24px;
  color: var(--accent);
}

.menu-item a:hover::before {
  transform: scaleY(1);
}

.menu-item a:hover .menu-link-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent);
}

.menu-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease) 0.55s, transform 0.5s var(--ease) 0.55s;
}

.menu-overlay.is-open .menu-meta {
  opacity: 1;
  transform: translateY(0);
}

.menu-time {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Mobile responsive · hamburguer + menu */
@media (max-width: 768px) {
  .hamburger-toggle {
    bottom: 44px;
    width: 50px;
    height: 50px;
  }

  .hamburger-icon {
    width: 20px;
    height: 11px;
  }

  .menu-inner {
    padding: 80px 24px 110px;
    gap: 40px;
  }

  .menu-item a {
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 22px 0;
    font-size: clamp(28px, 8vw, 48px);
  }

  .menu-link-num {
    font-size: 11px;
  }

  .menu-link-arrow {
    display: none;
  }

  .menu-item a:hover {
    padding-left: 14px;
  }

  .menu-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 24px;
  }
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cursor, .cursor-follower { display: none; }
  body { cursor: auto; }
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
  .ticker-track {
    animation: none;
    padding-left: 0;
  }
  .ritual-counter {
    animation: none;
  }
  /* cortina vira fade simples */
  .curtain {
    transition: opacity 0.2s !important;
    clip-path: none !important;
    opacity: 0;
  }
  .curtain.is-closing { opacity: 1; }
  .curtain.is-opening { opacity: 0; }
  /* article reveal instantâneo */
  .article-tags,
  .article-title,
  .article-dek,
  .article-byline,
  .article-body > *,
  .article-footer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* scriba view reveal instantâneo */
  .scriba-tags,
  .scriba-display,
  .scriba-role-big,
  .scriba-bio,
  .scriba-byline,
  .scriba-pieces,
  .scriba-footer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}