/* ####################################################################
   NOTE DI SESSIONE (Cowork, luglio 2026) - v2.3.0
   --------------------------------------------------------------------
   ATTENZIONE: le personalizzazioni LIVE del sito vivono soprattutto nel
   DATABASE, non in questo file:
     - Stili globali (Site Editor -> Stili -> CSS aggiuntivo): blocchi
       DS-FIX-2026-07..13 e DS-VARS (palette e font collegati a
       Stili -> Colori / Tipografia).
     - Script custom nei template (DB): ds-filter-active (archive),
       ds-ui / ds-aside-clean / ds-nav-current (footer), ds-font-sync (header).
     - Header FSE: overlayMenu "mobile" sulle navigazioni.
   ARCHITETTURA: sito su Coolify come Service docker-compose (WordPress +
   MariaDB); /var/www/html su volume persistente. Nessun deploy da Git:
   il repo GitHub distintisaluti-child e un BACKUP MANUALE del codice.
   Backup completo del sito = UpdraftPlus (file + database).
   INSIDIE: (1) niente carattere di minore-di negli script dentro wp:html
   (rompe il salvataggio: usare forEach); (2) il tema genitore forza
   a:hover underline con !important (per il menu serve la classe
   .wp-block-navigation-item__content); (3) verificare i colori a schermo,
   non via getComputedStyle.
   Changelog completo e dettagli: README.md e testata di questo file NEL
   REPOSITORY (Documents/GitHub/distintisaluti-child).
   #################################################################### */

/* ====================================================================
   distintisaluti.it — Foglio di stile v2
   Sorgenti autoritative:
     - distintisaluti-MASTER-v2.docx (master, prevale)
     - wordpress-mapping.html (mappa tecnica)
     - provini-accenti.html (carta ottone + masthead)
   Regole di base:
     - Carta ottone fissa, accento placeholder Rosso vivo #C73B25
     - Source Serif 4 (titoli+corpo) + Special Elite (wordmark) + JetBrains Mono (mono)
     - Body 17 px minimo (decisione master § 2.4)
     - Border-radius zero ovunque
     - Niente ombre morbide, niente gradienti, niente bordi colorati 4 px sinistra
   ==================================================================== */

:root {
  /* Palette fissa — § 2.1 master */
  --paper:     #F3EFE6;
  --paper-2:   #EBE5D7;
  --ink:       #15181F;
  --ink-soft:  #2D323C;
  --ink-mute:  #6F7480;
  --rule:      rgba(21,24,31,.16);
  --rule-firm: #15181F;

  /* Accento placeholder — Decisione A aperta (vedi SEGNALAZIONI) */
  --accent:    #C73B25;

  /* Tipografia */
  --serif:      "Source Serif 4", Georgia, serif;
  --typewriter: "Special Elite", "Courier New", monospace;
  --mono:       "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Layout */
  --content:   720px;
  --wide:      1400px;
  --gutter:    clamp(20px, 4vw, 56px);
  --pad-y:     clamp(48px, 6vw, 96px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }

body {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;                /* MASTER § 2.4 — 17 px minimo */
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

/* Grana di carta — opacity .45 su ottone (mapping § 1.6) */
body::before {
  content:""; position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: .45;
  z-index: 1;
}
main { position: relative; z-index: 2; }

/* Selezione e link */
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

/* Focus visibile — § 2.7 master */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; text-decoration: none; }

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

/* ==================================================================
   MASTHEAD A SCOMPARSA  — wordpress-mapping § 4
   ================================================================== */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  text-align: center;
  border-bottom: 1px solid var(--rule);
  padding: 28px 32px 18px;
  transition: padding .35s cubic-bezier(.2,.7,.3,1);
}
.masthead .wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 1; letter-spacing: -0.012em;
  color: var(--ink);
  transition: font-size .35s cubic-bezier(.2,.7,.3,1);
}
.masthead .wordmark a {
  color: inherit; text-decoration: none;
}
.masthead .wordmark .te {
  font-family: var(--typewriter);
  font-style: normal;
}
.masthead .wordmark .te-accent {
  font-family: var(--typewriter);
  font-style: normal;
  color: var(--accent);
}
.masthead .wordmark .tld {
  font-style: normal; font-weight: 500;
  color: var(--accent);
  font-size: 0.42em; vertical-align: super; margin-left: 2px;
}

.masthead .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  max-height: 60px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .35s, opacity .35s, margin-top .35s;
}
.masthead .tagline .te {
  font-family: var(--typewriter); font-style: normal; color: var(--ink);
}
.masthead .tagline .te-accent {
  font-family: var(--typewriter); font-style: normal; color: var(--accent);
}

