/*
Theme Name: 2la
Theme URI: https://www.2la.it
Author: 2la Learning Advanced
Author URI: https://www.2la.it/redazione/
Description: Tema su misura per la testata 2la — magazine di divulgazione. Tema classico con theme.json: tavolozza e scala tipografica bloccate, nessun pannello di opzioni.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 2la
Tags: news, blog, two-columns, custom-menu, featured-images, translation-ready, accessibility-ready, block-patterns
*/

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

:root {
  --ink: #14171A;
  --ink-soft: #1C2026;
  --muted: #4A5058;
  --muted-2: #5A6168;
  --paper: #F6F5F2;
  --paper-2: #EFEDE6;
  --hair: #DDDBD4;
  --block: #E3E1D9;
  --accent: #0F4C66;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --content: 680px;
  --wide: 1160px;
  --gutter: 20px;
  --colonna: 340px;
  --colonna-gap: 48px;
}

@media (min-width: 700px) {
  :root {
    --gutter: 40px;
  }

}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

@media (min-width: 700px) {
  body {
    font-size: 20px;
    line-height: 1.68;
  }

}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
* Il salto al contenuto. Non si nasconde spostandolo a -9999px: quella
* tecnica crea un elemento largo quanto la pagina fuori dal bordo, e a
* 320 pixel contribuisce allo scorrimento orizzontale. Si ritaglia a
* zero, che e' il modo che i lettori di schermo leggono comunque.
*/
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 15px;
}

.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  top: 8px;
  left: 8px;
}

/* --------------------------------------------------------------- layout */
.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-text {
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------- header */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}

@media (min-width: 700px) {
  .site-header__inner {
    padding-block: 18px;
    gap: 32px;
  }

}

@media (min-width: 700px) {
  .site-title {
    font-size: 30px;
  }

}

.site-nav {
  flex: 1;
  min-width: 0;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-family: var(--sans);
  font-size: 14px;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
}

@media (max-width: 899px) {
  .site-nav {
    display: none;
  }

}

.icon-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
}

.icon-btn--plain {
  border-color: transparent;
}

/* --------------------------------------------------------------- kicker */
.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

@media (min-width: 700px) {
  .kicker {
    font-size: 12px;
  }

}

a.kicker:hover {
  color: var(--ink);
}

.meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

@media (min-width: 700px) {
  .meta {
    font-size: 14px;
    gap: 14px;
  }

}

.meta__author {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

/* -------------------------------------------------------------- article */
.entry-head {
  padding-top: 40px;
}

@media (min-width: 700px) {
  .entry-head {
    padding-top: 72px;
  }

}

.entry-title {
  margin: 18px 0 16px;
  font-size: clamp(32px, 6.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.entry-standfirst {
  margin: 0 0 20px;
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  font-weight: 300;
}

@media (min-width: 700px) {
  .entry-hero {
    margin: 36px 0 56px;
  }

}

figure {
  margin: 32px 0;
}

figcaption, .wp-element-caption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2);
}

.entry-content > * {
  margin-block: 0 26px;
}

.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content h2 {
  margin: 44px 0 16px;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.entry-content h3 {
  margin: 34px 0 12px;
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.3;
  font-weight: 500;
}

.entry-content blockquote {
  margin: 36px 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--accent);
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.38;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

@media (min-width: 700px) {
  .entry-content blockquote {
    padding-left: 28px;
  }

}

.entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-style: normal;
  color: var(--muted-2);
}

/* riferimenti bibliografici: [i] [ii] */
.entry-content sup a, .nota-ref {
  font-family: var(--sans);
  font-size: 0.62em;
  vertical-align: super;
  text-decoration: none;
}

.note {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}

.note__title {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.note p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* blocchi redazionali */
.wp-block-group.is-style-scheda, .scheda {
  margin: 40px 0;
  padding: 24px 22px;
  background: var(--paper-2);
  border-top: 2px solid var(--accent);
}

@media (min-width: 700px) {
  .scheda {
    padding: 28px 30px;
  }

}

.scheda__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.scheda p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #2A2F36;
}

details.wp-block-details {
  padding: 18px 22px;
  border: 1px solid var(--hair);
  background: #fff;
}

details.wp-block-details summary {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}

/* --------------------------------------------------------------- footer */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}

.tag {
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: 100px;
  text-decoration: none;
  color: var(--ink);
}

.tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.author-box {
  margin-top: 44px;
  padding: 26px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.author-box img {
  border-radius: 50%;
  flex: 0 0 auto;
}

.author-box__name {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 6px;
}

.author-box__bio {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------- cards */
.section-title {
  margin: 0 0 24px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cards {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 1000px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

}

.card a.card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--block);
  margin-bottom: 14px;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__title {
  margin: 8px 0 8px;
  font-size: 21px;
  line-height: 1.28;
  font-weight: 500;
}

.card__excerpt {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
}

/* apertura della home */
.lead {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  padding-top: 36px;
}

@media (min-width: 700px) {
  .lead {
    gap: var(--colonna-gap);
    padding-top: 56px;
  }

}

.lead__media {
  flex: 999 1 520px;
  min-width: 0;
}

.lead__media .ph {
  aspect-ratio: 3 / 2;
  background: var(--block);
}

.lead__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lead__text {
  flex: 1 1 var(--colonna);
  min-width: 0;
}

.lead__title {
  margin: 14px 0 16px;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.lead__title a {
  color: inherit;
  text-decoration: none;
}

.lead__excerpt {
  margin: 0 0 16px;
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
}

/* ----------------------------------------------------------- temi / tag */
.themes {
  margin-top: 64px;
  padding-block: 44px;
  background: var(--paper-2);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.themes h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.2;
  font-weight: 500;
}

.themes p {
  margin: 0 0 24px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
}

.themes .tag {
  background: var(--paper);
}

/* --------------------------------------------------------------- gerenza */
.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--hair);
  background: var(--paper-2);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-block: 40px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

@media (min-width: 700px) {
  .site-footer__inner {
    gap: 48px;
    padding-block: 44px;
  }

}

.site-footer__brand {
  flex: 1 1 300px;
}

.site-footer__brand .mark {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.site-footer p {
  margin: 0;
}

/* ------------------------------------------------------------ paginazione */
.pagination {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
}

.pagination .page-numbers {
  padding: 9px 15px;
  border: 1px solid var(--hair);
  text-decoration: none;
  color: var(--ink);
}

.pagination .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ------------------------------------------------------------------ varie */
.archive-head {
  padding-block: 44px 8px;
}

.archive-head h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12;
  font-weight: 500;
}

.archive-head p {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--muted);
}

.search-form {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}

.search-form button {
  padding: 12px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
}

/* =================================================== v1.1 — allineamenti */
/* Le immagini larghe dentro il contenuto: senza queste regole WordPress
applica margini negativi e l'immagine esce dall'asse della colonna. */
.entry-content > .alignwide {
  max-width: 1000px;
  margin-inline: auto;
}

.entry-content > .alignfull {
  max-width: none;
  width: auto;
  margin-inline: calc(var(--gutter) * -1);
}

@media (min-width: 1040px) {
  .entry-content > .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

}

.entry-content .aligncenter {
  margin-inline: auto;
}

.entry-content .alignleft {
  float: left;
  margin: 6px 28px 20px 0;
  max-width: 50%;
}

.entry-content .alignright {
  float: right;
  margin: 6px 0 20px 28px;
  max-width: 50%;
}

.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* l'immagine di apertura resta dentro la larghezza massima, sempre */
/* =============================================== v1.1 — colonna laterale */
.article-body {
  display: block;
}

.rail {
  display: none;
}

@media (min-width: 1100px) {
  .rail {
    display: block;
    position: sticky;
    top: 28px;
    align-self: start;
    padding-top: 6px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-2);
    border-top: 2px solid var(--ink);
  }

}

.rail__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}

.rail__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}

.rail__value {
  color: var(--ink);
  font-size: 14px;
}

.rail__value a {
  color: var(--ink);
  text-decoration: none;
}

.rail__value a:hover {
  color: var(--accent);
}

.rail__share {
  display: flex;
  gap: 8px;
  padding-top: 14px;
}

.rail__share a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--ink);
}

.rail__share a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ================================================= v1.1 — home piu' densa */
.home-grid {
  display: block;
}

@media (min-width: 1000px) {
  .home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--colonna);
    column-gap: var(--colonna-gap);
    align-items: start;
  }

  .home-grid .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

.spalla {
  margin-top: 44px;
}

@media (min-width: 1000px) {
  .spalla {
    margin-top: 0;
    position: sticky;
    top: 28px;
  }

}

.spalla__box {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  margin-bottom: 36px;
}

.spalla__title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}

.spalla__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spalla__list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}

.spalla__list a {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
}

.spalla__list a:hover {
  color: var(--accent);
}

.spalla__date {
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted-2);
}

.spalla__num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
  margin-right: 8px;
}

/* =============================================== v1.2 — immagine di testa */
/* Un ritratto verticale non va portato alla larghezza del contenitore:
si ingrandisce oltre la sua risoluzione e si vede la grana. Qui l'immagine
non supera mai la dimensione naturale ne' i due terzi dello schermo. */
/* ================================================== v1.2 — menu su mobile */
.menu-toggle {
  display: flex;
}

