/* ==========================================================================
   Ostexperten — design system
   Base template: hirael.com/embed/templates/rivr
   Struttura ripresa dal template: hero a card arrotondata full-bleed con nav
   flottante, pill button con icona in cerchio, metrics strip, griglie,
   pannello con angoli invertiti, CTA a banda media, footer a griglia.
   Palette riportata sui token caldi dell'app host (cream/ink/warm).
   ========================================================================== */

/* --- Token ---------------------------------------------------------------- */
:root {
  --background: #f4f2ec;
  --background-deep: #efebe1;
  --foreground: #171a1f;
  --card: #fbfaf6;
  --secondary: #ece9e1;
  --muted: #ece9e1;
  --muted-foreground: #6b6559;
  --border: #e2ded4;
  --primary: #1a1f29;
  --primary-foreground: #f8f7f3;
  --accent: #8c6a34;          /* crosta stagionata */
  --accent-soft: #b99a63;
  --accent-glow: rgba(140, 106, 52, .12);
  --ink-70: rgba(23, 26, 31, .70);
  --ink-45: rgba(23, 26, 31, .45);

  --radius-sm: .625rem;
  --radius: 1.5rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;

  --shell: 1536px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
}
.skip-link:focus {
  left: 1rem; top: 1rem; position: fixed;
  background: var(--card); border: 1px solid var(--border);
  padding: .625rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Tipografia ----------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.04;
}
h1.display { font-size: clamp(2.75rem, 7.2vw, 5.75rem); }
h2.display { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.08; }
h3.display { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.15; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; color: var(--ink-70); }
.muted { color: var(--muted-foreground); }
.prose p + p { margin-top: 1.1em; }
.prose p { color: var(--ink-70); }
.prose strong { color: var(--foreground); font-weight: 600; }

/* Segnaposto di redazione: valore da confermare prima del lancio */
.todo {
  border-bottom: 1px dotted var(--accent-soft);
  color: var(--accent);
  font-style: normal;
}
/* I segnaposto brevi non vanno spezzati; quelli lunghi devono poter andare a capo. */
.todo:not(.todo--long) { white-space: normal; overflow-wrap: break-word; }

/* --- Layout --------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: .75rem; }
.section { padding-block: 1.5rem; }
.section--tight { padding-block: .75rem; }
@media (min-width: 768px) {
  .shell { padding-inline: 1.25rem; }
  .section { padding-block: 3rem; }
  .section--tight { padding-block: 1.5rem; }
}
/* Su desktop il contenuto non deve rasentare il bordo: il margine cresce con
   la finestra. I tre valori sono scelti perche' testo delle sezioni, bordo
   delle card a tutta pagina e testo dentro il pannello cantina cadano sullo
   stesso asse verticale — vedi le regole di .stage-wrap e .section--cellar. */
@media (min-width: 1024px) { .shell { padding-inline: 3rem; } }
@media (min-width: 1440px) { .shell { padding-inline: 4rem; } }

.section-head {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-bottom: 2rem;
}
.section-head__text { max-width: 46rem; }
.section-head .eyebrow { display: block; margin-bottom: .875rem; }
@media (min-width: 640px) {
  .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .section-head { margin-bottom: 3rem; }
}

/* --- Bottoni -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .625rem;
  border-radius: 999px;
  font-size: .875rem; font-weight: 500;
  padding: .375rem .375rem .375rem 1.25rem;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer;
}
.btn__icon {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  transition: transform .25s var(--ease);
}
.btn:hover .btn__icon { transform: translate(1px, -1px); }
.btn--primary { background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { background: #262c38; }
.btn--light { background: #fff; color: var(--foreground); }
.btn--light:hover { background: rgba(255, 255, 255, .88); }
.btn--light .btn__icon { background: rgba(23, 26, 31, .08); }
.btn--outline {
  background: rgba(251, 250, 246, .6); color: var(--foreground);
  border-color: var(--border); backdrop-filter: blur(6px);
}
.btn--outline:hover { background: var(--card); }
.btn--outline .btn__icon { background: rgba(23, 26, 31, .07); }
.btn--ghost-light {
  border-radius: 999px; padding: .625rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #fff; backdrop-filter: blur(10px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .2); }
.btn--quiet {
  border: 1px solid var(--border); background: transparent;
  padding: .5rem 1.125rem; border-radius: 999px;
}
.btn--quiet:hover { background: var(--secondary); }
.btn--block { width: 100%; justify-content: space-between; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9375rem; font-weight: 500; color: var(--foreground);
  border-bottom: 1px solid var(--border); padding-bottom: 2px;
  transition: border-color .2s var(--ease);
}
.link-arrow:hover { border-color: var(--foreground); }
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translate(2px, -2px); }

/* --- Stage (hero / banda media) ------------------------------------------ */
.stage-wrap { padding: .75rem; }
@media (min-width: 768px) { .stage-wrap { padding: 1.25rem; } }
@media (min-width: 1440px) { .stage-wrap { padding: 2rem; } }

