/* ═══════════════════════════════════════════════════════════════════════════
   SELA · IL SITO — il foglio comune alle due bozze (presentazione e attesa)
   designer, 25/09/2026

   ⛔ Nessun colore letterale fuori da :root. I valori vengono dalla skill
      `identita-sela` (D-123: un accento solo, la terracotta) e dal marchio di
      D-174 (cielo, sole, montagna, notte). Il marchio NON ha tema: i suoi
      quattro colori valgono uguali nel chiaro e nello scuro.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Ezra SIL';
  src: url('font/EzraSIL.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F, U+200E-200F, U+2066-2069;
}

/* ── i temi dell'app: Carta (chiaro) e Notte (scuro) ─────────────────────── */
:root {
  color-scheme: light;
  --carta: #FAF8F4; --carta-2: #FFFFFF; --carta-3: #E4E1DB;
  --ink: #1F1B16; --ink-2: #514A40; --ink-3: #6D665A;
  --filo: #E4DFD5; --filo-forte: #CBC4B5;
  --accento: #A54920;          /* inchiostro dell'app: testo, ≥ 4,5:1 */
  --marca: #B24E22;            /* segno dell'app: filetti, tacche, mai testo */
  --accento-tenue: #F2DFD8;
  --evidenzia: #F7E6B8;
  --tuo: #895A14; --tuo-tenue: #EEE4D2;
  --ombra: rgba(31,27,22,.16);

  /* il marchio (D-174): una superficie di marca non ha tema */
  --cielo: #E06D3C; --sole: #FAC5AA; --monte: #C0420E; --notte-marchio: #120101;
  --campo: #B24E22; --campo-premuto: #9E451D; --crema: #FFF6EE;
  --segnaposto: #7A4B37;       /* su crema, 6,81:1 */

  /* l'ombra sotto un comando di marca: di giorno è della sua terra, di notte è nera
     (un alone arancione su fondo scuro si legge come neon, non come ombra) */
  --ombra-campo: color-mix(in srgb, var(--campo) 72%, transparent);
  --ombra-campo-2: color-mix(in srgb, var(--campo) 40%, transparent);
  /* la luce dall'alto sulle superfici rialzate: nel chiaro non serve, nel buio sì */
  --luce-bordo: transparent;

  --f-scrittura: 'Literata', Georgia, 'Times New Roman', serif;
  --f-ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ebraico: 'Ezra SIL', 'SBL Hebrew', 'Times New Roman', serif;

  --r1: 6px; --r2: 12px; --r3: 20px;
  --margine: clamp(16px, 4vw, 56px);
  --colonna: 1240px;
  --esce: cubic-bezier(.16, 1, .3, 1);   /* ease-out esponenziale: tutto ciò che arriva */
  --va: cubic-bezier(.5, 0, .75, 0);     /* ease-in: ciò che se ne va, più svelto */
  --breve: 180ms;                         /* i ritorni al tocco e al passaggio */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --carta: #141210; --carta-2: #201D19; --carta-3: #302C26;
    --ink: #EFE9DE; --ink-2: #B5AC9D; --ink-3: #9E9484;
    --filo: #2C2822; --filo-forte: #443D33;
    --accento: #E8875A; --marca: #E8875A; --accento-tenue: #2F221C;
    --evidenzia: #4B4025; --tuo: #D9A94E; --tuo-tenue: #382E1F;
    --ombra: rgba(0,0,0,.55);
    --ombra-campo: rgba(0,0,0,.62); --ombra-campo-2: rgba(0,0,0,.4);
    --luce-bordo: rgba(239,233,222,.06);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --carta: #141210; --carta-2: #201D19; --carta-3: #302C26;
  --ink: #EFE9DE; --ink-2: #B5AC9D; --ink-3: #9E9484;
  --filo: #2C2822; --filo-forte: #443D33;
  --accento: #E8875A; --marca: #E8875A; --accento-tenue: #2F221C;
  --evidenzia: #4B4025; --tuo: #D9A94E; --tuo-tenue: #382E1F;
  --ombra: rgba(0,0,0,.55);
  --ombra-campo: rgba(0,0,0,.62); --ombra-campo-2: rgba(0,0,0,.4);
  --luce-bordo: rgba(239,233,222,.06);
}

