@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════
   STUDIO LE FOTOGRAFE — Home / bozza
   Display : Italiana (dal 20 settembre è l'unico: niente più selettore)
   Grotesk : Supreme      (ITF, Fontshare)
   Nessuna dipendenza esterna, nessun framework.

   NOTA — 6 settembre 2026: questo file è stato ricostruito dopo che
   un mio comando sbagliato lo aveva troncato a zero byte. Le regole
   sono state recuperate integre dal CSSOM di una scheda ancora
   aperta; i commenti, che il CSSOM non conserva, sono riscritti a
   mano. Due dichiarazioni erano uscite corrotte dal recupero — lo
   sfondo di .slot__box e la transizione delle celle — e sono state
   ripristinate. Verificato che il reso sia identico a prima.
   ═══════════════════════════════════════════════════════════════ */
@font-face { font-family: Boska; src: url("../fonts/boska-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: Boska; src: url("../fonts/boska-200i.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: Boska; src: url("../fonts/boska-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Boska; src: url("../fonts/boska-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: Boska; src: url("../fonts/boska-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Boska; src: url("../fonts/boska-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Italiana; src: url("../fonts/italiana-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: BodoniModa; src: url("../fonts/bodonimoda-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Supreme; src: url("../fonts/supreme-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Supreme; src: url("../fonts/supreme-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Supreme; src: url("../fonts/supreme-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ── Tokens ────────────────────────────────────────────────────
   LA SCALA TIPOGRAFICA — quattro gradini, ognuno riconoscibile per
   quattro segnali insieme: corpo, famiglia, colore, spaziatura.
   È la lezione della call: «il titolo si capisce che è un titolo,
   il sottotitolo pesa più della descrizione, e la descrizione la
   leggi comunque». A 1500 px: 72 / 30 / 16 / 21 px.
   --t-title-xl e --t-sub-xl sono un'eccezione dichiarata, valida
   solo per il manifesto: nessun'altra sezione può usarli.       */
:root { --paper: #FAF8F5; --paper-rgb: 250,248,245; --paper-2: #F2EFE9; --slot: #ECE7DF; --slot-2: #E6E0D7; --ink: #16130F; --ink-70: #4B453C; --ink-45: #847A6C; --ink-25: #B3AA9C; --rule: rgba(22,19,15,.13); --rule-soft: rgba(22,19,15,.07); --accent: #8C5F58; --errore: #9E3024; /* Il logotipo è deciso: Italiana, sempre, in tutto il sito. Ha una variabile
   sua, con le sue correzioni ottiche: senza, il marchio resterebbe in Italiana
   ma disegnato col peso e la spaziatura di un altro carattere.
   Dal 20 settembre il display è Italiana e basta: il selettore della bozza non
   c'è più, e con lui sono spariti Melodrama e Tenor Sans (regole, @font-face e
   file). Il corsivo dei richiami resta Boska. */
  --marchio: 'Italiana',"Times New Roman",Times,serif; --marchio-w: 400; --marchio-ls: -.005em;
  --serif: 'Italiana',"Times New Roman",Times,serif; --serif-it: 'Boska',"Times New Roman",Times,serif; --sans: 'Supreme',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --w-mark: 400; --w-display: 400; --w-it: 300; --fs-display: 1.04; --fs-it: 1; --ls-display: -.005em; --t-title: calc(clamp(2.15rem,4.6vw,4.6rem) * var(--fs-display)); --t-sub: calc(clamp(1.3rem,1.95vw,1.95rem) * var(--fs-display)); --t-body: clamp(15px,1.06vw,16.5px); --t-micro: 10px; --t-fig: calc(clamp(1.05rem,1.35vw,1.4rem) * var(--fs-display)); --t-title-xl: calc(clamp(2.4rem,6vw,6rem) * var(--fs-display)); --t-sub-xl: calc(clamp(1.4rem,2.2vw,2.25rem) * var(--fs-display)); --pad: clamp(20px,4.4vw,72px); --gap-s: clamp(40px,5.2vw,74px); --gap-m: clamp(72px,9vw,132px); --gap-l: clamp(96px,12vw,180px); --ease: cubic-bezier(.16,1,.3,1); }
*, ::before, ::after { box-sizing: border-box; }
html { text-size-adjust: 100%; }
body { margin: 0px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.72; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0px; padding: 0px; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0px; padding: 0px; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }
.wrap { padding-inline: var(--pad); max-width: 1680px; margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 0.85em; font-family: var(--sans); font-weight: 400; font-size: var(--t-micro); line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-45); }
.eyebrow b { font-weight: 400; color: var(--ink-25); font-variant-numeric: tabular-nums; letter-spacing: 0.18em; }
.eyebrow b::after { content: ""; display: inline-block; width: clamp(24px, 3vw, 44px); height: 1px; background: var(--rule); vertical-align: middle; margin-left: 0.85em; }

/* ── Gradini tipografici ───────────────────────────────────────
   1 titolo · 2 sottotitolo (stessa famiglia e stesso colore del
   titolo: la distanza la fa il corpo) · 3 descrizione (cambia
   famiglia e colore, così non compete con i due sopra).
   .prose non è più usata in home — il racconto lungo è passato
   alla pagina About — ma resta per le sottopagine.             */
.display { font-family: var(--serif); font-weight: var(--w-display); font-size: var(--t-title); line-height: 1; letter-spacing: var(--ls-display); text-wrap: balance; }
.lead { font-family: var(--serif); font-weight: var(--w-display); font-size: var(--t-sub); line-height: 1.26; letter-spacing: var(--ls-display); max-width: 26ch; }
.prose { font-size: var(--t-body); line-height: 1.72; color: var(--ink-70); max-width: 52ch; }
.prose p + p { margin-top: 1.3em; }
/* Home tutta in Italiana (Federico, 18 settembre): le parti che erano nel corsivo
   Boska ora sono Italiana dritta. Italiana non ha il corsivo. Mockup:
   mockup/home-italiana.html. */
.display em { font-family: var(--serif); font-style: normal; font-weight: var(--w-display); }
.cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75em; margin-top: 1.1rem; }
.cap em { font-family: var(--serif); font-style: normal; font-weight: var(--w-display); font-size: clamp(15px, 1.3vw, 19px); }
.cap span { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-45); font-weight: 400; }
/* ═══ IL RIMANDO ═══════════════════════════════════════════
   Un solo modo di mandare a un'altra pagina. Il rimando dell'About
   aveva il filetto sotto E il trattino di fianco — due segnali per la
   stessa cosa — mentre gli altri due del sito, agli Extra service e in
   fondo alla pagina Extra service, avevano solo il trattino. Ora sono
   la stessa identica cosa e stanno in una regola sola, così non
   possono più divergere. Le tre varianti --small, --ghost e --inv sono
   state tolte: nessuna era usata da quando la chiusura è passata a
   .close__cta. */
.btn, .svc__x-go, .xs__fine-a { display: inline-flex; align-items: center; gap: 0.9em; font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; transition: color .45s var(--ease); }
.btn i, .svc__x-go i, .xs__fine-a i { display: block; width: clamp(28px,3vw,52px); height: 1px; background: var(--ink); flex: 0 0 auto; transition: width .5s var(--ease), background .4s; }
.btn:hover, .svc__x-go:hover, .xs__fine-a:hover { color: var(--accent); }
.btn:hover i, .svc__x-go:hover i, .xs__fine-a:hover i { width: clamp(40px,4.4vw,74px); background: var(--accent); }
.slot__box { position: relative; width: 100%; aspect-ratio: var(--ar,4/5); background: var(--slot); background-image: radial-gradient(120% 90% at 50% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); overflow: hidden; }
.slot__box::after { content: ""; position: absolute; inset: 0px; pointer-events: none; box-shadow: rgba(22, 19, 15, 0.043) 0px 0px 0px 1px inset; }
/* La fotografia riempie lo spazio, che resta la sua cornice e il suo fondo
   mentre carica. object-fit: cover non taglia niente qui, perché i file sono
   già 4:5 come la cornice: è una rete di sicurezza, non un ritaglio. */
.slot__box img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.slot__meta { position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.95em; font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-25); font-weight: 400; text-align: center; padding: 12px; opacity: 0; transition: opacity .45s var(--ease); }
.slot__meta i { display: block; width: 22px; height: 1px; background: currentcolor; opacity: 0.55; }
.slot__meta b { font-weight: 400; color: var(--ink-45); }
/* Le etichette degli spazi immagine — proporzione e numero — restano
   nel markup ma sono spente: il pulsante che le accendeva è stato tolto.
   Per riaccenderle tutte basta aggiungere la classe show-notes al body. */
body.show-notes .slot__meta { opacity: 1; }
body.show-notes .slot__box::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(22, 19, 15, 0.086); }
.grid .cell:nth-child(3n+2) .slot__box { background-color: var(--slot-2); }
.grid .cell:nth-child(4n+3) .slot__box { background-color: rgb(225, 219, 208); }
.intro { position: fixed; inset: 0px; z-index: 100; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 32px); transition: opacity 1s var(--ease),visibility 1s; }
.intro__mark { width: min(84vw, 1180px); }
.intro__mark svg { width: 100%; height: auto; }
.intro__mark text { font-family: var(--marchio); font-weight: var(--marchio-w); font-size: 112px; fill: var(--ink); }
.intro__sub { font-size: 9.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-45); }
.intro__bar { width: min(220px, 40vw); height: 1px; background: var(--rule); overflow: hidden; }
.intro__bar i { display: block; height: 100%; width: 0px; background: var(--ink); transition: width 1.5s var(--ease); }
body.intro-run .intro__bar i { width: 100%; }
body.intro-done .intro { opacity: 0; visibility: hidden; pointer-events: none; }
.hdr { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 70; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 2vw, 30px); padding: clamp(15px,1.9vw,26.5px) var(--pad); }
/* Il marchio in testata è passato da una riga a due e cresce di 7 px. Il padding
   scende da 30 a 26.5 per compensarli: misurato, la testata torna a 91 px e EN/IT
   e Menu restano entro mezzo pixel da dov'erano. */
.hdr__side { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.hdr__side--r { justify-content: flex-end; }
/* Il velo è solo decorazione e scende 58 px sotto la testata: pointer-events: none
   perché non si prenda i clic di ciò che ci sta sotto (lo faceva con «← Stories»). */
.hdr::after { content: ""; position: absolute; inset: 0px 0px -58px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(var(--paper-rgb), 0.7) 0%, rgba(var(--paper-rgb), 0.56) 30%, rgba(var(--paper-rgb), 0.28) 62%, rgba(var(--paper-rgb), 0) 100%); opacity: 0; transition: opacity .6s var(--ease); }
body.landed .hdr::after { opacity: 1; }
.hdr__mark { justify-self: center; text-align: center; line-height: 1.42; font-family: var(--marchio); font-weight: var(--marchio-w); font-size: clamp(14px, 1.25vw, 18px); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; opacity: var(--nav-o,0); pointer-events: none; }
/* La spaziatura lascia sempre un vuoto dopo l'ultima lettera: su testo centrato
   l'inchiostro finisce mezzo spazio a sinistra dell'asse. Il text-indent pari alla
   spaziatura lo rimette in asse, e allinea le due righe fra loro. */
.hdr__mark-s, .hdr__mark-n { display: block; }
.hdr__mark-s { font-size: max(7.6px, 0.49em); letter-spacing: 0.34em; text-indent: 0.34em; }
.hdr__mark-n { text-indent: 0.18em; }
body.landed .hdr__mark { pointer-events: auto; }
html:not(.js) .hdr__mark { opacity: 1; pointer-events: auto; }
/* LA TESTATA SUL TELEFONO (variante D di mockup/telefono-testata.html, Federico,
   21 settembre). Sul telefono le foto arrivano ai bordi e passano sotto la
   testata: con il testo scuro, sopra una foto scura, logotipo e MENU sparivano.
   Qui niente velo e niente fascia: le scritte sono bianche e si «sottraggono»
   a quello che c'è sotto (mix-blend-mode: difference), quindi diventano quasi
   nere sulla carta e chiare sulle foto scure, da sole. Sulle foto a metà tono
   prendono un colore intermedio: è il prezzo, accettato. Sul computer niente
   cambia. La lingua non attiva resta più tenue, al 50%. */
