/* =========================================================================
   dIAtribe — foglio di stile della testata
   Implementa il dIAtribe Design System.

   Logica di fondo: rivista di carta portata sul web. Carta calda, un solo
   inchiostro quasi nero, un rosso editoriale, filetti da 1px al posto dei
   riquadri, e un display pesante che fa tutto il lavoro di voce.

   · raggio zero ovunque, nessuna ombra
   · le bande si impilano a tutta pagina e si separano con un filetto che
     corre da bordo a bordo; dentro la banda le colonne si separano con un
     filetto verticale, non con uno spazio vuoto
   · hover: solo colore. Nessun sollevamento, nessuna scala, nessuna ombra
   · nessuna icona, in nessun punto: solo parole in maiuscolo, l'interpunto
     e il filetto
   ====================================================================== */

:root {
  --paper:        #F4F1EC;
  --paper-raised: #FAF8F5;
  --paper-sunk:   #EAE6DE;
  --ink-950:      #1A1917;
  --ink-900:      #20211C;
  --ink-600:      #55524B;
  --ink-400:      #7A766D;
  --ink-200:      #C6C3BA;
  --ink-100:      #DEDAD2;
  --red-500:      #C2402A;
  --red-600:      #A63520;
  --blue-500:     #2A68A8;

  --surface-overlay: rgba(244, 241, 236, .93);
  --border-inverse:  rgba(244, 241, 236, .22);
  --text-inverse-muted: rgba(244, 241, 236, .72);

  --container: 1180px;
  --gutter: 32px;
  --measure-text: 760px;

  --ease: cubic-bezier(.2, .6, .3, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;
  --transition-color: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Il marchio è piatto: niente angoli morbidi, niente profondità finta. */
img, figure, input, button, .wp-block-button__link, .wp-block-image img,
.wp-block-post-featured-image img { border-radius: 0 !important; box-shadow: none !important; }

::selection { background: var(--red-500); color: var(--paper); }

/* Il focus prende il rosso di marca: è l'idioma degli input del sistema. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--red-500);
  outline-offset: 2px;
}

/* =========================================================================
   1. Contenitore e bande
   ====================================================================== */

.dia-banda { padding-inline: var(--gutter); }
.dia-banda > :where(.wp-block-group, .wp-block-query) { max-width: var(--container); margin-inline: auto; }

/* Il filetto di separazione corre da bordo a bordo, non dentro il
   contenitore: è la giuntura fra due bande. */
.dia-regola-sopra { border-top: 1px solid var(--ink-200); }
.dia-regola-sotto { border-bottom: 1px solid var(--ink-200); }

.wp-block-separator:not(.is-style-dots) {
  border: 0;
  border-top: 1px solid var(--ink-200);
  opacity: 1;
  margin-block: var(--wp--preset--spacing--70);
}
.is-style-filetto { max-width: none !important; width: 100%; }

/* =========================================================================
   2. Marchio — bitmap, mai ridisegnato né ricolorato
   ====================================================================== */

.dia-marchio { display: block; max-width: 100%; }

/* L'altezza è fluida perché il marchio è largo 2,04 volte la sua altezza:
   a corpo fisso traboccherebbe sotto i 400px di viewport. Il clamp lo tiene
   dentro il gutter su qualunque schermo, senza media query.
   I valori sono circa il 150% di quelli della v2 bitmap. Il tracciato
   vettoriale comprende gli schizzi sopra e sotto la parola, che il ritaglio
   del PNG tagliava via, e non ha più la righina del sottotitolo: a parità di
   altezza della scatola la parola verrebbe il 26% più piccola. Misurati sul
   render, questi valori tengono "diatribe" del corpo che aveva prima. */
.dia-marchio img {
  display: block;
  height: clamp(52px, 14.4vw, 99px);
  width: auto;
  max-width: 100%;
}
.dia-colophon .dia-marchio img { height: clamp(47px, 10.4vw, 71px); }

/* =========================================================================
   3. Etichette, metadati, tag
   Tutte le etichette sono sans in maiuscolo con tracking largo.
   ====================================================================== */

.dia-etichetta,
.is-style-etichetta {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--etichetta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.3;
  color: var(--red-500);
  margin: 0;
}
.dia-etichetta--sm { font-size: 11px; letter-spacing: .09em; }
.dia-etichetta a { color: inherit; text-decoration: none; transition: var(--transition-color); }
.dia-etichetta a:hover { opacity: .75; }

/* Una seconda categoria nella stessa riga si distingue in blu. */
.dia-etichetta--alt, .dia-etichetta--alt a { color: var(--blue-500); }

/* Il badge di copertina: fondo pieno, testo carta. */
.dia-badge {
  display: inline-block;
  background: var(--red-500);
  color: var(--paper);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.3;
  padding: 5px 9px 4px;
}

/* Metadati: autore · data · tempo di lettura. */
.dia-meta {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--ink-400);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
}
.dia-meta > * + *::before { content: "·"; margin-right: 10px; color: var(--ink-200); }
.dia-meta a, .dia-meta .wp-block-post-author-name { color: var(--ink-900); font-weight: 700; text-decoration: none; }
.dia-meta a:hover { color: var(--red-500); }

/* La firma dell'articolo è in rosso: è l'unica variante «accent». */
.dia-meta--accent { color: var(--red-500); }
.dia-meta--accent a, .dia-meta--accent .wp-block-post-author-name { color: var(--red-500); font-weight: 600; }
.dia-meta--accent > * + *::before { color: var(--red-500); }

/* I tag prendono una sottolineatura da 1px al passaggio, non un riquadro. */
.dia-tag a, .wp-block-post-terms.dia-tag a {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--etichetta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--red-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition-color);
}
.dia-tag a:hover { border-bottom-color: currentColor; }