/* ── base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; overflow-x: clip; }
body {
  margin: 0; background: var(--carta); color: var(--ink);
  font-family: var(--f-scrittura); font-size: 1.0625rem; line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--accento-tenue); color: var(--ink); }
a, button, input, label, [role="tab"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* sul telefono le righe strette si dividono in sillabe, in italiano: il margine destro respira */
@media (max-width: 600px) {
  main p, main dd, main li > p, .piede p { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 3; }
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accento); text-underline-offset: .18em; text-decoration-thickness: 1px; transition: text-decoration-color var(--breve); }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
/* l'anello del fuoco: uno solo in tutto il sito. La stondatura di ripiego sta in :where(),
   cioè a specificità zero: non cambia più la forma di un comando che ne ha una sua */
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
:where(:focus-visible) { border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
dd, figcaption, li, blockquote { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--carta-2); color: var(--ink); padding: 0 16px; border-radius: var(--r1);
  box-shadow: 0 8px 24px -10px var(--ombra);
  font: 600 .95rem/1 var(--f-ui);
}
.salta:focus { top: 12px; }

/* le lingue originali: una lingua sola per paragrafo, ognuna con la sua direzione */
.greco { font-family: var(--f-scrittura); font-feature-settings: 'kern'; }
.ebraico { font-family: var(--f-ebraico); direction: rtl; unicode-bidi: isolate; font-weight: 400; }

/* ── la testata del sito ─────────────────────────────────────────────────── */
.testata-sito {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 12px var(--margine);
  border-bottom: 1px solid transparent;
  transition: background 320ms ease, border-color 320ms ease, translate 420ms var(--esce);
}
.testata-sito.posata {
  background: color-mix(in srgb, var(--carta) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--filo);
}
.firma-sito { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); }
.firma-sito .tessera-mini { width: 30px; height: 30px; flex: none; }
.firma-sito .logo { height: 19px; width: auto; color: var(--ink); }
.voci-sito { display: flex; gap: 4px; margin-left: auto; }
.voci-sito a {
  position: relative;
  font: 500 .95rem/1 var(--f-ui); color: var(--ink-2); text-decoration: none;
  padding: 10px 12px; border-radius: 999px; transition: color var(--breve), background var(--breve);
}
/* l'area che si preme è alta 45 px; la pillola che si vede resta di 35 */
.voci-sito a::after, .interruttore button::after { content: ''; position: absolute; inset: -5px 0; }
/* dove sei: la voce della sezione che stai leggendo ha il suo tratto sotto (index.html) */
.voci-sito a[aria-current] { color: var(--ink); }
.voci-sito a::before {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1.5px; border-radius: 1px;
  background: var(--marca); transform: scaleX(0); transition: transform 420ms var(--esce);
}
.voci-sito a[aria-current]::before { transform: scaleX(1); }
@media (hover: hover) { .voci-sito a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } }
@media (max-width: 860px) { .voci-sito { display: none; } .testata-sito .interruttore { margin-left: auto; } }

/* l'interruttore del tema: tre stati, come il telefono (automatico, carta, notte) */
.interruttore {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--filo-forte); background: var(--carta-2);
}
.interruttore button {
  position: relative;
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  min-width: 34px; height: 30px; padding: 0 9px; color: var(--ink-3);
  font: 600 .72rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  transition: background 220ms var(--esce), color 220ms, box-shadow 220ms;
}
.interruttore button::after { inset: -7px 0; }
.interruttore button[aria-pressed="true"] { background: var(--ink); color: var(--carta); box-shadow: 0 2px 6px -2px var(--ombra); }
@media (hover: hover) { .interruttore button[aria-pressed="false"]:hover { color: var(--ink); } }
.interruttore button:active { scale: .96; }

/* ── i comandi ───────────────────────────────────────────────────────────── */
.campo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--campo); color: var(--crema);
  font: 600 1rem/1 var(--f-ui); letter-spacing: .01em; text-decoration: none;
  /* un filo di luce sul bordo alto: il comando è rialzato, non stampato */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--crema) 18%, transparent), 0 10px 24px -12px var(--ombra-campo);
  transition: background var(--breve), transform 260ms var(--esce), box-shadow 260ms var(--esce);
}
@media (hover: hover) { .campo:hover { text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--crema) 18%, transparent), 0 14px 28px -12px var(--ombra-campo); } }
.campo:active { background: var(--campo-premuto); transform: translateY(0) scale(.985); transition-duration: 90ms; }
.tratto {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--filo-forte); background: transparent; color: var(--ink);
  font: 600 1rem/1 var(--f-ui); text-decoration: none;
  transition: border-color 200ms, background 200ms;
}
@media (hover: hover) { .tratto:hover { border-color: var(--marca); text-decoration: none; } }
.tratto svg, .campo svg { width: 18px; height: 18px; flex: none; }

/* ── la tessera del marchio: la finestra sul paesaggio ───────────────────── */
.tessera { position: relative; aspect-ratio: 1; }
.tessera svg { width: 100%; height: 100%; overflow: visible; }
.tessera .p-sole, .tessera .p-croce, .tessera .p-monti { transform-box: fill-box; }
.tessera .p-croce { transform-origin: 50% 100%; }

/* ── i cinque registri: la FORMA porta la distinzione, mai il colore ────────
   1 dato          · a filo, nessuna marca, nessuna attribuzione
   2 fonte         · a filo, riga piccola in coda (↳)
   3 lettura       · rientro + filetto PIENO + attacco + firma
   4 non-decisione · rientro + filetto TRATTEGGIATO + attacco
   5 voce firmata  · il nome è l'intestazione: nome · anno · opera            */
.reg-1 { }
.reg-2 .fonte, .fonte-riga {
  display: block; margin-top: 8px;
  font: 400 .8125rem/1.45 var(--f-ui); color: var(--ink-3); letter-spacing: .01em;
}
.reg-2 .fonte::before, .fonte-riga::before { content: '↳ '; }
.reg-3, .reg-4 { position: relative; padding-left: 22px; }
.reg-3::before, .reg-4::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 0;
  border-left: 1.5px solid var(--ink-3); transform-origin: top;
}
.reg-4::before { border-left-style: dashed; }
.attacco {
  display: block; margin-bottom: 8px;
  font: 700 .72rem/1.2 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
}
.reg-3 .firma { display: block; margin-top: 10px; font: 400 .8125rem/1.4 var(--f-ui); color: var(--ink-3); }
.reg-5 .chi {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--filo);
}
.reg-5 .chi b { font: 600 1.05rem/1.25 var(--f-scrittura); color: var(--ink); }
.reg-5 .chi span { font: 400 .8125rem/1.3 var(--f-ui); color: var(--ink-3); letter-spacing: .02em; }

/* ── il piede ────────────────────────────────────────────────────────────── */
.piede {
  border-top: 1px solid var(--filo); padding: 48px var(--margine) 40px;
  font: 400 .9rem/1.55 var(--f-ui); color: var(--ink-2);
}
.piede-dentro { max-width: var(--colonna); margin: 0 auto; display: grid; gap: 28px; }
.piede .riga-alta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.piede .riga-alta nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-left: auto; }
.piede nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.piede a { color: var(--ink-2); text-decoration-color: var(--filo-forte); }
@media (hover: hover) { .piede a:hover { color: var(--ink); text-decoration-color: var(--marca); } }
.piede .crediti { font-size: .8125rem; color: var(--ink-3); max-width: 70ch; }
.bozza-segno {
  display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--filo-forte);
  font: 600 .72rem/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE SCHERMATE DELL'APP — ricostruite in HTML, PROVVISORIE (compagno.js, NOTA §9)
   Spostate qui da index.html il 25/09: servono alla vetrina e ai telefoni che
   accompagnano lo scorrimento, in tutte e due le pagine.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --bezel: #0E0C0B; --bezel-filo: #2A2622; --bezel-luce: #4A433C; --riflesso-vetro: rgba(255,255,255,.075); --ombra-tel: rgba(18,1,1,.55); --ombra-tel-2: rgba(18,1,1,.45); }
/* la cornice del telefono: il corpo è 390×844, scalato — come un iPhone 14 */
.cornice {
  position: relative; width: calc(390px * var(--s) + 24px); height: calc(844px * var(--s) + 24px);
  padding: 12px; border-radius: calc(54px * var(--s) + 12px);
  background: var(--bezel);
  box-shadow: 0 0 0 1px var(--bezel-filo) inset, inset 0 1.5px 0 0 var(--bezel-luce), 0 40px 70px -34px var(--ombra), 0 12px 24px -16px var(--ombra);
}
.cornice .isola { position: absolute; z-index: 9; top: calc(12px + 11px * var(--s)); left: 50%; translate: -50% 0; width: calc(120px * var(--s)); height: calc(34px * var(--s)); border-radius: 99px; background: var(--bezel); }
.cornice .vetro { width: 100%; height: 100%; border-radius: calc(54px * var(--s)); overflow: hidden; position: relative; }
/* la luce: un riflesso fermo sul vetro, dall'alto a sinistra, e un filo sul bordo della
   cornice. Niente di animato: è un disegno, costa zero allo scorrimento */