@media (max-width: 899px) {
  .hdr { mix-blend-mode: difference; color: #fff; }
  .hdr::after { display: none; }
  .hdr__mark, .burger { color: #fff; }
  /* con .hdr davanti, perché le regole della lingua stanno più avanti nel file */
  .hdr .lang__btn, .hdr .lang__sep { color: rgba(255,255,255,.5); }
  .hdr .lang__btn.is-on, .hdr .lang__btn:hover { color: #fff; }
}
.lang { display: flex; align-items: center; gap: 0.5em; font-size: 9.5px; letter-spacing: 0.2em; }
.lang__btn { color: var(--ink-25); transition: color 0.35s; }
.lang__btn.is-on { color: var(--ink); }
.lang__btn:hover { color: var(--ink); }
.lang__sep { color: var(--ink-25); }
.burger { display: flex; align-items: center; gap: 0.85em; }
.burger__label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; }
.burger__lines { display: block; width: 22px; }
.burger__lines i { display: block; height: 1px; background: currentcolor; transition: transform .5s var(--ease),opacity .35s; }
.burger__lines i:first-child { margin-bottom: 5px; }
body.nav-open .burger__lines i:first-child { transform: translateY(3px) rotate(11deg); }
body.nav-open .burger__lines i:last-child { transform: translateY(-3px) rotate(-11deg); }
.nav { position: fixed; inset: 0px; z-index: 65; background: var(--paper); opacity: 0; visibility: hidden; transition: opacity .7s var(--ease),visibility .7s; }
.nav[hidden] { display: block; }
body.nav-open .nav { opacity: 1; visibility: visible; }
.nav__inner { height: 100%; padding: clamp(96px,14vh,180px) var(--pad) clamp(28px,4vh,48px); display: flex; flex-direction: column; }
/* L'aria che alza il blocco (9 settembre: partiva troppo in basso). Non è padding
   fisso ma uno spazio elastico: flex-shrink 1 su base 12vh, mentre la riga non si
   restringe. Su finestre basse cede tutto lui e il menu non finisce sotto la
   testata, che è alta 91 px e resta cliccabile anche da trasparente. */
.nav__row { flex: 1 0 auto; }
.nav__inner::after { content: ""; flex: 0 1 12vh; }
/* Le due colonne del menu. align-items:flex-end fa appoggiare i contatti sulla
   base dell'ultima voce: le colonne si chiudono insieme in basso. */
/* align-items: flex-end allinea il FONDO DELLE SCATOLE, e le due colonne hanno
   interlinea e corpo diversi: misurato, la base di «Instagram» cadeva 6 px sotto
   quella di «Contact». «last baseline» allinea le ultime linee di base davvero.
   flex-end resta prima come ripiego per i browser che non lo conoscono: senza,
   il valore non valido farebbe ricadere su stretch e la colonna si sfascerebbe. */
.nav__row { display: flex; gap: clamp(30px, 5vw, 90px); align-items: flex-end; align-items: last baseline; }
.nav__row .nav__list { flex: 1; }
.nav__list { display: flex; flex-direction: column; gap: clamp(2px, 0.6vh, 10px); }
/* Il corpo guarda anche l'altezza: con cinque voci, su una finestra larga ma bassa
   il menu non ci stava e i contatti finivano fuori schermo. min(7.4vw,11vh) tiene
   99.2px a 1500x900 come prima e rimpicciolisce solo quando manca l'altezza. */
.nav__list a { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 38px); font-family: var(--serif); font-weight: var(--w-display); font-size: clamp(2.2rem, min(7.4vw, 11vh), 6.2rem); line-height: 1.08; letter-spacing: var(--ls-display); opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease),transform .7s var(--ease),color .4s; }
body.nav-open .nav__list a { opacity: 1; transform: none; }
.nav__list li:nth-child(1) a { transition-delay: 0.1s; }
.nav__list li:nth-child(2) a { transition-delay: 0.16s; }
.nav__list li:nth-child(3) a { transition-delay: 0.22s; }
.nav__list li:nth-child(4) a { transition-delay: 0.28s; }
.nav__list li:nth-child(5) a { transition-delay: 0.34s; }
.nav__list a em { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 10px; letter-spacing: 0.26em; color: var(--ink-25); }
.nav__list a:hover { color: var(--accent); }
/* I contatti: stesso carattere delle voci, un terzo del corpo. Senza occhielli,
   che erano la ragione per cui quel blocco leggeva come un footer. */
.nav__side { display: flex; flex-direction: column; gap: 0.3em; text-align: right; padding-bottom: 0.1em; font-family: var(--serif); font-weight: var(--w-display); font-size: clamp(1.6rem,2.6vw,2.6rem); line-height: 1.16; letter-spacing: var(--ls-display); white-space: nowrap; }
.nav__side a { display: block; opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease), color .4s; }
body.nav-open .nav__side a { opacity: 1; transform: none; }
.nav__side a:nth-child(1) { transition-delay: 0.40s; }
.nav__side a:nth-child(2) { transition-delay: 0.45s; }
.nav__side a:hover { color: var(--accent); }
/* .nav__side-tel: nel menu il telefono non c'è più, deciso dallo studio
   l'11 settembre. Resta solo nel colophon. */
/* Il glifo appoggia sulla linea di base come una lettera: alto 0.7em quanto la
   maiuscola, il suo bordo inferiore sulla base e la cima all'altezza delle capitali.
   Serve anche perché la riga esponga la base del testo e non quella dell'icona. */
.nav__side a.nav__side-ig { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.3em; }
/* Il glifo è un <svg> dentro il markup, non una maschera: le maschere non si caricano
   quando la pagina è aperta col doppio clic. L'originale resta in img/icone/. */
.ico-ig { flex: none; display: block; width: 0.7em; height: 0.7em; fill: currentColor; }
html:not(.js) .nav__side a { opacity: 1; transform: none; }
/* Alzato di 25 px il 9 settembre: con «STUDIO» il blocco è cresciuto di 66 px e
   il marchio si era staccato dalla testata. L'aria fra EN/IT e l'inchiostro di
   «STUDIO» passa da 93 a 68 px. Sotto i ~50 il marchio entrerebbe nella zona
   cliccabile della testata, alta 91 px anche da trasparente. */
.hero { padding: clamp(74px,10.4vh,120px) var(--pad) clamp(44px,7vh,96px); position: relative; }
.hero__mark { width: 100%; }
.hero__mark svg { opacity: var(--diss,1); }
.hero__mark svg { width: 100%; height: auto; }
.hero__mark text { font-family: var(--marchio); font-weight: var(--marchio-w); font-size: 112px; fill: var(--ink); }
.masthead { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 38px); margin-top: clamp(22px, 3.2vw, 44px); font-family: var(--sans); font-weight: 400; font-size: clamp(9.5px, 0.7vw, 11px); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-45); }
.masthead__rail { flex: 1 1 auto; min-width: 20px; height: 1px; background: var(--rule); opacity: var(--diss,1); }
.masthead__txt { opacity: var(--diss,1); flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0px 1.15em; text-align: center; }
.masthead__txt b { font-weight: 400; color: var(--ink-25); }

/* ═══════════════════════════════════════════════════════════
   MANIFESTO — «Chi siamo»
   Il racconto lungo è stato spostato nella pagina About: qui
   restano titolo, sommario, dati e rimando. Il testo in meno non
   accorcia la sezione — l'altezza la detta la fotografia — ma le
   dà aria, e libera il corpo per il gradino d'apertura.
   Niente padding sotto: le tre parole sono la chiusura di questo
   discorso, non un capitolo nuovo.
   ═══════════════════════════════════════════════════════════ */
.manifesto { padding-block: var(--gap-m) 0; --t-title: var(--t-title-xl); --t-sub: var(--t-sub-xl); }
.manifesto__g { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3.6vw, 58px); }
.manifesto .display { margin-top: 0px; }
.manifesto .lead { margin-top: 0.9em; max-width: 30ch; }
.manifesto .facts { margin-top: clamp(30px, 4vw, 60px); }
.manifesto__go { margin-top: clamp(22px, 2.8vw, 36px); }

/* Il ritratto: la cornice sta ferma, la fotografia dentro scorre
   più lenta della pagina. Lo spazio di manovra non è aggiunto: è la
   differenza fra la proporzione della cornice (4:5) e quella dello
   scatto (3:4), il 7,1%. A metà corsa il ritaglio è simmetrico, e a
   metà corsa è quando la si guarda.                            */
.portrait__frame { position: relative; width: 100%; aspect-ratio: var(--ar,4/5); overflow: hidden; background: var(--slot); }
.portrait__in { position: absolute; left: 0px; right: 0px; top: 0px; will-change: transform; }
.portrait__in img { display: block; width: 100%; height: auto; }
.portrait .cap { margin-top: 1rem; }

/* Gradino 4 — i dati: numero in display, etichetta in maiuscoletto.
   Due gradini dentro la stessa riga, non una fascia di statistiche. */
.facts { display: flex; flex-wrap: wrap; gap: 12px clamp(26px, 3vw, 52px); margin-top: clamp(26px, 3.4vw, 48px); padding-top: clamp(14px, 1.8vw, 22px); border-top: 1px solid var(--rule); }
.facts li { display: flex; align-items: baseline; gap: 0.7em; }
.facts b { font-family: var(--serif); font-weight: var(--w-display); font-size: var(--t-fig); line-height: 1; letter-spacing: var(--ls-display); }
.facts span { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-45); }
.work { padding-bottom: var(--gap-s); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; }
.grid[data-reveal] { opacity: 1; transform: none; }
.cell { position: relative; overflow: hidden; cursor: pointer; }
body.js .grid .cell { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i,0) * .055s); }
body.js .grid.is-in .cell { opacity: 1; transform: none; }
/* Nel portfolio le celle sono 39: accendere la griglia intera vorrebbe dire
   animare le ultime righe fuori dallo schermo. Lì ogni cella porta il suo
   data-reveal e si accende quando entra in vista, con --i che ricomincia da 1
   a ogni riga: la stessa cascata della prima riga della home, riga per riga.
   La specificità deve superare body.js .grid .cell, altrimenti vince l'opacità 0.
   In home le celle non hanno data-reveal, quindi questa regola non le tocca. */
body.js .grid .cell.is-in { opacity: 1; transform: none; }
/* La decima foto della home esiste solo dove la griglia ha due colonne, sotto
   i 900 px: lì con nove foto l'ultima restava sola. Sul computer le colonne sono
   tre e nove fanno righe piene, quindi la decima non c'è (22 settembre). */
@media (min-width: 901px) { .grid .cell--telefono { display: none; } }
.cell .slot__box { transition: transform 1.2s var(--ease),filter 1.2s var(--ease); }
.cell:hover .slot__box { transform: scale(1.035); }
.cell figcaption { position: absolute; left: 0px; right: 0px; bottom: 0px; display: flex; flex-direction: column; gap: 0.45em; padding: clamp(14px, 1.8vw, 28px); background: linear-gradient(to top, rgba(22, 19, 15, 0.42), rgba(22, 19, 15, 0)); color: var(--paper); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease),transform .6s var(--ease); }
.cell:hover figcaption { opacity: 1; transform: none; }
/* i nomi sulle foto, nella home e nel Portfolio: Italiana dritta (18 settembre) */
.cell figcaption em { font-family: var(--serif); font-style: normal; font-weight: var(--w-display); font-size: clamp(15px, 1.3vw, 20px); }
.cell figcaption span { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.82; }
/* La location è in pezzi (luogo, regione): sul computer restano su una riga con
   il puntino in mezzo, che qui è disegnato dal CSS e non scritto nel testo.
   Sul telefono i pezzi vanno a capo uno per riga e il puntino sparisce, invece
   di restare appeso in fondo alla prima riga (fase telefono, 21 settembre). */
/* Il pulsante che copre la cella esiste solo sul telefono (vedi il blocco dei
   560 px): sul computer la didascalia si accende col passaggio del mouse e un
   pulsante invisibile sarebbe solo una tappa in più per chi va di tastiera. */
.cell__tocco { display: none; position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; }
.cell figcaption span b { font-weight: inherit; }
.cell figcaption span b + b::before { content: "·"; margin: 0 0.5em; }
/* I due filetti si ritirano verso l'esterno al passaggio del mouse.
   Prima lo faceva il «gap» del contenitore: ma il gap è impaginato, quindi a
   ogni fotogramma il browser doveva ricalcolare la larghezza dei due filetti
   flessibili, e il movimento veniva a scatti. Ora il gap è fisso e a muoversi
   è una scala orizzontale, che è composita: l'origine sta sul bordo esterno,
   così il capo interno si allontana dal testo e lo spazio intorno si apre
   come prima, ma fluido. */
.work__close { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 38px); margin-top: clamp(38px, 5.5vw, 76px); }
.work__rail { flex: 1 1 auto; min-width: 20px; height: 1px; background: var(--rule); transform: scaleX(1); transition: transform .6s var(--ease), background-color .5s var(--ease); }
.work__rail:first-child { transform-origin: left center; }
.work__rail:last-child { transform-origin: right center; }
.work__close:hover .work__rail:first-child, .work__close:hover .work__rail:last-child { transform: scaleX(.972); }
@media (prefers-reduced-motion: reduce) { .work__rail { transition: background-color .5s var(--ease); } .work__close:hover .work__rail { transform: none; } }
.work__go { flex: 0 1 auto; text-align: center; font-family: var(--sans); font-weight: 400; font-size: clamp(9.5px, 0.7vw, 11px); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-45); transition: color .45s var(--ease); }
.work__close:hover .work__go { color: var(--ink); }
.work__close:hover .work__rail { background-color: var(--ink-25); }

/* ═══════════════════════════════════════════════════════════
   STORIES — rail orizzontale
   Tolta dalla home il 5 settembre: le storie avranno una pagina
   loro. Lo stile resta qui, pronto, insieme al modulo rail() in
   main.js.
   ═══════════════════════════════════════════════════════════ */
.stories { padding-block: var(--gap-s) var(--gap-m); background: var(--paper-2); }
.stories__head .display { margin-top: clamp(20px, 3vw, 40px); }
.stories__head .display em { display: block; }
.stories__hint { display: flex; align-items: center; gap: 0.9em; margin-top: clamp(22px, 3vw, 40px); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-45); }
.stories__hint i { display: block; width: 44px; height: 1px; background: var(--rule); position: relative; }
.stories__hint i::after { content: ""; position: absolute; right: 0px; top: -2px; width: 5px; height: 5px; border-top: 1px solid var(--ink-25); border-right: 1px solid var(--ink-25); transform: rotate(45deg); }
.rail { margin-top: clamp(40px, 6vw, 80px); overflow: auto hidden; scrollbar-width: none; cursor: grab; outline: none; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; }
.rail__track { display: flex; align-items: flex-start; gap: clamp(18px, 2.6vw, 44px); padding-inline: var(--pad); width: max-content; }
.story { width: clamp(230px, 25vw, 340px); flex: 0 0 auto; }
.story .slot__box { transition: filter .9s var(--ease); }
.story__cap { margin-top: 1.15rem; }
.story__no { display: block; font-size: 9px; letter-spacing: 0.28em; color: var(--ink-25); margin-bottom: 0.7em; }
.story__t { font-family: var(--serif); font-weight: var(--w-display); font-size: clamp(1.25rem, 1.9vw, 1.85rem); line-height: 1.12; letter-spacing: var(--ls-display); }
.story__m { margin-top: 0.6em; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-45); }
.story__m em { font-family: var(--serif-it); font-style: italic; font-size: 14px; letter-spacing: 0px; text-transform: none; color: var(--ink-70); }
.rail__end { flex: 0 0 auto; align-self: center; padding-inline: clamp(20px,4vw,70px) var(--pad); }
.sisters { padding-block: var(--gap-m); }
.sisters__grid { display: grid; grid-template-columns: 1fr; gap: clamp(46px, 6vw, 80px); margin-top: clamp(40px, 6vw, 80px); }
.sister { max-width: 400px; }
.sister__q { margin-top: 1.3rem; }
.sister__q p { font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.28; }
.sister__q cite { display: block; margin-top: 0.95em; font-style: normal; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-45); }
.sisters__text { max-width: 52ch; align-self: end; }
.dropcap { color: var(--ink-70); }
.dropcap::first-letter { float: left; font-family: var(--serif); font-weight: var(--w-display); font-size: 4.1em; line-height: 0.82; padding-right: 0.09em; margin-top: 0.06em; color: var(--ink); }
.sisters__text .btn { margin-top: 2.2rem; }

