/* ==========================================================================
   Riviste PressLex — design system
   Sandbox grafica, passo 1. Nessuna dipendenza esterna oltre ai font.
   ========================================================================== */

/* --------------------------------------------------------------- token -- */
:root {
  /* Tipografia ---------------------------------------------------------- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --t-2xl: clamp(1.8rem, 1.35rem + 1.7vw, 2.6rem);
  --t-3xl: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);

  /* Colori -------------------------------------------------------------- */
  /* Tutti i grigi di testo superano 4,5:1 sul fondo piu' chiaro del sito
     (verificato da strumenti/verifica-contrasti.py). */
  --ink: #17181c;
  --ink-2: #3d4149;
  --ink-3: #5d636c;
  --ink-4: #6a7079;
  --rule: #e4dfd7;
  --rule-2: #cfc7ba;
  --bordo-campo: #8a857b;
  --paper: #fbf9f6;
  --surface: #ffffff;
  --footer-tenue: #8f8a81;

  /* Accento di testata: sovrascritto da ogni rivista --------------------- */
  --accent: #b0501f;
  --accent-ink: #7a3413;
  --accent-wash: #f7ede5;

  /* Misure -------------------------------------------------------------- */
  --wrap: 1240px;
  --wrap-text: 720px;
  --gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  --gap-sm: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);

  --radius: 2px;
  --radius-lg: 4px;

  --shadow-1: 0 1px 2px rgba(20, 18, 14, 0.04), 0 10px 26px -14px rgba(20, 18, 14, 0.2);
  --shadow-2: 0 2px 6px rgba(20, 18, 14, 0.06), 0 22px 50px -20px rgba(20, 18, 14, 0.3);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

::selection {
  background: var(--accent);
  color: #fff;
}

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

/* --------------------------------------------------------------- layout -- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap-text {
  width: min(100% - 2.5rem, var(--wrap-text));
  margin-inline: auto;
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------- topbar -- */
.topbar {
  background: var(--ink);
  color: #e9e6e1;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.45rem 0;
}

.topbar__issn {
  color: #a9a49c;
  font-variant-numeric: tabular-nums;
}

.topbar__dir {
  color: #cfcac2;
}

.topbar a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.topbar a:hover {
  border-bottom-color: #fff;
}

/* -------------------------------------------------------------- masthead -- */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.9rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand__mark {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.brand__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: var(--t-sm);
  font-weight: 500;
}

.nav a {
  color: var(--ink-2);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

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

.nav__cta {
  background: var(--ink);
  color: #fff !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius);
  border-bottom: 0 !important;
  transition: background 0.18s var(--ease);
}

.nav__cta:hover {
  background: var(--accent);
}

/* ------------------------------------------------------------ news band -- */
.newsband {
  background: var(--ink);
  color: #f2efea;
  position: relative;
  overflow: hidden;
}

.newsband::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 45%;
  height: 100%;
  background: radial-gradient(120% 100% at 100% 0%, rgba(176, 80, 31, 0.28), transparent 62%);
  pointer-events: none;
}

.newsband__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  align-items: stretch;
  min-height: 340px;
}

.newsband__media {
  position: relative;
  overflow: hidden;
  background: #23252b;
}

.newsband__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}

.newsband__body {
  padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.25rem, 1rem + 2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

.newsband__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b9b3aa;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius);
}

.newsband__title {
  font-size: var(--t-xl);
  color: #fff;
}

.newsband__comment {
  color: #cec9c1;
  font-size: var(--t-base);
  max-width: 46ch;
}

.newsband__comment strong {
  color: #fff;
  font-weight: 600;
}

/* Riferimento dell'atto: "DECRETO-LEGGE 26 giugno 2026, n. 107". */
.newsband__riferimento {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
}

/* Quando il commento editoriale non c'e' ancora, la fascia lo dice invece di
   inventarlo. Il corsivo lo distingue da un commento vero. */
.newsband__comment--attesa {
  font-style: italic;
  color: #b9b3aa;
}

.newsband__gazzetta {
  font-size: var(--t-xs);
  color: #b9b3aa;
}

.newsband__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-size: var(--t-sm);
  margin-top: 0.35rem;
}

.newsband__link {
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 1px;
}

.newsband__link:hover {
  border-bottom-color: #fff;
}

.newsband__note {
  color: #9c968d;
  font-size: var(--t-xs);
}

/* ---------------------------------------------------------------- tools -- */
.toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.75rem 0;
}

.search {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
}

.search input {
  flex: 1 1 auto;
  /* Senza questo, in flex l'input non scende sotto la sua larghezza minima
     intrinseca e a 320 px fa straripare la pagina (WCAG 1.4.10). */
  min-width: 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--bordo-campo);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 0.6rem 0.9rem;
}

.search input::placeholder {
  color: var(--ink-4);
}

.search input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