.masthead .nav {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; gap: 26px; align-items: center;
  max-height: 60px; opacity: 1; overflow: visible;
  transition: max-height .35s, opacity .35s, margin-top .35s;
}
.masthead .nav a {
  color: inherit; text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.masthead .nav a:hover { border-bottom-color: var(--accent); color: var(--ink); }
.masthead .nav .active {
  color: var(--accent);
}
.masthead .nav .active::before {
  content:""; display: inline-block;
  width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%;
  margin-right: 6px; vertical-align: middle; position: relative; top: -1px;
}
.masthead .nav .has-sub::after {
  content: "▾"; display: inline-block; margin-left: 4px; color: var(--ink-mute);
}

/* Marchio iconico compatto — usato nello stato scrolled */
.masthead .mark {
  display: none;
  font-family: var(--typewriter);
  font-style: normal; font-size: 18px;
  color: var(--ink);
}
.masthead .mark .slash { color: var(--accent); }
.masthead .compact-contact {
  display: none;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.masthead .compact-contact a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.masthead .compact-contact a:hover { border-bottom-color: var(--accent); }

/* Stato scrolled */
body.is-scrolled .masthead {
  padding: 10px 32px 9px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  text-align: left;
}
body.is-scrolled .masthead .wordmark { display: none; }
body.is-scrolled .masthead .tagline { max-height: 0; opacity: 0; margin: 0; }
body.is-scrolled .masthead .mark { display: inline-block; }
body.is-scrolled .masthead .compact-contact { display: inline-block; justify-self: end; }
body.is-scrolled .masthead .nav {
  margin: 0; justify-self: center;
}
body.is-scrolled .masthead .nav .active::before { display: none; }

/* Menu toggle mobile */
.masthead .menu-toggle {
  display: none;
  background: transparent; border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .masthead { padding: 22px 20px 14px; }
  .masthead .wordmark { font-size: 26px; }
  .masthead .nav { display: none; }
  .masthead .menu-toggle { display: inline-block; margin-top: 12px; }
  body.is-scrolled .masthead {
    grid-template-columns: auto 1fr auto;
  }
  body.is-scrolled .masthead .menu-toggle { margin-top: 0; }
}

/* Drawer mobile */
.drawer {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 200;
  padding: 80px 32px 32px;
  display: none;
  overflow-y: auto;
}
.drawer.is-open { display: block; }
.drawer__close {
  position: absolute; top: 20px; right: 20px;
  background: transparent; border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
}
.drawer ul { list-style: none; padding: 0; margin: 0; }
.drawer li { border-bottom: 1px solid var(--rule); }
.drawer li a {
  display: block;
  padding: 18px 0;
  min-height: 56px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
}
.drawer li a:hover, .drawer li a:focus { color: var(--accent); }

/* ==================================================================
   TIPOGRAFIA — Scala master § 2.4
   ================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
.eyebrow::before {
  content:""; display: inline-block;
  width: 32px; height: 1px; background: var(--accent);
}
.eyebrow .num { color: var(--accent); }

.display {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 800; }
.display .accent { color: var(--accent); }
.display .punct { color: var(--accent); }

h1, .heading {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 16px;
  text-wrap: balance;
}
h1 em, .heading em { font-style: italic; font-weight: 800; }
h1 .accent, .heading .accent, h1 .punct, .heading .punct { color: var(--accent); }

h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 2em 0 .5em;
}
h2 em { font-style: italic; font-weight: 800; }

h3 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  margin: 1.6em 0 .4em;
  letter-spacing: -0.008em;
}
h3 em { font-style: italic; font-weight: 800; }

.lede {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 28px;
}

p { font-size: 18px; line-height: 1.65; max-width: 64ch; margin: 0 0 1em; color: var(--ink-soft); }
p em { font-style: italic; }
p strong { font-weight: 600; color: var(--ink); }

ul, ol { padding-left: 22px; max-width: 64ch; }
li { font-size: 18px; line-height: 1.55; margin-bottom: 8px; color: var(--ink-soft); }

/* ==================================================================
   LAYOUT — sezioni
   ================================================================== */
.section {
  padding: var(--pad-y) var(--gutter);
}
.section--alt {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink .display { color: var(--paper); }
.section--ink p, .section--ink li { color: rgba(243,239,230,.82); }
.section--ink .eyebrow { color: rgba(243,239,230,.6); }

.container {
  max-width: var(--content);
  margin: 0 auto;
}
.container--wide {
  max-width: var(--wide);
  margin: 0 auto;
}

/* ==================================================================
   BOTTONI
   ================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--accent { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.btn--accent:hover { background: transparent; color: var(--accent); }
.btn .arrow { font-family: var(--serif); font-size: 16px; line-height: 0; }

/* ==================================================================
   CTA «Contatti lo studio.» — invariabile (master § 1.2)
   ================================================================== */
.cta-standard {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}
.cta-standard::after { content: "→"; color: var(--accent); }
.cta-standard:hover { color: var(--accent); }

/* ==================================================================
   CARD SERVIZI
   ================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 24px 0 32px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 26px 24px;
  display: flex; flex-direction: column;
}
.card--alt { background: var(--paper-2); }
.card .num {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.card h3 {
  font-size: 22px;
  margin: 0 0 10px;
}
.card p {
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 18px;
  color: var(--ink-soft);
  flex: 1;
}
.card .cta-standard { margin-top: auto; align-self: flex-start; }

/* ==================================================================
   SPOKE — d/s ~ marchio composito (master § 8.1)
   ================================================================== */
.spoke-mark {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--typewriter);
  font-style: normal;
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 14px;
}
.spoke-mark .ds {
  letter-spacing: -0.02em;
}
.spoke-mark .ds .slash { color: var(--accent); }
.spoke-mark .tilde {
  color: var(--ink-mute);
  font-size: 0.8em;
}
.spoke-mark .nome {
  color: var(--accent);
}

.spoke-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 28px;
}

/* ==================================================================
   ARTICOLO — single
   ================================================================== */
.art {
  padding: var(--pad-y) var(--gutter);
}
.art-hero { max-width: var(--content); margin: 0 auto; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.art-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 24px 0 32px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
  max-width: var(--content);
  margin-left: auto; margin-right: auto;
}
.art-meta strong {
  display: block; color: var(--ink); font-weight: 500;
  margin-top: 4px; letter-spacing: .1em;
}
.art-content {
  max-width: var(--content);
  margin: 32px auto 0;
}
.art-content > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-style: italic; font-weight: 800;
  font-size: 4.2em; line-height: .85;
  float: left; margin: 4px 12px 0 0;
  color: var(--accent);
}
.art-content h2 {
  font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  margin-top: 1.8em;
}
.art-content h2::before {
  content:""; display: block;
  width: 32px; height: 1px; background: var(--accent);
  margin-bottom: 16px;
}
.art-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.art-content hr {
  border: 0; height: 1px; background: var(--rule);
  margin: 2.5em 0;
  position: relative;
}
.art-content hr::after {
  content: "§"; display: block;
  position: absolute; left: 50%; top: -10px;
  transform: translateX(-50%);
  background: var(--paper);
  width: 30px; text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}

