/* Pagine: la coda della home, l’indice con le miniature in punti, il corpo dei progetti, la casa privata,
   lo studio, il sopralluogo su carta con il modulo e l’unica linea laser. */
.pagina { padding: calc(var(--testata) + clamp(48px, 10vh, 120px)) max(var(--margine), env(safe-area-inset-right)) clamp(80px, 12vh, 140px) max(var(--margine), env(safe-area-inset-left)); }
.testa-pagina { max-width: 62rem; margin-bottom: clamp(48px, 9vh, 104px); }
.testa-pagina .attacco { margin-top: 1.4rem; }
.discreto.largo { margin-top: clamp(48px, 8vh, 96px); }

/* elenchi delle opere */
.elenco-rilievi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-tenue); }
.opera { border-bottom: 1px solid var(--linea-tenue); }
.opera a { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: 0 clamp(16px, 3vw, 40px); padding: 22px 0; text-decoration: none; transition: color .3s; }
.opera .num { color: var(--sabbia); }
.opera-testo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.6rem; }
.opera-nome { font-weight: 300; font-stretch: 104%; font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.12; letter-spacing: -.01em; }
.opera-luogo { color: rgb(241 238 230 / .78); }
.opera .freccia { font-size: 1.3rem; color: var(--sabbia); transition: transform .35s var(--lenta); }
.opera a:hover { color: var(--sabbia); }
.opera a:hover .freccia { transform: translateX(6px); }

.dopo { padding: clamp(96px, 16vh, 180px) max(var(--margine), env(safe-area-inset-right)) clamp(80px, 12vh, 140px) max(var(--margine), env(safe-area-inset-left)); display: grid; gap: clamp(72px, 12vh, 140px); }
.indice-breve { max-width: 72rem; }
.indice-breve .discreto { margin-top: 1.6rem; }
.invito-sopralluogo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.2rem 3rem; max-width: 72rem; }

/* indice esteso: una sola tela dietro l’elenco disegna le miniature */
.vetrina { position: relative; }
.vetrina > .tela { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.senza-gl .vetrina > .tela { display: none; }
.esteso { position: relative; z-index: 1; }
.esteso .opera a { grid-template-columns: 3.2rem min(440px, 34vw) 1fr auto; align-items: center; padding: 40px 0; }
.esteso .opera-testo { flex-direction: column; gap: .6rem; }
.esteso .opera-riga { font-weight: 330; color: rgb(241 238 230 / .9); max-width: 30em; }
.miniatura { display: block; position: relative; aspect-ratio: 16 / 10; }
/* senza WebGL: la fotografia della stazione al posto dei punti (l’immagine si scarica solo in questo caso) */
.miniatura.senza-punti, .senza-3d .miniatura[data-nuvola] { background: var(--mini) var(--mini-pos, center) / cover no-repeat; }
.miniatura.riservata { display: grid; place-items: center; color: var(--sabbia); background: repeating-linear-gradient(135deg, var(--linea-tenue) 0 1px, transparent 1px 10px); }
.miniatura.riservata .tecnico { padding: 6px 10px; background: var(--blu); }

/* corpo dei progetti */
.corpo-progetto { padding: 0 max(var(--margine), env(safe-area-inset-right)) clamp(80px, 12vh, 140px) max(var(--margine), env(safe-area-inset-left)); }
.scheda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2rem clamp(32px, 6vw, 96px); padding: clamp(96px, 15vh, 170px) 0; max-width: 78rem; }
.scheda-testo p { font-weight: 330; font-size: clamp(1.06rem, 1rem + .25vw, 1.18rem); max-width: 36em; }
.scheda-citazione { grid-column: 2; margin-top: 1.4rem; padding-top: 1.6rem; border-top: 1px solid var(--linea-tenue); }
.sequenza { display: flex; flex-direction: column; align-items: center; gap: clamp(88px, 14vh, 160px); }
.sequenza > .tavola { width: min(var(--max), 100%, calc(84svh * (var(--rapporto)))); }
.sequenza > .tavola.larga { width: min(var(--max), 100%, 960px); }
/* tutta larghezza: solo le sorgenti oltre i 2800 px; a filo dei bordi, senza segni di taglio */
.tavola.piena { width: 100vw !important; margin-inline: calc(50% - 50vw); }
.tavola.piena .cornice { aspect-ratio: auto; height: min(90svh, calc(100vw / (var(--rapporto)))); }
.tavola.piena .tacche::before, .tavola.piena .tacche::after { display: none; }
.tavola.piena figcaption { padding-inline: max(var(--margine), env(safe-area-inset-left)); }
/* sugli schermi retina molto larghi la tavola si ferma dove finiscono i pixel (3200 px della variante più grande):
   1600 px CSS a 2×, 2133 a 1,5×; centrata, con i segni di taglio sul blu */
