/* ============ 01 · TOKENS & RESET ============ */
:root{
  /* chrome scuro — header, footer, pre-footer */
  --charcoal:#24272d;
  --charcoal-2:#2b2e35;
  /* accento */
  --tan:#ab8b65;
  /* superfici chiare */
  --paper:#ffffff;
  --paper-alt:#fdfcfa;
  /* testo */
  --text:#5a5d62;
  --heading:#2b2e35;
  /* separatori */
  --rule:#eae9e9;
  --rule-strong:#e0dede;

  --display:"Playfair Display", Georgia, serif;
  --body:"Montserrat", Arial, Helvetica, sans-serif;

  --wrap:1170px;
  --header-h:90px;   /* come l'originale; ridotto a 68px sotto i 980px */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ============ 02 · TIPOGRAFIA ============ */
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(0.9375rem,0.2vw + 0.89rem,1rem); /* 15 → 16px */
  line-height:1.9;   /* l'originale è 2.27: temperato per un corpo più denso */
  -webkit-font-smoothing:antialiased;
  /* `clip` e non `hidden`: hidden renderebbe il body un contenitore di scroll
     e l'header sticky si aggancerebbe a quello invece che al viewport */
  overflow-x:clip;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  color:var(--heading);
  font-weight:500;
  line-height:1.25;
}
h1{font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.15}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
h4{font-size:1.2rem}
h5{font-size:1.05rem}
h6{font-size:0.95rem}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.4rem,4vw,3.5rem)}


/* ============ 03 · HEADER ============ */
/* L'header è uscito dal flusso: l'hero occupa tutto il viewport e l'header gli
   sta sopra, nascosto, finché lo scroll non supera la soglia decisa in
   `shouldShowHeader()` (in fondo a index.html) — allora il JS gli mette `.show`.
   ATTENZIONE allo stato mostrato: è `transform:none` e non `translateY(0)`.
   Un transform diverso da `none` rende l'header il blocco contenitore dei suoi
   discendenti `position:fixed`, e sotto i 980px il drawer del menu è proprio
   uno di quelli: si ritroverebbe alto 90px invece che tutto il viewport. */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:0 clamp(1.4rem,4vw,3.5rem);
  background:var(--charcoal);
}
header.nav.show{transform:none}

.brand{display:flex;align-items:center;gap:0.7rem;flex:0 0 auto}
/* Lo stemma sta a piena opacità: nel footer rende al 92% perché lì è largo
   fino a 320px e un bianco pieno di quella taglia strappa sul charcoal, ma
   a 40px l'incisione è già tutta tratti sottili e ogni punto di opacità in
   meno la fa sparire. L'asset è servito a 120px, 3x della resa. */
.brand-mark{width:40px;height:auto}
.brand-word{width:200px;height:auto}

nav.menu{display:flex;align-items:center;gap:clamp(0.9rem,1.7vw,1.75rem)}
nav.menu a{
  font-size:0.875rem;          /* 14px, come l'originale */
  color:#fff;
  white-space:nowrap;
  padding:0.35rem 0;position:relative;
  transition:color .3s ease;
}
nav.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--tan);transition:right .35s ease;
}
nav.menu a:hover,nav.menu a:focus-visible{color:var(--tan)}
nav.menu a:hover::after,nav.menu a:focus-visible::after{right:0}

.menu-toggle{display:none}

/* Le ancore del menu non devono finire sotto l'header fisso. Il valore è
   esattamente l'altezza dell'header, non uno in più: ogni pixel di margine
   extra è un pixel di sezione precedente che resta visibile fra header e
   banda, e siccome le sezioni chiudono su fondo bianco si legge come una
   riga chiara. L'header ha `height:var(--header-h)` fissa, quindi
   il suo bordo inferiore cade sempre a quella quota e i due bordi combaciano. */
section[id],main[id]{scroll-margin-top:var(--header-h)}

:focus-visible{outline:2px solid var(--tan);outline-offset:3px}

/* l'header è tornato primo nel DOM (fixed, l'ordine non vincola più il
   layout): lo skip-link scavalca hero e menu per portare al contenuto */
.skip-link{
  position:absolute;left:50%;top:0;transform:translate(-50%,-120%);
  z-index:100;padding:0.7rem 1.2rem;
  background:var(--charcoal);color:#fff;
  font-size:0.8rem;letter-spacing:0.08em;
  transition:transform .25s ease;
}
.skip-link:focus{transform:translate(-50%,0)}