.stage {
  position: relative; overflow: hidden;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  isolation: isolate;
}
@media (min-width: 768px) { .stage { border-radius: var(--radius-xl); } }
.stage--hero { min-height: calc(100dvh - 1.5rem); }
@media (min-width: 768px) { .stage--hero { min-height: calc(100dvh - 2.5rem); } }
.stage--band { min-height: 34rem; }
@media (min-width: 768px) { .stage--band { min-height: 42rem; } }
.stage--short { min-height: 26rem; }
@media (min-width: 768px) { .stage--short { min-height: 32rem; } }

.stage__media { position: absolute; inset: 0; z-index: 0; }
.stage__media img { width: 100%; height: 100%; object-fit: cover; }
/* Gli hero sono molto piu' bassi di 16:9, quindi cover taglia dal centro e a una
   persona in piedi mangia la testa. Questa ancora il ritaglio in alto. */
.stage__media img.pos-top { object-position: 50% 0; }
/* <picture> serve solo a scegliere il formato: non deve esistere come scatola,
   altrimenti l'<img> in posizione assoluta si aggrappa a lei invece che al
   contenitore. display:contents la fa sparire dal layout. */
.stage__media picture, .split__media picture { display: contents; }
/* Il velo esiste per far leggere il testo, non per decorare. Con una fotografia
   vera dietro serve piu' corpo a meta' altezza, che e' dove sta il titolo: la
   versione precedente scendeva al 12% proprio li' e il testo spariva.
   La chiazza radiale tiene il centro calmo senza spegnere i bordi. */
.stage__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 58%, rgba(244,242,236,.68) 0%, rgba(244,242,236,0) 100%),
    linear-gradient(to bottom, rgba(244,242,236,.88) 0%, rgba(244,242,236,.46) 46%, rgba(244,242,236,.72) 100%);
}
.stage__scrim--dark {
  background:
    radial-gradient(62% 52% at 50% 55%, rgba(15,12,9,.70) 0%, rgba(15,12,9,0) 100%),
    linear-gradient(to top, rgba(23,26,31,.84) 0%, rgba(23,26,31,.64) 50%, rgba(23,26,31,.72) 100%);
}
.stage__inner { position: relative; z-index: 10; display: flex; flex-direction: column; width: 100%; flex: 1; }

/* Fondale generato: usato finché non c'è la fotografia definitiva.
   Sostituire con <img> reale e togliere la classe .is-empty. */
.media-fill {
  position: absolute; inset: 0;
  background:
    var(--tex-blotch),
    radial-gradient(120% 90% at 18% 12%, rgba(226, 210, 176, .95) 0%, rgba(226, 210, 176, 0) 55%),
    radial-gradient(90% 80% at 82% 78%, rgba(122, 96, 58, .55) 0%, rgba(122, 96, 58, 0) 60%),
    radial-gradient(140% 120% at 50% 100%, rgba(58, 52, 41, .75) 0%, rgba(58, 52, 41, 0) 62%),
    linear-gradient(155deg, #d9cdae 0%, #b8a583 34%, #8a7a5c 66%, #4b4536 100%);
}
/* Grana fine sopra il fondale: la superficie smette di sembrare un gradiente. */
.media-fill::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-grain);
  mix-blend-mode: overlay;
  opacity: .5;
}
.photo-note {
  position: absolute; z-index: 12; left: .875rem; bottom: .875rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .375rem .75rem; border-radius: 999px;
  background: rgba(23, 26, 31, .55); color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px);
}
.photo-note::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--accent-soft); }

/* --- Bolla di navigazione ------------------------------------------------ */
/* La nav vive dentro l'hero e con lo scroll esce di scena. Al suo posto scende
   questa: stessa voci, forma a pillola, fissa in alto. E' un clone costruito da
   site.js, non un secondo menu scritto a mano — le voci restano in un posto solo. */
