/* Controluce, le pagine: progetto (apertura, epigrafe, sequenza), studio in controluce, contatto in luce piena. */

/* Apertura del progetto: a tutto schermo solo per le foto grandi, altrimenti una tavola alta con il titolo nel buio */
.prog-apertura { position: relative; background: var(--ombra); }
/* Le lame: una striscia scura per passo, che si assottiglia verso l’alto fino a sparire (solo transform, sul compositore) */
.lame { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; }
.lame i { flex: 0 0 var(--passo); background: var(--ombra); opacity: 0.95; transform-origin: 50% 0; transform: scaleY(0.92); }
.prog-apertura.aperta .lame i { animation: lame 2.6s var(--molla) both; }
.prog-apertura.finita .lame { display: none; }
@keyframes lame { to { transform: scaleY(0); } }
.cornice picture { display: contents; }
.prog-titolo { position: relative; z-index: 1; display: grid; gap: 0.35rem; }
.prog-titolo h1 { margin: 0 0 0.75rem; font: 300 clamp(3rem, 8.2vw, 7.75rem)/0.92 var(--f-display); letter-spacing: -0.016em; }
.prog-luogo { margin: 0; font: italic 400 1.2rem/1.4 var(--f-testo); }
.prog-dati { margin: 0; color: var(--polvere); }
.credito-apertura { margin: 0; font-size: 0.8rem; color: var(--polvere); }
.credito-apertura i, .credito i { font-style: italic; }

.prog-apertura.piena { height: 100vh; height: 100svh; min-height: 34rem; display: grid; align-items: end; }
.prog-apertura.piena .apertura-foto { position: absolute; inset: 0; }
.prog-apertura.piena::after {
  content: ""; position: absolute; inset: auto 0 0; height: 58%; pointer-events: none;
  background: linear-gradient(to top, rgb(26 20 15 / 0.8), rgb(26 20 15 / 0.32) 48%, rgb(26 20 15 / 0));
}
.prog-apertura.piena .prog-titolo { padding: 0 var(--gd) 9vh var(--gs); text-shadow: 0 0 30px rgb(26 20 15 / 0.45); }
.prog-apertura.piena .prog-dati { color: var(--lama); opacity: 0.86; }
.prog-apertura.piena .credito-apertura { position: absolute; z-index: 1; right: var(--gd); bottom: 1.6rem; color: var(--lama); opacity: 0.8; }

.prog-apertura.tavola {
  min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto;
  column-gap: 5vw; padding: calc(var(--alta) + 1.5rem) var(--gd) 1.5rem var(--gs);
}
.prog-apertura.tavola .apertura-foto { grid-column: 2; grid-row: 1; align-self: end; height: min(calc(100svh - 10.25rem), var(--hmax)); width: auto; aspect-ratio: var(--rapporto); }
.prog-apertura.tavola .prog-titolo { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 0.4rem; }
/* Il credito va a capo dentro la larghezza della foto: non allarga la colonna a spese del titolo */
.prog-apertura.tavola .credito-apertura { grid-column: 2; grid-row: 2; justify-self: stretch; text-align: right; margin-top: 0.75rem; contain: inline-size; }
/* Telefono e schermi verticali (tablet): foto d’apertura in alto, titolo sotto; la tavola non supera metà dei suoi pixel
   e lascia al titolo un posto nella prima schermata (foto alta al massimo il 72% dello schermo, la tavola il 64%) */