.cornice .vetro::after, .tel .vetro::before {
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  background: linear-gradient(128deg, var(--riflesso-vetro), transparent 34%);
}
.schermo {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px;
  transform: scale(var(--s)); transform-origin: 0 0;
  background: var(--carta); color: var(--ink); overflow: hidden;
  font-family: var(--f-ui);
}
/* i temi dell'app, dentro lo schermo: indipendenti dal tema della pagina */
.t-carta { --carta: #FAF8F4; --carta-2: #FFFFFF; --carta-3: #E4E1DB; --ink: #1F1B16; --ink-2: #514A40; --ink-3: #6D665A; --filo: #E4DFD5; --filo-forte: #CBC4B5; --accento: #A54920; --marca: #B24E22; --accento-tenue: #F2DFD8; --evidenzia: #F7E6B8; color-scheme: light; }
.t-seppia { --carta: #F1E7D6; --carta-2: #F7EFE1; --carta-3: #DED3BE; --ink: #2A2118; --ink-2: #584B3B; --ink-3: #695C4C; --filo: #DFD2BB; --filo-forte: #C4B49A; --accento: #9A4018; --marca: #A34419; --accento-tenue: #E3D0C8; --evidenzia: #E6D7AB; color-scheme: light; }
.t-notte { --carta: #141210; --carta-2: #201D19; --carta-3: #302C26; --ink: #EFE9DE; --ink-2: #B5AC9D; --ink-3: #9E9484; --filo: #2C2822; --filo-forte: #443D33; --accento: #E8875A; --marca: #E8875A; --accento-tenue: #2F221C; --evidenzia: #4B4025; color-scheme: dark; }

.stato-tel { height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 34px; font: 600 16px/1 var(--f-ui); color: var(--ink); }
.stato-tel svg { width: 64px; height: 12px; }
.testata-tel { display: flex; align-items: center; gap: 10px; padding: 6px 16px 12px; }
.tondo-tel { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--filo-forte); display: grid; place-items: center; color: var(--ink-2); font: 400 17px/1 var(--f-ui); }
.dove-tel { flex: 1; min-width: 0; }
.dove-tel b { display: block; font: 600 16px/1.2 var(--f-scrittura); }
.dove-tel span { display: block; font: 400 11px/1 var(--f-ui); letter-spacing: .07em; color: var(--ink-3); margin-top: 3px; text-transform: uppercase; }
.pill-tel { border: 1px solid var(--filo-forte); border-radius: 999px; padding: 7px 12px; font: 600 11.5px/1 var(--f-ui); letter-spacing: .07em; color: var(--ink-2); }
.pagina-tel { padding: 14px 26px 0; }
.testo-tel { font-family: var(--f-scrittura); font-weight: 300; font-size: 17.5px; line-height: 1.72; }
.testo-tel p { margin: 0 0 4px; }
.testo-tel .n { font: 600 10.5px/1 var(--f-ui); color: var(--marca); vertical-align: .42em; margin-right: 5px; }
.testo-tel .tua { background: var(--evidenzia); box-shadow: 0 0 0 3px var(--evidenzia); border-radius: 3px; }
.testo-tel .acceso { background: var(--accento-tenue); box-shadow: 0 0 0 4px var(--accento-tenue); border-radius: 3px; }
.barra-tel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex;
  padding: 8px 6px 30px; border-top: 1px solid var(--filo);
  background: color-mix(in srgb, var(--carta) 90%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.barra-tel span { flex: 1; display: grid; justify-items: center; gap: 4px; color: var(--ink-3); font: 500 10.5px/1 var(--f-ui); }
.barra-tel svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.barra-tel .attiva { color: var(--ink); font-weight: 700; }
.barra-tel .attiva svg { stroke: var(--marca); }

/* schermo · la scheda del versetto */
.sotto-foglio { position: absolute; inset: 0; opacity: .38; filter: blur(.5px); }
.velo-tel { position: absolute; inset: 0; background: rgba(8,7,6,.45); }
.foglio {
  position: absolute; left: 0; right: 0; bottom: 0; top: 150px; z-index: 6;
  padding: 12px 22px 0; border-radius: 24px 24px 0 0;
  background: var(--carta-2); border-top: 1px solid var(--filo-forte);
  box-shadow: 0 -28px 64px -22px rgba(0,0,0,.85);
}
.maniglia-tel { width: 38px; height: 4px; border-radius: 2px; background: var(--filo-forte); margin: 0 auto 14px; }
.capo-tel { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--filo); }
.capo-tel b { font: 600 18px/1.2 var(--f-scrittura); }
.capo-tel span { font: 600 11px/1 var(--f-ui); letter-spacing: .08em; color: var(--ink-3); }
.blocco-tel { padding: 16px 0 4px; }
.blocco-tel h4 { font: 700 10px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.blocco-tel .gr { font: 400 19px/1.6 var(--f-scrittura); }
.blocco-tel .gr mark { background: none; color: var(--accento); font-weight: 600; }
.blocco-tel .ana-tel { font: 300 14.5px/1.45 var(--f-scrittura); color: var(--ink-2); margin-top: 4px; }
.blocco-tel .fonte-tel { font: 400 11px/1.4 var(--f-ui); color: var(--ink-3); margin-top: 8px; }
.blocco-tel .r4 { position: relative; padding-left: 15px; border-left: 1.5px dashed var(--ink-3); font: 300 14.5px/1.5 var(--f-scrittura); color: var(--ink); }
.blocco-tel .r4 i { display: block; font: 700 9.5px/1 var(--f-ui); font-style: normal; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.blocco-tel .voce-tel b { display: block; font: 600 14px/1.3 var(--f-scrittura); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--filo); }
.blocco-tel .voce-tel b span { font: 400 11px/1 var(--f-ui); color: var(--ink-3); margin-left: 6px; }
.blocco-tel .voce-tel p { font: 300 15px/1.55 var(--f-scrittura); color: var(--ink-2); }

/* schermo · Esplora */
.frontone-tel { position: relative; height: 262px; padding: 0 18px 14px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.frontone-tel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  filter: invert(1) grayscale(1) brightness(.74) contrast(1.7) sepia(1) saturate(2.8) hue-rotate(-12deg) brightness(1.18);
  mix-blend-mode: screen; opacity: .6;
  -webkit-mask-image: linear-gradient(#000 0 46%, transparent 92%); mask-image: linear-gradient(#000 0 46%, transparent 92%); }
.frontone-tel .aura-tel { position: absolute; left: 62%; top: 30%; width: 150%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, rgba(226,132,86,.24), rgba(194,94,46,.11) 34%, transparent 66%); }
.frontone-tel .stato-tel { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.frontone-tel .capo-e { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.frontone-tel .capo-e b { font: 600 34px/1 var(--f-scrittura); letter-spacing: -.018em; }
.frontone-tel .capo-e span { font: 400 11.5px/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.cerca-tel { position: relative; z-index: 1; border: 1px solid var(--filo-forte); border-radius: 999px; background: var(--carta-2); padding: 12px 16px 12px 40px; font: 400 14.5px/1 var(--f-ui); color: var(--ink-3); }
.cerca-tel::before { content: ''; position: absolute; left: 16px; top: 50%; width: 11px; height: 11px; translate: 0 -60%; border: 1.6px solid var(--ink-3); border-radius: 50%; }
.griglia-tel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 18px; }
.casella-tel { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 1px solid var(--filo); background: var(--carta-2); }
.casella-tel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.casella-tel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,10,8,.82), rgba(12,10,8,.1) 62%); }
.casella-tel span { position: absolute; left: 12px; right: 10px; bottom: 10px; z-index: 1; font: 600 15px/1.2 var(--f-scrittura); color: #F6F0E6; }

/* schermo · Biblioteca */
.libro-tel { padding: 8px 26px 0; }
.libro-tel .tit { font: 600 21px/1.3 var(--f-scrittura); margin: 10px 0 18px; }
.libro-tel p { font: 300 17px/1.7 var(--f-scrittura); margin: 0 0 14px; }
.libro-tel sup { font: 600 10px/1 var(--f-ui); color: var(--marca); }
.libro-tel .versi { padding-left: 18px; font-style: italic; }
.libro-tel .versi p { margin: 0; line-height: 1.6; }

/* schermo · il primo avvio */
.avvio-tel { position: absolute; inset: 0; }
.avvio-tel .lastra { position: absolute; left: 0; right: 0; top: 0; height: 75%; overflow: hidden; }
.avvio-tel .lastra img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: invert(1) grayscale(1) brightness(.74) contrast(1.7) sepia(1) saturate(2.8) hue-rotate(-12deg) brightness(1.18);
  mix-blend-mode: screen; opacity: .72;
  -webkit-mask-image: linear-gradient(#000 0 55%, transparent 98%); mask-image: linear-gradient(#000 0 55%, transparent 98%); }
.avvio-tel .tacche { position: absolute; top: 56px; left: 22px; right: 22px; z-index: 2; display: flex; gap: 5px; }
.avvio-tel .tacche i { flex: 1; height: 3px; border-radius: 2px; background: var(--filo-forte); }
.avvio-tel .tacche i.fatta { background: var(--ink-2); }
.avvio-tel .tacche i.ora { background: var(--marca); }
.avvio-tel .testo-avvio { position: absolute; left: 26px; right: 26px; bottom: 60px; z-index: 2; }
.avvio-tel .testo-avvio h5 { margin: 0 0 10px; font: 400 34px/1.05 var(--f-scrittura); font-variation-settings: 'opsz' 72; letter-spacing: -.02em; }
.avvio-tel .testo-avvio p { font: 300 17px/1.5 var(--f-scrittura); color: var(--ink-2); }
.avvio-tel .testo-avvio small { display: block; margin-top: 14px; font: 400 11px/1.3 var(--f-ui); color: var(--ink-3); }

/* schermo · le tre schermate nuove del compagno (parola, confronto, commenti) */
.foglio.foglio-alto { top: 104px; }
.blocco-tel .eb-tel { font: 400 21px/2 var(--f-ebraico); direction: rtl; text-align: right; }
.blocco-tel .eb-tel mark { background: none; color: var(--accento); }
.blocco-tel .eb-grande { font: 400 58px/1.35 var(--f-ebraico); direction: rtl; text-align: left; }
.riga-tel { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--filo); align-items: baseline; }
.riga-tel b { font: 700 10.5px/1 var(--f-ui); letter-spacing: .1em; color: var(--ink-2); }
.riga-tel p { font: 300 15px/1.45 var(--f-scrittura); }
.riga-tel mark { background: var(--accento-tenue); color: var(--ink); box-shadow: inset 0 -2px 0 var(--marca); }
.blocco-tel .voce-tel + .voce-tel { margin-top: 16px; }
.strato-schermo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   IL COMPAGNO — i telefoni che accompagnano lo scorrimento (compagno.js)
   Piccoli, di lato, mai sopra i testi: su schermo largo stanno in una corsia
   a destra che la pagina lascia libera; sotto i 1100 px stanno a lato di un
   paragrafo lungo (float), e il testo gira loro intorno. Solo transform e
   opacity; nessuna altezza animata. Senza JS non esistono.
   ═══════════════════════════════════════════════════════════════════════════ */
.compagno, .posto-tel { display: none; }
.tel {
  position: relative; display: block;
  width: calc(390px * var(--s) + 12px); height: calc(844px * var(--s) + 12px);
  padding: 6px; border-radius: calc(54px * var(--s) + 6px);
  background: var(--bezel);
  box-shadow: 0 0 0 1px var(--bezel-filo) inset, 0 34px 60px -30px var(--ombra-tel), 0 10px 22px -14px var(--ombra-tel-2);
}
.tel .vetro { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(54px * var(--s)); background: #000; }
.tel .isola { position: absolute; z-index: 9; top: calc(6px + 11px * var(--s)); left: 50%; translate: -50% 0; width: calc(120px * var(--s)); height: calc(34px * var(--s)); border-radius: 99px; background: var(--bezel); }
.strato-schermo { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms ease; }
.strato-schermo.su { opacity: 1; }
/* dentro un telefono piccolo, niente vetro smerigliato: costa caro in 3D e non si vede */
.tel .barra-tel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--carta); }

/* la corsia: su schermo largo il testo lascia libera la destra.
   --L è il margine che la colonna avrebbe centrata; a destra si tiene il più
   grande fra quello e la corsia. Il bordo sinistro non si sposta. */
@media (min-width: 1100px) {
  :root.con-compagno { --tel-l: clamp(112px, 10.2vw, 148px); --corsia: calc(var(--tel-l) + 76px); }
  :root.con-compagno .con-corsia {
    --L: max(0px, (100% - var(--colonna)) / 2);
    margin-left: var(--L); margin-right: 0;
    max-width: calc(100% - var(--L) - max(var(--L), var(--corsia) - var(--margine)));
  }
  /* le colonne di testo stanno SOPRA il telefono: quando attraversa, passa dietro */
  :root.con-compagno .con-corsia { position: relative; z-index: 1; }
  .compagno {
    display: block; position: fixed; z-index: 0; left: 0; top: 50%;
    width: var(--tel-l); pointer-events: none;
    opacity: 0; transform: translateY(-50%);
    transition: opacity 700ms ease;
  }
  .compagno.su { opacity: 1; }
  .compagno-via { transform-origin: 50% 50%; will-change: transform, opacity; }
  .compagno-scena {
    position: relative; display: flex; justify-content: flex-end;
    transform-style: preserve-3d; transform: perspective(1000px) rotateY(-13deg) rotateX(4deg);
    will-change: transform;
  }
  .compagno-scena.sx { justify-content: flex-start; }
  .compagno .tel-fronte { transform: translateZ(0); }
  .compagno .dietro-sposta { position: absolute; right: -18px; top: -11%; transform-style: preserve-3d; }
  .compagno-scena.sx .dietro-sposta { right: auto; left: -18px; }
  .compagno .tel-dietro { transform: translateZ(-80px) rotateY(7deg) scale(.88); transition: opacity 700ms ease; }
  .compagno-scena.sx .tel-dietro { transform: translateZ(-80px) rotateY(-7deg) scale(.88); }
  .compagno .tel-dietro .vetro::after { content: ''; position: absolute; inset: 0; z-index: 8; background: rgba(12,9,7,.42); }
  .compagno-scena.solo .tel-dietro { opacity: 0; }
}
/* da 1280 px la corsia c'è da tutte e due le parti: il telefono può cambiare lato */
@media (min-width: 1280px) {
  :root.con-compagno .con-corsia {
    --R: max(0px, var(--corsia) - var(--margine));
    margin-left: auto; margin-right: auto;
    max-width: min(var(--colonna), calc(100% - 2 * var(--R)));
  }
}

/* sotto i 1100 px: il telefono a lato di un paragrafo lungo */
@media (max-width: 1099px) {
  :root.con-compagno .posto-tel {
    --s: .25; display: block; float: right; position: relative;
    width: calc(390px * var(--s) + 8px); height: calc(844px * var(--s) + 8px + 24px);
    margin: 2px 0 10px 20px; padding: 12px 0;
  }
  :root.con-compagno .posto-tel.sx { float: left; margin: 2px 20px 10px 0; }
  .posto-tel .posto-3d { display: block; transform: perspective(700px) rotateY(-10deg) rotateX(3deg); will-change: transform; }
  .posto-tel.sx .posto-3d { transform: perspective(700px) rotateY(10deg) rotateX(3deg); }
  .posto-tel .tel { padding: 4px; border-radius: calc(54px * var(--s) + 4px); box-shadow: 0 0 0 1px var(--bezel-filo) inset, 0 20px 34px -18px var(--ombra-tel); }
  .posto-tel .tel .isola { top: calc(4px + 11px * var(--s)); }
  .col-posto { display: flow-root; }
}
@media (max-width: 600px) { :root.con-compagno .posto-tel { --s: .2; margin-left: 16px; } :root.con-compagno .posto-tel.sx { margin-left: 0; margin-right: 16px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   GLI INVITI CHE CONTANO — più grandi, e con un segno di vita sobrio
   Il riflesso passa ogni 7 secondi (solo transform); al passaggio il comando
   sale di 2 px e la freccia scende; premuto, si abbassa. Contrasti: NOTA §9.
   ═══════════════════════════════════════════════════════════════════════════ */
.campo.grande, .bottone-notte.grande {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 58px; padding: 0 30px 0 26px; gap: 12px;
  /* 19 px in grassetto: testo grande per WCAG, così resta AA (≥ 3:1) anche
     quando il riflesso passa (3,7:1 al culmine); a riposo è 4,9:1 */
  font: 700 1.1875rem/1.15 var(--f-ui); letter-spacing: .005em;
  transition: background 200ms, transform 260ms var(--esce), box-shadow 260ms var(--esce);
}
.campo.grande { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--crema) 20%, transparent), 0 18px 36px -16px var(--ombra-campo), 0 2px 6px -2px var(--ombra-campo-2); }
@media (hover: hover) { .campo.grande:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--crema) 20%, transparent), 0 24px 42px -16px var(--ombra-campo), 0 2px 6px -2px var(--ombra-campo-2); } }
svg.segno-cmd { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 380ms var(--esce); }
.campo.grande::after, .bottone-notte.grande::after {
  content: ''; position: absolute; z-index: -1; top: -10%; bottom: -10%; left: 0; width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255,246,238,.10) 40%, rgba(255,246,238,.16) 50%, rgba(255,246,238,.10) 60%, transparent);
  transform: translateX(-120%) skewX(-14deg); pointer-events: none;
}
.js-moto .campo.grande::after, .js-moto .bottone-notte.grande::after { animation: riflesso 7s cubic-bezier(.45,0,.2,1) 2.8s infinite; }
/* i negozi hanno una riga piccola («Scarica da»): lì niente riflesso */
.negozi .campo.grande::after { content: none; }
@keyframes riflesso { 0% { transform: translateX(-120%) skewX(-14deg); } 24%, 100% { transform: translateX(340%) skewX(-14deg); } }
@media (hover: hover) {
  .campo.grande:hover, .bottone-notte.grande:hover { transform: translateY(-2px); }
  .grande:hover svg.giu, .grande:focus-visible svg.giu { transform: translateY(3px); }
  .grande:hover svg.avanti, .grande:focus-visible svg.avanti { transform: translateX(3px); }
  .grande:hover svg.campana, .grande:focus-visible svg.campana { transform: rotate(-12deg); }
}
/* la campana oscilla come una campana, non ruota: il perno è in alto */
svg.campana { transform-origin: 50% 12%; }
.campo.grande:active, .bottone-notte.grande:active { transform: translateY(0) scale(.975); transition-duration: 90ms; }
.campo:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* il secondo invito resta secondo: testo sottolineato, niente campo */
.lieve {
  display: inline-flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 6px;
  color: var(--ink); font: 600 1.0625rem/1 var(--f-ui);
  text-decoration: underline; text-decoration-color: var(--filo-forte); text-decoration-thickness: 1.5px; text-underline-offset: .32em;
  transition: text-decoration-color 200ms;
}
@media (hover: hover) { .lieve:hover { text-decoration-color: var(--marca); text-decoration-thickness: 1.5px; } }
.lieve:active { opacity: .72; }