.dock {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0;
  padding: .75rem;                 /* gli stessi margini di .stage-wrap */
  transform: translateY(-100%);
  opacity: 0; visibility: hidden;
  transition: transform .44s var(--ease), opacity .3s var(--ease), visibility .44s;
}
@media (min-width: 768px)  { .dock { padding: 1.25rem; } }
@media (min-width: 1440px) { .dock { padding: 2rem; } }
.dock[data-show="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
/* Mentre il menu mobile e' aperto la barra si toglie di mezzo. */
.dock[data-hidden="true"] { transform: translateY(-100%); opacity: 0; }

/* La barra ripete la nav dell'hero: stessa griglia, stessi angoli della card,
   e il velo bianco sfumato che l'hero ottiene dal suo scrim. */
.dock__bar {
  max-width: var(--shell); margin-inline: auto;
  /* Sotto i 1024px le voci sono nascoste: la colonna centrale resta a zero e
     con la griglia a tre colonne uguali il marchio sborda sotto la pillola
     della lingua. Qui e' flex, come la nav normale; la griglia arriva dopo. */
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(23, 26, 31, .07);
  background:
    linear-gradient(to bottom, rgba(250, 249, 245, .94), rgba(244, 242, 236, .74));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 16px 36px -22px rgba(23, 26, 31, .30), inset 0 1px 0 rgba(255, 255, 255, .8);
}
@media (min-width: 768px) { .dock__bar { border-radius: var(--radius-lg); } }

.dock .dock__side { display: flex; align-items: center; gap: .5rem; flex: none; }
.dock .brand { min-width: 0; }
.dock .brand__name { white-space: nowrap; }
/* Sotto i 380px la parola e la pillola della lingua si sfiorano: resta il simbolo. */
@media (max-width: 379px) { .dock .brand__name { display: none; } }
@media (min-width: 1024px) {
  .dock__bar {
    display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 1rem; padding: 1.25rem;
  }
  .dock .nav__links { justify-self: center; }
  .dock .dock__side { justify-self: end; gap: .75rem; }
}
.dock .nav__toggle { background: rgba(255, 255, 255, .6); }
@media (min-width: 1024px) { .dock .nav__toggle { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dock { transition: opacity .2s linear, visibility .2s linear; transform: none; }
  .dock[data-show="true"], .dock[data-hidden="true"] { transform: none; }
}

/* --- Navigazione ---------------------------------------------------------- */
.nav {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.25rem;
}
@media (min-width: 768px) { .nav { padding: 1.25rem 2rem; } }
.nav--solid { border-bottom: 1px solid var(--border); background: var(--background); }

.brand { display: flex; align-items: center; gap: .625rem; }
.brand__mark { width: 1.75rem; height: 1.75rem; flex: none; }
.brand__name {
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600;
  letter-spacing: -.01em; line-height: 1;
}
.brand__name em { font-style: normal; color: var(--accent); }

.nav__links { display: none; list-style: none; padding: 0; align-items: center; gap: 2rem; }
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  /* Con space-between la posizione del menu dipende dalla larghezza dei due
     blocchi laterali: le pagine senza selettore SV/IT lo spostavano a destra
     di tutta la pillola. Le due colonne minmax(0,1fr) sono per forza uguali,
     quindi il menu sta al centro della pagina qualunque cosa ci sia ai lati. */
  .nav { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .nav__links { justify-self: center; }
  .nav__side { justify-self: end; }
}
.nav__links a {
  font-size: .9375rem; color: var(--ink-70);
  transition: color .2s var(--ease); padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover { color: var(--foreground); }
.nav__links a[aria-current="page"] { color: var(--foreground); border-bottom-color: var(--accent); }
.nav__side { display: flex; align-items: center; gap: .75rem; }
.nav__cta { display: none; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }

.lang {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  border: 1px solid var(--border); border-radius: 999px; padding: .25rem;
  background: rgba(251, 250, 246, .7); backdrop-filter: blur(6px);
}
.lang a, .lang span {
  padding: .25rem .5rem; border-radius: 999px; line-height: 1;
  color: var(--muted-foreground);
}
.lang [aria-current="true"] { background: var(--primary); color: var(--primary-foreground); }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(251, 250, 246, .7);
  backdrop-filter: blur(6px);
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--background);
  display: flex; flex-direction: column; padding: 1.25rem;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drawer[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__links { list-style: none; padding: 0; margin-top: 2.5rem; display: flex; flex-direction: column; gap: .25rem; }
.drawer__links a {
  font-family: var(--font-display); font-size: 2rem; font-weight: 500;
  padding-block: .5rem; display: block; border-bottom: 1px solid var(--border);
}
.drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; }

/* --- Hero ----------------------------------------------------------------- */
.hero-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.5rem 9rem;
}
@media (min-width: 768px) { .hero-body { padding: 3rem 1.5rem 6rem; } }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; padding: .5rem 1rem; margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(12px);
  font-size: .8125rem; font-weight: 500;
}
.hero-badge svg { width: 1rem; height: 1rem; color: var(--accent); }
.hero-title { max-width: 18ch; margin-bottom: 1.25rem; }
.hero-sub { max-width: 34rem; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.6; color: var(--ink-70); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

.hero-stat {
  position: absolute; z-index: 12; left: 1rem; bottom: 7.5rem;
  display: flex; flex-direction: column; gap: .75rem;
  min-width: 11rem; padding: 1.125rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .34);
  backdrop-filter: blur(18px);
}
@media (min-width: 768px) { .hero-stat { left: 1.5rem; bottom: 1.5rem; padding: 1.25rem; border-radius: var(--radius-lg); } }
@media (min-width: 1024px) { .hero-stat { left: 2.5rem; bottom: 2.5rem; min-width: 12.5rem; } }
.hero-stat__num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; line-height: 1; }
.hero-stat__label { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.hero-stat .btn { background: #fff; color: var(--foreground); padding: .3125rem 1.125rem .3125rem .3125rem; }
.hero-stat .btn .btn__icon { background: rgba(23, 26, 31, .08); width: 1.5rem; height: 1.5rem; order: -1; }

/* Pannello con angoli invertiti, ripreso dal template */
.notch-panel {
  position: absolute; right: 0; bottom: 0; z-index: 12;
  display: flex; align-items: center; gap: .875rem;
  background: var(--background);
  border-start-start-radius: var(--radius);
  padding: .875rem 1rem .875rem 2rem;
}
@media (min-width: 768px) {
  .notch-panel { gap: 1.5rem; padding: 1.5rem 1.5rem 1.5rem 3.5rem; border-start-start-radius: 3.5rem; }
}
.notch-panel__corner { position: absolute; color: var(--background); pointer-events: none; width: 1.5rem; height: 1.5rem; }
.notch-panel__corner--top { top: -1.5rem; right: 0; }
.notch-panel__corner--left { bottom: 0; left: -1.5rem; }
@media (min-width: 768px) {
  .notch-panel__corner { width: 3.5rem; height: 3.5rem; }
  .notch-panel__corner--top { top: -3.5rem; }
  .notch-panel__corner--left { left: -3.5rem; }
}
.notch-panel__badge {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(23, 26, 31, .04);
}
@media (min-width: 768px) { .notch-panel__badge { width: 3.5rem; height: 3.5rem; } }
.notch-panel__title { font-size: 1rem; font-weight: 500; }
@media (min-width: 768px) { .notch-panel__title { font-size: 1.25rem; } }
.notch-panel__sub { font-size: .8125rem; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: .25rem; }

/* --- Metrics strip -------------------------------------------------------- */
.metrics {
  border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid rgba(23, 26, 31, .06);
  background: rgba(23, 26, 31, .02);
}
@media (min-width: 768px) { .metrics { border-radius: var(--radius-xl); padding: 3rem; } }
.metrics__grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
@media (min-width: 900px) { .metrics__grid { grid-template-columns: repeat(4, 1fr); } }
.metrics__item { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; }
.metrics__item + .metrics__item { border-left: 1px solid rgba(23, 26, 31, .09); }
.metrics__item:nth-child(3) { border-top: 1px solid rgba(23, 26, 31, .09); }
.metrics__item:nth-child(4) { border-top: 1px solid rgba(23, 26, 31, .09); }
.metrics__item:nth-child(odd) { border-left: 0; }
@media (min-width: 900px) {
  .metrics__item:nth-child(n) { border-top: 0; border-left: 1px solid rgba(23, 26, 31, .09); }
  .metrics__item:first-child { border-left: 0; }
}
.metrics__num {
  font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.02em;
}
.metrics__label { font-size: .875rem; color: var(--muted-foreground); }

/* --- Card / bento --------------------------------------------------------- */
.card {
  position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--border);
  padding: 1.75rem;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  display: flex; flex-direction: column;
}
@media (min-width: 768px) { .card { border-radius: var(--radius-lg); padding: 2rem; } }
/* Su desktop anche dentro i contenitori il testo prende aria: 2rem su una card
   larga 380px sta stretto quanto 20px sul bordo della pagina. */
@media (min-width: 1024px) { .card { padding: 2.5rem; } }
.card:hover { box-shadow: 0 10px 34px rgba(23, 26, 31, .06); }
.card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 1rem; flex: none;
  background: var(--secondary); color: var(--foreground); margin-bottom: 1.5rem;
}
.card__icon svg { width: 1.375rem; height: 1.375rem; }
.card h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.card p { margin-top: .625rem; font-size: .9375rem; line-height: 1.6; color: var(--muted-foreground); }
.card__foot { margin-top: auto; padding-top: 1.5rem; }