@media (min-resolution: 2dppx) and (min-width: 1601px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1601px) {
  .tavola.piena { width: 1600px !important; margin-inline: calc(50% - 800px); }
  .tavola.piena .cornice { height: min(90svh, calc(1600px / (var(--rapporto)))); }
  .tavola.piena .tacche::before, .tavola.piena .tacche::after { display: block; }
  .tavola.piena figcaption { padding-inline: 0; }
}
@media (min-resolution: 1.5dppx) and (max-resolution: 1.99dppx) and (min-width: 2134px) {
  .tavola.piena { width: 2133px !important; margin-inline: calc(50% - 1066.5px); }
  .tavola.piena .cornice { height: min(90svh, calc(2133px / (var(--rapporto)))); }
  .tavola.piena .tacche::before, .tavola.piena .tacche::after { display: block; }
  .tavola.piena figcaption { padding-inline: 0; }
}
.coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: clamp(28px, 4.5vw, 72px); width: 100%; max-width: calc(2 * 560px + 72px); }
.coppia .tavola { width: min(var(--max), 100%, calc(78svh * (var(--rapporto)))); justify-self: center; }
/* il colophon: un cartiglio su carta, l’unica inversione della pagina del progetto */
.colophon { max-width: 62rem; margin: clamp(110px, 16vh, 180px) auto 0; padding: clamp(28px, 4.5vw, 64px); }
.stampa { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2.6rem; font-weight: 300; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.25; }
.stampa .tecnico { color: var(--accento); }
.dati-opera { display: grid; grid-template-columns: 13rem 1fr; margin: 0; border-top: 1px solid var(--linea-tenue); }
.dati-opera div { display: contents; }
.dati-opera dt, .dati-opera dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linea-tenue); }
.dati-opera dt { color: var(--accento); padding-top: 15px; }
.prossimo { max-width: 62rem; margin: clamp(80px, 12vh, 140px) auto 0; display: flex; flex-direction: column; gap: .8rem; }
.prossimo .tecnico { color: var(--sabbia); }
.prossimo a { font-weight: 300; font-stretch: 104%; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.05; text-decoration: none; letter-spacing: -.012em; }
.prossimo a:hover { color: var(--sabbia); }

/* la casa privata: frammenti sparsi sul foglio, mai più grandi della metà dei pixel; poi il ritratto */
.frammenti { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); max-width: 82rem; margin: 0 auto; }
.frammento { width: min(var(--max), 100%, 300px); }
.frammento figcaption { flex-direction: column; gap: .3rem; }
.f1 { grid-column: 1 / span 3; grid-row: 1; }
.f2 { grid-column: 5 / span 3; grid-row: 1; margin-top: 140px; }
.f3 { grid-column: 9 / span 3; grid-row: 1; margin-top: 44px; }
.f4 { grid-column: 3 / span 3; grid-row: 2; margin-top: 64px; }
.f5 { grid-column: 8 / span 3; grid-row: 2; margin-top: 150px; }
.ritratto-casa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 110px); max-width: 82rem; margin: clamp(110px, 16vh, 180px) auto 0; }
.ritratto-casa .ritratto { width: min(560px, 40vw, calc((100svh - 220px) * .8)); }
.citazione-ritratto { max-width: 34rem; }
.citazione-grande { max-width: 52rem; margin: clamp(110px, 16vh, 180px) auto 0; }
.citazione-grande .citazione p { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.24; }
.crediti { max-width: 82rem; margin: 3rem auto 0; }
.progetto-privato .discreto.largo { max-width: 52rem; margin-inline: auto; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: baseline; }