/* Firma di commiato articolo — § 4.3 specifica v2 */
.ds-mark {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--typewriter);
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
}
.ds-mark .saluti { color: var(--accent); }

/* ==================================================================
   BLOG INDEX — tabella articoli
   ================================================================== */
.pub-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 0;
  font-family: var(--serif);
  font-size: 16px;
}
.pub-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 14px 12px;
  font-weight: 600;
}
.pub-table tbody td {
  border-bottom: 1px solid var(--rule);
  padding: 18px 12px;
  vertical-align: top;
  color: var(--ink-soft);
}
.pub-table tbody tr:hover { background: var(--paper-2); }
.pub-table .num { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .15em; }
.pub-table .titolo { font-weight: 600; color: var(--ink); font-size: 17px; }
.pub-table .titolo em { font-style: italic; }
.pub-table a { text-decoration: none; color: inherit; display: block; }
.pub-table a:hover .titolo { color: var(--accent); }
.pub-table .materia {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}

.filter-row {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.filter-row a {
  color: var(--ink-soft); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.filter-row a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.filter-row a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ==================================================================
   FOOTER / Colophon — 
3 colonne
   ================================================================== */
.colophon {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 64px var(--gutter) 40px;
}
.colophon__grid {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.colophon h4 {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
  font-weight: 600;
}
.colophon p, .colophon a, .colophon li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.colophon a { text-decoration: none; border-bottom: 1px solid transparent; }
.colophon a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin-bottom: 6px; }
.colophon__sign {
  max-width: var(--wide);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}
.colophon__sign .te {
  font-family: var(--typewriter); font-style: normal; color: var(--ink);
}
.colophon__sign .te-accent {
  font-family: var(--typewriter); font-style: normal; color: var(--accent);
}
.colophon__sign .meta {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 760px) {
  .colophon__grid { grid-template-columns: 1fr; gap: 32px; }
  .art-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================================
   MEGAMENU — pannello Servizi
   ================================================================== */
.megamenu {
  display: none;
  position: absolute; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 48px var(--gutter);
  z-index: 99;
}
.megamenu.is-open { display: block; }
.megamenu__grid {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.megamenu h4 {
  font-family: var(--typewriter);
  font-style: normal;
  font-size: 18px;
  margin: 0 0 16px;
  color: var(--ink);
}
.megamenu h4 .slash { color: var(--accent); }
 .megamenu h4 .tilde { color: var(--ink-mute); margin: 0 8px; }
.megamenu ul { list-style: none; padding: 0; margin: 0; }
.megamenu li { margin: 0; border-top: 1px solid var(--rule); }
.megamenu li:last-child { border-bottom: 1px solid var(--rule); }
.megamenu a {
  display: block;
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s;
}
.megamenu a:hover { color: var(--accent); }

/* ==================================================================
   ANTEPRIMA — banner di consegna
   ================================================================== */
.preview-banner {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
}
.preview-banner a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }



/* ==================================================================
   INTEGRAZIONI v1 — patterns nuovi
   ================================================================== */

/* Articolo single — layout 3 colonne (aside · content · aside) */
.art-body {
  align-items: flex-start;
  gap: clamp(20px, 3vw, 48px) !important;
}
.art-aside-col { position: sticky; top: 100px; }

.art-aside {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.art-aside .aside-label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px; font-weight: 600;
}
.art-aside .aside-meta {
  display: grid; grid-template-columns: 1fr; gap: 6px 0; margin: 0;
}
.art-aside .aside-meta dt {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
}
.art-aside .aside-meta dd {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.art-aside--right .aside-block { margin-bottom: 28px; }
.art-aside--right .aside-quote {
  margin: 0; padding: 0 0 0 14px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.5;
}
.art-aside--right .aside-refs {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--serif); font-size: 13px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
.art-aside--right .aside-refs li { margin-bottom: 8px; padding-left: 14px; border-left: 1px solid var(--rule); }

@media (max-width: 1100px) {
  .art-body { display: block !important; }
  .art-aside-col { position: static; margin-bottom: 24px; }
  .art-aside { border-top: 1px solid var(--rule); padding-top: 12px; }
}

/* Pattern: materie — wp:columns nativo (className="materie-list")
   WP gestisce il layout flex delle colonne; qui solo gap e stile visivo. */
 .materie-list.wp-block-columns { gap: 24px; }
.materie-list .materia {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 26px 24px;
}
.materie-list .materia__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px; line-height: 1.4;
  margin: 8px 0 14px;
  color: var(--ink-soft);
}
/* Stacking a 900px — WP default è 600px, ma con 3 colonne di testo legale
   è preferibile impilare prima. !important necessario: WP scrive flex-basis
   inline sull'elemento (specificità 1,0,0), solo !important lo batte. */
@media (max-width: 900px) {
  .materie-list.wp-block-columns { flex-direction: column; }
  .materie-list.wp-block-columns > .wp-block-column { flex-basis: 100% !important; width: 100%; }
}

/* Pattern: lettera-manifesto (drop cap) */
.lettera__dropcap::first-letter {
  font-family: var(--serif);
  font-style: italic; font-weight: 800;
  font-size: 4.2em; line-height: .85;
  float: left; margin: 4px 12px 0 0;
  color: var(--accent);
}
.lettera__aside .marginalia {
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-mute);
  margin: 0;
}

/* Pattern: principi (5 principi pagina L'Avvocato) */
.principi-list {
  list-style: none; padding: 0; margin: 24px 0 0;
  counter-reset: principio;
}
.principi-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.principi-list li:last-child { border-bottom: 1px solid var(--rule); }
.principi-list .principio-num {
  font-family: var(--mono);
  font-size: 14px; letter-spacing: .15em;
  color: var(--accent);
  font-weight: 600;
  text-align: right;
  padding-top: 4px;
}
.principi-list h3 { margin: 0 0 8px; font-size: 22px; }
.principi-list p { max-width: 60ch; margin: 0; color: var(--ink-soft); }
@media (max-width: 600px) {
  .principi-list li { grid-template-columns: 1fr; gap: 8px; }
  .principi-list .principio-num { text-align: left; }
}

/* Pattern: registro (griglia 3×2) */
.registro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.registro-cell {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 24px 22px;
}
.registro-cell .registro-num {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.registro-cell h3 { margin: 0 0 8px; font-size: 20px; }
.registro-cell p { margin: 0; font-size: 15px; }
@media (max-width: 900px) {
  .registro-grid { grid-template-columns: 1fr; }
}

/* Pattern: ct-info (recapiti) */
.ct-info-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 16px;
}
.ct-info-mark {
  font-family: var(--typewriter);
  font-style: normal;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}
.ct-info-mark .slash-accent { color: var(--accent); }
.ct-info-dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px 24px;
  margin: 0;
  font-size: 16px;
}
.ct-info-dl dt {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  align-self: baseline;
}
.ct-info-dl dd { margin: 0; }
.ct-info-note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-mute); font-style: italic; }
@media (max-width: 760px) {
  .ct-info-block { grid-template-columns: 1fr; }
}

/* Pattern: orari (tabella) */
.orari-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 16px; }
.orari-table th, .orari-table td { padding: 12px 0; border-top: 1px solid var(--rule); text-align: left; }
.orari-table th {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.orari-table td { text-align: right; }
.orari-table tr:last-child td, .orari-table tr:last-child th { border-bottom: 1px solid var(--rule); }
.orari-table .muted { color: var(--ink-mute); }
.orari-note { margin-top: 14px; font-size: 14px; color: var(--ink-mute); font-style: italic; }

/* Pattern: articoli-grid (cards CPT pubblicazione) */
.articoli__grid {
  margin-top: 24px;
}
.articoli__grid .wp-block-post-template { gap: 32px !important; }
.articolo-card {
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 18px 0 0;
}
.articolo-card__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin: 8px 0 12px;
}
.articolo-card__title a { color: var(--ink); text-decoration: none; }
.articolo-card__title a:hover { color: var(--accent); }
.articolo-card__materia, .articolo-card__date {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* Pattern: articoli-tabella (lista riga per riga) */
.pub-table-wrap { margin-top: 24px; border-top: 2px solid var(--ink); }
.pub-table-row {
  align-items: center !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--rule);
}
.pub-table-row:hover { background: var(--paper-2); }
.pub-table-num {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .15em;
  color: var(--accent);
  width: 70px;
  flex: 0 0 70px;
  margin: 0 !important;
}
.pub-table-title {
  flex: 1 1 auto;
  margin: 0 !important;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}
