/* ═══════════════════════════════════════════════════════════════
   VAMOS VIENDO · TRAILER DE PAPEL
   Fullscreen cover feed · swipe up to read
   Palette: Vamos Viendo — black, ivory, red signal, gold
   ═══════════════════════════════════════════════════════════════ */

:root {
  --vv-bg: #000;
  --vv-ink: #f0e6d0;
  --vv-ink-soft: #d6c8a8;
  --vv-ink-mute: #8a7e6a;
  --vv-red: #d92b2b;
  --vv-red-deep: #b81f1f;
  --vv-gold: #c8960a;
  --vv-line: #2a2218;
  --vv-paper: #f0e6d0;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:#0a0705; }
body {
  font-family: 'Crimson Pro', Georgia, serif;
  color: var(--vv-ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#root { width: 100%; height: 100vh; }

/* ───────── SHELL ───────── */
.vv-shell {
  position: fixed; inset: 0;
  background: var(--vv-bg);
  color: var(--vv-ink);
  overflow: hidden;
  user-select: none;
}

/* ───────── TOP CHROME ───────── */
.vv-top {
  position: absolute; top: 0; left: 0; right: 0;
  /* reserve 72px on the right so the global hamburger trigger never
     overlaps the "Vamos Viendo" label. */
  padding: 18px 72px 16px 22px;
  z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  pointer-events: none;
}
.vv-brand {
  font-family: 'Bebas Neue', 'Anton', sans-serif;
  font-size: 15px; letter-spacing: 0.12em;
  color: #f0ece4;
  /* Doble sombra: azul offset = wordmark v0; negra borrosa = legibilidad
     contra el cover de fondo. */
  text-shadow: 2px 2px 0 #2b5dd9, 0 2px 14px rgba(0,0,0,0.8);
  white-space: nowrap;
  display: flex; align-items: baseline;
  flex: 0 0 auto;
  min-width: 0;
  text-transform: uppercase;
}
/* Variante botón: click-to-home. Hereda todo .vv-brand, solo resetea
   defaults de <button> y se activa a click (el .vv-top tiene
   pointer-events:none para no bloquear el swipe, lo re-habilitamos aquí). */
.vv-brand--link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 160ms ease;
}
.vv-brand--link:hover { opacity: 0.78; }
.vv-brand--link:active { opacity: 0.6; }
.vv-brand--link:focus-visible {
  outline: 1px solid var(--vv-red);
  outline-offset: 4px;
}
/* La sombra azul solo debe caer sobre el texto del wordmark; para el
   separador "·" y el italic "Vamos Viendo" la quitamos. */
.vv-brand-sep, .vv-brand-serie {
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}
.vv-dot {
  display: inline-block; width: 5px; height: 5px;
  background: var(--vv-red); border-radius: 50%;
  margin-left: 3px; transform: translateY(-2px);
  box-shadow: 0 0 10px var(--vv-red);
}
.vv-brand-sep { margin: 0 8px; color: var(--vv-ink-mute); }
.vv-brand-serie {
  font-family: 'Crimson Pro', serif; font-style: italic;
  letter-spacing: 0; font-size: 14px; color: var(--vv-ink-soft);
  white-space: nowrap;
}
.vv-progress { display: flex; gap: 3px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; overflow: hidden; }
.vv-pdot {
  width: 6px; height: 3px; border-radius: 2px;
  background: rgba(240,230,208,0.3);
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
  flex: 0 0 auto;
}
.vv-pdot.is-on { width: 22px; background: var(--vv-gold); }

/* Móviles angostos: achicar wordmark e italic para que "Vamos Viendo" entre
   entero sin corte, y reducir los pdots para que no empujen. */
@media (max-width: 520px) {
  .vv-top { padding: 16px 64px 14px 16px; gap: 8px; }
  .vv-brand { font-size: 13px; letter-spacing: 0.14em; }
  .vv-brand-sep { margin: 0 6px; }
  .vv-brand-serie { font-size: 12px; }
  .vv-pdot { width: 4px; height: 2px; }
  .vv-pdot.is-on { width: 14px; }
  .vv-progress { gap: 2px; }
}
@media (max-width: 380px) {
  .vv-brand { font-size: 12px; letter-spacing: 0.1em; }
  .vv-brand-serie { font-size: 11px; }
}

/* ───────── COVER STACK ───────── */
.vv-stack {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: stretch;
}
.vv-cover {
  position: absolute; inset: 0;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(.6,0,.3,1), opacity 0.32s ease;
}
.vv-cover.exit-up    { transform: translateY(-8%); opacity: 0; }
.vv-cover.exit-down  { transform: translateY(8%);  opacity: 0; }
.vv-cover.exit-left  { transform: translateX(-18%) rotate(-1.5deg); opacity: 0; }
.vv-cover.exit-right { transform: translateX(18%) rotate(1.5deg); opacity: 0; }

.vv-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 52%;  /* image lives in top 52% only */
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

/* Solid black panel for text — NO image behind copy */
.vv-cover-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 48%;
  background: #0a0604;
  z-index: 5;
}
/* Soft fade at the top of the panel */
.vv-cover-panel::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -60px;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, #0a0604 100%);
  pointer-events: none;
}
/* Red hairline separator */
.vv-cover-panel::after {
  content: '';
  position: absolute; left: 22px; right: 22px; top: 0;
  height: 2px;
  background: var(--vv-red);
  box-shadow: 0 0 12px rgba(217,43,43,0.5);
}