@media (min-width: 900px) {
  .menu-toggle {
    display: none;
  }

}

.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}

.mobile-nav[data-open="true"] {
  display: block;
}

@media (min-width: 900px) {
  .mobile-nav {
    display: none !important;
  }

}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 18px;
  font-family: var(--sans);
}

.mobile-nav li {
  border-bottom: 1px solid var(--hair);
}

.mobile-nav li:last-child {
  border-bottom: 0;
}

.mobile-nav a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
}

.mobile-nav a:hover {
  color: var(--accent);
}

.mobile-nav .search-form {
  margin: 18px 0 0;
}

/* ================================================== v1.2 — pagina autore */
.author-head {
  padding-block: 44px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.author-head img {
  border-radius: 50%;
  flex: 0 0 auto;
}

.author-head__text {
  flex: 1 1 320px;
  min-width: 0;
}

.author-head h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12;
  font-weight: 500;
}

.author-head__role {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.author-head__bio {
  margin: 0 0 12px;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.author-head__count {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted-2);
}

/* ==================================================== v1.2 — glossario */
.glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hair);
}

.glossary-index a, .glossary-index span {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
  text-decoration: none;
  color: var(--ink);
}

/*
 * Le lettere senza voci.
 *
 * Erano a #B4B1A8: 1.97 contro lo sfondo, meno della meta' del minimo
 * che chiede la norma. Si poteva lasciarle li' appellandosi all'eccezione
 * per i comandi inattivi, ma l'eccezione e' una scappatoia formale: chi
 * ha una vista anche solo un po' calante quelle lettere non le vedeva, e
 * l'indice gli sembrava mancante invece che incompleto.
 *
 * Ora sono a 4.83. Restano comunque distinguibili dalle altre, che sono
 * nere piene: e la differenza non e' affidata al solo colore, perche'
 * quelle attive sono collegamenti — si raggiungono col Tab, cambiano al
 * passaggio del mouse — e queste no.
 */
.glossary-index span {
  color: #6E6C63;
  border-style: dashed;
}

.glossary-index a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.glossary-group {
  margin-bottom: 36px;
}

.glossary-group h2 {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 500;
  color: var(--accent);
}

.glossary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.glossary-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}

.glossary-list a {
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
}

.glossary-list a:hover {
  color: var(--accent);
}

.glossary-list p {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
}

.term-head {
  padding-block: 48px 0;
}

.term-head .kicker {
  margin-bottom: 14px;
}

.term-title {
  margin: 0 0 20px;
  font-size: clamp(32px, 5.4vw, 48px);
  line-height: 1.1;
  font-weight: 500;
}

/* ======================================================= v1.2 — formula */
.formula {
  margin: 36px 0;
  padding: 26px 20px;
  background: #fff;
  border: 1px solid var(--hair);
  text-align: center;
  font-size: clamp(20px, 3vw, 25px);
}

.formula__note {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted-2);
}

/* ========================================================= v1.2 — stampa */
@media print {
  .site-header, .mobile-nav, .rail, .tags, .author-box, .pagination, .themes, .site-footer, .icon-btn, .spalla {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11.5pt;
    line-height: 1.5;
  }

  .wrap, .wrap-text, .article-body {
    max-width: none;
    padding: 0;
    display: block;
  }

  .entry-title {
    font-size: 22pt;
  }

  .entry-hero img {
    max-height: 10cm;
  }

  /* in un testo accademico l'indirizzo del link serve davvero */
  .entry-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }

  .note {
    page-break-inside: avoid;
  }

}