.grid { display: grid; gap: .75rem; }
@media (min-width: 768px) { .grid { gap: 1.25rem; } }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
/* Quattro colonne solo da 1280px: a 1100, con il padding interno delle card,
   restavano quattro parole per riga. Sotto restano due colonne larghe. */
@media (min-width: 1280px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Split (testo + media) ------------------------------------------------ */
.split { display: grid; gap: 1.25rem; align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; gap: 2rem; } }
.split--top .split__body { justify-content: flex-start; }
.split--reverse .split__media { order: -1; }
@media (min-width: 900px) { .split--reverse .split__media { order: 0; } }
.split__media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: 20rem;
}
@media (min-width: 768px) { .split__media { border-radius: var(--radius-lg); min-height: 26rem; } }
/* Foto reale al posto del fondale generato: riempie la nicchia come il .media-fill. */
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { display: flex; flex-direction: column; justify-content: center; padding-block: 1rem; }
@media (min-width: 900px) { .split__body { padding-right: 2rem; } }

/* --- Liste ---------------------------------------------------------------- */
.list-num { list-style: none; padding: 0; display: grid; gap: 1.25rem; counter-reset: n; }
.list-num > li {
  counter-increment: n; display: grid; gap: .75rem;
  grid-template-columns: 2.25rem 1fr; align-items: start;
}
.list-num > li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em;
  color: var(--accent); padding-top: .35rem;
}
.list-num h4 { font-size: 1.0625rem; font-weight: 600; }
.list-num p { margin-top: .375rem; font-size: .9375rem; color: var(--muted-foreground); line-height: 1.6; }