/* .sisters e .values non sono più in uso: la pagina About è stata
   archiviata in docs/archivio/. Le regole restano pronte per quando la
   ricostruiremo. */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: clamp(64px, 9vw, 130px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--rule); }
.values b { display: block; font-family: var(--serif); font-weight: var(--w-display); font-size: clamp(1.5rem, 2.2vw, 2.1rem); letter-spacing: var(--ls-display); }
.values span { display: block; margin-top: 0.9em; font-size: 13.5px; line-height: 1.65; color: var(--ink-70); }

/* ═══════════════════════════════════════════════════════════
   SERVIZI — tre lastre
   Nessun occhiello in testa e nessun numero: i nomi dicono già cos'è
   la sezione. Dal 10 settembre i servizi in home sono DUE e pesano
   uguale: la gerarchia fra loro non serve, quella fra i due livelli
   la dice il filetto più sotto. Le lastre restano della misura che
   avevano quando erano tre, 368 px, così fotografia + titolo +
   descrizione entrano in una schermata, e la coppia sta al centro.
   ═══════════════════════════════════════════════════════════ */
/* Nessun fondo: sotto c'è la frase, e lo stacco lo mette lei da sola.
   Sommando i due la frase aveva 283 px sopra e 144 sotto — sbilanciata
   di 139 px, e sembrava staccata dai servizi invece che centrata. */
/* --card e --sep stanno qui e non su .svc perché il filetto degli extra deve essere
   largo esattamente quanto la coppia, e .svc__x è un fratello di .svc, non un figlio. */
.services { padding-block: 0; --card: clamp(260px, 24.5vw, 368px); --sep: clamp(40px, 4.6vw, 72px); }
.svc { margin-top: 0px; display: flex; flex-direction: column; align-items: center; gap: clamp(34px, 4vw, 64px); }
.svc__i { display: flex; width: 100%; max-width: 460px; }
.svc__l { display: flex; flex-direction: column; flex: 1 1 0%; }

/* Niente pulsante: il titolo è il link, come in una rivista, e tutta
   la colonna è cliccabile. Al passaggio un filetto si tira sotto il
   nome, da sinistra. align-self:flex-start perché il filetto sia
   largo quanto il testo e non quanto la colonna.                */
.svc__t { align-self: flex-start; position: relative; margin-top: clamp(20px, 2vw, 30px); font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.5rem,2.5vw,2.5rem) * var(--fs-display)); line-height: 1.05; letter-spacing: var(--ls-display); }
.svc__t::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: -0.14em; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease); }
.svc__l:hover .svc__t::after, .svc__l:focus-visible .svc__t::after { transform: scaleX(1); }
@media (hover: none){
  .svc__t::after { transform: scaleX(1); background: var(--rule); }
}

/* La misura resta di 34 caratteri: la card è larga 368 px e non la stringe. */
.svc__d { margin-top: 0.7em; max-width: 34ch; color: var(--ink-70); font-size: var(--t-body); line-height: 1.7; }
.svc__d { margin-bottom: auto; }
.svc__l .slot__box { transition: filter .6s var(--ease); }
.svc__l .slot__box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc__l:hover .slot__box { filter: brightness(0.965); }
/* Il secondo livello. Il filetto NON attraversa la pagina: è largo esattamente quanto la
   coppia di card, e sotto gli 820 px quanto la card sola. A tutta larghezza tagliava la
   sezione in due e lasciava il rimando orfano fra i servizi e la frase che segue; largo
   quanto le card delimita il blocco dei servizi e il rimando resta agganciato a loro.
   Misurato prima del cambio: 92 px dalle card contro 135 dalla frase, quindi la distanza
   era già giusta, era il filetto a dire la cosa sbagliata. */
.svc__x { width: min(100%, 460px); margin: clamp(30px,3.4vw,52px) auto 0; padding-top: clamp(24px,2.8vw,40px); border-top: 1px solid var(--rule); display: flex; justify-content: center; }
/* .svc__x-go: aspetto e passaggio stanno nella regola del RIMANDO, in cima. */
@media (min-width: 820px){
  .svc { flex-direction: row; justify-content: center; align-items: stretch; gap: var(--sep); }
  .svc__i { flex: 0 0 var(--card); width: auto; max-width: none; }
  .svc__x { width: calc(var(--card) * 2 + var(--sep)); }
}
/* ═══════════════════════════════════════════════════════════
   DOVE
   Una frase sola, centrata, invece dell'elenco di città. Le parole
   si accendono una dopo l'altra con lo scorrimento: l'opacità e non
   il colore, perché la parola non ancora raggiunta deve tendere al
   colore della carta e non a un grigio scelto — così regge anche se
   un domani la sezione finisce su un fondo diverso.
   ═══════════════════════════════════════════════════════════ */
/* Simmetrico: sopra e sotto la stessa misura, così la frase sta al
   centro del proprio spazio. In vw come tutto il resto del sito, non in
   vh: altrimenti dipenderebbe dall'altezza della finestra. */
.where { padding-block: clamp(70px,9vw,140px); }
.where__q {
  margin-inline: auto; text-align: center; text-wrap: balance;
  font-family: var(--serif); font-weight: var(--w-display);
  font-size: calc(clamp(1.5rem,3.2vw,3.2rem) * var(--fs-display));
  line-height: 1.24; letter-spacing: var(--ls-display);
  max-width: 22ch;
}
.where__q em { font-family: var(--serif); font-style: normal; font-weight: var(--w-display); }
/* Ogni parola è una scatola a sé. Fra due inline-block l'a-capo è
   permesso, quindi la punteggiatura attaccata a una parola dentro <b>
   finirebbe sola a inizio riga: le coppie vengono avvolte in un
   contenitore nowrap dal JavaScript. */
.where__w { display: inline-block; opacity: var(--o,1); }
html:not(.js) .where__w { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .where__w { opacity: 1 !important; } }

/* ═══════════════════════════════════════════════════════════
   LA FASCIA — dove ci hanno pubblicate
   Il DOVE e la chiusura erano due affermazioni identiche di forma:
   stesso carattere, stesso allineamento, stesso inchiostro, stessa
   carta, 0 px di distanza. Questa banda le separa e resta bassa, così
   fa da respiro e non da terza affermazione. È anche l'unico punto
   della home in cui parla qualcuno che non è lo studio.

   Era una striscia che scorreva all'infinito: aveva senso con dieci
   testate, con una sola sarebbe stata ridicola. Ferma e impilata,
   deciso l'11 settembre. E impilata centrata, non in riga: la riga
   orizzontale era un residuo del movimento, mentre tutto ciò che sta
   sopra e sotto a questa fascia è centrato.

   ⚠︎ «ELLE SPOSE» è composto in tipografia, NON è il logo. Il marchio
   ELLE è registrato e va chiesto in redazione: quando arriva l'SVG
   prende il posto di .press__n senza toccare altro.
   ⚠︎ Delle tre annate solo il 2026 è una selezione redazionale; 2023
   e 2024 sono pagine acquistate. Per questo l'occhiello dice «ci hanno
   pubblicate» e non «premiate».

   Tre gradini di gerarchia: occhiello leggero, annate con più corpo,
   nome sopra tutti. Le annate NON sono nel serif, ed è una prova
   fallita e non un'omissione: Italiana ha un contrasto da display e a
   16 px i filetti scendono sotto il pixel, le cifre si spezzano e si
   sbiadiscono. Supreme a 11 px regge.
   ═══════════════════════════════════════════════════════════ */
.press { padding-block: clamp(26px, 3vw, 40px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.press__k { display: block; text-align: center; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-45); margin-bottom: clamp(11px, 1.3vw, 15px); }
.press__pila { text-align: center; }
.press__n { display: block; font-family: var(--serif); font-weight: var(--w-mark); font-size: calc(clamp(1.05rem,1.7vw,1.7rem) * var(--fs-display)); line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.press__a { display: flex; align-items: center; justify-content: center; gap: clamp(9px, 1.1vw, 16px); margin-top: clamp(10px, 1.2vw, 15px); }
.press__a span { font-size: 11px; line-height: 1; letter-spacing: 0.2em; color: var(--ink-70); }
.press__a i { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--ink-25); flex: 0 0 auto; }
/* La spaziatura in coda all'ultima lettera è larghezza senza inchiostro: una
   riga centrata e spaziata si posa mezzo carattere a sinistra del centro
   ottico. Il rimedio è esattamente −1 × la spaziatura, che sposta il testo
   di metà. Misurato dopo: 0.00 px di scarto su tutte e tre le righe. */
.press__k { margin-right: -0.3em; }
.press__n { margin-right: -0.12em; }
.press__a span:last-child { margin-right: -0.2em; }

/* ═══════════════════════════════════════════════════════════
   CHIUSURA E PIEDE
   Erano su fondo nero. Ora la pagina resta chiara dall'inizio alla
   fine: il nero faceva da coperchio e chiudeva la lettura, mentre
   qui la chiusura deve essere un invito. Il logotipo gigante torna
   come firma leggera, non come insegna: --mark-fill è il solo
   numero da toccare se lo si vuole più o meno presente.
   ═══════════════════════════════════════════════════════════ */
.close { --mark-fill: rgba(22,19,15,.13); background: var(--paper); color: var(--ink); overflow: hidden; }
.close__top { padding-block: var(--gap-m); text-align: center; }
.close__lead { font-family: var(--serif); font-weight: var(--w-mark); font-size: calc(clamp(2rem,4.6vw,4.4rem) * var(--fs-display)); line-height: 1.06; letter-spacing: var(--ls-display); max-width: 20ch; margin-inline: auto; }
.close__lead em { display: block; font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); color: var(--ink-45); }
/* L'invito non è più un .btn da 10.5px appoggiato in un angolo: è la seconda
   voce della sezione, in tondo come il titolo, con il filetto che gli corre
   sotto. Resta un link, non diventa un bottone pieno. */
.close__cta { display: inline-block; margin-top: clamp(30px, 3.6vw, 52px); font-family: var(--serif); font-weight: var(--w-mark); font-size: calc(clamp(1.3rem,2.1vw,2rem) * var(--fs-display)); line-height: 1.2; letter-spacing: var(--ls-display); padding-bottom: 0.3em; border-bottom: 1px solid var(--rule); transition: color .5s var(--ease),border-color .5s var(--ease); }
.close__cta:hover { color: var(--accent); border-color: var(--accent); }
.close__mark { margin-top: clamp(40px, 6vw, 90px); padding-inline: var(--pad); }
.close__mark svg { width: 100%; height: auto; }
.close__mark text { font-family: var(--marchio); font-weight: var(--marchio-w); font-size: 112px; fill: var(--mark-fill); }
/* «STUDIO» del marchio, variante B: 28 su 112, un quarto del nome, come nel file
   consegnato. Serve la doppia classe perché .hero__mark text impone 112px e in SVG
   il CSS scavalca sempre l'attributo di presentazione. */
.intro__mark .mk__s, .hero__mark .mk__s, .close__mark .mk__s { font-size: 28px; }
/* Colophon. Al posto della griglia auto-fit a quattro colonne, dove la
   distribuzione la decideva il browser e il nome dello studio finiva scritto
   tre volte in due schermate, una riga sola centrata come in fondo a un libro:
   indirizzo, telefono, Instagram, firma. L'indirizzo di via è uscito da qui
   per decisione dello studio, i contatti veri stanno nel menu. */
.foot { border-top: 1px solid var(--rule); }
.foot__colo { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px clamp(18px, 2.4vw, 36px); padding-block: clamp(24px, 3vw, 38px) clamp(40px, 5vw, 62px); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-45); }
.foot__colo b { font-weight: 300; }
.foot__sep { color: var(--ink-25); }
/* Centratura ottica del colophon. La spaziatura di 0.22em cade anche dopo
   l'ultima lettera: entra nella scatola ma non ha inchiostro, così la riga
   centrata risulta spostata di 2 px a sinistra (misurati). Il margine negativo
   toglie dalla scatola esattamente quella coda. */
.foot__colo > span:last-child, .foot__priv { margin-right: -0.22em; }
/* Il capo riga: da qui in giù firma e partita IVA, su una riga loro. */
.foot__capo { flex-basis: 100%; height: 0; }
.foot a { transition: color 0.35s; }
.foot a:hover { color: var(--ink); }
.foot__ig { display: inline-flex; align-items: baseline; gap: 0.6em; }
.foot__ig .ico-ig { width: 1.05em; height: 1.05em; align-self: center; }
[data-reveal] { opacity: 0; transform: translateY(20px); }
body.js [data-reveal] { transition: opacity 1.15s var(--ease),transform 1.15s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.09s; }
[data-delay="2"] { transition-delay: 0.18s; }
[data-delay="3"] { transition-delay: 0.27s; }
[data-delay="4"] { transition-delay: 0.36s; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
html:not(.js) .intro { display: none; }
html:not(.js) body { overflow: auto !important; }

/* ═══════════════════════════════════════════════════════════
   PAGINE INTERNE — al momento nessuna
   La pagina About è stata archiviata in docs/archivio/about.html: la
   bozza da mostrare allo studio ha la sola home. Queste regole restano
   perché servono identiche quando la rifaremo.
   Nessuna apertura: la testata è già al suo posto, quindi la pagina
   comincia sotto di lei, non sotto un logotipo.
   ═══════════════════════════════════════════════════════════ */
.pagehead { padding-block: calc(var(--gap-m) + clamp(40px,5vw,72px)) var(--gap-s); }
.pagehead__t { margin-top: clamp(20px, 2.4vw, 34px); }
.pagehead__g { margin-top: clamp(30px, 3.8vw, 56px); display: grid; grid-template-columns: 1fr; gap: clamp(22px, 2.6vw, 40px); }
.pagehead .lead { max-width: 22ch; }
.pagehead .prose { max-width: 58ch; }
@media (min-width: 880px){
  .pagehead__g { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); gap: clamp(36px, 4.4vw, 80px); align-items: start; }
}

/* Ritratto a sinistra, racconto e dati a destra: una composizione
   sola, 6/6. A 7 colonne il ritratto diventava alto quasi mille
   pixel e lasciava mezza pagina vuota di fianco.                */