/* lo studio: tipografico; accanto al testo, il cartiglio dello studio su carta */
.studio-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(40px, 7vw, 120px); align-items: start; max-width: 86rem; }
.studio-testo { max-width: 36rem; }
.studio-testo .titolo { margin-bottom: 1.6rem; }
.studio-testo > p:not(.occhiello) { font-weight: 330; }
.studio-testo .breve { margin: 2rem 0; font-weight: 300; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); color: var(--sabbia); }
.citazione-studio { margin: 2.6rem 0 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--linea-tenue); }
.cartiglio-studio { position: sticky; top: calc(var(--testata) + 32px); padding: clamp(24px, 3vw, 40px); }
.marchio-grande { margin: 0 0 1.6rem; font-weight: 300; font-stretch: 112%; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.05; letter-spacing: -.012em; }
.cartiglio-studio dl { display: grid; grid-template-columns: 7.5rem 1fr; margin: 0; border-top: 1px solid var(--linea); }
.cartiglio-studio dl div { display: contents; }
.cartiglio-studio dt, .cartiglio-studio dd { margin: 0; padding: 11px 0 10px; border-bottom: 1px solid var(--linea-tenue); }
.cartiglio-studio dt { color: var(--accento); padding-top: 14px; }
.cartiglio-studio dd { font-weight: 360; line-height: 1.45; }