/* =========================================================================
   4. Testata
   ====================================================================== */

.dia-topbar {
  border-bottom: 1px solid var(--ink-200);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-400);
}
.dia-topbar p { margin: 0; font-size: inherit; }
.dia-topbar a { color: inherit; text-decoration: none; transition: var(--transition-color); }
.dia-topbar a:hover { color: var(--red-500); }

.dia-masthead { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }

.dia-nav { border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); }
.dia-nav .wp-block-navigation__container { gap: var(--gutter); }
.dia-nav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--etichetta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-900);
  text-decoration: none;
  transition: var(--transition-color);
}
.dia-nav .wp-block-navigation-item__content:hover,
.dia-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--red-500); }

/* Il sistema non ha icone. Il menu mobile è una parola, non un hamburger. */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { display: none; }
.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-close::after {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--etichetta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-900);
}
.wp-block-navigation__responsive-container-open::after  { content: "Sezioni"; }

/* WordPress passa alla navigazione in linea da 600px. Le cinque macro-aree
   però misurano circa 670px: fra 600 e 781px traboccano. Il menu a tendina
   resta quindi attivo fino a 781px. */
@media (max-width: 781px) {
  .dia-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .dia-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}
.wp-block-navigation__responsive-container-close::after { content: "Chiudi"; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--paper); padding-top: var(--wp--preset--spacing--80); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--titolo-s); }

/* =========================================================================
   5. Apertura — il pezzo di copertina
   ====================================================================== */

.dia-apertura { padding-block: var(--wp--preset--spacing--90); }
.dia-apertura .wp-block-post-title {
  font-size: var(--wp--preset--font-size--apertura);
  line-height: .98;
  letter-spacing: -.012em;
  margin: var(--wp--preset--spacing--50) 0;
}
.dia-apertura .wp-block-post-title a { text-decoration: none; color: var(--ink-900); transition: var(--transition-color); }
.dia-apertura .wp-block-post-title a:hover { color: var(--red-500); }

/* Il sommario è serif: nel sistema il sommario è serif e il corpo è sans,
   all'inverso della convenzione dei quotidiani. */
.dia-sommario,
.is-style-sommario,
.dia-apertura .wp-block-post-excerpt__excerpt {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--sommario);
  font-weight: 400;
  line-height: 1.52;
  color: var(--ink-900);
  max-width: 62ch;
  margin: 0;
}
.dia-apertura.dia-centrato .dia-sommario,
.dia-apertura.dia-centrato .wp-block-post-excerpt__excerpt { margin-inline: auto; }
.dia-apertura .wp-block-post-excerpt__more-text { display: none; }