/* ========================================= v1.3 — apertura adattiva */
/* Il formato dell'immagine decide la presentazione: vedi duela_hero_class(). */
.entry-hero--larga, .entry-hero--media {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.entry-hero--media {
  max-width: 900px;
}

.entry-hero--larga img, .entry-hero--media img {
  height: auto;
  object-fit: cover;
}

/* verticale o a bassa risoluzione: mai ingrandita, su una fascia che
le da' peso invece di lasciarla sospesa nel bianco */
.entry-hero--contenuta {
  background: var(--paper-2);
  padding-block: 32px;
  margin-inline: 0;
  max-width: none;
}

.entry-hero--contenuta img {
  width: auto;
  height: auto;
  max-width: min(100% - (var(--gutter) * 2), 760px);
  max-height: 74vh;
  margin-inline: auto;
}

.entry-hero--contenuta figcaption {
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===================================== v1.4 — allineamento della colonna */
/*
* UN SOLO bordo sinistro per occhiello, titolo, firma, immagine e colonna
* laterale. Solo il corpo del testo rientra, e rientra perche' accanto c'e'
* la colonna laterale a occupare quello spazio: il rientro si spiega da se'.
*
* (La versione precedente rientrava anche il titolo, lasciando un vuoto
* sopra la colonna laterale, che comincia piu' in basso.)
*/
:root {
  --rail-w: 190px;
  --rail-gap: 56px;
}

@media (min-width: 1100px) {
  .entry-head {
    max-width: var(--wide);
    padding-inline: var(--gutter);
  }

  /* la misura del titolo resta da lettura, ma parte dal bordo comune */
  .entry-head > * {
    max-width: 820px;
  }

  .article-body {
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .entry-hero--larga, .entry-hero--media {
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .entry-hero--media {
    max-width: calc(var(--wide) * 0.78);
    margin-inline: 0 auto;
  }

  /* la fascia e' a tutta larghezza, ma il suo contenuto si allinea
  al bordo comune: il padding si calcola rispetto al contenitore */
  .entry-hero--contenuta {
    padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
  }

  .entry-hero--contenuta img {
    margin-inline: 0;
  }

  .entry-hero figcaption {
    max-width: 820px;
    margin-inline: 0;
    text-align: left;
  }

  .entry-hero--larga figcaption, .entry-hero--media figcaption {
    margin-inline: 0;
  }

  .entry-rule {
    max-width: var(--wide);
    padding-inline: var(--gutter);
  }

  .entry-rule hr {
    max-width: 820px;
  }

}

/* ============================== v1.5 — articoli e schede senza immagine */
/*
* Nell'archivio 338 articoli su 1303 non hanno immagine e 809 ne hanno una
* sotto gli 800px. Il progetto deve reggere su questo, non sull'eccezione.
*/
/* apertura senza immagine: un filetto chiude il blocco e il titolo respira */
.entry-head--senza-immagine {
  padding-bottom: 36px;
  margin-bottom: 8px;
}

.entry-head--senza-immagine .entry-title {
  font-size: clamp(34px, 7vw, 64px);
}

.entry-head--senza-immagine .meta {
  padding-bottom: 0;
}

.entry-rule {
  margin: 0 auto 44px;
}

.entry-rule hr {
  border: 0;
  border-top: 2px solid var(--ink);
  margin: 0;
}

/* scheda senza immagine: il rettangolo grigio diventa un oggetto tipografico */
.card__media--vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  padding: 20px;
  text-align: center;
}

.card__media--vuota span {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.2;
  font-style: italic;
  font-weight: 300;
  color: var(--muted-2);
}

/* immagine piccola dentro la scheda: non stirarla, centrala sulla fascia */
.card__media--piccola {
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__media--piccola img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ===================================== v1.7 — un contenitore solo */
/*
* Le versioni precedenti davano a intestazione, immagine e corpo contenitori
* diversi: tre bordi sinistri che cambiavano al variare della larghezza.
* Qui tutto vive nello stesso contenitore, con lo stesso padding, e nulla
* si centra per conto proprio. Il testo e' limitato in misura ma allineato
* a sinistra, non centrato: il bordo resta uno solo.
*/
.entry-head, .entry-hero, .entry-rule, .article-body {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.entry-head > *, .entry-rule hr {
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;
}

/* l'immagine: nessuna fascia colorata, nessun ingrandimento oltre il naturale */
.entry-hero {
  background: none;
  padding-block: 0;
  margin: 28px auto 44px;
}

.entry-hero img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  margin-inline: 0;
  object-fit: contain;
}

/* orizzontale e grande: riempie il contenitore, ed e' il caso in cui
l'apertura grande ha senso */
.entry-hero--larga img {
  width: 100%;
  max-height: none;
  object-fit: cover;
}

.entry-hero--media img {
  width: 100%;
  max-width: 820px;
  max-height: none;
}

.entry-hero figcaption {
  max-width: 820px;
  margin-inline: 0;
  text-align: left;
}

@media (min-width: 1100px) {
  .article-body {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, var(--content));
    column-gap: var(--rail-gap);
    justify-content: start;
  }

  .article-body > .entry-content {
    padding-inline: 0;
    max-width: var(--content);
  }

}

/* ======================================== v1.8 — testata su due livelli */
/*
* Prima era una barra da applicazione: nome e sezioni sulla stessa riga,
* stesso peso, filetto sottile. Una testata giornalistica invece ha il
* nome come oggetto a se', e le sezioni sotto, chiuse da un filetto pieno.
*/
.site-header {
  border-bottom: 0;
}

@media (min-width: 700px) {
}

.masthead__inner {
  justify-content: space-between;
}

.site-title {
  overflow-wrap: anywhere;
  min-width: 0;
}

@media (max-width: 860px) {
}

.masthead__data {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

@media (max-width: 700px) {
}

/* riga delle sezioni: maiuscoletto spaziato, filetto pieno sotto */
.sections {
  border-top: 1px solid var(--hair);
  border-bottom: 2px solid var(--ink);
}

@media (max-width: 899px) {
  .sections {
    display: none;
  }

}

.sections .site-nav {
  display: block;
}

.sections .site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sections .site-nav li {
  position: relative;
}

.sections .site-nav li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: var(--hair);
}

.sections .site-nav a {
  display: block;
  padding: 13px 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.sections .site-nav li:first-child a {
  padding-left: 0;
}

.sections .site-nav a:hover {
  color: var(--accent);
}

.sections .site-nav .current-cat > a, .sections .site-nav .current-menu-item > a {
  color: var(--accent);
}

/* su schermo stretto la testata chiude comunque con un filetto */
@media (max-width: 899px) {
  .masthead {
    border-bottom: 2px solid var(--ink);
  }

}

/* ================================ v1.9 — testata centrata, nome grande */
/*
* Disposizione classica da testata: data a sinistra, nome al centro,
* strumenti a destra. Il nome e' il baricentro della pagina e il vuoto
* della riga sparisce, perche' il centro e' occupato dall'identita'.
*/
@media (min-width: 700px) {
  .masthead {
    padding-block: 30px 22px;
  }

}

.masthead__inner {
  grid-template-columns: 1fr auto 1fr;
}

.masthead__left {
  justify-self: start;
}

.masthead__side {
  justify-self: end;
}

.masthead__brand {
  justify-self: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  min-width: 0;
}

.masthead__tagline {
  white-space: normal;
}

/* su schermo stretto il nome resta centrato ma la data sparisce:
   restano due pulsanti a destra e una colonna vuota a sinistra che
   mantiene il nome davvero al centro */
@media (max-width: 700px) {
  .masthead__data {
    display: none;
  }

  .masthead__inner {
    gap: 8px;
  }

  .site-title {
    font-size: clamp(34px, 11vw, 44px);
  }

  .masthead__tagline {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

}

@media (max-width: 860px) {
  .masthead__tagline {
    display: block;
  }

}

/* =============================== v2.0 — testata a riga unica */
/*
* Impianto: descrittore su due righe, nome, filetto verticale, sezioni,
* strumenti. Tutto su una riga sola, chiusa in basso da un filetto pieno.
* Il descrittore a sinistra fa da contrappeso al nome, che da solo
* restava sospeso nel vuoto.
*/
.masthead {
  padding-block: 0;
  border-bottom: 2px solid var(--ink);
}

@media (max-width: 899px) {
  .masthead {
    border-bottom-width: 2px;
  }

}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 14px;
  min-height: 0;
}

/* descrittore: due righe, allineato a destra contro il nome */
.masthead__tagline {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--muted-2);
  flex: 0 0 auto;
}

@media (max-width: 1099px) {
  .masthead__tagline {
    display: none;
  }

}

.masthead__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Il titolo della testata. Questa e' l'ultima dichiarazione del foglio
   e quindi quella che vince: le precedenti, piu' in alto, valgono solo
   per le proprieta' che qui non compaiono.
   Il minimo scende da 34 a 26 pixel perche' a 320 di larghezza — pari a
   un ingrandimento del 400%, che il criterio WCAG 1.4.10 richiede di
   reggere — un nome lungo spingeva i bottoni fuori dalla pagina. */
.site-title {
  font-family: var(--serif);
  font-size: clamp(26px, 4.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}

.masthead__rule {
  flex: 0 0 auto;
  width: 1px;
  height: 34px;
  background: var(--hair);
}

@media (max-width: 899px) {
  .masthead__rule {
    display: none;
  }

}

/* sezioni in linea */
.masthead__inner .site-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

@media (max-width: 899px) {
  .masthead__inner .site-nav {
    display: none;
  }

}

.masthead__inner .site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.masthead__inner .site-nav li::before {
  content: none;
}

.masthead__inner .site-nav a {
  display: block;
  padding: 4px 0;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
}

.masthead__inner .site-nav a:hover {
  color: var(--accent);
}

.masthead__inner .site-nav .current-cat > a, .masthead__inner .site-nav .current-menu-item > a {
  color: var(--accent);
}

.masthead__side {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* la vecchia riga separata delle sezioni non serve piu' */
.sections {
  display: none;
}

/* ============================ v2.1 — descrittore dopo il nome */
/*
* Il descrittore sta a destra del nome, allineato a sinistra e con le righe
* bilanciate: un box stretto lo spezzava in tre righe di lunghezza molto
* diversa, e lo scalino si leggeva come un errore di impaginazione.
* Giustificarlo sarebbe peggio: su righe cosi' corte si aprirebbero buchi
* fra le parole.
*/
.masthead__tagline {
  max-width: 210px;
  text-align: left;
  text-wrap: balance;
  line-height: 1.5;
  font-size: 11px;
  letter-spacing: 0.12em;
  border-left: 1px solid var(--hair);
  padding-left: 18px;
  align-self: center;
}

/* il filetto verticale ora e' quello del descrittore */
.masthead__rule {
  display: none;
}

/* sezioni un po' piu' grandi */
.masthead__inner .site-nav ul {
  gap: 22px;
}

.masthead__inner .site-nav a {
  font-size: 15px;
}

@media (max-width: 1199px) {
  .masthead__tagline {
    max-width: 170px;
    font-size: 10px;
    padding-left: 14px;
  }

  .masthead__inner .site-nav a {
    font-size: 14px;
  }

}

/* ============================ v2.2 — spalla con miniature */
.spalla__list a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
}

.spalla__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  overflow: hidden;
  display: block;
}

.spalla__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spalla__text {
  min-width: 0;
}

.spalla__titolo {
  display: block;
  font-size: 17px;
  line-height: 1.32;
  color: var(--ink);
}

.spalla__autore {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  font-style: normal;
}

.spalla__list a:hover .spalla__titolo {
  color: var(--accent);
}

/* non servono piu' */
.spalla__num, .spalla__date {
  display: none;
}

/* anche nelle schede della griglia la data sparisce: resta nel pezzo */
.card__meta {
  display: none;
}

/* ================================= v2.5 — sezioni richiudibili (details) */
/*
* Sostituiscono lo shortcode [bg_collapse] di un vecchio plugin, usato
* negli esercizi d'inglese per tenere nascoste le soluzioni.
*
* <details> e' un elemento del browser: apre e chiude da solo, lo annuncia
* ai lettori di schermo e continua a funzionare anche se questo foglio di
* stile non venisse caricato. Qui gli diamo solo un aspetto.
*/
.duela-dettagli {
  margin: 28px 0;
  border: 1px solid var(--hair);
  background: var(--paper-2);
}

.duela-dettagli > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}

.duela-dettagli > summary::-webkit-details-marker {
  display: none;
}

/* il segno che indica lo stato: piu' quando e' chiuso, meno quando e' aperto */
.duela-dettagli > summary::before {
  content: "+";
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  width: 1em;
  text-align: center;
}

.duela-dettagli[open] > summary::before {
  content: "–";
}

.duela-dettagli > summary:hover {
  color: var(--ink);
}

.duela-dettagli > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.duela-dettagli[open] > summary {
  border-bottom: 1px solid var(--hair);
}

/* il contenuto: tutto tranne l'intestazione */
.duela-dettagli > *:not(summary) {
  padding-inline: 18px;
}

.duela-dettagli > *:not(summary):first-of-type {
  padding-top: 14px;
}

.duela-dettagli > *:not(summary):last-child {
  padding-bottom: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .duela-dettagli {
    transition: border-color 160ms ease;
  }

  .duela-dettagli[open] {
    border-color: var(--muted-2);
  }

}

/* ======================================= v2.6 — colori di sezione e fascia */
/*
* Ogni sezione ha un suo pigmento, portato nel foglio di stile come
* --sezione dalla funzione duela_stile_sezione(). Qui si usa sempre con
* un ripiego: var(--sezione, var(--accent)). Una pagina senza sezione —
* una ricerca, un errore 404, una pagina statica — resta cosi' coerente
* invece di perdere il colore.
*
* Il colore compare in pochi punti: l'occhiello, una riga sopra il
* titolo dell'articolo, un filo sopra le schede. Il corpo del testo
* resta inchiostro su carta: se il colore invade la lettura, smette di
* essere un segnale e diventa rumore.
*/
.kicker {
  color: var(--sezione, var(--accent));
}

/* la riga che dice al lettore in che sezione sta leggendo.
Sta sotto il nome della sezione, non sopra: una sottolineatura
appartiene alla parola che sottolinea, una riga sospesa sopra resta
un segno a se' stante e il lettore non sa a cosa si riferisca. */
.entry-head .kicker {
  padding-bottom: 10px;
  border-bottom: 3px solid var(--sezione, var(--accent));
}

.term-head .kicker, .term-head .term-title {
  color: inherit;
}

.term-head .kicker {
  padding-bottom: 10px;
  border-bottom: 3px solid var(--sezione, var(--accent));
}

/* un filo sulle schede: si coglie con la coda dell'occhio, non grida */
.card .kicker {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sezione, var(--accent));
  width: 100%;
}

/* ------------------------------------------------- la fascia dei quattro */
.strip {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
}

/* su schermo stretto scorre col dito, invece di impilarsi per quattro
   schermate: la fascia e' un invito a sbirciare, non una lista */
@media (max-width: 760px) {
  .strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .strip__item {
    scroll-snap-align: start;
  }

}

.strip__item {
  display: block;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.strip__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--block);
  overflow: hidden;
  margin-bottom: 12px;
}

.strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .strip__media img {
    transition: none;
  }

}

.strip__item:hover .strip__media img {
  transform: scale(1.03);
}

.strip__kicker {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sezione, var(--accent));
  padding-bottom: 7px;
  border-bottom: 2px solid var(--sezione, var(--accent));
  margin-bottom: 8px;
}

.strip__title {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  text-wrap: balance;
}

.strip__item:hover .strip__title {
  color: var(--sezione, var(--accent));
}

/* l'intestazione della sezione porta il suo colore.
La riga sta sotto il titolo e larga quanto lui: a tutta pagina
sembrava un bordo dell'intestazione del sito, senza rapporto con
la sezione che sta qualificando. */
.archive-head h1 {
  color: var(--sezione, var(--ink));
  display: inline-block;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--sezione, var(--hair));
}

.archive-head p {
  margin-top: 0;
}

/* ============================================ v3.0 — pagina delle sezioni */
.sezioni {
  padding-block: 48px 72px;
}

.sezioni__testa {
  max-width: 680px;
  margin-bottom: 48px;
}

.sezioni__testa h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 5.4vw, 48px);
  line-height: 1.1;
  font-weight: 500;
  text-wrap: balance;
}

.sezioni__intro {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.sezioni__gruppo {
  margin-bottom: 52px;
}

.sezioni__titolo {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.sezioni__spiega {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted-2);
}

.sezioni__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}

