/* La Lettera Piccola - foglio di stile unico.
   Design "registro di cronaca": linee temporali verticali, schede di
   pratica in elenchi di definizione, senza card flottanti ne ombre.
   Un solo accento, una sola scala tipografica e un solo sistema di angoli.
   Nessuna risorsa remota: solo file locali in assets/fonts/. */

/* ---------- variables ---------- */
:root {
  --llc-bg: #F1F3F5;
  --llc-surface: #FFFFFF;
  --llc-text: #171C21;
  --llc-muted: #4A525B;
  --llc-accent: #B0261C;
  --llc-border: #CBD2D9;
  --llc-accent-soft: #F6DEDB;
  --llc-radius: 4px;
  --llc-t13: 13px;
  --llc-t15: 15px;
  --llc-t17: 17px;
  --llc-t20: 20px;
  --llc-t25: 25px;
  --llc-t31: 31px;
  --llc-font-display: "Barlow", Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --llc-font-text: "Fira Sans", Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --llc-measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --llc-bg: #12161A;
    --llc-surface: #1A2026;
    --llc-text: #E8EBED;
    --llc-muted: #B6BDC3;
    --llc-accent: #DB6E66;
    --llc-border: #39424C;
    --llc-accent-soft: #33221F;
  }
}

@font-face {
  font-family: "Barlow";
  src: url('../fonts/barlow/Barlow-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url('../fonts/barlow/Barlow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url('../fonts/fira-sans/FiraSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url('../fonts/fira-sans/FiraSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url('../fonts/fira-sans/FiraSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url('../fonts/fira-sans/FiraSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: 16px; }
body {
  margin: 0;
  background-color: var(--llc-bg);
  color: var(--llc-text);
  font-family: var(--llc-font-text);
  font-size: var(--llc-t17);
  line-height: 1.6;
  hyphens: auto;
  overflow-wrap: anywhere;
}
h1, h2, h3 {
  font-family: var(--llc-font-display);
  text-wrap: balance;
  margin-block: 0 12px;
  line-height: 1.25;
}
h1 { font-size: var(--llc-t31); }
h2 { font-size: var(--llc-t25); margin-block-start: 44px; }
h3 { font-size: var(--llc-t20); }
p { text-wrap: pretty; margin-block: 0 16px; }
ul, ol { margin-block: 0 16px; padding-inline-start: 24px; }
li { margin-block-end: 6px; }
a { color: var(--llc-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--llc-muted); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid var(--llc-accent);
  outline-offset: 2px;
}
img { max-inline-size: 100%; block-size: auto; }
figure { margin: 0; }
figcaption { font-size: var(--llc-t13); color: var(--llc-muted); margin-block-start: 8px; }
strong { font-weight: 700; }
small { font-size: var(--llc-t13); }
dl { margin-block: 0 16px; }
dt { font-weight: 600; }
dd { margin-inline-start: 0; }
table { border-collapse: collapse; inline-size: 100%; font-variant-numeric: tabular-nums; }
caption { text-align: start; font-weight: 600; padding-block-end: 8px; }
th, td { border-block-end: 1px solid var(--llc-border); padding: 10px 12px; text-align: start; vertical-align: top; }
abbr { text-decoration: none; }

/* ---------- collegamenti di utilita e contenitori ---------- */
.skip { position: absolute; inset-inline-start: -10000px; top: 0; background-color: var(--llc-surface); color: var(--llc-accent); padding: 12px 16px; z-index: 20; }
.skip:focus-visible { inset-inline-start: 0; }
.shell { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: var(--llc-measure); }

/* ---------- intestazione ---------- */
.header { background-color: var(--llc-surface); border-block-end: 2px solid var(--llc-border); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 4px; padding-block: 10px; }
.brand { font-family: var(--llc-font-display); font-size: var(--llc-t20); font-weight: 700; color: var(--llc-text); text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline-end: 6px; }
.brand:hover { color: var(--llc-accent); }
.menu { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 8px; margin-inline-start: auto; }
.menu a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: 12px; color: var(--llc-text); text-decoration: none; font-size: var(--llc-t15); border-block-end: 2px solid transparent; }
.menu a:hover { color: var(--llc-accent); border-block-end-color: var(--llc-accent); }
.menu a[aria-current="page"] { color: var(--llc-accent); border-block-end-color: var(--llc-accent); font-weight: 600; }

/* ---------- pie di pagina ---------- */
.foot { background-color: var(--llc-surface); border-block-start: 2px solid var(--llc-border); margin-block-start: 64px; padding-block: 28px; font-size: var(--llc-t15); }
.foot-disclaimer { color: var(--llc-muted); max-width: var(--llc-measure); }
.foot-grid { display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 16px; margin-block-start: 20px; }
.foot-title { font-family: var(--llc-font-display); font-weight: 600; font-size: var(--llc-t15); margin-block-end: 6px; }
.foot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; margin-block-end: 0; }
.foot li { margin: 0; }
.foot a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: 6px; color: var(--llc-text); text-decoration: none; border-block-end: 2px solid transparent; }
.foot a:hover { color: var(--llc-accent); border-block-end-color: var(--llc-accent); }
.foot a[aria-current="page"] { color: var(--llc-accent); border-block-end-color: var(--llc-accent); }
.foot-identity { color: var(--llc-muted); font-size: var(--llc-t13); max-width: 90ch; margin-block: 18px 0; }