.pub-table-title a { color: var(--ink); text-decoration: none; }
.pub-table-title a:hover { color: var(--accent); }
.pub-table-materia, .pub-table-date {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
  width: 160px;
  flex: 0 0 160px;
  margin: 0 !important;
}

/* ----------------------------------------------------------------
 * Typescale fine-tuning — aside sinistro (indice) e marginalia rif.
 * ---------------------------------------------------------------- */
.ds-art-aside--left li,
.ds-art-aside--left a    { font-size: 13px; }
.ds-marginalia-testo.ds-marginalia-rif {
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* ==================================================================
   SINGLE PUBBLICAZIONE — template DB v2  (classi ds-*)
   Struttura: ds-single-article
               > [ds-eyebrow · h1 · ds-lede · ds-article-meta]
               > ds-art-wrapper > ds-art-grid
                   [ds-art-aside--left | ds-art-content | ds-art-aside--right]
   ================================================================== */

/* Contenitore articolo (sostituisce .art + .site-main) */
.ds-single-article { padding: var(--pad-y) var(--gutter); }

/* ── Titolo H1 articolo ──────────────────────────────────────────
   Tetto ridotto 15-lug-2026: stesso problema dell'h2 -- la colonna e' a
   larghezza fissa (max ~680px) oltre i 1080px di viewport, ma il 4vw della
   regola generica h1,.heading continuava a crescere col viewport intero,
   toccando il tetto (48px) dentro una colonna che non si allargava piu' ->
   titoli con parole non lunghissime andavano comunque a capo su 3 righe.
   Verificato in browser (senza pubblicare) su piu' valori: 38-44px danno
   tutti un wrap pulito a 2 righe per "La convocazione dell'assemblea,
   spiegata bene"; scelto 40px come tetto. */
.ds-single-article h1 {
  font-size: clamp(32px, 3.2vw, 40px);
}

/* ── Eyebrow ──────────────────────────────────────────────────── */
.ds-eyebrow {
  display: flex; width: 100%; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
.ds-eyebrow::before {
  content: ""; display: inline-block;
  width: 32px; height: 1px; background: var(--accent);
}

/* ── Lede / abstract ──────────────────────────────────────────── */
.ds-lede {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* ── Barra meta ───────────────────────────────────────────────── */
/* (display:flex + justify-content:center gestiti da WP block attrs)
   Rifinitura 18-lug-2026: la riga di condivisione (.ds-share-row) e' stata
   integrata dentro lo stesso blocco della griglia meta, come riga aggiuntiva
   sotto AUTORE/MATERIA/ULT.AGG/LETTURA, chiusa da un'unica riga di apertura
   e una di chiusura (.ds-meta-block) invece di due bordi separati (uno per
   la griglia, poi la riga social "fluttuante" senza cornice sotto). */
.ds-meta-block {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 24px 0 32px;
}
.ds-article-meta {
  gap: 24px 32px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}
.ds-meta-block .ds-share-row { margin-top: 14px; }
.ds-meta-item { gap: 4px; text-align: center; }
.ds-meta-label {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0;
}
.ds-meta-value {
  color: var(--ink); font-weight: 500;
  letter-spacing: .08em;
}

/* Riassunto (lede) sotto il titolo — solo se post_excerpt scritto a mano,
   vedi funzioni.php (binding ds/riassunto + hide-when-empty). */
.ds-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

/* Icone social compatte, in alto, subito sotto la griglia meta — duplicano
   in scala ridotta quelle di fondo (ds-share-native in fondo articolo). */
.ds-share-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.ds-share-top-label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}
.ds-share-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
}
/* .ds-share-native.wp-block-social-links (regola condivisa con le icone di
   fondo articolo, § CONDIVIDI SOCIAL) ha margin-top:18px con specificita'
   0,2,0 - piu' alta di .ds-share-top da solo (0,1,0) - e vinceva sempre,
   spingendo le icone in basso rispetto al testo affiancato. Override scoped
   qui, specifico solo a questa istanza in alto. */
.ds-share-row .wp-block-social-links.ds-share-top { margin-top: 0 !important; }
.ds-share-top .wp-social-link { width: 32px; height: 32px; }
.ds-share-top .wp-social-link svg { width: 15px; height: 15px; }
.ds-share-top .ds-share-letter { font-size: 13px; }

/* Data "Ult. Agg." (wp:post-date core, senza classe ds-meta-value): uno stile
   globale WP (:where(.wp-block-post-date), preset "small"=14px) sovrascriveva
   silenziosamente l'11px ereditato da .ds-article-meta. Fix diretto (agg. 15-lug-2026),
   poi portato a 13px + formato senza puntini ("15 VII 2026") per rileggibilita (agg. 15-lug-2026 bis). */
.ds-article-meta .wp-block-post-date__modified-date { font-size: 13px; }
/* Lettura (wp:post-time-to-read, senza classe ds-meta-value): stesso trattamento,
   portato da 11px (ereditato) a 13px esplicito per coerenza con la data (agg. 15-lug-2026 bis). */
.ds-article-meta .wp-block-post-time-to-read { font-size: 13px; }

/* ── Wrapper + griglia 3 colonne ──────────────────────────────── */
.ds-art-wrapper { margin-top: 40px; }
.ds-art-grid {
  align-items: flex-start !important;
  gap: clamp(20px, 3vw, 48px) !important;
}
.ds-art-aside {
  position: sticky; top: 100px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.ds-aside-label {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px; font-weight: 600;
}

/* ── Contenuto principale ─────────────────────────────────────── */
.ds-art-content h2 {
  font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  margin-top: 1.8em;
}
.ds-art-content h2::before {
  content: ""; display: block;
  width: 32px; height: 1px; background: var(--accent);
  margin-bottom: 16px;
}
.ds-art-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent);
  font-style: italic; font-size: 20px;
  line-height: 1.4; color: var(--ink-soft);
}
.ds-art-content hr {
  border: 0; height: 1px; background: var(--rule);
  margin: 2.5em 0; position: relative;
}
.ds-art-content hr::after {
  content: "\00A7"; display: block;
  position: absolute; left: 50%; top: -10px;
  transform: translateX(-50%);
  background: var(--paper);
  width: 30px; text-align: center;
  font-family: var(--serif); font-style: italic;
  color: var(--accent);
}

