/* Il sito nuovo (24 ott 2026), direzione D «Orizzonte» scelta da Seba sulle prove.
   Scuro, un colore solo (il viola dei video), riprese vere al posto delle foto, movimento con GSAP.
   Le prove da cui nasce stanno in prove/; le decisioni in seba-os/core/decisions.md (24 ott). */

:root {
  --bg: #0B0A0D;
  --bg-2: #131116;
  --ink: #F2EFEA;
  --ink-2: #A9A4A0;
  --ink-3: #6D6870;
  --line: rgba(242, 239, 234, .12);
  --viola: #9A4FA8;          /* il viola dei social e dei video */
  --viola-hi: #A85CB7;       /* il bottone al passaggio del mouse */
  --viola-ink: #C79BD8;      /* lo stesso viola schiarito, per il testo sul nero */
  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --body: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --years: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut: max(24px, env(safe-area-inset-left, 0px));
  --gut-r: max(24px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--viola-ink); outline-offset: 3px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 6px; background: var(--ink); color: var(--bg); font-weight: 600; }
.skip-link:focus { top: 12px; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.mono { font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* grana di pellicola, ferma: tiene insieme le riprese e il testo */
body::after { content: ""; position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- bottoni ---------- */
.btn { display: inline-flex; align-items: center; gap: .65em; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--viola); color: #fff;
  font: 600 15.5px/1 var(--body); letter-spacing: -.005em; white-space: nowrap; transition: transform .25s var(--ease), background .25s; }
.btn:hover { background: var(--viola-hi); }
.btn:active { transform: scale(.97); }
.btn svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.under { font: 500 15px/1 var(--body); color: var(--ink); padding-bottom: 6px; background: linear-gradient(var(--viola-ink), var(--viola-ink)) 0 100% / 100% 1px no-repeat; transition: background-size .35s var(--ease); }
.under:hover { background-size: 40% 1px; }

/* ---------- barra in alto, uguale su ogni pagina ---------- */
.site-bar { position: absolute; inset: 0 0 auto; z-index: 30; padding-top: env(safe-area-inset-top, 0px); }
.site-bar .wrap { display: flex; align-items: center; gap: 28px; height: 84px; max-width: none; }
.logo { font: 700 18px/1 var(--display); letter-spacing: -.02em; }
.logo span { color: var(--ink-3); font-weight: 400; }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { background: linear-gradient(var(--viola-ink), var(--viola-ink)) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; }
.menu-btn { display: none; margin-left: auto; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(242,239,234,.3); background: rgba(11,10,13,.35); cursor: pointer; font: 500 14px/1 var(--body); }

/* ---------- home: il motto accanto alla terrazza ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) min(40vw, calc(100svh * .5625)); }
.hero-text { display: flex; flex-direction: column; padding: 84px clamp(24px, 5vw, 72px) 0 var(--gut); padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
.hero-body { margin: auto 0; padding: 32px 0 72px; }
.hero-body .mono { margin: 0 0 26px; }
.hero h1 { font: 300 clamp(58px, 8.4vw, 136px)/.92 var(--display); letter-spacing: -.045em; margin: 0; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .l > span { display: block; }
.hero h1 b { font-weight: 700; color: var(--viola-ink); }
.hero-sub { max-width: 40ch; color: var(--ink-2); font-size: clamp(17px, 1.35vw, 19px); margin: 34px 0 36px; }
.hero-sub strong { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.panel { position: relative; overflow: hidden; background: #000; }
.panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(11,10,13,0) 18%), linear-gradient(0deg, rgba(11,10,13,.55) 0%, rgba(11,10,13,0) 30%), linear-gradient(180deg, rgba(11,10,13,.55) 0%, rgba(11,10,13,0) 16%); }
.panel .cap { position: absolute; left: 28px; bottom: 26px; z-index: 1; color: rgba(242,239,234,.7); margin: 0; }
.scroll-cue { position: absolute; left: var(--gut); bottom: 26px; display: flex; align-items: center; gap: 12px; margin: 0; }
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--ink-3), transparent); }

/* ---------- sezioni ---------- */
.sec { padding: clamp(96px, 12vw, 168px) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.sec-head p { color: var(--ink-2); margin: 0; }
.h2 { font: 300 clamp(44px, 5.6vw, 88px)/.95 var(--display); letter-spacing: -.04em; margin: 18px 0 0; text-wrap: balance; }
.h2 b { font-weight: 700; }
.h2 em { font-style: normal; font-weight: 700; color: var(--viola-ink); }

/* ---------- le porte: si accende quella su cui sei, e il video cambia con lei ---------- */
.doors { display: grid; grid-template-columns: minmax(0, 1fr) min(34vw, 420px); gap: clamp(40px, 6vw, 110px); align-items: start; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; border-top: 1px solid var(--line); transition: opacity .6s var(--ease); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--viola-ink); transition: width .9s var(--ease); }
.js .row { opacity: .26; }
.js .row.on { opacity: 1; }
.row.on::before { width: 100%; }
.row a { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 30px 0 34px; }
.row .n { font: 500 13px/1 var(--mono); color: var(--ink-3); letter-spacing: .1em; }
.row.on .n { color: var(--viola-ink); }
.row h3 { font: 600 clamp(30px, 3.1vw, 46px)/1 var(--display); letter-spacing: -.035em; margin: 0 0 12px; }
.row p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.row .fine { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.row .when { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.row .vid { display: none; }
.screen { position: sticky; top: 9vh; aspect-ratio: 9 / 16; max-height: 82vh; border-radius: 4px; overflow: hidden; background: #000; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.6s var(--ease); }
.screen video.on { opacity: 1; transform: none; }
.screen .label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: flex; justify-content: space-between; color: rgba(242,239,234,.75); margin: 0; }

/* ---------- chi scrive (home) ---------- */
.who { background: var(--bg-2); }
.who .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
.who blockquote { margin: 0; font: 300 clamp(34px, 3.9vw, 60px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.who blockquote b { font-weight: 700; color: var(--viola-ink); }
.who .story p { color: var(--ink-2); margin: 0 0 1em; }
.who .story p:first-child { color: var(--ink); }

/* ---------- la call ---------- */
.call .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.call .h2 { font-size: clamp(52px, 7vw, 116px); }
.call .lead { color: var(--ink-2); max-width: 42ch; margin: 28px 0 36px; }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.agenda li:last-child { border-bottom: 1px solid var(--line); }
.agenda .mono { color: var(--viola-ink); padding-top: 5px; }
.agenda b { font: 600 20px/1.2 var(--display); letter-spacing: -.02em; display: block; margin-bottom: 4px; }
.agenda span { color: var(--ink-2); font-size: 15px; }
.nots { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; color: var(--ink-3); font-size: 14px; }

/* ---------- la storia: l'apertura che si accende parola per parola ---------- */
.open { min-height: 100svh; display: grid; align-items: center; padding: 140px 0 90px; }
.open .wrap { width: 100%; max-width: 1180px; }
.open .mono { margin: 0 0 30px; }
.said { font: 400 clamp(38px, 4.8vw, 74px)/1.07 var(--display); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.said .w { opacity: .18; transition: opacity .3s; }
.said .w.lit { opacity: 1; }
.said em { font-style: normal; font-weight: 700; color: var(--viola-ink); }
.open .cue { margin: 48px 0 0; display: flex; align-items: center; gap: 12px; }
.open .cue i { width: 40px; height: 1px; background: var(--viola-ink); }

/* ---------- la storia: i capitoli. Senza movimento sono blocchi in fila; col movimento un palco fermo
   mentre scorri: l'anno, la ripresa e il testo cambiano insieme, e la strada viola avanza ---------- */
.chapters { position: relative; }
.chap { display: grid; grid-template-columns: minmax(0, 1fr) min(30vw, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  max-width: 1320px; margin: 0 auto; padding: 72px var(--gut-r) 72px var(--gut); }
.chap .year { font: 900 clamp(120px, 16vw, 260px)/.8 var(--years); color: transparent; -webkit-text-stroke: 2px var(--viola-ink); text-align: right; }
.chap .year small { display: block; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--viola-ink); -webkit-text-stroke: 0; margin-top: 18px; }
.chap .film { position: relative; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; background: #000; }
.chap .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chap .txt .mono { color: var(--viola-ink); margin: 0 0 16px; }
.chap h2 { font: 600 clamp(36px, 3.6vw, 58px)/.98 var(--display); letter-spacing: -.035em; margin: 0 0 18px; }
.chap p { margin: 0 0 .8em; color: var(--ink-2); max-width: 38ch; }
.road { display: none; }
.pin .chapters { height: 560vh; }
.pin .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pin .chap { position: absolute; inset: 0; padding-top: 84px; padding-bottom: 120px; max-width: none; width: 100%;
  grid-template-columns: minmax(0, 1fr) min(26vw, calc((100svh - 220px) * .5625)) minmax(0, 1fr); }
.pin .chap .film { height: calc(100svh - 220px); width: auto; }
.pin .chap:not(:first-child) .year, .pin .chap:not(:first-child) .txt > *, .pin .chap:not(:first-child) .film { opacity: 0; }
.pin .road { display: block; position: absolute; left: var(--gut); right: var(--gut-r); bottom: 34px; z-index: 2; }
.road svg { width: 100%; height: 40px; overflow: visible; display: block; }
.road .base { stroke: var(--line); stroke-width: 2; }
.road .future { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 2 7; }
.road .done { stroke: var(--viola-ink); stroke-width: 2; }
.road .stops { display: flex; justify-content: space-between; margin-top: 8px; }
.road .stops span { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); width: 0; white-space: nowrap; display: flex; justify-content: center; }
.road .stops span.now { color: var(--ink); }
.road .stops span:first-child { justify-content: flex-start; }
.road .stops span:last-child { justify-content: flex-end; color: var(--viola-ink); }
.road .stops em { font-style: normal; }

/* ---------- la storia: il parkour, i quattro vincoli, per chi è ---------- */
.parkour .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.parkour .film { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #000; }
.parkour .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.parkour .txt p { color: var(--ink-2); max-width: 52ch; margin: 0 0 1em; }
.parkour .txt p.big { font: 300 clamp(24px, 2.2vw, 32px)/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); }
.rules { background: var(--bg-2); }
.rules ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rules li { padding: 34px 34px 34px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
.rules li:nth-child(odd) { border-right: 1px solid var(--line); }
.rules li:nth-child(even) { padding-left: 34px; }
.rules .mono { color: var(--viola-ink); padding-top: 8px; }
.rules h3 { font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--display); letter-spacing: -.025em; margin: 0 0 10px; }
.rules p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.fit .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.fit h3 { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--viola-ink); margin: 0 0 18px; }
.fit .cols > div:last-child h3 { color: var(--ink-3); }
.fit ul { list-style: none; margin: 0; padding: 0; }
.fit li { font: 300 clamp(20px, 1.8vw, 26px)/1.3 var(--display); letter-spacing: -.015em; padding: 18px 0; border-top: 1px solid var(--line); }
.fit li b { font-weight: 600; }
.fit .cols > div:last-child li { color: var(--ink-2); }

/* ---------- piè di pagina ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 56px 0 calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--ink-3); font-size: 14px; }
.site-foot .motto { font: 300 clamp(28px, 3vw, 44px)/1.05 var(--display); letter-spacing: -.035em; color: var(--ink); margin: 0 0 40px; }
.site-foot .motto b { font-weight: 700; color: var(--viola-ink); }
.site-foot .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 40px; }
.site-foot h2 { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.site-foot a:hover { color: var(--ink); }
.site-foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; border-top: 1px solid var(--line); padding-top: 24px; }

/* ---------- telefono ---------- */
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .site-bar .btn--sm { display: none; }
  .nav { display: none; }
  .menu-open .nav { display: flex; position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; gap: 6px;
    margin: 0; padding: 0 var(--gut-r) 0 var(--gut); background: var(--bg); font: 300 44px/1.15 var(--display); letter-spacing: -.035em; color: var(--ink); }
  .menu-open .menu-btn { position: relative; z-index: 41; }
  .menu-open .nav a[aria-current="page"] { color: var(--viola-ink); background: none; }
  .hero { grid-template-columns: 1fr; }
  .panel { position: absolute; inset: 0; z-index: 0; }
  .panel::after { background: linear-gradient(0deg, var(--bg) 6%, rgba(11,10,13,.82) 42%, rgba(11,10,13,.15) 72%, rgba(11,10,13,.45) 100%); }
  .panel .cap { display: none; }
  .hero-text { position: relative; z-index: 1; min-height: 100svh; padding-right: var(--gut-r); }
  .hero-body { margin: auto 0 0; padding-bottom: 56px; }
  .hero-sub { color: rgba(242,239,234,.82); }
  .scroll-cue { display: none; }
  .sec-head { grid-template-columns: 1fr; gap: 18px; }
  .doors { grid-template-columns: 1fr; }
  .screen { display: none; }
  .row a { grid-template-columns: 44px minmax(0, 1fr); }
  .row .when { grid-column: 2; }
  .row .vid { display: block; grid-column: 2; margin-top: 18px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #000; }
  .row .vid video { width: 100%; height: 100%; object-fit: cover; }
  .js .row { opacity: .42; }
  .who .wrap, .call .wrap, .parkour .wrap { grid-template-columns: 1fr; }
  .chap { grid-template-columns: 1fr; gap: 18px; padding: 48px var(--gut-r) 48px var(--gut); }
  .chap .year { text-align: left; font-size: 34vw; }
  .chap .film { aspect-ratio: 4 / 5; }
  .pin .chap { grid-template-columns: 1fr; align-content: end; padding: 0 var(--gut-r) 112px var(--gut); isolation: isolate; }
  .pin .chap .film { position: absolute; inset: 0; height: auto; aspect-ratio: auto; border-radius: 0; z-index: -1; }
  .pin .chap .film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 8%, rgba(11,10,13,.78) 48%, rgba(11,10,13,.2) 80%); }
  .pin .chap .year { font-size: 36vw; margin-bottom: -4px; }
  .pin .chap .year small { display: none; }
  .road .stops span:not(.now):not(:first-child):not(:last-child) { visibility: hidden; }
  .road .stops em { display: none; }
  .rules ol, .fit .cols { grid-template-columns: 1fr; }
  .rules li, .rules li:nth-child(even) { padding: 28px 0; border-right: 0; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .said .w { opacity: 1; }
}

/* =====================================================================
   Le altre pagine (24 ott sera): scaffale, call, evento, 404, scritti.
   Stesso schema della home: in apertura il testo e una ripresa verticale.
   ===================================================================== */
.hero--page { min-height: 82svh; grid-template-columns: minmax(0, 1fr) min(34vw, calc(82svh * .5625)); }
.hero--page h1 { font-size: clamp(50px, 6.6vw, 112px); }
.hero--page .fine { font-size: 13px; color: var(--ink-3); max-width: 52ch; margin: 22px 0 0; }
.hero--404 { min-height: 100svh; }

/* ---------- lo scaffale: i webinar ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { display: grid; gap: 14px; align-content: start; }
.card .media { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: #000; }
.card .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.06) brightness(.82); transition: transform 1.1s var(--ease), filter .6s; }
.card:hover .media img { transform: scale(1.04); filter: saturate(.95) contrast(1.06) brightness(.9); }
.card .play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(0deg, rgba(11,10,13,.55), rgba(11,10,13,0) 60%); cursor: pointer; }
.card .play span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--viola); color: #fff; transition: transform .3s var(--ease), background .3s; }
.card .play svg { width: 20px; height: 20px; margin-left: 3px; }
.card:hover .play span { transform: scale(1.08); background: var(--viola-hi); }
.card .mono { color: var(--viola-ink); margin: 4px 0 0; }
.card h3 { font: 600 clamp(24px, 2.2vw, 32px)/1.05 var(--display); letter-spacing: -.03em; margin: 0; }
.card p { margin: 0; color: var(--ink-2); }

/* ---------- la finestra del video (YouTube senza cookie, solo al clic) ---------- */
.lightbox { width: min(1100px, 100vw - 32px); padding: 0; border: 0; border-radius: 6px; background: #000; color: var(--ink); overflow: hidden; }
.lightbox::backdrop { background: rgba(5, 4, 7, .86); }
.lightbox .bar { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: var(--bg-2); }
.lightbox .bar p { margin: 0; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox .bar button { margin-left: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.lightbox .stage { aspect-ratio: 16 / 9; }
.lightbox iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- passi numerati (scaffale, evento) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.steps li { padding: 32px 32px 8px 0; display: grid; gap: 12px; align-content: start; }
.steps li + li { padding-left: 32px; border-left: 1px solid var(--line); }
.steps .mono { color: var(--viola-ink); margin: 0; }
.steps h3 { font: 600 clamp(24px, 2.2vw, 32px)/1.08 var(--display); letter-spacing: -.03em; margin: 0; }
.steps p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.lead-block { color: var(--ink-2); max-width: 60ch; margin: 0 0 clamp(36px, 5vw, 56px); font-size: clamp(17px, 1.35vw, 19px); }

/* ---------- domande scomode, a fisarmonica ---------- */
.faq { border-top: 1px solid var(--line); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 20px; align-items: center; padding: 26px 0;
  font: 500 clamp(21px, 1.9vw, 27px)/1.2 var(--display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; justify-self: end; border-right: 1.5px solid var(--viola-ink); border-bottom: 1.5px solid var(--viola-ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { margin: 0 0 28px; color: var(--ink-2); max-width: 66ch; }

/* ---------- la call: i contatti e le regole ---------- */
.contacts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.contacts li { padding: 32px 32px 8px 0; display: grid; gap: 12px; align-content: start; }
.contacts li + li { padding-left: 32px; border-left: 1px solid var(--line); }
.contacts .mono { color: var(--viola-ink); margin: 0; }
.contacts h3 { font: 600 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -.025em; margin: 0; }
.contacts p { margin: 0; color: var(--ink-2); }
.contacts a.under { justify-self: start; margin-top: 6px; }
.where { margin: 36px 0 0; color: var(--ink-3); max-width: 60ch; }
.promises { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.promises li { font: 300 clamp(22px, 2.2vw, 32px)/1.25 var(--display); letter-spacing: -.02em; padding: 22px 0; border-bottom: 1px solid var(--line); }
.promises li b { font-weight: 600; color: var(--viola-ink); }

/* ---------- evento: i fatti, i due giorni, la dicitura ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { padding: 26px 26px 26px 0; }
.facts div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.facts dt { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.facts dd { margin: 0; font: 600 clamp(22px, 2vw, 30px)/1.1 var(--display); letter-spacing: -.025em; }
.facts dd small { display: block; font: 400 15px/1.4 var(--body); letter-spacing: 0; color: var(--ink-2); margin-top: 6px; }
.big-p { font: 300 clamp(24px, 2.4vw, 34px)/1.3 var(--display); letter-spacing: -.02em; max-width: 34ch; margin: 0; }
.days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.days div { padding: 30px 30px 8px 0; }
.days div + div { padding-left: 30px; border-left: 1px solid var(--line); }
.days .when { font: 900 clamp(64px, 7vw, 110px)/.85 var(--years); color: transparent; -webkit-text-stroke: 1.5px var(--viola-ink); margin: 0 0 18px; }
.days h3 { font: 600 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -.025em; margin: 0 0 10px; }
.days p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.disclose { font-size: 13.5px; color: var(--ink-3); max-width: 64ch; margin: 22px 0 0; }

@media (max-width: 960px) {
  .hero--page { min-height: 86svh; grid-template-columns: 1fr; }
  .hero--page h1 { font-size: clamp(42px, 11.5vw, 64px); }
  .hero--page .hero-text { min-height: 86svh; }
  .cards, .steps, .contacts, .facts, .days { grid-template-columns: 1fr; }
  .steps li, .steps li + li, .contacts li, .contacts li + li, .facts div, .facts div + div, .days div, .days div + div { padding: 24px 0; border-left: 0; }
  .steps li + li, .contacts li + li, .facts div + div, .days div + div { border-top: 1px solid var(--line); }
  .row .vid img { width: 100%; height: 100%; object-fit: cover; }
}

/* le porte con le foto al posto delle clip (gli scritti nello scaffale) */
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  filter: saturate(.8) contrast(1.06) brightness(.82); transition: opacity .8s var(--ease), transform 1.6s var(--ease); }
.screen img.on { opacity: 1; transform: none; }
.row .vid img { filter: saturate(.8) contrast(1.06) brightness(.82); }

/* ---------- lo scaffale (26 ott 2026): le porte raggruppate per domanda ----------
   Sul computer restano le porte che si accendono. Sul telefono, una porta con la foto intera per foglio faceva 8,8
   schermate (Seba: «rendere lo scaffale del telefono decente, che non sia lungo da scorrere, facile da utilizzare»).
   Fra tre prove ha scelto la B: i bottoni delle domande in alto, un gruppo alla volta, una riga per foglio (1,5 schermate).
   I bottoni li crea site.js dai gruppi; senza JavaScript si vedono tutti i gruppi in fila. */
.rows-g + .rows-g { margin-top: 44px; }
.rows-g > .mono { margin: 0 0 8px; color: var(--ink-3); }
.rows-g > .q { margin: 0 0 14px; font: 500 clamp(19px, 1.6vw, 23px)/1.3 var(--display); letter-spacing: -.01em; color: var(--viola-ink); max-width: 34ch; }
.rows-in { list-style: none; margin: 0; padding: 0; }
.shelf-tabs { display: none; }

@media (max-width: 960px) {
  .js .doors[data-mobile] .row { opacity: 1; }
  .doors[data-mobile] .row .n { display: none; }
  .doors[data-mobile="b"] .shelf-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gut-r)) 22px calc(-1 * var(--gut)); padding: 0 var(--gut-r) 4px var(--gut); scrollbar-width: none; }
  .doors[data-mobile="b"] .shelf-tabs::-webkit-scrollbar { display: none; }
  .shelf-tabs button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-2); font: 500 14px/1 var(--body); cursor: pointer; }
  .shelf-tabs button[aria-selected="true"] { background: var(--viola); border-color: var(--viola); color: #fff; }
  .js .doors[data-mobile="b"] .rows-g:not(.is-open) { display: none; }
  .js .doors[data-mobile="b"] .rows-g + .rows-g { margin-top: 0; }
  .doors[data-mobile="b"] .rows-g > .q { font-size: 18px; margin-bottom: 4px; }
  /* una riga per foglio: la foto a sinistra, titolo e tre righe di testo a destra */
  .doors[data-mobile="b"] .row a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 0; align-items: center; }
  .doors[data-mobile="b"] .row a > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .doors[data-mobile="b"] .row .vid { grid-column: 1; grid-row: 1 / span 2; width: 84px; aspect-ratio: 4 / 5; margin: 0; border-radius: 10px; }
  .doors[data-mobile="b"] .row h3 { grid-column: 2; font-size: 20px; letter-spacing: -.02em; margin: 0 0 4px; }
  .doors[data-mobile="b"] .row p { grid-column: 2; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .doors[data-mobile="b"] .row .when { grid-column: 2; font-size: 10.5px; }
}

/* ---------- la pagina del link (inizia.html, 26 ott 2026) ----------
   Ci arriva solo chi clicca il link in bio, in DM o sotto un video: niente menu, tre passi in fila
   (guarda, compila, scegli). L'esercizio usa le regole dei fogli (writings.css), il resto è il sito. */
.site-bar--solo .btn--sm { margin-left: auto; }
.card--film { max-width: 1080px; }
.card--film .media { aspect-ratio: 16 / 9; max-width: 100%; }
/* il titolo «L'esercizio · 10 minuti, il telefono e una penna» del foglio qui ripete quello della sezione, e la penna non c'è */
.sec--compila .sc-work:not(.sc-work ~ .sc-work) > .sc-work-h { display: none; }
/* la dicitura (policy Fred §3): accanto al webinar, a parole semplici, mai in fondo alla pagina */
.sec .dicitura { margin: 20px 0 0; max-width: 70ch; padding-left: 14px; border-left: 2px solid var(--viola-ink); color: var(--ink-2); font-size: 15px; }
.card--film .media img { object-position: 50% 62%; }
.card--film .play span { width: 84px; height: 84px; }
.card--film .play svg { width: 26px; height: 26px; }
.card--film + .steps { margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 961px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps--4 li { padding-right: 24px; } .steps--4 li + li { padding-left: 24px; } }
.sec .aside { margin: 28px 0 0; color: var(--ink-3); font-size: 15px; }
.sec .regalo { margin: 0 0 18px; max-width: 62ch; color: var(--ink-2); font-size: 17px; }
.sec .regalo b { color: var(--ink); font-weight: 600; }
.sec .aside a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--viola-ink); }
.sec--compila { background: var(--bg-2); }
.sec--compila .sc-body { margin: 0; }
.porte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.porta { display: grid; gap: 16px; align-content: start; justify-items: start; padding: clamp(28px, 3.4vw, 48px); border: 1px solid var(--line); border-radius: 4px; }
.porta .mono { color: var(--viola-ink); margin: 0; }
.porta h3 { font: 600 clamp(30px, 3vw, 44px)/1.02 var(--display); letter-spacing: -.035em; margin: 0; }
.porta p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.porta .btn { margin-top: 8px; }
.porta .fine { font-size: 13px; color: var(--ink-3); }
@media (max-width: 960px) {
  .porte { grid-template-columns: 1fr; }
  .steps--4 li { padding: 18px 0; }
  .steps--4 h3 { font-size: 22px; }
}
.sc-prezzi { border: 1px solid var(--line); border-radius: 4px; padding: 0 18px; }
.sc-prezzi > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; cursor: pointer; list-style: none; font: 600 16px/1.3 var(--body); color: var(--ink); }
.sc-prezzi > summary::-webkit-details-marker { display: none; }
.sc-prezzi > summary::after { content: "+"; color: var(--viola-ink); font: 400 24px/1 var(--body); }
.sc-prezzi[open] > summary::after { content: "–"; }
.sc-prezzi[open] { padding-bottom: 18px; }
/* i passi chiusi (inizia.js): resta il titolo, al posto del contenuto un cartello con quanto manca */
.sec.is-chiuso .wrap > :not(.sec-head):not(.lock) { display: none; }
.lock { display: none; }
.sec.is-chiuso .lock { display: grid; gap: 14px; justify-items: start; max-width: 560px; padding: clamp(24px, 3vw, 36px); border: 1px dashed var(--line); border-radius: 4px; }
.lock-t { margin: 0; font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -.02em; }
.lock-d { margin: 0; color: var(--ink-2); }
.lock-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.lock-bar span { display: block; height: 100%; width: 0; background: var(--viola); transition: width .4s var(--ease); }
.card--film .media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }