/* ==========================================================================
   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}
/* La pastiglia di un articolo riservato. Con il fondo pieno si leggeva come un
   invito ad abbonarsi, e non si capiva che era invece la qualita' dell'articolo
   (segnalazione di Giacomo Papini del 21 settembre 2026). Ora e' un'etichetta:
   bordo e colore dell'accento, e al passaggio del mouse non cambia, perche' non
   c'e' niente da cliccare. */
.chip--abbonati{background:transparent;color:var(--accent-ink);border:1px solid var(--accent-ink);cursor:default}
.chip--abbonati:hover{background:transparent;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; }
}

/* ---------------------------------------------------- collegamenti che escono --
   Un collegamento che porta fuori dal sito lo dice, con un segno discreto. Le
   riviste sorelle no: sono nostre, e li' il contrassegno non avrebbe senso. */
.fuori::after {
  content: " \2197";
  font-size: 0.85em;
  opacity: 0.7;
}

@media print {
  .fuori::after {
    content: "";
  }
}

/* ==========================================================================
   FASCIA DELLE NOVITA NORMATIVE, in cima alla prima pagina
   ========================================================================== */

.novita-fascia { background: var(--accent-wash, #f3efe9); border-bottom: 1px solid rgba(0,0,0,.08); padding: 1.1rem 0 1.3rem; }
.novita-fascia__testata { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .7rem; }
.novita-fascia__titolo { font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; margin: 0; color: var(--accent-ink, #7a3413); }
.novita-fascia__nota { margin: 0; font-size: .85rem; color: #6b6257; }
.novita-fascia__elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.novita-fascia__voce { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid rgba(0,0,0,.1); border-left: 4px solid var(--accent, #B0501F); border-radius: .5rem; padding: .8rem .9rem; }
.novita-fascia__segno { flex: 0 0 auto; }
.novita-fascia__corpo { min-width: 0; }
.novita-fascia__occhiello { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: .78rem; color: #6b6257; }
.novita-fascia__atto { margin: 0 0 .35rem; font-size: 1.02rem; line-height: 1.3; }
.novita-fascia__atto a { color: inherit; text-decoration: none; }
.novita-fascia__atto a:hover { text-decoration: underline; }
.novita-fascia__riferimento { margin: 0 0 .4rem; font-size: .82rem; color: #6b6257; }
.novita-fascia__piede { margin: 0; font-size: .85rem; }
.novita-fascia__collegamento { font-weight: 600; color: var(--accent-ink, #7a3413); text-decoration: none; }
.novita-fascia__collegamento:hover { text-decoration: underline; }
.chip--atto { background: var(--accent, #B0501F); color: #fff; text-transform: uppercase; letter-spacing: .03em; font-size: .68rem; }
@media (max-width: 640px) { .novita-fascia__elenco { grid-template-columns: 1fr; } }

/* ==========================================================================
   IMMAGINE DEI QUESITI: la risposta della redazione
   Una cornice diversa da quella degli articoli: doppio bordo, fondo tinto e
   bollo, perche' un quesito non e' un articolo e deve risaltare.
   ========================================================================== */

.quesito-pubblicato__media { position: relative; margin: 0 0 .8rem; }
.quesito-pubblicato__media img { display: block; width: 100%; height: auto; border-radius: .35rem; }
.quesito-pubblicato__media--risposta { padding: 6px; border: 1px solid var(--accent, #B0501F); border-radius: .5rem; background: var(--accent-wash, #f3efe9); }
.quesito-pubblicato__media--risposta img { border: 3px double var(--accent, #B0501F); border-radius: .3rem; }
.quesito-pubblicato__bollo { position: absolute; left: .7rem; bottom: .7rem; background: var(--accent, #B0501F); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .55rem; border-radius: .25rem; }
.quesito-pubblicato--con-immagine { border-left: 4px solid var(--accent, #B0501F); padding-left: .9rem; }
.quesito-pubblicato--con-immagine .quesito-pubblicato__domanda { font-size: 1.15rem; }
/* I QUESITI OCCUPANO POCO SPAZIO: l'evidenza la da la grafica.
   L'immagine diventa una miniatura incorniciata a sinistra, il testo le sta
   accanto, e il riquadro non cresce piu in altezza. */
.quesito-pubblicato__media--risposta { float: left; width: 150px; max-width: 38%; margin: .1rem .8rem .4rem 0; padding: 4px; }
.quesito-pubblicato__media--risposta img { border-width: 2px; }
.quesito-pubblicato__bollo { position: static; display: inline-block; margin-top: .35rem; font-size: .58rem; padding: .12rem .35rem; letter-spacing: .03em; }
.quesito-pubblicato--con-immagine { padding: .55rem .7rem .55rem .7rem; border-left-width: 3px; }
.quesito-pubblicato--con-immagine .quesito-pubblicato__domanda { font-size: 1rem; margin-top: 0; }
.quesito-pubblicato:after { content: ""; display: table; clear: both; }
.quesiti-pubblicati--brevi .quesito-pubblicato { padding-top: .3rem; padding-bottom: .5rem; }
.quesito-pubblicato__domanda { margin-bottom: .3rem; }

/* ======================================================================
   PAGINE A MODULO E PANNELLO DI AMMINISTRAZIONE — 22 settembre 2026

   Che cosa cambia e perche'. Le pagine a modulo (accesso, abbonamenti,
   profilo, quesito, newsletter) e le sottopagine del pannello usavano il
   foglio di Bootstrap e le sue classi. Da qui in avanti non escono piu' da
   Bootstrap: usano le classi di questo sistema di stile.

   Due gruppi di regole:

   1. i campi di modulo, estesi a tutti i tipi che il sito adopera davvero
      (prima `.campo` vestiva soltanto `input[type=text]`, `select` e
      `textarea`: una password o una data restavano senza stile);
   2. gli strumenti delle pagine a modulo — avvisi, azioni, riepiloghi,
      schede del modulo, tabelle e barra del pannello.
   ====================================================================== */

/* I campi: tutti i tipi che il sito usa, piu' select e caselle. */
.campo input[type='email'],
.campo input[type='password'],
.campo input[type='tel'],
.campo input[type='number'],
.campo input[type='date'],
.campo input[type='search'],
.campo input[type='url'],
.campo input[type='file'],
.campo select {
  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='email']:focus,
.campo input[type='password']:focus,
.campo input[type='tel']:focus,
.campo input[type='number']:focus,
.campo input[type='date']:focus,
.campo input[type='search']:focus,
.campo input[type='url']:focus,
.campo input[type='file']:focus,
.campo select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: #fff;
}

.campo input[readonly],
.campo input[disabled],
.campo select[disabled] {
  background: var(--accent-wash);
  color: var(--ink-2);
}

/* Sotto gli 820 px il corpo dei campi torna a 1rem: altrimenti iOS ingrandisce
   la pagina quando si tocca il campo (WCAG 1.4.4). */
@media (max-width: 820px) {
  .campo input,
  .campo select,
  .campo textarea {
    font-size: 1rem;
  }
}

/* Un riquadro di modulo non deve mai essere piu' largo del testo di un
   articolo: una riga di campo lunga tutta la pagina e' scomoda da compilare. */
.modulo > .panel,
.modulo > .avviso,
.modulo > .azioni-modulo,
.modulo > .riquadro-accesso,
.modulo > form {
  max-width: 46rem;
}

.modulo .columns .panel,
.modulo .columns form {
  max-width: none;
}

/* --------------------------------------------------------------- avvisi -- */
.avviso {
  display: block;
  border: 1px solid var(--rule-2);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0 0 var(--gap-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.avviso a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.avviso--esito {
  border-left-color: #1f6f43;
  background: #f1f7f2;
}

.avviso--attesa {
  border-left-color: #a8621b;
  background: #fdf5e8;
}

.avviso--errore {
  border-left-color: #a3231f;
  background: #fdf0ef;
}

.avviso--nota {
  border-left-color: var(--accent);
  background: var(--accent-wash);
}

/* --------------------------------------------------------------- azioni -- */
.azioni-modulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  margin: 1.2rem 0 0.4rem;
}

.azioni-modulo .btn {
  flex: none;
}

a.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------- riepiloghi -- */
.dato {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.5rem;
}

.dato__etichetta {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex: 0 0 12rem;
}

.dato__valore {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

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

/* ----------------------------------------------------------- pannello -- */
.barra-admin {
  background: var(--accent-ink);
  color: #fff;
}

.barra-admin__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.1rem;
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
}

.barra-admin__etichetta {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-right: 0.4rem;
}

.barra-admin a {
  color: #fff;
  opacity: 0.9;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}

.barra-admin a:hover {
  opacity: 1;
  border-bottom-color: #fff;
}

.barra-admin a.is-current {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: #fff;
}

/* --------------------------------------------------------------- accesso -- */
.riquadro-accesso {
  max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.7rem;
}

.riquadro-accesso form {
  margin: 0;
}

/* Il separatore «oppure»: una riga sottile con la parola in mezzo. */
.separatore {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.4rem 0 1rem;
  color: var(--ink-4);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.separatore::before,
.separatore::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ------------------------------------------------------- abbonamento -- */
.stato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  gap: var(--gap-sm);
  align-items: start;
}

.stato__esito {
  text-align: right;
}

.pastiglia {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  margin: 0 0 0.4rem;
}

.pastiglia--attiva {
  color: #1f6f43;
  background: #f1f7f2;
}

.pastiglia--attesa {
  color: #8a5215;
  background: #fdf5e8;
}

.pastiglia--scaduta {
  color: #a3231f;
  background: #fdf0ef;
}

/* I dati per il bonifico: etichetta a sinistra, valore a destra, in una griglia
   che regge anche su schermo stretto. */
.bonifico {
  background: var(--accent-wash);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1rem;
}

.bonifico__riga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  margin: 0 0 0.35rem;
  font-size: var(--t-sm);
}

.bonifico__riga span {
  flex: 0 0 9.5rem;
  color: var(--ink-3);
}

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

/* La conferma del bonifico: un riquadro che si apre senza JavaScript. Prima
   era una finestra di Bootstrap, e con JavaScript disattivato non si apriva. */
.conferma-bonifico {
  margin-top: 1rem;
}

.conferma-bonifico > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.conferma-bonifico > summary::-webkit-details-marker {
  display: none;
}

.conferma-bonifico__nota {
  font-weight: 400;
  font-size: var(--t-xs);
}

.conferma-bonifico__corpo {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* ------------------------------------------------------ moduli lunghi -- */
/* Un modulo con molti campi si spezza in schede: una griglia di campi dentro un
   riquadro con il titolo. Serve alla registrazione, al profilo e alle pagine
   del pannello, che hanno da otto a venti campi ciascuna. */
fieldset.scheda-modulo {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.2rem 1.25rem;
  margin: 0 0 var(--gap-sm);
  min-width: 0;
}

.scheda-modulo__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);
  padding: 0 0.5rem;
}

.griglia-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 1.2rem;
}

.griglia-campi__intera {
  grid-column: 1 / -1;
}

.griglia-campi .campo {
  margin-bottom: 1rem;
}

/* La registrazione e' un modulo lungo ma non deve occupare tutta la pagina: a
   tutta larghezza le righe diventano illeggibili. */
.modulo > form#formRegistrazione {
  max-width: 52rem;
}

@media (max-width: 820px) {
  .barra-admin__inner {
    gap: 0.15rem 0.9rem;
  }

  .dato__etichetta {
    flex-basis: 100%;
  }

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

  .stato__esito {
    text-align: left;
  }
}

/* ------------------------------------------- pannello: le voci del mestiere -- */
/* Le voci del pannello non sono un elenco: sono riquadri, uno per mestiere, e
   ognuno dice che cosa fa. Il pannello vecchio era un elenco unico di undici
   voci tutte uguali, e chi ci lavorava non sapeva piu' che cosa cercare. */
.griglia-pannello {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap-sm);
}

.riquadro-pannello {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.riquadro-pannello:hover {
  border-color: var(--rule-2);
  box-shadow: var(--shadow-1);
}

.riquadro-pannello__titolo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.riquadro-pannello__conteggio {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

.riquadro-pannello__nota {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.5;
}

/* La voce attiva fra i filtri della coda: si vede dove si e'. */
.pager__voce.is-attiva {
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ------------------------------------ quesiti: la scheda della redazione -- */
/* Il testo di un quesito sta chiuso in un riquadro che si apre da solo: in
   tabella, dieci quesiti per intero non si leggono. Prima era una finestra di
   Bootstrap, che senza JavaScript non si apriva affatto. */
.quesito-redazione {
  min-width: min(48rem, 70vw);
}

.quesito-redazione > summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-ink);
  list-style: none;
}

.quesito-redazione > summary::before {
  content: "\25B8";
  margin-right: 0.4rem;
  display: inline-block;
  transition: transform 0.15s var(--ease);
}

.quesito-redazione[open] > summary::before {
  transform: rotate(90deg);
}

.quesito-redazione > summary::-webkit-details-marker {
  display: none;
}

.quesito-redazione__testo {
  margin: 0.6rem 0 0.8rem;
  padding: 0.7rem 0.9rem;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 70ch;
}

/* La pastiglia di esito: pubblicato o ancora in attesa. */
.chip--esito {
  background: #f1f7f2;
  border-color: #1f6f43;
  color: #1f6f43;
}

.chip--attesa {
  background: #fdf5e8;
  border-color: #8a5215;
  color: #8a5215;
}

/* La riga arrivata da un collegamento diretto: si vede quale e'. */
.riga-evidenziata td {
  background: #fdf5e8;
}

/* Il riquadro che apre la rinomina di un argomento o di una categoria. Era una
   finestra di Bootstrap: senza JavaScript non si poteva rinominare niente. */
.rinomina-argomento {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.6rem;
}

.rinomina-argomento > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-ink);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  background: var(--surface);
}

.rinomina-argomento > summary::-webkit-details-marker {
  display: none;
}

.rinomina-argomento[open] > summary {
  border-color: var(--accent);
}

.rinomina-argomento form {
  margin-top: 0.7rem;
  padding: 0.8rem 0.9rem;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  min-width: min(22rem, 60vw);
}