/* ---------- copertina ---------- */
.hero-box { display: flex; flex-wrap: wrap; column-gap: 44px; row-gap: 24px; align-items: flex-start; padding-block: 40px 8px; }
.hero-text { flex: 1 1 420px; min-inline-size: 0; }
.hero-lead { font-size: var(--llc-t20); }
.hero-thesis { color: var(--llc-muted); max-width: var(--llc-measure); }
.hero-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; margin-block-start: 20px; }
.hero-links li { margin: 0; }
.hero-links a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.plate { flex: 1 1 320px; min-inline-size: 0; }
.plate img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--llc-radius); border: 1px solid var(--llc-border); }
.hint { border-inline-start: 3px solid var(--llc-accent); background-color: var(--llc-surface); border-radius: var(--llc-radius); padding: 12px 16px; margin-block: 20px 0; font-size: var(--llc-t15); color: var(--llc-muted); }

/* ---------- sezioni della copertina ---------- */
.feature { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 16px; align-items: flex-start; margin-block-start: 44px; border-block-start: 1px solid var(--llc-border); padding-block-start: 24px; }
.feature-entry { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 12px; align-items: flex-start; text-decoration: none; color: var(--llc-text); flex: 1 1 380px; min-inline-size: 0; }
.feature-entry img { inline-size: 100%; max-inline-size: 300px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--llc-radius); border: 1px solid var(--llc-border); }
.feature-entry h3 { margin-block-end: 0; }
.feature-entry:hover h3 { color: var(--llc-accent); text-decoration: underline; text-decoration-thickness: 2px; }
.feature-note { flex: 1 1 300px; min-inline-size: 0; color: var(--llc-muted); font-size: var(--llc-t15); }

/* ---------- linea di tempo (copertina e cronologia) ---------- */
.trail { list-style: none; padding: 0; display: flex; flex-direction: column; row-gap: 18px; margin-block: 8px 20px; }
.trail > li { margin: 0; border-inline-start: 2px solid var(--llc-border); padding-inline-start: 18px; }
.entry { display: flex; column-gap: 16px; align-items: flex-start; text-decoration: none; color: var(--llc-text); }
.entry img { flex: none; inline-size: 76px; block-size: 76px; object-fit: cover; border-radius: var(--llc-radius); border: 1px solid var(--llc-border); }
.entry-text { min-inline-size: 0; }
.entry-mark { display: block; font-size: var(--llc-t13); color: var(--llc-muted); font-variant-numeric: tabular-nums; }
.entry h3 { font-size: var(--llc-t20); margin-block: 2px 0; }
.entry:hover h3 { color: var(--llc-accent); text-decoration: underline; text-decoration-thickness: 2px; }
.trail-note { color: var(--llc-muted); font-size: var(--llc-t15); max-width: var(--llc-measure); }
.line { border-block-start: 1px solid var(--llc-border); margin-block-start: 36px; padding-block-start: 20px; }
.line > h2 { margin-block-start: 0; }
.line-note { color: var(--llc-muted); font-size: var(--llc-t15); max-width: var(--llc-measure); }

/* ---------- briciole di pane ---------- */
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 8px; font-size: var(--llc-t13); color: var(--llc-muted); margin-block: 0; }
.crumbs li { margin: 0; }
li > a:only-child { display: inline-flex; align-items: center; min-block-size: 44px; }
.crumbs a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; }

