/* Fondazione Giovanni Speranza — nuova home "La storia della Speranza"
   Layout di base statico e leggibile; la regia dello scroll si attiva con html.motion */

/* ---------- Font (self-hosted, nessuna chiamata esterna) ---------- */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/nunito-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/nunito-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/youngserif-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/youngserif-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Token ---------- */
:root {
  --ink: oklch(0.165 0.02 40);
  --ink-2: oklch(0.215 0.026 40);
  --chestnut: oklch(0.45 0.115 38);
  --amber: oklch(0.82 0.13 76);
  --amber-hover: oklch(0.87 0.11 80);
  --text: oklch(0.955 0.012 80);
  --text-soft: oklch(0.85 0.02 75);
  --line: oklch(0.955 0.012 80 / 0.2);
  --paper: oklch(0.975 0.008 85);
  --paper-ink: oklch(0.25 0.03 40);
  --paper-soft: oklch(0.4 0.03 40);
  --dusk: oklch(0.34 0.07 262);

  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  --step-display: clamp(2.6rem, 1.6rem + 4vw, 5.5rem);
  --step-h2: clamp(2.4rem, 1.6rem + 3.2vw, 4.5rem);
  --step-year: clamp(3.5rem, 2rem + 5.5vw, 6rem);
  --step-h3: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem);
  --step-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --step-body: 1.125rem;
  --step-small: 0.9375rem;

  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 6rem);
  --header-h: 4.5rem;
  /* parte di schermo coperta dalla barra del browser mobile (0 su desktop) */
  --vb: 0px;
  --vb: calc(100lvh - 100svh);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --z-chapters: 20;
  --z-header: 30;
  --z-skip: 50;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 var(--step-body) / 1.68 var(--font-body);
  letter-spacing: 0.01em;
  font-kerning: normal;
  overflow-x: clip;
}
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: var(--z-skip);
  padding: 0.75rem 1rem; background: var(--amber); color: var(--ink); font-weight: 800;
  border-radius: 6px; translate: 0 -200%; transition: translate 0.2s var(--ease-out);
}
.skip:focus { translate: 0 0; }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0.7rem 1.35rem; border-radius: 999px;
  font: 700 1rem / 1.15 var(--font-body); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, translate 0.25s var(--ease-out);
}
.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0 0; transition-duration: 0.08s; }
.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { background: var(--amber-hover); }
.btn-ghost { color: var(--text); box-shadow: inset 0 0 0 1.5px oklch(0.955 0.012 80 / 0.5); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); background: oklch(0.955 0.012 80 / 0.08); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  height: var(--header-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-l);
  background: linear-gradient(oklch(0.165 0.02 40 / 0.9), oklch(0.165 0.02 40 / 0.55) 60%, oklch(0.165 0.02 40 / 0));
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.12; text-decoration: none;
}
.brand img { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--paper); padding: 2px; }
.main-nav { display: none; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.5rem); }
.nav-list { display: flex; gap: clamp(1rem, 1.8vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: inline-block; padding: 0.6rem 0; font-weight: 700; font-size: 1rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 85% / 0 1.5px no-repeat;
  transition: background-size 0.3s var(--ease-out);
}
.nav-list a:hover { background-size: 100% 1.5px; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 1rem;
  border: 0; border-radius: 999px; background: oklch(0.955 0.012 80 / 0.12); color: var(--text);
  font: 700 1rem var(--font-body); cursor: pointer;
}
.menu-icon, .menu-icon::before { display: block; width: 1.1rem; height: 1.5px; background: currentColor; position: relative; }
.menu-icon::before { content: ""; position: absolute; top: 5px; width: 0.7rem; }
.menu-icon { translate: 0 -2.5px; }
@media (min-width: 64rem) {
  .main-nav { display: flex; }
  .menu-btn { display: none; }
}

/* Menu mobile: popover nativo */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; border: 0; padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  background: var(--ink); color: var(--text); overflow: auto;
  flex-direction: column; gap: var(--space-xl);
  opacity: 0; translate: 0 -0.75rem;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.menu:popover-open { display: flex; opacity: 1; translate: 0 0; }
@starting-style { .menu:popover-open { opacity: 0; translate: 0 -0.75rem; } }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu ul a { display: block; padding: 0.35rem 0; font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.2; text-decoration: none; }
.menu .btn { align-self: flex-start; }
.menu-contacts { color: var(--text-soft); line-height: 2; }
.menu-close {
  position: absolute; top: 0.85rem; right: var(--gutter); min-height: 2.75rem; padding: 0 1rem;
  border: 0; border-radius: 999px; background: oklch(0.955 0.012 80 / 0.12); color: var(--text);
  font: 700 1rem var(--font-body); cursor: pointer;
}

/* ---------- Segnalibro dei capitoli ---------- */
.chapters { position: fixed; z-index: var(--z-chapters); transition: opacity 0.4s var(--ease-out); }
.chapters.is-hidden { opacity: 0; pointer-events: none; }
.chapters ol { list-style: none; margin: 0; padding: 0; }
.chapters a { position: relative; display: block; text-decoration: none; }
.ch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ch-fill { display: block; background: var(--line); overflow: hidden; }
.ch-fill::after { content: ""; position: absolute; inset: 0; background: var(--amber); transform-origin: 0 0; transform: scale(var(--sx, 0), var(--sy, 0)); }
.ch-fill { position: relative; }

@media (max-width: 47.99rem) {
  .chapters { top: var(--header-h); left: 0; right: 0; padding: 0 var(--gutter); pointer-events: none; }
  .chapters ol { display: flex; gap: 4px; }
  .chapters li { flex: 1; }
  .chapters a:focus-visible { pointer-events: auto; }
  .ch-num { display: none; }
  .ch-fill { height: 3px; border-radius: 2px; --sy: 1; }
  .ch-fill::after { --sx: var(--fill, 0); }
}
@media (min-width: 48rem) {
  .chapters { right: clamp(0.75rem, 1.5vw, 1.75rem); top: 50%; translate: 0 -50%; }
  .chapters ol { display: grid; gap: 0.35rem; justify-items: center; }
  .chapters a { display: grid; justify-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; }
  .ch-num {
    font-family: var(--font-display); font-size: 0.9375rem; line-height: 1; color: var(--text-soft);
    min-width: 2rem; text-align: center; transition: color 0.3s;
  }
  .ch-fill { width: 2px; height: 2.25rem; border-radius: 2px; --sx: 1; }
  .ch-fill::after { --sy: var(--fill, 0); }
  .chapters a.is-active .ch-num, .chapters a:hover .ch-num { color: var(--amber); }
  .chapters a:hover .ch-label, .chapters a:focus-visible .ch-label {
    width: auto; height: auto; overflow: visible; clip-path: none;
    right: calc(100% + 0.25rem); top: 0.1rem; padding: 0.35rem 0.75rem; border-radius: 999px;
    background: oklch(0.165 0.02 40 / 0.88); font-weight: 700; font-size: 0.9375rem; line-height: 1.3;
  }
}

/* ---------- Capitoli: layout statico di base (no JS / reduced motion) ---------- */
.chapter { position: relative; }
.stage { position: relative; display: flex; flex-direction: column; }
.window {
  position: relative; order: 1; height: min(80svh, 60vw); min-height: 22rem;
  overflow: hidden; container-type: size; background: var(--ink-2);
}
.scene {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * 2560 / 1086)); aspect-ratio: 2560 / 1086;
  translate: -50% -50%; transform-origin: 50% 55%;
}
.scene picture, .scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Personaggi: livello separato, dimensionato sull'altezza della scena (orizzontale)
   o sulla larghezza (verticale); i tetti in cqw evitano che coprano il testo sugli schermi stretti. */
