/* Indice della collana, pagina degli autori, quaderno, cartolina dell’edizione privata. */

/* ---------- Indice ---------- */
.indice {
  min-height: 100svh; background-color: var(--indaco); background-image: var(--grana); background-size: 240px 240px;
  color: var(--chiaro); padding: calc(var(--testata-h) + 9vh) 6.5vw 12vh;
}
.indice-gabbia { max-width: 64rem; margin: 0 auto; }
.indice .etichetta { color: #D6D1C6; }
.indice-titolo-pagina {
  font-family: var(--f-lap); text-transform: uppercase; letter-spacing: .3em; font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1; margin: 1.6rem 0 clamp(3rem, 8vh, 5.5rem) -.02em;
}
.indice-sezione {
  font-family: var(--f-lap); font-size: .75rem; letter-spacing: .34em; text-transform: uppercase; color: #D6D1C6;
  margin: 0 0 1.2rem;
}
.indice-voci { margin-bottom: 4.5rem; }
.indice-voci a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "n titolo dati" ". riga riga";
  column-gap: 1.6rem; row-gap: .25rem; align-items: baseline;
  padding: 1.5rem 0 1.6rem; text-decoration: none; position: relative;
}
.indice-voci li + li a { box-shadow: inset 0 1px 0 rgba(252, 250, 244, .14); }
.indice-n {
  grid-area: n; font-family: var(--f-lap); font-size: 2rem; letter-spacing: .1em; line-height: 1;
  color: color-mix(in srgb, var(--c) 72%, #FCFAF4);
}
.indice-n::before {
  content: ""; display: inline-block; width: .62em; height: .5em; margin-right: .55em; vertical-align: .1em;
  background: var(--c);
  clip-path: polygon(0 0, 84% 0, 100% 12.5%, 84% 25%, 100% 37.5%, 84% 50%, 100% 62.5%, 84% 75%, 100% 87.5%, 84% 100%, 0 100%);
}
.indice-n-arabo { font-family: var(--f-testo); font-variant-numeric: lining-nums; letter-spacing: 0; }
.indice-titolo { grid-area: titolo; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.15; }
.indice-dati { grid-area: dati; font-style: italic; font-size: 1.05rem; color: #E6E1D6; text-align: right; white-space: nowrap; }
.indice-riga { grid-area: riga; font-style: italic; font-size: 1.05rem; color: #D6D1C6; }
.indice-voci a::after {
  content: ""; position: absolute; left: 7.1rem; right: 0; bottom: .9rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--morbido); opacity: .5;
}
.indice-voci a:hover::after, .indice-voci a:focus-visible::after { transform: scaleX(1); }
.indice-voci a:hover .indice-titolo { font-style: italic; }
.discrezione { font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.4; max-width: 30ch; }

/* ---------- Lo studio ---------- */
.foglio.studio .pagina.verso { background-color: var(--indaco); }
.foglio.studio .pagina.verso .pagina-corpo { justify-content: flex-start; }
@media (min-width: 900px) { .ritratto { position: sticky; top: calc(var(--testata-h) + 4.4rem); } }
.ritratto .foto { width: min(36vw, var(--max-w), calc(min(100svh - var(--testata-h) - 13rem, var(--max-h)) * var(--rapporto))); }
.studio .pagina.recto .pagina-corpo { align-items: flex-start; justify-content: flex-start; }
.titolo-pagina {
  font-family: var(--f-lap); text-transform: uppercase; letter-spacing: .24em; font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.05; margin-bottom: 2.4rem;
}
.studio .epigrafe { max-width: 30rem; text-align: left; margin-bottom: 2.4rem; }
.studio .epigrafe p { font-size: clamp(1.3rem, 1.7vw, 1.6rem); text-indent: -.42em; }
.studio .epigrafe footer { margin-top: .9rem; }
.studio .epigrafe-seconda { margin: 2.6rem 0 0; }
.sedi-riga { margin-top: 2.4rem; font-family: var(--f-lap); font-size: .75rem; letter-spacing: .32em; text-transform: uppercase; }

/* ---------- Quaderno ---------- */
.quaderno-copertina .pagina-corpo { align-items: flex-start; justify-content: center; }
.quaderno-n { font-family: var(--f-lap); font-size: .8rem; letter-spacing: .42em; text-transform: uppercase; color: var(--accento); }
.quaderno-titolo {
  font-family: var(--f-lap); text-transform: uppercase; letter-spacing: .14em; line-height: 1.04;
  font-size: clamp(2.8rem, 5.6vw, 5.6rem); margin: 1.6rem 0 3.4rem -.04em; max-width: 8em;
}
.quaderno-stato { font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; }
.quaderno .pagina.recto .pagina-corpo { align-items: flex-start; gap: 2.6rem; }
.quaderno-tavola { align-self: center; }
.quaderno-tavola .foto-dettaglio { width: min(var(--w), 36vw); }
.quaderno-nota { font-style: italic; }
.quaderno-link a { font-family: var(--f-lap); font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; text-underline-offset: .5em; text-decoration-thickness: 1px; }

/* ---------- Edizione privata: cartolina di richiesta ---------- */
.privata {
  min-height: 100svh; background-color: var(--indaco); background-image: var(--grana); background-size: 240px 240px;
  color: var(--chiaro); padding: calc(var(--testata-h) + 7vh) 6vw 12vh;
}
.privata-gabbia { max-width: 62rem; margin: 0 auto; display: grid; gap: 4.5rem; }
.cartolina {
  position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem 3.6rem;
  background: #F4EEE2 var(--grana); background-size: 240px 240px; color: var(--inchiostro); padding: 3.2rem 3.4rem 3rem 4.4rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 6px 18px 38px -14px rgba(0, 0, 0, .55);
}
.cartolina::before {
  content: ""; position: absolute; top: 1.2rem; bottom: 1.2rem; left: 2.2rem; width: 0;
  border-left: 1px dashed rgba(28, 27, 34, .35);
}
.cartolina-testa .etichetta { color: #6E4A12; }
.cartolina-titolo {
  font-family: var(--f-lap); text-transform: uppercase; letter-spacing: .16em; line-height: 1.12;
  font-size: clamp(1.9rem, 3vw, 2.7rem); margin: 1.2rem 0 1.4rem;
}
.cartolina-attacco { font-style: italic; font-size: 1.15rem; line-height: 1.5; }
.cartolina-campi { display: grid; gap: 1.5rem; align-content: start; }
.campo { display: grid; gap: .25rem; }
.campo > span, .scelte legend {
  font-family: var(--f-lap); font-size: .75rem; letter-spacing: .24em; text-transform: uppercase;
}
.campo em { font-family: var(--f-testo); font-size: .95rem; letter-spacing: 0; text-transform: none; }
.campo input, .campo textarea {
  font: inherit; font-size: 1.15rem; color: inherit; background: transparent; border: 0; border-radius: 0;
  padding: .35rem 0 .3rem; border-bottom: 1px dotted rgba(28, 27, 34, .55);
}
.campo textarea {
  resize: vertical; min-height: 6.2rem; line-height: 2rem; padding-top: .2rem;
  background-image: linear-gradient(transparent calc(2rem - 1px), rgba(28, 27, 34, .3) calc(2rem - 1px), rgba(28, 27, 34, .3) 2rem, transparent 2rem);
  background-size: 100% 2rem; background-attachment: local; border-bottom: 0;
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
.campo [aria-invalid="true"] { border-bottom: 2px solid #8C2F1F; }
.scelte { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
.scelte legend { padding: 0; margin-bottom: .45rem; }
.scelte[aria-invalid="true"] legend { color: #8C2F1F; }
.scelte[aria-invalid="true"] .scelta input { border-color: #8C2F1F; }
.scelta { display: flex; align-items: baseline; gap: .8rem; cursor: pointer; font-size: 1.12rem; min-height: 2.75rem; padding: .35rem 0; }
.scelta input {
  appearance: none; -webkit-appearance: none; width: 1.05rem; height: 1.05rem; margin: 0; flex: none; transform: translateY(.14rem);
  border: 1px solid var(--inchiostro); border-radius: 50%; background: transparent; display: grid; place-items: center;
}
.scelta input::after { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--inchiostro); transform: scale(0); transition: transform .2s var(--morbido); }
.scelta input:checked::after { transform: scale(1); }
.scelta input:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
.scelta-n { font-family: var(--f-lap); font-size: .8rem; letter-spacing: .14em; min-width: 1.8rem; }
.cartolina-piede { grid-column: 2; display: grid; gap: 1rem; justify-items: start; }
.esito { font-style: italic; font-size: 1.05rem; line-height: 1.45; min-height: 1.5em; }
.esito.errore { color: #8C2F1F; font-style: normal; }
.cartolina-mittente {
  grid-column: 1; grid-row: 2 / span 2; align-self: end; font-size: .95rem; line-height: 1.5; font-style: italic; color: #4A4650;
}
.privata-epigrafe { max-width: 34rem; text-align: left; justify-self: end; }
.privata-epigrafe p { font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.34; text-indent: -.42em; }
.privata-epigrafe footer { margin-top: 1rem; font-family: var(--f-lap); font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; color: #E6E1D6; }
.sedi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.sede h2 { font-family: var(--f-lap); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; margin-bottom: .6rem; color: #D6D1C6; }
.sede p { font-size: 1.12rem; line-height: 1.5; }
.sede a { text-decoration-thickness: 1px; text-underline-offset: .25em; }

@media (max-width: 899px) {
  .indice { padding: calc(var(--testata-h) + 3.5rem) 1.4rem 5rem; }
  .indice-voci a { grid-template-columns: 3.4rem minmax(0, 1fr); grid-template-areas: "n titolo" ". dati" ". riga"; column-gap: .8rem; }
  .indice-n { font-size: 1.35rem; }
  .indice-n::before { display: none; }
  .indice-dati { text-align: left; white-space: normal; }
  .indice-voci a::after { left: 4.2rem; }
  .ritratto .foto { width: min(calc(100vw - 2.8rem - 16px), var(--max-w)); }
  .quaderno-tavola .foto-dettaglio { width: min(var(--w), calc(100vw - 2.8rem - 20px)); }
  .quaderno-titolo { margin-bottom: 2.4rem; }
  .privata { padding: calc(var(--testata-h) + 2rem) 1rem 4rem; }
  .cartolina { grid-template-columns: 1fr; padding: 2.2rem 1.4rem 2rem 2.6rem; }
  .cartolina::before { left: 1.3rem; }
  .cartolina-piede, .cartolina-mittente { grid-column: 1; grid-row: auto; }
  .sedi { grid-template-columns: 1fr; gap: 1.6rem; padding: 0 .4rem; }
  .privata .discrezione { padding: 0 .4rem; }
}