/* ============================================================
   Riflessi dell'invisibile — landing styles
   Token-driven. Cambia il "look" sostituendo i valori in :root.
   ============================================================ */

:root {
  /* ───────── COLORI — palette ridotta, ogni token ha UN ruolo ─────────
     8 funzionali + 4 accent dei poster (riservati al gradient titoli). */

  /* Superfici */
  --color-paper: #f6efe1;             /* cream — sfondo + testo su dark */
  --color-ink:   #443a26;             /* warm soft brown — ammorbidito ulteriore 20% */

  /* Accent (3 — uno per famiglia tonale) */
  --color-accent:         #ed1c24;    /* rosso primario — CTA, sole, dot */
  --color-accent-2:       #5b4ba1;    /* viola secondario — lead, pass */
  --color-accent-2-light: #a99adf;    /* viola chiaro per dark wash */

  /* Linee — alpha basso per evitare nettezza, sfumano col background */
  --color-rule:              rgba(26, 22, 16, 0.10);     /* hairlines su cream */
  --color-rule-soft:         rgba(26, 22, 16, 0.06);
  --color-rule-warm:         rgba(184, 169, 138, 0.45);  /* taupe — strip, spina */
  --color-rule-on-dark:      rgba(246, 239, 225, 0.16);
  --color-rule-on-dark-soft: rgba(246, 239, 225, 0.10);

  /* ───────── WASH — apre col rosso vivo, scivola verso viola
     scuro desaturato verso il footer (no brillantezza). */
  --grad-dark-wash:
    linear-gradient(180deg,
      #d11923   0%,    /* calendar top — rosso pieno, niente dark */
      #b81822  18%,
      #971826  36%,
      #6f1932  52%,    /* deep crimson with magenta hint */
      #4a1f48  66%,    /* red → purple transition */
      #2c1f4e  82%,    /* viola desaturato in discesa */
      #1a1438 100%     /* footer — deep dark eggplant, smorzato */
    );

  /* ───────── TYPOGRAPHY TOKENS ───────── */
  --font-display:      'Oswald', 'Archivo Narrow', system-ui, sans-serif;
  --font-display-hero: 'Anton',  'Archivo Narrow', system-ui, sans-serif;
  --font-narrow:       'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
  --font-jp:      'Noto Serif JP', serif;

  --display-tracking: 0.005em;
  --mono-tracking-wide: 0.18em;
  --mono-tracking-extra: 0.22em;

  /* ───── TYPE SCALE — solo 4 dimensioni totali ─────
     display  → titoli grandi (h2, hero big, card title, calendar number/title/arrow)
     heading  → sub-titoli (lead small, restored l1, card sub, quote text, calendar sub)
     body     → paragrafi (manifesto p, regista p, card log, kanji JP, dates strip)
     caption  → mono uppercase (label, eyebrow, meta, attribution, micro)
     ─ Fluid via clamp() — i valori scalano linearmente fra mobile e desktop,
       niente più salti tra breakpoint. */
  --fs-display: clamp(32px, 18px + 3vw, 64px);
  --fs-heading: clamp(20px, 16px + 0.5vw, 24px);
  --fs-body:    clamp(15px, 13.5px + 0.25vw, 17px);
  --fs-caption: 11px;

  /* ───── LINE-HEIGHTS — 4 step ───── */
  --lh-tight:    0.95;        /* display headings */
  --lh-snug:     1.2;         /* sub-headings */
  --lh-normal:   1.5;         /* body short */
  --lh-relaxed:  1.65;        /* paragrafi lunghi */

  /* ───── SPACING SCALE — solo 6 step + 1 tweak ottico ─────
     1 tight (gap intra-elemento, hairline)
     2 base (margin paragrafo, gap item)
     3 mid (paragraph spacing, card padding)
     4 component gap
     5 page-x padding, section small
     6 section padding-y standard/large */
  --sp-1:      8px;
  --sp-2:     16px;
  --sp-3:     24px;
  --sp-4:     40px;
  --sp-5:     64px;
  --sp-6:     96px;
  --sp-tweak: -4px;            /* CJK leading optical compensation */

  /* Alias semantici (pure pointer ai token sopra) */
  --space-page-x:       var(--sp-5);
  --space-section-y:    var(--sp-6);
  --space-section-y-lg: var(--sp-6);

  --content-max: 1100px;       /* contenuti centrati: header → footer */
  --hero-photo-min-height: 480px;
  --mobile-page-x: 24px;
  --mobile-content-max: calc(100vw - (2 * var(--mobile-page-x)));

  /* ───────── MOTION TOKENS ───────── */
  --ease-out-soft: cubic-bezier(.2, .7, .3, 1);
  --ease-smooth:   cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out quint, più morbido per ingressi */
  --duration-hover: .35s;
  --duration-image: .6s;
  --duration-fade:  1.1s;

  /* ───────── ELEVATION TOKENS ───────── */
  --shadow-card: 0 6px 18px rgba(26, 22, 16, .06);
  --shadow-card-hover: 0 22px 50px rgba(26, 22, 16, .18);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-tight);
  font-weight: 400;
}

/* Hero stays on Anton for the iconic key-art lockup feel */
.r-hero .brand { font-family: var(--font-display-hero); }

/* Calendar big day number → leggermente più heavy così tiene punch */
.r-cal .row .when { font-weight: 500; }
.mono   { font-family: var(--font-mono); }
.narrow { font-family: var(--font-narrow); }

/* ───── DARK WASH — wrapper che porta UN solo gradient + UN solo grain
   per tutte le sezioni scure (calendar → footer). Le sezioni dentro il
   wrapper sono background:transparent e condividono questo flusso. */
.dark-wash {
  position: relative;
  background: var(--grad-dark-wash);
  color: var(--color-paper);
  isolation: isolate;
  overflow: hidden;
}
.dark-wash::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.36;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.dark-wash > * { position: relative; z-index: 2; }

/* ───── SCROLL REVEAL — fade-in + translateY mentre la sezione entra in viewport */
.scroll-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-fade) var(--ease-smooth),
              transform var(--duration-fade) var(--ease-smooth);
  will-change: opacity, transform;
}
.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger interno: titoli/paragrafi della sezione si animano in cascata
   appena la sezione è visibile (label → h2 → p → p). */