/* ---------- pratica (pagine di cronaca) ---------- */
.sheet { padding-block-start: 24px; }
.sheet-lead { font-size: var(--llc-t20); }
.card-facts { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 8px; border-block: 1px solid var(--llc-border); padding-block: 14px; font-size: var(--llc-t15); }
.card-facts div { min-inline-size: 180px; }
.card-facts dt { color: var(--llc-muted); font-weight: 400; font-size: var(--llc-t13); }
.card-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.sheet-figure { margin-block: 24px; }
.sheet-figure img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--llc-radius); border: 1px solid var(--llc-border); }
.contents { border: 1px solid var(--llc-border); border-radius: var(--llc-radius); background-color: var(--llc-surface); padding: 12px 16px; margin-block: 24px; }
.contents summary { font-family: var(--llc-font-display); font-weight: 600; cursor: pointer; min-block-size: 44px; display: flex; align-items: center; }
.contents ol { margin-block: 10px 0; }
.prose { max-width: var(--llc-measure); }
.prose h2 { scroll-margin-block-start: 16px; }
.quote { border-inline-start: 3px solid var(--llc-accent); padding-inline-start: 16px; font-style: italic; color: var(--llc-muted); max-width: var(--llc-measure); }
.table-frame { overflow-x: auto; margin-block: 20px; }
.table-frame:focus-visible { outline: 3px solid var(--llc-accent); outline-offset: 2px; }
.sources ol { padding-inline-start: 22px; font-size: var(--llc-t15); }
.sources li { margin-block-end: 10px; }
.steps { list-style: none; padding: 0; margin-block-start: 28px; border-block-start: 1px solid var(--llc-border); padding-block-start: 16px; display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; font-size: var(--llc-t15); }
.steps li { margin: 0; }
.steps a { display: inline-flex; align-items: center; min-block-size: 44px; }

/* ---------- metodo, contatto e pagine legali ---------- */
.section-block { border-block-start: 1px solid var(--llc-border); margin-block-start: 36px; padding-block-start: 20px; }
.kv { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; }
.kv div { min-inline-size: 200px; }
.kv dt { color: var(--llc-muted); font-weight: 400; font-size: var(--llc-t13); }
.kv dd { margin: 0; }
.contact-figure { margin-block: 24px; }
.contact-figure img { inline-size: 100%; max-inline-size: 640px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--llc-radius); border: 1px solid var(--llc-border); }
.field { margin-block: 18px; max-width: 560px; }
.field label, .field legend { font-weight: 600; display: block; margin-block-end: 6px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  inline-size: 100%; font: inherit; padding: 10px 12px; color: var(--llc-text);
  background-color: var(--llc-surface); border: 2px solid var(--llc-muted); border-radius: var(--llc-radius);
}
.field textarea { min-block-size: 140px; }
.field-note { font-size: var(--llc-t13); color: var(--llc-muted); margin-block: 6px 0; }
.field-error { font-size: var(--llc-t13); color: var(--llc-accent); margin-block: 6px 0; }
.choices { border: 1px solid var(--llc-border); border-radius: var(--llc-radius); padding: 12px 16px; }
.choices label { font-weight: 400; display: inline; margin: 0; }
.choice { display: flex; column-gap: 10px; align-items: stretch; min-block-size: 44px; margin-block: 8px; }
.choice input { inline-size: 20px; block-size: 20px; flex: none; align-self: center; }
.choice label { display: flex; align-items: center; }
.consent { display: flex; column-gap: 10px; align-items: flex-start; min-block-size: 44px; margin-block: 18px; max-width: 560px; }
.consent input { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 3px; }
.consent label { font-weight: 400; display: block; min-block-size: 44px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding-inline: 18px; padding-block: 8px; border-radius: var(--llc-radius); font: inherit; font-weight: 600; cursor: pointer; }
.button-solid { background-color: var(--llc-accent); border: 2px solid var(--llc-accent); color: var(--llc-surface); }
.button-line { background-color: transparent; border: 2px solid var(--llc-muted); color: var(--llc-text); }
.button-line:hover { border-color: var(--llc-accent); color: var(--llc-accent); }
.button-solid, .button-line { transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, transform 120ms ease; }
.button-solid:hover { transform: translateY(-1px); }

