/* =========================================================
   Alessandra Reni, Architetto
   Carta calda, inchiostro oliva, il segno a matita.
   ========================================================= */

:root{
  --canvas:#FAF8F2;
  --panel:#F0EDE4;
  --ink:#33362D;
  --ink-soft:#64675A;
  /* il nero vero del marchio, campionato dentro il tratto pieno di logo.jpg.
     Serve al segno di Alessandra, non al testo. */
  --logo:#3C3D35;
  --line:#D6D2C7;
  --line-strong:#8A8577;
  --accent:#A2543A;
  --accent-hover:#8C4630;
  --accent-muted:rgba(162,84,58,.22);

  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --hdr-h:124px;
  --gutter:clamp(20px,4vw,64px);
  --gap:clamp(26px,3.4vw,68px);
  --tile-h:min(70vh,calc(100vh - var(--hdr-h) - 84px));
  --tile-h:min(70svh,calc(100svh - var(--hdr-h) - 84px));
  --raggio:clamp(10px,1.5vh,16px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}

img{max-width:100%;display:block}
[hidden]{display:none !important}

a{color:inherit;text-decoration:none}

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

/* il marchio definito una volta sola: non deve occupare spazio */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip{
  position:fixed;left:12px;top:-70px;z-index:80;
  background:var(--ink);color:var(--canvas);
  padding:10px 16px;font:500 12px/1 var(--mono);letter-spacing:.1em;
  transition:top .25s var(--ease);
}
.skip:focus{top:12px}

main:focus{outline:none}

/* ---------- lo strato d'ambiente, uno per tutto il sito ---------- */

.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 8%,rgba(255,253,247,.9) 0%,rgba(250,248,242,0) 62%),
    radial-gradient(90% 70% at 88% 96%,rgba(162,84,58,.05) 0%,rgba(250,248,242,0) 60%),
    var(--canvas);
}
.env::before{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(38% 32% at 62% 40%,rgba(162,84,58,.07),rgba(162,84,58,0) 70%);
  opacity:.55;
  animation:breathe 96s var(--ease-soft) -22s infinite;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.5}
  50%{transform:translate3d(-2.5%,1.8%,0) scale(1.08);opacity:.72}
}

/* ---------- testata ---------- */

.hdr{
  position:fixed;inset:0 0 auto;z-index:40;
  height:var(--hdr-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--gutter);
  background:linear-gradient(to bottom,var(--canvas) 58%,rgba(250,248,242,0));
}

.hdr__nav{display:flex;gap:clamp(16px,2vw,32px);align-items:baseline}
.hdr__nav a{
  font:500 11px/1 var(--mono);letter-spacing:.16em;
  color:var(--ink-soft);
  padding:8px 0;
  position:relative;
  transition:color .3s var(--ease);
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--ink);
  transition:right .42s var(--ease);
}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a:hover::after{right:0}
body[data-view="progetti"] .hdr__nav a[data-go="progetti"],
body[data-view="progetto"] .hdr__nav a[data-go="progetti"],
body[data-view="chi-sono"] .hdr__nav a[data-go="chi-sono"],
body[data-view="contatti"] .hdr__nav a[data-go="contatti"]{color:var(--ink)}
body[data-view="progetti"] .hdr__nav a[data-go="progetti"]::after,
body[data-view="progetto"] .hdr__nav a[data-go="progetti"]::after,
body[data-view="chi-sono"] .hdr__nav a[data-go="chi-sono"]::after,
body[data-view="contatti"] .hdr__nav a[data-go="contatti"]::after{right:0}

.mark{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  justify-items:start;
  padding:6px 4px;
}
/* Il marchio e' il tracciato vettoriale ricavato dal file originale di Alessandra,
   non un disegno somigliante. Sta in linea nella pagina cosi prende l'inchiostro
   dal CSS invece di restare nero. */
.mark__glyph{
  grid-row:1 / 3;
  width:52px;height:52px;
  color:var(--logo);
  display:block;
}
.mark__name{
  font-family:var(--display);font-size:29px;line-height:1.05;
  letter-spacing:.075em;align-self:end;
}
.mark__role{
  font:400 11px/1 var(--mono);letter-spacing:.34em;
  color:var(--ink-soft);align-self:start;padding-top:7px;
  /* centrata sotto il nome. Il padding a sinistra recupera lo spazio che la
     spaziatura fra le lettere lascia in coda, altrimenti il centro ottico
     scivola a sinistra di mezza lettera. */
  justify-self:center;
  padding-left:.34em;
}

.hdr__end{display:flex;justify-content:flex-end}
.ig{
  display:inline-flex;align-items:center;gap:7px;
  font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink-soft);
  padding:8px 0;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
/* Il glifo e' a filo, non pieno: accanto a un mono di 10px una macchia piena
   peserebbe piu' della parola. Prende il colore dal link, cosi' segue da solo
   lo schiarirsi e scurirsi al passaggio del cursore. */
.ig__glifo{
  width:13px;height:13px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
}
.ig__punto{fill:currentColor;stroke:none}
.ig:hover{color:var(--ink);border-bottom-color:var(--line-strong)}

/* ---------- viste ---------- */

.view{display:none;position:relative;z-index:1}
.view.is-on{display:block;animation:viewIn .55s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

.view--doc{min-height:100vh;min-height:100svh;padding-top:var(--hdr-h)}

/* ---------- la striscia orizzontale ---------- */

/* Su iPhone e iPad `100vh` NON e' lo schermo che si vede: e' lo schermo con le
   barre del browser gia' nascoste. Con `height` fissa e `overflow:hidden`
   l'ultima striscia di pagina finiva sotto la barra e non si poteva
   raggiungere. `svh` e' la misura piu' piccola, quella con le barre a vista:
   cosi' ci sta sempre, e non balla mentre le barre compaiono e spariscono come
   farebbe `dvh`. La riga con `vh` resta sopra come ripiego per i browser
   vecchi che non conoscono `svh`. */
.view--strip{height:100vh;height:100svh;overflow:hidden}

.strip{
  height:100%;
  padding:var(--hdr-h) var(--gutter) 0;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--gap);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-track{background:transparent}
.strip::-webkit-scrollbar-thumb{background:var(--line-strong)}
.strip:focus-visible{outline-offset:-4px}

.tile{
  flex:0 0 auto;
  margin:0;
  height:var(--tile-h);
  position:relative;
}
.tile__shot{
  display:block;position:relative;height:100%;
  overflow:hidden;
  border-radius:var(--raggio);
  background:var(--panel);
}
.tile__shot img{
  height:100%;width:auto;max-width:none;
  object-fit:cover;
  transform:translateZ(0);
  transition:transform .9s var(--ease),filter .5s var(--ease);
}

/* il velo: la fotografia torna carta, e compare il segno */
.veil{
  position:absolute;inset:0;pointer-events:none;
  background:var(--canvas);
  opacity:0;
  transition:opacity .5s var(--ease);
}
/* Il timbro che compare in hover e' il marchio vero di Alessandra, non un
   cerchio somigliante: lo stesso tracciato della testata, richiamato. */
.tile__stamp{
  position:relative;
  width:clamp(62px,6vw,88px);aspect-ratio:1;
}
.ring{
  position:absolute;inset:0;
  width:100%;height:100%;
  color:var(--logo);
  opacity:0;
  transform:rotate(-8deg) scale(.82);
  pointer-events:none;
  transition:opacity .45s var(--ease),transform .75s var(--ease);
}

.tile__label{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:0 8%;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease);
}
.tile__num{
  font:500 11px/1 var(--mono);letter-spacing:.3em;
  padding-left:.3em;
  color:var(--accent);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s var(--ease) .2s,transform .55s var(--ease) .2s;
}
.tile__name{
  font-family:var(--display);
  font-size:clamp(24px,2.6vw,40px);line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink);
  transform:translateY(12px);
  transition:transform .6s var(--ease) .08s;
}

.tile--cover:hover .veil,
.tile--cover:focus-visible .veil{opacity:.7}
.tile--cover:hover .tile__label,
.tile--cover:focus-visible .tile__label{opacity:1}
.tile--cover:hover .tile__num,
.tile--cover:focus-visible .tile__num{opacity:1;transform:none}
.tile--cover:hover .tile__name,
.tile--cover:focus-visible .tile__name{transform:none}
.tile--cover:hover .ring,
.tile--cover:focus-visible .ring{opacity:1;transform:rotate(-3deg) scale(1)}
.tile--cover:hover .tile__shot img,
.tile--cover:focus-visible .tile__shot img{transform:scale(1.028) translateZ(0)}