.onwide { padding-block: 0 var(--gap-m); }
.onwide__g { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 3.6vw, 56px); }
.portrait--wide { max-width: none; }
.onwide__c .dropcap { margin-top: clamp(22px, 2.6vw, 38px); font-size: var(--t-body); line-height: 1.72; }
.onwide__c .facts { margin-top: clamp(28px, 3.4vw, 52px); }
@media (min-width: 880px){
  .onwide__g { grid-template-columns: minmax(0px, 6fr) minmax(0px, 6fr); gap: clamp(36px, 4.4vw, 80px); align-items: center; }
  .onwide__c .facts { display: block; }
  .onwide__c .facts li + li { margin-top: clamp(14px, 1.8vw, 24px); }
}
.creed--about { padding-block: 0 var(--gap-m); }
.creed--about .values { margin-top: clamp(30px, 4vw, 58px); }

/* ═══════════════════════════════════════════════════════════
   LE QUATTRO PAROLE — la scala agganciata
   Il rientro non è una percentuale scelta a occhio: è la larghezza
   reale delle ultime due lettere della parola sopra, misurata dal
   browser con un Range. Il corpo lo risolve il JavaScript perché la
   terza parola cada esattamente sul margine destro.
   Sopra: stacco corto, perché le parole appartengono a «Chi siamo».
   Sotto: stacco corto anche lì, perché seguono le tre lastre che
   «Services» annuncia — erano 197 px, troppi.
   ═══════════════════════════════════════════════════════════ */
.creed { padding-block: clamp(52px, 6.4vw, 96px) clamp(34px, 4.2vw, 64px); }
.stair { --stair-size: clamp(2.6rem,9.4vw,9.4rem); --stair-lead: 1.02; }
.stair__row { display: block; }

/* Il gradino di ritorno. Il margine sinistro glielo scrive il
   JavaScript, che la centra in pagina.
   Il salto fra le basi è già identico agli altri tre, e l'inchiostro
   misura 8 px di vuoto fra ogni coppia. Ma la sovrapposizione
   orizzontale fra una parola e la successiva cala scendendo la
   scala: 140, 110, 71 px. L'ultima coppia si tocca quasi per niente
   e il vuoto si legge più largo di quello che è: --back-lift
   recupera otticamente la differenza. Senza unità, perché calc()
   non moltiplica em per px.
   Misurato: a 0,14 restano fra 29 e 61 px fra i due inchiostri,
   su tutti e tre i caratteri e da 950 a 1512 px.               */
.stair__row--back { --back-lift: 0.14; margin-top: calc(-1 * var(--back-lift) * var(--stair-size,0px) * var(--fs-display)); font-weight: inherit; }
.stair__w { display: inline-block; white-space: nowrap; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(var(--stair-size) * var(--fs-display)); line-height: var(--stair-lead); letter-spacing: var(--ls-display); }
/* Il movimento delle quattro parole non è un'entrata: è agganciato alla
   posizione dello scorrimento, quindi scendendo va avanti e risalendo torna
   indietro. Due cose insieme, tarate basse — il FUOCO, cioè quanto una riga
   è vicina al centro dello schermo, che dà l'ordine di lettura; e la DERIVA
   orizzontale, che toglie la staticità. Solo transform e opacity: la
   geometria della scala la calcola il JavaScript e non va toccata.
   Senza JavaScript, e con il movimento ridotto, i valori restano ai loro
   difetti e le parole stanno ferme e piene. */
.stair[data-moto] .stair__w { opacity: var(--fuoco, 1); transform: translate3d(calc(var(--der, 0) * 1px), 0, 0); }
@media (prefers-reduced-motion: reduce) {
  .stair[data-moto] .stair__w { opacity: 1; transform: none; }
}
@media (max-width: 899px){
  .stair { --stair-size: clamp(2.4rem,10.6vw,4.4rem); --stair-lead: 1.06; }
  .stair__row { margin-left: 0px !important; }
  .stair__row + .stair__row { margin-top: 0.12em; }
}
@media (min-width: 880px){
  .manifesto__g { grid-template-columns: minmax(0px, 4fr) minmax(0px, 8fr); gap: clamp(36px, 4.4vw, 80px); align-items: center; }
}
@media (min-width: 760px){
  .sisters__grid { grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: clamp(30px, 4vw, 56px) clamp(20px, 3vw, 44px); align-items: start; }
  .sister { grid-column: 1 / span 4; max-width: none; }
  .sister--offset { grid-column: 6 / span 4; margin-top: clamp(60px, 9vw, 130px); }
  .sisters__text { grid-column: 1 / -1; justify-self: start; max-width: 52ch; }
  .stories__head .display em { display: inline; }
}
@media (min-width: 1100px){
  .sister { grid-column: 1 / span 3; }
  .sister--offset { grid-column: 5 / span 3; margin-top: clamp(70px, 8vw, 120px); }
  .sisters__text { grid-column: 10 / span 3; justify-self: start; margin-top: clamp(70px, 8vw, 120px); max-width: 38ch; }
}
@media (max-width: 640px){
  .masthead { display: block; text-align: center; margin-top: clamp(18px, 3vw, 30px); padding-top: clamp(12px, 2.2vw, 18px); border-top: 1px solid var(--rule); font-size: clamp(8px, 2.3vw, 9.5px); letter-spacing: 0.26em; }
  .masthead__rail { display: none; }
  .masthead__txt { display: block; }
  .masthead__txt b { margin-inline: 0.45em; }
  .work__close { display: block; text-align: center; padding-top: clamp(14px, 2.4vw, 20px); border-top: 1px solid var(--rule); margin-top: clamp(30px, 5vw, 50px); }
  .work__rail { display: none; }
  .work__go { font-size: clamp(8.5px, 2.4vw, 10px); letter-spacing: 0.28em; }
}
@media (max-width: 900px){
  .grid { grid-template-columns: repeat(2, 1fr); }
  .cell figcaption { opacity: 1; transform: none; background: linear-gradient(to top, rgba(22, 19, 15, 0.34), rgba(22, 19, 15, 0)); }
}
@media (max-width: 560px){
  :root { --pad: 18px; }
  body { font-size: 14.5px; }
  .hero { padding-top: clamp(84px, 12vh, 120px); }
  .hero__mark text { font-size: 112px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  /* Nome e location un filo più grandi che sul resto del sito piccolo: a 13 e 8
     px la location era la scritta più piccola di tutte (variante B dei mockup
     telefono-testi, 21 settembre). */
  .cell figcaption em { font-size: 15px; }
  .cell figcaption span { font-size: 9px; letter-spacing: 0.22em; }
  .cell figcaption span b { display: block; }
  .cell figcaption span b + b::before { content: none; }
  /* La griglia sul telefono è solo fotografie: nessun nome, nessun velo. Si
     tocca una foto e compare la sua didascalia; si tocca di nuovo e sparisce,
     se ne tocchi un'altra la didascalia si sposta, e basta scorrere per
     spegnerla. Ne resta accesa al massimo una (Federico, 21 settembre).
     Senza JavaScript il pulsante non compare e le didascalie restano accese,
     come prima: nessuno resta senza i nomi. */
  .cell__tocco { display: block; }
  html.js .cell figcaption { opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
  html.js .cell.is-didascalia figcaption { opacity: 1; }
  /* Il velo: sul telefono parte più in alto e sale più morbido, così copre
     anche la riga del nome. Con quello leggero del computer, misurato sul
     sito vero, il nome restava sotto la soglia di leggibilità su sei foto
     su nove; così le passano tutte (variante 2 di mockup/telefono-velo.html). */
  .cell figcaption { padding-top: 46%;
    background: linear-gradient(to top, rgba(22,19,15,.70) 0%, rgba(22,19,15,.52) 30%, rgba(22,19,15,.28) 58%, rgba(22,19,15,.08) 82%, rgba(22,19,15,0) 100%); }
  .close__lead { max-width: none; }
  .press__n { letter-spacing: 0.1em; margin-right: -0.1em; }
  /* In 390 px la riga dei contatti arriva a filo dei margini: cadono i
     puntini, la spaziatura stringe, e firma e partita IVA vanno ciascuna
     su una riga sua. Il corpo è 11 px, come tutte le scritte sul telefono
     (punto 6, 21 settembre: era 9). */
  .foot__colo { gap: 29px 15px; font-size: 11px; letter-spacing: 0.18em; }
  /* Email, telefono, Instagram e Privacy erano bersagli alti 15 px: il dito
     ne vuole almeno 44. Padding e margine negativo uguali allargano la zona
     da toccare senza spostare niente. Per questo le righe sopra sono a 29 px
     l'una dall'altra e non più a 13: con 13 le zone si sovrapponevano. */
  .foot__colo a, .foot__priv, .foot__ig { padding: 14px 0; margin: -14px 0; }
  .foot__sep { display: none; }
  /* qui firma e partita IVA occupano tutta la riga, quindi la coda si compensa
     con l'incavo iniziale invece che col margine. */
  .foot__firma, .foot__colo > span.foot__piva { flex-basis: 100%; text-align: center; margin-right: 0; text-indent: 0.18em; }
  .foot__priv { margin-right: 0; }
  .foot__capo { display: none; }
  /* Due colonne non entrano in 390 px: i contatti scendono sotto il menu,
     allineati a sinistra come le voci, e tornano a un rapporto di 1:2.3. */
  /* Il menu aperto sul telefono (variante B di mockup/telefono-menu.html,
     Federico, 21 settembre). Prima le voci erano da 35 px, in fondo allo
     schermo e a sinistra, con mezzo schermo vuoto sopra. Ora partono subito
     sotto la testata, a tutta larghezza, divise da un filo come le righe di
     un indice: ogni voce è una fascia da toccare alta 84 px. I contatti in
     fondo. */
  .nav__inner { padding: 104px 0 34px; }
  .nav__inner::after { display: none; }
  .nav__row { flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 30px; }
  .nav__row .nav__list { flex: 0 0 auto; }
  .nav__list { gap: 0; border-top: 1px solid var(--rule); }
  .nav__list li { border-bottom: 1px solid var(--rule); }
  .nav__list a { padding: 20px var(--pad); gap: 22px; font-size: 44px; line-height: 1; }
  .nav__side { padding: 0 var(--pad); text-align: left; font-size: 19px; gap: 0.45em; white-space: normal; }
  .nav__side a.nav__side-ig { justify-content: flex-start; }
  .hdr { gap: 10px; }
  /* Il logotipo sul telefono: da 12 a 14,5 px, e «Studio» da 7,6 a 8,4
     (variante A di mockup/telefono-ritocchi.html, Federico, 21 settembre). */
  .hdr__mark { font-size: 14.5px; letter-spacing: 0.14em; }
  .hdr__mark-s { font-size: 8.4px; }
  /* EN e IT erano bersagli di 12 × 16 e 7 × 16 px. Con padding e margine
     negativo uguali la zona da toccare arriva a 47 px di altezza e non si
     sposta una lettera; di lato si allarga di 7 px, quanto basta perché le
     due zone non si tocchino sopra la barra. */
  .lang__btn { padding: 14px 7px; margin: -14px -7px; }
  .svc__no { padding-top: 0px; }
}
@media (prefers-reduced-motion: reduce){
  *, ::before, ::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  body.js .grid .cell { opacity: 1; transform: none; transition-delay: 0s; }
}

/* ═══════════════════════════════════════════════════════════
   EXTRA SERVICE — la sottopagina
   Un capitolo per schermata. Il rapporto fisso sta sul SET delle
   immagini e non sulle singole lastre: con il 4:5 sulle lastre il
   capitolo arrivava a 1400 px, qui l'altezza è decisa in partenza
   e le fotografie si adattano dentro la griglia.
   ═══════════════════════════════════════════════════════════ */
/* Due fasi. Nella prima il titolo scende e cresce e si ferma; nella seconda resta
   inchiodato mentre i capitoli gli salgono sopra. Per questo la testata è sticky
   dentro la pila e i capitoli hanno fondo opaco e un piano più alto: sono loro a
   coprirla salendo, e il filo del primo è la riga che si vede arrivare dal basso.
   overflow:hidden perché il titolo ingrandito non generi barra orizzontale. */
/* Tre tempi.
   --fase1  quanto si scorre mentre il titolo scende, cresce e si ferma.
   --fase2  quanto si scorre mentre il filo sale dal basso fino ad appoggiarsi
            sotto il titolo. La calcola main.js in pixel, perché deve finire
            esattamente sotto la base delle lettere e non un pelo sopra.
   Poi l'ancora finisce, l'aggancio si scioglie, e titolo e sezioni salgono
   insieme: il titolo se ne va per intero, come un titolo qualunque. */
.xs__pila { position: relative; --fase1: 80vh; --fase2: 17vh; }
.xs__ancora { height: calc(100vh + var(--fase1) + var(--fase2)); }
/* il margine negativo fa entrare il capitolo mentre la testata è ancora inchiodata:
   è così che il filo sale, ma si ferma sotto il titolo e non lo taglia mai */
.xs__ancora + .xs__cap { margin-top: calc(-1 * var(--fase2)); }
@media (prefers-reduced-motion: reduce){
  .xs__pila { --fase1: 0px; --fase2: 0px; }
  .xs__ancora { height: auto; }
}
.xs__head { position: sticky; top: 0px; height: 100vh; z-index: 0; }
.xs__head-fermo { height: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
html:not(.js) .xs__head { position: static; height: auto; min-height: 100vh; }
html:not(.js) .xs__head-fermo { padding-block: clamp(96px,14vh,170px); }
/* Titolo al centro e frase sotto, non di fianco: la frase dice perché i tre stanno
   insieme, quindi va letta prima dell'indice e sotto il titolo è dove la si cerca. */
.xs__head-g { text-align: center; }
/* La discesa arriva in pixel da main.js, che la calcola perché il titolo si posi
   sempre alla stessa distanza dal filo. La crescita è proporzionale al percorso. */
.xs__head-t { font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(2.6rem,7.6vw,7.6rem) * var(--fs-display)); line-height: 0.98; letter-spacing: var(--ls-display); white-space: nowrap; transform: translateY(calc(var(--xs-giu, 0) * 1px)) scale(calc(1 + var(--xs-p, 0) * 0.42)); transform-origin: center center; will-change: transform; }
.xs__head-p { margin: clamp(20px,2.4vw,34px) auto 0; max-width: 46ch; color: var(--ink-70); font-size: calc(clamp(1rem,1.35vw,1.35rem) * var(--fs-display)); line-height: 1.6; opacity: var(--xs-o, 1); transform: translateY(calc(var(--xs-giu, 0) * 1px)); will-change: opacity, transform; text-wrap: balance; }
/* Il sottotitolo scende INSIEME al titolo, non più piano: se resta indietro il titolo
   lo raggiunge al 20% della corsa, quando è ancora al 75% di opacità, e per un attimo
   ci si scrive sopra. Scendendo insieme la distanza fra i due non si accorcia mai. */
.xs__rail { display: block; margin-top: clamp(34px,4vw,60px); height: 1px; background: var(--rule); }
/* ── Come arriva un capitolo ──────────────────────────────────────
   Due cose in due momenti. La tendina è un EVENTO: succede una volta,
   scopre la fotografia correndo verso il testo, e dice «ecco il capitolo».
   La parallasse è uno STATO: agganciata allo scorrimento come la dissolvenza
   dell'hero, accompagna la lettura e si rigioca anche tornando su.
   Lo scarto massimo è 34 px, non 200: deve sentirsi, non vedersi. */
.xs__testo > * { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.xs__cap.is-aperto .xs__testo > * { opacity: 1; transform: none; }
.xs__testo > *:nth-child(1) { transition-delay: .05s; }
.xs__testo > *:nth-child(2) { transition-delay: .12s; }
.xs__testo > *:nth-child(3) { transition-delay: .19s; }
.xs__testo > *:nth-child(4) { transition-delay: .26s; }
.xs__testo > *:nth-child(5) { transition-delay: .33s; }
.xs__set .slot__box { clip-path: inset(0 0 0 100%); transition: clip-path 1.25s var(--ease); transform: translateY(calc(var(--p,0) * var(--k,0) * 1px)); }
.xs__cap--r .xs__set .slot__box { clip-path: inset(0 100% 0 0); }
.xs__cap.is-aperto .xs__set .slot__box { clip-path: inset(0 0 0 0); }
.xs__slot--a { --k: -22; }
.xs__slot--b { --k: 16; transition-delay: .14s; }
.xs__slot--c { --k: 34; transition-delay: .28s; }
html:not(.js) .xs__testo > *, html:not(.js) .xs__set .slot__box { opacity: 1; transform: none; clip-path: none; }
@media (prefers-reduced-motion: reduce){
  .xs__testo > *, .xs__set .slot__box { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .xs__head { position: static; height: auto; min-height: 100vh; }
  .xs__head-fermo { padding-block: clamp(96px,14vh,170px); }
  .xs__head-t, .xs__head-p { transform: none !important; opacity: 1 !important; }
}

.xs__cap { min-height: 100vh; display: flex; align-items: center; padding-block: clamp(60px,9vh,110px) clamp(40px,6vh,80px); }
/* Il filo ce l'hanno tutti, primo compreso: è la riga che sale a raggiungere il
   titolo. Fondo opaco e piano più alto perché i capitoli lo coprano salendo. */
.xs__cap { border-top: 1px solid var(--rule); position: relative; z-index: 1; background: var(--paper); }
/* .xs__cap è flex, quindi .wrap sarebbe un elemento flessibile e si restringerebbe
   al contenuto: misurato 902 px invece di 1368, e il set si rimpiccioliva con lui. */
.xs__cap > .wrap { width: 100%; }
.xs__grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px,3vw,48px); align-items: center; }
.xs__testo { max-width: 46ch; }
.xs__n { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.26em; color: var(--ink-25); }
/* Niente parole sole sull'ultima riga (Federico, 19 settembre): titoli, frase
   d'apertura e chiamata finale con text-wrap: balance, righe di lunghezza simile;
   testi e citazioni con text-wrap: pretty, che porta giù una parola in più
   (Chrome e Safari; Firefox la ignora e va a capo come prima). «Wow Box» nel
   testo ha lo spazio indivisibile nell'HTML. */
.xs__t { margin-top: 0.8em; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.8rem,3.2vw,3.2rem) * var(--fs-display)); line-height: 1.04; letter-spacing: var(--ls-display); text-wrap: balance; }
.xs__p { margin-top: 1em; color: var(--ink-70); font-size: var(--t-body); line-height: 1.72; text-wrap: pretty; }
.xs__c { margin-top: 1.2em; font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); font-size: calc(clamp(1.05rem,1.45vw,1.45rem) * var(--fs-display)); line-height: 1.42; color: var(--ink-45); text-wrap: pretty; }
.xs__d { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 30px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-45); }