.scroll-fade-children > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}
.scroll-fade-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.scroll-fade-children.is-visible > *:nth-child(1) { transition-delay: 0.10s; }
.scroll-fade-children.is-visible > *:nth-child(2) { transition-delay: 0.22s; }
.scroll-fade-children.is-visible > *:nth-child(3) { transition-delay: 0.34s; }
.scroll-fade-children.is-visible > *:nth-child(4) { transition-delay: 0.46s; }
.scroll-fade-children.is-visible > *:nth-child(5) { transition-delay: 0.58s; }
.scroll-fade-children.is-visible > *:nth-child(n+6) { transition-delay: 0.70s; }

/* ───── HERO LOAD — stagger entry su lead, script, photo, restored, strip */
.r-hero .lead,
.r-hero .script,
.r-hero .col-photo,
.r-hero .restored,
.r-hero .dates {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-rise var(--duration-fade) var(--ease-smooth) forwards;
}
.r-hero .lead      { animation-delay: 0.10s; }
.r-hero .script    { animation-delay: 0.25s; }
.r-hero .col-photo { animation-delay: 0.40s; }
.r-hero .restored  { animation-delay: 0.55s; }
.r-hero .dates     { animation-delay: 0.85s; }
@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Play button: solo fade-in, niente translate (per non interferire col pulse) */
.r-hero .hero-play {
  opacity: 0;
  animation: hero-fade-in var(--duration-fade) var(--ease-smooth) 0.70s forwards;
}
@keyframes hero-fade-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-fade,
  .scroll-fade-children > * { opacity: 1; transform: none; transition: none; }
  .r-hero .lead, .r-hero .script, .r-hero .col-photo,
  .r-hero .restored, .r-hero .hero-play, .r-hero .dates {
    animation: none; opacity: 1; transform: none;
  }
}

/* ============================================================
   NAV
   ============================================================ */
nav.r-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule-soft);
  padding: var(--sp-2) var(--space-page-x);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-wide);
  text-transform: uppercase;
}
.r-nav .inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.r-nav .left { display: flex; align-items: center; gap: var(--sp-2); }
.r-nav .dot  { width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); }

/* Hamburger toggle — 3 barre rosse 28×18 in area click 44×44 (iOS HIG). */
.r-nav .menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.r-nav .menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  transition: transform 0.28s var(--ease-out-soft),
              opacity 0.2s var(--ease-out-soft);
}
.r-nav .menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.r-nav .menu-toggle.open span:nth-child(2) { opacity: 0; }
.r-nav .menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   OVERLAY MENU — editoriale magazine
   Lista voci numerate centrata + grande kanji decoration in
   background che cambia su hover. Background = wash gradient
   palette (rosso → viola) + grain.
   ============================================================ */
.r-overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--grad-dark-wash);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  animation: r-menu-fade-in 0.35s var(--ease-out-soft);
}
.r-overlay-menu::after {
  /* Grain overlay come .dark-wash */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.32;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.r-overlay-menu[hidden] { display: none; }

/* Pulsante X per chiudere — top-right, sempre visibile sopra all'overlay */
.r-overlay-menu .r-menu-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 3;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-paper);
  transition: color 0.2s var(--ease-out-soft), transform 0.3s var(--ease-out-soft);
}
.r-overlay-menu .r-menu-close svg {
  width: 44px;
  height: 44px;
  display: block;
}
.r-overlay-menu .r-menu-close:hover,
.r-overlay-menu .r-menu-close:focus-visible {
  color: var(--color-accent);
  transform: rotate(90deg);
  outline: none;
}

/* Decoration: kanji gigante in background che appare su hover.
   Vuoto di default, JS riempie il textContent al mouseenter. */
.r-overlay-menu .r-menu-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-size: clamp(360px, 60vw, 720px);
  line-height: var(--lh-tight);
  color: var(--color-paper);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s var(--ease-out-soft), transform 0.6s var(--ease-out-soft);
  pointer-events: none;
  mix-blend-mode: overlay;
  user-select: none;
}
.r-overlay-menu .r-menu-deco.is-active {
  opacity: 0.18;
  transform: scale(1);
}

/* Lista voci numerate */
.r-overlay-menu .r-menu-list {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  padding: 0 var(--sp-4);
  display: flex;
  flex-direction: column;
}
.r-overlay-menu .r-menu-list a {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--color-rule-on-dark-soft);
  text-decoration: none;
  color: var(--color-paper);
  transition: color 0.3s var(--ease-out-soft);
  animation: r-menu-row-in 0.55s var(--ease-out-soft) backwards;
}
.r-overlay-menu .r-menu-list a:last-child {
  border-bottom: 1px solid var(--color-rule-on-dark-soft);
}
.r-overlay-menu .r-menu-list a:nth-child(1) { animation-delay: 0.15s; }
.r-overlay-menu .r-menu-list a:nth-child(2) { animation-delay: 0.22s; }
.r-overlay-menu .r-menu-list a:nth-child(3) { animation-delay: 0.29s; }
.r-overlay-menu .r-menu-list a:nth-child(4) { animation-delay: 0.36s; }
.r-overlay-menu .r-menu-list a:nth-child(5) { animation-delay: 0.43s; }

.r-overlay-menu .r-menu-list .num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-extra);
  opacity: 0.65;
  transition: opacity 0.3s var(--ease-out-soft), color 0.3s var(--ease-out-soft);
}
.r-overlay-menu .r-menu-list .label {
  font-family: var(--font-display-hero);
  font-size: var(--fs-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-tight);
  transition: transform 0.4s var(--ease-out-soft), color 0.3s var(--ease-out-soft);
}
.r-overlay-menu .r-menu-list a:hover .label,
.r-overlay-menu .r-menu-list a:focus-visible .label {
  color: var(--color-paper);
  transform: translateX(12px);
}
.r-overlay-menu .r-menu-list a:hover .num,
.r-overlay-menu .r-menu-list a:focus-visible .num {
  opacity: 1;
  color: var(--color-accent);
}

