/* home.css: palco 3D, storia, ufficio. Si carica DOPO shell.css. */

/* Il 3D (js/parts.js) disegna il testo DOS dello schermo del 1998 con la famiglia 'Pixelify Sans': va dichiarata con questo nome.
   Stesso file gia' precaricato per 'NS Cifre', quindi non si scarica niente in piu'. */
@font-face { font-family: 'Pixelify Sans'; src: url('../fonts/PixelifySans-var-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

/* ---------- 1. token della home: barra, velo e alone seguono il fondo dell'epoca ---------- */
:root {
  --col: min(34rem, 40vw);
  --colw: calc(var(--pad) + var(--col));
  --scene: 218 212 196;                 /* 1998, crema */
  --bar: rgb(var(--scene));
  --veil: rgb(var(--scene) / .92);
  --halo: rgb(var(--scene));
}
html.e2016 { --scene: 201 205 210; }    /* 2016, grigio */
html.dark { --scene: 20 23 28; --bar: rgb(var(--scene)); --veil: rgb(var(--scene) / .9); }
.post { --fg-mute: #b8bec7; --accent-text: var(--cyan); --hl: transparent; --focus: var(--cyan); }
@media (prefers-contrast: more) { :root, html.dark { --veil: rgb(var(--scene)); } .post { --fg-mute: var(--fg); } }

/* Dietro il 3D e dietro il poster c'e' il colore della scena (mai un fondo fisso dell'altro tema): se l'immagine non e' ancora arrivata (modo statico, arrivo su una sezione scura) non si vede una lastra crema accanto alla colonna scura. */
body { background: rgb(var(--scene)); transition: color .5s var(--ease); }
/* Primo disegno (classe .snap su <html>, messa da home.js per un fotogramma): tema applicato di colpo, senza sfumare dal colore sbagliato (ricarica o ritorno su una sezione a meta', ancora).
   Solo gli elementi con una transizione di colore o di opacita' legata al tema (dark, e2016, inside, veiled, team, fine): mai html.snap *, che spegnerebbe anche le entrate dei testi. PIANO-PAGINE 8.2. */
html.snap body, html.snap .topbar, html.snap .topbar *, html.snap .chapters, html.snap .chapters *, html.snap .chapters *::after, html.snap .year, html.snap .veil, html.snap .scrim, html.snap .scrim::after, html.snap .scrim::before, html.snap .btn, html.snap .blk.tran .step { transition: none !important; }

/* ---------- 2. palco fisso ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#world { width: 100%; height: 100%; display: block; }
.year { position: absolute; z-index: 2; right: var(--pad); top: calc(var(--bar-h) + 1.25rem); font-family: var(--pixel); font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1; letter-spacing: .02em; color: var(--fg); opacity: .9; transition: color .5s var(--ease), opacity .4s; font-variant-numeric: tabular-nums; }
.year.off { opacity: 0; }
.year.mod { font-family: var(--font); font-weight: 760; letter-spacing: -.035em; }
.labels { position: absolute; inset: 0; z-index: 2; }
/* etichette dei pezzi: appese sotto il pezzo (sopra la fila alta non c'e' posto: finirebbe sotto la barra), in un riquadro del colore del fondo
   (il testo resta leggibile anche sopra un altro pezzo); filo e pallino fuori dal riquadro, il pallino tocca il bordo basso del pezzo */
.labels span { position: absolute; left: 0; top: 0; transform: translate(-50%, 2.1rem); white-space: nowrap; font-size: var(--t-xs); line-height: 1.3; color: var(--fg-mute); opacity: 0; transition: opacity .25s, background-color .3s var(--ease), color .3s var(--ease); text-align: center; padding: .3rem .6rem; border-radius: .5rem; background-color: rgb(var(--scene) / .9); }
.labels span b { display: block; font-size: var(--t-sm); color: var(--fg); font-weight: 680; transition: color .3s var(--ease); }
.labels span em { display: block; font-style: normal; }
.labels span i { display: block; font-style: normal; font-weight: 650; color: var(--accent-text); margin-top: .15rem; transition: color .3s var(--ease); }
.labels span::after { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 1.5rem; background: currentColor; opacity: .55; }
.labels span::before { content: ''; position: absolute; left: calc(50% - 3px); bottom: calc(100% + 1.6rem); width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--mark-sol); }
/* la scheda grafica sta sopra la scheda madre: la sua etichetta va a sinistra del pezzo (home.js, world.js slotScreen), con il filo orizzontale */
.say { position: absolute; left: 0; top: 0; z-index: 2; translate: -200px -200px; transform: translate(-50%, -100%); display: flex; align-items: center; gap: .55rem; width: max-content; max-width: min(21rem, 78vw);
  padding: .55rem 1.05rem .55rem .6rem; border-radius: 1.1rem; background: #fff; color: #1D232B; border: 4px solid var(--tag, #00BFAE);
  font: 760 clamp(1.05rem, .92rem + .4vw, 1.3rem)/1.2 var(--font); letter-spacing: -.01em; text-align: left; opacity: 0; pointer-events: none;
  box-shadow: 0 .4rem 0 color-mix(in oklab, var(--tag, #00BFAE) 55%, #000); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), opacity .2s; }
.say::after { content: ''; position: absolute; left: var(--tip, 50%); top: 100%; width: 16px; height: 16px; translate: -50% -50%; rotate: 45deg; background: #fff; border: solid var(--tag, #00BFAE); border-width: 0 4px 4px 0; }
.say i { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--tag, #00BFAE); color: #fff; font: 900 .85em/1 var(--font); font-style: normal; }
.say.prob i::before { content: '\2715'; } .say.sol i::before { content: '\2713'; } .say.work i::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: #fff; animation: say-dot 1.2s infinite; }
.say.prob { --tag: #E5484D; } .say.sol { --tag: #2FB67C; } .say.work { --tag: #00BFAE; }
.say b { font-weight: inherit; color: inherit; }
.say.pop { animation: say-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes say-pop { 0% { scale: .7; } 100% { scale: 1; } }
@keyframes say-dot { 50% { opacity: .35; } }
@media (max-width: 760px) { .say { font-size: 1rem; padding: .45rem .85rem .45rem .5rem; border-width: 3px; } }
.labels span.side { transform: translate(calc(-100% - 1.6rem), -50%); }
.labels span.side::after { left: 100%; top: 50%; bottom: auto; width: 1.4rem; height: 1px; }
.labels span.side::before { left: calc(100% + 1.4rem); top: calc(50% - 3px); bottom: auto; }
/* portatili (sotto i ~1400px) le caselle dei pezzi sono piu' vicine fra loro: caratteri e margini un po' piu' piccoli, cosi' le etichette vicine non si toccano */
@media (min-width: 761px) and (max-width: 1400px) and (orientation: landscape) {
  .labels span { font-size: .8125rem; padding: .3rem .4rem; }
  .labels span b { font-size: .9375rem; }
}
/* Il poster c'e' fin dal primo disegno (home.js e' render-blocking) e cede il posto al 3D con una dissolvenza di opacita', non con display:none.
   Sotto il poster il 3D resta acceso, cosi' la dissolvenza ha qualcosa da mostrare; 'static' lo toglie home.js solo quando il 3D mostra quello che mostra il poster. */
.poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease); }
html.static .poster { opacity: 1; transition: none; }
html.static.intro .poster { opacity: 0; } /* in cima, mentre arriva il 3D: il computer del 1998 si costruisce (home.js), il poster lo farebbe vedere gia' finito */ /* quando 'static' si accende il poster c'e' subito (la transizione vale quella del nuovo stato); quando si spegne sfuma */
html:not(.hj) .poster { display: none; }
html.static .labels { display: none; }

/* velo dietro la colonna di testo: solo dove il testo incrocia il 3D (html.veiled, da home.js) */
.veil { display: none; }
.scrim { position: absolute; inset: 0 auto 0 0; opacity: 0; transition: opacity .6s var(--ease); }
html.inside .scrim { opacity: 1; }
@media (min-width: 761px) and (orientation: landscape) {
  .veil { display: block; position: absolute; inset: 0 auto 0 0; width: calc(var(--colw) + 2rem); background: linear-gradient(to right, var(--veil) calc(var(--colw) - 2rem), transparent); /* pieno fin dove arriva il testo (al massimo ~colw-2rem), poi sfuma: non cancella piu' la memoria sospesa */ opacity: 0; transition: opacity .6s var(--ease), background .5s var(--ease); }
  html.veiled .veil { opacity: 1; }
  html.inside .veil { opacity: 0; }          /* nell'ufficio c'e' gia' lo scrim */
  .hero .sub { max-width: 30ch; }
  /* (7 ott: l'ombra dietro il testo sfuma lunga e morbida, a tappe come una curva: con il passaggio corto, 0.86 -> 0 in 13rem, a meta' ufficio si vedeva un bordo) */
  .scrim { width: calc(var(--colw) + 32rem); background: linear-gradient(to right, rgb(20 23 28 / .9), rgb(20 23 28 / .84) calc(var(--colw) - 4rem), rgb(20 23 28 / .7) calc(var(--colw) + 4rem), rgb(20 23 28 / .5) calc(var(--colw) + 11rem), rgb(20 23 28 / .3) calc(var(--colw) + 18rem), rgb(20 23 28 / .13) calc(var(--colw) + 25rem), transparent); }
  /* "Chi siamo": dietro titoli e foto il pavimento illuminato dell'ufficio faceva da lastra grigia; qui la sola colonna si scurisce di piu' (html.team, da home.js) */
  .scrim::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(max(calc(var(--colw) + 1rem), calc(67vw - 36vh)) + 30rem); background: linear-gradient(to right, rgb(20 23 28 / .94) max(calc(var(--colw) + 1rem), calc(67vw - 36vh)), rgb(20 23 28 / .72) calc(max(calc(var(--colw) + 1rem), calc(67vw - 36vh)) + 6rem), rgb(20 23 28 / .45) calc(max(calc(var(--colw) + 1rem), calc(67vw - 36vh)) + 13rem), rgb(20 23 28 / .2) calc(max(calc(var(--colw) + 1rem), calc(67vw - 36vh)) + 21rem), transparent); opacity: 0; transition: opacity .6s var(--ease); }
  /* Il 3D si sposta con lo schermo: la sua x vale 0.67·W + k·H (setViewOffset del 17% e campo visivo verticale). Per la stazione "noi" la parete destra dell'ufficio sta a k≈-0.376 e il disco
     della sede a k≈-0.228: il pieno copre tutto l'ufficio e la sfumatura cade sul pavimento vuoto fra ufficio e sede. Se cambiano la stazione "noi", il fov o il setViewOffset, i due coefficienti vanno ricalcolati. */
  html.team .scrim::after { opacity: 1; }
  /* "Contatti", seconda meta' (html.fine, da home.js): quando team si spegne la colonna resta scura anche mentre la camera va verso la sede. Strato separato (::before): i due veli si incrociano, ognuno con la sua transizione di opacita'.
     La lastra dell'ufficio sta a x ≈ 0.67·W − 0.76·H e il disco della sede a ≈ 0.67·W − 0.50·H: pieno fino a 0.67·W − 0.70·H, sfumato entro 0.67·W − 0.60H (mai sotto la colonna). Se cambiano la stazione "noi", il fov o il setViewOffset, i coefficienti −0.70 e −0.60 vanno ricalcolati, come quelli di team. */
  .scrim::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(max(calc(var(--colw) - 6rem), calc(67vw - 70vh)) + 30rem); background: linear-gradient(to right, rgb(20 23 28 / .94) max(calc(var(--colw) - 6rem), calc(67vw - 70vh)), rgb(20 23 28 / .72) calc(max(calc(var(--colw) - 6rem), calc(67vw - 70vh)) + 6rem), rgb(20 23 28 / .45) calc(max(calc(var(--colw) - 6rem), calc(67vw - 70vh)) + 13rem), rgb(20 23 28 / .2) calc(max(calc(var(--colw) - 6rem), calc(67vw - 70vh)) + 21rem), transparent); opacity: 0; transition: opacity .6s var(--ease); }
  html.fine .scrim::before { opacity: 1; }
  /* il bottone senza fondo prende il colore del fondo, come .alert e .hint: la tastiera del 1998 non passa piu' sotto il contorno */
  .hero .btn-ghost { background: rgb(var(--scene)); box-shadow: 0 0 .8rem .4rem rgb(var(--scene) / .85); }
}

/* schermi poco larghi rispetto all'altezza (4:3, 16:10 stretti): il computer del 1998 entra nella colonna di testo.
   Li' il velo resta acceso anche nella prima schermata. */
@media (min-width: 761px) and (orientation: landscape) and (max-aspect-ratio: 3/2) { html:not(.e2016):not(.dark) .veil { opacity: 1; } }

/* ---------- 3. barra e indice dei capitoli (solo home) ---------- */
.chapters { position: fixed; right: var(--pad); bottom: 1.5rem; z-index: 9; display: flex; gap: .25rem; padding: 0 .5rem; border-radius: 999px; background: var(--bar); font: 600 var(--t-xs)/1 var(--font); transition: opacity .3s, visibility .3s, background-color .4s var(--ease); }
.chapters a { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .5rem; text-decoration: none; color: var(--fg-mute); transition: color .3s; }
.chapters a::after { content: ''; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor; transition: background .3s, transform .3s; }
.chapters a.on { color: var(--fg); }
.chapters a.on::after { background: var(--cyan); border-color: var(--fg); transform: scale(1.3); }
/* contrasto elevato (forced-colors): lo sfondo del pallino e i colori vengono annullati e i cinque capitoli sembrano uguali; la voce attiva prende pallino pieno e sottolineatura */
@media (forced-colors: active) {
  .chapters a.on::after { background: CanvasText; border-color: CanvasText; }
  .chapters a.on { text-decoration: underline 2px; text-underline-offset: .35em; }
}
/* visibility: l'indice invisibile esce anche dall'ordine del Tab (altrimenti 5 fermate senza anello visibile, WCAG 2.4.7); resta 'visible' per tutta la dissolvenza */
html.foot-in .chapters, html.svc-open .chapters, html.menu-open .chapters { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 760px), (orientation: portrait) { .chapters { display: none; } }
/* telefono in orizzontale (844x390): barra e indice si mangerebbero un terzo dell'altezza; il Menu resta nella barra */
@media (orientation: landscape) and (max-height: 30rem) { .chapters { display: none; } }
/* e le etichette dei pezzi: a 390-430 px di altezza i pezzi stanno vicini e le scritte si sovrapporrebbero (home.js non le misura nemmeno, stessa media query) */
@media (orientation: landscape) and (max-height: 30rem) { .labels { display: none; } }

/* ---------- 4. la storia ---------- */
main { position: relative; z-index: 1; }
.blk { min-height: 100vh; padding: 0 var(--pad); max-width: calc(var(--col) + 2 * var(--pad)); }
.in-wrap { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 6rem 0; }
/* i passaggi (il computer che si smonta e si rimonta, la sola parte che va con lo scorrimento): 340vh, erano 190. 8 ott 2026, Noah: «anche scorrendo
   piano l'animazione va troppo veloce». Il testo resta fermo (.in-wrap) mentre il computer cambia; le soste restano com'erano (li' la scena e' ferma) */
.blk.tran { min-height: 340vh; }
.blk.hold { min-height: 120vh; }
.blk.hero { min-height: 100vh; }
.blk.last { min-height: 130vh; }

.kicker { font: 650 var(--t-sm)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: var(--s-2); }
h1 { font-size: var(--t-h1); line-height: 1.05; font-weight: 760; letter-spacing: -.025em; max-width: 16ch; text-wrap: balance; }
.sub { font-size: var(--t-lead); line-height: 1.5; max-width: 34ch; margin-top: var(--s-4); color: var(--fg-mute); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: var(--s-5); }
.tel-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 650; text-underline-offset: .25em; font-variant-numeric: tabular-nums; }
.alert { width: fit-content; max-width: 34rem; margin-top: var(--s-4); padding: .65rem .9rem; border-left: 4px solid var(--mark-prob); background: rgb(var(--scene) / .85); font-size: var(--t-sm); line-height: 1.45; }
.alert a { font-weight: 700; text-underline-offset: .2em; white-space: nowrap; }
/* stesso colore del fondo: il bordo del riquadro sfuma invece di tagliare la tastiera */
.alert, .hint { box-shadow: 0 0 1rem .6rem rgb(var(--scene) / .85); }
.hint { width: fit-content; max-width: 28rem; margin-top: var(--s-5); padding: .3rem .6rem; margin-left: -.6rem; border-radius: .4rem; background: rgb(var(--scene) / .85); font-size: var(--t-sm); color: var(--fg-mute); }
.hint a { text-underline-offset: .2em; }
/* portatili e finestre basse (1280x720, 1366x768, browser con le barre): senza questo il riquadro della data tocca il fondo e l'invito a scorrere resta fuori.
   L'invito non serve: l'indice in basso a destra porta gia' ai servizi. */
@media (min-width: 761px) and (orientation: landscape) and (max-height: 50rem) {
  .hero .in-wrap { padding: calc(var(--bar-h) + 1rem) 0 1.5rem; }
  .hero h1 { font-size: clamp(2rem, 1rem + 5vh, 3.75rem); }
  .hero .sub { margin-top: 1rem; }
  .hero .cta { margin-top: 1.25rem; }
  .hero .hint { display: none; }
}
/* finestre molto basse (browser con le barre su 1366x768: ~650 px): il testo sotto il titolo si accorcia di una riga */
@media (min-width: 761px) and (orientation: landscape) and (max-height: 41rem) { .hero .sub { max-width: 36ch; } }

/* niente ultima parola da sola a capo nei testi correnti (i numeri e le date sono tenuti insieme con &nbsp; e .nowrap nell'HTML) */
.sec p, .sec .steps3 span, .gen .lead, .gen .close, .gen .alert { text-wrap: pretty; }

/* epoche ferme senza velo: se il 3D entra nella colonna (sotto i ~1280px), un alone del colore del fondo tiene leggibili le lettere */
@media (min-width: 761px) and (orientation: landscape) { .blk.hold h1, .blk.hold .sub, .blk.hold .era, .blk.hold .lead, .blk.hold .close { text-shadow: 0 0 .3em var(--halo), 0 0 .8em var(--halo); } }

/* passaggi: prima il problema, poi (da meta' blocco, .solved) cosa facciamo. Niente testo fantasma. */
.tag { display: flex; align-items: center; gap: .5rem; font: 650 var(--t-sm)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg); margin-bottom: var(--s-2); }
.tag::before { content: ''; width: .625rem; height: .625rem; flex: none; }
.tag.prob::before { background: var(--mark-prob); }
.tag.sol { margin-top: var(--s-5); }
.tag.sol::before { background: var(--mark-sol); }
.step { font-size: var(--t-step); line-height: 1.3; font-weight: 560; letter-spacing: -.01em; max-width: 30ch; text-wrap: pretty; }
.step em, .close em { font-style: normal; color: var(--accent-text); background: linear-gradient(transparent 60%, var(--hl) 0); }
.hj .blk.tran .sol { opacity: 0; transform: translateY(.5rem); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.hj .blk.tran.solved .sol { opacity: 1; transform: none; }
.blk.tran .step.prob { transition: color .45s var(--ease); }
.blk.tran.solved .step.prob { color: var(--fg-mute); }

/* epoche ferme: titolo, una riga, la chiusa */
.era { font-size: var(--t-h2); line-height: 1.1; font-weight: 720; letter-spacing: -.02em; max-width: 18ch; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 34rem; margin-top: var(--s-3); }
.close { font-size: var(--t-lead); line-height: 1.5; max-width: var(--measure); margin-top: var(--s-4); color: var(--fg-mute); }
.close b { color: var(--fg); font-weight: 650; }

/* ---------- 5. dopo la storia: l'ufficio ---------- */
.post { color: #f5f3ee; --fg: #f5f3ee; }
.sec { max-width: calc(var(--col) + 2 * var(--pad)); padding: clamp(6rem, 22vh, 14rem) var(--pad); }
.sec h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 720; letter-spacing: -.02em; text-wrap: balance; margin-bottom: var(--s-3); }
.sec p { color: var(--fg-mute); max-width: var(--measure); margin-top: var(--s-2); }
.more { display: inline-block; padding-block: .6rem; font-weight: 650; color: var(--fg); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.more::after { content: '→'; content: '→' / ''; display: inline-block; margin-left: .4rem; }
.more-row { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.sec p.more-row, .sec .more { margin-top: var(--s-3); }

.post .services { padding-top: 0; padding-bottom: 0; }
.svc-head { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.svc { list-style: none; counter-reset: s; }
.svc li { counter-increment: s; min-height: 78vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.svc h3 { display: flex; gap: 1rem; align-items: baseline; font-size: var(--t-h3); line-height: 1.2; font-weight: 680; text-wrap: balance; }
.svc h3::before { content: counter(s, decimal-leading-zero); font-family: var(--pixel); font-weight: 500; font-size: 1.2rem; color: var(--cyan); }
/* .card: solo sul telefono e' una scheda (vedi sezione 6); altrove non esiste come scatola */
.svc-head > .card, .svc li > .card { display: contents; }
.svc li p:not(.more-row):not(.proof) { font-size: var(--t-lead); line-height: 1.5; max-width: var(--measure); margin-top: var(--s-2); color: var(--fg-mute); }
.svc-head p:not(.kicker):not(.more-row):not(.proof) { font-size: var(--t-lead); line-height: 1.5; }
.svc li .proof, .svc-head .proof { font-size: var(--t-sm); line-height: 1.5; color: var(--fg); padding-left: .85rem; border-left: 2px solid var(--cyan); margin-top: var(--s-3); }

.fact h2 .big { display: block; font-family: var(--pixel); font-size: var(--t-date); line-height: 1; letter-spacing: 0; color: var(--cyan); margin: .25rem 0 1rem; }
.count { display: flex; gap: 3rem; margin-top: 2.5rem; }
.count .num { display: block; font-family: var(--pixel); font-size: var(--t-num); line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.count .lab { font-size: var(--t-sm); color: var(--fg-mute); }
.steps3 { list-style: none; counter-reset: k; margin-top: var(--s-5); display: grid; gap: 1.5rem; }
.steps3 li { counter-increment: k; display: grid; grid-template-columns: 3rem 1fr; gap: .2rem 1rem; }
.steps3 li::before { content: counter(k); grid-row: span 2; font-family: var(--pixel); font-size: 2.4rem; line-height: 1; color: var(--cyan); }
.steps3 b { font-size: var(--t-lead); font-weight: 650; color: var(--fg); }
.steps3 span { color: var(--fg-mute); }
.ph-row { display: flex; gap: 1rem; margin-top: var(--s-5); }
.ph-row figure { flex: 1; }
.ph-row img { border-radius: .5rem; aspect-ratio: 4 / 5; object-fit: cover; }
.ph-row figcaption { margin-top: .5rem; font-size: var(--t-sm); line-height: 1.4; color: var(--fg-mute); }
.ph-row figcaption b { display: block; font-weight: 650; color: var(--fg); }
.end .phone { display: block; white-space: nowrap; font: 760 var(--t-num)/1 var(--font); letter-spacing: -.02em; color: var(--cyan); text-decoration: none; margin: var(--s-3) 0 var(--s-2); font-variant-numeric: tabular-nums; }
.end .hours { margin-top: 0; }
.contact-list { list-style: none; margin-top: var(--s-4); color: var(--fg-mute); }
.contact-list li { min-height: 2.75rem; display: flex; align-items: center; }
.contact-list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--fg); font-weight: 650; text-underline-offset: .25em; }
html:not(.hj) [data-days-line] { display: none; }

/* entrata dei testi: legata alla posizione, non a tempo */
.in-wrap > *, .sec > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hj .blk:not(.in) .in-wrap > *, .hj .sec:not(.in) > * { opacity: 0; transform: translateY(1.5rem); }

/* ---------- 6. telefono (<= 760px): il 3D in alto, il testo entra dal fondo ---------- */
@media (max-width: 760px), (orientation: portrait) {
  :root { --col: 100%; }
  .blk { padding: 0 1.25rem; }
  /* il testo arriva dal fondo appena arriva il blocco e resta in basso finche' il blocco passa: niente schermate vuote */
  .blk, .blk.tran { display: flex; flex-direction: column; justify-content: flex-end; }
  .blk.tran { min-height: 280vh; }   /* (erano 160vh: come sul desktop, il passaggio va piu' piano sotto il dito) */
  .in-wrap { position: sticky; top: auto; bottom: 0; min-height: 0; padding: 4rem 0 2.25rem; justify-content: flex-end; }
  .hero .in-wrap { min-height: 100svh; }
  .veil { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 52vh; background: linear-gradient(to bottom, transparent, var(--veil) 32%); transition: background .5s; }
  .scrim { inset: auto 0 0 0; width: 100%; height: 60vh; background: linear-gradient(to bottom, transparent, rgb(20 23 28 / .92) 40%); }
  .year { top: calc(var(--bar-h) + 1rem); right: 1.25rem; font-size: 2.6rem; }
  .labels { display: none; }
  h1, .hero h1 { font-size: clamp(2rem, 1rem + 3.2vw, 3.25rem); } /* 32px sul telefono, piu' grande sul tablet: sempre sopra gli h2 */

  /* passaggi: problema e soluzione nella stessa cella, uno dopo l'altro (prima si dissolve il problema, poi entra la soluzione).
     Impilati, la soluzione invisibile occupava gia' il suo spazio e spingeva il problema in alto, sopra la torre del computer.
     Solo con .hj: senza home.js nessuno dei due si nasconde, e nella stessa cella i testi si sovrapporrebbero (restano uno sotto l'altro, come sul desktop). */
  .hj .blk.tran .in-wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; }
  .hj .blk.tran .tag.prob, .hj .blk.tran .tag.sol { grid-area: 1 / 1; margin-top: 0; }
  .hj .blk.tran .step.prob, .hj .blk.tran .step.sol { grid-area: 2 / 1; }
  .blk.tran .tag.prob, .blk.tran .step.prob { transition: opacity .25s var(--ease) .25s, transform .6s var(--ease); }
  .hj .blk.tran.solved .tag.prob, .hj .blk.tran.solved .step.prob { opacity: 0; transition-delay: 0s; }
  .hj .blk.tran.solved .sol { transition-delay: .25s; }

  /* prima schermata compatta: tutto sotto il computer del 1998 */
  .hero .kicker { margin-bottom: .5rem; }
  .hero .sub { font-size: var(--t-sm); margin-top: .75rem; }
  .hero .cta { margin-top: 1rem; gap: .5rem; }
  .hero .btn { min-height: 2.75rem; padding: .6rem 1rem; }
  .hero .alert { margin-top: .9rem; padding: .5rem .75rem; font-size: .9375rem; }
  .hero .hint { display: none; }
  /* se il titolo tocca comunque la tastiera o lo schermo scuro del 1998, un alone del colore del fondo lo tiene leggibile (come sul desktop) */
  .hero h1 { text-shadow: 0 0 .3em var(--halo), 0 0 .8em var(--halo); }

  /* dopo la storia: schede scure sopra la scena */
  .sec { padding: 40vh .75rem 3rem; }
  .post .services { padding: 0 1rem; }
  .post .sec > * { position: relative; }
  /* servizi: ogni voce occupa uno schermo; la scheda resta ferma in fondo mentre la camera e' ferma, cosi' l'oggetto 3D resta visibile sopra.
     home.js legge il top del li (dal 95% al 45% dello schermo): data-st e tempi non cambiano. */
  .svc li, .svc-head { min-height: 100svh; margin: 0; padding: 0; background: none; border-radius: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .svc li > .card, .svc-head > .card { display: block; position: sticky; bottom: .75rem; background: rgb(14 16 20 / .9); border-radius: 1rem; padding: 1.25rem 1.1rem; }
  /* le altre schede (trasloco, data, come, noi, contatti) sono sezioni intere */
  .post .sec:not(.services) { background: rgb(14 16 20 / .9); border-radius: 1rem; padding: 1.25rem 1.1rem; margin: 50vh 1rem 0; min-height: 0; justify-content: flex-start; transition: opacity .6s var(--ease); }
  /* la scheda ha il fondo suo: compare tutta insieme (dissolvenza di sola opacita'), altrimenti per l'ultimo 15% dello schermo si vede un riquadro scuro vuoto.
     Non si sposta: home.js legge il rettangolo delle sezioni con data-st per muovere la camera. I figli tengono la loro entrata dal basso. */
  .hj .post .sec:not(.services):not(.in) { opacity: 0; }
  /* dopo l'ultima voce dei servizi la scheda del caso segue subito: niente mezzo schermo nero col telefono fermo */
  .post .services + .sec { margin-top: 1rem; }
  /* tablet in verticale: schede da lettura, non a tutta larghezza */
  .svc li > .card, .svc-head > .card, .post .sec:not(.services) { max-width: 40rem; }
  .post .sec:last-of-type { margin-bottom: 8vh; }
  .ph-row { gap: .6rem; }

  /* uno scorrimento = una tappa (8 ott 2026, Noah: «va direttamente alla prossima sezione e io vedo lentamente animato le cose»). Ogni tappa e' una
     schermata e il telefono aggancia da se' (scroll-snap, fluido come una galleria; scroll-snap-stop: una spinta, una tappa); home.js guarda la pagina
     sullo schermo e la scena ci va piano. Storia: una pagina per sosta, due per passaggio (il secondo aggancio e' il segnaposto .pg2 di home.js).
     Servizi: una voce per schermata. Le schede dopo si agganciano al loro fondo (la scena sopra resta visibile); se sono piu' alte dello schermo si leggono scorrendo */
  html.hj { scroll-snap-type: y mandatory; }
  .hj .blk { position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
  .hj .blk.hold, .hj .blk.last, .hj .blk.hero { min-height: 100svh; }
  .hj .blk.tran { min-height: 200svh; }
  .pg2 { position: absolute; top: 100svh; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
  .hj .svc li, .hj .svc-head { scroll-snap-align: start; scroll-snap-stop: always; }
  .hj .post .sec:not(.services) { scroll-snap-align: end; }
  .hj .foot { scroll-snap-align: end; }
}
/* tablet in verticale: una colonna di lettura centrata sotto l'oggetto 3D, per la storia e per le schede (il telefono resta com'e': sotto i 600px non si applica) */
@media (orientation: portrait) and (min-width: 600px) {
  .blk { max-width: calc(40rem + 2.5rem); margin-inline: auto; }
  .svc li > .card, .svc-head > .card { width: 100%; margin-inline: auto; }
  .post .sec:not(.services) { margin-inline: max(1rem, (100% - 40rem) / 2); }
  .hero h1 { max-width: 20ch; }
  .step { max-width: 36ch; }
  .in-wrap { padding-bottom: max(2.25rem, 8vh); }
}
@media (max-width: 760px) and (max-height: 760px) {
  .hero .kicker { display: none; }
  .hero h1 { max-width: none; }                     /* 3 righe invece di 4 fra 360 e 390 px */
  .hero .in-wrap { padding-bottom: 1.25rem; }
}
/* telefoni molto bassi (iPhone SE con le barre del browser: ~550 px): senza l'avviso il titolo non finisce sul computer del 1998.
   La data del 12 gennaio 2027 si ripete subito dopo, nel blocco 2016 */
@media (max-width: 760px) and (max-height: 600px) {
  .hero .alert { display: none; }
}
/* telefoni bassi: il blocco "Oggi" e' alto e il titolo finirebbe sopra il computer; la frase si ripete subito dopo e il numero e' gia' nella barra */
@media (max-width: 760px) and (max-height: 740px) {
  #c2026 .close, #c2026 .tel-link { display: none; }
}
/* schede dei servizi sul telefono: la scheda ferma in fondo non deve coprire l'oggetto 3D di cui parla.
   Bordo alto della scheda (H - 12 - altezza) almeno ~40 px sotto il centro dell'oggetto (0.25 H). Testo un po' piu' piccolo, niente occhiello sulla testa (l'h2 dice gia' "In questo ufficio"). */
@media (max-width: 760px) {
  .svc-head .kicker { display: none; }
  .svc-head h2 { font-size: var(--t-h3); }
  .svc li p:not(.more-row):not(.proof), .svc-head p:not(.kicker):not(.more-row):not(.proof) { font-size: var(--t-base); line-height: 1.45; }
  .svc li > .card, .svc-head > .card { padding: 1rem; }
  .svc li .proof, .svc-head .proof { font-size: .9375rem; line-height: 1.4; margin-top: .75rem; }
  .svc-head p.more-row, .svc li p.more-row, .svc li .more, .svc-head .more { margin-top: .5rem; }
}
/* telefoni bassi (iPhone SE, Android piccoli): la scheda ferma in fondo e' alta quasi quanto lo schermo; testo un po' piu' piccolo, senza togliere le prove ne' i link */
@media (max-width: 760px) and (max-height: 640px) {
  .svc li p:not(.more-row):not(.proof), .svc-head p:not(.kicker):not(.more-row):not(.proof) { font-size: 1rem; line-height: 1.4; }
}
/* telefoni: in tedesco «Rufen Sie 091 220 06 29 an» e «Schreiben Sie uns» non stanno su una riga; il secondo bottone andava a capo e spingeva
   il titolo sopra il computer del 1998. Sul telefono il bottone dice solo il numero (il nome accessibile resta la frase intera, aria-label) */
@media (max-width: 480px) { .hero .cta-verb { display: none; } }
/* telefoni stretti: "Scriveteci" diventa un link, cosi' i due inviti stanno su una riga */
@media (max-width: 380px) {
  .hero .btn { font-size: .9375rem; padding-inline: .85rem; }
  .hero .btn-ghost { border-color: transparent; padding-inline: .4rem; text-decoration: underline; text-underline-offset: .25em; }
}

/* chi naviga con la tastiera: un blocco con il focus resta visibile anche mentre la dissolvenza lo spegne (home.js) */
.in-wrap:focus-within, .card:focus-within, .post .sec:not(.services):focus-within { opacity: 1 !important; pointer-events: auto !important; }

/* ---------- 7. movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .in-wrap > *, .sec > *, .post .sec:not(.services) { transition: none; }
  .hj .post .sec:not(.services):not(.in) { opacity: 1; }
  .poster { transition: none; }
  .hj .blk:not(.in) .in-wrap > *, .hj .sec:not(.in) > * { opacity: 1; transform: none; }
  .hj .blk.tran .sol { opacity: 1; transform: none; }
  .blk.tran.solved .step.prob { color: var(--fg); }
  .labels { display: none; }
}
/* movimento ridotto sul telefono: i due testi del passaggio non si sovrappongono, il cambio e' secco (non e' movimento) */
@media (prefers-reduced-motion: reduce) and (max-width: 760px), (prefers-reduced-motion: reduce) and (orientation: portrait) {
  .blk.tran .tag.prob, .blk.tran .step.prob, .blk.tran .sol { transition: none; }
  .hj .blk.tran:not(.solved) .sol { opacity: 0; }
  .hj .blk.tran.solved .tag.prob, .hj .blk.tran.solved .step.prob { opacity: 0; }
}

/* ---------- 8. home.js non e' partito (JS spento, browser senza moduli, errore): pagina ferma e leggibile ----------
   Si lega a .hj e non a .js: .js lo mette gia' shell.js, anche quando home.js non gira. */
html:not(.hj) #world, html:not(.hj) .labels, html:not(.hj) .year { display: none; }
html:not(.hj) .post { background: #14171C; }
html:not(.hj) .post .btn-primary { background: var(--cyan); color: var(--ink); }