/* ═══════════════════════════════════════════════════════════════
   TOKENS — da regole_colore.md · regole_tipografia.md · regole_layout.md
═══════════════════════════════════════════════════════════════ */

:root {
  /* Font */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  /* Scale tipografica — base 16px, ratio 1.333 (quarta perfetta) */
  --text-xs:   0.694rem;  /* 11px  — micro-copy, tag */
  --text-sm:   0.833rem;  /* 13px  — caption, nav */
  --text-base: 1rem;      /* 16px  — corpo testo */
  --text-md:   1.2rem;    /* 19px  — standfirst */
  --text-lg:   1.44rem;   /* 23px  — headline sezione */
  --text-xl:   1.728rem;  /* 28px  — titolo voci con foto */
  --text-2xl:  2.074rem;  /* 33px  — titolo articolo */
  --text-3xl:  2.488rem;  /* 40px  — hero mobile/tablet */
  --text-4xl:  3.583rem;  /* 57px  — hero desktop */
  --text-5xl:  4.300rem;  /* 69px  — hero wide */

  /* Leading */
  --leading-tight:   1.05;
  --leading-heading: 1.1;
  --leading-body:    1.7;

  /* Tracking */
  --tracking-wide:   0.08em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.22em;

  /* Griglia */
  --grid-gutter:  24px;
  --margin-page:  clamp(24px, 5vw, 80px);
  --col-text:     680px;
  --col-wide:     960px;
  --col-full:     1280px;

  /* Spaziatura — multipli di 8px */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  48px;
  --space-5:  80px;
  --space-6:  128px;

  /* Background */
  --color-bg-primary:   #F5F5F3;
  --color-bg-secondary: #EEEEEB;
  --color-bg-inverse:   #111210;
  --color-bg-surface:   #FFFFFF;

  /* Testo */
  --color-text-primary:         #141412;
  --color-text-secondary:       #3D3D3A;
  --color-text-tertiary:        #7A7A76;
  --color-text-disabled:        #B0B0AB;
  --color-text-inverse:         #F0F0EE;
  --color-text-inverse-body:    #CFCFCD;
  --color-text-caption-inverse: #9A9A96;
  --color-text-accent:          #2C4A3E;

  /* Bordi — sempre 0.5px */
  --color-border-primary:   #C8C8C4;
  --color-border-secondary: #DDDDD9;
  --color-border-tertiary:  #E8E8E4;
  --color-border-inverse:   #2A2A28;
  --color-border-accent:    #3A6B57;

  /* Accenti */
  --color-accent-verde-alpi:       #3A6B57;
  --color-accent-verde-alpi-light: #EDF2EF;
  --color-accent-verde-alpi-dark:  #2C4A3E;
  --color-accent-cordovan:         #4A2B2B;

  /* Funzionali */
  --color-focus-ring:   #3A6B57;
  --color-selection-bg: #D6E3DD;
}


/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: var(--leading-heading);
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  color: var(--color-text-primary);
}

h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; }

a {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-border-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
a:hover { color: var(--color-accent-verde-alpi); }

:focus-visible {
  outline: 1px solid var(--color-focus-ring);
  outline-offset: 3px;
}

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-text-primary);
}

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

hr.divider {
  border: none;
  border-top: 0.5px solid var(--color-border-secondary);
}


/* ═══════════════════════════════════════════════════════════════
   CLASSI TIPOGRAFICHE SEMANTICHE
═══════════════════════════════════════════════════════════════ */

.heading-hero {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.heading-article {
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1.08;
}

.heading-article-italic {
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
}

.standfirst {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--color-text-secondary);
  max-width: 58ch;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-tertiary);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 1;
}

.tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
}

a.tag:hover {
  color: var(--color-text-primary);
}

.tag-separator {
  opacity: 0.4;
  color: var(--color-text-secondary);
}

/* Schermi non-Retina: titoli Cormorant a 400 per leggibilità */
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 96dpi) {
  h1, h2, h3,
  .heading-hero,
  .heading-article,
  .heading-article-italic { font-weight: 400; }
}


/* ═══════════════════════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════════════════════ */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin-page);
  background-color: var(--color-bg-primary);
  border-bottom: 0.5px solid var(--color-border-secondary);
  transition: transform 0.25s ease;
}

.top-bar--hidden { transform: translateY(-100%); }

.top-bar__brand {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
}
.top-bar__brand:hover { color: var(--color-text-primary); }

.top-bar__nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.top-bar__nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
}

