/* Relazione a colonna unica, aperta da un cartiglio; le tre direzioni sono tessere a tutta larghezza con la loro palette. */
:root {
  --carta: #F2F2EF;
  --carta-2: #E6E5E0;
  --inchiostro: #1D1C1A;
  --grafite: #5B5852;
  --filo: #CDCAC2;
  --f-testo: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-etichetta: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-controluce: "Noto Serif Display", "Didot", "Bodoni 72", Georgia, serif;
  --f-lapidario: "Marcellus", "Optima", "Candara", serif;
  --f-aldino: "Cardo", "Bembo", "Palatino Linotype", Georgia, serif;
  --f-tecnico: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Tessere: palette fisse, uguali nei due temi, come campioni stampati */
  --cl-ombra: #1A140F;
  --cl-lama: #F3E7D3;
  --cl-pietra: #CBA56E;
  --ed-ocra: #C9973F;
  --ed-inchiostro: #1C1B22;
  --ed-carta: #F6F1E6;
  --ed-verderame: #4F7A6D;
  --ed-indaco: #2E3F6E;
  --ed-rosa: #D9A79B;
  --ri-blu: #1F3A5C;
  --ri-sabbia: #D8C7A3;
  --ri-bianco: #F1EEE6;
  --colonna: 40rem;
  --largo: 76rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta: #161614; --carta-2: #201F1C; --inchiostro: #EAE8E2; --grafite: #A39F97; --filo: #3A3833;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --carta: #161614; --carta-2: #201F1C; --inchiostro: #EAE8E2; --grafite: #A39F97; --filo: #3A3833;
  color-scheme: dark;
}

@property --apertura { syntax: "<number>"; inherits: true; initial-value: 0.42; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* scorrimento morbido solo a pagina caricata: chi torna da un prototipo su #sezione atterra esatto, anche se i caratteri arrivano dopo */
html.morbido { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: 1.125rem;
  line-height: 1.62;
  font-optical-sizing: auto;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.gutter {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.misura { max-width: var(--largo); margin-inline: auto; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.8rem, 7.4vw, 5.6rem); line-height: 1; font-weight: 340; letter-spacing: -0.018em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; font-weight: 380; letter-spacing: -0.01em; }
h3 { font-family: var(--f-etichetta); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }
p { margin: 0; }
.attacco { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; max-width: 36rem; }
.nota { font-family: var(--f-etichetta); font-size: 0.8rem; line-height: 1.5; color: var(--grafite); }

/* Apertura con cartiglio */
.apertura { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
.apertura .misura { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 60rem) { .apertura .misura { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); } }
.titolo { display: grid; gap: 1.25rem; }
.sottotitolo { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--grafite); font-style: italic; }
.cartiglio {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--inchiostro); border: 1px solid var(--inchiostro);
}
.cartiglio div { background: var(--carta); padding: 0.6rem 0.75rem 0.7rem; display: grid; gap: 0.15rem; min-width: 0; }
.cartiglio .largo { grid-column: 1 / -1; }
.cartiglio dt { font-family: var(--f-etichetta); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grafite); }
.cartiglio dd { margin: 0; font-size: 1rem; line-height: 1.35; }
.cartiglio dl { margin: 0; display: contents; }

.indice { padding-block: 0 2.5rem; }
.indice ol { list-style: none; margin-block: 0; padding: 1rem 0 0; border-top: 1px solid var(--filo);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-family: var(--f-etichetta); font-size: 0.9rem; }
.indice a { text-decoration: none; color: var(--grafite); }
.indice a:hover { color: var(--inchiostro); text-decoration: underline; }