@keyframes r-menu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes r-menu-row-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: padding ridotto, kanji deco più piccolo */
@media (max-width: 767px) {
  .r-overlay-menu {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 112px var(--mobile-page-x) 40px;
  }
  .r-overlay-menu .r-menu-close {
    top: 18px;
    right: var(--mobile-page-x);
    width: 44px;
    height: 44px;
    color: rgba(246, 239, 225, 0.72);
  }
  .r-overlay-menu .r-menu-close svg {
    width: 30px;
    height: 30px;
  }
  .r-overlay-menu .r-menu-list {
    max-width: none;
    padding: 0;
  }
  .r-overlay-menu .r-menu-list a {
    grid-template-columns: 34px 1fr;
    gap: var(--sp-3);
    padding: 18px 0;
  }
  .r-overlay-menu .r-menu-list a[href="#critica"] {
    display: none;
  }
  .r-overlay-menu .r-menu-list a[href="#regista"] .num {
    font-size: 0;
  }
  .r-overlay-menu .r-menu-list a[href="#regista"] .num::after {
    content: '04';
    font-size: var(--fs-caption);
  }
  .r-overlay-menu .r-menu-list .label {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 0.98;
  }
  .r-overlay-menu .r-menu-deco {
    display: none;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.r-hero {
  position: relative;
  width: min(var(--content-max), calc(100% - (2 * var(--space-page-x))));
  max-width: none;
  padding: 0 0 var(--sp-3);
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr auto;       /* row 1 prende tutto, row 2 = strip */
  column-gap: var(--sp-4);
  row-gap: 0;
  align-items: stretch;
  /* Tutta la hero (col-text + col-photo + strip date) sta dentro la
     prima viewport, sotto la nav. */
  height: calc(100vh - var(--nav-height, 56px));
  min-height: 540px;                  /* fallback per viewport corti */
  --hero-strip-height: 88px;
}
/* (rimossi i layer separati .sun/.flowers — sostituiti da .hero-art unico) */
.r-hero .col-text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  justify-content: center;            /* blocco centrato verticalmente, elementi vicini */
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  transition: opacity 360ms var(--ease-out-soft);
}
.r-hero .lead { margin-bottom: 0; }
.r-hero .lead .small {
  color: var(--color-accent);
  font-size: var(--fs-heading);
  line-height: var(--lh-tight); letter-spacing: 0.01em;
}
.r-hero .lead .big {
  color: var(--color-accent-2);
  font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: var(--display-tracking);
}
.r-hero .script { width: 100%; max-width: 620px; margin: 0 auto; }
.r-hero .restored {
  margin-bottom: 0; text-align: center;
  width: 100%;
}
.r-hero .restored .l1 {
  color: var(--color-accent);
  font-size: var(--fs-heading);
  line-height: var(--lh-snug);
}
.r-hero .restored .l2 {
  color: var(--color-accent);
  font-size: var(--fs-body);
  line-height: var(--lh-snug); opacity: 0.92;
}
.r-hero .dates {
  /* Strip sotto entrambe le colonne dell'hero, allineata al sistema 12-col:
     ogni cella = 3 col + 2 gutter (~251px), gap tra celle = 1 gutter (32px).
     Totale 4*251 + 3*32 = 1100 ✓ (= --content-max). */
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px;
  background: transparent;
  border-top: 1px solid var(--color-rule-warm);
  border-bottom: 1px solid var(--color-rule-warm);
}
.r-hero .dates .cell {
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}
.r-hero .dates .t {
  font-family: var(--font-display);   /* Oswald, più light di Anton */
  color: var(--color-accent);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
}
.r-hero .dates .d {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--sp-1); opacity: 0.7;
}
.r-hero .col-photo {
  position: relative; z-index: 2;
  display: flex; align-items: stretch; justify-content: center;
  overflow: hidden;
  transition: opacity 360ms var(--ease-out-soft);
}
/* L'asset PNG è già croppato sul subject (ratio ~0.79). object-fit:cover
   con anchor bottom: l'image riempie l'altezza disponibile (= row hero
   stretchata a viewport - nav - strip), il top viene tagliato per
   stare sotto l'header. */
.r-hero .col-photo .hero-art {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}

.r-hero .hero-play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(50% - 42px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity 260ms var(--ease-out-soft), transform 180ms var(--ease-out-soft);
}
.r-hero .hero-play .play-mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 18px 42px rgba(237, 28, 36, 0.22);
  transition: transform 180ms var(--ease-out-soft), box-shadow 180ms var(--ease-out-soft);
}
.r-hero .hero-play .play-mark::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 23px solid var(--color-paper);
}
.r-hero .hero-play:hover .play-mark,
.r-hero .hero-play:focus-visible .play-mark {
  transform: scale(1.06);
  box-shadow: 0 22px 56px rgba(237, 28, 36, 0.30);
}
.r-hero .hero-play:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 10px;
}
.r-hero .hero-player {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--hero-strip-height) + var(--sp-4));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #130f22;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms var(--ease-out-soft), visibility 0s linear 420ms;
}
.r-hero .hero-trailer-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #130f22;
}
.r-hero .hero-player-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 3;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-paper);
  transition: color 0.2s var(--ease-out-soft), transform 0.3s var(--ease-out-soft);
}
.r-hero .hero-player-close svg {
  width: 44px;
  height: 44px;
  display: block;
}
.r-hero .hero-player-close:hover,
.r-hero .hero-player-close:focus-visible {
  color: var(--color-accent);
  transform: rotate(90deg);
  outline: none;
}
.r-hero.is-player-active .col-text,
.r-hero.is-player-active .col-photo,
.r-hero.is-player-active .hero-play {
  opacity: 0;
  pointer-events: none;
}
.r-hero.is-player-active .hero-player {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 420ms var(--ease-out-soft), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .r-hero .col-text,
  .r-hero .col-photo,
  .r-hero .hero-play,
  .r-hero .hero-player {
    transition: none;
  }
}