.search button {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: background 0.18s var(--ease);
}

.search button:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.toolbar__quick {
  display: flex;
  gap: 1rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
  white-space: nowrap;
}

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

/* ------------------------------------------------------------- sections -- */
.section {
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) 0 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding-bottom: 0.75rem;
  margin-bottom: var(--gap);
  border-bottom: 2px solid var(--ink);
}

.section__head h2 {
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
}

.section__head a {
  font-size: var(--t-sm);
  color: var(--ink-3);
  white-space: nowrap;
}

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

/* --------------------------------------------------------------- layout -- */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
}

/* ---------------------------------------------------------------- cards -- */
.featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--rule-2);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--accent-wash);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.035);
}

.card__body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
}

.card__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.card__title {
  font-size: var(--t-md);
  line-height: 1.22;
}

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

.card__excerpt {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le domande successive della stessa massima: chiaramente subordinate al
   titolo, cosi' non sembrano una seconda massima. */
.card__altre {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

.card__altre-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.3rem;
}

.card__altre ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card__altre li {
  position: relative;
  padding-left: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__altre li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.card__altre-piu {
  color: var(--ink-4);
  font-style: italic;
}

.card__altre-piu::before {
  background: var(--ink-4);
}

.card__foot {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.card__rif {
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.card__author {
  font-weight: 500;
  color: var(--ink-3);
}

/* card grande, in evidenza */
.card--lead .card__media {
  aspect-ratio: 3 / 2;
}

.card--lead .card__title {
  font-size: var(--t-lg);
}

.card--lead .card__excerpt {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

/* variante compatta per gli elenchi */
.card--row {
  flex-direction: row;
  align-items: stretch;
}

.card--row .card__media {
  flex: 0 0 190px;
  aspect-ratio: auto;
  min-height: 130px;
}

.card--row .card__body {
  padding: 0.85rem 1rem;
}

.card--row .card__title {
  font-size: var(--t-base);
}

.card--row .card__excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ----------------------------------------------------------------- chips -- */
.chip {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.chip:hover {
  background: var(--accent);
  color: #fff;
}

.chip--court {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
}

.chip--court:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* -------------------------------------------------------------- sidebar -- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  position: sticky;
  top: 84px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.25rem;
}

.panel__title {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.topiclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.topiclist li + li {
  border-top: 1px solid var(--rule);
}

.topiclist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

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

.topiclist .count {
  font-size: var(--t-xs);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ newsletter -- */
.promo {
  background: linear-gradient(160deg, var(--accent-ink), var(--accent));
  color: #fff;
  border-radius: var(--radius);
  padding: 1.35rem 1.3rem 1.5rem;
}

.promo h3 {
  font-size: var(--t-md);
  color: #fff;
  margin-bottom: 0.4rem;
}

.promo p {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
}

.promo input {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  border: 0;
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
}

.promo button {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-ink);
  background: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  cursor: pointer;
}

.promo button:hover {
  background: #f3ece5;
}

/* --------------------------------------------------------------- article -- */
/* L'immagine sta dietro, il testo sta nel flusso: cosi' l'apertura cresce con
   il titolo invece di tagliarlo (prima un titolo lungo veniva troncato dal
   overflow dell'altezza fissa). */
.article__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  overflow: hidden;
  background: #23252b;
}

.article__hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.article__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 13, 16, 0.86) 0%, rgba(12, 13, 16, 0.42) 45%, rgba(12, 13, 16, 0.12) 100%);
}

.article__hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
}

.article__hero-inner .wrap {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.article__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.article__kicker .chip {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  backdrop-filter: blur(4px);
}

.article__kicker .chip:hover {
  background: var(--accent);
}

.article__title {
  color: #fff;
  font-size: var(--t-2xl);
  max-width: 22ch;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.82);
}

.article__meta .dot::before {
  content: "·";
  margin-right: 1rem;
}

.article__meta .rif {
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
}

.article__body {
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) 0 3rem;
}

.prose {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: #23252b;
}

.prose p {
  margin: 0 0 1.05em;
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.prose h2,
.prose h3 {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin: 2rem 0 1rem;
}

/* Anteprima del corpo: si perde nel nulla subito prima del paywall. */
.prose--faded {
  max-height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
  margin-bottom: 0;
}

/* Tutto il testo dell'articolo giustificato, con sillabazione italiana. */
.prose p,
.prose--premassima p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

/* Etichette di sezione: Premassima, Massima, Testo integrale. */
.article__etichetta {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.25rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.article__etichetta:first-of-type {
  margin-top: 0;
}

.prose--premassima {
  font-style: italic;
  color: var(--ink-2);
}

/* La lettera della questione, come nella massima originale: a) b) c). */
.premassima-marca {
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  margin-right: 0.5rem;
}

/* Strumenti dell'articolo: stampa e nota di anteprima. */
.article__strumenti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.article__strumenti-nota {
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Intestazione che compare soltanto sulla carta. */
.article__testata-stampa {
  display: none;
}

.paywall {
  position: relative;
  margin-top: 2rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-1);
}

.paywall h2 {
  font-size: var(--t-lg);
  margin-bottom: 0.5rem;
}

.paywall p {
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 52ch;
  margin-inline: auto;
}

.paywall__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.btn--solid {
  background: var(--ink);
  color: #fff;
}

.btn--solid:hover {
  background: var(--accent);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--bordo-campo);
}

.btn--ghost:hover {
  border-color: var(--ink);
}

/* --------------------------------------------------------- pagina elenco -- */
.pagehead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) 0 clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
}