/* ── Marginalia (aside destro) ────────────────────────────────── */
.ds-marginalia-block { margin-bottom: 24px; }
.ds-marginalia-testo {
  margin: 0;
  font-family: var(--serif);
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: 0; text-transform: none;
}
.ds-commiato {
  font-family: var(--typewriter);
  font-size: 12px; color: var(--ink-mute);
  letter-spacing: .05em;
  margin-top: 8px;
}

/* ── Signoff "distintisaluti" ─────────────────────────────────── */
.ds-signoff {
  margin-top: 48px;
  font-family: var(--typewriter);
  font-size: 14px; color: var(--ink-mute);
  letter-spacing: .04em;
}
.ds-signoff em { font-style: italic; color: var(--accent); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ds-art-grid  { display: block !important; }
  .ds-art-aside {
    position: static; margin-bottom: 24px;
    border-top: 1px solid var(--rule); padding-top: 12px;
  }
}
@media (max-width: 760px) {
  .ds-article-meta { gap: 16px 20px; }
}


/* ARCHIVIO PUBBLICAZIONI — tipografia desktop + grid fix */
body.post-type-archive-pubblicazione .wp-block-post-title { font-size: 20px !important; line-height: 1.25; }
body.post-type-archive-pubblicazione .wp-block-post-excerpt__excerpt { font-size: 15px !important; }
.ds-pub-num           { font-size: 15px !important; grid-column: 1; }
.ds-pub-col-title     { grid-column: 2; }
.ds-pub-materia       { grid-column: 3; }
.ds-pub-date          { grid-column: 4; }
/* Eyebrow taccuino — override WP has-small-font-size */
.post-type-archive-pubblicazione .ds-eyebrow { font-size: 13px !important; }

/* ==================================================================
   ARCHIVIO PUBBLICAZIONI — responsive mobile
   Carica dopo global-styles-inline-css (indice link [21] > style [16])
   → sovrascrive i breakpoint 680px definiti nel Global Styles.

   Struttura DOM effettiva di ogni riga:
     .ds-pub-row
       p.ds-pub-num              ("003")
       div.ds-pub-col-title
         h3.ds-pub-title > a
         div.ds-pub-excerpt > p  ← nascosto su mobile
       div.ds-pub-meta.ds-pub-date > time ← nascosto su mobile
   ================================================================== */