.vv-cover-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0) 15%,
      rgba(0,0,0,0) 45%,
      rgba(10,6,4,0.6) 52%);
  pointer-events: none;
}
.vv-cover-grain {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.015) 0 1px,
      transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Giant year badge — sits NEXT TO text (right edge of panel, vertical) */
.vv-year-mark { display: none; }

/* Top tag strip — hidden (was competing with faces/bottom copy) */
.vv-tagstrip { display: none; }

/* Cover bottom — contained INSIDE the black panel only */
/* Cover bottom — contained INSIDE the black panel only */
.vv-cover-bottom {
  position: absolute; left: 0; right: 0;
  top: 52%; bottom: 88px; /* leaves clear space for CTA */
  padding: 20px 24px 14px;
  z-index: 10;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.vv-meta-line {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em;
  color: #e85a5a;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vv-meta-dot { color: rgba(240,230,208,0.5); }
.vv-rating { margin-left: auto; color: var(--vv-gold); font-weight: 600; }

.vv-director {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.3em;
  color: rgba(240,230,208,0.7);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.vv-film-title {
  font-family: 'Anton', 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 7vw, 40px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--vv-ink);
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  /* Guaranteed 2-line slot — no -webkit-box hack that can be overridden */
  display: block !important;
  min-height: calc(clamp(28px, 7vw, 40px) * 0.95 * 2);
  max-height: calc(clamp(28px, 7vw, 40px) * 0.95 * 2);
  overflow: hidden;
}
.vv-crit-title {
  font-family: 'Crimson Pro', serif;
  font-style: italic; font-size: 17px;
  line-height: 1.25;
  color: var(--vv-ink-soft);
  margin: 0 0 12px;
  text-wrap: pretty;
  max-width: 26ch;
}
.vv-excerpt {
  font-family: 'Crimson Pro', serif;
  font-size: 14.5px; line-height: 1.45;
  color: rgba(240,230,208,0.82);
  margin: 0;
  max-width: 36ch;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA */
.vv-cta {
  position: absolute; bottom: 30px; left: 22px; right: 22px;
  z-index: 25;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 16px 20px;
  background: rgba(240,230,208,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240,230,208,0.22);
  border-radius: 2px;
  color: var(--vv-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  animation: vvPulse 2.2s ease-in-out infinite;
}
.vv-cta:hover { background: rgba(240,230,208,0.14); }
.vv-cta-arrow { font-size: 15px; transform: translateY(-1px); }
@keyframes vvPulse {
  0%,100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(-2px); }
}

/* Counter — moved to top-right, out of text area */
.vv-counter {
  position: absolute;
  /* shifted left so the hamburger trigger (top-right, 44px) never overlaps */
  top: 20px; right: 74px;
  z-index: 20;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: rgba(240,230,208,0.75);
}
.vv-counter-sep { color: var(--vv-red); margin: 0 3px; }

/* Side nav: HIDDEN — navigation is now gesture-based (swipe) */
.vv-nav { display: none; }

/* Peek of next cover — hidden; peek is now implicit via the counter */
.vv-peek { display: none; }
.vv-peek-label {
  display: flex; align-items: baseline; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em;
  color: rgba(240,230,208,0.55);
  text-transform: uppercase;
}
.vv-peek-arrow { color: var(--vv-gold); font-size: 12px; }
.vv-peek-title {
  font-family: 'Crimson Pro', serif;
  font-style: italic; font-size: 13px;
  color: var(--vv-ink-soft);
  letter-spacing: 0; text-transform: none;
}
.vv-peek-meta { color: rgba(240,230,208,0.4); }

/* ───────── ARTICLE READER ───────── */
.vv-reader {
  position: absolute; inset: 0;
  background: #0a0705;
  color: var(--vv-ink);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  /* No mount animation — shared-element clone handles the visual handoff,
     and fading/sliding the reader here would expose the cover below during
     the animation (transparency blend artefacts). */
  scrollbar-width: thin;
  scrollbar-color: var(--vv-line) transparent;
}
.vv-reader.is-transitioning {
  /* Kept as a no-op for now — reader is always opaque on mount. */
  opacity: 1;
}
.vv-reader::-webkit-scrollbar { width: 6px; }
.vv-reader::-webkit-scrollbar-thumb { background: var(--vv-line); border-radius: 3px; }

/* Hero */
.vv-hero {
  position: relative; width: 100%;
  overflow: hidden;
  background: #000;
  /* Container query context — el título del film escala respecto al
     ancho real del hero, no del viewport. Así OPPENHEIMER (y otros
     títulos largos) se reducen dentro del letterbox de desktop tanto
     como en móviles angostos. */
  container-type: inline-size;
}
.vv-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.2s, transform 0.1s;
}
.vv-hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.1) 35%,
    rgba(10,7,5,0.5) 78%,
    #0a0705 100%);
}
.vv-hero-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 26px 34px;
}
.vv-hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--vv-red);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.vv-hero-title {
  font-family: 'Anton', sans-serif;
  /* Escalado fluido por container query — 14% del ancho del hero, con
     piso de 40px y techo de 64px. Antes estaba fijo en 72px y se
     comía los márgenes con títulos largos (OPPENHEIMER, FRENCH
     DISPATCH, NARANJA MECÁNICA). */
  font-size: clamp(40px, 14cqi, 64px);
  line-height: 0.88;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0,0,0,0.5);
  /* Fallback de seguridad: si el título excede el contenedor, partí
     la palabra antes que desbordar. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.vv-hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em;
  color: rgba(240,230,208,0.75);
  text-transform: uppercase;
}

/* Article */
.vv-article {
  max-width: 640px; margin: 0 auto;
  padding: 40px 26px 100px;
}
.vv-art-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--vv-red);
  text-transform: uppercase; margin-bottom: 14px;
}
.vv-art-title {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 38px; line-height: 1.05;
  margin: 0 0 26px;
  color: var(--vv-ink);
  font-weight: 500;
  text-wrap: balance;
}