/* width:100% è necessario: con align-items:center la larghezza non sarebbe definita
   e aspect-ratio verrebbe risolto dall'altezza del contenuto invece che dalla colonna. */
.xs__set { width: 100%; display: grid; gap: clamp(10px,1.1vw,18px); aspect-ratio: 6/5; grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr 1fr; }
.xs__set .slot__box { aspect-ratio: auto; height: 100%; }
/* Nomi distinti: .xs__c era usata sia per la citazione sia per la terza casella,
   e il margin-top della citazione finiva sull'immagine — 27.14 px di scarto in fondo. */
.xs__slot--a { grid-row: span 2; }
.xs--video { background: var(--slot-2); }
.xs--video::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border-left: 13px solid var(--ink-25); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* La casella del video, quando il video c'è (Photo Gift dal 19 settembre): è un
   pulsante, tutto il quadrato si clicca. Dentro un fotogramma fermo, il tasto
   play e «Play · 0:18»; al clic si apre il lettore qui sotto. */
.xs__vid { display: block; padding: 0; border: 0; cursor: pointer; font: inherit; color: var(--paper); text-align: left; }
.xs__vid img { transition: transform 1.2s var(--ease); }
.xs__vid::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(14,12,10,.45), rgba(14,12,10,0) 42%); pointer-events: none; }
.xs__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; border: 1px solid rgba(250,248,245,.8); background: rgba(14,12,10,.12); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform .6s var(--ease), background .4s; }
.xs__play i { position: absolute; left: 27px; top: 22px; border-left: 16px solid var(--paper); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.xs__vid-k { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; }
.xs__vid:hover .xs__play, .xs__vid:focus-visible .xs__play { transform: scale(1.1); background: rgba(250,248,245,.18); }
.xs__vid:hover img { transform: scale(1.03); }
.xs__vid:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* IL LETTORE DEI VIDEO (variante A del mockup, «buio»). Il video verticale da
   solo al centro, quasi alto quanto lo schermo, su fondo quasi nero; «Close» in
   alto a destra, sotto il video una riga che avanza col tempo, in basso a
   sinistra il nome del servizio. Entra in dissolvenza, il video cresce appena.
   Sta sopra a tutto, anche alla testata (70) e al menu (65). */
.lv { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; color: var(--paper); opacity: 0; transition: opacity .5s var(--ease); }
.lv[hidden] { display: none; }
.lv.is-su { opacity: 1; }
.lv__fondo { position: absolute; inset: 0; background: rgba(14,12,10,.95); }
.lv__f { position: relative; margin: 0; width: min(calc(86svh * 9 / 16), 92vw, 720px); aspect-ratio: 9 / 16; background: #0E0C0A; transform: scale(.965); transition: transform .8s var(--ease); }
.lv.is-su .lv__f { transform: none; }
.lv__v { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.lv__bar { position: absolute; left: 0; right: 0; bottom: -14px; height: 1px; background: rgba(250,248,245,.22); }
.lv__bar i { display: block; width: 0; height: 100%; background: currentColor; }
.lv__t { position: absolute; left: var(--pad); bottom: 34px; margin: 0; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(250,248,245,.55); }
.lv__x { position: absolute; top: 34px; right: var(--pad); z-index: 2; display: inline-flex; align-items: center; gap: 0.9em; padding: 8px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: inherit; }
.lv__x i { position: relative; width: 18px; height: 18px; }
.lv__x i::before, .lv__x i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; transform: rotate(45deg); }
.lv__x i::after { transform: rotate(-45deg); }
.lv__x:focus-visible { outline: 1px solid var(--paper); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .lv, .lv__f, .xs__vid img, .xs__play { transition: none; }
  .lv__f { transform: none; }
}

.xs__fine { padding-block: clamp(70px,9vw,140px); border-top: 1px solid var(--rule); text-align: center; }
.xs__fine-t { font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.5rem,3vw,3rem) * var(--fs-display)); line-height: 1.24; letter-spacing: var(--ls-display); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.xs__fine-a { margin-top: clamp(26px,3vw,44px); }  /* il resto: regola del RIMANDO */

/* ═══════════════════════════════════════════════════════════
   ABOUT — l'apertura
   Stessa meccanica della testata di Extra service: il titolo scende,
   cresce e si blocca mentre il sommario se ne va. Cambia dove atterra:
   non su un filetto ma sul bordo alto di una fotografia verticale.

   La fotografia NON sta dentro la testata inchiodata. Se ci stesse,
   l'overflow:hidden della schermata la ritaglierebbe e la sezione
   successiva le passerebbe sopra: si vedeva la foto mozzata da una
   linea. Sta nel flusso, sotto l'ancora, con un margine superiore
   negativo pari alla fase 2 — ed è quel margine a farla salire mentre
   il titolo è ancora fermo. Quando l'ancora finisce salgono insieme,
   lo scarto fra base e bordo resta fisso a 26 px, e la fotografia
   scorre intera senza che niente la tagli.

   QUOTA, in main.js, non è libera: la base del titolo cresciuto cade
   da sola intorno al 52% della schermata, quindi un bersaglio più in
   alto darebbe una discesa negativa e il titolo crescerebbe senza
   scendere.
   ═══════════════════════════════════════════════════════════ */
.ab__pila { position: relative; --fase1: 80vh; --fase2: 0px; }
.ab__ancora { height: calc(100vh + var(--fase1) + var(--fase2)); }
.ab__head { position: sticky; top: 0; height: 100vh; z-index: 1; }
.ab__fermo { height: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.ab__g { text-align: center; }
.ab__t { font-family: var(--serif); font-weight: var(--w-display); line-height: 1; letter-spacing: var(--ls-display); font-size: calc(clamp(2.6rem,8.4vw,8.4rem) * var(--fs-display)); white-space: nowrap; transform-origin: center center; transform: translateY(calc(var(--at-giu,0) * 1px)) scale(calc(1 + var(--at-p,0) * 0.42)); }
.ab__p { margin: clamp(20px,2.4vw,34px) auto 0; max-width: 46ch; padding-inline: var(--pad); color: var(--ink-70); opacity: var(--at-o,1); transform: translateY(calc(var(--at-giu,0) * 1px)); }
/* nessun fondo qui: coprirebbe il titolo inchiodato mentre sale */
.ab__dopo { position: relative; z-index: 2; margin-top: calc(-1 * var(--fase2)); }
.ab__vert { width: clamp(230px, 27vw, 420px); margin-inline: auto; }
.ab__vert img, .ab__zz-f img, .ab__due-f img { display: block; width: 100%; height: auto; }
/* Il corpo della pagina. Il ritmo delle posture è la regola che lo tiene
   insieme: centrata (l'apertura) → a bandiera (01) → centrata con la
   fotografia grande (02) → zigzag (03) → centrata piccola (04). Nessuna
   postura due volte di fila, perché due posture uguali consecutive si
   confondono — è l'errore che avevamo fra il DOVE e la chiusura in home.
   Tre fotografie in tutto, tutte 4:5, a scale diverse: è ciò che le fa
   respirare quando sono poche. */
.ab__tit { font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.5rem,2.9vw,2.9rem) * var(--fs-display)); line-height: 1.12; letter-spacing: var(--ls-display); }
.ab__tit em { font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); }
.ab__prosa { color: var(--ink-70); }
.ab__prosa p + p { margin-top: 1.05em; }

/* 01 — il capitolo senza fotografia.
   Era a bandiera con una nota a destra: due allineamenti opposti nello stesso
   blocco, con mezza pagina di vuoto in diagonale in mezzo, e non leggevano
   come un blocco solo. Ora è centrato e prende l'onda della frase del DOVE —
   le parole si accendono scorrendo e si rispengono risalendo — e la nota è
   sparita invece di essere spostata. Il tondo tiene la frase, il corsivo resta
   un accento su due parti: quattro righe tutte in corsivo lo svuotavano. */
.ab__muto { padding-block: var(--gap-l); }
.ab__muto-q { margin-inline: auto; text-align: center; text-wrap: balance; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.5rem,3.2vw,3.2rem) * var(--fs-display)); line-height: 1.24; letter-spacing: var(--ls-display); max-width: 22ch; }
.ab__muto-q em { font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); font-size: calc(1em * var(--fs-it)); }
/* Sul telefono la frase della madre è già tutta accesa: niente onda che la
   riempie scorrendo (Federico, 21 settembre). Sul computer l'onda resta. Vale
   solo qui: la frase dei luoghi in home continua ad accendersi anche sul
   telefono. */
@media (max-width: 899px) { .ab__muto-q .where__w { opacity: 1 !important; } }

/* 02 — i numeri. Nessun occhiello: le sezioni della About non sono
   intestate, deciso l'11 settembre. Il contrasto grande-piccolo: tondo del display per il
   numero, microtipografia di fianco per la didascalia, allineati sulla
   linea di base. Sono gli stessi tre che stanno in home sotto il
   manifesto, dove però sono a corpo 21: qui vanno a 77. */
.ab__num { padding-block: var(--gap-m); text-align: center; }
.ab__num-g { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: clamp(26px,4vw,80px); }
.ab__num-i { display: flex; align-items: baseline; gap: .7em; }
.ab__num-n { font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(2.2rem,5vw,4.6rem) * var(--fs-display)); line-height: 1; letter-spacing: var(--ls-display); }
/* La misura è in ch, che non conta la spaziatura: a 11ch le tre didascalie
   andavano a capo su tre righe e si stringevano. A 22ch stanno tutte su due. */
.ab__num-d { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-45); text-align: left; max-width: 22ch; line-height: 1.7; }

/* 03 — la fotografia grande, e il dittico lo fa il testo */
.ab__due { padding-block: var(--gap-m); }
.ab__due-f { width: min(100%, clamp(300px,44vw,640px)); margin-inline: auto; }
/* Sotto i 900 px le colonne si impilano e la fotografia dello zigzag prende
   tutta la misura: senza questa riga la «grande» del 02 restava a 300 px e
   quella «media» del 03 arrivava a 354, cioè la gerarchia si invertiva. */
