/* ART_ifex: rivista generativa. Fondo nero, titoli in IBM Plex Mono, testi in IBM Plex Serif (scelte di Dario, 14 ottobre 2026).
   Le variabili --af-* arrivano dallo script di avvio: data di Milano -> colonne, ora di Milano -> accento. */
:root { --af-accent: #9fc6ff; --af-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; }
.af { background: var(--void); color: var(--light); }
.af-in { max-width: 1280px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 80px; display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.af-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; }

.af-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; }
.af-mast { margin: 0; font: 600 clamp(2.4rem, 6vw, 4.2rem)/1 var(--mono); letter-spacing: -0.02em; }
.af-top--small .af-home { font: 600 1.6rem/1 var(--mono); letter-spacing: -0.02em; text-decoration: none; }
.af-tag { font: 400 var(--t-s)/1.5 var(--mono); letter-spacing: 0.04em; color: var(--ash); }
.af-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.af-logo { white-space: nowrap; }
.af-logo span { transition: none; }
.af-logo .is-off { opacity: 0; }
.af-cur.is-blink { animation: af-blink 1.1s steps(1, end) infinite; }
@keyframes af-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

.af-issue { align-items: end; }
.af-num { display: flex; align-items: baseline; gap: 28px; }
.af-n { font: 200 clamp(7rem, 22vw, 18.75rem)/0.8 var(--mono); letter-spacing: -0.06em; color: var(--af-accent); }
.af-iss { font: 400 1.4rem/1 var(--mono); letter-spacing: 0.06em; }
.af-lead { max-width: 62ch; font: 400 1.15rem/1.6 var(--af-serif); color: var(--dim); }

.af-index { list-style: none; margin: 0; padding: 0; }
.af-index a { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--rule); text-decoration: none; }
.af-index a:hover .af-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.af-date { font: 400 var(--t-xs)/1.4 var(--mono); letter-spacing: 0.08em; color: var(--ash); }
.af-title { font: 400 clamp(1.15rem, 1.8vw, 1.5rem)/1.25 var(--mono); }

.af-how { max-width: 68ch; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--rule); padding-top: 20px; }
.af-how h2 { font: 600 var(--t-s)/1.4 var(--mono); letter-spacing: 0.06em; }
.af-how p { font: 400 1.02rem/1.6 var(--af-serif); color: var(--dim); }

.af-stamp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 var(--t-xs)/1 var(--mono); letter-spacing: 0.08em; color: var(--ash); }
.af-stamp .af-bar { margin-left: auto; }
.af-bar { display: block; width: 120px; height: 4px; background: var(--af-accent); }

.af-head { display: flex; flex-direction: column; gap: 20px; }
.af-head .af-bar { width: 64px; }
.af-h1 { margin: 0; font: 400 clamp(2rem, 4.2vw, 3.25rem)/1.12 var(--mono); letter-spacing: -0.02em; }
.af-meta { font: 400 var(--t-s)/1.6 var(--mono); letter-spacing: 0.03em; color: var(--ash); }

.af-frame { margin: 0; height: clamp(260px, 42vw, 520px); display: flex; align-items: center; justify-content: center; background: var(--wall); overflow: hidden; }
.af-crop { width: 100%; height: 56%; overflow: hidden; outline: 1px solid var(--af-accent); outline-offset: -1px; }
.af-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }

.af-text { max-width: 680px; font: 400 1.17rem/1.68 var(--af-serif); color: var(--light); display: flex; flex-direction: column; gap: 1.1em; }
.af-text h2, .af-text h3, .af-text h4, .af-text h5 { margin: 0.9em 0 0; font: 400 1.35rem/1.3 var(--mono); letter-spacing: -0.01em; text-wrap: balance; }
.af-text h3, .af-text h4, .af-text h5 { font-size: 1.12rem; }
.af-text ul, .af-text ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 0.4em; }
.af-text blockquote { margin: 0.4em 0; padding: 0; font: 400 1.5rem/1.35 var(--mono); color: var(--af-accent); }
.af-text figure { margin: 0.6em 0; }
.af-text img { display: block; height: auto; }
.af-text hr { border: 0; border-top: 1px solid var(--rule); width: 100%; }
.af-text a { text-decoration-color: var(--af-accent); }

.af-pn { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 20px; }
.af-pn a { display: flex; flex-direction: column; gap: 6px; max-width: 46%; font: 400 1rem/1.35 var(--mono); text-decoration: none; }
.af-pn a[rel="next"] { margin-left: auto; text-align: right; }
.af-pn span { font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--ash); }

@media (max-width: 760px) {
  .af-grid > * { grid-column: 1 / -1 !important; }
  .af-pn a { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .af-cur.is-blink { animation: none; }
}

/* versione bilingue (14 ottobre 2026): etichette di testata e di lingua, occhiello delle testate */
.af-tagx { margin-left: 10px; padding: 1px 6px; border: 1px solid var(--rule); font: 400 var(--t-xs)/1.4 var(--mono); letter-spacing: 0.06em; color: var(--dim); }
.af-kicker { font: 600 var(--t-s)/1.4 var(--mono); letter-spacing: 0.04em; color: var(--af-accent); }
.af-pn b { font-weight: 400; }
.af-meta a { color: var(--dim); }

/* reticolo Flusso al posto del grande 00 nell'indice (richiesta di Dario, 14 ottobre 2026) */
.af-num { align-items: flex-end; }
.ret-panel--af { flex: 1 1 auto; min-width: 0; height: clamp(220px, 24vw, 340px); outline: 1px solid rgba(238, 238, 234, .12); }
.af-num .af-iss { flex: 0 0 auto; }
@media (max-width: 760px) { .af-num { flex-direction: column; align-items: flex-start; gap: 14px; } .ret-panel--af { width: 100%; height: 56vw; } }

/* 14 ottobre 2026, correzioni di Dario: reticolo allineato al testo sottostante, miniature rettangolari accanto al titolo */
.af-issue { display: flex; align-items: flex-end; gap: 28px; }
.af-num { display: flex; align-items: flex-end; gap: 28px; width: 100%; }
.af-lead { max-width: 46rem; }
.ret-panel--af { flex: 0 0 auto; width: min(46rem, 100%); }
.af-index a { flex-direction: column; align-items: stretch; gap: 8px; }
@media (max-width: 760px) { .ret-panel--af { width: 100%; } }


/* 14 ottobre 2026, scelta di Dario: segno del concetto accanto al titolo, nel colore d'accento dell'ora */
.af-row { display: flex; align-items: flex-start; gap: 14px; }
.af-sign { flex: 0 0 auto; display: inline-flex; padding-top: 0.2em; color: var(--af-accent); }
.af-sign svg { display: block; width: 20px; height: 20px; }