/* Articolo, layout Apertura a fascia: titolo e gancio invertiti, testo in colonna, indice delle sezioni a lato. Leggibilità prima di tutto. */
:root { --w: 576px; --corpo: 19px; }
@media (min-width: 1600px) { :root { --w: 606px; --corpo: 20px; } }
.piede .idx { visibility: hidden; }   /* qui non ci sono sezioni numerate */
h1 { font-family: "Archivo", "Archivo ripiego", sans-serif; font-weight: 800; font-stretch: 62%; font-size: clamp(48px, 7vw, 112px); line-height: 0.9; letter-spacing: -0.005em; text-transform: uppercase; }
.t { padding-top: 48px; padding-bottom: 56px; margin-bottom: 56px; }
.t::after, .corpo-g::after { display: none; }
.t > * { grid-column: 3 / 13; justify-self: start; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 24px; }
.meta > div { display: flex; gap: 10px; align-items: baseline; }
.meta dd { font-family: var(--etichette); font-size: 12px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.meta a { text-decoration: underline; text-underline-offset: 4px; }
.gancio { grid-column: 3 / 12; padding-top: 32px; overflow-wrap: anywhere; font-size: clamp(26px, 3vw, 58px); line-height: 1.2; letter-spacing: -0.01em; }
.gancio code { font: inherit; letter-spacing: inherit; }
.corpo-g { padding-bottom: 96px; }
.indice { grid-column: 1 / 3; grid-row: 1; align-self: start; position: sticky; top: 24px; }
.indice a { display: flex; gap: 8px; padding: 6px 8px 6px 0; font-family: var(--etichette); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.indice a span { color: var(--grigio); }
.indice a:active { background: var(--ink); color: var(--fondo); }
@media (hover: hover) and (pointer: fine) { .indice a:hover { background: var(--ink); color: var(--fondo); } }
.testo { grid-column: 3 / 13; grid-row: 1; justify-self: start; width: min(var(--w), 100%); font-size: var(--corpo); line-height: 1.6; color: #E8E4DA; }
.testo > p, .testo > ul { margin: 0 0 1.1em; }
.testo ul { padding: 0; }
.testo li { position: relative; padding-left: 1.4em; }
.testo li + li { margin-top: 0.4em; }
.testo li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7em; border-top: 1px solid var(--grigio); }
.testo h2 { margin: 2em 0 0.7em; font-family: "Archivo", "Archivo ripiego", sans-serif; font-weight: 700; font-stretch: 62%; font-size: 34px; line-height: 1.05; text-transform: uppercase; scroll-margin-top: 24px; }
.testo h2:first-child { margin-top: 0; }
.testo code { font-family: var(--etichette); font-size: 0.9em; letter-spacing: 0.01em; overflow-wrap: anywhere; }
/* parole chiave: solo colore e peso. Arancione sul nero caldo 5,75:1 */
.testo mark.kw { background: transparent; color: var(--acc); font-weight: 600; }
@media print { .testo mark.kw { color: inherit; } }
/* frasi già in evidenza nel testo: filetto e corpo grande */
.isolata, .tldr { margin: 1.6em 0 !important; padding-top: 16px; border-top: 2px solid var(--linea-forte); font-size: 30px; line-height: 1.22; letter-spacing: -0.01em; }
/* in fondo */
.vic-a { grid-column: 3 / 8; }
.vic-b { grid-column: 8 / 13; }
.torna { border-top: 1px solid var(--linea); }
.torna::after { display: none; }
.torna a { grid-column: 3 / 13; display: flex; align-items: center; gap: 12px; min-height: 56px; font-family: var(--etichette); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.saluta::after { display: none; }
.saluta a { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); padding: 32px var(--pad-r) 32px calc(var(--pad-l) + 2 * var(--col) + 2 * var(--gap)); font-family: "Archivo", "Archivo ripiego", sans-serif; font-weight: 800; font-stretch: 62%; font-size: clamp(48px, 7vw, 112px); line-height: 0.9; text-transform: uppercase; }
.saluta .freccia { width: 48px; height: 24px; }
.torna a:active, .saluta a:active { background: var(--ink); color: var(--fondo); }
@media (hover: hover) and (pointer: fine) { .torna a:hover, .saluta a:hover { background: var(--ink); color: var(--fondo); } }
.saluta a:focus-visible { outline-offset: -5px; }
@media (max-width: 43.75rem) {
  :root { --corpo: 18px; }
  h1 { font-size: 56px; }
  .t { padding-top: 32px; padding-bottom: 32px; margin-bottom: 32px; }
  .gancio { font-size: 26px; line-height: 1.22; padding-top: 24px; }
  .indice { display: none; }
  .corpo-g { padding-bottom: 56px; }
  .testo h2 { font-size: 30px; }
  .isolata, .tldr { font-size: 26px; }
  .meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .meta > div { align-items: center; }
  .torna a { padding: 0; }
  .saluta a { padding: 28px var(--pad-r) 28px var(--pad-l); font-size: 56px; }
}
/* a 320px il dominio nel gancio non si spezza */
@media (max-width: 22.5rem) { .gancio { font-size: 22px; } }