/* Sezioni di testo */
.sezione { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sezione .misura { display: grid; gap: 1.6rem; }
.sezione .corpo { display: grid; gap: 1.1rem; max-width: var(--colonna); }
.parole { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 46rem; }
.parole li { border: 1px solid var(--filo); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 1rem; font-style: italic; }
.due-col { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .due-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.riferimento { display: grid; gap: 0.35rem; }
.riferimento h3 { font-family: var(--f-testo); font-size: 1.2rem; font-weight: 500; letter-spacing: 0; }
h3.sotto { font-family: var(--f-testo); font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 400; letter-spacing: 0; margin-top: 1.5rem; }

.voce { display: grid; gap: 1.8rem; margin: 0.5rem 0 0; padding: 0; list-style: none; max-width: 48rem; }
.voce blockquote { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.3; font-style: italic; font-weight: 330; }
.voce figcaption { margin-top: 0.4rem; }

.arco { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--filo);
  grid-template-columns: minmax(0, 1fr); max-width: 52rem; border: 1px solid var(--filo); }
@media (min-width: 44rem) { .arco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arco li { background: var(--carta); padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.3rem; }
.arco strong { font-weight: 500; font-size: 1.25rem; }

/* Direzioni */
.direzione { padding-block: clamp(3.5rem, 8vw, 6.5rem) 0; }
.direzione-testa { display: grid; gap: 1rem; margin-bottom: 2rem; }
.proposta-n { display: block; margin-bottom: 0.5rem; font-family: var(--f-etichetta); font-size: 1.05rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; }
thead .proposta-n { margin-bottom: 0.1rem; font-size: 0.8rem; font-weight: 400; color: var(--grafite); }
.direzione-corpo { padding-block: 2.5rem clamp(2rem, 5vw, 3.5rem); }
.direzione-corpo .misura { display: grid; gap: 2.5rem 4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .direzione-corpo .misura { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.blocco { display: grid; gap: 0.8rem; align-content: start; min-width: 0; }
.blocco + .blocco { margin-top: 1.4rem; }
.elenco { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.55rem; }
.elenco li::marker { color: var(--grafite); }
.richieste { align-self: start; background: var(--carta-2); padding: 1.4rem 1.4rem 1.6rem; display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
.richieste ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; font-size: 1rem; line-height: 1.5; }
.richieste li { padding-left: 1.4rem; position: relative; }
.richieste li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.7rem; height: 0.7rem; border: 1px solid var(--inchiostro); }
.impegno { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-family: var(--f-etichetta); font-size: 0.9rem; border-top: 1px solid var(--filo); padding-top: 0.9rem; }
.impegno .livello { display: inline-flex; gap: 0.25rem; }
.impegno .livello i { width: 0.65rem; height: 0.65rem; border-radius: 50%; border: 1px solid var(--inchiostro); }
.impegno .livello i.pieno { background: var(--inchiostro); }
.prototipo { font-family: var(--f-etichetta); font-size: 0.9rem; color: var(--grafite); }

/* Tessere: comuni */
.tessera { margin: 0; }
.tessera figcaption { padding-block: 0.7rem 0; }
.tessera-campo { max-width: var(--largo); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 52rem) { .tessera-campo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.specimen { display: grid; align-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); min-width: 0; }

/* Controluce: le persiane */
.tessera-controluce .tessera-campo { background: var(--cl-ombra); color: var(--cl-lama); }
.cl-scena { position: relative; min-height: clamp(22rem, 40vw, 34rem); overflow: hidden; }
.cl-scena img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: sepia(0.18) saturate(0.95) brightness(0.92) contrast(1.05);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--apertura) * 26px), transparent calc(var(--apertura) * 26px) 26px);
  mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--apertura) * 26px), transparent calc(var(--apertura) * 26px) 26px);
}
.tessera-controluce { transition: --apertura 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.tessera-controluce:hover, .tessera-controluce:focus-within { --apertura: 0.86; }
.cl-fascio {
  position: absolute; inset: -20% -40%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent 38%, rgba(243, 231, 211, 0.16) 47%, rgba(243, 231, 211, 0.05) 53%, transparent 60%);
  animation: sole 22s ease-in-out infinite alternate;
}
@keyframes sole { from { transform: translateX(-12%); } to { transform: translateX(14%); } }
.cl-nome {
  font-family: var(--f-controluce); font-weight: 300; font-size: clamp(3rem, 7vw, 5.4rem); line-height: 0.95; letter-spacing: -0.01em;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 19px, transparent 19px 24px);
  mask-image: repeating-linear-gradient(180deg, #000 0 19px, transparent 19px 24px);
}
.cl-frase { font-family: var(--f-controluce); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; }
.cl-ora { font-family: var(--f-etichetta); font-size: 0.85rem; color: var(--cl-pietra); }