.list-check { list-style: none; padding: 0; display: grid; gap: .875rem; }
.list-check > li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; align-items: start; font-size: .9375rem; color: var(--ink-70); }
.list-check svg { width: 1.125rem; height: 1.125rem; color: var(--accent); margin-top: .2rem; }

.rule-list { list-style: none; padding: 0; }
.rule-list > li, .rule-list > div { padding-block: 1.125rem; border-top: 1px solid var(--border); display: grid; gap: .25rem; }
.rule-list > li:last-child, .rule-list > div:last-child { border-bottom: 1px solid var(--border); }
.rule-list dt, .rule-list__k { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.rule-list dd, .rule-list__v { margin: 0; font-size: 1rem; }

/* --- Quote ---------------------------------------------------------------- */
.pull {
  border-left: 2px solid var(--accent);
  padding: .25rem 0 .25rem 1.5rem;
  font-family: var(--font-display); font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.25; font-weight: 500;
}

/* --- Banda CTA scura ------------------------------------------------------ */
.band-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem; text-align: center; padding: 3rem 1.5rem; color: #fff;
}
.band-body h2 { color: #fff; max-width: 20ch; }
.band-body p { max-width: 38rem; color: rgba(255, 255, 255, .82); font-size: 1.0625rem; }
.band-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* --- Form ----------------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.field input, .field textarea, .field select {
  width: 100%; padding: .75rem .9375rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card);
  font-size: .9375rem; transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 7rem; resize: vertical; }
.field--row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field--row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .8125rem; color: var(--muted-foreground); }
.form__consent { display: grid; grid-template-columns: 1.1rem 1fr; gap: .625rem; align-items: start; font-size: .8125rem; color: var(--muted-foreground); }
.form__consent input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; }