@media (max-width: 680px) {

  /* Intestazione colonne: nascosta su mobile */
  .ds-pub-thead { display: none; }

  /* Riga: griglia 2 colonne compatta */
  .ds-pub-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    gap: 0 10px;
    padding: 14px 0;
  }

  /* Numero progressivo: colonna sinistra, allineato all'inizio */
  .ds-pub-num {
    grid-column: 1;
    grid-row: 1;
    font-size: 10px;
    letter-spacing: .1em;
    align-self: start;
    padding-top: 3px;
  }

  /* Titolo + excerpt: colonna destra */
  .ds-pub-col-title {
    grid-column: 2;
    grid-row: 1;
  }

  /* Titolo: dimensione leggibile su schermo piccolo */
  .ds-pub-title {
    font-size: 15px !important;
    line-height: 1.3;
  }

  /* Excerpt: nascosto (troppo testo in lista compatta su mobile) */
  .ds-pub-excerpt { display: none; }

  /* Data: nascosta */
  .ds-pub-meta,
  .ds-pub-date { display: none; }

  /* Filter row materie: compatta, wrapping naturale */
  .ds-filter-row {
    gap: 8px 14px;
    padding: 10px 0;
    font-size: 10px;
  }
}

/* === FIX 2025-07 — ds-art-wrapper: allineamento gutter con hero === */
.ds-art-wrapper {
  padding-inline: var(--gutter);
  padding-bottom: var(--pad-y);
}


/* ================================================================
   FIX LAYOUT 3COL v3 — spec articolo-riferimento.html (2026-07)
   ================================================================ */

/* Wrapper: il grid gestisce centering/max-width; solo bottom padding */
.ds-art-wrapper { padding-inline: 0 !important; padding-bottom: var(--pad-y); }
.ds-art-wrapper:has(+ .ds-author-wrap) { padding-bottom: 24px !important; }

/* Grid 3 colonne — CSS Grid, sovrascrive flexbox WP is-layout-flex */
.ds-art-grid,
.ds-art-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 680px) 170px !important;
  gap: clamp(28px, 4vw, 64px) !important;
  max-width: 1180px !important;
  margin: 28px auto 0 !important;
  padding: 0 24px !important;
  justify-content: center;
  align-items: start;
  flex-wrap: unset;
}
/* Override flex-basis sui wp:column children */
.ds-art-grid > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}
/* Sticky aside: top 96px (spec) */
.ds-art-aside { top: 96px; }


/* Breakpoint corretto: 1080px — colonna unica, ordine spec */
@media (max-width: 1080px) {
  .ds-art-grid,
  .ds-art-grid.wp-block-columns {
    grid-template-columns: minmax(0, 720px) !important;
    justify-content: center;
    padding: 0 24px !important;
  }
  .ds-art-aside {
    position: static !important;
    border-top: 1px solid var(--rule);
    padding-top: 16px;
    margin-bottom: 0;
  }
  .ds-art-aside--left  { order: 3; display: block !important; }
  .ds-art-aside--right { order: 2; }
  .ds-art-content      { order: 1; }
}

/* ================================================================
   v4 — petrolio accent + hero/meta/content layout (2026-07)
   ================================================================ */

/* Variabili: petrolio #00736F + bollo rosso #B42E16 */
:root {
  --accent:       #00736F;
  --accent-hover: #B42E16;
}
a:hover { color: var(--accent-hover); }
.ds-toc-nav ol { list-style: none; padding-left: 0; margin: 0; }
.ds-toc-nav li {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.ds-toc-nav li:last-child { border-bottom: none; }
.ds-toc-nav a {
  display: block;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-soft); text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
  border-left: 2px solid transparent;
  padding-left: 10px; margin-left: -10px;
  transition: color .15s ease, border-color .15s ease;
}
.ds-toc-nav a:hover { color: var(--accent-hover); }
.ds-toc-nav a.is-active { color: var(--accent); border-left-color: var(--accent); }

/* Hero: title/lede allineati alla colonna contenuto del grid */
.ds-single-article.wp-block-group {
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: var(--pad-y) 24px 0 !important;
  display: grid !important;
  grid-template-columns: 170px minmax(0, 680px) 200px !important;
  gap: 0 clamp(28px, 4vw, 64px) !important;
  justify-content: center;
}
.ds-single-article.wp-block-group > * {
  grid-column: 2;
  max-width: none !important;
  width: 100% !important;
}
@media (max-width: 1080px) {
  .ds-single-article.wp-block-group {
    grid-template-columns: minmax(0, 720px) !important;
    padding: clamp(32px, 5vw, 64px) 24px 0 !important;
    justify-content: center;
  }
  .ds-single-article.wp-block-group > * { grid-column: 1; }
}

/* Meta bar: griglia 4 colonne, distribuzione uniforme */
.ds-article-meta.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 8px !important;
  align-items: start !important;
}
.ds-meta-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 4px;
}
.ds-meta-item:not(:has(> .ds-meta-value, > [class*="wp-block-post"])) .ds-meta-label::after {
  content: "—";
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--ink-mute);
  margin-top: 2px;
}
@media (max-width: 680px) {
  .ds-article-meta.wp-block-group {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 12px !important;
  }
}