.fg { position: absolute; display: block; left: var(--fx); bottom: var(--fy); translate: -50% 0; transform-origin: 50% 100%; aspect-ratio: var(--far); height: var(--fh); }
.fg img { display: block; width: 100%; height: 100%; }
.ch-fondazione .fg { --far: 649 / 473; --fx: 68cqw; --fy: 3cqh; --fh: min(54cqh, 36cqw); }
.ch-scuola .fg { --far: 1033 / 497; --fx: 31cqw; --fy: 4cqh; --fh: min(42cqh, 25cqw); }
.ch-convitto .fg { --far: 786 / 483; --fx: 66cqw; --fy: 3cqh; --fh: min(56cqh, 32cqw); }

@media (orientation: portrait) {
  .scene { width: max(100cqw, calc(100cqh * 869 / 1086)); aspect-ratio: 869 / 1086; }
  .chapter .fg { --fx: 50cqw; --fy: 47cqh; height: auto; width: var(--fwp); }
  .ch-fondazione .fg { --fwp: min(84cqw, 48cqh); }
  .ch-scuola .fg { --fwp: min(140cqw, 78cqh); }
  .ch-convitto .fg { --fwp: min(94cqw, 54cqh); }
}

.shade, .dim, .dusk, .glow, .arch-ref, .cue, .scene .blur { display: none; }
.ch-title, .copy { padding: var(--space-2xl) var(--gutter) 0; max-width: 48rem; }
.ch-title { order: 0; padding-top: calc(var(--header-h) + var(--space-xl)); }
.copy { order: 2; padding-bottom: var(--space-3xl); }
.beat + .beat { margin-top: var(--space-2xl); }