.top-bar__nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0 0.9em;
}
.top-bar__nav-link:hover { color: var(--color-text-primary); }

.top-bar__nav-sep {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

.top-bar__curatela {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-left: 0.5px solid var(--color-border-secondary);
  margin-left: var(--space-3);
  padding-left: var(--space-3);
}
.top-bar__curatela:hover { color: var(--color-text-accent); }

.top-bar__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 0;
}


/* ═══════════════════════════════════════════════════════════════
   HERO — CONCEPT B (split 50/50)
═══════════════════════════════════════════════════════════════ */

.hero {
  max-width: var(--col-full);
  margin: 0 auto;
  padding: var(--space-5) var(--margin-page) 0;
}

.hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
  align-items: start;
}

.hero__col-testo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--space-3);
}

.hero__numero-rubrica {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: var(--space-3);
}

.hero__numero-rubrica .micro {
  color: var(--color-text-tertiary);
}

.hero__titolo {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.hero__titolo a {
  color: var(--color-text-primary);
  text-decoration: none;
}
.hero__titolo a:hover { color: var(--color-text-accent); }

.hero__standfirst {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--color-text-secondary);
  max-width: 44ch;
  margin-bottom: var(--space-3);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  border-top: 0.5px solid var(--color-border-secondary);
  padding-top: var(--space-2);
}

.hero__meta .micro {
  color: var(--color-text-tertiary);
}

/* Colonna foto */
.hero__figura--4x5 {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
}

.hero__figura--4x5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Didascalia hero */
.hero__didascalia {
  margin-top: var(--space-2);
}

/* Transizione hero → sommario */
.hero__footer {
  max-width: var(--col-full);
  margin: var(--space-4) auto 0;
  padding: 0 var(--margin-page);
}

.hero__index-preview {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-top: var(--space-2);
}

.hero__index-preview .micro {
  color: var(--color-text-tertiary);
}


/* ═══════════════════════════════════════════════════════════════
   SOMMARIO
═══════════════════════════════════════════════════════════════ */

.sommario {
  max-width: var(--col-full);
  margin: 0 auto;
  padding: 0 var(--margin-page);
}

/* Intestazione del sommario ("In questo numero", "Archivio", mese) */
.sommario-header {
  max-width: var(--col-text);
  margin: 0 auto;
  padding-top: var(--space-6);
  padding-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.sommario-header h2 {
  margin-bottom: var(--space-3);
}

/* Link "Archivio" accanto all'intestazione di home */
.sommario-header__archivio,
.archivio-mese__back {
  color: var(--color-text-tertiary);
  text-decoration: none;
  white-space: nowrap;
}
.sommario-header__archivio:hover,
.archivio-mese__back:hover {
  color: var(--color-text-accent);
}

/* Pagina Archivio — intro e voci-mese */
.archivio__intro {
  max-width: var(--col-text);
  margin: 0 auto var(--space-4);
  color: var(--color-text-secondary);
}

/* Voce generica */
.voce {
  max-width: var(--col-text);
  margin: 0 auto;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-top: 0.5px solid var(--color-border-secondary);
}

/* Prima voce — ancora nel respiro della hero */
.sommario .voce:first-child {
  padding-bottom: var(--space-5);
}

/* Seconda voce — compressione progressiva (regole_homelist §3.3) */
.sommario .voce:nth-child(2) {
  padding-bottom: var(--space-4);
}

/* Voci con foto — si allargano fino a col-wide */
.voce--foto-sinistra,
.voce--foto-destra {
  max-width: var(--col-wide);
}

/* Pausa panoramica — col-wide, bordi più marcati */
.voce--panoramica {
  max-width: var(--col-wide);
  border-top: 0.5px solid var(--color-border-primary);
  border-bottom: 0.5px solid var(--color-border-primary);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}


/* ─── Movimento T — Tipografica (3 colonne: 40px · 140px · 1fr) ─── */

.voce__layout {
  display: grid;
  grid-template-columns: 40px 140px 1fr;
  gap: 0 var(--grid-gutter);
  align-items: start;
}

.voce__numero .micro {
  color: var(--color-text-tertiary);
  display: block;
  padding-top: 4px; /* allineamento ottico con la prima riga titolo */
}

.voce__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: 2px;
}

.voce__lettura {
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
}

.voce__contenuto h3 a {
  color: var(--color-text-primary);
  text-decoration: none;
}
.voce__contenuto h3 a:hover { color: var(--color-text-accent); }