/* ---------- il video dentro la striscia ---------- */

.clip{
  height:100%;width:auto;max-width:none;
  display:block;
  object-fit:cover;
  background:var(--panel);
  transform:translateZ(0);
}
.clip__tag{
  position:absolute;left:14px;bottom:14px;
  font:500 9px/1 var(--mono);letter-spacing:.24em;
  color:#FFFDF8;
  background:rgba(20,20,16,.45);
  backdrop-filter:blur(8px);
  border-radius:999px;
  padding:7px 11px 6px;
  pointer-events:none;
}

/* ---------- schede di testa e di coda dentro la striscia ---------- */

.kicker{
  margin:0;
  font:500 10px/1 var(--mono);letter-spacing:.3em;
  color:var(--ink-soft);
}

.lead,.tail{
  flex:0 0 auto;
  width:clamp(230px,25vw,330px);
  align-self:center;
}
.lead__note{
  margin:14px 0 0;
  font-family:var(--display);font-size:22px;line-height:1.25;
}
/* "Scorri di lato." oppure "Guarda con calma.": la frase dice come si naviga,
   quindi deve seguire ESATTAMENTE la condizione che decide il layout, altrimenti
   il sito dice una bugia. Con il telefono girato di lato si scorreva in verticale
   mentre la scritta diceva ancora di scorrere di lato. */
.narrow-only{display:none}
@media (max-width:767px),
       (min-width:768px) and (max-width:899px) and (max-height:560px){
  .wide-only{display:none}
  .narrow-only{display:inline}
}
.lead--proj{width:clamp(250px,28vw,380px)}
.lead__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,3.4vw,52px);line-height:1.06;
  margin:16px 0 20px;letter-spacing:.01em;
}
.lead__text{
  margin:20px 0 0;max-width:34ch;
  color:var(--ink-soft);font-size:14px;
}
.lead__text--note{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
  font:400 11px/1.7 var(--mono);letter-spacing:.02em;
}

/* cartelli dentro la striscia: dividono il progetto disegnato dal realizzato */
.divider{
  flex:0 0 auto;align-self:center;
  width:clamp(150px,15vw,200px);
  padding-left:clamp(6px,1vw,18px);
  border-left:1px solid var(--line);
}
.divider__line{
  margin:12px 0 0;
  font-family:var(--display);font-size:17px;line-height:1.3;
  color:var(--ink);
}
.divider .rule{max-width:120px;margin-top:16px}
.back{
  display:inline-block;margin-bottom:22px;
  font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink-soft);
  border-bottom:1px solid var(--line-strong);padding-bottom:4px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.back::before{content:"\2190\00a0\00a0"}
.back:hover{color:var(--accent);border-color:var(--accent)}

.meta{margin:0;display:grid;gap:10px}
.meta>div{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:9px}
.meta dt{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--ink-soft);min-width:74px}
.meta dd{margin:0;font-size:13px}

.tail{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.tail__line{
  margin:0;font-family:var(--display);font-size:22px;line-height:1.25;max-width:16ch;
}
.back--tail{margin:4px 0 0}

.rule{width:100%;max-width:180px;height:6px;overflow:visible;margin-top:20px;color:var(--line-strong)}
.rule path{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100}
.rule--wide{max-width:360px}
.is-on .rule path,.reveal.in .rule path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease) .25s}

/* ---------- bottoni ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:500 10px/1 var(--mono);letter-spacing:.18em;
  padding:14px 22px;
  border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);
  cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--canvas);transform:translateY(-1px)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#FFF9F5}
.btn--solid:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#FFF9F5}

/* ---------- viste documento ---------- */

.doc{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(40px,7vh,90px) var(--gutter) 0;
}

/* ---------- CHI SONO ----------
   Impaginato su fili precisi, perche' e' un sito di interni e l'occhio di chi
   guarda e' allenato a vedere gli sfasamenti. Le regole che tengono tutto:
   - un filo verticale a sinistra: occhiello, nome, claim, testo partono tutti da li
   - un filo verticale a destra: filetto, fotografia e linea di chiusura finiscono li
   - due linee orizzontali chiudono il blocco sopra e sotto, alla stessa larghezza
   - le due colonne hanno alture molto diverse (quattro paragrafi contro un ritratto
     verticale): il testo si centra sull'altezza della foto, cosi' il vuoto si divide
     in parti uguali sopra e sotto invece di cadere tutto in fondo a sinistra
   - misure fisse sopra i 1100px: niente valori elastici che sfalsano di qualche pixel
*/
.studio-top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  column-gap:64px;
  row-gap:40px;
  align-items:start;
  padding-bottom:48px;
  border-bottom:1px solid var(--line);
}
.studio-head{grid-column:1 / -1;max-width:none}
.studio-head .rule{max-width:none;margin-top:26px}
#v-chi-sono .doc{max-width:1360px}

.bio{display:grid;gap:0;max-width:760px;align-self:center}
.bio__name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6.4vw,86px);line-height:1;
  margin:14px 0 0;letter-spacing:.005em;
}
.bio__claim{
  margin:16px 0 0;
  font-family:var(--display);font-style:italic;
  font-size:clamp(19px,2.1vw,26px);line-height:1.2;
  letter-spacing:.012em;
  color:var(--ink-soft);
}

/* Il testo parte esattamente in alto, allineato al bordo della fotografia:
   niente margine iniziale, niente spazio sopra la prima riga. */
.bio__text{margin-top:0}
.bio__text>*:first-child{margin-top:0}
/* Due soli livelli di testo, non tre: un'apertura grande e un corpo tutto uguale.
   Alternare grande / piccolo / grande / piccolo faceva ballare la colonna. */
.bio__text p{margin:0 0 18px;max-width:58ch;color:var(--ink-soft)}
.bio__text p:last-child{margin-bottom:0}

.bio__text p.bio__lede{
  font-family:var(--display);
  font-size:clamp(21px,2.3vw,29px);
  line-height:1.3;
  color:var(--ink);
  max-width:26ch;
  margin-bottom:30px;
}
/* I materiali sono una riga di respiro, non un secondo titolo: restano in Bodoni
   ma scendono vicino al corpo, e si staccano con lo spazio e la spaziatura delle
   lettere invece che con la dimensione. Sopra e sotto la stessa identica misura. */
.bio__text p.bio__materiali{
  font-family:var(--display);
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.3;
  letter-spacing:.05em;
  color:var(--ink);
  max-width:none;
  margin:34px 0 34px;
}

/* ---------- il momento interattivo ---------- */

.hold{
  --p:0;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.hold__stage{position:relative;overflow:hidden;border-radius:var(--raggio);background:var(--panel)}
.hold__img{width:100%;height:auto;display:block}
/* La copia sotto porta un filtro FERMO: si incrocia l'opacita, mai il filtro,
   cosi il passaggio resta sul compositore e non fa fatica.
   Tarato su un ritratto gia' in bianco e nero: si abbassa il contrasto e si
   alzano i neri, per l'effetto di una stampa sbiadita che torna a fuoco. Con i
   valori di prima, pensati per un render a colori, la faccia usciva slavata. */
.hold__img--a{filter:sepia(.14) contrast(.62) brightness(1.13)}
.hold__img--b{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:var(--p);
}
/* Quello che si forma tenendo premuto e' la "a" di Alessandra, non un cerchio:
   lo stesso tracciato del marchio, che si posa mentre il disegno diventa stanza.
   Guidata da --p, quindi e' lo stesso gesto che comanda anche la fotografia. */
/* Il marchio firma il ritratto in basso a destra, come una sigla sull'angolo di
   una stampa. Al centro coprirebbe il viso.
   Bianco, scelta della cliente: una fotografia non ha mai un angolo tutto chiaro
   o tutto scuro, e il bianco stacca. L'ombra sotto e' quella che lo tiene
   leggibile anche dove la foto e' chiara, quindi il segno regge su qualunque
   immagine. Niente mix-blend-mode: in multiply il bianco sparirebbe del tutto. */
.hold__ring{
  position:absolute;right:6%;bottom:5%;
  width:26%;height:auto;aspect-ratio:1;
  z-index:2;
  color:#FFFDF8;
  opacity:calc(.12 + .88*var(--p));
  transform:
    rotate(calc(-10deg + 7deg*var(--p)))
    scale(calc(.76 + .24*var(--p)));
  filter:drop-shadow(0 1px 2px rgba(20,20,16,.5)) drop-shadow(0 4px 14px rgba(20,20,16,.35));
  pointer-events:none;
}

/* La riga e il pulsante stanno affiancati, l'aiuto va sotto a tutta larghezza */
.hold__side{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:space-between;
  align-items:center;
  column-gap:24px;row-gap:11px;
}
.hold__over{
  grid-column:1;
  margin:0;font-family:var(--display);
  font-size:clamp(22px,2.3vw,30px);line-height:1.2;max-width:14ch;
}
.hold__btn{grid-column:2;justify-self:end}
.hold__help{grid-column:1 / -1}
.hold__btn{
  display:inline-flex;align-items:center;gap:12px;
  background:transparent;border:1px solid var(--line-strong);
  padding:13px 20px;cursor:pointer;
  font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--ink);
  touch-action:none;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.hold__btn:hover{border-color:var(--accent);color:var(--accent)}
.hold__dot{
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line-strong);
  background:
    conic-gradient(var(--accent) calc(var(--p)*360deg),transparent 0);
  flex:0 0 auto;
}
.hold__help{margin:0;font-size:12px;color:var(--ink-soft)}
.hold.is-done .hold__help,.hold.is-done .hold__btn{opacity:.4}

/* Niente filetto sopra: il blocco della biografia si chiude gia' con il suo,
   e due righe orizzontali a poca distanza, con solo vuoto in mezzo, si leggono
   come un errore di stampa. Qui resta solo lo spazio. */
.cta-band{
  margin:clamp(56px,9vh,110px) 0 0;
  display:flex;flex-wrap:wrap;gap:24px;
  align-items:baseline;justify-content:space-between;
}
.cta-band__line{
  margin:0;font-family:var(--display);
  font-size:clamp(24px,3vw,40px);line-height:1.16;max-width:18ch;
}

/* ---------- contatti ---------- */

.con{max-width:780px}
.con__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,5.4vw,72px);line-height:1.04;margin:14px 0 0;
}
.con__lede{margin:26px 0 0;max-width:44ch;color:var(--ink-soft);font-size:16px}

.con__grid{
  margin-top:clamp(40px,6vh,72px);
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
}

.card{
  background:var(--panel);
  padding:clamp(24px,3vw,36px);
}
.chiaro{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.chiaro li{display:grid;gap:3px;border-top:1px solid var(--line-strong);padding-top:11px}
.chiaro__k{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--ink-soft)}
.chiaro__v{font-size:15px;color:var(--ink);word-break:break-word;justify-self:start}
a.chiaro__v{border-bottom:1px solid var(--accent-muted);transition:border-color .3s var(--ease),color .3s var(--ease)}
a.chiaro__v:hover{color:var(--accent);border-bottom-color:var(--accent)}
.card__note{margin:18px 0 0;font-size:12px;color:var(--ink-soft)}

.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--ink-soft)}
.field input,.field textarea{
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--line-strong);
  padding:9px 2px;
  border-radius:0;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input:hover,.field textarea:hover{border-bottom-color:var(--ink-soft)}
.field input:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--accent);
  background:rgba(162,84,58,.045);
}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.form__err{
  margin:0;font-size:13px;color:var(--accent-hover);
  border-left:2px solid var(--accent);padding-left:11px;
}
/* ---------- la mappa ---------- */

.mappa{margin-top:clamp(44px,7vh,86px)}
.mappa__cornice{
  position:relative;
  margin-top:18px;
  aspect-ratio:16/7;
  border-radius:var(--raggio);
  overflow:hidden;
  background:var(--panel);
}
/* Sta sotto la mappa e si vede solo se la mappa non arriva. */
.mappa__ripiego{
  position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;gap:4px;
  align-items:center;justify-content:center;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(17px,2vw,22px);line-height:1.3;
  color:var(--ink-soft);
}
.mappa__cornice iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  /* a colori pieni, per scelta della cliente: era smorzata in grigio per stare
     con il resto della pagina, ma una mappa si legge meglio com'e' */
}
.mappa .back{margin-top:16px}
.mappa .back::before{content:none}

/* Qui il confine resta a 767 apposta, non e' una dimenticanza: il 4/3 serve al
   telefono tenuto dritto, dove una mappa larga e bassa non si legge. Col telefono
   girato di lato il 16/7 e' quello giusto, una 4/3 su 812 di larghezza verrebbe
   alta 609px su 375 di schermo. */
@media (max-width:767px){
  .mappa__cornice{aspect-ratio:4/3}
}

.form .btn{justify-self:start}
.form__note{margin:0;font-size:12px;color:var(--ink-soft)}

/* Lo stato dopo l'invio. Serve soprattutto a coprire il caso in cui il programma
   di posta non si apra: senza, chi scrive resta a chiedersi se e' partito. */
.form.is-fatto .field,
.form.is-fatto>.btn,
.form.is-fatto .form__note,
.form.is-fatto .form__err{display:none}

.fatto{display:grid;gap:14px;justify-items:start;animation:fattoIn .5s var(--ease) both}
.fatto__riga{
  margin:0;font-family:var(--display);
  font-size:clamp(20px,2.2vw,27px);line-height:1.25;max-width:22ch;
}
.fatto__nota{margin:0;font-size:13px;color:var(--ink-soft);max-width:40ch}
.fatto__nota a{border-bottom:1px solid var(--accent-muted);transition:border-color .3s var(--ease),color .3s var(--ease)}
.fatto__nota a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@keyframes fattoIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* ---------- piede ---------- */

.foot{
  margin-top:clamp(56px,9vh,110px);
  border-top:1px solid var(--line);
  padding:26px 0 40px;
  display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline;
}
.foot p{margin:0;font:400 10px/1.6 var(--mono);letter-spacing:.12em;color:var(--ink-soft)}
.foot__small{opacity:.8}

/* ---------- entrate ---------- */

.reveal{opacity:0;transform:translate3d(0,22px,0)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.doc .reveal:nth-of-type(2).in{transition-delay:.09s}
.doc .reveal:nth-of-type(3).in{transition-delay:.17s}
.doc .reveal.in.settled,
.doc .reveal:nth-of-type(2).in.settled,
.doc .reveal:nth-of-type(3).in.settled{transition-delay:0s}

/* ---------- schermi bassi ---------- */

@media (max-height:560px){
  :root{--hdr-h:74px}
  .mark__role{display:none}
  .lead__note,.tail__line{font-size:17px}
}

/* ---------- touch ---------- */

@media (pointer:coarse){
  .btn,.hold__btn{min-height:44px}
  /* bersagli da 44px veri, senza spostare il testo: si alza la scatola
     e si riallinea il filetto sotto la parola */
  .hdr__nav a,.ig,.back{
    min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding-top:0;padding-bottom:0;
  }
  .hdr__nav a::after{bottom:12px}
  .ig{border-bottom:0}
  .back{padding-bottom:0;border-bottom:0;text-decoration:underline;text-underline-offset:5px}
  .chiaro__v{min-height:44px;display:inline-flex;align-items:center}
  .field input{min-height:44px}
}

/* ---------- tablet in verticale ----------
   Fra il telefono e il computer c'e' una fascia, iPad tenuto dritto, dove la
   testata su una riga sola non ci sta piu': misurato, sotto gli 870px la
   navigazione andava a capo ("CHI / SONO" su due righe) e fra la navigazione e
   il marchio restava zero spazio, quindi CONTATTI finiva attaccato al glifo.
   La striscia orizzontale invece a quella larghezza ci sta benissimo, percio'
   qui si impila solo la testata e il resto della pagina non si tocca. */

@media (min-width:768px) and (max-width:899px) and (min-height:561px){
  :root{--hdr-h:116px}

  .hdr{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:center;
    align-content:center;
    gap:8px;
  }
  .hdr__nav{order:2;justify-content:center;gap:26px}
  .mark{order:1;column-gap:11px;padding:0}
  .mark__glyph{width:44px;height:44px}
  .mark__name{font-size:25px;letter-spacing:.065em}
  .mark__role{font-size:9px;letter-spacing:.3em;padding-top:5px}
  /* Instagram esce dalla testata come sul telefono: in una testata impilata non
     ha una riga sua, e nei contatti c'e' gia'. */
  .hdr__end{display:none}
}

/* La stessa fascia con lo schermo basso (812x375 e' un iPhone girato di lato)
   NON prende questo trattamento: la condizione `min-height:561px` qui sopra la
   esclude, e se ne occupa il blocco del telefono qui sotto. Il motivo sta nei
   numeri: a 375px di altezza la striscia orizzontale dava tessere da 207px,
   inutili per far vedere degli interni, e il blocco di testa del progetto e'
   alto 351px contro i 291px disponibili, quindi sbordava sopra e sotto.
   Stringere i caratteri non bastava: a quella misura serve scorrere in
   verticale, non di lato. */

/* ---------- telefoni e tablet stretti ----------
   La virgola e' un "oppure": vale sotto i 768px, e vale anche fra 768 e 899 se
   lo schermo e' basso, cioe' un telefono girato di lato. Un tablet vero in
   orizzontale e' largo almeno 1024 e alto almeno 700, quindi non ci casca. */

@media (max-width:767px),
       (min-width:768px) and (max-width:899px) and (max-height:560px){
  :root{--hdr-h:88px;--gap:14px}

  .hdr{
    position:sticky;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    height:auto;
    padding:11px var(--gutter) 7px;
    gap:6px;
    justify-items:center;
    background:var(--canvas);
    border-bottom:1px solid var(--line);
  }
  .hdr__nav{order:2;justify-content:center;gap:22px}
  .mark{order:1;justify-content:center;column-gap:11px;padding:2px}
  .mark__glyph{width:42px;height:42px}
  .mark__name{font-size:23px;letter-spacing:.06em}
  .mark__role{font-size:9px;letter-spacing:.3em;padding-top:5px;padding-left:.3em}
  .hdr__end{display:none}

  .view--doc{padding-top:26px}

  .view--strip{height:auto;overflow:visible}
  .strip{
    height:auto;
    display:flex;flex-wrap:wrap;
    align-items:flex-start;
    overflow:visible;
    padding:26px var(--gutter) 64px;
    gap:26px var(--gap);
  }
  .lead,.tail{width:100%;max-width:none}
  .tail{margin-top:14px}
  .divider{
    width:100%;border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:16px;margin-top:6px;
  }

  /* Una colonna sola, scelta dalla cliente: a 170px di larghezza gli interni
     non si leggono. Il riferimento ne fa due, qui si vede meglio il lavoro. */
  .tile{height:auto;width:100%}
  /* qui l'immagine riempie la tessera, quindi il raggio sta su di lei */
  .tile__shot{background:none;overflow:visible;border-radius:0}
  .tile__shot img{width:100%;height:auto;background:var(--panel);border-radius:var(--raggio)}
  .clip{width:100%;height:auto;border-radius:var(--raggio)}
  .clip__tag{left:12px;bottom:12px}
  .veil{display:none}
  .ring{display:none}
  .tile__label{
    position:static;transform:none;opacity:1;
    align-items:flex-start;text-align:left;
    padding:10px 0 0;gap:5px;
  }
  .tile__stamp{width:auto;aspect-ratio:auto;display:block}
  .tile__num{opacity:1;font-size:10px;letter-spacing:.24em}
  .tile__name{transform:none;font-size:21px}
  .tile--cover .tile__shot img{transition:none}
  figure.tile .tile__label{display:none}

  .studio-top{grid-template-columns:1fr;gap:38px}
  .hold{gap:18px}
  /* su schermo stretto riga e pulsante non ci stanno affiancati */
  .hold__side{grid-template-columns:1fr;justify-content:start;row-gap:15px}
  .hold__over,.hold__btn{grid-column:1}
  .hold__btn{justify-self:start}
  .con__grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
}


/* ---------- pausa fuori vista ---------- */

body.paused *,body.paused *::before,body.paused *::after{
  animation-play-state:paused !important;
}

/* ---------- movimento ridotto ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .rule path{stroke-dashoffset:0 !important}
  /* !important perche il motore scrive --p come stile in linea:
     senza, lo stato finale non arriverebbe mai a chi ha il movimento ridotto */
  .hold{--p:1 !important}
  .hold__btn,.hold__help{display:none}
  .env::before{animation:none;opacity:.6}
  .view.is-on{animation:none}
  @media (max-width:767px),
         (min-width:768px) and (max-width:899px) and (max-height:560px){
    .tile__label{position:static;transform:none}
    .mark{justify-items:center}
  }
}

/* stesso stato, attivato dal vivo quando la preferenza cambia a pagina aperta */
body.rm .reveal{opacity:1 !important;transform:none !important}
body.rm .rule path{stroke-dashoffset:0 !important}
body.rm .hold{--p:1 !important}
body.rm .hold__btn,body.rm .hold__help{display:none}
body.rm .env::before{animation:none;opacity:.6}