/* Byline */
.vv-byline {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--vv-line);
  border-bottom: 1px solid var(--vv-line);
  margin-bottom: 30px;
}
.vv-byline-name {
  font-family: 'Crimson Pro', serif; font-style: italic;
  font-size: 14px; color: var(--vv-ink-soft);
}
.vv-byline-date {
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--vv-ink-mute);
  margin-top: 4px;
  font-style: italic;
}
.vv-byline-date em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vv-red);
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--vv-line);
}
.vv-rating-chip {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  color: var(--vv-gold);
  letter-spacing: 0.02em;
}
.vv-rating-chip small {
  font-size: 11px; color: var(--vv-ink-mute);
  margin-left: 2px;
}

/* Body */
.vv-p {
  font-family: 'Crimson Pro', serif;
  font-size: 17.5px; line-height: 1.6;
  color: var(--vv-ink);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.vv-p-first::first-letter {
  font-family: 'Anton', sans-serif;
  font-size: 66px; line-height: 0.75;
  color: var(--vv-red);
  float: left;
  padding: 8px 10px 0 0;
  font-weight: normal;
  letter-spacing: -0.02em;
}

/* Pull quote */
.vv-pull {
  margin: 36px -10px;
  padding: 24px 22px;
  border-top: 2px solid var(--vv-red);
  border-bottom: 2px solid var(--vv-red);
  font-family: 'Anton', sans-serif;
  font-size: 28px; line-height: 1.12;
  color: var(--vv-ink);
  text-transform: uppercase;
  text-wrap: balance;
  font-weight: normal;
  letter-spacing: 0.006em;
  position: relative;
}
.vv-pull-quote {
  color: var(--vv-red);
  font-size: 58px;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 4px;
}

/* Figure */
.vv-fig {
  margin: 30px -26px;
  padding: 0;
}
.vv-fig img {
  width: 100%; display: block;
}

/* Tags */
.vv-tags {
  margin-top: 38px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.vv-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  padding: 5px 10px;
  border: 1px solid var(--vv-line);
  color: var(--vv-ink-soft);
  text-transform: lowercase;
}
/* Foot */
.vv-foot {
  text-align: center;
  margin: 60px 0 40px;
  position: relative;
}
.vv-foot-line {
  width: 40px; height: 1px;
  background: var(--vv-red);
  margin: 0 auto 18px;
}
/* Variante sin VV ni texto — solo línea roja como separador hacia
   "Notas relacionadas". Menos aire porque no hay elementos que separar. */
.vv-foot--line-only {
  margin: 40px 0 28px;
}
.vv-foot--line-only .vv-foot-line {
  margin-bottom: 0;
}
.vv-foot-mark {
  font-family: 'Anton', sans-serif;
  font-size: 32px; letter-spacing: 0.08em;
  color: var(--vv-red);
  margin-bottom: 8px;
}
.vv-foot-text {
  font-family: 'Crimson Pro', serif;
  font-style: italic; font-size: 13px;
  color: var(--vv-ink-mute);
}


/* ═══════════════════════════════════════════════════════════════
   CAMERA SPEC — 3 variants
   ═══════════════════════════════════════════════════════════════ */

/* Base: sits between byline and first paragraph */
.vv-cam {
  margin: 22px 0 28px;
}

/* --- INLINE: compact mono line with red label --- */
.vv-cam-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--vv-line);
  border-bottom: 1px solid var(--vv-line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vv-ink-soft);
}
.vv-cam-inline-label {
  color: var(--vv-red);
  font-weight: 700;
  letter-spacing: 0.2em;
  padding-right: 8px;
  border-right: 1px solid var(--vv-line);
}
.vv-cam-inline-main {
  color: var(--vv-ink);
  font-weight: 600;
}
.vv-cam-inline-sep {
  color: var(--vv-ink-mute);
  opacity: 0.6;
}
.vv-cam-inline-format {
  color: var(--vv-ink-mute);
}