.pagehead__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.pagehead h1 {
  font-size: var(--t-2xl);
}

.pagehead__count {
  margin-top: 0.5rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

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

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.empty {
  border: 1px dashed var(--rule-2);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: center;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- footer -- */
.footer {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--ink);
  color: #b8b3ab;
  font-size: var(--t-sm);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--gap);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
}

.footer__titolo {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-tenue);
  margin-bottom: 0.85rem;
}

.footer a {
  color: #ddd8d0;
}

.footer a:hover {
  color: #fff;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: #fff;
  margin-bottom: 0.6rem;
}

.footer__legal {
  border-top: 1px solid #2c2e34;
  padding: 1.1rem 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--footer-tenue);
}

.footer__testate {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

/* ------------------------------------------------------------ testatebar -- */
.testatebar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-xs);
}

.testatebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
  padding: 0.5rem 0;
}

.testatebar__label {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.testatebar a {
  color: var(--ink-3);
  padding-bottom: 1px;
  border-bottom: 2px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.testatebar a:hover {
  color: var(--tinta, var(--accent));
  border-bottom-color: var(--tinta, var(--accent));
}

.testatebar a.is-current {
  color: var(--tinta, var(--accent));
  font-weight: 600;
  border-bottom-color: var(--tinta, var(--accent));
}

/* ------------------------------------------------------------ elenco arg -- */
.elencoargomenti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gap);
}

.elencoargomenti a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

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

.elencoargomenti .count {
  font-size: var(--t-xs);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- landing -- */
.landing {
  min-height: 100vh;
  background: var(--paper);
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0;
}

.landing__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.75rem;
}

.landing__title {
  font-size: var(--t-3xl);
  max-width: 18ch;
  margin-bottom: 1rem;
}

.landing__intro {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 62ch;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.landing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.landing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--tinta);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.5rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.landing__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* La scheda di una testata non ancora disponibile si distingue con il bordo e
   il fondo, non con l'opacita': abbassando l'opacita' i testi scendevano sotto
   il rapporto di contrasto richiesto. */
.landing__card--vuota {
  border-top-color: var(--rule-2);
  background: var(--paper);
}