.voce__contenuto .standfirst {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.voce__autore {
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
}


/* ─── Movimento FL — Foto Sinistra (55/45) ─── */

.voce__layout-foto-sx {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--grid-gutter);
  align-items: start;
}

.voce__figura--4x5 {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
}

.voce__figura--4x5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.voce__foto-link { display: block; }

.voce__testo-col { padding-top: var(--space-3); }

.voce__meta--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-bottom: var(--space-2);
}

/* Titolo nelle voci con foto — leggermente più piccolo */
.voce__titolo-adattivo {
  font-size: var(--text-xl);
  line-height: 1.1;
}

.voce__titolo-adattivo a {
  color: var(--color-text-primary);
  text-decoration: none;
}
.voce__titolo-adattivo a:hover { color: var(--color-text-accent); }

.voce__standfirst--compresso {
  font-size: var(--text-base);
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
}

.voce__foto-didascalia { margin-top: var(--space-1); }


/* ─── Movimento FD — Foto Destra (40/60) ─── */

.voce__layout-foto-dx {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: var(--grid-gutter);
  align-items: start;
}

.voce__figura--2x3 {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  margin: 0;
}

.voce__figura--2x3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.voce__meta--verticale {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}


/* ─── Movimento P — Pausa Panoramica (3:2) ─── */

.voce__figura--panoramica {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: 0;
}

.voce__figura--panoramica img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.voce__panoramica-caption {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.4em;
}


/* ─── Paginazione ─── */

.sommario__paginazione {
  max-width: var(--col-text);
  margin: 0 auto;
  padding: var(--space-5) 0 var(--space-6);
  border-top: 0.5px solid var(--color-border-secondary);
}

.btn-carica-altri {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-block;
}
.btn-carica-altri:hover { color: var(--color-text-primary); }


/* ═══════════════════════════════════════════════════════════════
   FOOTER — unica sezione dark della pagina
═══════════════════════════════════════════════════════════════ */

.footer {
  background-color: var(--color-bg-inverse);
  padding: var(--space-5) var(--margin-page);
  margin-top: 0;
}

.footer__inner {
  max-width: var(--col-full);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
}

.footer__brand-name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.footer__manifesto {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-text-inverse);
}

.footer__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__nav-list a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-inverse-body);
  text-decoration: none;
}

.footer__nav-list a:hover {
  color: var(--color-text-inverse);
}

/* Seguici — etichetta + icone social monocromatiche */
.footer__social-heading {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-caption-inverse);
  margin-bottom: var(--space-3);
}

.footer__social-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse-body);
  transition: color 0.2s ease;
}

.footer__social-link:hover {
  color: var(--color-text-inverse);
}

.footer__social-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.footer__divider {
  max-width: var(--col-full);
  margin: var(--space-4) auto 0;
  border: none;
  border-top: 0.5px solid var(--color-border-inverse);
}

.footer__bottom {
  max-width: var(--col-full);
  margin: 0 auto;
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copyright,
.footer__legal {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-caption-inverse);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.footer__legal a,
.footer__legal-btn {
  color: var(--color-text-caption-inverse);
  text-decoration: none;
}
.footer__legal a:hover,
.footer__legal-btn:hover { color: var(--color-text-inverse-body); }

.footer__legal-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER — form (sito-wide) + banda invito in homepage
═══════════════════════════════════════════════════════════════ */

.nl-form { width: 100%; }

/* Honeypot: fuori dallo schermo, invisibile e non focalizzabile via tab */
.nl-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nl-form__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 0.5px solid var(--color-border-primary);
  max-width: 480px;
}

.nl-form__label {
  position: absolute;
  left: -9999px;
}

.nl-form__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  padding: var(--space-2) 0;
}
.nl-form__input::placeholder { color: var(--color-text-disabled); }
.nl-form__input:focus { outline: none; }

.nl-form__submit {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-accent);
  background: none;
  border: none;
  padding: 0 0 0 var(--space-2);
  cursor: pointer;
  white-space: nowrap;
}
.nl-form__submit:hover { color: var(--color-accent-verde-alpi); }

.nl-form__consenso {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-tertiary);
  max-width: 56ch;
  margin-top: var(--space-2);
}

/* Banda invito in homepage */
.nl-band {
  background-color: var(--color-accent-verde-alpi-light);
  border-top: 0.5px solid var(--color-border-secondary);
  padding: var(--space-5) var(--margin-page);
}