/* =========================================================================
   5b. Apertura — due trattamenti, un solo markup
   Se il pezzo di copertina ha un'immagine l'apertura diventa fotografica,
   altrimenti resta tipografica. Il tipo sopra la fotografia non si protegge
   con una sfumatura ma con un pannello di carta opaco al 93%: è la risposta
   del marchio alla leggibilità sopra un'immagine.
   ====================================================================== */

.dia-hero { position: relative; }
.dia-hero .wp-block-post-featured-image { margin: 0; }
.dia-hero .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 620px;
  object-fit: cover;
}

/* — tipografica (predefinita) — */
.dia-hero__wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.dia-hero__pannello { padding-block: var(--wp--preset--spacing--90); text-align: center; }
.dia-hero__pannello .wp-block-post-title {
  font-size: var(--wp--preset--font-size--apertura);
  line-height: .98;
  letter-spacing: -.012em;
  margin: var(--wp--preset--spacing--50) 0;
}
.dia-hero__pannello .wp-block-post-title a { color: var(--ink-900); text-decoration: none; transition: var(--transition-color); }
.dia-hero__pannello .wp-block-post-title a:hover { color: var(--red-500); }
.dia-hero__pannello :where(.dia-sommario, .wp-block-post-excerpt__excerpt) { margin-inline: auto; }
.dia-hero__pannello .wp-block-post-excerpt__more-text { display: none; }

/* — fotografica — */
/* Il margine del block gap spingerebbe il pannello in basso: senza, il
   centraggio lascia la stessa fascia di fotografia sopra e sotto. */
.dia-hero:has(.wp-block-post-featured-image img) .dia-hero__wrap {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  margin-block: 0;
  display: flex;
  align-items: center;
}
.dia-hero:has(.wp-block-post-featured-image img) .dia-hero__pannello {
  background: var(--surface-overlay);
  padding: 40px;
  max-width: 620px;
  text-align: left;
}
.dia-hero:has(.wp-block-post-featured-image img) .wp-block-post-title {
  font-size: var(--wp--preset--font-size--titolo-xl);
  margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.dia-hero:has(.wp-block-post-featured-image img) :where(.dia-sommario, .wp-block-post-excerpt__excerpt) { margin-inline: 0; line-height: 1.4; }
.dia-hero:has(.wp-block-post-featured-image img) .dia-meta { margin-top: var(--wp--preset--spacing--40) !important; }
.dia-hero:has(.wp-block-post-featured-image img) .dia-hero__riga { justify-content: flex-start !important; }
.dia-hero:has(.wp-block-post-featured-image img) .dia-meta { justify-content: flex-start; }

/* Sotto i 782px il pannello scende sotto la fotografia: sovrapposto la
   coprirebbe per intero. */
@media (max-width: 781px) {
  .dia-hero .wp-block-post-featured-image img { height: 260px; }
  .dia-hero:has(.wp-block-post-featured-image img) .dia-hero__wrap { position: static; margin-top: var(--wp--preset--spacing--50); }
  .dia-hero:has(.wp-block-post-featured-image img) .dia-hero__pannello {
    background: none;
    max-width: none;
    padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70);
  }
  .dia-hero__pannello { padding-block: var(--wp--preset--spacing--70); }
}

/* =========================================================================
   5c. Il secondo pezzo: immagine e testo affiancati
   ====================================================================== */

.dia-duetto .wp-block-post {
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: center;
  gap: 0;
}
.dia-duetto .wp-block-post-featured-image { margin: 0; height: 100%; }
.dia-duetto .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}
.dia-duetto__testo { padding: var(--wp--preset--spacing--70); }
.dia-duetto__testo .wp-block-post-title {
  font-size: var(--wp--preset--font-size--titolo-xl);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: var(--wp--preset--spacing--40) 0;
}
.dia-duetto__testo .wp-block-post-title a { color: var(--ink-900); text-decoration: none; transition: var(--transition-color); }
.dia-duetto__testo .wp-block-post-title a:hover { color: var(--red-500); }
.dia-duetto__testo .wp-block-post-excerpt__excerpt {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--sommario);
  line-height: 1.52;
  color: var(--ink-900);
  margin: 0;
}
.dia-duetto__testo .wp-block-post-excerpt__more-text { display: none; }