/* Colonna contenuto: left alignment, no justify, no hyphens */
.ds-art-content,
.ds-art-content p,
.ds-art-content li,
.ds-art-content blockquote {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Leggi anche — link nell'aside */
.ds-leggi-anche-link {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: none;
  margin-top: 4px;
}
.ds-leggi-anche-link:hover { color: var(--accent-hover); }

/* Fase 1 -- riequilibrio colonne laterali (indice piu largo di marginalia),
   leggibilita corpo testo, riallineamento al blocco hero. Sincronizzato dal
   DB CSS il 2026-07-14. */
@media (min-width: 1081px) {
.ds-art-content{
  margin-left: -30px !important;
  width: calc(100% + 30px) !important;
}
}
.ds-art-content p,
.ds-art-content li{
  font-size: 20px !important;
  line-height: 1.65 !important;
}


/* ================================================================
   Fase 4 — Scheda autore in coda all'articolo (single-pubblicazione)
   Fedele al modello articolo-lungo-riferimento.html: card a piena
   estensione (1180px, come .art-grid), monogramma pieno.
   ================================================================ */
.ds-author-wrap.wp-block-group{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 16px 24px 0 !important;
}
.ds-author-wrap.wp-block-group > .ds-author-card{
  max-width: 664px !important;
  width: 100% !important;
}
.ds-author-wrap.wp-block-group > .contatta{
  max-width: none !important;
  width: 100% !important;
}
.ds-author-wrap.wp-block-group > .ds-signoff{
  max-width: 664px !important;
}
.ds-signoff p{
  font-size: 26px;
}

/* Citazione CTA nel corpo articolo (blockquote.is-style-evidenza.ds-cta-quote):
   la riga finale "Per una consulenza su misura — Contatti lo studio" deve
   risaltare di piu della citazione giurisprudenziale standard (regola
   generica in functions.php, invariata). */
.wp-block-quote.is-style-evidenza.ds-cta-quote cite{
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}
.ds-author-card{
  display:flex;
  align-items:flex-start;
  gap:22px;
  border-top:1px solid var(--rule);
  padding-top:26px;
}
.ds-author-monogram{
  flex:0 0 auto;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);
  border:none;
  font-family:var(--typewriter);
  font-style:normal;
  font-size:24px;
  line-height:1;
  color:var(--paper);
  margin:0;
}
.ds-author-monogram .slash{ color:var(--accent); }
.ds-author-info{ flex:1 1 auto; min-width:0; }
.ds-author-name{
  font-family:var(--serif);
  font-weight:800;
  font-size:18.4px;
  margin:0 0 4px;
  color:var(--ink);
}
.ds-author-role{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:6px 0 10px;
}
.ds-author-bio{
  font-family:var(--serif);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
  max-width:640px;
}
@media (max-width:600px){
  .ds-author-card{ gap:16px; }
  .ds-author-monogram{ width:48px;height:48px;font-size:19px; }
}

.ds-author-cta{
  margin:14px 0 0;
}


/* ================================================================
   CTA — colonna laterale destra (dopo Leggi anche) e scheda autore
   Sfondo variabile (JS, vedi footer ds-vivacita), testo sempre ink.
   ================================================================ */
.ds-cta-aside{
  background: var(--paper-2);
  padding: 18px 16px;
  margin-top: 24px;
}
.ds-cta-aside-text{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 10px;
}
.ds-cta-aside-link{ margin: 0; }
.ds-cta-aside-link a.cta-standard,
.ds-author-cta a.cta-standard{
  border-bottom: none;
  padding-bottom: 0;
}


/* ================================================================
   TOC responsive — scroll-spy desktop + barra a tendina mobile
   Elenco: blocco nativo Sommario (.ds-toc-nav). Evidenziazione e
   barra mobile: script ds-toc nel footer. Vedi prompt-toc.md.
   ================================================================ */
html{ scroll-behavior: smooth; }
.ds-art-content h2{ scroll-margin-top: 120px; }

/* Barra mobile — nascosta su desktop, creata via JS solo se ci sono sezioni */
.ds-toc-mobile{
  display: none;
}
@media (max-width: 1080px){
  .ds-toc-mobile{
    display: block;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
  }
}
.ds-toc-mobile-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
}
.ds-toc-mobile-current{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-toc-mobile-chevron{
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--accent);
  transition: transform .2s ease;
}
.ds-toc-mobile.is-open .ds-toc-mobile-chevron{
  transform: rotate(180deg);
}
.ds-toc-mobile-panel{
  padding: 4px 20px 20px;
  border-top: 1px solid var(--rule);
}
.ds-toc-mobile-label{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 14px 0 10px;
}
.ds-toc-mobile-list ol{
  list-style: none;
  padding: 0;
  margin: 0;
}
.ds-toc-mobile-list li{
  border-top: 1px solid var(--rule);
}
.ds-toc-mobile-list a{
  display: block;
  padding: 12px 0;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
.ds-toc-mobile-list a.is-active{
  color: var(--accent);
  font-weight: 600;
}