/* --- STAMP: prominent "SHOT ON" badge, like a 70mm certification --- */
.vv-cam-stamp {
  display: flex;
  justify-content: center;
  margin: 28px 0 36px;
}
.vv-cam-stamp-inner {
  position: relative;
  padding: 18px 32px 16px;
  border: 2px solid var(--vv-red);
  border-radius: 2px;
  text-align: center;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 8px,
      rgba(217,43,43,0.04) 8px 9px
    );
  transform: rotate(-1.2deg);
  min-width: 260px;
}
.vv-cam-stamp-inner::before,
.vv-cam-stamp-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vv-red);
  transform: translateY(-50%);
}
.vv-cam-stamp-inner::before { left: -5px; }
.vv-cam-stamp-inner::after  { right: -5px; }
.vv-cam-stamp-kick {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--vv-red);
  font-weight: 700;
  margin-bottom: 4px;
}
.vv-cam-stamp-main {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--vv-ink);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}
.vv-cam-stamp-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--vv-ink-soft);
  text-transform: uppercase;
}

/* --- SHEET: 4-row labeled technical sheet --- */
.vv-cam-sheet {
  padding: 16px 18px 18px;
  border: 1px solid var(--vv-line);
  background: rgba(10,7,5,0.6);
  position: relative;
}
.vv-cam-sheet::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--vv-red);
}
.vv-cam-sheet-kick {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--vv-red);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vv-line);
}
.vv-cam-sheet-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px 14px;
  font-size: 12px;
}
.vv-cam-sheet-dl dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  align-self: center;
}
.vv-cam-sheet-dl dd {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--vv-ink);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════
   TWEAKS PANEL
   ═══════════════════════════════════════════════════════════════ */