/* --- Footer --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); background: var(--background); margin-top: 1.5rem; }
.footer__inner { padding-block: 4rem; display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 900px) { .footer__inner { flex-direction: row; justify-content: space-between; padding-block: 5rem; } }
.footer__about { max-width: 22rem; }
.footer__about p { margin-top: 1rem; font-size: .875rem; color: var(--muted-foreground); }
.footer__legal { margin-top: 1.5rem; font-family: var(--font-mono); font-size: .6875rem; line-height: 1.9; letter-spacing: .04em; color: var(--muted-foreground); }
.footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 640px) { .footer__nav { grid-template-columns: repeat(3, 1fr); gap: 4rem; } }
.footer__nav h3 { font-size: .875rem; font-weight: 600; }
.footer__nav ul { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .75rem; }
.footer__nav a { font-size: .875rem; color: var(--muted-foreground); transition: color .2s var(--ease); }
.footer__nav a:hover { color: var(--foreground); }
.footer__bottom {
  border-top: 1px solid var(--border); padding-block: 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8125rem; color: var(--muted-foreground);
}

/* --- Cookie banner -------------------------------------------------------- */
.cookie {
  position: fixed; z-index: 140; left: .75rem; right: .75rem; bottom: .75rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: rgba(251, 250, 246, .96); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(23, 26, 31, .12);
  padding: 1.25rem;
  display: none; gap: 1rem; flex-direction: column;
}
@media (min-width: 768px) {
  /* Centrato in basso: gli angoli sono occupati da hero-stat e notch-panel. */
  .cookie { left: 50%; right: auto; transform: translateX(-50%);
            bottom: 1.25rem; width: min(27rem, calc(100vw - 2.5rem)); padding: 1.5rem; }
}
.cookie[data-open="true"] { display: flex; }
.cookie h2 { font-size: 1rem; font-weight: 600; }
.cookie p { font-size: .8125rem; color: var(--muted-foreground); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie__actions .btn { padding-inline: 1.125rem; }
.cookie__actions .btn--quiet { padding: .5rem 1.125rem; }

/* --- Reveal --------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Pagina riservata produttori ----------------------------------------- */
.reserved-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-soft); border-radius: 999px;
  padding: .3125rem .75rem; background: var(--accent-glow);
}
.step { padding-block: 2.5rem; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .step { padding-block: 3.5rem; } }
.step__index { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--accent); }
.step h2 { margin-top: .875rem; }
.step__body { margin-top: 1.5rem; max-width: 46rem; }
.narrow { max-width: 56rem; margin-inline: auto; }

.sticky-cta {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 100;
  padding: .625rem .625rem .625rem 1.25rem;
  border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 14px 40px rgba(23, 26, 31, .22);
  font-size: .875rem; font-weight: 500;
  transform: translateY(140%); transition: transform .35s var(--ease);
}
.sticky-cta[data-show="true"] { transform: none; }
@media (min-width: 768px) { .sticky-cta { display: none; } }
.sticky-cta .btn__icon { background: rgba(255,255,255,.2); }

.callout {
  border-radius: var(--radius); padding: 1.5rem;
  background: var(--secondary); border: 1px solid var(--border);
}
@media (min-width: 768px) { .callout { padding: 2rem; } }
@media (min-width: 1024px) { .callout { padding: 2.75rem; } }
.callout .eyebrow { display: block; margin-bottom: .75rem; }
.callout p + p { margin-top: .75rem; }