@media (max-width: 899px) {
  .ab__due-f { width: 100%; }
  .ab__zz-f { width: 80%; }
}
/* Sul telefono (variante A di mockup/telefono-pagine.html, 21 settembre):
   la discesa di «Chi siamo» resta, ma dura la metà (40 invece di 80 centesimi
   di schermo), perché erano quasi due schermate con la sola parola; e la foto
   delle sorelle su cui si posa passa da 230 a 320 px. Le altre fotografie
   della pagina vanno a tutta larghezza, come nel resto del sito sul telefono:
   il contenitore perde i margini e li riprendono i blocchi di testo. */
@media (max-width: 899px) {
  .ab__pila { --fase1: 40vh; }
  .ab__vert { width: 82vw; }
  .ab__due .wrap, .ab__zz .wrap { padding-left: 0; padding-right: 0; }
  .ab__due-t, .ab__due-g, .ab__due-coda, .ab__zz-t { padding-left: var(--pad); padding-right: var(--pad); }
  .ab__zz-f { width: 100%; }
}
/* Le due fotografie che si danno il cambio: stanno una sopra l'altra e si
   accende solo quella con .is-on. Dissolvenza incrociata, 1,6 s; i tempi
   stanno in main.js (DISSOLVENZA DELL'ABOUT) e devono restare allineati. */
.ab__due-f .ab__giro img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease-in-out; }
.ab__due-f .ab__giro img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ab__due-f .ab__giro img { transition: none; } }
.ab__due-t { margin-top: clamp(40px,5vw,80px); text-align: center; }
.ab__due-t .ab__tit { max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.ab__due-g { margin-top: clamp(44px,5.4vw,84px); display: grid; gap: clamp(34px,4vw,60px); }
.ab__voce-n { font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.4rem,2.4vw,2.2rem) * var(--fs-display)); line-height: 1; letter-spacing: var(--ls-display); margin-bottom: .6em; }
/* Le voci (19 settembre, variante C di mockup/about-voci.html): i testi nuovi
   sono lunghi, due o tre volte quelli di prima. Una sotto l'altra, come in
   un'intervista: il nome a sinistra, la voce a destra in corsivo medio (era il
   corsivo grande, da 1.6rem), un filo fra le due. */
.ab__voce-c { font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); font-size: calc(clamp(1.05rem,1.45vw,1.4rem) * var(--fs-display)); line-height: 1.42; letter-spacing: var(--ls-display); }
.ab__voce-c p { text-wrap: pretty; }   /* niente parole sole sull'ultima riga, come in Extra service */
.ab__voce-c p + p { margin-top: .8em; }
.ab__due-coda { margin-top: clamp(40px,4.6vw,70px); max-width: 40ch; margin-inline: auto; text-align: center; color: var(--ink-70); }
@media (min-width: 900px) {
  .ab__due-g { grid-template-columns: 1fr; gap: 0; max-width: 1080px; margin-inline: auto; }
  .ab__voce { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.2fr); gap: clamp(30px,4vw,70px); padding-block: clamp(34px,3.6vw,54px); border-top: 1px solid var(--rule); }
  .ab__voce:last-child { border-bottom: 1px solid var(--rule); }
  .ab__voce-n { margin: 0; }
}

/* 04 — lo zigzag */
.ab__zz { padding-block: var(--gap-m); border-top: 1px solid var(--rule); }
.ab__zz-g { display: grid; gap: clamp(28px,4vw,52px); }
.ab__zz-t .ab__tit { margin-bottom: clamp(16px,2vw,26px); max-width: 18ch; }
.ab__zz-t .ab__prosa { max-width: 52ch; }
/* La media si ferma a 520 px: senza tetto, su un monitor grande arrivava a
   617 contro i 640 della grande, cioè le due leggevano uguali. */
@media (min-width: 900px) { .ab__zz-g { grid-template-columns: .86fr 1.14fr; gap: clamp(40px,6vw,100px); align-items: center; } .ab__zz-f { width: min(100%, 520px); } }

/* 05 — la coda */
.ab__coda { padding-block: var(--gap-m) var(--gap-l); text-align: center; }
.ab__coda .ab__tit { max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.ab__coda .ab__prosa { max-width: 42ch; margin: clamp(24px,2.8vw,40px) auto 0; }
.ab__coda .btn { margin-top: clamp(30px,3.4vw,50px); }

/* La pagina Contact era in Melodrama, deciso l'11 settembre: dal 20 settembre
   è in Italiana come tutto il resto (Federico: «mettere tutto il font in
   italiana»). Con Melodrama se ne vanno anche le sue correzioni ottiche
   (peso 300, corpo al 108%, -.012em), che qui erano dichiarate sui due
   blocchi della pagina. Il corsivo dei richiami resta Boska. */

/* ═══════════════════════════════════════════════════════════
   WEDDING PHOTOGRAPHY
   Rifatta il 19 settembre, variante B di mockup/wedding-photography.html.
   Prima aveva la meccanica d'atterraggio della About (il titolo che
   scende e si posa su due verticali): ora la testa è quella di
   Portfolio, Stories ed Editorial Album (.pf__head), così le due pagine
   dei servizi sono una coppia.
   Il manifesto in grande, poi tre capitoli a zig-zag con la foto a
   440 px come le schede di Stories, poi le feste, centrate e senza foto.
   Tutto in Italiana: la seconda riga dei titoli è dritta, nel grigio.
   ═══════════════════════════════════════════════════════════ */
.wph__head { padding-top: clamp(130px,17vh,190px); padding-bottom: clamp(40px,5vh,64px); }
.wph__k { display: block; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-45); }
.wph__manif { max-width: 1000px; margin: 0 auto; padding: var(--gap-m) var(--pad) 0; text-align: center; }
.wph__manif p { margin: 26px auto 0; max-width: 34ch; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.5rem,2.6vw,2.6rem) * var(--fs-display)); line-height: 1.24; letter-spacing: var(--ls-display); text-wrap: balance; }
.wph__cap { display: grid; grid-template-columns: 440px minmax(0,1fr); align-items: center; gap: clamp(40px,7vw,120px); max-width: 1180px; margin: var(--gap-m) auto 0; padding: 0 var(--pad); }
.wph__cap--r { grid-template-columns: minmax(0,1fr) 440px; }
.wph__cap--r .wph__f { order: 2; }
.wph__f { margin: 0; }
.wph__f img { width: 100%; height: auto; }
.wph__n { display: block; margin-bottom: 18px; font-size: 9px; letter-spacing: 0.28em; color: var(--ink-25); }
.wph__t { margin: 0; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.5rem,2.6vw,2.6rem) * var(--fs-display)); line-height: 1.12; letter-spacing: var(--ls-display); }
.wph__t em { display: block; font-style: normal; color: var(--ink-45); }
.wph__p { margin-top: 1.3em; max-width: 46ch; color: var(--ink-70); }
.wph__p p { margin: 0; }
.wph__p p + p { margin-top: 1em; }
.wph__fine { max-width: 760px; margin: var(--gap-m) auto 0; padding: var(--gap-m) var(--pad); text-align: center; border-top: 1px solid var(--rule); }
.wph__fine .wph__p { margin-inline: auto; }
/* Sotto i 900 px i capitoli si impilano. Stesso ordine di Extra service,
   uguale nei tre capitoli: prima numero, titolo e testo, poi la foto a tutta
   larghezza (variante B di mockup/telefono-pagine.html, 21 settembre), così le
   due pagine dei servizi sul telefono si leggono allo stesso modo. */
@media (max-width: 899px) {
  .wph__cap, .wph__cap--r { grid-template-columns: 1fr; gap: 26px; padding-left: 0; padding-right: 0; }
  .wph__cap--r .wph__f { order: 0; }
  .wph__testo { order: -1; padding: 0 var(--pad); }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT
   Otto campi su una schermata sola. Su filetti e non dentro
   riquadri, in tondo del display: in prima call i campi di
   Bottega53 erano «ciacciottoni» e «su questa nicchia è troppo
   curvo». Il filetto si accende quando ci scrivi dentro.
   ═══════════════════════════════════════════════════════════ */
/* Testata in asse centrale: titolo e contatti diretti. Il modulo sotto resta
   a bandiera, perché un modulo centrato non si compila con l'occhio. */
.ct__head { padding-block: var(--gap-m) clamp(40px,5vw,70px); text-align: center; }
.ct__t { margin-inline: auto; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(2rem,4.6vw,4.4rem) * var(--fs-display)); line-height: 1.06; letter-spacing: var(--ls-display); max-width: 18ch; text-wrap: balance; }
.ct__t em { display: block; font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); color: var(--ink-45); }
.ct__dati { margin-top: clamp(30px,3.6vw,52px); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px clamp(26px,3.4vw,58px); font-family: var(--serif); font-size: calc(clamp(1.05rem,1.5vw,1.42rem) * var(--fs-display)); line-height: 1.4; }
.ct__dati a { transition: color .45s var(--ease); }
.ct__dati a:hover { color: var(--accent); }
.ct__sep { color: var(--ink-25); }
/* Instagram con il suo glifo, come nel menu: il link diventa flessibile e le
   basi si allineano, il glifo si centra sulla riga invece di sedersi sulla base. */
.ct__ig { display: inline-flex; align-items: baseline; gap: .42em; }
.ct__ig .ico-ig { width: .7em; height: .7em; align-self: center; }

.ct__f { padding-bottom: var(--gap-l); }
.ct__g { display: grid; gap: clamp(28px,3.2vw,46px); }
.ct__l { display: block; font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-45); margin-bottom: .9em; }
.ct__i, .ct__a { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.1rem,1.7vw,1.6rem) * var(--fs-display)); line-height: 1.3; letter-spacing: var(--ls-display); color: var(--ink); padding: 0 0 .42em; transition: border-color .4s var(--ease); }
.ct__a { resize: none; min-height: 5.2em; }
.ct__i:focus, .ct__a:focus { outline: 0; border-color: var(--ink); }
.ct__i::placeholder, .ct__a::placeholder { color: var(--ink-25); }
.ct__priv { display: flex; align-items: flex-start; gap: .9em; margin-top: clamp(12px,1.1vw,16px); font-size: 13px; line-height: 1.6; color: var(--ink-70); max-width: 60ch; cursor: pointer; }
/* Il consenso è una condizione del modulo, non un blocco a parte: deve stare
   attaccato all'ultimo campo. Con il vecchio margine lo stacco arrivava a
   120 px contro i 54 fra due righe del modulo, cioè più del doppio, e leggeva
   come un buco. Lo stacco vero lo dà già il salto della griglia. */
/* Coda del modulo in asse centrale: consenso, messaggio di stato e pulsante.
   Il testo del consenso resta a bandiera dentro il suo blocco — due righe di
   testo legale centrate si leggono peggio — ma il blocco è centrato. */
.ct__fine { text-align: center; }
.ct__fine .ct__priv { width: fit-content; margin-inline: auto; text-align: left; }
/* Le due righe del consenso erano sbilanciate, lunga sopra e corta sotto.
   La si lascia distribuire al browser con text-wrap: balance invece di
   spezzarla a mano con un <br>: un a-capo fisso si rompe appena cambia la
   lingua o il corpo, questo si riadatta da solo, e infatti inglese e italiano
   vanno a capo in due punti diversi. La misura è 50ch: sotto i 44 la frase
   inglese passa a tre righe, sopra i 50 il risultato non cambia. */
.ct__fine .ct__priv span { text-wrap: balance; max-width: 50ch; }
.ct__fine .ct__stato { margin-inline: auto; }
.ct__priv input { appearance: none; width: 14px; height: 14px; flex: none; margin-top: .35em; border: 1px solid var(--ink-25); background: none; cursor: pointer; transition: background .3s, border-color .3s; }
.ct__priv input:checked { background: var(--ink); border-color: var(--ink); }
.ct__priv input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* L'errore. Rosso #9E3024: 6,8:1 sulla carta, quindi leggibile, e caldo come
   il resto della tavolozza invece di essere il rosso di sistema. Non basta il
   messaggio: va segnato anche il controllo colpevole, se no su un modulo lungo
   uno legge «serve il consenso» e non sa dove sia. */
.ct__stato { margin-top: clamp(20px,2.4vw,32px); font-size: 13px; line-height: 1.6; color: var(--errore); max-width: 60ch; }
/* il messaggio di conferma: lo stesso posto dell'errore, in inchiostro */
.ct__stato.is-ok { color: var(--ink-70); }
.ct__inv:disabled { opacity: .5; cursor: default; }
/* l'esca per i robot: fuori schermo, e il lettore di schermo non la legge */
.ct__esca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct__i.is-errore, .ct__a.is-errore { border-color: var(--errore); }
.ct__priv.is-errore { color: var(--errore); }
.ct__priv.is-errore input { border-color: var(--errore); box-shadow: 0 0 0 3px rgba(158,48,36,.10); }
.ct__inv { display: inline-block; margin-top: clamp(30px,3.6vw,52px); background: none; border: 0; cursor: pointer; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.3rem,2.1vw,2rem) * var(--fs-display)); line-height: 1.2; letter-spacing: var(--ls-display); color: var(--ink); padding: 0 0 .3em; border-bottom: 1px solid var(--rule); transition: color .5s var(--ease), border-color .5s var(--ease); }
.ct__inv:hover { color: var(--accent); border-color: var(--accent); }
@media (min-width: 760px) {
  .ct__g { grid-template-columns: 1fr 1fr; gap: clamp(32px,3.6vw,58px) clamp(40px,5vw,90px); }
  .ct__c--largo, .ct__g > .ct__c--largo { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ab__t, .ab__p { transform: none; } .ab__p { opacity: 1; } }

@media (min-width: 900px){
  .xs__grid { grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px,5vw,90px); }
  /* invertendo l'ordine il set finiva nella colonna stretta e veniva 595 px invece
     di 698: capitoli alterni con immagini di misura diversa. Si scambiano anche
     le colonne, così il set tiene sempre 1.08fr. */
  /* Il testo bacia le immagini: dove le immagini stanno a destra il blocco si
     sposta a destra e si allinea a destra, così il bordo dritto guarda le foto.
     Nel capitolo centrale, con le immagini a sinistra, il bordo dritto è già
     quello sinistro e non serve toccare niente. */
  .xs__cap:not(.xs__cap--r) .xs__testo { justify-self: end; text-align: right; }
  .xs__cap:not(.xs__cap--r) .xs__d { justify-content: flex-end; }
  .xs__cap--r .xs__grid { grid-template-columns: 1.08fr 0.92fr; }
  .xs__cap--r .xs__set { order: -1; }
}
@media (max-width: 899px){
  /* su schermo stretto una schermata sola non basta: il capitolo si allunga e basta */
  .xs__cap { min-height: 0; padding-block: clamp(46px,7vw,80px); }
  /* Sul telefono (variante A di mockup/telefono-extra.html, 21 settembre): lo
     stesso set del computer, ma aperto. La foto grande a tutta larghezza in
     4:5, sotto le due quadrate affiancate (foto e video), staccate da un filo
     di 6 px come nel nastro delle storie. Prima erano 204 × 283 e 140 × 137.
     L'ordine è lo stesso in tutti e tre i servizi, TESTO SOPRA E FOTO SOTTO
     (Federico): nel capitolo centrale, dove nel codice il set viene prima,
     il testo si sposta davanti. Niente parallasse: con le caselle impilate
     scivolerebbero una sull'altra. */
  .xs__cap > .wrap { padding-left: 0; padding-right: 0; }
  .xs__testo { padding: 0 var(--pad); }
  .xs__cap--r .xs__testo { order: -1; }
  .xs__set { aspect-ratio: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 6px; }
  .xs__set .slot__box { --k: 0; }
  .xs__set .slot__box.xs__slot--a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; height: auto; }
  .xs__set .slot__box.xs__slot--b, .xs__set .slot__box.xs__slot--c { aspect-ratio: 1 / 1; height: auto; }
  /* il tasto play su una casella da 195 px: 50 invece di 66, non copre più il video */
  .xs__play { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .xs__play i { left: 20px; top: 16px; border-left-width: 13px; border-top-width: 9px; border-bottom-width: 9px; }
  .xs__vid-k { left: 12px; bottom: 11px; }
}


