:root {
  --bg: #f4f3ee;
  --ink: #101412;
  --muted: #55595a;
  --acc: #13834f;
  --acc-text: #117a49; /* stesso verde, più scuro per i testi piccoli (contrasto AA) */
  --line: #d9d5cc;
  --stk-sage: #b9f0cf;
  --stk-sand: #ffe08a;
  --stk-peach: #f9c9b6;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --f-title: 'DM Sans', system-ui, sans-serif;
  --f-serif: 'DM Serif Display', Georgia, serif;
  --f-hand: 'Caveat', cursive;
  --f-body: 'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--acc); color: var(--bg); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.section { padding: 18vh 0 4vh; }

.frame-label { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--f-body); color: var(--acc-text); margin-bottom: 18px; }
.frame-label::before { content: '#'; font-weight: 600; opacity: .7; }

h2.title { font: 800 clamp(48px, 8vw, 120px)/.9 var(--f-title); letter-spacing: -.05em; }
h2.title em, .serif { font-family: var(--f-serif); font-weight: 400; font-style: italic; color: var(--acc); letter-spacing: -.01em; }
.lead { margin-top: 18px; color: var(--muted); max-width: 46ch; }
.note { font: 600 24px/1.1 var(--f-hand); color: var(--acc); }
.caps { font: 500 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* logo ufficiale di weBeetle, in verde */
.wb-logo { display: inline-block; height: .74em; aspect-ratio: 841.89 / 209.84; vertical-align: -0.02em; margin-left: .08em; background: var(--acc);
  -webkit-mask: url(../assets/img/webeetle.svg) no-repeat center / contain; mask: url(../assets/img/webeetle.svg) no-repeat center / contain; }

/* la barra in alto, quasi invisibile: "ES" e "Menu (+)". Il colore si inverte da solo sopra le parti scure. */
.tb { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; pointer-events: none;
  color: #fff; mix-blend-mode: difference; transition: transform .45s var(--ease), opacity .3s; }
.tb.hide { transform: translateY(-100%); opacity: 0; }
.tb > * { pointer-events: auto; }
.tb a { text-decoration: none; color: inherit; }
.tb-mono { font: 800 22px/1 var(--f-title); letter-spacing: -.06em; }
.tb-nav { display: flex; gap: 28px; font: 500 14.5px/1 var(--f-body); }
.tb-nav a { position: relative; padding: 4px 0; }
/* una riga che si disegna da sinistra, in hover e sulla sezione in cui ti trovi */
.tb-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.tb-nav a:hover::after, .tb-nav a[aria-current]::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .tb { padding: 16px; }
  .tb-nav { gap: 18px; font-size: 14px; }
}

/* entrata delle sezioni */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .section { padding: 12vh 0 4vh; }
}

@media (prefers-reduced-motion: reduce) {
  .foot-name i.hit, .foot-name i.next::after { animation: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  #frame.back { transition: none; }
  .sense.on path, .deck-vinyl, .st-dot { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}