.slots { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .slots { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.slot {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1rem; background: var(--card);
  display: flex; flex-direction: column; gap: .375rem;
}
@media (min-width: 1024px) { .slot { padding: 1.25rem; } }
.slot__state { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.slot--open .slot__state { color: var(--accent); }
.slot--taken { background: var(--secondary); opacity: .72; }
.slot__name { font-size: .9375rem; font-weight: 500; }

/* --- Utility -------------------------------------------------------------- */
.stack { display: grid; gap: 1.25rem; }
.stack--sm { gap: .75rem; }
.stack--lg { gap: 2rem; }
.center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.maxw-sm { max-width: 34rem; } .maxw-md { max-width: 44rem; } .maxw-lg { max-width: 56rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.divider { height: 1px; background: var(--border); border: 0; }

/* ==========================================================================
   CANTINA — superfici in legno, nicchie ad arco, ambiente di stagionatura.
   Aggiunta sopra il design system base: nessun componente esistente cambia
   comportamento se non gli si applica una di queste classi.
   ========================================================================== */

:root {
  --wood-900: #2e2118;
  --wood-700: #43301f;
  --wood-500: #58412c;
  --wood-300: #6d5238;
  --wood-edge: rgba(255, 248, 235, .14);
  --cellar-bg: #16110d;
  --cellar-card: #1f1812;
  --cellar-fg: #ece4d6;
  --bulb: rgba(255, 214, 148, .22);
}

/* --- Legno --------------------------------------------------------------- */
/* Venatura orizzontale: fibre fini, fibre larghe irregolari, variazione di
   tono lungo l'asse, più due nodi appena accennati. */
/* Venatura riusabile: fibre fini, fibre larghe irregolari, tono lungo l'asse,
   due nodi appena accennati. */
:root {
  /* Le fibre sono rumore frattale stirato sull'asse x (baseFrequency molto
     anisotropa), non righe ripetute: non si vede il periodo. Due strati con
     frequenze e tile diversi perche' i loro periodi non coincidano mai. */
  /* Fibre = rumore frattale stirato sull'asse x (baseFrequency anisotropa),
     non righe ripetute: non si legge il periodo. stitchTiles='stitch' fa
     combaciare il rumore ai bordi del tile, altrimenti si vedono le giunzioni. */
  --wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='220'%3E %3Cfilter id='w' x='0' y='0' width='100%' height='100%'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.0055 0.58' numOctaves='5' seed='11' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.07 0 0 0 0 0.045 0 0 0 0 0.025 1.25 0 0 0 -0.42'/%3E %3C/filter%3E%3Crect width='560' height='220' filter='url(%23w)'/%3E%3C/svg%3E");
  --wood-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='90'%3E %3Cfilter id='f' x='0' y='0' width='100%' height='100%'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.02 1.4' numOctaves='3' seed='29' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.86 0 0 0 0 0.78 0 0 0 0 0.65 0.62 0 0 0 -0.34'/%3E %3C/filter%3E%3Crect width='330' height='90' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='p' x='0' y='0' width='100%' height='100%'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='5' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -0.5'/%3E %3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  --tex-blotch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E %3Cfilter id='b' x='0' y='0' width='100%' height='100%'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.0022' numOctaves='2' seed='17' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.75 0 0 0 -0.3'/%3E %3C/filter%3E%3Crect width='900' height='900' filter='url(%23b)'/%3E%3C/svg%3E");
  --wood-img:
    radial-gradient(2.4rem 0.85rem at 22% 46%, rgba(0,0,0,.24), rgba(0,0,0,0) 72%),
    radial-gradient(1.7rem 0.6rem at 71% 58%, rgba(0,0,0,.18), rgba(0,0,0,0) 72%),
    var(--wood-fibre),
    var(--wood-grain),
    linear-gradient(92deg, var(--wood-700) 0%, var(--wood-300) 34%, var(--wood-500) 62%, var(--wood-900) 100%);
}
.wood { background-color: var(--wood-500); background-image: var(--wood-img); }

/* Assito: più assi affiancate, con la fuga tra l'una e l'altra. */
.wood-boards {
  background-color: var(--wood-500);
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0 86px,
      rgba(0,0,0,.55) 86px 88px,
      rgba(255,248,235,.07) 88px 89px,
      rgba(0,0,0,0) 89px 90px),
    var(--wood-img);
}

/* Mensola: il bordo di un'asse su cui appoggia la forma. */
.shelf {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.5rem;
  border-top: 1px solid rgba(255, 248, 235, .12);
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 235, .22),
    inset 0 -6px 10px rgba(0, 0, 0, .52),
    0 -18px 26px -10px rgba(0, 0, 0, .58);
  pointer-events: none;
}
/* Lo spigolo dell'asse: la riga di luce dove il piano incontra il fronte. */
.shelf::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(to bottom, rgba(255, 240, 214, .16), rgba(255, 240, 214, 0));
}
@media (min-width: 768px) { .shelf { height: 1.9rem; } }

/* --- Nicchia ad arco (volta della cantina) ------------------------------- */
.arch {
  border-radius: 50% 50% var(--radius) var(--radius) / 30% 30% var(--radius) var(--radius);
}
@media (min-width: 768px) {
  .arch { border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 32% 32% var(--radius-lg) var(--radius-lg); }
}

/* --- Scope cantina: ribalta i token, i componenti si adattano da soli ---- */
.cellar {
  --background: var(--cellar-bg);
  --background-deep: #100c09;
  --foreground: var(--cellar-fg);
  --card: var(--cellar-card);
  --secondary: #2a2119;
  --muted: #2a2119;
  --muted-foreground: #a3968a;
  --border: rgba(236, 228, 214, .13);
  --ink-70: rgba(236, 228, 214, .74);
  --ink-45: rgba(236, 228, 214, .48);
  --accent: #cCa46a;
  --accent-soft: #b8975f;
  --primary: #f0e8da;
  --primary-foreground: #16110d;
  position: relative;
  background: var(--cellar-bg);
  color: var(--cellar-fg);
  overflow: hidden;
}
/* La lampadina: una sola sorgente calda, alta a sinistra. */
.cellar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 22% 0%, var(--bulb), rgba(255,214,148,0) 68%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
}
.cellar > * { position: relative; z-index: 1; }
.cellar .card { box-shadow: 0 18px 40px -24px rgba(0,0,0,.9); }
.cellar .card:hover { box-shadow: 0 24px 50px -22px rgba(0,0,0,.95); }
.cellar .btn--outline { background: rgba(236,228,214,.06); }
.cellar .btn--outline:hover { background: rgba(236,228,214,.12); }
.cellar .list-check svg { color: var(--accent); }
.cellar .pull { border-left-color: var(--accent); }