.landing__sigla {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--tinta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.landing__card--vuota .landing__sigla {
  background: var(--ink-4);
}

.landing__nome {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
}

.landing__sub {
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.landing__conteggio {
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
  font-weight: 600;
}

.landing__card--vuota .landing__conteggio {
  color: var(--ink-4);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.landing__nota {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 72ch;
}

/* ---------------------------------------------------------- accessibilita' -- */

/* Avviso di bozza, nelle pagine non ancora definitive. */
.avviso-bozza {
  border: 1px solid var(--bordo-campo);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
  padding: 1rem 1.15rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin-bottom: 2rem;
}

.prose-elenco {
  margin: 0 0 1.05em;
  padding-left: 1.25rem;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.prose-elenco li {
  margin-bottom: 0.5rem;
}

/* Collegamento per saltare al contenuto: fuori schermo finche' non riceve il
   fuoco da tastiera (WCAG 2.4.1). */
.salta-al-contenuto {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: top 0.15s var(--ease);
}

.salta-al-contenuto:focus {
  top: 1rem;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Il contenuto principale riceve il fuoco quando si usa il collegamento di
   salto: il contorno non serve, lo spostamento della pagina e' la conferma. */
main:focus {
  outline: none;
}

/* Testo presente per i lettori di schermo e per la struttura dei titoli, ma
   non visibile. Non si usa display:none, che lo toglierebbe anche a loro. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Il fuoco da tastiera non deve finire sotto la testata fissata (WCAG 2.4.11). */
a,
button,
input,
select,
textarea,
[tabindex] {
  scroll-margin-top: 110px;
  scroll-margin-bottom: 2rem;
}

:target {
  scroll-margin-top: 110px;
}

/* Bersagli da toccare: mai sotto 24x24 px (WCAG 2.5.8). Le pastiglie degli
   argomenti erano alte una ventina di pixel. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}

.nav a,
.testatebar a,
.topiclist a,
.elencoargomenti a,
.panel a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.topiclist a,
.elencoargomenti a {
  width: 100%;
  justify-content: space-between;
}

/* Sui dispositivi a tocco i bersagli salgono a 44 px. */
@media (pointer: coarse), (max-width: 820px) {
  .nav a,
  .testatebar a,
  .topiclist a,
  .elencoargomenti a,
  .panel a,
  .search button,
  .btn {
    min-height: 44px;
  }

  .testatebar__inner {
    gap: 0.25rem 1rem;
  }

  /* Sotto i 16 px i campi fanno ingrandire la pagina su iOS. */
  .search input,
  .promo input {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 1080px) {
  .columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid,
  .featured,
  .landing__grid,
  .elencoargomenti {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .newsband__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .newsband__media {
    aspect-ratio: 16 / 9;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav {
    gap: 1rem;
  }

  .brand__sub {
    display: none;
  }
}

@media (max-width: 620px) {
  .grid,
  .featured,
  .sidebar,
  .landing__grid,
  .elencoargomenti {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav a:not(.nav__cta) {
    display: none;
  }

  .card--row {
    flex-direction: column;
  }

  .card--row .card__media {
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .toolbar__quick {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------- articolo su schermo stretto -- */
/* Sotto gli 820 px il titolo non sta sopra la fotografia: va sotto, su fondo
   chiaro. Sopra un'immagine, con lo schermo stretto, un titolo lungo viene
   tagliato e il testo chiaro perde contrasto. */
@media (max-width: 820px) {
  .article__hero {
    display: block;
    min-height: 0;
    background: transparent;
    overflow: visible;
  }

  .article__hero > img {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: var(--radius);
  }

  .article__hero::after {
    display: none;
  }

  .article__hero-inner {
    padding: 1.5rem 0 0;
  }

  .article__title {
    color: var(--ink);
    font-size: var(--t-xl);
    max-width: none;
  }

  .article__kicker .chip,
  .article__kicker .chip:hover {
    background: var(--accent-wash);
    color: var(--accent-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .article__meta {
    color: var(--ink-3);
  }

  .article__meta .rif {
    color: var(--ink-2);
  }

  /* Andando a capo, il separatore "·" resterebbe orfano a inizio riga. */
  .article__meta .dot::before {
    content: none;
  }

  /* Su schermo stretto le pastiglie devono poter andare a capo: i nomi degli
     argomenti di Appalti & Riserve sono lunghi e con nowrap facevano
     straripare la pagina. */
  .chip {
    white-space: normal;
  }
}

/* -------------------------------------------------- consenso e condivisione -- */

/* Il pannello dei cookie sta in fondo e non copre il contenuto: il Garante
   chiede che non impedisca la lettura. */
.consenso {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  box-shadow: 0 -12px 34px -18px rgba(20, 18, 14, 0.45);
  max-height: 85vh;
  overflow-y: auto;
}

.consenso[hidden] {
  display: none;
}

.consenso__scatola,
.consenso__preferenze {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding: 1.25rem 0 1.5rem;
  position: relative;
}

.consenso__titolo {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.consenso__testo p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0 0 0.9rem;
  max-width: 92ch;
}

.consenso__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.consenso__chiudi {
  position: absolute;
  top: 0.4rem;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}

.consenso__chiudi:hover {
  background: var(--paper);
}

.consenso__preferenze[hidden] {
  display: none;
}

.consenso__preferenze fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.consenso__voce {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}

.consenso__etichetta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  min-height: 32px;
  cursor: pointer;
}

.consenso__etichetta input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex: none;
}

.consenso__descrizione {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0.3rem 0 0 1.9rem;
  max-width: 88ch;
}

.consenso__preferenze .consenso__azioni {
  margin-top: 1.25rem;
}

/* Condivisione dell'articolo: semplici collegamenti, nessuno script di terze
   parti, quindi nessun consenso necessario per usarli. */
.condividi {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.condividi__titolo {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.75rem;
}

.condividi__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.condividi__voce {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--bordo-campo);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.condividi__voce:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
}

.condividi__icona {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.condividi__esito {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0.6rem 0 0;
  min-height: 1.2em;
}

/* Tavola della cookie policy: su schermo stretto scorre invece di rompersi. */
.tabella-scorrevole {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.tabella {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
}

.tabella th,
.tabella td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.tabella th {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

.tabella code {
  font-size: 0.9em;
  color: var(--accent-ink);
  background: var(--accent-wash);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
}

/* ------------------------------------------------- commenti e quesiti -- */

/* La banda dei commenti: prima stavano in fondo, dopo il paywall e senza
   titolo, ed e' per questo che in ventimila articoli ce ne sono tredici. */
.commenti {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
  border-top: 3px solid var(--ink);
}

.commenti__testata {
  margin-bottom: 1.5rem;
}

.commenti__titolo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-xl);
  margin-bottom: 0.5rem;
}

.commenti__conteggio {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
}

.commenti__nota {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 0;
  max-width: 78ch;
}

.commenti__elenco {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.commenti__elenco--risposte {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rule);
  gap: 1rem;
}

.commento {
  border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
}

.commento--risposta {
  border-left-color: var(--rule-2);
}

.commento__intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.35rem;
}

.commento__nome {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.commento__nome--redazione {
  color: var(--accent);
}

.commento__nome--redazione::after {
  content: " · redazione";
  font-weight: 400;
  color: var(--ink-3);
}

.commento__data {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.commento__testo {
  font-family: var(--font-display);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  max-width: 82ch;
}

.commenti__vuoto {
  border: 1px dashed var(--bordo-campo);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0 0 1.5rem;
}

.commenti__form,
.commenti__invito {
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
}

.commenti__form-titolo {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.commenti__invito p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 72ch;
  margin: 0 0 1rem;
}

.commenti__azioni,
.quesito__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.commenti__avviso,
.quesito__avviso {
  font-size: var(--t-xs);
  color: var(--accent-ink);
  max-width: 46ch;
}

/* Campi dei moduli. */
.campo {
  margin-bottom: 1.1rem;
}

.campo label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.campo input[type='text'],
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--bordo-campo);
  border-radius: var(--radius);
  padding: 0.65rem 0.8rem;
}

.campo input[type='text']:focus,
.campo textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: #fff;
}

.campo textarea {
  resize: vertical;
  min-height: 7rem;
}

.campo__aiuto {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0.35rem 0 0;
  max-width: 78ch;
}

.campo--consenso label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.campo--consenso input {
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--accent);
  flex: none;
}

/* Il quesito: un riquadro che spiega il servizio invece di negarlo. */
.quesito {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
}

.quesito--compatto {
  grid-template-columns: 1fr;
}

.quesito__testo p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0 0 0.75rem;
  max-width: 68ch;
}

.quesito__titolo {
  font-size: var(--t-lg);
  margin-bottom: 0.6rem;
}

.quesito__contesto {
  font-size: var(--t-xs);
  color: var(--ink-3);
  border-top: 1px solid var(--rule-2);
  padding-top: 0.6rem;
}

.quesito__condizione {
  font-weight: 600;
  color: var(--ink);
}

.quesito__form {
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

/* Quesiti pubblicati. */
.quesiti-pubblicati {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.quesito-pubblicato {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
}

.quesito-pubblicato__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-bottom: 0.6rem;
}

.quesito-pubblicato__domanda {
  font-size: var(--t-md);
  margin-bottom: 0.85rem;
}

.quesito-pubblicato__risposta {
  border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
}

.quesito-pubblicato__risposta p {
  font-family: var(--font-display);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.quesito-pubblicato__etichetta {
  font-family: var(--font-sans) !important;
  font-size: var(--t-xs) !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 0.4rem !important;
}

.quesito-pubblicato__argomenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
}

.quesiti-pubblicati--brevi .quesito-pubblicato__risposta p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 820px) {
  .quesito {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------ novita' normative -- */
/* Fascia separata, prima degli articoli. Sta su fondo distinto perche' non
   e' un articolo della rivista: e' un atto ufficiale che la rivista segnala. */
.novita {
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--rule-2);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
}

.novita__testata {
  margin-bottom: 1.25rem;
}

.novita__titolo {
  font-size: var(--t-lg);
  margin-bottom: 0.4rem;
}

.novita__nota {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 0;
  max-width: 84ch;
}

.novita__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.novita__voce {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1rem, 0.8rem + 1.5vw, 1.75rem);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(0.9rem, 0.7rem + 1vw, 1.25rem);
}

.novita__immagine {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--accent-wash);
}

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

.novita__occhiello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0 0 0.5rem;
}

.novita__atto {
  font-size: var(--t-md);
  margin-bottom: 0.4rem;
}

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

.novita__riferimento {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-ink);
  margin: 0 0 0.6rem;
}

/* I passaggi dell'atto che riguardano la materia della rivista. */
.novita__passaggi {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}

.novita__passaggi p {
  font-family: var(--font-display);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.novita__passaggi mark {
  background: #fff08a;
  color: inherit;
  padding: 0.05em 0.15em;
  border-radius: 2px;
}

.novita__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.novita__collegamento {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
}

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

.novita__come {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.novita__come a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2);
}

@media (max-width: 760px) {
  .novita__voce {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- stampa -- */
/* L'articolo deve uscire stampabile e salvabile in PDF dal browser. Sulla
   carta restano soltanto l'intestazione della rivista, il riferimento della
   decisione e il testo: niente navigazione, niente pulsanti, niente inviti
   all'abbonamento. */
@media print {
  @page {
    margin: 18mm 16mm;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .topbar,
  .masthead,
  .testatebar,
  .toolbar,
  .footer,
  .newsband,
  .consenso,
  .noprint {
    display: none !important;
  }

  .wrap,
  .wrap-text {
    width: auto;
    max-width: none;
    margin: 0;
  }

  .article__hero {
    display: none;
  }

  .article__body {
    padding: 0;
  }

  .article__testata-stampa {
    display: block;
    border-bottom: 2px solid #000;
    padding-bottom: 0.6rem;
    margin-bottom: 1.4rem;
  }

  .article__testata-nome {
    display: block;
    font-family: var(--font-display);
    font-size: 16pt;
    font-weight: 600;
    line-height: 1.15;
  }

  .article__testata-riga {
    display: block;
    font-size: 8.5pt;
    color: #444;
    margin-top: 0.15rem;
  }

  .article__stampa-titolo {
    font-size: 15pt;
    margin-top: 0.9rem;
    text-align: left;
  }

  .article__stampa-meta {
    font-size: 9pt;
    color: #333;
    margin: 0.35rem 0 0;
  }

  .article__etichetta {
    color: #000;
    border-bottom-color: #999;
    margin: 1.4rem 0 0.6rem;
  }

  .prose,
  .prose--premassima {
    font-size: 10.5pt;
    line-height: 1.5;
    color: #000;
  }

  .prose p {
    orphans: 3;
    widows: 3;
  }

  .paywall {
    border: 1px solid #999;
    border-top: 2px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
    margin-top: 1.5rem;
    text-align: left;
  }

  .paywall h3,
  .paywall p {
    text-align: left;
    margin-inline: 0;
    max-width: none;
  }

  .paywall__actions {
    display: none;
  }

  a {
    text-decoration: none;
    color: #000;
  }
}


/* ------------------------------------------------- targhetta dell'ente -- */
.targhetta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;height:100%;min-height:15rem;padding:2rem 1.5rem;text-align:center;background:linear-gradient(160deg,var(--accent-wash),#fff 78%);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:2px}
.targhetta__segno{display:grid;place-items:center;width:6.5rem;height:6.5rem;padding:.85rem;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:50%}
.targhetta__segno--scuro{background:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.targhetta__segno img{width:100%;height:100%;object-fit:contain}
.targhetta__sigla{font-family:var(--font-sans,system-ui,sans-serif);font-size:1.15rem;font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--accent-ink)}
.targhetta__nome{max-width:22ch;font-size:.8rem;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--accent-ink) 84%,#fff)}
.targhetta--compatta{gap:.6rem;min-height:9rem;padding:1rem .75rem}
.targhetta--compatta .targhetta__segno{width:3.6rem;height:3.6rem;padding:.45rem}
.targhetta--compatta .targhetta__sigla{font-size:.8rem}
.targhetta--compatta .targhetta__nome{max-width:20ch;font-size:.62rem;letter-spacing:.05em}

/* ------------------------------------------- aggiunte al foglio nuovo -- */
.quesiti-pubblicati--brevi .quesito-pubblicato{padding:1.1rem 0}
.chip--abbonati{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}
/* ------------------------------- navigazione su schermo stretto -------- */
/* Il foglio della sandbox, sotto i 620 px, nasconde TUTTE le voci del menu
   tranne «Accedi» (global.css, @media max-width:620px). Su un telefono si
   perde cosi' l'unica via per arrivare ad Argomenti, Quesiti, Ricerca e
   Abbonamenti: il menu non e' decorazione, e' la navigazione.
   Qui le voci restano, vanno a capo e si toccano. Stessa impaginazione,
   senza togliere niente a nessuno. */
@media (max-width: 620px) {
  .masthead__inner { flex-wrap: wrap; }
  .nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem 1.1rem;
    width: 100%;
  }
  .nav a:not(.nav__cta) { display: inline-flex; }
  .toolbar__quick { display: flex; flex-wrap: wrap; white-space: normal; }
}
/* --------------------------- la fascia della notizia della settimana ----- */
/* La targhetta dell'ente e' un contrassegno, non l'illustrazione della fascia:
   occupava meta' larghezza e schiacciava il testo. Colonna stretta, riquadro
   piu' basso, e il testo che si prende lo spazio che serve a leggere. */
.newsband__grid { grid-template-columns: minmax(0, 236px) minmax(0, 1fr); min-height: 0; }
.newsband__media .targhetta { min-height: 0; height: 100%; padding: 1.6rem 1rem; gap: .75rem; }
.newsband__media .targhetta__segno { width: 5.2rem; height: 5.2rem; padding: .7rem; }
.newsband__media .targhetta__nome { font-size: .7rem; max-width: 18ch; }

/* L'inizio dell'atto: e' il testo che deve far venire voglia di leggere il resto. */
.newsband__inizio {
  color: #e6e2db;
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: 68ch;
  margin: 0;
}

/* I passaggi che interessano la rivista, citati parola per parola dall'atto. */
.newsband__passaggi { margin-top: .3rem; max-width: 74ch; }
.newsband__passaggi-titolo {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b9b3aa;
  margin: 0 0 .55rem;
}
.newsband__passaggi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.newsband__passaggi li {
  padding-left: .9rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
}
.newsband__passaggio-etichetta {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: #dcd6cd;
  margin-bottom: .15rem;
}
.newsband__passaggi p { color: #cec9c1; font-size: var(--t-sm); line-height: 1.5; margin: 0; }

/* Il richiamo principale della fascia. */
.newsband__link--forte {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff !important;
  border: 0;
  border-radius: var(--radius);
  padding: .5rem .95rem;
  font-weight: 600;
}
.newsband__link--forte:hover { background: var(--accent-ink); }

@media (max-width: 820px) {
  .newsband__grid { grid-template-columns: minmax(0, 1fr); }
  .newsband__media { aspect-ratio: auto; }
  .newsband__media .targhetta {
    flex-direction: row;
    justify-content: flex-start;
    gap: .8rem;
    padding: 1rem;
    text-align: left;
  }
  .newsband__media .targhetta__segno { width: 3.1rem; height: 3.1rem; padding: .35rem; flex: none; }
  .newsband__media .targhetta__nome { max-width: none; font-size: .68rem; }
}
/* La fascia era troppo alta: mangiava mezzo schermo e si vedeva piu' lei della
   pagina. Si stringe l'imbottitura, si abbassano i caratteri e si tiene un solo
   passaggio — chi vuole il resto ha «Leggi di piu'». */
.newsband__body {
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.8rem) clamp(1.1rem, 0.9rem + 1.5vw, 2rem);
  gap: 0.5rem;
}
.newsband__title { font-size: var(--t-lg); }
.newsband__eyebrow { font-size: 0.7rem; }
.newsband__inizio { font-size: var(--t-base); line-height: 1.5; max-width: 78ch; }
.newsband__passaggi { margin-top: 0.15rem; }
.newsband__passaggi-titolo { margin-bottom: 0.4rem; }
.newsband__passaggi ul { gap: 0.5rem; }
.newsband__passaggi p { font-size: var(--t-sm); line-height: 1.45; }
.newsband__foot { margin-top: 0.15rem; }
.newsband__note { font-size: 0.7rem; }
/* ------------------------------------------------ il piede, due ritocchi -- */
/* L'indirizzo dell'editrice deve stare su una riga sola: spezzato fra "Figline"
   e "e Incisa" sembrava un elenco. E il blocco dell'editrice va un po' piu' a
   sinistra: la prima colonna prende meno spazio, la seconda comincia prima.
   LE TRE COLONNE VALGONO SOLO DA 821 px IN SU. Scritte senza la condizione,
   queste righe scavalcavano la regola che sotto gli 820 px mette il piede su una
   colonna sola — una regola scritta prima, e quindi perdente a parita' di
   specificita'. Su un telefono il piede tornava a tre colonne strette, con
   "Urbanistica" e "Italiana" spezzati su due righe. */
@media (min-width: 821px) {
  .footer__inner { grid-template-columns: 0.9fr 1.2fr 1fr; }
  .riga-intera { white-space: nowrap; }
}
@media (max-width: 820px) {
  .riga-intera { white-space: normal; }
}
/* ------------------------------------------------------ pagine interne -- */
/* Le pagine che non sono la home — argomenti, archivio, ricerca — hanno bisogno
   di un titolo, di una riga di spiegazione e di una impaginazione dei risultati
   (gli elenchi lunghi si spezzano: prima un argomento caricava tutto in una
   volta, e sono arrivati a 1,4 megabyte di pagina). */
.page__title { font-size: var(--t-2xl); margin-bottom: 0.4rem; }
.page__lead { color: var(--ink-3); max-width: 70ch; margin: 0 0 var(--gap); }
.page__meta { color: var(--ink-4); font-size: var(--t-xs); letter-spacing: 0.04em; }
.page__vuoto { color: var(--ink-3); padding: 2rem 0; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.pager__voce { color: var(--accent-ink); font-weight: 600; }
.pager__voce:hover { color: var(--accent); }
.pager__posizione { color: var(--ink-4); font-size: var(--t-sm); }

.elencoargomenti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0.2rem 1.75rem;
}
.elencoargomenti a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.elencoargomenti a:hover { color: var(--accent); }
.elencoargomenti .count { color: var(--ink-4); font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
/* ----------------------------------------------------- ricerca e filtri -- */
.search--larga { margin-bottom: 0.8rem; }
.search--larga input { min-width: 0; }
.search__istruzioni {
  color: var(--ink-3);
  font-size: var(--t-sm);
  max-width: 76ch;
  margin: 0 0 var(--gap);
}
.search__istruzioni b { color: var(--ink-2); }
/* ---------------------------------------------------- la pagina dei quesiti -- */
/* LA DOMANDA DEVE ARRIVARE A FONDO RIGA. I titoli del sito hanno
   `text-wrap: balance`, che accorcia alcune righe per pareggiarle fra loro: su
   una domanda lunga il risultato e' un testo che si ferma a meta' pagina con il
   fianco destro vuoto. `pretty` invece riempie le righe e interviene solo per
   non lasciare una parola sola in fondo. */
.quesito-pubblicato__domanda {
  text-wrap: normal;
  text-wrap: pretty;
  max-width: none;
}

/* LA RISPOSTA STA CHIUSA. Dieci risposte aperte fanno una pagina che nessuno
   legge fino in fondo; chiuse, si vede l'elenco delle domande e si apre quella
   che interessa. Il congegno e' <details>, che il browser sa gia' usare: si apre
   da tastiera, funziona senza JavaScript, e i lettori di schermo annunciano da
   soli se e' aperto o chiuso. */
.quesito-pubblicato__apri {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  color: var(--accent-ink);
}
.quesito-pubblicato__apri::-webkit-details-marker { display: none; }
.quesito-pubblicato__apri::before {
  content: "+";
  font-weight: 700;
  font-size: 1.05em;
  color: var(--accent);
  line-height: 1;
}
.quesito-pubblicato__risposta[open] .quesito-pubblicato__apri::before { content: "\2212"; }
.quesito-pubblicato__risposta[open] .quesito-pubblicato__apri { margin-bottom: 0.7rem; }
.quesito-pubblicato__invito {
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.quesito-pubblicato__apri:hover .quesito-pubblicato__invito { color: var(--accent); }

/* La risposta, quando e' aperta, si legge su tutta la larghezza disponibile. */
.quesito-pubblicato__risposta .prose { max-width: none; }

/* ------------------------------------------------------- la pagina dell'articolo -- */
/* L'apertura di un articolo senza immagine. Le immagini si generano alla
   pubblicazione e l'archivio e' vecchio: senza questa regola la fascia resterebbe
   nera, e una pagina nera in cima a un articolo sembra un guasto. */
.article__hero--senza-immagine {
  background: linear-gradient(150deg, var(--accent-ink) 0%, #23252b 72%);
}

/* Il titolo della testata che compare soltanto sulla carta: e' un paragrafo, non
   un'intestazione — di <h1> in pagina ce n'e' gia' uno, ed e' il titolo
   dell'articolo. Qui si da' al paragrafo l'aspetto che aveva l'intestazione. */
.article__stampa-titolo {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  color: #000;
}

/* La scheda di un articolo che non ha ancora la sua immagine: un fondo, non un
   vuoto. Le immagini si generano alla pubblicazione e l'archivio e' vecchio,
   quindi questo e' il caso piu' frequente, non l'eccezione. */
.card__media--vuota {
  background: linear-gradient(150deg, var(--accent-wash) 0%, #fff 88%);
}
.card--row .card__media--vuota { background: var(--accent-wash); }

/* L'accesso dentro il riquadro dell'abbonamento. Chi ha gia' un abbonamento deve
   poter entrare da qui, senza andare a cercare la pagina di accesso: e' il
   momento in cui sta decidendo se l'articolo gli interessa. */
.paywall__accesso {
  max-width: 30rem;
  margin: 1.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-align: left;
}

.paywall__accesso h3 {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-align: center;
  margin: 0 0 1.1rem;
}

.paywall__accesso .campo { margin-bottom: 0.85rem; }

.paywall__accesso input[type='text'],
.paywall__accesso input[type='password'] {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--bordo-campo);
  border-radius: var(--radius);
}

.paywall__accesso input[type='text']:focus,
.paywall__accesso input[type='password']:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.paywall__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  font-size: var(--t-sm);
}

.paywall__nota {
  font-size: var(--t-xs);
  color: var(--ink-4);
  text-align: center;
  margin: 1rem 0 0;
}

/* Gli allegati: i PDF che la redazione mette accanto alla massima. */
.allegati { margin-top: 2.25rem; }
.allegati__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.allegati__voce a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.allegati__voce a:hover { border-color: var(--accent); color: var(--accent); }
.allegati__peso { color: var(--ink-4); font-weight: 400; font-size: var(--t-xs); letter-spacing: 0.04em; }

/* Il video dell'articolo, richiamato per identificativo: si carica solo quando
   si arriva a vederlo, e dal dominio senza cookie di YouTube. */
.videowrapper { position: relative; aspect-ratio: 16 / 9; background: #000; }
.videowrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media print {
  /* Sulla carta il testo del riquadro va a filo, come tutto il resto: centrato
     sembra un avviso pubblicitario incollato in mezzo alla pagina. */
  .paywall h2 { text-align: left; margin-inline: 0; max-width: none; }
}