/* Edizioni: la copertina in tela con tavola applicata */
.tessera-edizioni .tessera-campo {
  background-color: var(--ed-ocra);
  background-image:
    repeating-linear-gradient(0deg, rgba(28, 27, 34, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px);
  color: var(--ed-inchiostro);
}
.ed-tela { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3.5rem); }
.ed-copertina {
  position: relative; width: min(100%, 24rem); display: grid; justify-items: center; gap: 1.1rem; text-align: center;
  padding: 2rem 1.5rem 1.6rem; background: inherit;
  box-shadow: -10px 0 0 -6px rgba(28, 27, 34, 0.35), 0 18px 40px -18px rgba(28, 27, 34, 0.55);
}
.ed-copertina::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(60% 45% at var(--mx, 30%) var(--my, 25%), rgba(255, 255, 255, 0.55), transparent 70%);
}
.ed-numero { font-family: var(--f-lapidario); letter-spacing: 0.32em; font-size: 0.85rem; text-transform: uppercase; }
.ed-tavola { background: var(--ed-carta); padding: 0.5rem; box-shadow: 0 1px 2px rgba(28, 27, 34, 0.35); width: 100%; }
.ed-tavola img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ed-titolo { font-family: var(--f-lapidario); text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.1; }
.ed-epigrafe { font-family: var(--f-aldino); font-style: italic; font-size: 1.05rem; line-height: 1.35; max-width: 18rem; }
.ed-epigrafe span { display: block; font-style: normal; font-size: 0.85rem; letter-spacing: 0.08em; margin-top: 0.2rem; }
.ed-marchio { font-family: var(--f-lapidario); font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; }
.tessera-edizioni .specimen { color: var(--ed-inchiostro); }
.ed-dorsi { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.45rem; align-items: end; min-height: 15rem; }
.ed-dorsi li {
  writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); background: var(--c); color: var(--ed-carta);
  font-family: var(--f-lapidario); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem;
  padding: 0.9rem 0.65rem; height: var(--h, 15rem); display: flex; justify-content: space-between;
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.12);
}
.ed-sistema { font-family: var(--f-aldino); font-size: 1.15rem; line-height: 1.45; max-width: 22rem; }

/* Rilievo: la nuvola e la lente */
.tessera-rilievo .tessera-campo { background: var(--ri-blu); color: var(--ri-bianco); }
/* al massimo metà dei pixel nativi della foto (1114): mai ingrandita sugli schermi retina; attorno resta il blu */
.ri-scena { position: relative; container-type: inline-size; aspect-ratio: 1200 / 953; width: min(100%, 557px); justify-self: center; align-self: center; cursor: crosshair; touch-action: pan-y; }
.ri-scena img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ri-nuvola {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.ri-foto {
  -webkit-mask-image: radial-gradient(circle 15cqw at var(--lx, 47%) var(--ly, 60%), #000 98%, transparent 100%);
  mask-image: radial-gradient(circle 15cqw at var(--lx, 47%) var(--ly, 60%), #000 98%, transparent 100%);
}
.ri-anello {
  position: absolute; width: 30cqw; height: 30cqw; left: var(--lx, 47%); top: var(--ly, 60%); transform: translate(-50%, -50%);
  border: 1px solid var(--ri-sabbia); border-radius: 50%; pointer-events: none;
}
.ri-note { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ri-note line { stroke: var(--ri-sabbia); stroke-width: 1.2; }
.ri-note circle { fill: var(--ri-sabbia); }
.ri-note text { fill: var(--ri-sabbia); font-family: var(--f-tecnico); font-stretch: 75%; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; }
.ri-nome { font-family: var(--f-tecnico); font-weight: 500; font-size: clamp(2.8rem, 6.5vw, 4.8rem); line-height: 0.95; letter-spacing: -0.02em; }
.ri-frase { font-family: var(--f-tecnico); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.3; font-weight: 400; }
.ri-coord { font-family: var(--f-tecnico); font-stretch: 75%; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ri-sabbia); font-variant-numeric: tabular-nums; }

/* Confronto, consiglio, chiusura */
.tabella { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--filo); }
thead th { font-family: var(--f-etichetta); font-size: 0.85rem; font-weight: 600; border-bottom-color: var(--inchiostro); }
tbody th { font-weight: 500; width: 22%; }
.consiglio { background: var(--carta-2); }
.consiglio .corpo { max-width: 46rem; }
.passi { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.9rem; max-width: var(--colonna); }
.passi li::marker { color: var(--grafite); }
.chiusura { padding-block: 3rem 4rem; border-top: 1px solid var(--filo); }
.chiusura .misura { display: grid; gap: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  html, html.morbido { scroll-behavior: auto; }
  .tessera-controluce { transition: none; }
  .cl-fascio { animation: none; }
}

/* Rifiniture tipografiche */
p, li, dd { text-wrap: pretty; }
blockquote { hanging-punctuation: first; }
::selection { background: var(--inchiostro); color: var(--carta); }