/* il sopralluogo, su carta: inchiostro di Prussia, l’unica linea laser rossa */
.carta.pagina { min-height: 100svh; }
.laser { display: block; position: relative; height: 1px; width: min(100%, 64rem); margin: 2rem 0 0; background: var(--rosso); transform-origin: left; }
.laser.passa { animation: laser 1.9s cubic-bezier(.6, .05, .25, 1) both; }
.laser.passa::after {
  content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #F06A52;
  box-shadow: 0 0 8px 2px rgb(200 50 31 / .8); animation: testa 1.9s linear both;
}
@keyframes laser { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes testa { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sopralluogo-griglia { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 140px); max-width: 82rem; }
.modulo { display: grid; gap: 1.7rem; max-width: 40rem; }
.campo { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo > label, .campo legend { font-stretch: 75%; font-weight: 500; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accento); padding: 0; }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  width: 100%; padding: 10px 0 9px; background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0;
  font-weight: 330; font-size: 1.12rem; line-height: 1.4; transition: border-color .25s;
}
.campo textarea { resize: vertical; min-height: 4.4em; }
/* i campi di testo: la riga di base si accende; le scelte hanno il loro contorno di fuoco */
.campo input:not([type="radio"]):focus-visible, .campo textarea:focus-visible { outline: none; border-bottom-color: var(--testo); box-shadow: 0 1px 0 var(--testo); background: rgb(31 58 92 / .04); }
.campo [aria-invalid="true"] { border-bottom-color: #A3281A; }
.scelte { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.scelte legend { margin-bottom: .55rem; width: 100%; }
.scelte label { display: inline-flex; align-items: center; gap: .6rem; padding: 4px 0; cursor: pointer; font-weight: 330; font-stretch: 100%; font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--testo); }
/* le scelte come caposaldi delle tavole: un cerchio con la croce; scelto, pieno d’inchiostro con la croce in negativo */
.scelte input {
  -webkit-appearance: none; appearance: none; flex: none; width: 15px; height: 15px; margin: 0;
  border: 1px solid var(--testo); border-radius: 50%; cursor: pointer;
  background: linear-gradient(var(--testo) 0 0) center / 1px 100% no-repeat, linear-gradient(var(--testo) 0 0) center / 100% 1px no-repeat;
}
.scelte input:checked {
  background: linear-gradient(var(--bianco) 0 0) center / 1px 7px no-repeat, linear-gradient(var(--bianco) 0 0) center / 7px 1px no-repeat, var(--testo);
}
.scelte label:hover input:not(:checked) { background-color: rgb(31 58 92 / .12); }
.scelte .errore { flex-basis: 100%; }
.scelte input:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 5px; }
.scelte input[aria-invalid="true"] { border-color: #A3281A; }
.coppia-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem 2rem; }
.aiuto { margin: 0; font-size: .9rem; color: var(--testo-tenue); }
.errore { margin: 0; font-size: .9rem; color: #A3281A; min-height: 0; }
.errore:empty { display: none; }
.bottone {
  justify-self: start; padding: 15px 26px 14px; background: transparent; border: 1px solid var(--testo); border-radius: 0; cursor: pointer;
  font-stretch: 88%; font-weight: 500; font-size: 1rem; letter-spacing: .01em; transition: background-color .3s, color .3s;
}
.bottone:hover { background: var(--testo); color: var(--bianco); }
.esito:empty { display: none; }
.esito { padding: 18px 20px 4px; border: 1px solid var(--linea-tenue); background: #E7E2D6; }
.sedi { display: grid; gap: 2.6rem; align-content: start; }
.sede .occhiello { margin-bottom: .6rem; display: flex; align-items: center; gap: .65em; }
/* il caposaldo, come sulle tavole di rilievo: un cerchio con la croce */
.sede .occhiello::before {
  content: ""; width: 11px; height: 11px; flex: none; border: 1px solid currentColor; border-radius: 50%;
  background: linear-gradient(currentColor 0 0) center / 1px 100% no-repeat, linear-gradient(currentColor 0 0) center / 100% 1px no-repeat;
}
.sede .indirizzo { margin: 0 0 .4rem; font-weight: 300; font-stretch: 104%; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem); line-height: 1.15; }
.sede .coordinate { margin: 0; color: var(--testo-tenue); }
.recapiti { margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--linea-tenue); line-height: 1.9; }
.recapiti a { text-decoration: none; border-bottom: 1px solid var(--linea-tenue); }
.recapiti a:hover { color: var(--accento); border-color: var(--accento); }

@media (max-width: 63.99rem) {
  .scheda { grid-template-columns: 1fr; }
  .scheda-citazione { grid-column: 1; }
  .studio-griglia, .sopralluogo-griglia, .ritratto-casa { grid-template-columns: 1fr; }
  .cartiglio-studio { position: relative; top: 0; max-width: 34rem; }
  .ritratto-casa .ritratto { width: min(720px, 100%); }
}
@media (max-width: 47.99rem) {
  .opera a { grid-template-columns: 2.4rem 1fr auto; padding: 18px 0; }
  .esteso .opera a { grid-template-columns: 2.4rem 1fr auto; padding: 28px 0 30px; row-gap: 1.1rem; }
  .esteso .miniatura { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .esteso .num { grid-row: 2; }
  .coppia { grid-template-columns: 1fr; gap: 72px; }
  .coppia .tavola { width: min(var(--max), 100%); }
  .tavola.piena .cornice { height: auto; aspect-ratio: var(--rapporto); }
  .frammenti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .frammento { width: 100%; max-width: var(--max); grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; margin-bottom: 44px; }
  .frammento:nth-child(even) { margin-top: 72px !important; }
  .dati-opera, .cartiglio-studio dl { grid-template-columns: 1fr; }
  .dati-opera dt, .cartiglio-studio dt { border-bottom: 0; padding-bottom: 0; }
  .coppia-campi { grid-template-columns: 1fr; }
  .tavola figcaption { gap: .8em; }
}