/* ───── HERO ENTRANCE — animazioni disabilitate (commentate). Per
   riattivarle, scommentare l'intero blocco @media qui sotto.
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes hero-mask-reveal {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes hero-photo-in {
    from { opacity: 0; transform: scale(1.18) translateY(0); }
    to   { opacity: 1; transform: scale(1.15) translateY(0); }
  }
  @keyframes hero-photo-float {
    0%, 100% { transform: scale(1.15) translateY(0); }
    50%      { transform: scale(1.15) translateY(-6px); }
  }

  .r-hero .lead,
  .r-hero .restored,
  .r-hero .dates {
    opacity: 0;
    animation: hero-fade-up .9s var(--ease-out-soft) forwards;
  }
  .r-hero .lead     { animation-delay: 0.15s; }
  .r-hero .restored { animation-delay: 0.55s; }
  .r-hero .dates    { animation-delay: 0.75s; }

  .r-hero .script {
    opacity: 0;
    animation: hero-mask-reveal 1.1s var(--ease-out-soft) 0.45s forwards;
  }

  .r-hero .col-photo .hero-art {
    opacity: 0;
    animation:
      hero-photo-in 1.3s var(--ease-out-soft) 0.20s forwards,
      hero-photo-float 6s ease-in-out 1.6s infinite;
  }
}
*/

/* ============================================================
   MANIFESTO — sezione "Il progetto" (bio editoriale rassegna)
   ============================================================ */
.r-manifesto {
  width: min(var(--content-max), calc(100% - (2 * var(--space-page-x))));
  max-width: none;
  padding: var(--sp-6) 0 var(--sp-5);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}
.r-manifesto .label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-extra);
  text-transform: uppercase;
  color: var(--color-accent);
}
.r-manifesto .headline {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--color-ink);
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
.r-manifesto .body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  max-width: 720px;
}
.r-manifesto .body p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  margin: 0;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
.r-manifesto .body em {
  font-family: var(--font-narrow);
  font-style: italic;
  font-weight: 500;
}

/* ============================================================
   SECTION LABEL ("01 I quattro film", etc)
   ============================================================ */
.r-label {
  width: min(var(--content-max), calc(100% - (2 * var(--space-page-x))));
  max-width: none;
  padding: var(--sp-6) 0 var(--sp-4);
  margin: 0 auto;
  border-top: 1px solid var(--color-rule);
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--sp-4); align-items: baseline;
}
.r-label h2 {
  font-size: var(--fs-display);
  color: var(--color-accent-2-light);
  margin: 0; line-height: var(--lh-tight);
}
.r-label .sub {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin-top: var(--sp-1);
}
.r-label .scroll {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-wide);
  text-transform: uppercase;
  opacity: 0.55;
}

/* Label nel "dark wash" — solo override colori, niente background né grain
   (lo fluido del wrapper) e niente border-top (creava una linea netta) */
.r-label--dark {
  background: transparent;
  color: var(--color-paper);
  border-top: none;
}
.r-label--dark h2     { color: var(--color-paper); }
.r-label--dark .sub   { color: var(--color-paper); opacity: 0.7; }
.r-label--dark .scroll{ color: var(--color-paper); opacity: 0.5; }

/* ============================================================
   GRID — i 4 poster
   ============================================================ */
/* Wrapper della sezione "I quattro film": cream pulito, niente gradient. */
.r-films-band {
  position: relative;
  background: var(--color-paper);
}
.r-films-band > * {
  position: relative;
  z-index: 1;
}

.r-grid {
  width: min(var(--content-max), calc(100% - (2 * var(--space-page-x))));
  max-width: none;
  padding: var(--space-section-y) 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  position: relative;
}
/* Spina verticale lieve al centro della sezione poster.
   Fade ai due estremi per non spezzare con le sezioni adiacenti. */
.r-grid::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-rule-warm);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.r-grid .r-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 0;
  align-items: center;
  text-decoration: none;
  color: var(--color-ink);
  position: relative;
  z-index: 1;
}
/* Row dispari: poster col 1-5, info col 8-12 (5 col + 4 gut ≈ 440px ciascuno,
   spina centrale a 50%, gap simmetrico ~110px da entrambi i lati).
   Row pari: specchiato → info col 1-5, poster col 8-12.
   `grid-row: 1` esplicito: senza, il placement sparse mette l'info delle
   row pari nella row 2 (dopo il poster col 8-12). */
.r-grid .r-row .poster { grid-column: 1 / span 5; grid-row: 1; }
.r-grid .r-row .info   { grid-column: 8 / span 5; grid-row: 1; }
.r-grid .r-row:nth-child(even) .poster { grid-column: 8 / span 5; }
.r-grid .r-row:nth-child(even) .info   { grid-column: 1 / span 5; }
.r-grid .r-row:nth-child(even) .info {
  text-align: right;
  align-items: flex-end;
}

.r-grid .r-row .poster {
  position: relative;
  aspect-ratio: 4 / 5;   /* match dei poster sorgente (1080×1350) — niente crop */
  overflow: hidden;
  background: var(--color-ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-hover) var(--ease-out-soft),
              box-shadow var(--duration-hover);
}
.r-grid .r-row:hover .poster {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.r-grid .r-row .poster img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-image) var(--ease-out-soft);
}
.r-grid .r-row:hover .poster img { transform: scale(1.03); }

.r-grid .r-row .info {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  /* Riempie la propria col span (5/12) — testo allineato alle linee della
     griglia 12 (stesso bordo del poster specchiato). */
}
.r-grid .r-row .info .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 400;
}
.r-grid .r-row .info .title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--color-ink);
}
.r-grid .r-row .info .sub {
  font-size: var(--fs-heading);
  font-family: var(--font-narrow);
  color: var(--color-ink);
  opacity: 0.7;
  margin-top: var(--sp-tweak);
}
.r-grid .r-row .info .log {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  margin: var(--sp-1) 0 0;
  max-width: 540px;
  opacity: 0.85;
}
.r-grid .r-row .info .actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.r-grid .r-row:nth-child(even) .info .actions {
  justify-content: flex-end;
}
/* Dot rosso separatore tra "Vai al film" e "Trailer" */
.r-grid .r-row .info .actions .trailer::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-right: var(--sp-2);
  vertical-align: middle;
  flex-shrink: 0;
}
.r-grid .r-row .info .cta,
.r-grid .r-row .info .trailer {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
  transition: letter-spacing 0.2s;
}
.r-grid .r-row .info .trailer {
  color: var(--color-ink);
  opacity: 0.62;
}
.r-grid .r-row .info .cta:hover,
.r-grid .r-row .info .trailer:hover { letter-spacing: 0.08em; }