/* ============ 04 · HERO ============ */
/* Ricostruito allo step 3 sul comportamento reale dell'originale: lo slider
   Avada aveva data-full_screen="1" con slider_position:"above", quindi il JS
   del tema gli dava height = window.height() - headerHeight. Qui l'hero prende
   invece tutto il viewport, con l'header in sovrimpressione a comparsa. */
.hero{
  position:relative;
  height:100svh;   /* pieno: l'header è fuori dal flusso e non scala più l'hero */
  min-height:420px;
  display:grid;place-items:center;
  padding:0 clamp(1.4rem,5vw,3rem);
  text-align:center;
  background-image:url("../images/home-C.jpg");
  background-size:cover;
  background-position:center 38%;   /* la tavola sta nella metà bassa dello scatto */
  background-attachment:fixed;      /* il parallax dell'originale, senza JS */
  background-color:var(--charcoal); /* si vede solo finché la foto non è decodificata */
}

/* Protezione del testo bianco sulla foto. home-C.jpg ha luminanza media
   134/255 ma è più chiara nella metà superiore (tavola di abete a sgorbio sotto
   luce radente), proprio dove sta il wordmark. Overlay piatto e non gradiente
   top-weighted: uniforme a ogni ritaglio responsive, senza stop percentuali da
   riallineare al soggetto quando il crop cambia. Validato a schermo dal
   committente a 0.35 — se in futuro la foto cambia, va rimisurato. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,0.35);
}

/* Niente cap artificiale sulla larghezza: `width:max-content` rende il blocco
   largo quanto la riga più lunga senza andare a capo, e `max-width:100%` lo fa
   rientrare — e quindi mandare a capo — solo quando davvero non entra. Così su
   desktop titolo e sottotitolo stanno su una riga sola a ogni larghezza, senza
   breakpoint da tarare a mano. */
.hero-inner{
  position:relative;z-index:1;
  width:max-content;
  max-width:100%;
}

.hero h1{
  color:#fff;
  text-transform:uppercase;
  text-wrap:balance;   /* quando lo spazio finisce davvero, spezza equilibrato */
  font-size:clamp(2.1rem,6vw,70px);   /* 70px come l'originale */
  line-height:1.2;                    /* 84/70 dell'originale */
  font-weight:400;
}
.hero p{
  color:#fff;
  font-family:var(--display);
  font-size:clamp(1.05rem,2.2vw,24px);
  letter-spacing:2px;
  line-height:1.5;
  text-wrap:balance;
  margin-top:clamp(0.8rem,2vh,1.4rem);
  /* il letter-spacing aggiunge 2px anche dopo l'ultimo carattere: senza questo
     la riga risulta centrata 1px a sinistra rispetto al titolo */
  margin-right:-2px;
}

/* L'animazione d'ingresso è in CSS e non in JS: l'hero è il contenuto più
   importante della pagina e non deve dipendere dallo script per esistere.
   (Le sezioni sotto usano ancora .reveal — sistemato allo step 9.) */
@media(prefers-reduced-motion:no-preference){
  .hero h1,.hero p{animation:hero-rise 1s cubic-bezier(.22,.61,.36,1) backwards}
  .hero h1{animation-delay:.15s}
  .hero p{animation-delay:.45s}
}
@keyframes hero-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* Freccia "scorri". Allineata al margine sinistro dell'header — stesso clamp
   del suo padding — così cade a piombo sotto il logo. L'area cliccabile è più
   grande del disegno (padding sul link) perché 24px di tratto sono un bersaglio
   troppo piccolo per il dito: il padding la porta a ~48px. */
.hero-scroll{
  position:absolute;z-index:1;
  left:calc(clamp(1.4rem,4vw,3.5rem) - 0.75rem);
  bottom:clamp(1rem,3.5vh,2.2rem);
  padding:0.75rem;
  color:#fff;
  opacity:0.85;
  transition:opacity .3s ease;
}
.hero-scroll:hover,.hero-scroll:focus-visible{opacity:1}
.hero-scroll svg{
  display:block;
  fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  /* dietro il tratto la foto è scura (misurato 9:1 a 1440x900), ma il ritaglio
     di `cover` si sposta a ogni formato e in quell'angolo ci sono trucioli
     chiarissimi: l'ombra tiene il tratto leggibile senza doverla rimisurare a
     ogni breakpoint */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

/* Rimbalzo leggero: la freccia scende e risale con un contraccolpo smorzato,
   poi resta ferma metà ciclo — un'animazione continua senza pausa diventa
   rumore visivo accanto a un titolo che vuole calma. L'animazione sta sullo
   svg e non sul link: il link porta il padding dell'area cliccabile, che non
   deve muoversi sotto il dito. */
@media(prefers-reduced-motion:no-preference){
  .hero-scroll svg{animation:hero-nudge 2.6s cubic-bezier(.45,0,.55,1) 1.2s infinite}
}
@keyframes hero-nudge{
  0%,45%,100%{transform:translateY(0)}
  18%{transform:translateY(9px)}
  31%{transform:translateY(3px)}
}

/* ============ 05 · INTRO ============ */
/* 3 colonne da 1/3 sotto l'hero — padding 150/105 dell'originale.
   Stessa lingua della bio (banner 06): Playfair sui titoli, misura di riga
   temperata, immagini alla larghezza della colonna. */
.intro{
  padding-top:clamp(3.5rem,10vw,150px);
  padding-bottom:clamp(3rem,7vw,105px);
}
.intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,4vw,3rem);
  align-items:start;
}
/* le righe dei titoli sono spezzate a mano con <br> nell'originale: la scala
   va tenuta sotto la larghezza di colonna, non ereditata dal banner 02
   (h2 arriverebbe a 41px e "of violins, violas" sborderebbe) */