/* «Scorri»: leggibile, con un segno che scende */
.scorri {
  display: inline-grid; justify-items: center; gap: 10px; padding: 6px 10px;
  color: var(--ink-2); text-decoration: none;
  font: 700 .78rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase;
}
.scorri .cerchio { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; }
.scorri svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.js-moto .scorri svg { animation: scende 2.4s var(--esce) infinite; }
@keyframes scende { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }
@media (hover: hover) { .scorri:hover { color: var(--ink); text-decoration: none; } }
.scorri .cerchio { transition: background var(--breve), border-color var(--breve); }
@media (hover: hover) { .scorri:hover .cerchio { background: color-mix(in srgb, currentColor 8%, transparent); } }

/* ═══ L'INVITO FISSO — compare quando l'apertura è uscita (compagno.js) ═══ */
.invito-fisso {
  position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 2px; padding: 6px;
  border-radius: 999px; border: 1px solid var(--filo-forte);
  background: color-mix(in srgb, var(--carta-2) 96%, transparent);
  box-shadow: 0 22px 44px -20px var(--ombra), 0 6px 14px -8px var(--ombra);
  transform: translate(-50%, 0); opacity: 1;
  transition: transform 560ms var(--esce), opacity 360ms ease;
}
.invito-fisso[hidden] { display: none; }
.invito-fisso.via { transform: translate(-50%, 150%); opacity: 0; transition: transform 360ms var(--va), opacity 260ms ease; }
.invito-fisso .campo { min-height: 52px; padding: 0 22px 0 20px; font-size: 1.0625rem; white-space: nowrap; }
.invito-chiudi {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background 200ms, color 200ms;
}
@media (hover: hover) { .invito-chiudi:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } }
.invito-chiudi:active { scale: .92; }
.invito-chiudi { transition: background var(--breve), color var(--breve), scale 120ms; }
.invito-chiudi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* su schermo largo sta nella corsia, sotto il telefono: lì non c'è testo */
@media (min-width: 1100px) {
  :root.con-compagno .invito-fisso {
    left: auto; right: 16px; transform: none; width: calc(var(--corsia) - 32px);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
  }
  :root.con-compagno .invito-fisso.via { transform: translateY(150%); }
  :root.con-compagno .invito-fisso .invito-chiudi { order: -1; align-self: flex-end; background: var(--carta-2); box-shadow: 0 0 0 1px var(--filo-forte) inset; }
  :root.con-compagno .invito-fisso .campo { white-space: normal; text-align: left; line-height: 1.2; padding: 12px 16px 12px 18px; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}