/* TriPago | base: font self-hosted (1 file variabile), reset, tipografia, sezioni, reveal */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); }
/* fallback con metriche approssimate: limita il CLS al cambio font (da rimisurare con i file reali) */
@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.65 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font); font-weight: var(--w-display); margin: 0; letter-spacing: var(--ls-display); text-wrap: balance; word-spacing: .05em; }
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.032em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
em { font-style: normal; font-weight: inherit; color: var(--accent); }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.on-night :focus-visible, .sec--night :focus-visible, .site-footer :focus-visible { outline-color: var(--sky-night); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 16px; text-decoration: none; }
.skip:focus { top: 8px; }

/* sezioni: chiare e scure a pieno bordo */
.sec { padding-block: var(--sec-y); }
.sec--paper2 { background: var(--paper-2); }
.sec--night { background: var(--night); color: var(--on-night); }
.sec--night :is(h1, h2, h3) { color: var(--on-night); }
.sec--night em { color: var(--sky-night); }
.sec__head { max-width: 46rem; }
.sec__head h2 + p { margin-top: var(--sp-3); }
.sec__head { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.sec--night .lead { color: var(--on-night-2); }

/* reveal: miglioramento progressivo, il contenuto e' visibile senza JS */
.js .reveal { opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* stagger: i figli diretti di un contenitore .reveal--stagger entrano in sequenza (ritardo via --i, impostato da main.js) */
.js .reveal--stagger > * { opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: calc(min(var(--i, 0), 5) * 70ms); }
.js .reveal--stagger.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* niente movimento: restano le dissolvenze brevi di colore e opacita', cosi' lo stato continua a vedersi */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: 160ms !important; }
  .js .reveal, .js .reveal--stagger > * { transform: none; transition-delay: 0s; }
}