/* ---------- Tipografia dei capitoli ---------- */
.hero-title h1 { font-size: var(--step-display); line-height: 1.02; }
.hero-title .line { display: block; }
.hero-title .line > span { display: block; }
.hero-sub { margin-top: var(--space-l); max-width: 30ch; font-size: var(--step-lead); line-height: 1.5; color: var(--text-soft); }
.ch-roman { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1; color: var(--amber); margin-bottom: var(--space-s); }
.ch-title h2 { font-size: var(--step-h2); line-height: 1.02; }
.ch-teaser { margin-top: var(--space-m); max-width: 26ch; font-size: var(--step-lead); line-height: 1.45; color: var(--text-soft); }

.copy-label { font-family: var(--font-display); font-size: 1.0625rem; color: var(--text-soft); margin-bottom: var(--space-m); }
.copy-label span { color: var(--amber); margin-right: 0.4em; }
.year { font-size: var(--step-year); line-height: 0.95; color: var(--amber); margin-bottom: var(--space-s); font-variant-numeric: lining-nums; }
.beat-title { font-size: var(--step-h3); line-height: 1.1; margin-bottom: var(--space-s); }
.beat p { max-width: 34rem; }

.timetable { margin: var(--space-xs) 0 0; }
.timetable > div {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "dt hours" "age hours" "what what";
  column-gap: var(--space-m); padding: var(--space-s) 0; border-top: 1px solid var(--line);
}
.timetable > div:last-child { border-bottom: 1px solid var(--line); }
.timetable dt { grid-area: dt; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; }
.timetable dd { margin: 0; }
.timetable .age { grid-area: age; color: var(--amber); font-weight: 800; }
.timetable .hours { grid-area: hours; align-self: center; font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timetable .what { grid-area: what; margin-top: 0.3rem; font-size: 1rem; line-height: 1.5; color: var(--text-soft); }

/* ---------- News ---------- */
.board { order: 2; padding: var(--space-2xl) var(--gutter) var(--space-3xl); }
.board-head { margin-bottom: var(--space-xl); }
.board-head h2 { font-size: var(--step-h2); line-height: 1.02; }
.notes {
  list-style: none; margin: 0; padding: var(--space-s) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 19rem)); justify-content: center;
  gap: clamp(1.25rem, 3vw, 3rem); align-items: start;
}
.note {
  --r: 0deg; position: relative; rotate: var(--r);
  background: var(--paper); color: var(--paper-ink); border-radius: 3px;
  box-shadow: 0 1px 1px oklch(0.2 0.03 40 / 0.35), 0 18px 30px -12px oklch(0.1 0.02 40 / 0.75);
  transition: rotate 0.35s var(--ease-out), translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.note:nth-child(1) { --r: -2.2deg; }
.note:nth-child(2) { --r: 1.6deg; margin-top: 1.75rem; }
.note:nth-child(3) { --r: -1deg; margin-top: 0.5rem; }
.note::before {
  content: ""; position: absolute; z-index: 1; top: -0.45rem; left: 50%; width: 1rem; height: 1rem; translate: -50% 0;
  border-radius: 50%; box-shadow: 0 2px 3px oklch(0.15 0.02 40 / 0.55);
  background: radial-gradient(circle at 35% 30%, oklch(0.93 0.06 355), oklch(0.62 0.15 15) 55%, oklch(0.42 0.12 15));
}
.note:nth-child(2)::before { background: radial-gradient(circle at 35% 30%, oklch(0.95 0.06 90), oklch(0.75 0.14 75) 55%, oklch(0.5 0.11 60)); }
.note:hover, .note:focus-within { rotate: 0deg; translate: 0 -4px; box-shadow: 0 1px 1px oklch(0.2 0.03 40 / 0.35), 0 26px 40px -14px oklch(0.1 0.02 40 / 0.85); }
.note a { display: block; padding: 0.6rem 0.6rem 1.1rem; text-decoration: none; border-radius: 3px; }
.note img, .note .sk-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; background: oklch(0.9 0.012 80); }
.note time { display: block; margin-top: 0.8rem; font-size: var(--step-small); font-weight: 800; color: var(--chestnut); }
.note-title { display: block; margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.22; text-wrap: balance; }
.note-excerpt {
  margin-top: 0.5rem; font-size: 1rem; line-height: 1.5; color: var(--paper-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.note-fallback a { padding: 1.25rem 1.25rem 1.5rem; }
.note-msg { display: block; margin-top: 0.4rem; color: var(--paper-soft); font-size: 1rem; }
.sk { display: block; border-radius: 2px; background: oklch(0.9 0.012 80); }
.sk-line { height: 0.9rem; margin-top: 0.8rem; width: 40%; }
.sk-line + .sk-line { width: 85%; height: 1.15rem; margin-top: 0.5rem; }
.board-more { margin-top: var(--space-xl); text-align: center; }

@media (orientation: portrait), (max-width: 47.99rem) {
  .notes { grid-template-columns: minmax(0, 32rem); gap: 1rem; }
  .note:nth-child(n) { margin-top: 0; }
  .note:nth-child(1) { --r: -1.2deg; }
  .note:nth-child(2) { --r: 0.8deg; }
  .note:nth-child(3) { --r: -0.6deg; }
  .note a { display: grid; grid-template-columns: 6rem 1fr; column-gap: 0.9rem; align-items: center; padding: 0.55rem; }
  .note img, .note .sk-img { grid-row: span 2; aspect-ratio: 1; }
  .note time { margin-top: 0; align-self: end; }
  .note-title { align-self: start; font-size: 1.125rem; }
  .note-excerpt { display: none; }
  .note a.no-img { grid-template-columns: 1fr; padding: 1rem; }
  .note-fallback a { display: block; padding: 1.1rem; }
  .sk-line { margin-top: 0; align-self: end; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; padding: clamp(4rem, 9vw, 8rem) var(--gutter) var(--space-xl); border-top: 1px solid oklch(0.955 0.012 80 / 0.1); }
.footer-inner {
  max-width: 80rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.visit h2 { font-size: var(--step-h2); line-height: 1.02; margin-bottom: var(--space-xl); }
.site-footer address { font-style: normal; display: grid; gap: var(--space-m); font-size: var(--step-lead); line-height: 1.55; }
.site-footer address a { color: var(--amber); text-underline-offset: 0.2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.footer-nav a { display: inline-block; padding: 0.45rem 0; font-size: 1.125rem; font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 85% / 0 1px no-repeat; transition: background-size 0.3s var(--ease-out); }
.footer-nav a:hover { background-size: 100% 1px; }
.footer-logo { width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--paper); padding: 0.35rem; }
.legal { max-width: 80rem; margin: clamp(3rem, 7vw, 6rem) auto 0; padding-top: var(--space-l); border-top: 1px solid var(--line); font-size: var(--step-small); color: var(--text-soft); }
@media (max-width: 52rem) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-logo { order: -1; width: 5.5rem; height: 5.5rem; }
}

/* =====================================================================
   Regia dello scroll (solo con html.motion)
   ===================================================================== */
.motion { scroll-behavior: smooth; }
.motion .chapter { height: calc(var(--len) * 1lvh); }
.motion .stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; display: block; }
.motion .window { position: absolute; inset: 0; height: auto; min-height: 0; background: var(--ink); }
.motion .fg, .motion .scene, .motion .ch-title, .motion .copy, .motion .notes > li { will-change: transform; }
.motion .shade, .motion .dim, .motion .dusk, .motion .glow, .motion .scene .blur { display: block; position: absolute; inset: 0; pointer-events: none; }
.motion .dim { background: var(--ink); opacity: 0; }
.motion .shade { opacity: 0; }
.motion .dusk { background: var(--dusk); mix-blend-mode: multiply; opacity: 0.72; }
.motion .glow { background: radial-gradient(55% 60% at 50% 45%, oklch(0.86 0.13 76 / 0.6), transparent 72%); mix-blend-mode: screen; opacity: 0; }
.motion .scene .blur { opacity: 0; }
.motion .scene .blur img { width: 100%; height: 100%; object-fit: cover; }

/* Arco chiuso: geometria per capitolo, letta dal JS tramite .arch-ref */
.motion .arch-ref { display: block; position: absolute; visibility: hidden; top: var(--at); right: var(--ar); bottom: var(--ab); left: var(--al); }
.motion .chapter .window { clip-path: inset(var(--at) var(--ar) var(--ab) var(--al) round calc((100vw - var(--al) - var(--ar)) / 2) calc((100vw - var(--al) - var(--ar)) / 2) 12px 12px); }
.motion .ch-news .window { clip-path: none; }
.ch-fondazione { --at: calc(var(--header-h) + 3svh); --ar: 7vw; --ab: calc(var(--vb) + 5svh); --al: 50vw; }
.ch-scuola { --at: calc(var(--header-h) + 3svh); --ar: 50vw; --ab: calc(var(--vb) + 5svh); --al: 5vw; }
.ch-convitto { --at: 42svh; --ar: 22vw; --ab: 0px; --al: 22vw; }

.motion .ch-title { position: absolute; padding: 0; max-width: none; }
.motion .ch-fondazione .ch-title { left: var(--gutter); width: min(40vw, 40rem); top: 50%; translate: 0 -50%; }
.motion .ch-scuola .ch-title { left: calc(50vw + var(--gutter)); right: calc(var(--gutter) + 3rem); top: 50%; translate: 0 -50%; }
.motion .ch-convitto .ch-title { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 4svh); text-align: center; }
.motion .ch-convitto .ch-teaser { margin-inline: auto; }

.motion .copy { position: absolute; padding: 0; max-width: none; bottom: calc(var(--vb) + 9svh); width: min(32rem, 38vw); opacity: 0; }
.motion .ch-fondazione .copy, .motion .ch-convitto .copy { left: var(--gutter); }
.motion .ch-scuola .copy { right: calc(var(--gutter) + 3.5rem); }
.motion .ch-fondazione .shade, .motion .ch-convitto .shade { background: linear-gradient(90deg, oklch(0.165 0.02 40 / 0.94), oklch(0.165 0.02 40 / 0.8) 30%, oklch(0.165 0.02 40 / 0) 56%); }
.motion .ch-scuola .shade { background: linear-gradient(270deg, oklch(0.165 0.02 40 / 0.94), oklch(0.165 0.02 40 / 0.8) 30%, oklch(0.165 0.02 40 / 0) 56%); }

.motion .beats { display: grid; }
.motion .beat { grid-area: 1 / 1; align-self: end; opacity: 0; translate: 0 0.75rem; pointer-events: none; transition: opacity 0.28s var(--ease-out), translate 0.28s var(--ease-out); }
.motion .beat + .beat { margin-top: 0; }
.motion .beat.is-active { opacity: 1; translate: 0 0; pointer-events: auto; transition-duration: 0.7s; transition-delay: 0.1s; }
.motion .beat .year { clip-path: inset(0 0 100% 0); translate: 0 35%; transition: clip-path 0.3s var(--ease-out), translate 0.3s var(--ease-out); }
.motion .beat.is-active .year { clip-path: inset(-10% -5% -15% -5%); translate: 0 0; transition: clip-path 1s var(--ease-expo) 0.08s, translate 1s var(--ease-expo) 0.08s; }

/* Ingresso della pagina */
.motion .hero-title .line { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.motion .hero-title .line > span { animation: line-up 1.1s var(--ease-expo) both; animation-delay: calc(0.25s + var(--i) * 0.1s); }
.motion .hero-sub { animation: fade-up 0.9s var(--ease-out) 0.6s both; }
.motion .cue { display: flex; align-items: center; gap: 0.85rem; margin-top: var(--space-2xl); font-size: var(--step-small); font-weight: 700; color: var(--text-soft); animation: fade-up 0.9s var(--ease-out) 0.85s both; }
.motion .cue span { display: block; width: 2.75rem; height: 1.5px; background: var(--amber); transform-origin: 0 50%; animation: cue 2.6s var(--ease-out) 1.6s infinite; }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; translate: 0 0.75rem; } }
@keyframes cue { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* News */
.motion .board { position: absolute; inset: calc(var(--header-h) + 2svh) var(--gutter) calc(var(--vb) + 4svh); padding: 0 3.5rem 0 0; display: flex; flex-direction: column; justify-content: center; }
.motion .board-head { text-align: center; }
.motion .notes > li { opacity: 0; }
.motion .board-more { opacity: 0; }
.motion .note.is-loading .sk { animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: 0.45; } }