@media (min-width: 700px) {
  .sezioni__elenco {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

.sezioni__voce {
  background: var(--paper);
  padding: 0;
}

.sezioni__voce > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--sezione, transparent);
}

.sezioni__voce > a:hover {
  background: var(--paper-2);
}

.sezioni__nome {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--sezione, var(--ink));
}

.sezioni__conto {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
}

.sezioni__descrizione {
  margin: -6px 0 0;
  padding: 0 20px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------------------------------- spalla: voci con titolo ed estratto */
.spalla__list--testo li {
  padding: 14px 0;
}

.spalla__list--testo .spalla__titolo {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 4px;
}

.spalla__estratto {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-2);
}

.spalla__list--testo a:hover .spalla__titolo {
  color: var(--sezione, var(--accent));
}

/* ============================================= v3.2 — fondo pagina e gerenza */
.site-footer__nav {
  flex: 1 1 200px;
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.site-footer__nav a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-footer__gerenza {
  flex: 2 1 380px;
}

/* la gerenza e' un obbligo, non un richiamo: si legge quando la si cerca */
.site-footer__gerenza p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted-2);
}

.site-footer__copyright {
  margin-top: 10px !important;
  color: var(--muted-2);
}

/* ------------------------------------------------------- avatar locali */
/*
* Un cerchio con le iniziali al posto dell'immagine da Gravatar. La
* misura arriva da chi lo chiama, cosi' lo stesso elemento serve per il
* riquadro dell'autore (64px) e per la sua pagina (96px).
*/
.duela-avatar {
  width: var(--avatar, 64px);
  height: var(--avatar, 64px);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--block);
  color: var(--muted);
  font-family: var(--sans);
  font-size: calc(var(--avatar, 64px) * 0.36);
  font-weight: 600;
  letter-spacing: 0.04em;
  user-select: none;
}