@media (max-width: 781px) {
  .dia-duetto .wp-block-post { grid-template-columns: 1fr; }
  .dia-duetto .wp-block-post-featured-image img { min-height: 0; height: 240px; }
  .dia-duetto__testo { padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70); }
}

/* =========================================================================
   6. Griglia — i filetti li disegna la griglia, non le schede
   ====================================================================== */

.dia-griglia .wp-block-post-template { gap: 0; }
.dia-griglia .wp-block-post {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--ink-200);
}
.dia-griglia .wp-block-post:nth-child(3n+1) { border-left: 0; }
.dia-griglia .wp-block-post:nth-child(n+4)  { border-top: 1px solid var(--ink-200); }

/* L'immagine sta a filo del contenitore: nessun bordo, nessun raggio,
   nessuna didascalia. */
.dia-griglia .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.dia-griglia .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: opacity var(--t-slow) var(--ease);
}
.dia-griglia .wp-block-post-featured-image:hover img { opacity: .88; }

.dia-card__corpo {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  flex: 1;
}
.dia-card__corpo .wp-block-post-title {
  font-size: var(--wp--preset--font-size--titolo-m);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 0;
}
.dia-card__corpo .wp-block-post-title a { text-decoration: none; color: var(--ink-900); transition: var(--transition-color); }
.dia-card__corpo .wp-block-post-title a:hover { color: var(--red-500); }

/* L'estratto della scheda è serif piccolo. */
.dia-card__corpo .wp-block-post-excerpt__excerpt {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--serif-piccolo);
  line-height: 1.52;
  color: var(--ink-600);
  margin: 0;
}
.dia-card__corpo .wp-block-post-excerpt__more-text { display: none; }
.dia-card__corpo .dia-meta { margin-top: auto; padding-top: var(--wp--preset--spacing--40); }

/* La striscia «Altre letture»: quattro titoli in sans, senza immagine. */
.dia-strip .wp-block-post-template { gap: 0; }
.dia-strip .wp-block-post {
  background: var(--paper);
  padding: var(--wp--preset--spacing--50) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  border-left: 1px solid var(--ink-200);
}
.dia-strip .wp-block-post:nth-child(4n+1) { border-left: 0; }
.dia-strip .wp-block-post:nth-child(n+5)  { border-top: 1px solid var(--ink-200); }
.dia-strip .wp-block-post-title {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--piccolo);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}
.dia-strip .wp-block-post-title a { color: var(--ink-900); text-decoration: none; transition: var(--transition-color); }
.dia-strip .wp-block-post-title a:hover { color: var(--red-500); }
.dia-strip .dia-meta { font-size: 11px; }

/* Il marcatore «ALTRE LETTURE» sta in mezzo a due filetti. */
.dia-strip__titolo {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
  padding-block: var(--wp--preset--spacing--50);
}
.dia-strip__titolo::before, .dia-strip__titolo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-200);
}
.dia-strip__titolo p {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-400);
}

/* =========================================================================
   7. L'articolo
   ====================================================================== */

.dia-articolo__testata {
  max-width: 900px;
  margin-inline: auto;
  padding-block: var(--wp--preset--spacing--70);
  text-align: center;
}
.dia-articolo__testata .wp-block-post-title {
  font-size: var(--wp--preset--font-size--apertura);
  line-height: .98;
  letter-spacing: -.012em;
  margin: var(--wp--preset--spacing--50) 0;
}
.dia-articolo__testata .dia-sommario { margin-inline: auto; text-align: left; }
.dia-articolo__testata .dia-meta { justify-content: center; }

/* La figura di apertura è a tutta pagina, a filo, senza didascalia. */
.dia-articolo__figura img { display: block; width: 100%; height: 560px; object-fit: cover; }