/* ═══════════════════════════════════════════════════════════
   IL PORTFOLIO
   La testa è la variante B scelta da Federico il 17 settembre
   (mockup/portfolio-testa.png): il nome della pagina centrato, grande,
   con la sola iniziale maiuscola come tutti i titoli del sito; sotto,
   il filetto spezzato con la riga in maiuscoletto. Il tutto maiuscolo
   stirato su tutta la misura resta del marchio, e basta.
   Classi sue, non quelle dell'hero della home: quelle hanno l'opacità
   legata a --diss, che sulle sottopagine vale 0.
   Lo spazio sopra lascia respirare il titolo sotto la testata fissa.
   La griglia è quella della home, senza una riga di CSS in più.
   ═══════════════════════════════════════════════════════════ */
.pf__head { padding: clamp(130px,17vh,190px) var(--pad) clamp(44px,7vh,96px); }
.pf__t { margin: 0; text-align: center; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(3.2rem,8.4vw,8.6rem) * var(--fs-display)); line-height: 0.9; letter-spacing: var(--ls-display); }
.pf__mast { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 38px); margin-top: clamp(22px, 3.2vw, 44px); font-family: var(--sans); font-weight: 400; font-size: clamp(9.5px, 0.7vw, 11px); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-45); }
.pf__mast i { flex: 1 1 auto; min-width: 20px; height: 1px; background: var(--rule); }
.pf__mast p { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1.15em; margin: 0; text-align: center; }
.pf__mast b { font-weight: 400; color: var(--ink-25); }

/* ═══════════════════════════════════════════════════════════
   LE STORIE (stories.html)
   Variante C, scelta da Federico il 18 settembre: una storia per riga,
   come un capitolo, alternate a destra e a sinistra. La foto ha una
   misura fissa (440 px) su entrambi i lati, così le quattro copertine
   sono uguali. I nomi fanno come l'apertura di una storia: il primo in
   tondo, «& il secondo» in corsivo sulla riga sotto, rientrato.
   Al passaggio del mouse non succede niente: niente zoom, niente
   colore. Il solo segnale che la scheda si apre è «View the story».
   La testa riusa .pf__head del Portfolio.
   ═══════════════════════════════════════════════════════════ */
.st { display: flex; flex-direction: column; gap: clamp(90px, 9vw, 130px); max-width: 1180px; margin: 0 auto; padding: 0 var(--pad) var(--gap-m); }
.st__i { display: grid; grid-template-columns: 440px minmax(0, 1fr); align-items: center; gap: clamp(40px, 7vw, 120px); color: inherit; text-decoration: none; }
.st__i--r { grid-template-columns: minmax(0, 1fr) 440px; }
/* Tornando da una storia (stories.html#nome) la scheda si ferma centrata nello
   schermo, sotto la testata; lo script in fondo alle schede la rimette invece
   esattamente dov'era, se si era entrati da lì. Il bersaglio del # è un segnaposto
   vuoto sul bordo alto della scheda e non la scheda stessa: la scheda è un link, e
   Chrome selezionava il bersaglio disegnandogli il riquadro blu del fuoco. */
.st__i { position: relative; }
.st__ancora { position: absolute; top: 0; left: 0; width: 0; height: 0; scroll-margin-top: max(110px, calc(50vh - 275px)); }
.st__i--r .st__f { order: 2; }
.st__f { width: 100%; }
.st__n { margin: 0; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(2.4rem, 4.6vw, 4.4rem) * var(--fs-display)); line-height: 1.02; letter-spacing: var(--ls-display); }
/* Tutto il nome in Italiana, anche «& il secondo», come nelle storie
   (Federico, 18 settembre): dritto, rientrato sulla seconda riga. */
.st__n em { display: block; padding-left: 0.9em; font-style: normal; }
.st__m { margin: 0.9em 0 0; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-45); }
.st__go { display: inline-flex; align-items: center; gap: 0.9em; margin-top: 34px; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-70); transition: color .45s var(--ease); }
.st__go i { display: block; width: 44px; height: 1px; background: var(--ink-25); transition: width .5s var(--ease), background .4s; }
/* Con il mouse in qualunque punto della scheda (Federico, 18 settembre) si muove
   solo «View the story», come «Read our story» nella home (.btn): la scritta e la
   lineetta prendono l'accento, la lineetta si allunga di una volta e mezza. La
   foto resta ferma. :focus-visible fa lo stesso per chi arriva con la tastiera. */
.st__i:hover .st__go, .st__i:focus-visible .st__go { color: var(--accent); }
.st__i:hover .st__go i, .st__i:focus-visible .st__go i { width: 66px; background: var(--accent); }
/* Sotto i 900 px le righe si impilano: foto sopra, testo sotto. La copertina
   arriva ai bordi dello schermo come la prima foto della storia, così la
   transizione dalla scheda alla storia è la stessa fotografia che si apre
   (variante A di mockup/telefono-stories.html, 21 settembre). Luogo e
   «Entra nella storia» un filo più grandi, e il link si tocca meglio. */
@media (max-width: 899px) {
  .st { gap: 64px; padding-left: 0; padding-right: 0; }
  .st__i, .st__i--r { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .st__i--r .st__f { order: 0; }
  .st__t { padding: 0 var(--pad); }
  .st__n { font-size: 38px; }
  .st__m { margin-top: 0.8em; font-size: 10.5px; letter-spacing: 0.22em; }
  .st__go { margin-top: 22px; padding: 11px 0; font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════
   UNA STORIA (story-*.html)
   Variante B1, scelta da Federico il 18 settembre sul modello di
   Bottega53. Scorrendo in giù il nastro va a sinistra: la sezione è
   alta quanto il nastro è lungo, il palco resta incollato allo schermo
   e main.js sposta il nastro (LA STORIA IN ORIZZONTALE).
   Tutte le foto alla stessa altezza: lo schermo meno la testata con un
   respiro (--top) e meno la fascia dei comandi (--bot). Le verticali
   sono 4:5, le orizzontali 3:2, quindi larghe quasi il doppio.
   ═══════════════════════════════════════════════════════════ */
.sto { --top: 112px; --bot: 74px; --h: calc(100vh - var(--top) - var(--bot)); --gap: clamp(56px, 6.6vw, 104px); position: relative; }
.sto__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sto__track { position: absolute; top: 0; left: 0; width: max-content; height: 100%; display: flex; align-items: flex-start; will-change: transform; }
.sto__f { flex: 0 0 auto; height: var(--h); margin: var(--top) var(--gap) 0 0; background: var(--slot); }
.sto__f--v { aspect-ratio: 4 / 5; }
.sto__f--o { aspect-ratio: 3 / 2; }
.sto__f--q { aspect-ratio: 4 / 3; }   /* la foto dal drone della storia 4, tenuta intera */
.sto__f img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* l'apertura: luogo e nomi a sinistra, la prima foto a destra */
.sto__op { flex: 0 0 auto; display: flex; height: 100%; }
.sto__t { width: max(46vw, 560px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--top) clamp(30px, 4vw, 64px) var(--bot); }
.sto__luogo { margin: 0; font-size: 10px; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--ink-70); }
.sto__reg { margin: 0.5em 0 0; font-family: var(--serif-it); font-style: italic; font-weight: var(--w-it); font-size: 15px; color: var(--ink-45); }
.sto__n { margin: clamp(34px, 4.4vh, 54px) 0 0; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(3.2rem, 5.6vw, 6.4rem) * var(--fs-display)); line-height: 1; letter-spacing: var(--ls-display); }
/* Nelle storie tutto il nome è in Italiana, anche «& il secondo» (Federico,
   18 settembre): Italiana non ha il corsivo, quindi la seconda riga è dritta
   e resta rientrata. */
.sto__n em { display: block; white-space: nowrap; padding-left: 0.9em; font-style: normal; }
.sto__hint { display: flex; align-items: center; gap: 0.9em; margin: clamp(40px, 6vh, 70px) 0 0; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-45); }
.sto__hint i { position: relative; display: block; width: 44px; height: 1px; background: var(--rule); }
.sto__hint i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid var(--ink-25); border-right: 1px solid var(--ink-25); transform: rotate(45deg); }
/* la fine: tornare alle storie (e, quando ci sarà, passare alla prossima) */
.sto__end { flex: 0 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: var(--top) clamp(60px, 9vw, 160px) var(--bot) clamp(20px, 3vw, 50px); }
.sto__next { display: flex; flex-direction: column; gap: 22px; }
.sto__next[hidden] { display: none; }
.sto__k { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-45); }
.sto__nn { font-family: var(--serif); font-size: calc(clamp(2.2rem, 3.6vw, 3.6rem) * var(--fs-display)); line-height: 1.02; color: var(--ink); }
.sto__nn em { display: block; padding-left: 0.9em; font-style: normal; }
.sto__all { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-70); white-space: nowrap; }
/* i comandi: «← Stories» in alto a sinistra, il contatore in basso a sinistra */
.sto__back, .sto__cnt { position: fixed; z-index: 60; transition: opacity .5s var(--ease); }
/* «← Stories» (Federico, 18 settembre): orizzontale, in alto a sinistra, appena
   sotto EN / IT e sullo stesso margine, con il bordo alto delle maiuscole sul
   bordo alto delle foto (112 px, il --top di .sto). C'è solo sull'apertura:
   appena il nastro si muove svanisce (body.sto-via, da main.js) e torna quando
   si torna all'inizio. Sta sempre sulla carta, quindi nessun trucco di colore. */
.sto__back { left: var(--pad); top: 112px; margin-top: -2px; font-size: 10px; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
body.sto-via .sto__back { opacity: 0; pointer-events: none; }
.sto__cnt { left: var(--pad); bottom: 26px; margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.sto__cnt small { margin-left: 0.6em; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink-25); }
/* La chiamata in fondo, nelle storie, nella pagina Stories e nella home: anche
   «Al resto pensiamo noi.» in Italiana, dritta, nel suo grigio. Nelle altre
   pagine resta in corsivo. */
body.pg-storia .close__lead em, body.pg-stories .close__lead em, body.pg-home .close__lead em, body.pg-album .close__lead em, body.pg-wp .close__lead em { font-family: var(--serif); font-style: normal; font-weight: var(--w-mark); }
/* finita la storia sale il piede: i comandi se ne vanno */
body.sto-fuori .sto__back, body.sto-fuori .sto__cnt { opacity: 0; pointer-events: none; }
/* il velo chiaro sotto la testata serve dove le cose le passano sotto; qui le foto
   stanno ferme a 112 px e il velo ne sbiadirebbe il bordo alto */
body.pg-storia:not(.sto-fuori) .hdr::after { opacity: 0; }
/* Sotto i 900 px la storia scorre in verticale: apertura, poi le foto una
   sotto l'altra. Da rifinire nella fase telefono (docs/17-fase-telefono.md). */
@media (max-width: 899px) {
  .sto { height: auto !important; }
  .sto__stage { position: static; height: auto; overflow: visible; }
  /* Sul telefono la storia è un NASTRO verticale (variante A di
     mockup/telefono-storia.html, Federico, 21 settembre): foto a tutta
     larghezza, senza margini, staccate da un filo di 6 px. La freccia
     dell'invito punta in giù, perché qui si scorre in giù. */
  .sto__track { position: static; width: auto; display: block; transform: none !important; padding: 0; }
  .sto__op { display: block; height: auto; }
  .sto__t { width: auto; padding: 120px var(--pad) 46px; }
  .sto__hint i { transform: rotate(90deg); }
  .sto__f { width: 100%; height: auto; margin: 0 0 6px; }
  .sto__end { height: auto; padding: 46px var(--pad) 90px; align-items: center; }
  /* Contatore e ritorno a Stories tornano anche qui, come due pastiglie in
     basso: a sinistra «12 / 41», al centro «← Stories». Stanno sopra le foto,
     quindi hanno la carta dietro. Mentre si scorre spariscono (body.sto-scorre,
     da main.js) e tornano appena ci si ferma; in fondo alla storia se ne
     vanno come sul computer (body.sto-fuori). */
  .sto__back, .sto__cnt { padding: 8px 14px; border-radius: 100px; background: rgba(var(--paper-rgb), .88);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 14px rgba(22,19,15,.10); }
  .sto__back { top: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); margin: 0; padding: 10px 16px; }
  .sto__cnt { left: 18px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 20px; }
  .sto__cnt small { font-size: 8.5px; }
  body.sto-scorre .sto__back, body.sto-scorre .sto__cnt { opacity: 0; pointer-events: none; }
}