/* ============================================================
   CALENDAR (dark band)
   ============================================================ */
.r-cal {
  padding: var(--space-section-y) 0;
  background: transparent;
  color: var(--color-paper);
  position: relative;
}
.r-cal .row { position: relative; z-index: 2; }
/* Fiori = backdrop pieno del calendar, in screen-blend sul gradient scuro
   (i colori vivaci dei fiori "si accendono" sul fondo).
   Mask verticale: top/bottom sfumati così foglie e gambi non si tagliano. */
.r-cal .deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.08;
  filter: saturate(0.6) brightness(0.85);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.r-cal .row {
  padding: var(--sp-4) var(--space-page-x);
  /* altezza calibrata sul titolo più lungo (After Life — 2 righe
     + sub + meta) col kanji ora a 18px che non è più il limit. */
  min-height: 220px;
  background: transparent;
  display: grid;
  grid-template-columns: 220px 48px minmax(0, 1fr) 80px;
  gap: var(--sp-5); align-items: center;
  color: var(--color-paper);
  text-decoration: none;
  border-top: 1px solid var(--color-rule-on-dark-soft);
  transition: background 0.2s;
}
.r-cal .row:first-child { border-top-color: var(--color-rule-on-dark-soft); }
.r-cal .row:focus-within,
.r-cal .row:hover { background: rgba(246, 239, 225, 0.06); }
/* Date column — display flex con prefix opzionale "DAL" (uscita ordinaria),
   numero/range grosso, mese in mono uppercase. */
.r-cal .row .when {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.r-cal .row .when .prefix {
  position: absolute;
  left: 0;
  top: -22px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-extra);
  text-transform: uppercase;
  color: var(--color-paper);
}
.r-cal .row .when .n {
  font-size: var(--fs-display);
  color: var(--color-paper);
  line-height: var(--lh-tight);
}
.r-cal .row .when .m {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-wide);
  text-transform: uppercase;
  color: var(--color-paper);
  margin-top: var(--sp-1);
}
.r-cal .row .when .ical {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: var(--sp-3);
  padding: 7px 9px 6px;
  border: 1px solid rgba(246, 239, 225, 0.28);
  color: rgba(246, 239, 225, 0.68);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(246, 239, 225, 0.035);
  transition: color 0.2s var(--ease-out-soft), border-color 0.2s var(--ease-out-soft), background 0.2s var(--ease-out-soft), transform 0.2s var(--ease-out-soft);
}
.r-cal .row .when .ical:hover,
.r-cal .row .when .ical:focus-visible {
  color: var(--color-paper);
  border-color: rgba(246, 239, 225, 0.56);
  background: rgba(246, 239, 225, 0.08);
  transform: translateY(-1px);
  outline: none;
}
.r-cal .row .jp {
  font-family: var(--font-jp);
  writing-mode: vertical-rl;
  font-size: var(--fs-body);
  color: var(--color-paper);
  letter-spacing: 0.18em;
  line-height: var(--lh-tight);
  text-align: center;
  width: 32px;
  justify-self: center;
  margin-top: 0;
  transform: translateX(-8px);
}

/* Wrapper delle 4 row: ospita i due binari verticali continui (pseudo),
   con fade in/out top e bottom via mask. */
.r-cal-rows {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
}
.r-cal-rows::before,
.r-cal-rows::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--color-rule-on-dark-soft);
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
/* Stesso corridoio ottico del nome giapponese nel blocco regista:
   rail a 4px e 44px, con testo largo 32px centrato tra i due. */
.r-cal-rows::before { left: calc(var(--space-page-x) + 220px + var(--sp-5) + 4px); }
.r-cal-rows::after  { left: calc(var(--space-page-x) + 220px + var(--sp-5) + 44px); }
@media (max-width: 767px) {
  .r-cal-rows::before, .r-cal-rows::after { display: none; }
}
.r-cal .row .title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  /* "Maborosi" (1 parola) resta in linea, "Nobody Knows" / "Still Walking" /
     "After Life" (2+ parole) vanno a capo per ogni spazio. */
  word-spacing: 100vw;
}
.r-cal .row .sub {
  font-size: var(--fs-body);
  color: var(--color-paper);
  margin-top: var(--sp-1);
  font-family: var(--font-narrow);
}
.r-cal .row .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6; margin-top: var(--sp-2);
}
.r-cal .row .arrow {
  font-size: var(--fs-display); color: var(--color-paper); text-align: right; line-height: var(--lh-tight);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.2s var(--ease-out-soft), transform 0.2s var(--ease-out-soft);
}
.r-cal .row .arrow:hover,
.r-cal .row .arrow:focus-visible,
.r-cal .row:hover .arrow { opacity: 1; }
.r-cal .row .arrow:hover,
.r-cal .row .arrow:focus-visible {
  transform: translateX(4px);
  outline: none;
}

/* ============================================================
   PRESS — griglia editoriale con linee sfumate
   ============================================================ */