.nl-band__inner {
  max-width: var(--col-text);
  margin: 0 auto;
}

.nl-band__kicker {
  display: block;
  color: var(--color-text-accent);
  margin-bottom: var(--space-2);
}

.nl-band__titolo { margin-bottom: var(--space-2); }

.nl-band__standfirst { margin-bottom: var(--space-3); }


/* ═══════════════════════════════════════════════════════════════
   COOKIE NOTICE — informativa cookie tecnici (sito-wide)
═══════════════════════════════════════════════════════════════ */

.cookie-notice {
  position: fixed;
  left: var(--margin-page);
  right: var(--margin-page);
  bottom: var(--space-3);
  z-index: 200;
  background-color: var(--color-bg-inverse);
  border: 0.5px solid var(--color-border-inverse);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-notice__inner {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cookie-notice__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-inverse-body);
  max-width: 70ch;
}

.cookie-notice__text a {
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}

.cookie-notice__actions { flex-shrink: 0; }

.cookie-notice__btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: none;
  border: 0.5px solid var(--color-border-inverse);
  padding: 0.7em 1.4em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cookie-notice__btn:hover {
  background-color: var(--color-accent-verde-alpi-dark);
  border-color: var(--color-accent-verde-alpi);
}

@media (max-width: 640px) {
  .cookie-notice__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 640px)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Top bar: mostra toggle, nasconde la lista sezioni */
  .top-bar__toggle { display: block; }

  .top-bar__nav-list {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    background-color: var(--color-bg-primary);
    border-bottom: 0.5px solid var(--color-border-secondary);
    padding: var(--space-3) var(--margin-page);
    z-index: 99;
  }

  .top-bar__nav-list.is-open { display: flex; }

  .top-bar__nav-link { padding: 0; }
  .top-bar__nav-sep { display: none; }
  .top-bar__curatela {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }

  /* Hero: stack verticale — foto prima, testo sotto */
  .hero__layout {
    grid-template-columns: 1fr;
  }

  .hero__col-foto { order: 1; }
  .hero__col-testo { order: 2; padding-top: var(--space-3); }

  .hero__titolo { font-size: var(--text-3xl); }

  /* Sommario: voci con foto → stack verticale */
  .voce__layout-foto-sx,
  .voce__layout-foto-dx {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Su mobile la foto viene sempre prima del testo */
  .voce--foto-destra .voce__testo-col { order: 2; }
  .voce--foto-destra .voce__foto-col  { order: 1; }

  /* Voce tipografica: 2 colonne (numero + contenuto) */
  .voce__layout {
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
  }

  .voce__meta {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4em;
  }

  .voce__contenuto {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: var(--space-2);
  }

  /* Panoramica: 16:9 su mobile */
  .voce__figura--panoramica { aspect-ratio: 16 / 9; }

  /* Footer: stack verticale */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (641px – 1024px)
═══════════════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 1024px) {

  /* Split foto: meno asimmetrico su tablet */
  .voce__layout-foto-sx { grid-template-columns: 50fr 50fr; }
  .voce__layout-foto-dx { grid-template-columns: 45fr 55fr; }

  /* Colonna meta voce tipografica: leggermente più stretta */
  .voce__layout { grid-template-columns: 40px 110px 1fr; }

  /* Hero: split rimane, titolo a --text-4xl (default desktop) — non scende come mobile */
  .hero__titolo { font-size: var(--text-4xl); }

  /* Footer: 2 colonne su tablet */
  .footer__inner { grid-template-columns: 1fr 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Desktop wide (≥ 1280px)
═══════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  .hero__titolo { font-size: var(--text-5xl); }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINE DI ERRORE (400 / 403 / 404 / 500)
═══════════════════════════════════════════════════════════════ */

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 4rem 1.5rem;
  text-align: center;
}

.error-page__inner {
  max-width: 560px;
}

.error-page__code {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(6rem, 16vw, 10rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-border-strong);
  margin-bottom: 0.25rem;
}

.error-page__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 300;
  margin: 0.5rem 0 1.5rem;
}

.error-page__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin-bottom: 2.5rem;
}

.error-page__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-page__btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.75rem;
  border: 1px solid currentColor;
  color: inherit;
  transition: background 0.2s, color 0.2s;
}

.error-page__btn--primary {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

.error-page__btn--primary:hover {
  background: transparent;
  color: var(--color-text);
}

.error-page__btn:not(.error-page__btn--primary):hover {
  background: var(--color-text);
  color: var(--color-surface);
}