.intro h2{font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.35}
.intro-ricciolo{width:min(100%,250px);margin-top:clamp(1.4rem,3vw,2.2rem);opacity:0.75}
.intro-stemma{width:min(60%,175px);margin-top:clamp(1.6rem,3.5vw,2.6rem)}
.intro-photo{width:100%;max-width:300px}
.intro-quote{
  font-size:clamp(1.1rem,1.8vw,1.45rem);
  line-height:1.65;
  margin-top:clamp(1.2rem,2.5vw,1.6rem);
  color:var(--heading);
}
/* la colonna 1/3 misura ~35 caratteri: un terzo della bio. Più stretta è la
   misura, più corta va l'interlinea — 2.05 qui slegherebbe le righe */
.intro-prose{line-height:1.8}
.intro-prose p + p{margin-top:1.4rem}

/* ============ 06 · BIO (about me) ============ */
/* Banda-intestazione: foto fullwidth, parallax senza JS, titolo nel wrap.
   Niente overlay e titolo nero perché chi-sono-slider.jpg è un controluce
   (luminanza media 194, fascia centrale 247): il bianco ci sparirebbe, mentre
   le colonne di sinistra — dove cade il titolo — stanno fra 167 e 254 a
   qualunque ritaglio. Unica banda del sito: l'impalcatura per gestirne cinque
   con overlay variabile sta nel commit 35e09cf, se dovessero tornare. */
.band{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(240px,32vh,340px);
  padding:clamp(2.5rem,7vw,110px) 0;
  background-size:cover;
  /* su custom property perché è l'unica famiglia di proprietà che i
     pseudo-elementi ereditano: il layer parallax del banner 10 la rilegge */
  --band-pos:center top;
  background-position:var(--band-pos);
  background-attachment:fixed;   /* fallback a `scroll` nel banner 10 */
}
/* la bio non ha overlay (--band-overlay resta 0 e il titolo è nero); le altre
   bande dichiarano il proprio velo nel banner della loro sezione.
   `--band-veil` è la via d'uscita per le foto che non si lasciano coprire da un
   velo uniforme: chi la usa passa un `background` intero (vedi workshop). */
.band::before{
  content:"";position:absolute;inset:0;
  background:var(--band-veil,rgba(0,0,0,var(--band-overlay,0)));
}
.band .wrap{position:relative;width:100%}
.band h2{
  font-size:clamp(1.25rem,2.6vw,30px);
  letter-spacing:2px;text-transform:uppercase;
}

.band--about{background-image:url(../images/chi-sono-slider.jpg)}

.bio-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 3fr;
  gap:clamp(1.6rem,4vw,3rem);
  padding-top:clamp(2.5rem,6vw,80px);
  padding-bottom:clamp(3rem,7vw,90px);
}
.bio-side h3{line-height:1.2}
/* nell'originale il truciolo riempie la colonna 1/4 (~270px): sotto i 200px
   l'ombra morbida pesa più del soggetto */
.bio-chip{width:100%;max-width:260px;margin-top:clamp(1.2rem,3vw,2.2rem)}
/* la colonna 3/4 arriva a ~760px: a 16px sono ~95 caratteri per riga.
   L'originale reggeva la misura lunga con line-height 2.27; qui si tempera
   da entrambi i lati — un cap morbido e un'interlinea più aria del body. */
.bio-prose{max-width:70ch;line-height:2.05}
.bio-prose p + p{margin-top:1.5rem}