.r-press {
  width: min(var(--content-max), calc(100% - (2 * var(--space-page-x))));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 var(--space-section-y-lg);
  background: transparent;
  color: var(--color-paper);
}
.r-press .quotes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 0;
  isolation: isolate;
}
.r-press .quotes::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0%, var(--color-rule-on-dark-soft) 14%, var(--color-rule-on-dark-soft) 86%, transparent 100%) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, var(--color-rule-on-dark-soft) 14%, var(--color-rule-on-dark-soft) 86%, transparent 100%) 66.666% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, transparent 0%, var(--color-rule-on-dark-soft) 8%, var(--color-rule-on-dark-soft) 92%, transparent 100%) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, var(--color-rule-on-dark-soft) 8%, var(--color-rule-on-dark-soft) 92%, transparent 100%) 0 50% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, var(--color-rule-on-dark-soft) 8%, var(--color-rule-on-dark-soft) 92%, transparent 100%) 0 100% / 100% 1px no-repeat;
}
.r-quote-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: var(--sp-4);
}
.r-quote-card .text {
  font-family: var(--font-narrow);
  font-size: var(--fs-heading);
  line-height: var(--lh-snug);
  letter-spacing: 0.004em;
  color: var(--color-paper);
  margin: 0;
  max-width: 320px;
}
.r-quote-card .src {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-extra);
  text-transform: uppercase;
  color: var(--color-paper);
  opacity: 0.66;
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  width: 100%;
  max-width: 250px;
  background: linear-gradient(90deg, var(--color-rule-on-dark-soft), rgba(246, 239, 225, 0)) top left / 100% 1px no-repeat;
  transition: opacity var(--duration-hover) var(--ease-out-soft);
}
.r-quote-card:hover .src {
  opacity: 1;
}
.r-quote-card .src::before {
  content: '\2014\2009';
}
.r-quote-card--featured {
  grid-column: span 2;
}
.r-quote-card--featured .text {
  font-size: clamp(24px, 16px + 1.2vw, 36px);
  line-height: var(--lh-tight);
  max-width: none;
}
.r-quote-card--featured .src {
  max-width: none;
}

/* ============================================================
   DIRECTOR PROFILE — "Il regista"
   Testo a sx, ritratto a dx fuso col wash plum via blend mode.
   ============================================================ */
.r-pass {
  background: transparent;
  color: var(--color-paper);
  padding: var(--sp-5) var(--space-page-x);
  position: relative;
  overflow: hidden;       /* contiene il portrait */
}
.r-pass .inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  /* Hairline orizzontali sopra/sotto che contengono la scheda */
  border-top: 1px solid var(--color-rule-on-dark-soft);
  border-bottom: 1px solid var(--color-rule-on-dark-soft);
}
.r-pass .inner .jp {
  font-family: var(--font-jp);
  writing-mode: vertical-rl;
  font-size: var(--fs-body);            /* allineato ai kanji del calendario */
  letter-spacing: 0.18em;
  line-height: var(--lh-tight);
  color: var(--color-paper);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  margin-top: var(--sp-tweak);           /* compensa leading CJK come nel calendario */
}
/* Rails verticali sfumati che fiancheggiano la colonna kanji.
   In vertical-rl il glifo flow dal right edge della .jp (32px),
   glyph center a ~x=24. Rails simmetriche attorno a quel centro. */
.r-pass .inner::before,
.r-pass .inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-rule-on-dark-soft);
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.r-pass .inner::before { left: 4px; }
.r-pass .inner::after  { left: 44px; }
.r-pass .inner .content {
  max-width: 540px;
}
.r-pass .label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-extra);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  opacity: 0.78;
}
.r-pass h2 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}
/* Avatar mini accanto al title — visibile solo su mobile, hidden desktop */
.r-pass .title-row { display: contents; }
.r-pass .portrait-mini { display: none; }
.r-pass p {
  max-width: 480px;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  opacity: 0.88;
  margin: 0 0 var(--sp-2);
}
.r-pass p em {
  font-family: var(--font-narrow);
  font-style: italic;
  opacity: 0.95;
}

/* Ritratto ancorato al bordo destro del container 1100 (allineato con .inner).
   Larghezza 440px su desktop wide, scala col viewport sotto 1100+gutter.
   Mask sfuma il lato sinistro nel wash + bottom curve. */
.r-pass .portrait {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(var(--space-page-x), calc((100% - var(--content-max)) / 2));
  width: min(440px, 40%);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(180deg,
      rgba(0,0,0,1)    0%,
      rgba(0,0,0,1)    35%,
      rgba(0,0,0,0.96) 48%,
      rgba(0,0,0,0.85) 60%,
      rgba(0,0,0,0.65) 70%,
      rgba(0,0,0,0.42) 80%,
      rgba(0,0,0,0.20) 88%,
      rgba(0,0,0,0.07) 94%,
      rgba(0,0,0,0)    100%),
    linear-gradient(90deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0.4)  18%,
      rgba(0,0,0,0.85) 35%,
      rgba(0,0,0,1)    50%);
          mask-image:
    linear-gradient(180deg,
      rgba(0,0,0,1)    0%,
      rgba(0,0,0,1)    35%,
      rgba(0,0,0,0.96) 48%,
      rgba(0,0,0,0.85) 60%,
      rgba(0,0,0,0.65) 70%,
      rgba(0,0,0,0.42) 80%,
      rgba(0,0,0,0.20) 88%,
      rgba(0,0,0,0.07) 94%,
      rgba(0,0,0,0)    100%),
    linear-gradient(90deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0.4)  18%,
      rgba(0,0,0,0.85) 35%,
      rgba(0,0,0,1)    50%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.r-pass .portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) contrast(1.15) brightness(0.95);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* ============================================================
   FOOTER — legal line con loghi inline a destra
   ============================================================ */