/* Il corpo è sans, misura fissa. */
.dia-articolo__corpo {
  max-width: var(--measure-text);
  margin-inline: auto;
  padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
}
.dia-articolo__corpo .wp-block-post-content > :where(p, ul, ol) {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--corpo);
  line-height: 1.62;
  margin: 0 0 var(--wp--preset--spacing--50);
}
.dia-articolo__corpo .wp-block-post-content :where(h2, h3, h4) { margin: var(--wp--preset--spacing--80) 0 var(--wp--preset--spacing--40); }
.dia-articolo__corpo .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--titolo-m); }
.dia-articolo__corpo .wp-block-post-content h3 { font-size: var(--wp--preset--font-size--titolo-s); }

/* Nota di servizio: filetto sopra, corpo piccolo. Nessun fondo colorato. */
.is-style-nota {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--piccolo);
  line-height: 1.6;
  color: var(--ink-600);
  border-top: 1px solid var(--ink-200);
  padding-top: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--70);
}
.is-style-nota strong { color: var(--ink-900); }

/* =========================================================================
   8. Immagini
   ====================================================================== */

.wp-block-image img, .wp-block-post-featured-image img { display: block; }
.wp-block-image figcaption {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  line-height: 1.5;
  color: var(--ink-400);
  margin-top: 10px;
  text-align: left;
}

/* Il pannello di carta è la risposta del marchio alla leggibilità sopra
   una fotografia: mai una sfumatura di protezione. */
.dia-pannello {
  background: var(--surface-overlay);
  padding: var(--wp--preset--spacing--70);
  max-width: 620px;
}

/* =========================================================================
   9. La banda scura — l'unica superficie non di carta
   ====================================================================== */

.dia-inverse {
  background: var(--ink-950);
  color: var(--paper);
  padding-block: 72px;
  text-align: center;
}
.dia-inverse :where(h1, h2, h3) { color: var(--paper); }
.dia-inverse .dia-etichetta { color: var(--red-500); }
.dia-inverse p { color: var(--text-inverse-muted); }
.dia-inverse .dia-newsletter__testo {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--serif-piccolo);
  line-height: 1.52;
  max-width: 520px;
  margin-inline: auto;
}
.dia-inverse h2 {
  font-size: var(--wp--preset--font-size--titolo-l);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
}
.dia-inverse input[type="email"], .dia-inverse input[type="text"] {
  background: transparent;
  border: 1px solid var(--border-inverse);
  color: var(--paper);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--piccolo);
  padding: 14px 16px;
  width: 320px;
  max-width: 100%;
  transition: border-color var(--t-fast) var(--ease);
}
.dia-inverse input::placeholder { color: var(--text-inverse-muted); }
.dia-inverse input:focus { border-color: var(--red-500); outline: none; }

/* =========================================================================
   10. Colophon — torna la carta
   ====================================================================== */

.dia-colophon { padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50); }

/* Le colonne del colophon sono una griglia, non un flex: l'unità fr esiste
   solo nella griglia, e come flex-basis veniva scartata — da cui le colonne
   sovrapposte al marchio. */
.dia-colophon .wp-block-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--wp--preset--spacing--80);
  align-items: start;
}
.dia-colophon .wp-block-column { flex-basis: auto !important; min-width: 0; }

@media (max-width: 1023px) {
  .dia-colophon .wp-block-columns { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--70); }
  .dia-colophon .wp-block-columns > .wp-block-column:first-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .dia-colophon .wp-block-columns { grid-template-columns: 1fr; }
}
.dia-colophon a { color: var(--ink-900); text-decoration: none; transition: var(--transition-color); }
.dia-colophon a:hover { color: var(--red-500); }
.dia-colophon h2, .dia-colophon h3 {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-400);
  margin: 0 0 var(--wp--preset--spacing--40);
  line-height: 1.3;
}
.dia-colophon ul { list-style: none; padding: 0; margin: 0; }
.dia-colophon li { font-size: var(--wp--preset--font-size--piccolo); line-height: 2; }
.dia-colophon__legale {
  border-top: 1px solid var(--ink-200);
  margin-top: var(--wp--preset--spacing--80);
  padding-top: var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  color: var(--ink-400);
}
.dia-colophon__legale p { margin: 0; font-size: inherit; }