@media (max-width: 47.99rem), (max-aspect-ratio: 1/1) {
  .prog-apertura.piena { height: auto; min-height: 0; display: block; }
  .prog-apertura.piena .apertura-foto { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 72svh; }
  .prog-apertura.piena::after { display: none; }
  .prog-apertura.piena .credito-apertura { position: static; color: var(--polvere); opacity: 1; padding: 0.7rem var(--gd) 0 var(--gs); }
  .prog-apertura.tavola { display: block; min-height: 0; padding: var(--alta) 0 0; }
  .prog-apertura.tavola .apertura-foto { height: auto; width: min(100%, var(--wmax), calc(64svh * var(--a, 1))); margin-inline: auto; }
  .prog-apertura.tavola .credito-apertura { margin: 0; padding: 0.7rem var(--gd) 0 var(--gs); text-align: right; contain: none; }
  .prog-apertura .prog-titolo, .prog-apertura.piena .prog-titolo { padding: 2.6rem var(--gd) 0 var(--gs); text-shadow: none; }
}
/* Schermi bassi e larghi (telefono in orizzontale): tutta l’apertura nella prima schermata, titolo compreso */
@media (max-height: 30rem) and (min-aspect-ratio: 1/1) {
  .prog-apertura.piena { height: 100svh; min-height: 0; display: grid; align-items: end; }
  .prog-apertura.piena .apertura-foto { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
  .prog-apertura.piena::after { display: block; }
  .prog-apertura.piena .credito-apertura { position: absolute; right: var(--gd); bottom: 0.9rem; padding: 0; color: var(--lama); opacity: 0.8; }
  .prog-apertura.piena .prog-titolo { padding: 0 var(--gd) 2.4rem var(--gs); text-shadow: 0 0 30px rgb(26 20 15 / 0.45); }
  .prog-apertura.tavola { display: grid; padding: calc(var(--alta) + 0.25rem) var(--gd) 0.6rem var(--gs); }
  .prog-apertura.tavola .apertura-foto { height: min(calc(100svh - var(--alta) - 4rem), var(--hmax)); width: auto; margin: 0; justify-self: end; }
  /* Una riga sola sotto la tavola, allineata al suo bordo destro: su una foto stretta non va a capo tre volte */
  .prog-apertura.tavola .credito-apertura { margin: 0.4rem 0 0; padding: 0; contain: none; white-space: nowrap; }
  .prog-apertura.tavola .prog-titolo { padding: 0 0 0.2rem; }
  .prog-titolo h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
}

/* L’epigrafe, scritta dalla luce che passa: un velo d’ombra sfumato scorre via dal testo (solo transform) */
.epigrafe { padding: 22vh var(--gd) 14vh var(--gs); max-width: 78rem; overflow: hidden; }
.epigrafe blockquote {
  position: relative; margin: 0 0 0 -0.6em; padding-left: 0.6em; font: italic 300 clamp(1.95rem, 4.3vw, 3.75rem)/1.16 var(--f-display);
}
.epigrafe blockquote::after {
  content: ""; position: absolute; top: -0.2em; bottom: -0.3em; left: 0; width: 260%; pointer-events: none;
  background: linear-gradient(100deg, rgb(26 20 15 / 0) 0 44%, rgb(26 20 15 / 0.9) 54% 100%);
  transform: translate3d(-61.54%, 0, 0); transition: transform 3.6s cubic-bezier(0.3, 0.1, 0.2, 1) 0.2s;
}
.epigrafe.accesa blockquote::after { transform: none; }
.epigrafe cite { display: block; margin-top: 1.6rem; font-style: normal; font-size: 0.95rem; color: var(--pietra); }
@media (forced-colors: active) { .epigrafe blockquote::after { display: none; } }

.racconto { padding: 0 var(--gd) 18vh var(--gs); display: grid; gap: 1.15rem; max-width: 40rem; margin-left: clamp(0rem, 24vw, 26rem); }
.racconto p { margin: 0; font-size: 1.125rem; line-height: 1.72; }

/* La sequenza: tavole alla loro misura vera, al vivo solo le foto che lo reggono */
.sequenza { display: grid; gap: clamp(7rem, 20vh, 13rem); padding-bottom: 20vh; }
.riga { padding-inline: var(--gs) var(--gd); }
/* Ogni tavola sta intera nello schermo: anche l’altezza disponibile limita la larghezza */
.riga figure { margin: 0; min-width: 0; width: min(var(--w), var(--max), 100%, calc((100svh - 10rem) * var(--a, 9))); }
.riga .cornice { aspect-ratio: var(--rapporto); }
.riga .cornice::after { content: ""; position: absolute; inset: 0; background: var(--ombra); opacity: 0.6; transition: opacity 2s var(--molla); pointer-events: none; }
.riga.accesa .cornice::after { opacity: 0; }
.riga figcaption { margin-top: 0.95rem; max-width: 30rem; font: italic 400 0.92rem/1.5 var(--f-testo); color: var(--polvere); }
.credito { display: block; margin-top: 0.25rem; font-style: normal; font-size: 0.8rem; letter-spacing: 0.01em; color: var(--polvere); }

.riga.piena { padding-inline: 0; }
.riga.piena figure { width: 100%; }
.riga.piena .cornice { aspect-ratio: var(--r); }
.riga.piena .foto { transform: scale(1.035); transition: opacity 0.9s ease, transform 3s var(--molla); }
.riga.piena.accesa .foto { transform: none; }
.riga.piena figcaption { max-width: none; padding-inline: var(--gs) var(--gd); }

.riga.tavola { display: flex; align-items: flex-end; gap: 5vw; }
.riga.tavola[data-lato="destra"] { flex-direction: row-reverse; justify-content: flex-start; }
.riga.tavola[data-lato="centro"] { justify-content: center; }
.riga.tavola.rientrata { padding-left: calc(var(--gs) + clamp(0rem, 24vw, 26rem)); }
.nota { flex: 0 1 27rem; margin: 0 0 0.4rem; font-size: 1.0625rem; line-height: 1.72; }
.a-margine { flex: 0 1 24rem; margin: 0 0 4.5rem; font: italic 300 clamp(1.35rem, 2.1vw, 1.8rem)/1.28 var(--f-display); }
.a-margine cite { display: block; margin-top: 0.9rem; font: normal 400 0.9rem/1.4 var(--f-testo); color: var(--pietra); }

.riga.coppia { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: space-between; column-gap: 4vw; align-items: end; }
.riga.coppia figure { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
/* Nelle colonne «auto» della coppia una larghezza in % dipenderebbe dal contenuto: finché la foto (pigra) non arriva la
   tavola nascerebbe stretta e poi crescerebbe sotto gli occhi. Qui la misura viene solo dallo schermo. */
@media (min-width: 48rem) {
  .riga.coppia figure { width: min(var(--w), var(--max), calc((100svh - 10rem) * var(--a, 9))); }
}
.riga.coppia figure > .cornice { align-self: end; }
.riga.coppia figcaption { align-self: start; }
.riga.coppia[data-allinea="sfalsa"] { grid-template-rows: auto; justify-content: center; column-gap: 8vw; align-items: start; }
.riga.coppia[data-allinea="sfalsa"] figure { display: block; grid-row: auto; }
.riga.coppia[data-allinea="sfalsa"] figure:nth-child(2) { margin-top: 24vh; }

.riga.trittico { display: grid; gap: 3.5rem; }
.trittico-testa { margin: 0 0 0 clamp(0rem, 24vw, 26rem); max-width: 34rem; font: italic 300 clamp(1.5rem, 2.6vw, 2.25rem)/1.24 var(--f-display); }
.trittico-testa cite { display: block; margin-top: 1rem; font: normal 400 0.92rem/1.4 var(--f-testo); color: var(--pietra); }
.trittico-foto { display: flex; justify-content: center; align-items: flex-start; gap: 4vw; }

@media (max-width: 47.99rem) {
  .epigrafe { padding: 16vh var(--gd) 10vh var(--gs); }
  .racconto { margin-left: 0; padding-bottom: 14vh; }
  .sequenza { gap: 6rem; padding-bottom: 14vh; }
  .riga figure { width: min(var(--mw), var(--max), 100%); }
  .riga.tavola, .riga.tavola[data-lato] { flex-direction: column; align-items: flex-start; gap: 2.2rem; }
  .riga.tavola[data-lato="destra"] { align-items: flex-end; }
  .riga.tavola[data-lato="centro"] { align-items: center; }
  .a-margine, .nota { flex: none; margin: 0; max-width: 22rem; align-self: flex-start; }
  .riga.tavola.rientrata { padding-left: var(--gs); }
  .riga.coppia, .riga.coppia[data-allinea] { display: flex; flex-direction: column; align-items: flex-start; gap: 3.5rem; }
  .riga.coppia figure, .riga.coppia[data-allinea] figure { display: block; }
  .riga.coppia figure:nth-child(2), .riga.coppia[data-allinea="sfalsa"] figure:nth-child(2) { align-self: flex-end; margin-top: 0; }
  .riga.piena .cornice { aspect-ratio: var(--rm, var(--r)); }
  .riga.piena .cornice::before { background-image: var(--lqip-m, var(--lqip)); }
  .trittico-testa { margin-left: 0; }
  /* Il trittico sul telefono: tre tavole una sotto l’altra, alternate a sinistra e a destra come il resto */
  .trittico-foto { flex-direction: column; align-items: flex-start; gap: 3.5rem; }
  .trittico-foto figure:nth-child(2) { align-self: flex-end; }
}

.colophon { padding: 12vh var(--gd) 8vh var(--gs); border-top: 1px solid var(--linea); }
.colophon dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem 3rem; }
/* Maiuscole vere, piccole e spaziate: il Noto Serif non ha il maiuscoletto, quello sintetico esce filiforme */
.colophon dt { font: 500 0.72rem/1.4 var(--f-testo); text-transform: uppercase; letter-spacing: 0.13em; color: var(--pietra); }
.colophon dd { margin: 0.4rem 0 0; }
.prossimo { padding: 10vh var(--gd) 18vh var(--gs); display: grid; gap: 1.1rem; }
.prossimo a.titolo { justify-self: start; font: 300 clamp(2.6rem, 7vw, 6rem)/1 var(--f-display); letter-spacing: -0.012em; text-decoration: none; }
.prossimo a.titolo:hover, .prossimo a.titolo:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.prossimo .vai { margin-top: 2rem; }

/* Studio: il ritratto intero, mai ritagliato e mai ritoccato. Il controluce sta dietro: la luce filtrata dalla persiana
   si posa sulla parete attorno alla cornice; la foto di Ramona Balaban resta com’è. */
.studio {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(3rem, 7vw, 8rem); align-items: start;
  padding: calc(var(--alta) + 2rem) var(--gd) 16vh var(--gs);
}
.studio-ritratto { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: calc(var(--alta) + 1.25rem); isolation: isolate; }
.studio-ritratto .cornice { height: min(calc(100svh - 11.5rem), 900px); width: auto; aspect-ratio: 4 / 5; }
/* La didascalia va a capo dentro la larghezza della foto: non allarga la colonna a spese del testo */
.studio-ritratto figcaption { margin-top: 0.9rem; max-width: 34rem; font: italic 400 0.9rem/1.5 var(--f-testo); color: var(--polvere); contain: inline-size; }
/* La pozza di luce cade sulla parete a sinistra della cornice, da dove entrerebbe il sole, e le lame la rigano.
   Sta tutta nello spazio tra testo e ritratto (--spazio) e si spegne prima dei suoi bordi: nessun taglio netto. */
.studio { --spazio: clamp(3rem, 7vw, 8rem); }
.ritratto-luce {
  position: absolute; z-index: -1; inset: -4% 0 30% calc(-1 * var(--spazio)); pointer-events: none; overflow: hidden;
  --pozza: radial-gradient(var(--spazio) 44% at var(--spazio) 44%, #000 0, rgb(0 0 0 / 0.55) 55%, transparent 100%);
  -webkit-mask-image: var(--pozza); mask-image: var(--pozza);
}
.ritratto-luce::before, .ritratto-luce::after { content: ""; position: absolute; inset: 0; }
.ritratto-luce::before { background: rgb(255 204 146 / 0.4); opacity: 0; transition: opacity 2.6s var(--molla) 0.2s; }
.ritratto-luce::after {
  inset: -10% -6%;
  background: repeating-linear-gradient(-14deg, rgb(26 20 15 / 0) 0 20px, rgb(26 20 15 / 0.84) 23px 36px, rgb(26 20 15 / 0) 39px 42px);
  opacity: 0; transform: translate3d(0, -1.6rem, 0);
  transition: opacity 2.2s ease 0.2s, transform 4.2s var(--molla) 0.2s;
}
.ritratto.accesa + .ritratto-luce::before, .ritratto.accesa + .ritratto-luce::after { opacity: 1; transform: none; }
.studio-testo { grid-column: 1; grid-row: 1; display: grid; gap: 1.15rem; max-width: 35rem; padding-top: 9vh; }
.studio-testo h1 { margin: 0 0 1.6rem; font: 300 clamp(3rem, 6vw, 5.5rem)/0.95 var(--f-display); letter-spacing: -0.014em; }
.studio-testo p { margin: 0; }
.attacco { font-size: 1.3rem; line-height: 1.55; }
.studio-citazione { margin: 2.2rem 0 1.2rem; font: italic 300 clamp(1.5rem, 2.4vw, 2.1rem)/1.26 var(--f-display); }
.studio-citazione cite { display: block; margin-top: 1rem; font: normal 400 0.92rem/1.4 var(--f-testo); color: var(--pietra); text-indent: 0; }
/* Telefono, schermi verticali e schermi bassi: ritratto sopra, intero nella prima schermata; testo sotto */
@media (max-width: 47.99rem), (max-aspect-ratio: 1/1), (max-height: 32rem) {
  .studio { grid-template-columns: minmax(0, 1fr); padding-top: var(--alta); }
  .studio-ritratto {
    grid-column: 1; position: relative; top: auto; margin-inline: calc(-1 * var(--gs)) calc(-1 * var(--gd));
    --rw: min(100%, 720px, calc((100svh - var(--alta) - 1.5rem) * 0.8));
  }
  .studio-ritratto .cornice { width: var(--rw); height: auto; margin-inline: auto; }
  .studio-ritratto figcaption { contain: none; }
  /* Ritratto centrato: la luce segue la cornice, a sinistra (sul telefono la foto è larga quanto lo schermo e resta pulita) */
  .ritratto-luce { inset: -1.5rem calc(50% - var(--rw) / 2) 30% calc(50% - var(--rw) / 2 - var(--spazio)); }
  /* La didascalia è larga quanto la foto e le sta sotto; i margini laterali servono solo quando la foto tocca i bordi */
  .studio-ritratto figcaption {
    width: var(--rw); max-width: none; margin-inline: auto;
    padding-inline: max(0px, calc(var(--gs) - (100% - var(--rw)) / 2)) max(0px, calc(var(--gd) - (100% - var(--rw)) / 2));
  }
  .studio-testo { grid-row: 2; padding-top: 3.2rem; }
  .attacco { font-size: 1.2rem; }
}

/* Contatto: l’unica pagina in luce piena */
body.in-luce { background: var(--luce-piena); color: var(--inchiostro); color-scheme: light; }
body.in-luce ::selection { background: var(--inchiostro); color: var(--luce-piena); }
body.in-luce :focus-visible { outline-color: var(--inchiostro); }
body.in-luce .discreto { color: var(--inchiostro-2); }
.contatto { padding: calc(var(--alta) + 13vh) var(--gd) 14vh var(--gs); display: grid; gap: 8vh; }
.contatto h1 { margin: 0; font: 300 clamp(2.9rem, 8.4vw, 7.6rem)/0.95 var(--f-display); letter-spacing: -0.014em; max-width: 6.6em; }
.sedi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2.5rem 4rem; max-width: 64rem; }
.sede { display: grid; gap: 0.35rem; align-content: start; }
.sede h2 { margin: 0 0 0.3rem; font: 400 2rem/1.1 var(--f-display); }
.sede p { margin: 0; }
.sede .sole { font-style: italic; color: var(--inchiostro-2); max-width: 26rem; font-variant-numeric: tabular-nums lining-nums; }
.recapiti { margin: 0; font-size: 1.3rem; line-height: 1.75; font-variant-numeric: lining-nums; }
.recapiti a { text-decoration-color: rgb(26 20 15 / 0.35); }
.recapiti a:hover { text-decoration-color: currentColor; }
.inizia { display: grid; gap: 1.6rem; max-width: 48rem; }
.inizia h2 { margin: 0; font: 400 2rem/1.1 var(--f-display); }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.4rem 2.2rem; }
.inizia label { display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--inchiostro-2); }
.inizia input, .inizia select {
  font: inherit; font-size: 1.05rem; color: var(--inchiostro); background-color: transparent; border: 0; border-bottom: 1px solid rgb(26 20 15 / 0.6);
  border-radius: 0; padding: 0.5rem 0; min-width: 0; -webkit-appearance: none; appearance: none;
}
.inizia select {
  padding-right: 1.6rem; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A140F' stroke-width='1.2'/%3E%3C/svg%3E") right 0.15rem center / 0.75rem no-repeat;
}
.inizia input::placeholder { color: #6F604E; opacity: 1; }
.inizia button {
  justify-self: start; font: inherit; color: var(--luce-piena); background: var(--inchiostro); border: 0; padding: 0.9rem 1.7rem; cursor: pointer;
  transition: background-color 0.3s ease;
}
.inizia button:hover { background: #3A2E24; }
.esito { margin: 0; font-style: italic; color: var(--inchiostro-2); min-height: 1.6em; }

/* Movimento ridotto: tutto fermo e già nella luce finale */
@media (prefers-reduced-motion: reduce) {
  body, .testata, .testata::before, .marchio, .cornice .foto, .opera-nome, .opera-fessura .cornice, .opera-fessura::before, .vai span,
  .riga .cornice::after, .riga.piena .foto, .ritratto-luce::before, .ritratto-luce::after, .persiane, .riserva,
  .persiana i, .persiana .filo, .opera-credito { transition: none !important; }
  .eroe { height: 100vh; height: 100svh; }
  .eroe-invito, .lame, .epigrafe blockquote::after { display: none; }
  .riga .cornice::after { opacity: 0; }
  .riga.piena .foto { transform: none; }
  /* La frase dell’eroe non aspetta lo scroll: sta ferma sotto il nome e il sottotitolo */
  .eroe-frase { grid-area: 3 / 1; margin-top: 1.2rem; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 47.99rem) { .eroe-ora { grid-area: 4 / 1; } }