/* Stile «Etichetta» con 12 palette che si alternano. Barlow Condensed per titoli, Barlow per testi. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Palette di partenza senza JavaScript: Petrolio e cipria. Il file palettes.js le sostituisce. */
  --p-hero: #0E5A66; --p-hero-ink: #FFFFFF; --p-hero-dot: #F2B8A6;
  --p-paper: #F2F2EF; --p-ink: #0C2A30; --p-muted: #4F666A; --p-dot: #0E5A66;
  --p-deep: #0C2A30; --p-deep-ink: #F2F2EF; --p-deep-muted: #AFC3C6; --p-deep-dot: #F2B8A6;

  --bg: var(--p-paper);
  --fg: var(--p-ink);
  --mu: var(--p-muted);
  --dt: var(--p-dot);
  --dp: var(--p-deep);
  --todo: #FFE58A;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --fade: 1.6s ease;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: color-mix(in srgb, var(--p-deep) 62%, #000);
    --fg: var(--p-deep-ink);
    --mu: var(--p-deep-muted);
    --dt: var(--p-deep-dot);
    --dp: color-mix(in srgb, var(--p-deep) 90%, #fff);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.125rem/1.6 var(--text);
}
body, .hero, .deep, .dot, a, .lede, .legal, .contacts dt, .hero-foot, .bar {
  transition: background-color var(--fade), color var(--fade), border-color var(--fade), text-decoration-color var(--fade);
}
a {
  color: inherit;
  text-decoration-color: var(--dt);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.dot { color: var(--dt); }
.deep .dot { color: var(--p-deep-dot); }
.todo { background: var(--todo); color: #3A2F00; padding: 0 0.25em; border-radius: 3px; }

.inner {
  max-width: 64rem;
  margin: 0 auto;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

/* Apertura */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--p-hero);
  color: var(--p-hero-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: max(2rem, env(safe-area-inset-top));
  padding-bottom: 2.5rem;
}
.hero .inner { width: 100%; }
.wordmark {
  margin: 0;
  font: 800 clamp(6rem, 26vw, 19rem)/0.82 var(--cond);
  letter-spacing: -0.02em;
}
.wordmark .dot {
  font: inherit;
  letter-spacing: inherit;
  color: var(--p-hero-dot);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.wordmark small {
  display: block;
  margin-top: 1rem;
  font: 600 clamp(1.25rem, 3vw, 1.75rem)/1 var(--cond);
  letter-spacing: 0.02em;
}
.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--p-hero-ink) 30%, transparent);
  font-size: 1.0625rem;
}
.hero-foot p { margin: 0; max-width: 26rem; }
.scroll { color: var(--p-hero-dot); flex-shrink: 0; transition: color var(--fade); }

/* Capitoli */
.chapter { padding: clamp(5rem, 14vh, 9rem) 0; }
.chapter.deep { background: var(--dp); color: var(--p-deep-ink); }
.chapter.deep .lede { color: var(--p-deep-muted); }
.chapter-title {
  margin: 0 0 2rem;
  font: 800 clamp(3rem, 10vw, 7.5rem)/0.88 var(--cond);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.lede {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(1.1875rem, 2.2vw, 1.4375rem);
  line-height: 1.5;
  color: var(--mu);
}
.lede + .lede { margin-top: 1rem; }

/* Contatti */
.contacts { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 2rem; margin: 0; font-size: 1.1875rem; }
.contacts dt { font: 600 1rem/1.9 var(--cond); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mu); }
.contacts dd { margin: 0; }

/* Dati societari */
.legal {
  padding: 2rem 0 max(2.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--mu);
}
.legal p { margin: 0; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal nav { margin-top: 1rem; }

/* Pagina privacy */
.bar { padding-top: max(1.5rem, env(safe-area-inset-top)); padding-bottom: 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.bar a { font: 800 2rem/1 var(--cond); text-decoration: none; letter-spacing: -0.01em; }
.doc { max-width: 42rem; padding-top: 3rem; padding-bottom: 4rem; }
.doc h1 { margin: 0 0 1.5rem; font: 800 clamp(2.5rem, 8vw, 4.5rem)/0.92 var(--cond); text-transform: uppercase; }
.doc h2 { margin: 2.25rem 0 0.5rem; font: 600 1.375rem/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.03em; }
.doc p, .doc li { font-size: 1.0625rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.5rem; }
.doc .updated { color: var(--mu); font-size: 0.9375rem; margin-top: 2.5rem; }

@media (max-width: 40rem) {
  .hero-foot { font-size: 1rem; }
  .contacts { grid-template-columns: 1fr; gap: 0; }
  .contacts dd { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0s; }
}

/* Comparsa allo scorrimento: il titolo si stampa come un'etichetta, il testo segue */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chapter-title {
      animation: print linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 30%;
    }
  }
}
@keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }