/* di bella design — hero isometrica.
   Impianto nuovo: nesting nativo, light-dark(), svh.
   Niente container queries qui: la larghezza del contenitore e' una funzione
   fissa del viewport, quindi non aggiungerebbero nulla a una media query.
   Nessun raggio, nessuna ombra, una sola durata. */

@font-face{font-family:"Jost";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("font/jost-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/ibmplexmono-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("font/ibmplexmono-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/michroma-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Token ───────────────────────────────────────────────────────────────
   light-dark() al posto dei due blocchi di dichiarazioni: un valore per
   token invece di due. Il tema si commuta cambiando color-scheme. */
:root{
  color-scheme:light;

  --carta:       light-dark(#F5F4EF, #1B1D1F);
  --china:       light-dark(#1B1D1F, #F5F4EF);
  --grafite:     light-dark(#70747A, #9BA0A6);
  --linea:       light-dark(#D9D8D0, #33363A);
  --linea-forte: light-dark(#B9B8B0, #4A4E53);
  --superficie:  light-dark(#FFFFFF, #23262B);
  --hover:       light-dark(#EAE8DE, #2D3135);

  /* campiture del retino: dove manca il contenuto si dichiara il vuoto */
  --seg1: light-dark(#E6E5DD, #26292C);
  --seg2: light-dark(#EDECE5, #202326);

  /* accenti CILA: inchiostri, non colori d'interfaccia. Non invertono. */
  --rosso:  #D2452F;
  --giallo: #E0B23C;

  --font-logo:Michroma,sans-serif;
  --font-sans:Jost,Futura,"Century Gothic",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --gutter:48px;
  --container:1200px;
  --durata:.15s;

  &[data-tema="scuro"]{ color-scheme:dark }
}

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

body{
  margin:0;
  background:var(--carta);
  color:var(--china);
  font-family:var(--font-sans);
  scroll-behavior:smooth;
}

:where(a,button):focus-visible{
  outline:2px solid var(--rosso);
  outline-offset:3px;
  border-radius:1px;
}

/* ── Salta al contenuto: invisibile finche' non riceve il fuoco ─────────── */
.salta{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:30;
  background:var(--china);
  color:var(--carta);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:12px 20px;
  text-decoration:none;

  &:focus{ left:0 }
}

/* ── La corsa e lo stage ────────────────────────────────────────────────── */
.scroller{
  position:relative;
  height:420vh;              /* la corsa dell'animazione */
}

.stage{
  position:sticky;
  top:var(--h-header,0px);
  height:calc(100svh - var(--h-header,0px));
  min-height:560px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-bottom:1px solid var(--linea-forte);
  background:var(--carta);
}

.stage-corpo{
  flex:1;
  min-height:0;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}

/* ── Colonna di testo ───────────────────────────────────────────────────── */
.testo{
  display:flex;
  flex-direction:column;
  gap:26px;
  min-width:0;
}

.occhiello{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grafite);

  &::before{
    content:"";
    width:26px;
    height:1px;
    background:var(--rosso);
    flex:none;
  }
}

h1{
  margin:0;
  font-size:clamp(2.2rem,4.4vw,3.8rem);
  font-weight:600;
  line-height:1.04;
  letter-spacing:.03em;
  text-transform:uppercase;
  max-width:15ch;

  & em{ font-style:normal; color:var(--rosso) }
}

.lead{
  font-size:18px;
  line-height:1.5;
  color:var(--grafite);
  max-width:52ch;
}

.azioni{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px 26px;
  text-decoration:none;
  border:1px solid transparent;
  transition:background var(--durata),color var(--durata),border-color var(--durata);

  &.pieno{
    background:var(--china);
    color:var(--carta);
    &:hover{ background:var(--rosso); color:#FFF }
  }
  &.filetto{
    border-color:var(--china);
    color:var(--china);
    &:hover{ border-color:var(--rosso); color:var(--rosso) }
  }
}

.invito{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grafite);
  transition:opacity .3s;

  &::before{
    content:"";
    width:1px;
    height:22px;
    background:var(--linea-forte);
    flex:none;
  }
}

/* ── Il disegno ─────────────────────────────────────────────────────────── */
.tavola{
  position:relative;
  min-width:0;
  height:100%;
  min-height:300px;

  & canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
}

/* ── La sequenza in fondo ───────────────────────────────────────────────── */
.sequenza{
  flex-shrink:0;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.sequenza-testa{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grafite);
}

.vivo{
  display:flex;
  align-items:center;
  gap:10px;

  &::before{
    content:"";
    width:6px;
    height:6px;
    background:var(--rosso);
    animation:pulsazione 2.5s infinite;
  }
}

.legenda{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;

  /* solo i figli diretti: un `& span` discendente colpirebbe anche gli span
     interni, con effetti che non si vogliono. */
  & > span{ display:flex; align-items:center; gap:8px }

  & i{ width:14px; height:3px; flex:none }
  & .giallo{ background:var(--giallo) }
  & .rosso{ background:var(--rosso) }
  & .muto{ color:var(--grafite); opacity:.7 }
}

.binario{
  position:relative;
  height:1px;
  background:var(--linea);

  & > div{
    position:absolute;
    left:0;
    top:-1px;
    height:3px;
    width:0%;
    background:var(--rosso);
  }
}

.fasi{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
}

.fase{
  appearance:none;
  background:var(--carta);
  border:0;
  border-top:2px solid var(--linea);
  box-shadow:1px 0 0 var(--linea);
  cursor:pointer;
  text-align:left;
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:5px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grafite);
  transition:color var(--durata),border-color var(--durata);

  &:first-child{ padding-left:0 }
  &:hover{ color:var(--china) }

  & > .num{ opacity:.55 }

  /* la fase corrente: la marca il JS con aria-current */
  &[aria-current="true"]{
    color:var(--china);
    border-top-color:var(--rosso);
  }
}

@keyframes pulsazione{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Adattamento: al contenitore, non al viewport ───────────────────────── */
/* Sotto i 960px il disegno non sta accanto al testo: si impila sotto,
   non si nasconde — e' il cuore della hero, non un ornamento.
   Il vincolo di altezza serve: un telefono ruotato e' largo 844 e alto 390,
   e impilare dentro 390px farebbe finire il disegno sopra la barra delle fasi. */
@media (max-width: 960px) and (min-height: 620px){
  .stage-corpo{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    gap:16px;
    align-items:stretch;   /* la tavola riempie la riga, non la sfora */
    padding-top:64px;
  }
  .testo{ gap:20px }
  h1{ font-size:clamp(1.9rem,5.4vw,2.6rem) }
  .lead{ font-size:16px }
  .tavola{ min-height:0 }
}

/* Sul telefono testo, tavola e sette fasi devono stare insieme dentro un
   viewport bloccato: ogni valore qui serve a farli entrare senza che il
   disegno finisca sopra la barra. */
@media (max-width: 760px){
  :root{ --gutter:20px }
  .scroller{ height:320vh }        /* corsa piu' corta: sul telefono si scorre di piu' */
  .stage{ min-height:0 }

  .stage-corpo{ padding-top:40px; gap:12px }
  .testo{ gap:14px }
  .occhiello{ font-size:10px; letter-spacing:.1em }
  h1{ font-size:clamp(1.7rem,7vw,2.1rem) }
  .lead{ font-size:15px }
  .azioni{ gap:10px }
  .btn{ padding:12px 18px; font-size:11px }
  .invito{ display:none }

  .tavola{ min-height:0 }

  .legenda{ display:none }
  .fasi{ grid-template-columns:repeat(4,1fr) }
  .fase{
    padding:8px 8px 10px;
    font-size:9px;
    gap:3px;
    &:first-child{ padding-left:8px }
  }
}

/* Schermi bassi: in 640px di altezza il racconto in sette stadi non convive
   con tutto il testo. Restano occhiello, titolo, CTA principale, disegno e
   fasi; il lead torna nel corpo della pagina, subito sotto la hero. */
@media (max-width: 760px) and (max-height: 740px){
  .stage-corpo{ padding-top:28px; gap:10px }
  .testo{ gap:12px }
  .lead{ display:none }
  .azioni .btn.filetto{ display:none }
  h1{ font-size:clamp(1.5rem,6.4vw,1.9rem) }
  .tavola{ min-height:0 }
  .fase{ padding:7px 6px 9px; font-size:8px }
}

/* Telefono in orizzontale: poca altezza ma larghezza da vendere.
   Si resta a due colonne — e' l'unico modo di far stare disegno e fasi
   dentro 390px — e si taglia tutto il testo che non e' indispensabile.
   Il riconoscimento e' sul rapporto, non sulla larghezza: 568x320 e' un
   telefono ruotato tanto quanto 844x390, ma non supererebbe una soglia
   di larghezza. */
@media (max-height: 619px) and (min-aspect-ratio: 1/1){
  .scroller{ height:300vh }
  .stage{ min-height:0 }

  .stage-corpo{ grid-template-columns:1.1fr 1fr; gap:20px; padding-top:0; align-items:center }
  .testo{ gap:12px }
  .occhiello{ font-size:10px }
  h1{ font-size:clamp(1.4rem,3.4vw,2rem) }
  .lead{ display:none }
  .azioni{ gap:10px }
  .btn{ padding:10px 16px; font-size:10px }
  .invito{ display:none }

  .tavola{ min-height:0 }

  .sequenza-testa{ padding-bottom:6px }
  .legenda{ display:none }
  .fase{ padding:6px 8px 8px; font-size:9px; gap:2px }
}

/* Orizzontale molto basso (sotto i 430px di altezza): resta solo l'essenziale.
   L'occhiello sparisce e la barra perde la sua intestazione: il racconto in
   sette stadi vale piu' delle etichette che lo introducono. */
@media (max-height: 430px) and (min-aspect-ratio: 1/1){
  .stage-corpo{ gap:16px }
  .occhiello{ display:none }
  h1{ font-size:clamp(1.2rem,3vw,1.6rem) }
  .azioni{ gap:8px }
  .btn{ padding:8px 14px; font-size:10px }
  .sequenza-testa{ display:none }
  .fase{ padding:5px 6px 7px }
}

/* ── Movimento ridotto: niente corsa, stato finale, fasi ancora navigabili ─ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .scroller{ height:auto }
  .stage{ position:static; height:auto; min-height:0; padding-top:72px }
  .invito{ display:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING — impianto comune del sito
   ═══════════════════════════════════════════════════════════════════════ */

/* Transizioni fra pagine: dove il browser non le supporta, si naviga e basta. */
@view-transition{ navigation:auto }

.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.testata{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--carta);          /* opaco: nessun blur, nessuna trasparenza */
  border-bottom:1px solid var(--linea-forte);
}

.testata > .wrap{
  display:flex;
  align-items:center;
  gap:24px;
  padding-block:18px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-logo);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--china);
  text-decoration:none;
  white-space:nowrap;

  & .sigla{ letter-spacing:.04em }
  & .design{ color:var(--rosso) }
}

.sei-qui{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grafite);
  white-space:nowrap;

  &::before{
    content:"";
    width:6px;
    height:6px;
    background:var(--rosso);
    flex:none;
    animation:pulsazione 2.5s infinite;
  }
}

.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:22px;

  & a{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--china);
    text-decoration:none;
    transition:color var(--durata);

    &:hover{ color:var(--rosso) }

    &[aria-current="page"]{
      color:var(--rosso);
      text-decoration:underline;
      text-underline-offset:4px;
      &:hover{ color:var(--china) }
    }
  }
}

.interruttori{
  display:flex;
  gap:8px;
}

.interruttore{
  appearance:none;
  background:none;
  border:1px solid var(--linea-forte);
  border-radius:0;
  padding:6px 10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grafite);
  cursor:pointer;
  transition:color var(--durata),border-color var(--durata);

  &:hover{ color:var(--rosso); border-color:var(--rosso) }
}

html[data-tema="scuro"] .lab-scuro,
html:not([data-tema="scuro"]) .lab-chiaro{ display:none }

/* ── Sezioni ────────────────────────────────────────────────────────────── */
.sezione{
  padding-block:72px;
  border-bottom:1px solid var(--linea-forte);   /* le sezioni si separano con un filetto */

  &.compatta{ padding-block:56px }
  &.ampia{ padding-block:84px }
}

.occhiello{                      /* gia' definito nella hero: qui vale ovunque */
  margin:0 0 26px;
}

h2{
  margin:0 0 18px;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.03em;
  text-transform:uppercase;
  max-width:24ch;

  & em{ font-style:normal; color:var(--rosso) }
}

h3{
  margin:0 0 18px;
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.03em;
  text-transform:uppercase;

  & em{ font-style:normal; color:var(--rosso) }
}

/* ── Griglia a filetto: il vuoto fra le celle E' una linea di tavola ────── */
.griglia{
  display:grid;
  gap:1px;
  background:var(--linea-forte);
  border:1px solid var(--linea-forte);

  /* colonne in numero fisso: con auto-fit le celle vuote dell'ultima riga
     si dipingerebbero come blocchi grigi pieni */
  &.cinque{ grid-template-columns:repeat(5,1fr) }
  &.quattro{ grid-template-columns:repeat(4,1fr) }
}

.cella{
  background:var(--carta);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  color:inherit;
  transition:background var(--durata);

  &:hover{ background:var(--superficie) }   /* un solo cambiamento per hover */

  & .riga-alta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.12em;
    color:var(--rosso);
  }

  & .titolo{
    font-size:16px;
    font-weight:700;
    line-height:1.15;
  }

  & p{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:var(--grafite);
  }

  &.passo{
    padding:24px 22px;
    & .titolo{ font-size:17px }
  }
}

.etichetta{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rosso);
}

/* ── Riga tecnica ───────────────────────────────────────────────────────── */
.riga-tecnica{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grafite);

  & a{
    color:var(--rosso);
    text-decoration:none;
    transition:color var(--durata);
    &:hover{ color:var(--china) }
  }
}

/* ── Contatto ───────────────────────────────────────────────────────────── */
.contatto{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* La quota: due tacche e un filetto. Il separatore-firma del brand. */
.quota{
  display:flex;
  align-items:center;
  gap:0;
  color:var(--china);

  &::before,&::after{
    content:"";
    width:1px;
    height:9px;
    background:currentColor;
  }
  & i{
    display:block;
    width:120px;
    height:1px;
    background:currentColor;
  }
}

.recapito{
  font-family:var(--font-mono);
  font-size:15px;
  letter-spacing:.02em;
  color:var(--china);
  text-decoration:none;
  transition:color var(--durata);
  &:hover{ color:var(--rosso) }
}

.condizioni{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grafite);
  margin:0;
}

.btn.accento{
  background:var(--rosso);
  color:#FFF;
  border-color:var(--rosso);
  transition:background var(--durata),color var(--durata),box-shadow var(--durata);
  /* in hover si svuota lasciando un filetto interno: e' un filetto, non un'ombra */
  &:hover{
    background:transparent;
    color:var(--rosso);
    box-shadow:inset 0 0 0 1.5px var(--rosso);
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.pieDiPagina{
  padding-block:20px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--grafite);

  & > .wrap{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
  }

  & .citazione{
    max-width:34em;
    text-align:right;
    letter-spacing:.02em;
    text-transform:none;
  }
}

/* ── Adattamento ────────────────────────────────────────────────────────── */
@media (max-width: 1020px){
  .griglia.cinque,
  .griglia.quattro{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width: 860px){
  .sei-qui{ display:none }
}

@media (max-width: 760px){
  /* bersagli tattili: tutto cio' che si tocca arriva ad almeno 24px di altezza */
  .riga-tecnica a,
  .misure a,
  .recapito{ padding-block:6px; display:inline-block }
  .campo input,
  .campo textarea{ padding-block:12px }

  .testata > .wrap{ flex-wrap:wrap; row-gap:8px; padding-block:10px }
  /* bersagli tattili: il testo mono e' alto 14px, l'imbottitura porta l'area a 26 */
  .nav{ gap:14px; row-gap:0; flex-wrap:wrap; width:100%; margin-left:0 }
  .nav a{ padding-block:6px }
  .logo{ padding-block:4px }
  .interruttori{ margin-left:auto }

  .sezione{ padding-block:56px }
  .griglia.cinque,
  .griglia.quattro{ grid-template-columns:1fr }

  .pieDiPagina > .wrap{ flex-direction:column; gap:10px }
  .pieDiPagina .citazione{ text-align:left }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGETTI
   ═══════════════════════════════════════════════════════════════════════ */

.elenco-progetti{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--linea-forte);
  border:1px solid var(--linea-forte);
}

/* La scheda misura sé stessa, non il viewport — e qui la differenza è reale:
   a due colonne su schermo largo la scheda è ~550px, a una colonna su schermo
   stretto è ~900px. Con una media query la regola andrebbe scritta al
   contrario; con una container query si scrive come si legge. */
.progetto{
  container-type:inline-size;
  background:var(--carta);
  padding:32px;
}

/* Il layout sta sul corpo, non sul contenitore: un elemento con
   container-type non puo' rispondere alle query che interrogano se' stesso. */
.progetto-corpo{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.retino{
  background-image:repeating-linear-gradient(45deg,
    var(--seg1) 0 12px, var(--seg2) 12px 24px);
  border:1px solid var(--linea-forte);
  aspect-ratio:3 / 2;
  display:grid;
  place-items:center;
  padding:16px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grafite);
}

.progetto-testo{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.stato{
  margin:0;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rosso);

  &.atteso{ color:var(--grafite) }
}

.titolo-progetto{
  margin:0;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-weight:600;
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;

  & a{
    color:inherit;
    text-decoration:none;
    transition:color var(--durata);
    &:hover{ color:var(--rosso) }
  }
}

.progetto-testo > p:not(.stato):not(.misure){
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--grafite);
  max-width:56ch;
}

.misure{
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grafite);
  border-top:1px solid var(--linea);
  padding-top:12px;

  & a{
    color:var(--rosso);
    text-decoration:none;
    transition:color var(--durata);
    &:hover{ color:var(--china) }
  }
}

/* Scheda larga: il retino si affianca al testo invece di stargli sopra. */
@container (min-width: 620px){
  .progetto-corpo{
    flex-direction:row;
    align-items:stretch;
    gap:28px;
  }
  .retino{
    flex:0 0 40%;
    aspect-ratio:auto;
  }
  .progetto-testo{
    flex:1;
    justify-content:center;
  }
}

.nota-elenco{
  margin:26px 0 0;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grafite);
}

/* Il perimetro geografico: le pratiche edilizie sono legate all'Italia,
   interior, arredo e allestimenti no. */
.perimetro{
  margin:12px 0 0;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grafite);

  & b{ color:var(--china); font-weight:400 }
}

@media (max-width: 1020px){
  .elenco-progetti{ grid-template-columns:1fr }
}

@media (max-width: 760px){
  .progetto{ padding:22px 20px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABELLA TECNICA · PERCORSO · FORM · CITAZIONE
   ═══════════════════════════════════════════════════════════════════════ */

/* Non e' una card: e' un riquadro da 1.5px di inchiostro. */
.tabella{
  border:1.5px solid var(--china);
}

.tabella-riga{
  display:grid;
  grid-template-columns:1fr 2.4fr 1fr;
  align-items:baseline;
  gap:20px;
  padding:16px 20px;
  border-bottom:1px solid var(--linea);
  transition:background var(--durata);

  &:last-child{ border-bottom:0 }

  &.intestazione{
    border-bottom:1px solid var(--china);
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--grafite);
    &:hover{ background:none }
  }

  &:not(.intestazione):hover{ background:var(--superficie) }

  & .voce{ font-size:15px; font-weight:600 }
  & .spiega{ font-size:13px; line-height:1.5; color:var(--grafite) }
  & .tempo{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--china);
    text-align:right;
  }
}