.r-foot {
  padding: var(--sp-4) var(--space-page-x) var(--sp-5);
  background: transparent;
  color: var(--color-paper);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
}
.r-foot .legal {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-rule-on-dark);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--mono-tracking-wide);
  text-transform: uppercase;
  opacity: 0.85;
  min-height: 60px;
}
.r-foot .legal .copy { margin-right: auto; }    /* push tutto il resto a destra */
.r-foot .legal .logos {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.r-foot .legal .logos .logo {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.2s var(--ease-out-soft);
}
.r-foot .legal .logos .logo:hover { opacity: 1; }

/* ============================================================
   RESPONSIVE
   Mobile phones — breakpoint unico sotto tablet/iPad
   ============================================================ */
@media (max-width: 767px) {
  /* Typography fluida via clamp() in :root — niente override qui. */

  /* === NAV — brand + hamburger (mobile uguale a desktop) === */
  nav.r-nav { padding: 10px var(--mobile-page-x); }
  .r-nav .left { min-width: 0; gap: 12px; }
  nav.r-nav .left .dot { width: 22px; height: 22px; }
  .r-nav .left span:not(.dot) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .r-nav .menu-toggle {
    width: 40px;
    height: 40px;
    align-items: flex-end;
  }

  /* === HERO MOBILE — stack più ordinato, una sola griglia laterale === */
  .r-hero {
    width: 100%;                                   /* override desktop min(...) che lascia 64px per side */
    grid-template-columns: 1fr;
    grid-template-rows: auto;                      /* override desktop "1fr auto" — su mobile flow naturale */
    height: auto;                                  /* override desktop calc(100vh - nav) */
    min-height: auto;
    padding: 0 var(--mobile-page-x) var(--sp-4);
    gap: var(--sp-2);
    --hero-strip-height: 142px;
  }
  /* Mobile: niente trailer player */
  .r-hero .hero-play,
  .r-hero .hero-player { display: none; }
  .r-hero .col-text {
    display: contents;
  }
  .r-hero .lead {
    order: 1;
    text-align: center;
    margin: var(--sp-4) 0 0;
  }
  .r-hero .script {
    order: 2;
  }
  .r-hero .col-photo {
    order: 3;
    position: relative;
    min-height: auto;
    height: auto;
    margin-top: 4px;
    padding-bottom: 10px;
  }
  .r-hero .col-photo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 1px;
    background: var(--color-rule-warm);
  }
  .r-hero .col-photo .hero-art {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;       /* allinea alla larghezza del resto del content mobile */
    height: auto;          /* override desktop height:100% — su mobile flow naturale */
    object-fit: contain;   /* override desktop cover — niente crop sull'immagine completa */
    margin: 0 auto;
    transform: none;
    transform-origin: center;
  }
  .r-hero .hero-play {
    order: 4;
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    margin: 0 auto;
    transform: none;
  }
  .r-hero .hero-play .play-mark {
    width: 58px;
    height: 58px;
  }
  .r-hero .hero-play .play-mark::before {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 18px;
  }
  .r-hero .hero-player {
    top: 0;
    bottom: calc(var(--hero-strip-height) + var(--sp-4));
    min-height: 0;
  }
  .r-hero .hero-trailer-video {
    min-height: 0;
    height: 100%;
  }
  .r-hero .lead .small { font-size: 16px; }
  .r-hero .lead .big { font-size: clamp(31px, 8.5vw, 38px); }
  .r-hero .restored {
    order: 5;
    padding: 0;
  }
  .r-hero .restored .l1 { font-size: 17px; }
  .r-hero .restored .l2 { font-size: 13px; }
  .r-hero .script {
    max-width: 228px;
    margin: 0 auto;
    padding: 0;
  }
  /* Strip date: dal posizionamento absolute torna nel flow, 2x2.
     Reset column-gap del desktop (32px) → 2x2 con bordi interni. */
  .r-hero .dates {
    order: 6;
    position: static;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
    margin: 12px 0 0;
  }
  .r-hero .dates .cell {
    padding: 14px 10px;
    text-align: center;
  }
  .r-hero .dates .t { font-size: 15px; }
  .r-hero .dates .d {
    margin-top: 6px;
    letter-spacing: 0.18em;
  }
  .r-hero .dates .cell + .cell { border-left: none; }
  .r-hero .dates .cell:nth-child(2n)   { border-left: 1px solid var(--color-rule-warm); }
  .r-hero .dates .cell:nth-child(n+3)  { border-top:  1px solid var(--color-rule-warm); }

  /* Disabilita float sulla foto su mobile (riduce battery + niente scale jump) */
  @media (prefers-reduced-motion: no-preference) {
    .r-hero .col-photo .hero-art {
      animation: none;
      opacity: 1;
    }
  }

  /* === MANIFESTO === */
  .r-manifesto {
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .r-manifesto .label,
  .r-manifesto .headline,
  .r-manifesto .body {
    grid-column: auto;
    grid-row: auto;
  }
  .r-manifesto .label,
  .r-manifesto .headline,
  .r-manifesto .body {
    width: min(100%, var(--mobile-content-max));
    max-width: var(--mobile-content-max);
  }
  .r-manifesto .headline { font-size: var(--fs-display); }
  .r-manifesto .body p { font-size: var(--fs-body); }

  /* === FILMS GRID === */
  .r-grid {
    padding: var(--sp-5) var(--mobile-page-x);
    gap: var(--sp-4);
  }
  /* In mobile niente alternazione → niente spina centrale */
  .r-grid::before { display: none; }
  .r-grid .r-row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    width: min(100%, var(--mobile-content-max));
    max-width: var(--mobile-content-max);
    margin: 0 auto;
  }
  .r-grid .r-row:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(184, 169, 138, 0.22) 10%,
      rgba(184, 169, 138, 0.7) 50%,
      rgba(184, 169, 138, 0.22) 90%,
      transparent 100%);
  }
  /* Reset grid-column/row del desktop: in mobile la row è 1 col stacked.
     Senza il reset di grid-row, poster e info finiscono nella stessa cella
     e l'info copre il poster (le locandine spariscono). */
  .r-grid .r-row .poster,
  .r-grid .r-row .info,
  .r-grid .r-row:nth-child(even) .poster,
  .r-grid .r-row:nth-child(even) .info { grid-column: auto; grid-row: auto; }
  .r-grid .r-row:nth-child(odd)  .poster,
  .r-grid .r-row:nth-child(even) .poster { justify-self: stretch; }
  .r-grid .r-row .poster { width: 100%; aspect-ratio: 4 / 5; }
  .r-grid .r-row:nth-child(even) .poster { order: 0; }
  .r-grid .r-row:nth-child(even) .info   {
    order: 0;
    text-align: left;          /* reset specchio desktop */
    align-items: stretch;
  }
  /* Mobile: recupera i contenuti desktop sotto al poster. */
  .r-grid .r-row .info {
    gap: 10px;
  }
  .r-grid .r-row .info .meta {
    display: block;
    font-size: var(--fs-caption);
    opacity: 0.62;
  }
  .r-grid .r-row .info .title {
    font-size: clamp(34px, 9.2vw, 42px);
  }
  .r-grid .r-row .info .title::after {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    margin: 12px 0 0;
    background: linear-gradient(90deg,
      rgba(184, 169, 138, 0.72),
      rgba(184, 169, 138, 0));
  }
  .r-grid .r-row .info .sub {
    display: block;
    font-size: 20px;
    line-height: var(--lh-snug);
    margin-top: 0;
  }
  .r-grid .r-row .info .log {
    display: block;
    font-size: 15px;
    line-height: 1.55;
    max-width: none;
    margin-top: 2px;
  }
  .r-grid .r-row .info .actions {
    justify-content: flex-start;
    gap: 14px;
    margin-top: 4px;
  }

  /* === LABEL ("Sguardi sulla rassegna") === */
  .r-label {
    padding: var(--sp-5) var(--sp-3) var(--sp-3);
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
  .r-label h2 { font-size: var(--fs-display); }
  .r-label .sub { font-size: var(--fs-caption); }
  .r-label .scroll { display: none; }

  /* === CALENDAR MOBILE — lista editoriale, non tabella compressa === */
  .r-cal {
    padding: var(--sp-4) 0 var(--sp-3);
    scroll-margin-top: 60px;
  }
  .r-cal .deco {
    width: 150%;
    max-width: none;
    left: -25%;
    top: -24px;
    opacity: 0.12;
  }
  .r-cal .row {
    padding: 18px var(--mobile-page-x);
    grid-template-columns: minmax(0, 1fr) 30px;
    column-gap: var(--sp-2);
    row-gap: 7px;
    min-height: 0;
    align-items: center;
  }
  .r-cal .row > div:not(.when):not(.jp):not(.arrow) {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  /* Mobile: kanji + sub + meta nascosti */
  .r-cal .row .jp,
  .r-cal .row .sub,
  .r-cal .row .meta { display: none; }
  /* Data come soprattitolo compatto: evita collisioni con i titoli lunghi */
  .r-cal .row .when {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    font-size: var(--fs-caption);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.82;
    white-space: nowrap;
  }
  .r-cal .row .when .prefix,
  .r-cal .row .when .n,
  .r-cal .row .when .m { font-size: var(--fs-caption); margin: 0; }
  .r-cal .row .when .ical {
    margin: 0 0 0 8px;
    padding: 5px 7px 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  /* Titolo film body */
  .r-cal .row .title {
    font-size: clamp(25px, 7.2vw, 31px);
    line-height: var(--lh-tight);
    letter-spacing: 0.01em;
    word-spacing: normal;
    white-space: nowrap;
  }
  .r-cal .row .arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    font-size: 30px;
    opacity: 0.72;
  }

  /* === PRESS MOBILE — nascosta: su telefono interrompe calendario → regista === */
  #critica,
  .r-press {
    display: none;
  }

  /* === DIRECTOR MOBILE — centrato editorial.
     display: contents su inner/content/title-row così tutti gli elementi
     diventano figli flex diretti di .r-pass e posso riordinarli con order. */
  .r-pass {
    padding: var(--sp-5) var(--sp-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .r-pass .inner,
  .r-pass .inner .content { display: contents; }
  .r-pass .title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    margin: var(--sp-2) 0 var(--sp-3);
    width: min(100%, var(--mobile-content-max));
  }
  .r-pass .portrait { display: none; }
  .r-pass .inner::before,
  .r-pass .inner::after { display: none; }

  /* Ordine target: label → avatar + h2 → p → p */
  .r-pass .portrait-mini {
    display: none;
  }
  .r-pass .portrait-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }
  .r-pass .label {
    order: 2;
    width: min(100%, var(--mobile-content-max));
  }
  .r-pass .inner .jp { display: none; }   /* mobile: niente kanji */
  .r-pass h2 {
    font-size: clamp(31px, 8.8vw, 40px);
    margin: 0;
    text-align: center;
  }
  .r-pass p {
    font-size: var(--fs-body);
    width: min(100%, var(--mobile-content-max));
    max-width: var(--mobile-content-max);
    order: 4;
  }

  /* === FOOTER === */
  .r-foot { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .r-foot .legal {
    width: min(100%, var(--mobile-content-max));
    max-width: var(--mobile-content-max);
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
    min-height: 0;
  }
  .r-foot .legal .copy { margin-right: 0; opacity: 1; }
  .r-foot .legal .links { opacity: 0.7; }
  .r-foot .legal .logos {
    gap: var(--sp-3);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .r-foot .legal .logos .logo {
    height: 28px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
  }
}

/* ============================================================
   Phone narrow (≤600px) — più stringato
   ============================================================ */
@media (max-width: 600px) {
  :root {
    --fs-caption: 10px;
    --mobile-page-x: 24px;
    --mobile-content-max: calc(100vw - (2 * var(--mobile-page-x)));
  }
  .r-hero { padding: 0 var(--mobile-page-x) var(--sp-4); }
  .r-hero .lead { margin-top: var(--sp-4); }
  .r-hero .lead .big { font-size: clamp(30px, 8.8vw, 36px); }
  .r-hero .lead .small { font-size: 15px; }
  .r-hero .col-photo .hero-art { max-width: 100%; }
  .r-hero .script { max-width: 220px; }

  .r-grid { padding: var(--sp-4) var(--mobile-page-x); gap: var(--sp-4); }
  .r-grid .r-row .info .title { font-size: var(--fs-display); }
  .r-manifesto { padding: var(--sp-4) var(--sp-2) var(--sp-3); }
  .r-manifesto .headline { font-size: var(--fs-display); }

  .r-label { padding: var(--sp-4) var(--sp-2) var(--sp-3); }
  .r-label h2 { font-size: var(--fs-display); }

  .r-cal .row {
    padding: 18px var(--mobile-page-x);
    grid-template-columns: minmax(0, 1fr) 30px;
    column-gap: var(--sp-2);
    row-gap: 7px;
  }

  .r-press { padding: 0 var(--sp-2) var(--sp-5); }
  .r-quote-card .text { font-size: var(--fs-body); line-height: var(--lh-normal); }
  .r-quote-card--featured .text { font-size: var(--fs-body); }

  .r-pass { padding: var(--sp-4) var(--sp-2); }
  .r-pass h2 { font-size: var(--fs-display); }
  .r-pass .portrait img { max-width: 240px; }

  .r-foot { padding: var(--sp-3) var(--sp-2) var(--sp-4); }
  .r-foot .legal .logos { gap: var(--sp-2); flex-wrap: wrap; }
  .r-foot .legal .logos .logo { height: 20px; }
}