/* ============ 06b · WORKSHOP ============ */
/* Sezione nuova, non presente nell'archivio: costruita sul pattern di about-me
   (banda parallax col nome della sezione, poi il contenuto nel wrap) perché è
   lo standard di sezione scelto dal committente.
   Le quattro voci sono righe `1fr 3fr` — la stessa proporzione di `.bio-body`,
   non una nuova: la colonna di prosa cade sulla verticale della bio e le due
   sezioni si leggono come un blocco solo. Nessuna scheda e nessun fondo
   colorato: a separare le righe basta il filetto `--rule`, come ovunque nel
   sito. Il filetto tan sotto il titolo del servizio è l'unico accento. */

.band--workshop{
  background-image:url(../images/servizi-fascia.jpg);
  /* Foto fornita dal committente (4 riccioli in bianco, 4128×3096 → 2200px q48
     come le altre bande). È l'unica banda dove un velo uniforme non funziona:
     il soggetto è legno non verniciato — luminanza fino a 0.98, la più alta del
     sito — su un fondo di libreria quasi nero. Un velo piatto abbastanza denso
     da salvare il bianco sopra i riccioli (0.53+) spegnerebbe tutta la foto,
     e a 0.45 il caso peggiore resta 3,37:1 a 600px: sotto la soglia AA, perché
     l'h2 a quelle larghezze è 20px e non conta come "testo grande".
     Il velo è quindi orizzontale e sta dove sta il titolo — sempre a sinistra,
     a qualunque ritaglio, quindi gli stop non vanno riallineati al soggetto
     come sarebbe successo con un gradiente verticale.
     Misurato col modello severo del parallax: con `background-attachment:fixed`
     la foto è ritagliata sul viewport e scorrendo *qualunque* fascia verticale
     può capitare dietro al titolo, quindi il caso peggiore è il pixel più
     chiaro dell'intera colonna, non della sola porzione visibile a banda
     ferma. Così misurato a 1440/1170/900/600/390px il minimo è 4,86:1 (mobile)
     — sopra la soglia AA — mentre il ricciolo grande di destra resta
     praticamente scoperto (alpha 0.05–0.12). */
  --band-veil:linear-gradient(90deg,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.12) 75%,
    rgba(0,0,0,0.05) 100%);
}
.band--workshop h2{color:#fff}

.workshop{padding-bottom:clamp(3rem,8vw,120px)}

.shop-body{padding-top:clamp(2.5rem,6vw,80px)}

.shop-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 3fr;
  gap:clamp(1.6rem,4vw,3rem);
  padding:clamp(1.8rem,4vw,2.6rem) 0;
}
/* il primo servizio è già distanziato dalla banda da `.shop-body`: un altro
   padding sopra lo staccherebbe il doppio degli altri */
.shop-item:first-child{padding-top:0}
.shop-item + .shop-item{border-top:1px solid var(--rule)}

.shop-item h3{
  font-style:italic;
  font-weight:400;      /* il corsivo di Playfair a 500 impasta le grazie */
  line-height:1.3;
}
.shop-item h3::after{
  content:"";display:block;
  width:34px;height:1px;background:var(--tan);
  margin-top:clamp(0.7rem,1.5vw,1rem);
}

/* stessa misura e stessa interlinea della prosa della bio */
.shop-prose{max-width:70ch;line-height:2.05}
.shop-prose p + p{margin-top:1.5rem}

/* i puntini elenco del documento diventano trattini tan: il pallino nero del
   browser è l'unico segno geometrico della pagina e stona */
.shop-list{list-style:none;margin-top:1rem}
.shop-list li{position:relative;padding-left:1.7rem;line-height:1.85}
.shop-list li + li{margin-top:0.4rem}
.shop-list li::before{
  content:"";position:absolute;left:0;top:0.92em;
  width:11px;height:1px;background:var(--tan);
}

/* ============ 06c · NEW INSTRUMENTS ============ */
/* Banda + galleria di sole foto: nessuna didascalia, nessun titolo di scheda.
   La griglia è "giustificata": ogni foto dichiara il proprio rapporto
   d'aspetto in `--r` e riceve crescita *e* base proporzionali a quel rapporto
   (`flex:var(--r) 1 calc(var(--r)*260px)`). Quando la riga si riempie, le
   larghezze finali restano proporzionali ai rapporti, quindi tutte le foto
   della riga hanno la stessa altezza: le righe sono allineate in alto e in
   basso come in una griglia, ma quante foto ci stiano lo decide il wrap del
   flex — 3, 3, 2, 3, 4 con l'ordine attuale. L'alternativa scartata era
   `columns` (allinea le colonne e lascia le righe libere, come faceva la
   galleria di "My last works"): va bene quando sotto ogni foto c'è una
   didascalia, non qui, dove l'occhio deve poter correre per righe.
   Le stesse regole servono anche la galleria di restoration.
   Nessuna foto viene ritagliata: il rapporto in `--r` è quello dello scatto. */