.vv-tweaks {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 240px;
  background: #0a0604;
  border: 1px solid var(--vv-line);
  border-top: 2px solid var(--vv-red);
  padding: 12px;
  z-index: 9999;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  animation: vv-tweaks-in 180ms ease-out;
}
@keyframes vv-tweaks-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.vv-tweaks-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vv-line);
}
.vv-tweaks-head > span:first-child {
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vv-ink);
}
.vv-tweaks-sub {
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.vv-tweaks-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vv-tweaks-opt {
  appearance: none;
  border: 1px solid var(--vv-line);
  background: transparent;
  color: var(--vv-ink-soft);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
}
.vv-tweaks-opt:hover {
  border-color: var(--vv-ink-mute);
  background: rgba(255,255,255,0.02);
}
.vv-tweaks-opt.is-on {
  border-color: var(--vv-red);
  background: rgba(217,43,43,0.08);
  color: var(--vv-ink);
}
.vv-tweaks-opt.is-on .vv-tweaks-opt-label { color: var(--vv-red); }
.vv-tweaks-opt-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}
.vv-tweaks-opt-sub {
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--vv-ink-mute);
}
.vv-tweaks-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--vv-line);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   READER TOP CHROME — Index + Close
   ═══════════════════════════════════════════════════════════════ */
.vv-pull-hint {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--vv-red);
  background: linear-gradient(to bottom, rgba(10,6,4,0.95), transparent);
  transition: color 120ms;
}
.vv-pull-hint span {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--vv-red);
  background: rgba(10,6,4,0.9);
  backdrop-filter: blur(8px);
}