/* ═══════════════════════════════════════════════════════════
   IL PASSAGGIO FRA STORIES E UNA STORIA
   Variante B, scelta da Federico il 18 settembre. Lo accendono le due
   pagine con @view-transition (nel loro <head>); qui c'è come deve andare.
   – la copertina e la prima foto della storia hanno lo stesso nome
     (view-transition-name nell'HTML): il browser la fa volare dall'una
     all'altra in 1 s, lenta all'inizio e alla fine;
   – la testata ha un nome suo, così resta ferma e non lampeggia;
   – il resto della pagina vecchia svanisce in 0,45 s; la nuova compare
     da 0,5 s; luogo e nomi della storia salgono appena, da 0,65 s.
   Tornando indietro succede lo stesso al contrario.
   ═══════════════════════════════════════════════════════════ */
.hdr { view-transition-name: testata; }
/* Sul telefono la testata non ha un nome di transizione: durante il passaggio
   fra pagine verrebbe fotografata da sola, senza la fusione con quello che ha
   sotto, e per un attimo sarebbe bianca su carta, cioè invisibile. Così
   passa insieme alla pagina. */
@media (max-width: 899px) { .hdr { view-transition-name: none; } }
.sto__t { view-transition-name: sto-testo; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) { animation-duration: 1s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  ::view-transition-old(root) { animation: .45s ease both vt-via; }
  ::view-transition-new(root) { animation: .55s ease .5s both vt-entra; }
  ::view-transition-old(sto-testo) { animation: .4s ease both vt-via; }
  ::view-transition-new(sto-testo) { animation: .8s cubic-bezier(.16, 1, .3, 1) .65s both vt-sale; }
}
@keyframes vt-via { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }
@keyframes vt-sale { from { opacity: 0; transform: translateY(14px); } }
/* All'arrivo con il passaggio, ciò che è già in vista deve esserci subito:
   se le comparse partissero adesso, la copertina volerebbe verso un posto
   ancora vuoto (main.js, pagereveal). */
html.vt-subito [data-reveal] { transition: none !important; }

/* ═══════════════════════════════════════════════════════════
   EDITORIAL ALBUM (editorial-album.html)
   Variante B, scelta da Federico il 19 settembre: la pagina è
   impaginata come una rivista aperta. La testa riusa .pf__head di
   Portfolio e Stories. Poi una doppia pagina:
   la foto a sinistra, a filo, e a destra la pagina di testo con la
   prima frase in grande, il resto in due colonne, i dettagli
   dell'album e il piede di pagina. In fondo due foto verticali affiancate, separate da un filo
   come la piega di un libro; il video, quando arriva, fra le due.
   ═══════════════════════════════════════════════════════════ */
.ea__head { padding-top: clamp(130px,17vh,190px); padding-bottom: clamp(44px,6vh,80px); }
.ea__sp { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
/* La foto d'apertura è alta quanto lo schermo (variante A del mockup
   editorial-album-apertura, 19 settembre): intera in 2:3 era alta tre quarti
   della larghezza dello schermo e lasciava vuota la pagina di testo. Si taglia
   il muro sopra la custodia e un filo di tavolo sotto; l'album, fra il 22% e il
   90% dell'altezza della foto, resta intero. Mai meno del 72% della foto
   (54vw), così sugli schermi larghi e bassi l'album non si tocca; se il testo
   è più alto, la foto cresce con lui. */
.ea__f { position: relative; margin: 0; min-height: min(75vw, max(100vh, 54vw)); background: var(--slot); }
.ea__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
/* il testo al centro della sua pagina; il piede sta in fondo per conto suo */
.ea__pag { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(60px,8vw,120px) clamp(40px,6vw,100px); border-left: 1px solid var(--rule); }
.ea__k { display: block; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-45); }
.ea__lead { margin: 22px 0 0; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.6rem,2.7vw,2.7rem) * var(--fs-display)); line-height: 1.16; letter-spacing: var(--ls-display); }
.ea__col { margin-top: 36px; columns: 2; column-gap: 40px; color: var(--ink-70); }
.ea__col p { margin: 0 0 1em; break-inside: avoid; }
/* i dettagli dell'album (PDF dello studio, pagina 11): due numeri grandi e una riga */
.ea__dati { display: grid; grid-template-columns: auto auto 1fr; column-gap: clamp(36px,4vw,64px); margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--rule); }
.ea__num b { display: block; font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(2.6rem,4vw,3.8rem) * var(--fs-display)); line-height: 1; letter-spacing: var(--ls-display); }
.ea__num span, .ea__riga { display: block; margin-top: 12px; font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-45); }
.ea__riga { grid-column: 1 / -1; margin: 26px 0 0; }
.ea__riga i { font-style: normal; margin: 0 0.8em; }
.ea__piede { position: absolute; left: clamp(40px,6vw,100px); right: clamp(40px,6vw,100px); bottom: 40px; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-25); }
.ea__dop { display: grid; grid-template-columns: 1fr 1fr; max-width: 1060px; margin: 0 auto; padding: var(--gap-m) var(--pad); }
.ea__dop figure { margin: 0; }
.ea__dop img { display: block; width: 100%; height: auto; }
.ea__dop figure:first-child { padding-right: 22px; border-right: 1px solid var(--rule); }
.ea__dop figure:last-child { padding-left: 22px; }
/* Sotto i 900 px la doppia pagina si impila: foto sopra, testo sotto, una
   colonna. Sul telefono (variante A di mockup/telefono-pagine.html, 21
   settembre) anche le due foto in fondo vanno a tutta larghezza, staccate da
   6 px come nel nastro delle storie, e il piede di rivista «Studio Le
   Fotografe · Editorial Album» non c'è: senza la doppia pagina restava
   sospeso a metà. */
@media (max-width: 899px) {
  .ea__sp { grid-template-columns: 1fr; }
  .ea__f { min-height: 0; aspect-ratio: 2 / 3; }
  .ea__pag { border-left: 0; padding: 50px var(--pad); }
  .ea__piede { display: none; }
  .ea__col { columns: 1; }
  .ea__dop { grid-template-columns: 1fr; gap: 6px; padding-left: 0; padding-right: 0; }
  .ea__dop figure:first-child { padding-right: 0; border-right: 0; }
  .ea__dop figure:last-child { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   L'INFORMATIVA
   Pagina di sole parole, e vanno lette: qui comanda la leggibilità,
   non il display. Titolo nel serif per restare di casa, corpo nel
   sans su misura stretta. La misura è in ch e sta sotto i 70
   caratteri per riga, che è dove l'occhio ritrova l'inizio della
   riga dopo senza perdersi.
   Il rimando sotto il consenso sta FUORI dalla <label>: dentro, un
   clic sul link farebbe scattare anche la casella.
   ═══════════════════════════════════════════════════════════ */
.pv { padding-block: clamp(70px,9vw,130px) clamp(60px,7vw,100px); }
.pv__t { font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(2rem,4.2vw,3.4rem) * var(--fs-display)); line-height: 1.06; letter-spacing: var(--ls-display); }
.pv__agg { margin-top: clamp(14px,1.4vw,20px); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-45); }
.pv__c { max-width: 66ch; margin-top: clamp(40px,5vw,72px); }
.pv__c h2 { margin-top: clamp(34px,3.8vw,56px); font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(1.15rem,1.7vw,1.5rem) * var(--fs-display)); line-height: 1.2; letter-spacing: var(--ls-display); }
.pv__c h2:first-child { margin-top: 0; }
.pv__c p { margin-top: 1.05em; color: var(--ink-70); }
.pv__c h2 + p { margin-top: 0.85em; }
.pv__l { margin-top: 1.05em; padding-left: 1.3em; }
.pv__l li { position: relative; margin-top: .45em; color: var(--ink-70); }
.pv__l li::before { content: ""; position: absolute; left: -1.3em; top: .78em; width: 4px; height: 1px; background: var(--ink-25); }
.pv__nota { margin-top: clamp(40px,5vw,70px); padding-top: clamp(20px,2.2vw,30px); border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-45); }
/* il rimando all'informativa, sotto la casella del consenso */
.ct__priv-a { display: inline-block; margin-top: .7em; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); border-bottom: 1px solid var(--rule); padding-bottom: .25em; transition: color .4s var(--ease), border-color .4s var(--ease); }
.ct__priv-a:hover { color: var(--accent); border-color: var(--accent); }
.ct__fine .ct__priv-a { display: block; width: fit-content; margin-inline: auto; }
/* il rimando nel colophon, in fondo a ogni pagina */
.foot__colo a.foot__priv { color: var(--ink-45); }


/* ═══════════════════════════════════════════════════════════
   LA 404
   Centrata come il DOVE e come la chiusura, perché è una pagina di
   una frase sola. Due rimandi affiancati: tornare indietro o
   scrivere. Nessuna terza via, e nessun link che non porti da
   qualche parte — su una 404 sarebbe una beffa.
   ═══════════════════════════════════════════════════════════ */
.er { padding-block: clamp(90px,13vw,190px) clamp(70px,10vw,140px); text-align: center; }
.er__k { font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-45); margin-right: -0.3em; }
.er__t { margin-top: clamp(22px,2.6vw,38px); font-family: var(--serif); font-weight: var(--w-display); font-size: calc(clamp(2rem,4.6vw,4rem) * var(--fs-display)); line-height: 1.06; letter-spacing: var(--ls-display); }
.er__p { max-width: 46ch; margin: clamp(20px,2.4vw,32px) auto 0; color: var(--ink-70); }
.er__go { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px,4vw,64px); margin-top: clamp(40px,5vw,70px); }


/* ═══════════════════════════════════════════════════════════
   IL TELEFONO, GLI ULTIMI RITOCCHI
   Punto 6 della fase telefono (mockup/telefono-ritocchi.html, Federico,
   21 settembre). Sta in fondo di proposito: le scritte che porta a 11 px
   sono definite in tutto il file, e da qui vince l'ordine, senza
   !important. Il piede, EN / IT e il logotipo sono invece nel blocco dei
   560 px, dove già stavano le loro regole per il telefono.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Nessuna scritta sotto gli 11 px sul telefono: occhielli, etichette,
     rimandi. Sul computer, fra 8,5 e 10,5 px, erano eleganti; in mano si
     leggevano a fatica. La spaziatura stringe a 0.18em, così occupano quasi
     lo stesso posto di prima. Restano piccoli, per scelta: «Studio» nel
     logotipo, le didascalie della griglia (9 px, scelte con il velo) e il
     «/ 41» del contatore delle storie. */
  .masthead__txt, .pf__mast p, .intro__sub, .press__k, .work__go, .btn, .svc__x-go,
  .ab__num-d, .ct__l, .ea__k, .ea__num span, .ea__riga, .wph__k, .wph__n,
  .xs__n, .xs__d, .xs__fine-a, .xs__vid-k, .st__m, .st__go,
  .sto__luogo, .sto__hint, .sto__k, .sto__all, .sto__back,
  .lv__x, .pv__agg, .burger__label, .lang,
  /* e le tre che il mockup non mostrava (mockup/telefono-ritocchi-resto.html):
     i numeri della home, i numeri del menu aperto, l'occhiello della 404 */
  .facts span, .nav__list a em, .er__k { font-size: 11px; letter-spacing: 0.18em; }
  /* le scritte centrate che compensavano la spaziatura di prima (0.3em)
     la compensano con quella nuova */
  .press__k, .er__k { margin-right: -0.18em; }
  .sto__luogo { text-indent: 0.18em; }
  /* La riga sotto i titoli («Fotografia di matrimonio editoriale · Dal 1995»)
     a 11 px non sta più su una riga: va su due, centrate, senza il puntino,
     come le location della griglia. L'incavo rimette in asse ogni riga. */
  .masthead__txt, .pf__mast p { display: flex; flex-direction: column; gap: 0.5em; }
  .masthead__txt b, .pf__mast b { display: none; }
  .masthead__txt span, .pf__mast p span { text-indent: 0.18em; }
}
/* Le aperture di Extra service e About, «a schermo intero». Sul telefono vh
   misura lo schermo come se la barra del browser non ci fosse, quindi il
   titolo, centrato nella schermata, cadeva sotto il centro di quello che si
   vede. svh misura lo schermo con la barra: il titolo torna in mezzo. Chi
   chiede meno movimento tiene le sue regole (altezza libera), per questo
   la condizione no-preference. I browser che non conoscono svh scartano la
   riga e restano su vh, come prima. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .xs__head, .ab__head { height: 100svh; }
  .xs__ancora, .ab__ancora { height: calc(100svh + var(--fase1) + var(--fase2)); }
}


/* ═══════════════════════════════════════════════════════════
   FASE UNO — i link che non portano ancora da nessuna parte
   11 settembre 2026. Online vanno solo la home e i contatti: About,
   Extra service e Wedding photography aspettano le fotografie, mentre
   Stories, Categories ed Editorial album non esistono ancora.

   Pubblicare sei schermate «in costruzione» avrebbe significato
   annunciare sei volte che il sito non è pronto, e dare a Google sei
   pagine vuote proprio nel giorno del cambio hosting. Quindi i link
   non si tolgono: si marcano con data-presto e si spengono qui.

   ⚠︎ QUESTO BLOCCO È TEMPORANEO E NON MODIFICA NULLA.
   Non tocca una sola regola esistente: sono tutte aggiunte che si
   agganciano all'attributo. Gli href restano scritti nei file, le
   classi restano, le animazioni restano. Per riaccendere una pagina
   si cancella data-presto dove serve e il link torna identico a
   prima. Quando è online tutto, si cancella anche questo blocco.
   Lista dei punti esatti in docs/13-fase-uno.md

   pointer-events: none spegne in una riga sola TUTTI gli stati al
   passaggio del mouse — il filetto sotto il titolo del servizio, lo
   scurirsi della fotografia, il trattino che si allunga nel rimando.
   Enumerarli uno per uno avrebbe voluto dire dimenticarne uno.
   ═══════════════════════════════════════════════════════════ */
/* Solo i link. Fino al 17 settembre la regola era [data-presto] e basta, e
   prendeva anche il selettore dei caratteri, che porta lo stesso attributo:
   nella bozza si vedeva ma non rispondeva al clic. Stesso selettore del
   modulo faseUno in main.js, così CSS e JavaScript spengono le stesse cose. */
a[data-presto], [data-presto] a { pointer-events: none; }
.nav__list li[data-presto="via"] { display: none; }