/* Mobile / tablet verticale */
@media (orientation: portrait) {
  .ch-fondazione, .ch-scuola, .ch-convitto { --at: 42svh; --ar: 5vw; --ab: calc(var(--vb) + 3svh); --al: 5vw; }
  .ch-fondazione { --at: 50svh; }
  .motion .ch-title,
  .motion .ch-fondazione .ch-title,
  .motion .ch-scuola .ch-title,
  .motion .ch-convitto .ch-title { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--header-h) + 1.25rem); translate: none; text-align: left; }
  .motion .ch-convitto .ch-teaser { margin-inline: 0; }
  .motion .hero-title h1 { font-size: clamp(2.25rem, 1rem + 4.6svh, 3.5rem); }
  .motion .hero-sub { margin-top: var(--space-m); }
  .motion .cue { margin-top: var(--space-l); }
  .motion .copy,
  .motion .ch-scuola .copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(var(--vb) + 1.5rem); }
  .motion .shade,
  .motion .ch-scuola .shade,
  .motion .ch-fondazione .shade,
  .motion .ch-convitto .shade { background: linear-gradient(0deg, oklch(0.165 0.02 40 / 0.5), oklch(0.165 0.02 40 / 0) 55%); }
  /* il velo segue l'altezza reale del testo: i personaggi restano scoperti sopra */
  .motion .copy { isolation: isolate; }
  .motion .copy::before {
    content: ""; position: absolute; z-index: -1;
    inset: -5rem calc(-1 * var(--gutter)) calc(-1 * (var(--vb) + 1.5rem));
    background: linear-gradient(oklch(0.165 0.02 40 / 0), oklch(0.165 0.02 40 / 0.9) 5rem, oklch(0.165 0.02 40 / 0.97));
  }
  .motion .cue { display: none; }
  .motion .board { padding: 0; inset: calc(var(--header-h) + 1.5rem) var(--gutter) calc(var(--vb) + 1.5rem); }
  .motion .board-head { text-align: left; margin-bottom: var(--space-l); }
  .motion .board-more { text-align: left; margin-top: var(--space-l); }
  .year { font-size: clamp(3rem, 1.5rem + 5svh, 4.5rem); }
  .beat p { font-size: 1.0625rem; line-height: 1.6; }
}
@media (orientation: portrait) and (max-height: 700px) {
  .motion .ch-teaser { display: none; }
}
@media (orientation: landscape) and (max-height: 540px) {
  /* telefoni in orizzontale: meno testo in scena */
  .motion .hero-sub, .motion .cue, .motion .ch-teaser { display: none; }
  .motion .copy { bottom: calc(var(--vb) + 1rem); }
  .motion .copy-label, .timetable .what, .note-excerpt { display: none; }
  .year { font-size: 2.75rem; }
  .beat-title { font-size: 1.45rem; }
  .timetable dt { font-size: 1.1rem; }
  .timetable > div { padding: 0.4rem 0; }
  .beat p { font-size: 1rem; line-height: 1.5; }
  .actions { margin-top: var(--space-m); }
  .motion .ch-title h2, .board-head h2 { font-size: 2rem; }
  .motion .board { inset: calc(var(--header-h) + 0.5rem) var(--gutter) 0.75rem; }
  .board-head { margin-bottom: var(--space-m); }
  .ch-roman { font-size: 1.5rem; margin-bottom: 0.25rem; }
  .notes { grid-template-columns: repeat(3, minmax(0, 15rem)); }
  .note:nth-child(n) { margin-top: 0; }
  .note a { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 0.7rem; align-items: center; padding: 0.5rem; }
  .note img, .note .sk-img { grid-row: span 2; aspect-ratio: 1; }
  .note time { margin-top: 0; align-self: end; font-size: 0.875rem; }
  .note-title { align-self: start; font-size: 1rem; }
  .board-more { margin-top: var(--space-m); }
}