.vv-reader-chrome {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  /* reserve right space for the global hamburger trigger so the close button
     never shares its hit-zone. */
  padding: 14px 72px 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
}
.vv-chrome-btn {
  pointer-events: auto;
  appearance: none;
  background: rgba(10,6,4,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--vv-line);
  color: var(--vv-ink);
  padding: 9px 14px;
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms;
}
.vv-chrome-btn:hover {
  border-color: var(--vv-red);
  background: rgba(217,43,43,0.15);
}
.vv-chrome-btn-icon {
  font-size: 14px;
  color: var(--vv-red);
  line-height: 1;
}
.vv-chrome-btn-label {
  font-weight: 600;
}
.vv-chrome-btn-num {
  padding-left: 10px;
  border-left: 1px solid var(--vv-line);
  color: var(--vv-ink-mute);
  font-size: 9px;
  letter-spacing: 0.25em;
}
.vv-chrome-close span:first-child {
  color: var(--vv-gold);
  font-size: 13px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   MORE CRITICS GRID
   ═══════════════════════════════════════════════════════════════ */
.vv-more {
  margin: 40px 0 60px;
  padding-top: 24px;
  border-top: 1px solid var(--vv-line);
}
.vv-more-head {
  margin-bottom: 24px;
}
.vv-more-kick {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--vv-red);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.vv-more-title {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--vv-ink);
  margin: 0 0 14px;
}
.vv-more-rule {
  height: 2px;
  width: 48px;
  background: var(--vv-red);
}
.vv-more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 18px;
}
.vv-more-cell {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 180ms ease-out;
}
.vv-more-cell:hover { transform: translateY(-3px); }
.vv-more-cover {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #111;
}
/* Poster variant — vertical movie-poster ratio so affiches render entire */
.vv-more-cover.vv-more-cover--poster {
  aspect-ratio: 2/3;
}
.vv-more-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out, filter 400ms;
  filter: saturate(0.85) contrast(1.05);
}
.vv-more-cover.vv-more-cover--poster img {
  /* Posters are already final art — a softer filter keeps their colours true */
  filter: saturate(0.95) contrast(1.02);
}
.vv-more-cell:hover .vv-more-cover img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.1);
}
.vv-more-year {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--vv-red);
  color: var(--vv-ink);
  padding: 3px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 700;
}
.vv-more-film {
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--vv-ink);
  line-height: 1.05;
  margin-top: 4px;
}
.vv-more-crit {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--vv-ink-soft);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vv-more-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  padding-top: 6px;
  border-top: 1px solid var(--vv-line);
}
.vv-more-rating { color: var(--vv-gold); letter-spacing: 0.1em; }

/* ═══════════════════════════════════════════════════════════════
   INDEX DRAWER
   ═══════════════════════════════════════════════════════════════ */
.vv-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 200;
  animation: vv-drawer-scrim-in 200ms ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes vv-drawer-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.vv-drawer {
  background: #0a0604;
  border-bottom: 3px solid var(--vv-red);
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 28px 24px 40px;
  animation: vv-drawer-in 280ms cubic-bezier(.2,.7,.3,1);
}
@keyframes vv-drawer-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.vv-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vv-line);
}
.vv-drawer-kick {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--vv-red);
  font-weight: 700;
  margin-bottom: 8px;
}
.vv-drawer-title {
  font-family: 'Anton', sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--vv-ink);
  margin: 0;
}
.vv-drawer-x {
  appearance: none;
  background: transparent;
  border: 1px solid var(--vv-line);
  color: var(--vv-ink);
  width: 36px; height: 36px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms;
}
.vv-drawer-x:hover { border-color: var(--vv-red); background: rgba(217,43,43,0.15); }
.vv-drawer-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  padding: 12px 0 20px;
}
.vv-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vv-drawer-item {
  border-top: 1px solid var(--vv-line);
}
.vv-drawer-item:last-child {
  border-bottom: 1px solid var(--vv-line);
}
.vv-drawer-item button {
  appearance: none;
  background: transparent;
  border: none;
  padding: 16px 4px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  color: inherit;
  text-align: left;
  transition: background 150ms;
}
.vv-drawer-item button:hover:not(:disabled) {
  background: rgba(217,43,43,0.06);
}
.vv-drawer-item button:disabled {
  cursor: default;
  opacity: 1;
}
.vv-drawer-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--vv-ink-mute);
  flex-shrink: 0;
  width: 42px;
}
.vv-drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vv-drawer-film {
  font-family: 'Anton', sans-serif;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--vv-ink);
  line-height: 1.1;
}
.vv-drawer-film em {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  color: var(--vv-ink-mute);
  letter-spacing: 0;
  margin-left: 2px;
}
.vv-drawer-crit {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--vv-ink-soft);
  line-height: 1.25;
}
.vv-drawer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  margin-top: 2px;
}
.vv-drawer-chev {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--vv-red);
  flex-shrink: 0;
  padding-left: 12px;
  transition: transform 180ms;
}
.vv-drawer-item.is-current .vv-drawer-chev {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--vv-gold);
}
.vv-drawer-item.is-current .vv-drawer-film {
  color: var(--vv-gold);
}
.vv-drawer-item button:hover:not(:disabled) .vv-drawer-chev {
  transform: translateX(4px);
}