.band--instruments{
  background-image:url(../images/strumenti-fascia.jpg);
  /* Secondo caso, dopo il workshop, in cui il velo uniforme non funziona:
     l'etichetta nell'effe è quasi bianca (luminanza fino a 0.86 nella colonna
     del titolo a 390px, 0.71 sul desktop) mentre il resto della foto è legno
     rosso scuro — media 0.10. Un velo piatto denso abbastanza da salvare il
     titolo (0.51+) spegnerebbe l'intera banda.
     Come nel workshop il velo è quindi orizzontale, denso dove il titolo cade
     a ogni ritaglio — sempre a sinistra — e leggero a destra, dove l'etichetta
     resta leggibile. Misurato col modello severo del parallax (con
     `background-attachment:fixed` la foto è ritagliata sul viewport e
     scorrendo qualunque fascia può finire dietro al titolo, etichetta
     compresa): a 1440/1170/900/600/390px il caso peggiore è 6,2:1, sopra la
     soglia AA anche per l'h2 da 20px del mobile. */
  --band-veil:linear-gradient(90deg,
    rgba(0,0,0,0.66) 0%,
    rgba(0,0,0,0.58) 48%,
    rgba(0,0,0,0.26) 78%,
    rgba(0,0,0,0.14) 100%);
}
.band--instruments h2{color:#fff}

.instruments{padding-bottom:clamp(3rem,8vw,120px)}

.shots{
  display:flex;flex-wrap:wrap;
  /* solo l'ultima riga può restare corta: centrarla evita la coda ragged */
  justify-content:center;
  align-items:stretch;
  gap:15px;   /* lo stesso passo che aveva la galleria di "My last works" */
  padding-top:clamp(2.5rem,6vw,80px);
}
.shot{
  flex:var(--r) 1 calc(var(--r) * 260px);
  /* rete di sicurezza contro le proporzioni estreme, non un limite di resa: a
     520 il cap non morde mai dentro il wrap (una 3:2 da sola arriva a 780px,
     più della colonna), quindi una riga con una foto sola — succede fra 640 e
     860px, dove le due orizzontali di fila non stanno più affiancate — la
     riempie tutta invece di lasciare due margini bianchi */
  max-width:calc(var(--r) * 520px);
  margin:0;
  overflow:hidden;
  border:1px solid var(--rule);
  background:var(--paper-alt);
  box-shadow:0 18px 40px -32px rgba(36,39,45,0.55);
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .8s ease;
}
.shot.in{opacity:1;transform:none}
/* `height:100%` + `object-fit:cover` assorbe l'arrotondamento a sub-pixel che
   altrimenti lascerebbe una riga disallineata di 1px in basso; `aspect-ratio`
   tiene l'altezza giusta prima che la foto sia caricata (niente salti). */
.shot img{
  width:100%;height:100%;
  aspect-ratio:var(--r);
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.shot:hover img{transform:scale(1.04)}

/* ============ 07 · RESTORATION ============ */
/* Sezione nuova, al posto di "My last works". Nessun componente nuovo: la prosa
   riusa la griglia `1fr 3fr` di bio e workshop, la galleria riusa `.shots`/
   `.shot` di new instruments senza una sola regola in più. */

.band--restoration{
  background-image:url(../images/restauro-fascia.jpg);
  /* Terza banda difficile, e l'unica risolta in esportazione invece che in CSS.
     La foto (il banco delle vernici) ha dietro una finestra in controluce che a
     piena risoluzione tocca luminanza 0.996 su tutta la larghezza: né un velo
     uniforme né un gradiente orizzontale come quelli di workshop e new
     instruments possono salvarla, perché il punto bruciato cade dietro al
     titolo a qualunque ritaglio. Per portare il bianco ad AA sarebbe servito un
     velo 0.82, cioè spegnere la foto.
     Siccome quelle alte luci sono bruciate e non contengono dettaglio,
     `restauro-fascia.jpg` è esportata con un ginocchio: sotto 0.55 sRGB la foto
     è intatta, sopra le luci sono compresse su un tetto di 0.62. Il massimo di
     luminanza scende da 0.996 a 0.341 e la finestra diventa un grigio chiaro
     invece di un buco bianco.
     Con quel file basta il velo uniforme: misurato col modello severo del
     parallax (background-attachment:fixed riquadra sul viewport, scorrendo
     qualunque fascia può finire dietro al titolo) a 1440/1170/900/600/390px il
     caso peggiore è 4,76:1 — sopra AA, come il workshop a 4,86:1.
     ATTENZIONE: se si sostituisce la foto va rifatto il ginocchio, altrimenti
     il velo da solo non basta. L'originale sta in materiali_cassutti. */
  --band-overlay:0.5;
}
.band--restoration h2{color:#fff}

.restoration{padding-bottom:clamp(3rem,8vw,120px)}

/* stessa proporzione di `.bio-body` e `.shop-item`, non una nuova: la colonna
   di prosa cade sulla verticale della bio e del workshop, e le tre sezioni si
   leggono come un blocco solo */
.resto-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 3fr;
  gap:clamp(1.6rem,4vw,3rem);
  padding-top:clamp(2.5rem,6vw,80px);
}
/* corsivo col filetto tan: la stessa firma dei titoli di servizio del workshop.
   Qui però è il sottotitolo della sezione, uno solo, non una riga di listino. */
.resto-side h3{
  font-style:italic;
  font-weight:400;      /* come .shop-item h3: il corsivo di Playfair a 500 impasta le grazie */
  line-height:1.3;
}
.resto-side h3::after{
  content:"";display:block;
  width:34px;height:1px;background:var(--tan);
  margin-top:clamp(0.7rem,1.5vw,1rem);
}
/* stessa misura e stessa interlinea della prosa della bio e del workshop */
.resto-prose{max-width:70ch;line-height:2.05}
.resto-prose p + p{margin-top:1.5rem}

/* ============ 08 · CONTACT ============ */
/* La pagina /contacts/ dell'archivio ha la stessa impalcatura di about-me e
   my-last-works: banda parallax col nome della sezione in bianco (30px,
   letter-spacing 2px) e sotto il blocco dei dati, centrato. Ripresa uguale,
   meno il form Contact Form 7 che la chiudeva: su GitHub Pages non ha un
   destinatario.

   La foto della banda non è quella dell'originale: `20180620_162247.jpg` non
   è mai stata catturata da Wayback (manca dal CDX l'intera cartella 2018/11)
   e il sito live risponde 404. Il ripiego d'archivio (`laboratorio-slider-2.jpg`)
   è a sua volta caduto: il committente ha fornito lo scatto che voleva qui,
   padre e figlio in strada con le custodie — che dice della sezione contatti
   molto più di un banco di lavoro. */

.band--contact{
  /* 1600×960 (1,667:1, la stessa proporzione delle altre bande), q48 — ma non
     l'originale del committente: il terzo alto era cielo bruciato, media 248 su
     255. Sotto `background-attachment:fixed` la foto è ancorata al viewport e
     la banda ci scorre dentro, quindi *tutta* l'altezza passa dietro al titolo,
     cielo compreso: il pixel peggiore era 255 a ogni larghezza (1:1 di
     contrasto). Un velo uniforme capace di salvarlo (0,55) avrebbe spento la
     foto, e un gradiente verticale non può inseguire il cielo perché il velo
     scorre col blocco mentre la foto no — il trucco orizzontale di workshop e
     new instruments qui non si applica, il problema è in alto, non a sinistra.
     Risolto in esportazione, come si farebbe con un degradante ND: una spalla
     sulle alte luci bruciata nel file (sotto 150 invariato, 255 → 200, raccordo
     quadratico). Il cielo diventa foschia grigia, il soggetto non è toccato —
     le custodie stanno a ~180 — e il velo può restare quello delle altre
     bande. */
  background-image:url(../images/contatti-fascia.jpg);
  /* `center bottom` è la posizione dell'originale, e qui è anche quella giusta:
     dove il ritaglio verticale morde, a cadere è il cielo e non i due che
     camminano, che stanno nella metà bassa. */
  --band-pos:center bottom;
  /* Rimisurato sul file con la spalla, stesso modello severo del parallax (il
     pixel più chiaro dell'intera colonna su cui cade l'h2) a 1440/1170/900/600/
     390px: caso peggiore 4,95:1, media da 7,0 a 9,3:1. Sopra la soglia AA a
     ogni larghezza, comprese quelle dove l'h2 scende a 20px e non conta più
     come testo grande. Il valore non cambia rispetto alla foto precedente. */
  --band-overlay:0.45;
}
.band--contact h2{color:#fff}

.contact{padding-bottom:clamp(3rem,8vw,120px)}

.contact-body{
  padding-top:clamp(2.5rem,6vw,80px);
  text-align:center;
}
.contact-who{
  font-family:var(--display);
  font-size:clamp(1.25rem,2vw,1.5rem);
  color:var(--heading);
  margin-bottom:0.6rem;
}
.contact-lines{
  font-style:normal;   /* `address` arriva in corsivo dal default del browser */
  /* qui l'interlinea 2.27 dell'originale si può tenere per intero: sono
     quattro righe corte, non un paragrafo — l'aria non affatica la lettura */
  line-height:2.27;
}
/* i link diventano tan al passaggio, come le voci del menu. Se si vogliono
   distinguibili già da fermi, è qui che va il filetto:
   `border-bottom:1px solid var(--rule-strong)` su `.contact-lines a`. */
.contact-lines a{color:inherit;transition:color .3s}
.contact-lines a:hover{color:var(--tan)}

/* I due profili social. Riga centrata sotto l'indirizzo, staccata dal filetto
   `--rule` perché sono un'altra cosa dai recapiti: lì sopra c'è dove trovarlo,
   qui dove seguirlo. Icone di solo tratto a 1,4px — lo stesso peso del resto
   del sito, che non ha un solo glifo pieno — e l'etichetta accanto: il colore
   e l'hover tan sono quelli delle voci di menu. */
.contact-social{
  list-style:none;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(1.4rem,4vw,2.6rem);
  margin-top:clamp(1.8rem,4vw,2.4rem);
  padding-top:clamp(1.6rem,3.5vw,2rem);
  border-top:1px solid var(--rule);
}
.contact-social a{
  display:inline-flex;align-items:center;gap:0.6rem;
  font-size:0.875rem;letter-spacing:0.06em;
  color:var(--heading);
  transition:color .3s;
}
.contact-social svg{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
/* il puntino dell'obiettivo e la capsula dell'auricolare sono massa, non
   contorno: da tratto uscirebbero due anellini */
.contact-social svg .dot{fill:currentColor;stroke:none}
.contact-social a:hover,.contact-social a:focus-visible{color:var(--tan)}

/* ============ 09 · FOOTER ============ */
/* Riscritto allo Step 8. Il footer legacy puntava a quattro token — `--ink`,
   `--hairline`, `--muted`, `--muted-dim` — caduti dalla palette allo Step 1:
   le regole risolvevano a nulla e il footer rendeva su fondo bianco con il
   testo del body. Qui rientra nella palette vera.

   Due livelli: il marchio centrato su `--charcoal`, poi la barra copyright su
   `--charcoal-2`, un gradino più chiara. Il filetto tan da 12px che chiudeva
   in alto è caduto — lo stacco fra il bianco della sezione contatti e il
   chrome scuro regge da solo. */

.fmain{background:var(--charcoal);padding:clamp(2.4rem,5vw,3.4rem) 0}
/* una colonna sola, quindi il marchio si centra e basta: il flex con
   space-between serviva quando accanto c'era la lista contatti */
.fmain .wrap{display:flex;justify-content:center}
/* Il logo completo fornito dal committente è tratto nero su fondo bianco: sul
   charcoal sarebbe invisibile. In `images/` sta come PNG bianco su trasparente
   (alfa = 255 - luminanza, così l'antialiasing dell'incisione resta morbido
   invece di ritagliarsi a scalini) a 640px, il doppio della resa massima. */
.fmark{width:clamp(210px,26vw,320px);height:auto;opacity:0.92}

.flegal{background:var(--charcoal-2);padding:1.1rem 0}
.flegal p{
  font-size:0.68rem;letter-spacing:0.04em;line-height:1.7;
  text-align:center;
  /* niente cap di misura: e' una riga sola di dati legali, non un paragrafo
     da leggere — spezzarla a 70ch la mandava a capo dopo "P.IVA" */
  color:rgba(255,255,255,0.45);
}

/* ============ 10 · UTILITY & RESPONSIVE ============ */
/* il menu a 7 voci smette di entrare accanto al logo già sotto i 1000px */
@media(max-width:980px){
  :root{--header-h:68px}
  .brand-mark{width:34px}
  .brand-word{width:170px}
  nav.menu{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    background:var(--charcoal);
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:2rem 2.2rem;gap:1.4rem;transform:translateX(100%);transition:transform .4s ease;
    border-left:1px solid rgba(255,255,255,0.12);
  }
  nav.menu.open{transform:none}
  nav.menu a{font-size:1rem}
  .menu-toggle{
    display:flex;flex-direction:column;gap:5px;width:30px;height:22px;justify-content:center;
    background:none;border:0;cursor:pointer;z-index:60;
  }
  .menu-toggle span{display:block;height:1.5px;background:#fff;transition:transform .3s,opacity .3s}
  .menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-toggle.open span:nth-child(2){opacity:0}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media(max-width:860px){
  .intro-grid{grid-template-columns:1fr;max-width:620px}
  .bio-body{grid-template-columns:1fr}
  .resto-body{grid-template-columns:1fr}
  /* impilate, le righe del listino hanno bisogno di meno aria fra titolo e
     testo di quanta ne serva fra due colonne */
  .shop-item{grid-template-columns:1fr;gap:clamp(0.9rem,2.5vw,1.2rem)}
  /* background-attachment:fixed è rotto su iOS e inutile sul touch —
     l'originale disattivava il parallax sotto i 920px, noi sotto 860.
     L'hero resta fermo; le bande riprendono il parallax poco sotto, con un
     meccanismo che sul touch regge. */
  .hero,.band{background-attachment:scroll}

  /* Parallax delle bande sul mobile, senza JS e senza `fixed`.
     `fixed` ancora lo sfondo al viewport e obbliga a ridipingere l'area
     visibile a ogni frame: su iOS è proprio l'implementazione a essere rotta
     (l'immagine si blocca e scatta a fine scroll), su Android il collasso
     della barra indirizzi cambia l'altezza del viewport e fa saltare il
     ritaglio. Qui invece la foto passa su un layer che è più alto della banda
     e trasla in `transform`: gira sul compositor, senza ridisegni.
     Il moto lo dà `animation-timeline:view()` — la timeline avanza da quando
     la banda entra nella finestra a quando ne esce, quindi niente listener di
     scroll. Chi non la supporta (iOS ≤ 18, Firefox datati) non entra nella
     @supports e vede la banda ferma esattamente com'è oggi. */
  @supports (animation-timeline: view()){
    /* `clip` e non `hidden`: `overflow:hidden` crea uno scroll container, e
       allora `view()` aggancerebbe la timeline alla banda stessa — che non
       scorre mai — invece che al documento, lasciando il layer immobile.
       `overflow:clip` ritaglia senza rendere scrollabile nulla.
       `isolation` tiene gli z-index qui sotto dentro la banda.
       `--par` è mezza corsa del parallax, ed è l'unica manopola: in `vh` e non
       in %, così l'ampiezza non dipende dall'altezza del layer ed è un numero
       leggibile — 14vh su uno schermo da 844px sono ~118px per lato, 236px di
       corsa contro i ~1114px di scroll che la banda impiega ad attraversare la
       finestra (coefficiente ~0,21). `vh` e non `svh`: è il viewport grande,
       che non cambia quando la barra indirizzi si ritrae, quindi la corsa
       resta stabile durante lo scroll. */
    .band{overflow:clip;isolation:isolate;--par:14vh}
    /* il layer copre la foto della banda, il velo deve restargli sopra e il
       titolo sopra a entrambi: senza z-index espliciti ::after vincerebbe su
       ::before, che lo precede nell'albero */
    .band::after{
      content:"";position:absolute;z-index:0;
      /* il gioco verticale è esattamente la corsa, più 4px di margine perché
         agli estremi il bordo del layer non affiori per arrotondamenti */
      inset:calc(-1 * var(--par) - 4px) 0;
      background-image:inherit;
      background-size:cover;
      background-position:var(--band-pos);
      /* longhand e non shorthand: `animation` azzera `animation-timeline` */
      animation-name:band-shift;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
    }
    .band::before{z-index:1}
    .band .wrap{z-index:2}
  }
}
/* La corsa è ±--par, in lunghezza assoluta: `inset` ci si adegua da solo, non
   c'è più un secondo numero da tenere allineato. */
@keyframes band-shift{
  from{transform:translateY(calc(-1 * var(--par)))}
  to  {transform:translateY(var(--par))}
}
/* sotto i 640px una riga da due sacrifica troppo il lato corto delle verticali
   (sotto i 150px di larghezza): le foto vanno una sopra l'altra, a piena
   colonna, e la galleria smette di essere giustificata */
@media(max-width:640px){
  .shots{display:block;max-width:420px;margin:0 auto}
  .shot{max-width:none}
  .shot + .shot{margin-top:15px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  header.nav{transition:none}
  .shot{opacity:1!important;transform:none!important;transition:none!important}
  .hero,.band{background-attachment:scroll}
  /* il layer resta, fermo a metà corsa: è un crop valido, come un
     `background-position` centrato */
  .band::after{animation:none}
  .shot img{transition:none}
}