/* ---------- avviso e livello di consenso sui cookie ---------- */
.notice { background-color: var(--llc-surface); border-block-start: 2px solid var(--llc-accent); }
.notice-fixed { position: fixed; inset-inline: 0; bottom: 0; z-index: 10; box-shadow: 0 -6px 14px rgba(23, 28, 33, 0.14); }
.notice-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 8px; padding-block: 10px; padding-inline-end: 52px; }
.notice-text { flex: 1 1 380px; min-inline-size: 0; display: flex; align-items: flex-start; column-gap: 10px; }
.notice-text p { margin: 0; font-size: var(--llc-t13); }
.notice-titolo { font-weight: 700; }
.notice-titolo:focus-visible { outline: 2px solid var(--llc-accent); outline-offset: 2px; }
.notice-actions { display: flex; flex: 1 1 auto; flex-wrap: wrap; column-gap: 10px; row-gap: 8px; }
.notice-close { position: absolute; inset-inline-end: 6px; top: 6px; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--llc-muted); cursor: pointer; border-radius: var(--llc-radius); }
.notice-close:hover { color: var(--llc-accent); }
.notice-icon { flex: none; margin-block-start: 3px; color: var(--llc-accent); }
.button-text { background: none; border: 0; color: var(--llc-muted); text-decoration: underline; text-underline-offset: 3px; }
.button-text:hover { color: var(--llc-accent); }
.setup { border: 1px solid var(--llc-border); border-radius: var(--llc-radius); background-color: var(--llc-surface); color: var(--llc-text); inline-size: min(92vw, 480px); padding: 0; }
.setup::backdrop { background-color: rgba(18, 22, 26, 0.5); }
.setup-head { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; padding: 14px 18px; border-block-end: 1px solid var(--llc-border); }
.setup-head h2 { margin: 0; font-size: var(--llc-t20); }
.setup-close { inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--llc-muted); cursor: pointer; border-radius: var(--llc-radius); }
.setup-close:hover { color: var(--llc-accent); }
.setup-body { padding: 16px 18px 0; }
.setup-row { border: 1px solid var(--llc-border); border-radius: var(--llc-radius); padding: 12px 14px; }
.setup-body .setup-row + .setup-row { margin-block-start: 10px; }
.setup-row h3 { margin-block: 0 4px; font-size: var(--llc-t17); display: flex; align-items: center; justify-content: space-between; column-gap: 12px; }
.setup-tag { font-family: var(--llc-font-text); font-size: var(--llc-t13); font-weight: 600; color: var(--llc-accent); background-color: var(--llc-accent-soft); border-radius: var(--llc-radius); padding: 2px 8px; }
.setup-row p { margin: 0; font-size: var(--llc-t13); color: var(--llc-muted); }
.setup-foot { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 8px; padding: 16px 18px; }
.setup-link { padding: 0 18px 18px; font-size: var(--llc-t13); margin: 0; }
.switch { flex: none; inline-size: 56px; block-size: 44px; border-radius: 22px; border: 2px solid var(--llc-muted); background-color: transparent; position: relative; cursor: pointer; padding: 0; }
.switch::after { content: ""; position: absolute; inline-size: 28px; block-size: 28px; border-radius: 50%; background-color: var(--llc-muted); inset-block-start: 6px; inset-inline-start: 2px; transition: inset-inline-start 120ms ease, background-color 120ms ease; }
.switch[aria-checked="true"] { border-color: var(--llc-accent); background-color: var(--llc-accent-soft); }
.switch[aria-checked="true"]::after { inset-inline-start: 22px; background-color: var(--llc-accent); }
.switch:focus-visible { outline: 2px solid var(--llc-accent); outline-offset: 2px; }

@media (max-width: 640px) {
  h1 { font-size: 27px; }
  .hero-box { padding-block-start: 24px; }
  .notice-inner { column-gap: 10px; row-gap: 4px; padding-block: 4px; padding-inline: 12px; padding-inline-end: 50px; }
  .notice-text { flex: 1 1 100%; }
  .notice-icon { display: none; }
  .notice-text p { font-size: 12px; line-height: 1.3; }
  .notice-actions { display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 4px; }
  .notice-actions .button { font-size: 12px; padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .button-solid, .button-line { transition: none; }
  .button-solid:hover { transform: none; }
  .switch::after { transition: none; }
}

/* ---------- correzioni conformanza UX (2026-10-21 localizzazione) ---------- */
.contents ol li a { display: inline-block; min-inline-size: 44px; }
@media (max-width: 640px) {
  .notice-inner { padding-inline: 8px; padding-inline-end: 46px; }
  .notice-actions { flex-wrap: nowrap; column-gap: 6px; }
  .notice-actions .button { min-block-size: 44px; padding-block: 6px; padding-inline: 6px; white-space: nowrap; }
}