/* Codici, note brevi, segnaposto: sans piccolo in maiuscolo, colore metadati. */
.dia-codice {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.5;
  color: var(--ink-400);
}

/* L'etichetta dell'immagine sintetica: sempre visibile, con modello e data. */
.dia-sintetica {
  display: inline-block;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--red-500);
  border-top: 1px solid var(--red-500);
  padding-top: 8px;
  margin-top: 10px;
}

/* =========================================================================
   13. Due campi — il formato «Diatribe d'autore» e la doppia intervista
   Le due posizioni restano affiancate, ma nel linguaggio del sistema si
   separano con un filetto verticale, non con due fondi di tono diverso.
   ====================================================================== */

.is-style-due-campi { gap: 0 !important; }
.is-style-due-campi > .wp-block-column { padding: var(--wp--preset--spacing--50) var(--gutter); }
.is-style-due-campi > .wp-block-column:first-child { padding-left: 0; }
.is-style-due-campi > .wp-block-column:last-child  { padding-right: 0; }

@media (min-width: 782px) {
  .is-style-due-campi > .wp-block-column + .wp-block-column { border-left: 1px solid var(--ink-200); }
}
@media (max-width: 781px) {
  .is-style-due-campi > .wp-block-column { padding-inline: 0; }
  .is-style-due-campi > .wp-block-column + .wp-block-column {
    border-top: 1px solid var(--ink-200);
    margin-top: var(--wp--preset--spacing--50);
  }
}

/* La seconda posizione prende l'etichetta in blu: è l'unico uso del blu
   nel sistema, distinguere una seconda categoria nella stessa riga. */
.is-style-due-campi > .wp-block-column:last-child .dia-etichetta { color: var(--blue-500); }

/* — Colonne per fascia: 3 (o 4) da 900px, 2 fra 600 e 900, 1 sotto i 600 — */

@media (max-width: 899px) {
  .dia-griglia .wp-block-post-template,
  .dia-strip .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dia-griglia .wp-block-post,
  .dia-strip .wp-block-post { border-left: 1px solid var(--ink-200); border-top: 0; }
  .dia-griglia .wp-block-post:nth-child(odd),
  .dia-strip .wp-block-post:nth-child(odd) { border-left: 0; }
  .dia-griglia .wp-block-post:nth-child(n+3),
  .dia-strip .wp-block-post:nth-child(n+3) { border-top: 1px solid var(--ink-200); }
}

@media (max-width: 599px) {
  .dia-griglia .wp-block-post-template,
  .dia-strip .wp-block-post-template { grid-template-columns: 1fr; }

  .dia-griglia .wp-block-post,
  .dia-strip .wp-block-post { border-left: 0; border-top: 1px solid var(--ink-200); }
  .dia-griglia .wp-block-post:first-child,
  .dia-strip .wp-block-post:first-child { border-top: 0; }
}

/* =========================================================================
   11. Movimento — minimo e legato al colore. Una rivista non si muove.
   ====================================================================== */

a, .wp-block-post-title a, .wp-block-button__link { transition: var(--transition-color); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================================
   12. Adattamento
   ====================================================================== */

@media (max-width: 1023px) {
  .dia-articolo__figura img { height: 380px; }
  .dia-apertura { padding-block: var(--wp--preset--spacing--80); }
}

@media (max-width: 781px) {
  .dia-topbar .wp-block-group { justify-content: center; gap: var(--wp--preset--spacing--20); }
  .dia-card__corpo { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
  .dia-articolo__figura img { height: 260px; }
  .dia-articolo__corpo { padding-block: var(--wp--preset--spacing--70); }
  .dia-strip__titolo::before, .dia-strip__titolo::after { display: none; }
  .dia-inverse { padding-block: var(--wp--preset--spacing--80); }
  .dia-inverse input[type="email"] { width: 100%; }
}

@media print {
  .dia-inverse, .dia-nav, .dia-topbar { display: none; }
  body { background: #fff; color: #000; }
}