/* Sezione cantina a tutta larghezza, con bordo superiore in legno. */
.section--cellar { padding-block: 4rem; }
@media (min-width: 768px) { .section--cellar { padding-block: 6rem; } }
.section--cellar > .shell { position: relative; z-index: 1; }

/* --- Fondale foto in versione cantina ------------------------------------ */
.media-fill--cellar {
  background:
    var(--tex-blotch),
    radial-gradient(70% 50% at 26% 4%, rgba(255, 206, 136, .30) 0%, rgba(255, 206, 136, 0) 62%),
    radial-gradient(120% 100% at 50% 108%, rgba(10, 7, 5, .92) 0%, rgba(10, 7, 5, 0) 62%),
    linear-gradient(163deg, #6a5236 0%, #4a3826 38%, #2b2016 72%, #150f0a 100%);
}
.media-fill--cellar::after { opacity: .34; }

/* --- Filetto in legno sotto i titoli di sezione -------------------------- */
.eyebrow--wood { display: inline-flex; align-items: center; gap: .625rem; }
.eyebrow--wood::after {
  content: ""; width: 2.5rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--wood-300), var(--wood-700));
  box-shadow: inset 0 1px 0 var(--wood-edge);
}

/* --- Prove fotografiche (pagina produttori) ------------------------------ */
/* Scatti veri dal canale svedese. Restano volutamente piccoli: valgono come
   documento, non come immagine — ingranditi mostrerebbero solo che sono
   fotografie da telefono. */
.prove { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .prove { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.prova { margin: 0; }
.prova picture { display: block; }
.prova img {
  /* height:auto e' obbligatorio: gli attributi width/height nell'HTML (che ci
     sono per evitare il salto di layout) fissano l'altezza come hint di
     presentazione, e con due dimensioni definite aspect-ratio viene ignorato. */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.prova figcaption {
  margin-top: .5rem;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-foreground);
}

/* --- Rifiniture cantina -------------------------------------------------- */
/* Il pannello cantina resta inset e arrotondato come le altre superfici. */
.section--cellar {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  border-radius: var(--radius); padding-block: 3.5rem;
}
@media (min-width: 768px) {
  .section--cellar { border-radius: var(--radius-xl); padding-block: 5.5rem; }
}
.section--cellar > .shell { padding-inline: 1.5rem; }
@media (min-width: 768px) { .section--cellar > .shell { padding-inline: 3rem; } }
/* 1024px: bordo card a 20px + 1.75rem = 48px, come .shell a 3rem.
   1440px: bordo card a 32px + 2rem = 64px, come .shell a 4rem. */
@media (min-width: 1024px) { .section--cellar > .shell { padding-inline: 1.75rem; } }
@media (min-width: 1440px) { .section--cellar > .shell { padding-inline: 2rem; } }

/* Mensola più leggibile: legno più chiaro della cella dietro. */
.shelf.wood { background-color: var(--wood-300); }

/* --- Metriche incise su un'asse ------------------------------------------ */
.metrics--wood {
  border: 0;
  color: #f2e9d9;
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 235, .16),
    inset 0 -3px 8px rgba(0, 0, 0, .40),
    0 26px 54px -32px rgba(0, 0, 0, .75);
}
.metrics--wood .metrics__num {
  color: #f6eede;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 248, 235, .10);
}
.metrics--wood .metrics__label { color: rgba(242, 233, 217, .62); }
.metrics--wood .metrics__item { border-color: rgba(0, 0, 0, .40) !important; }
.metrics--wood .metrics__item + .metrics__item { box-shadow: -1px 0 0 rgba(255, 248, 235, .07); }
.metrics--wood .todo { color: #e0bd82; border-bottom-color: rgba(224, 189, 130, .55); }

/* --- Stacco sopra il footer ----------------------------------------------- */
/* Era una banda in legno a tutta larghezza: attraversava lo schermo da bordo a
   bordo mentre tutto il resto sta dentro i margini, e si notava solo lei.
   Un filetto dentro la stessa griglia del contenuto basta a separare. */
.footer { border-top: 0; position: relative; }
.footer::before {
  content: ""; position: absolute; top: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--shell); height: 1px;
  background: var(--border);
}

/* Media a destra sul desktop, per alternare i blocchi affiancati. */
@media (min-width: 900px) { .split--flip .split__media { order: 2; } }