.nota-tabella{
  margin:12px 0 0;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grafite);
}

/* ── Percorso ───────────────────────────────────────────────────────────── */
.percorso{
  border-top:1px solid var(--linea-forte);
}

.tappa{
  display:grid;
  grid-template-columns:1fr 1.6fr 3fr;
  align-items:baseline;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--linea);
  transition:background var(--durata);

  &:hover{ background:var(--superficie) }

  & .anni{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.08em;
    color:var(--rosso);
  }
  & .cosa{ font-size:16px; font-weight:700; line-height:1.2 }
  & p{ margin:0; font-size:13px; line-height:1.5; color:var(--grafite) }
}

/* ── Citazione di blocco ────────────────────────────────────────────────── */
.blocco-citazione{
  border-left:2px solid var(--rosso);
  padding:4px 0 4px 22px;
  max-width:34em;

  & .fonte{
    display:block;
    margin-bottom:10px;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--grafite);
  }
  & p{ margin:0; font-size:17px; line-height:1.5 }
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.modulo{
  border:1.5px solid var(--china);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.campo{
  display:flex;
  flex-direction:column;
  gap:6px;

  & label{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--grafite);
  }

  & input,
  & textarea{
    appearance:none;
    background:transparent;
    border:0;
    border-bottom:1px solid var(--linea-forte);
    border-radius:0;
    padding:10px 0;
    font-family:var(--font-sans);
    font-size:16px;
    color:var(--china);
    transition:border-color var(--durata);

    &:focus{ outline:none; border-bottom-color:var(--china) }
    &:focus-visible{ outline:2px solid var(--rosso); outline-offset:3px }
  }

  & textarea{ resize:vertical; min-height:96px; line-height:1.5 }
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  & input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  /* figli diretti soltanto: un `& span` discendente colpirebbe anche gli
     span interni all'etichetta. */
  & > span{
    display:inline-block;
    border:1px solid var(--linea-forte);
    padding:6px 12px;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--grafite);
    cursor:pointer;
    transition:color var(--durata),border-color var(--durata);
  }

  &:hover > span{ color:var(--rosso) }

  /* la selezione si legge dallo stato del radio, non da una classe in JS */
  & input:checked + span{ border-color:var(--rosso); color:var(--rosso) }
  & input:focus-visible + span{ outline:2px solid var(--rosso); outline-offset:3px }
}

.nota-modulo{
  margin:0;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grafite);
}

button.btn{
  appearance:none;
  cursor:pointer;
  align-self:flex-start;
}

/* ── Due colonne: testo e ritratto ──────────────────────────────────────── */
.due-colonne{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:start;

  & p{ font-size:15px; line-height:1.55; color:var(--grafite); max-width:56ch }
  & p:first-of-type{ color:var(--china) }
}

.recapiti{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
}

@media (max-width: 1020px){
  .due-colonne{ grid-template-columns:1fr; gap:32px }
}

@media (max-width: 760px){
  .tabella-riga,
  .tappa{ grid-template-columns:1fr; gap:8px }
  .tabella-riga.intestazione{ display:none }
  .tabella-riga .tempo{ text-align:left }
  .modulo{ padding:22px 20px }
}