/* la fascia senza immagine: stesso trattamento delle schede */
.strip__media--vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  padding: 14px;
  text-align: center;
}

.strip__media--vuota span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.2;
  color: var(--muted-2);
}


/* ---------------------------------------- video caricati su richiesta */

/*
 * Il pannello che sta al posto dell'iframe finche' nessuno chiede il
 * video. Nessuna immagine da YouTube: anche la miniatura sarebbe una
 * richiesta a un terzo, e il senso di tutto questo e' che non ne parta
 * nessuna.
 */
.video-attesa {
  margin: 32px 0;
  aspect-ratio: var(--proporzioni, 16 / 9);
  background: var(--paper-2);
  border: 1px solid var(--hair);
}

.video-attesa__bottone {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 24px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: inherit; text-align: center;
}
.video-attesa__bottone:hover { background: var(--block); }
.video-attesa__bottone:focus-visible {
  outline: 3px solid var(--accent); outline-offset: -3px;
}

.video-attesa__play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); flex: 0 0 auto;
  display: block; position: relative;
}
.video-attesa__play::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 20px solid var(--paper);
  border-block: 12px solid transparent;
}
.video-attesa__bottone:hover .video-attesa__play { background: var(--accent); }

.video-attesa__testo { display: block; max-width: 36em; }
.video-attesa__titolo {
  display: block;
  font-family: var(--serif); font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.3; color: var(--ink); margin-bottom: 6px;
}
.video-attesa__nota {
  display: block;
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  color: var(--muted-2);
}

.video-attesa__frame { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------ commenti */

.commenti { padding-block: 56px 24px; }

.commenti__titolo {
  margin: 0 0 28px;
  font-size: clamp(22px, 3vw, 28px); font-weight: 500;
  padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}

.commenti__elenco { list-style: none; margin: 0 0 32px; padding: 0; }
.commenti__elenco .children { list-style: none; margin: 0 0 0 28px; padding: 0; }
@media (min-width: 700px) { .commenti__elenco .children { margin-left: 44px; } }

.commento__corpo {
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}

.commento__testa { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.commento__autore {
  display: block;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink);
}
.commento__data {
  display: block;
  font-family: var(--sans); font-size: 13px; color: var(--muted-2);
}

.commento__testo { font-size: 17px; line-height: 1.65; }
.commento__testo p { margin: 0 0 12px; }

.commento__attesa {
  font-family: var(--sans); font-size: 13px; color: var(--muted-2);
  font-style: italic; margin: 0 0 10px;
}

.commento__rispondi { margin: 10px 0 0; }
.commento__rispondi a {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.commento__rispondi a:hover { text-decoration: underline; }

.commenti__chiusi {
  font-family: var(--sans); font-size: 14px; color: var(--muted-2);
  padding: 14px 0; border-top: 1px solid var(--hair);
}

/* ------------------------------------------------------- modulo commento */

.commento-form__nota {
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--muted-2); margin: 0 0 18px;
}

.comment-form label,
.commento-form__campo label {
  display: block;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--ink);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--hair);
  background: var(--paper);
  font-family: var(--sans); font-size: 16px;   /* 16px: sotto, iOS ingrandisce da solo */
  color: var(--ink);
}
.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent);
}

.comment-form p { margin: 0 0 16px; }

.comment-form .submit {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 24px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 0;
}
.comment-form .submit:hover { background: var(--accent); }
.comment-form .submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ============================ v4.5 — classi che WordPress stampa da solo */

/*
 * WordPress aggiunge queste classi senza chiedere, e un tema che non le
 * prevede le lascia senza aspetto: una didascalia sotto una foto
 * diventa un paragrafo qualunque, un articolo in evidenza non si
 * distingue. Non sono decorazioni: sono il modo in cui il core comunica
 * stati e strutture al tema.
 */

/* un articolo messo in evidenza dalla redazione */
.sticky .card__title::before,
.sticky .lead__title::before {
  content: "★";
  font-size: 0.7em;
  vertical-align: 0.35em;
  margin-right: 0.4em;
  color: var(--sezione, var(--accent));
}

/* un commento scritto da chi ha firmato l'articolo */
.bypostauthor > .commento__corpo {
  border-left: 3px solid var(--sezione, var(--accent));
  padding-left: 16px;
}

/* didascalie delle immagini, vecchio stile e nuovo */
.wp-caption { max-width: 100%; margin: 28px 0; }
.wp-caption img { width: 100%; height: auto; display: block; }

.wp-caption-text,
.gallery-caption,
.wp-element-caption,
figcaption {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2);
  text-align: left;
}

/* le pagine di un articolo spezzato */
.pagine-articolo {
  margin: 40px 0 0;
  font-family: var(--sans); font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  color: var(--muted-2);
}
.pagine-articolo a { text-decoration: none; color: var(--ink); }
.pagine-articolo__numero {
  display: inline-block;
  min-width: 34px; padding: 6px 10px; text-align: center;
  border: 1px solid var(--hair);
}
.pagine-articolo a .pagine-articolo__numero:hover {
  border-color: var(--ink);
}
.pagine-articolo > .pagine-articolo__numero {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* la nota sotto l'etichetta di un campo */
.commento-form__aiuto {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2);
  margin: 2px 0 6px;
}
.comment-form .required { color: #8C3A24; }

/* l'avviso per chi naviga senza JavaScript */
.commenti__noscript {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 0, 0, 0.03);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}