/* =========================================================================
   TREMILA S.r.l. — Maglificio dal 1945
   Design system · Monteforte d'Alpone (VR)
   Tema chiaro: fondo panna, accenti pastello presi dai filati
   ========================================================================= */

:root{
  /* Inchiostro (solo testo) e carta */
  --ink:        #2B2724;
  --paper:      #FBF8F2;
  --paper-2:    #F3EEE4;
  --paper-3:    #E6DFD2;
  --white:      #FFFFFF;

  /* Pastelli — per ogni tono: fondo tenue, campitura, segno, testo */
  --rose-soft:#FCF0EE;   --rose:#F6D9D5;   --rose-mid:#E5A8A3;   --rose-ink:#8C3F46;
  --peach-soft:#FDF2E8;  --peach:#F9E0CC;  --peach-mid:#EBB48C;  --peach-ink:#8F4E2A;
  --butter-soft:#FCF6E1; --butter:#F7EBC4; --butter-mid:#E3C977; --butter-ink:#6F5812;
  --sage-soft:#EEF5EC;   --sage:#D9E8D6;   --sage-mid:#A3C4A0;   --sage-ink:#3F5F45;
  --sky-soft:#EBF3F8;    --sky:#D3E5F0;    --sky-mid:#9CC0D8;    --sky-ink:#2F5876;
  --lilac-soft:#F2EEF8;  --lilac:#E1DAF0;  --lilac-mid:#B9A9DC;  --lilac-ink:#5B4884;

  /* Tono corrente (lo cambiano le classi .t-*) */
  --acc-soft: var(--rose-soft);
  --acc:      var(--rose);
  --acc-mid:  var(--rose-mid);
  --acc-ink:  var(--rose-ink);

  --line:       color-mix(in oklab, var(--ink) 14%, transparent);
  --line-soft:  color-mix(in oklab, var(--ink) 8%, transparent);

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale */
  --s-1:  clamp(.72rem, .70rem + .1vw, .78rem);
  --s0:   clamp(.88rem, .84rem + .2vw, .98rem);
  --s1:   clamp(1.02rem, .95rem + .35vw, 1.2rem);
  --s2:   clamp(1.3rem, 1.1rem + .9vw, 1.9rem);
  --s3:   clamp(1.8rem, 1.3rem + 2.2vw, 3.2rem);
  --s4:   clamp(2.4rem, 1.4rem + 4.6vw, 5.6rem);
  --s5:   clamp(3.1rem, 1.2rem + 8.4vw, 9.5rem);
  --s6:   clamp(3.6rem, .6rem + 12vw, 14rem);

  /* Space */
  --gut:   clamp(1.1rem, .6rem + 2.2vw, 2.6rem);
  --bay:   clamp(3.6rem, 2rem + 7vw, 9rem);
  --maxw:  84rem;
  --rad:   clamp(.7rem, .5rem + .8vw, 1.3rem);

  /* Motion */
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-in-out: cubic-bezier(.65,.02,.2,1);
  --e-back: cubic-bezier(.34,1.3,.5,1);

  color-scheme: light;
}

.t-rose  { --acc-soft:var(--rose-soft);   --acc:var(--rose);   --acc-mid:var(--rose-mid);   --acc-ink:var(--rose-ink); }
.t-peach { --acc-soft:var(--peach-soft);  --acc:var(--peach);  --acc-mid:var(--peach-mid);  --acc-ink:var(--peach-ink); }
.t-butter{ --acc-soft:var(--butter-soft); --acc:var(--butter); --acc-mid:var(--butter-mid); --acc-ink:var(--butter-ink); }
.t-sage  { --acc-soft:var(--sage-soft);   --acc:var(--sage);   --acc-mid:var(--sage-mid);   --acc-ink:var(--sage-ink); }
.t-sky   { --acc-soft:var(--sky-soft);    --acc:var(--sky);    --acc-mid:var(--sky-mid);    --acc-ink:var(--sky-ink); }
.t-lilac { --acc-soft:var(--lilac-soft);  --acc:var(--lilac);  --acc-mid:var(--lilac-mid);  --acc-ink:var(--lilac-ink); }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:var(--s0);
  font-weight:400;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,video,canvas{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
[hidden]{ display:none !important; }
::selection{ background:var(--acc); color:var(--ink); }

h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ---------- Focus ---------- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--acc-ink);
  outline-offset:3px;
  border-radius:2px;
}
.skip{
  position:absolute; left:.6rem; top:-4rem; z-index:9999;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; border-radius:.4rem;
  font:500 var(--s0)/1 var(--f-mono); letter-spacing:.02em;
  transition:top .22s var(--e-out);
}
.skip:focus{ top:.6rem; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:110rem; margin-inline:auto; padding-inline:var(--gut); }
.bay{ padding-block:var(--bay); }
.grid{ display:grid; gap:var(--gut); grid-template-columns:repeat(12,1fr); }
@media (max-width:860px){
  .grid{ grid-template-columns:repeat(6,1fr); }
  .grid > *{ grid-column:1 / -1 !important; }
}

/* ---------- Type utilities ---------- */
.display{
  font-family:var(--f-display);
  font-weight:600;
  font-stretch:96%;
  line-height:.92;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.h-xxl{ font-size:var(--s6); }
.h-xl { font-size:var(--s5); }
.h-l  { font-size:var(--s4); }
.h-m  { font-size:var(--s3); }
.h-s  { font-size:var(--s2); }

.serif{ font-family:var(--f-serif); font-weight:400; letter-spacing:-.01em; }
.serif-i{ font-family:var(--f-serif); font-style:italic; font-weight:400; }

.mono{
  font-family:var(--f-mono); font-size:var(--s-1);
  letter-spacing:.12em; text-transform:uppercase; font-weight:500;
}
.lede{ font-size:var(--s1); line-height:1.55; max-width:52ch; }
.prose p{ font-size:var(--s1); line-height:1.7; max-width:62ch; }
.prose p + p{ margin-top:1.1em; }
.prose strong{ font-weight:600; color:var(--acc-ink); }
.muted{ color:color-mix(in oklab, var(--ink) 66%, transparent); }
.center{ text-align:center; }

/* Eyebrow with rule */
.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--f-mono); font-size:var(--s-1);
  letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:color-mix(in oklab, var(--ink) 68%, transparent);
}
.eyebrow::before{
  content:""; width:clamp(1.6rem,4vw,3.4rem); height:2px; border-radius:2px;
  background:var(--acc-mid); flex:none;
}

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:120;
  padding:clamp(.8rem,1.6vw,1.4rem) 0;
  transition:transform .5s var(--e-out), background-color .4s linear, backdrop-filter .4s linear;
  padding-top:calc(clamp(.8rem,1.6vw,1.4rem) + env(safe-area-inset-top, 0px));
}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; max-width:110rem; margin-inline:auto; padding-inline:var(--gut);
}
.hdr.is-hidden{ transform:translate3d(0,-120%,0); }
.hdr.is-solid{
  background:color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-soft);
}

.brand{ display:inline-flex; align-items:center; gap:1.25rem; flex:none; }
.brand__mark{
  width:clamp(6.4rem,11vw,9.4rem); aspect-ratio:929.666/262.833;
  background-color:currentColor; display:block;
  -webkit-mask:url("../img/logo-tremila.svg") no-repeat center/contain;
  mask:url("../img/logo-tremila.svg") no-repeat center/contain;
}
.brand__tag{
  font-family:var(--f-mono); font-size:.58rem; line-height:1.5; letter-spacing:.18em;
  text-transform:uppercase; opacity:.6; flex:none; padding-left:.85rem;
  border-left:1px solid currentColor;
}
@media (max-width:1360px){ .brand__tag{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.nav__links{ display:flex; gap:clamp(.9rem,1.7vw,1.9rem); align-items:center; }
@media (max-width:1080px){ .nav__links{ display:none; } }
.nav__link{
  position:relative; font-size:var(--s0); font-weight:500; letter-spacing:-.005em;
  padding:.3rem 0; white-space:nowrap;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px;
  background:var(--acc-mid); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--e-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__link[aria-current="page"]{ color:var(--acc-ink); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

.burger{
  width:2.9rem; height:2.9rem; border-radius:50%;
  display:grid; place-items:center; background:var(--acc);
  transition:background-color .3s, transform .3s var(--e-out);
}
.burger:hover{ transform:scale(1.06); background:var(--acc-mid); }
.burger span{ display:block; width:1.05rem; height:1.5px; background:currentColor; transition:transform .4s var(--e-out), opacity .3s; }
.burger span + span{ margin-top:.34rem; }
@media (min-width:1081px){ .burger{ display:none; } }
body.menu-open .burger span:nth-child(1){ transform:translateY(.434rem) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-.434rem) rotate(-45deg); }

/* CTA pill — bottoni pastello */
.pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.68rem 1.25rem; border-radius:100px;
  background:var(--acc); color:var(--ink);
  border:1px solid color-mix(in oklab, var(--acc-mid) 55%, transparent);
  font-size:var(--s0); font-weight:500;
  position:relative; overflow:hidden; isolation:isolate;
  transition:border-color .4s;
}
.pill::before{
  content:""; position:absolute; inset:0; background:var(--acc-mid); z-index:-1;
  transform:translate3d(0,101%,0); transition:transform .5s var(--e-out);
}
.pill:hover{ border-color:var(--acc-mid); }
.pill:hover::before{ transform:translate3d(0,0,0); }
.pill--solid{ background:var(--acc-mid); border-color:var(--acc-mid); }
.pill--solid::before{ background:var(--acc); }
@media (max-width:560px){ .nav .pill{ display:none; } }

/* ---------- Mobile drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:115; background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(6rem + env(safe-area-inset-top,0px)) var(--gut) calc(3rem + env(safe-area-inset-bottom,0px));
  clip-path:inset(0 0 100% 0); pointer-events:none; visibility:hidden;
  transition:clip-path .8s var(--e-in-out), visibility 0s linear .8s;
  overflow-y:auto;
}
body.menu-open .drawer{
  clip-path:inset(0 0 0 0); pointer-events:auto; visibility:visible;
  transition:clip-path .8s var(--e-in-out), visibility 0s linear 0s;
}
.drawer__list li{ overflow:hidden; }
.drawer__list a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--f-display); font-weight:600; font-stretch:96%;
  font-size:clamp(1.7rem,7.6vw,3.2rem); line-height:1.12; letter-spacing:-.035em;
  padding-block:.18em;
  transform:translate3d(0,110%,0); transition:transform .7s var(--e-out), color .3s;
}
body.menu-open .drawer__list a{ transform:translate3d(0,0,0); }
.drawer__list li:nth-child(1) a{ transition-delay:.10s }
.drawer__list li:nth-child(2) a{ transition-delay:.16s }
.drawer__list li:nth-child(3) a{ transition-delay:.22s }
.drawer__list li:nth-child(4) a{ transition-delay:.28s }
.drawer__list li:nth-child(5) a{ transition-delay:.34s }
.drawer__list li:nth-child(6) a{ transition-delay:.40s }
.drawer__list li:nth-child(1) a:hover{ color:var(--rose-ink); }
.drawer__list li:nth-child(2) a:hover{ color:var(--peach-ink); }
.drawer__list li:nth-child(3) a:hover{ color:var(--sky-ink); }
.drawer__list li:nth-child(4) a:hover{ color:var(--lilac-ink); }
.drawer__list li:nth-child(5) a:hover{ color:var(--sage-ink); }
.drawer__list li:nth-child(6) a:hover{ color:var(--butter-ink); }
.drawer__list .n{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; opacity:.5; flex:none; }
.drawer__foot{
  margin-top:auto; padding-top:2.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; font-size:var(--s0); opacity:.8;
}

/* ---------- Reveal primitives ---------- */
.js .rv{ opacity:0; transform:translate3d(0,26px,0); transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
.js .rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s }
.rv-d3{ transition-delay:.24s } .rv-d4{ transition-delay:.32s }

.mask{ display:block; overflow:hidden; }
.mask > *{ display:block; }
.js .mask > *{ transform:translate3d(0,105%,0); transition:transform 1s var(--e-out); }
.js .mask.in > *{ transform:translate3d(0,0,0); }

.lines span{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.lines span > i{ display:block; font-style:inherit; }
.js .lines span > i{ transform:translate3d(0,112%,0); transition:transform .95s var(--e-out); }
.js .lines.in span > i{ transform:translate3d(0,0,0); }
.lines.in span:nth-child(2) > i{ transition-delay:.07s }
.lines.in span:nth-child(3) > i{ transition-delay:.14s }
.lines.in span:nth-child(4) > i{ transition-delay:.21s }

@media (prefers-reduced-motion: reduce){
  .rv,.mask > *,.lines span > i,.drawer__list a{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Figures ---------- */
.fig{ position:relative; overflow:hidden; background:var(--paper-2); border-radius:var(--rad); }
.fig img{ width:100%; height:100%; object-fit:cover; }
.fig--r43{ aspect-ratio:4/3 } .fig--r11{ aspect-ratio:1/1 }
.fig--r34{ aspect-ratio:3/4 } .fig--r169{ aspect-ratio:16/9 }
.fig--r23{ aspect-ratio:2/3 } .fig--r54{ aspect-ratio:5/4 }
.fig--r45{ aspect-ratio:4/5 }
/* foto intera, nelle sue proporzioni */
.fig--nat{ aspect-ratio:var(--ar, 2/3); }
@media (max-width:640px){
  .fig--r23{ aspect-ratio:3/4 } .fig--r34{ aspect-ratio:4/5 }
  .fig--r169{ aspect-ratio:4/3 }
}
.fig--zoom img{ transition:transform 1.4s var(--e-out); }
a:hover .fig--zoom img, .fig--zoom:hover img{ transform:scale(1.045); }

/* Curtain reveal for images */
.js .fig--curtain::after{
  content:""; position:absolute; inset:0; background:var(--curtain, var(--paper));
  transform:scaleY(1); transform-origin:50% 0;
  transition:transform 1.15s var(--e-in-out);
}
.js .fig--curtain.in::after{ transform:scaleY(0); }
.js .fig--curtain img{ transform:scale(1.14); transition:transform 1.5s var(--e-in-out); }
/* a fine animazione nessuna trasformazione: la foto resta nitida, senza ricampionamenti */
.js .fig--curtain.in img{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .fig--curtain::after{ display:none } .fig--curtain img{ transform:none !important }
}
.cap{
  margin-top:.75rem; display:flex; gap:.6rem; align-items:baseline;
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.09em;
  text-transform:uppercase; color:color-mix(in oklab,var(--ink) 62%, transparent);
}
.cap b{ color:var(--acc-ink); font-weight:500; }

/* ---------- Copertina delle pagine interne: foto 16:9 e titolo ---------- */
.phero{
  position:relative; background:var(--paper);
  padding-top:calc(5.9rem + env(safe-area-inset-top,0px));
  padding-bottom:clamp(1.6rem,4vw,3rem);
}
.phero__in{ position:relative; }
.phero__bg{
  position:relative; overflow:hidden; width:100%;
  aspect-ratio:16/9; max-height:calc(100svh - 7.4rem);
  border-radius:var(--rad); background:var(--paper-2);
}
.phero__bg img{ width:100%; height:100%; object-fit:cover; }
.js .phero__bg img{ transform:scale(1.05); }
.phero.in .phero__bg img{ transform:none; transition:transform 2.2s var(--e-out); }
/* il titolo sta in un riquadro panna che "morde" l'angolo della foto */
.phero__txt{
  position:absolute; left:var(--gut); bottom:0; z-index:2;
  max-width:min(48rem,72%);
  background:var(--paper);
  padding:clamp(1.2rem,2.4vw,2.2rem) clamp(1.6rem,3.2vw,3rem) 0 0;
  border-top-right-radius:var(--rad);
}
.phero__txt::before{
  content:""; display:block; width:clamp(2.4rem,5vw,4.4rem); height:4px; border-radius:4px;
  background:var(--acc-mid); margin-bottom:1.1rem;
}
.phero h1{ font-size:clamp(2.6rem, 1rem + 5.2vw, 6.2rem); margin-top:.6rem; }
.phero__sub{ margin-top:1.2rem; max-width:44ch; color:color-mix(in oklab, var(--ink) 74%, transparent); font-size:var(--s1); }
@media (max-width:900px){
  .phero{ padding-top:calc(5.2rem + env(safe-area-inset-top,0px)); }
  .phero__bg{ aspect-ratio:4/3; max-height:none; }
  .phero__txt{ position:static; max-width:none; padding:1.4rem 0 0; }
}
.crumb{
  display:flex; gap:.55rem; align-items:center; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.14em;
  text-transform:uppercase; color:color-mix(in oklab, var(--ink) 60%, transparent);
}
.crumb a:hover{ color:var(--acc-ink); }

/* ---------- Fasce pastello (al posto delle sezioni scure) ---------- */
.band{ background:var(--acc-soft); --curtain:var(--acc-soft); }

/* ---------- Marquee ---------- */
.marq{ overflow:hidden; border-block:1px solid var(--line); padding-block:clamp(.9rem,2vw,1.5rem); background:var(--white); }
.marq__t{ display:flex; width:max-content; gap:0; will-change:transform; animation:marq 46s linear infinite; }
.marq__t span{
  display:inline-flex; align-items:center; gap:clamp(1.4rem,3vw,2.8rem);
  padding-inline:clamp(.7rem,1.6vw,1.4rem);
  font-family:var(--f-display); font-weight:600; font-stretch:92%;
  font-size:clamp(1.15rem,3.2vw,2.5rem); letter-spacing:-.02em; white-space:nowrap;
}
.marq__t span::after{ content:""; width:.42em; height:.42em; border-radius:50%; background:var(--rose-mid); }
.marq__t span:nth-child(6n+2)::after{ background:var(--peach-mid); }
.marq__t span:nth-child(6n+3)::after{ background:var(--butter-mid); }
.marq__t span:nth-child(6n+4)::after{ background:var(--sage-mid); }
.marq__t span:nth-child(6n+5)::after{ background:var(--sky-mid); }
.marq__t span:nth-child(6n+6)::after{ background:var(--lilac-mid); }
.marq:hover .marq__t{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){ .marq__t{ animation:none; } }

/* ---------- Footer ---------- */
.ftr{ background:var(--paper-2); color:var(--ink); padding-top:clamp(3.4rem,7vw,6.5rem); }
.ftr a:not(.pill):hover{ color:var(--acc-ink); }
.ftr__grid{ display:grid; gap:clamp(2rem,4vw,3.4rem); grid-template-columns:repeat(12,1fr); }
.ftr__brand{ grid-column:span 5 } .ftr__nav{ grid-column:span 3 } .ftr__contact{ grid-column:span 4 }
@media (max-width:860px){
  .ftr__brand,.ftr__nav,.ftr__contact{ grid-column:span 12 }
}
.ftr__mark{ display:block;
  width:min(17rem,64vw); aspect-ratio:929.666/262.833; background-color:var(--ink);
  -webkit-mask:url("../img/logo-tremila.svg") no-repeat center/contain;
  mask:url("../img/logo-tremila.svg") no-repeat center/contain;
}
.ftr .lede{ color:color-mix(in oklab, var(--ink) 72%, transparent); }
.ftr address{ color:color-mix(in oklab, var(--ink) 82%, transparent); }
.ftr h2{ font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.18em; text-transform:uppercase; color:color-mix(in oklab, var(--ink) 60%, transparent); font-weight:500; margin-bottom:1.1rem; }
.ftr__nav li + li{ margin-top:.55rem; }
.ftr__legal{
  margin-top:clamp(2.6rem,6vw,5rem); border-top:1px solid var(--line);
  padding-block:1.6rem calc(1.6rem + env(safe-area-inset-bottom,0px));
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; justify-content:space-between;
  font-size:var(--s-1); font-family:var(--f-mono); letter-spacing:.06em;
  color:color-mix(in oklab, var(--ink) 62%, transparent);
}
.ftr__big{
  font-family:var(--f-display); font-weight:600; font-stretch:100%;
  font-size:clamp(3.4rem,17vw,15rem); line-height:.8; letter-spacing:-.05em;
  user-select:none; margin-top:clamp(2rem,5vw,4rem);
  text-align:center; overflow:hidden;
  background:linear-gradient(90deg, var(--rose) 0%, var(--peach) 20%, var(--butter) 40%, var(--sage) 60%, var(--sky) 80%, var(--lilac) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Cookie bar ---------- */
.cookie{
  position:fixed; z-index:200; left:var(--gut); right:var(--gut);
  bottom:calc(var(--gut) + env(safe-area-inset-bottom,0px));
  max-width:34rem; background:var(--white); color:var(--ink);
  border:1px solid var(--line-soft);
  padding:1.3rem 1.4rem; border-radius:.9rem;
  box-shadow:0 24px 60px -28px rgba(43,39,36,.35);
  display:none; gap:1rem; flex-direction:column;
  transform:translate3d(0,20px,0); opacity:0;
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
}
.cookie.show{ display:flex; }
.cookie.in{ opacity:1; transform:none; }
.cookie p{ font-size:var(--s0); color:color-mix(in oklab, var(--ink) 80%, transparent); }
.cookie a{ text-decoration:underline; text-underline-offset:3px; }
.cookie__row{ display:flex; gap:.7rem; align-items:center; }

/* ---------- Progress ---------- */
.prog{
  position:fixed; top:0; left:0; height:3px; z-index:130; width:0; transform-origin:0 50%;
  background:linear-gradient(90deg, var(--rose-mid), var(--peach-mid), var(--butter-mid), var(--sage-mid), var(--sky-mid), var(--lilac-mid));
}

/* =========================================================================
   HOME — la rocca che si svolge con lo scroll
   ========================================================================= */
.stage{ position:relative; background:var(--paper); color:var(--ink); }
.stage__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage__scroll{ height:var(--stage-h, 430svh); }
@media (max-width:760px){ .stage__scroll{ height:var(--stage-h, 380svh); } }

/* velature chiare: tengono leggibili menù e testi sopra la scena */
.stage__pin::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(90deg, rgba(251,248,242,.78) 0%, rgba(251,248,242,.38) 30%, rgba(251,248,242,0) 56%),
    linear-gradient(180deg, rgba(251,248,242,.85) 0%, rgba(251,248,242,0) 20%,
                    rgba(251,248,242,0) 66%, rgba(251,248,242,.9) 100%);
}
@media (max-width:760px){
  .stage__pin::after{
    background:
      linear-gradient(180deg, rgba(251,248,242,.88) 0%, rgba(251,248,242,.1) 24%,
                      rgba(251,248,242,.2) 52%, rgba(251,248,242,.94) 86%);
  }
}
.grain{
  position:absolute; inset:-120%; z-index:4; pointer-events:none; opacity:.035;
  background-image:var(--grain); background-size:180px 180px;
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}  20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,4%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* Overlay copy layer */
.stage__ui{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(6.5rem + env(safe-area-inset-top,0px)) var(--gut)
          calc(1.8rem + env(safe-area-inset-bottom,0px));
  width:100%; max-width:110rem; margin-inline:auto; left:50%; transform:translateX(-50%);
}
.hero__mid{ padding-bottom:clamp(2rem,5vh,4rem); transition:opacity .35s linear; }
.stage__ui a,.stage__ui button{ pointer-events:auto; }

.hero__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
@media (max-width:560px){
  .hero__top .eyebrow{ font-size:.6rem; letter-spacing:.12em; }
  .hero__top .eyebrow::before{ width:1.2rem; }
}
.hero__mid{ display:grid; gap:1.1rem; justify-items:start; max-width:min(46rem,92%); }
.hero h1{
  font-size:clamp(2.6rem, 9.2vw, 8.4rem); line-height:.88; letter-spacing:-.045em;
  font-weight:600; font-stretch:98%; text-transform:uppercase;
  max-width:14ch; text-shadow:0 0 34px rgba(251,248,242,.75);
}
.hero h1 .thin{ font-family:var(--f-serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.02em; color:var(--acc-ink); }
.hero__sub{ font-size:var(--s1); max-width:34ch; color:color-mix(in oklab, var(--ink) 82%, transparent); text-shadow:0 0 18px rgba(251,248,242,.9); }

.hero__bot{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.cue{ display:flex; flex-direction:column; align-items:center; gap:.5rem; transition:opacity .35s linear; }
.cue__bar{ width:2px; height:3.2rem; border-radius:2px; background:color-mix(in oklab, var(--ink) 16%, transparent); position:relative; overflow:hidden; }
.cue__bar::after{
  content:""; position:absolute; inset:0; background:var(--acc-ink);
  animation:cueRun 2.1s var(--e-in-out) infinite;
}
@keyframes cueRun{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (prefers-reduced-motion: reduce){ .cue__bar::after{ animation:none } }

/* Chapter readout — the "machine console" */
.chapters{ position:relative; display:grid; gap:.4rem; }
.chapter{
  display:flex; align-items:baseline; gap:.7rem;
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.14em;
  text-transform:uppercase; color:color-mix(in oklab, var(--ink) 42%, transparent);
  transition:color .5s var(--e-out), opacity .5s;
}
.chapter .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; flex:none; }
.chapter.on{ color:var(--ink); }
.chapter.on .dot{ background:var(--acc-mid); opacity:1; box-shadow:0 0 0 4px var(--acc); }
@media (max-width:760px){ .chapters{ display:none; } }

.readout{
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.1em;
  color:color-mix(in oklab, var(--ink) 60%, transparent); text-align:right; line-height:1.9;
}
.readout b{ color:var(--acc-ink); font-weight:500; font-variant-numeric:tabular-nums; }
@media (max-width:620px){ .readout{ display:none } }

/* Caption that changes with the scroll narrative */
.narr{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(5.5rem,13vh,8rem); z-index:6;
  width:100%; max-width:110rem; padding-inline:var(--gut);
  display:grid; pointer-events:none;
}
.narr__item{
  grid-area:1/1; max-width:min(28rem,78vw); align-self:end;
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .55s var(--e-out), transform .55s var(--e-out);
}
.narr__item.on{ opacity:1; transform:none; }
.narr__k{ font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.18em; text-transform:uppercase; color:var(--acc-ink); }
.narr__t{ font-size:var(--s2); line-height:1.18; letter-spacing:-.02em; font-weight:500; margin-top:.5rem; text-shadow:0 0 20px rgba(251,248,242,.9); }
.narr__d{ font-size:var(--s0); color:color-mix(in oklab, var(--ink) 76%, transparent); margin-top:.5rem; max-width:34ch; }
@media (max-width:760px){ .narr{ bottom:clamp(5rem,12vh,7rem); } }

/* Loader */
.loader{
  position:fixed; inset:0; z-index:400; background:var(--paper); color:var(--ink);
  display:grid; place-items:center; transition:opacity .8s var(--e-out), visibility .8s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__in{ display:grid; gap:1.3rem; justify-items:center; width:min(22rem,72vw); }
.loader__bar{ width:100%; height:2px; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--acc-mid); transition:width .35s var(--e-out); }
.loader__n{ font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.2em; color:color-mix(in oklab, var(--ink) 60%, transparent); }
.loader__logo{
  width:min(15rem,52vw); aspect-ratio:929.666/262.833; background-color:var(--ink);
  -webkit-mask:url("../img/logo-tremila.svg") no-repeat center/contain;
  mask:url("../img/logo-tremila.svg") no-repeat center/contain;
  animation:logoIn 1.4s var(--e-out) both;
}
@keyframes logoIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* =========================================================================
   Content compositions
   ========================================================================= */
.intro-quote{
  font-family:var(--f-serif); font-size:var(--s4); line-height:1.08;
  letter-spacing:-.02em; text-wrap:balance; max-width:22ch;
}
.intro-quote em{ color:var(--acc-ink); font-style:italic; }

/* Feature rows */
.frow{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); align-items:center; }
.frow + .frow{ margin-top:clamp(3rem,8vw,7rem); }
.frow__media{ grid-column:1 / span 7; }
.frow__body{ grid-column:9 / span 4; }
.frow--flip .frow__media{ grid-column:6 / span 7; order:2; }
.frow--flip .frow__body{ grid-column:1 / span 4; order:1; }
@media (max-width:900px){
  .frow__media,.frow--flip .frow__media,.frow__body,.frow--flip .frow__body{ grid-column:1 / -1; order:initial; }
}

/* Gauge (finezze) */
.gauge{ display:grid; gap:0; border-top:1px solid var(--line); }
.gauge__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1rem,3vw,2.4rem); padding-block:clamp(1rem,2.4vw,1.7rem);
  border-bottom:1px solid var(--line); position:relative;
  transition:padding-left .5s var(--e-out), color .4s;
}
.gauge__row:hover{ padding-left:clamp(.5rem,1.6vw,1.4rem); }
.gauge__n{
  font-family:var(--f-display); font-weight:600; font-stretch:100%;
  font-size:clamp(2.1rem,6.4vw,4.4rem); line-height:.9; letter-spacing:-.04em;
  min-width:2.6ch; transition:color .4s;
}
.gauge__meta{ font-size:var(--s0); color:color-mix(in oklab, var(--ink) 68%, transparent); }
.gauge__bar{ height:8px; border-radius:8px; background:var(--white); position:relative; overflow:hidden; min-width:3rem; }
.gauge__bar i{ position:absolute; inset:0 auto 0 0; width:100%; border-radius:8px; background:var(--rose-mid); transform:scaleX(var(--v,.4)); transform-origin:0 50%; transition:transform 1.1s var(--e-out); }
.gauge__row:nth-child(2) .gauge__bar i{ background:var(--peach-mid); }
.gauge__row:nth-child(3) .gauge__bar i{ background:var(--butter-mid); }
.gauge__row:nth-child(4) .gauge__bar i{ background:var(--sage-mid); }
.gauge__row:nth-child(5) .gauge__bar i{ background:var(--lilac-mid); }
.gauge__row:nth-child(1):hover .gauge__n{ color:var(--rose-ink); }
.gauge__row:nth-child(2):hover .gauge__n{ color:var(--peach-ink); }
.gauge__row:nth-child(3):hover .gauge__n{ color:var(--butter-ink); }
.gauge__row:nth-child(4):hover .gauge__n{ color:var(--sage-ink); }
.gauge__row:nth-child(5):hover .gauge__n{ color:var(--lilac-ink); }
@media (max-width:640px){
  .gauge__row{ grid-template-columns:auto 1fr; }
  .gauge__bar{ grid-column:1 / -1; }
}

/* Card grid */
.cards{ display:grid; gap:clamp(1.4rem,3vw,2.4rem); grid-template-columns:repeat(3,1fr); align-items:start; }
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }
.card{ display:block; position:relative; }
.card h3{ font-size:var(--s2); line-height:1.1; letter-spacing:-.025em; margin-top:.9rem; font-weight:600; }
.card p{ font-size:var(--s0); color:color-mix(in oklab,var(--ink) 68%, transparent); margin-top:.5rem; max-width:34ch; }
.card__n{
  display:inline-block; margin-top:1rem; padding:.2rem .7rem; border-radius:100px;
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.18em;
  background:var(--rose); color:var(--rose-ink);
}
.card:nth-child(3n+2) .card__n{ background:var(--sky); color:var(--sky-ink); }
.card:nth-child(3n+3) .card__n{ background:var(--sage); color:var(--sage-ink); }

/* Due foto intere affiancate, alla stessa altezza */
.duo{ display:flex; gap:clamp(1rem,2.4vw,2rem); align-items:flex-start; max-width:64rem; margin-inline:auto; }
.duo > *{ flex:calc(var(--ar, 1)) 1 0; min-width:0; }
@media (max-width:700px){ .duo{ flex-direction:column; } .duo > *{ flex:none; width:100%; } }

/* Timeline */
.tl{ position:relative; display:grid; gap:clamp(2.6rem,6vw,5rem); }
.tl__item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.6rem); align-items:start; }
.tl__year{
  font-family:var(--f-display); font-weight:600; font-stretch:100%;
  font-size:clamp(2rem,6vw,4.2rem); line-height:.9; letter-spacing:-.04em;
  position:relative; padding-right:clamp(1rem,2.4vw,2rem);
}
.tl__item:nth-child(1) .tl__year{ color:var(--rose-ink); }
.tl__item:nth-child(2) .tl__year{ color:var(--sky-ink); }
.tl__item:nth-child(3) .tl__year{ color:var(--sage-ink); }
.tl__body h3{ font-size:var(--s2); letter-spacing:-.025em; font-weight:600; line-height:1.12; }
.tl__body p{ margin-top:.8rem; font-size:var(--s1); line-height:1.65; max-width:56ch; }
@media (max-width:640px){ .tl__item{ grid-template-columns:1fr; gap:.8rem; } }

/* Contact block */
.cx{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); }
.cx__a{ grid-column:span 5 } .cx__b{ grid-column:span 7 }
@media (max-width:900px){ .cx__a,.cx__b{ grid-column:span 12 } }
.cx__line{ display:grid; gap:.25rem; padding-block:1.15rem; border-bottom:1px solid var(--line); }
.cx__k{ font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.cx__v{ font-size:var(--s2); letter-spacing:-.02em; font-weight:500; }
.cx__v a{ position:relative; }
.cx__v a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--acc-mid); transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--e-out); }
.cx__v a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.map{ position:relative; aspect-ratio:16/11; background:var(--acc); overflow:hidden; border-radius:var(--rad); }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:640px){ .map{ aspect-ratio:4/3 } }

/* Big CTA */
.cta{ display:block; padding-block:clamp(3rem,9vw,7rem); text-align:center; position:relative; }
.cta__t{
  font-family:var(--f-display); font-weight:600; font-stretch:96%;
  font-size:var(--s5); line-height:.92; letter-spacing:-.045em;
  transition:color .4s;
}
.cta:hover .cta__t{ color:var(--acc-ink); }
.cta__arrow{ display:inline-block; transition:transform .5s var(--e-back); }
.cta:hover .cta__arrow{ transform:translateX(.35em); }

/* Stitch glossary chips — una tinta pastello per ogni punto */
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .9rem; border-radius:100px; background:var(--rose); color:var(--ink);
  transition:background-color .35s, transform .35s var(--e-out);
}
.chip:nth-child(6n+2){ background:var(--peach); }
.chip:nth-child(6n+3){ background:var(--butter); }
.chip:nth-child(6n+4){ background:var(--sage); }
.chip:nth-child(6n+5){ background:var(--sky); }
.chip:nth-child(6n+6){ background:var(--lilac); }
.chip:hover{ transform:translateY(-2px); background:var(--rose-mid); }
.chip:nth-child(6n+2):hover{ background:var(--peach-mid); }
.chip:nth-child(6n+3):hover{ background:var(--butter-mid); }
.chip:nth-child(6n+4):hover{ background:var(--sage-mid); }
.chip:nth-child(6n+5):hover{ background:var(--sky-mid); }
.chip:nth-child(6n+6):hover{ background:var(--lilac-mid); }

/* Sticky side label */
.vlabel{
  position:sticky; top:40vh; writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.24em;
  text-transform:uppercase; opacity:.6; height:max-content;
}
@media (max-width:900px){ .vlabel{ display:none } }

/* Certificazioni */
.certs{ display:grid; gap:clamp(.9rem,2vw,1.5rem); grid-template-columns:repeat(6,1fr); }
.cert{
  grid-column:span 2; background:var(--acc); border-radius:var(--rad);
  padding:clamp(1.3rem,2.6vw,2rem); display:flex; flex-direction:column; gap:.7rem;
  transition:transform .5s var(--e-out);
}
.cert:nth-child(n+4){ grid-column:span 3; }
.cert:hover{ transform:translateY(-4px); }
.cert__k{
  font-family:var(--f-display); font-weight:600; font-stretch:96%;
  font-size:clamp(2.4rem,5vw,4rem); line-height:.9; letter-spacing:-.04em; color:var(--acc-ink);
}
.cert__n{ font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.1em; text-transform:uppercase; color:var(--acc-ink); }
.cert p{ font-size:var(--s0); line-height:1.6; color:color-mix(in oklab, var(--ink) 84%, transparent); max-width:44ch; }
@media (max-width:900px){ .cert, .cert:nth-child(n+4){ grid-column:span 3; } .cert:last-child{ grid-column:1 / -1; } }
@media (max-width:600px){ .cert, .cert:nth-child(n+4){ grid-column:1 / -1; } }

/* Prose page (privacy) */
.doc{ max-width:74ch; }
.doc h2{ font-size:var(--s2); letter-spacing:-.02em; line-height:1.15; margin-top:2.6em; font-weight:600; }
.doc h2:first-of-type{ margin-top:0; }
.doc h3{ font-size:var(--s1); font-weight:600; margin-top:1.8em; }
.doc p{ font-size:var(--s0); line-height:1.75; margin-top:1em; color:color-mix(in oklab,var(--ink) 82%, transparent); }
.doc a{ color:var(--acc-ink); text-decoration:underline; text-underline-offset:3px; word-break:break-word; }
.doc ul{ margin-top:1em; display:grid; gap:.5rem; }
.doc li{ font-size:var(--s0); line-height:1.7; padding-left:1.3rem; position:relative; color:color-mix(in oklab,var(--ink) 82%, transparent); }
.doc li::before{ content:""; position:absolute; left:0; top:.72em; width:.5rem; height:2px; border-radius:2px; background:var(--acc-mid); }

/* Utility */
.stack{ display:grid; gap:clamp(1rem,2.4vw,1.8rem); }
.stack-lg{ display:grid; gap:clamp(1.8rem,4vw,3.2rem); }
.row{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.between{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.2rem; flex-wrap:wrap; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Cursor / transitions / fallback ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:500; pointer-events:none;
  width:0; height:0;
}
.cursor i{
  position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%;
  background:var(--ink); transition:transform .35s var(--e-out), opacity .3s, background-color .3s;
}
.cursor.on i{ transform:scale(3.4); opacity:.45; background:var(--rose-mid); }
@media (pointer:coarse){ .cursor{ display:none } }

.page-shade{
  position:fixed; inset:0; z-index:300; background:var(--paper); pointer-events:none;
  opacity:0; transition:opacity .42s var(--e-out);
}
body.leaving .page-shade{ opacity:1; }

.stage.no-webgl .stage__pin{ background:var(--paper); }
.stage__fallback{ position:absolute; inset:0; }
.stage__fallback img{ width:100%; height:100%; object-fit:cover; opacity:.5; }

#scene{ opacity:0; transition:opacity 1.2s var(--e-out) .1s; }
#scene.ready{ opacity:1; }

/* no-JS safety */

.no-js .loader{ display:none; }

/* ---------- Mappa click-to-load ---------- */
.map__load{
  position:absolute; inset:0; width:100%; display:grid; place-content:center; gap:.5rem;
  text-align:center; padding:1.6rem; background:var(--acc); color:var(--ink);
  transition:background-color .4s;
}
.map__load:hover{ background:color-mix(in oklab, var(--acc) 70%, var(--acc-mid)); }
.map__pin{
  width:2.6rem; height:2.6rem; border-radius:50%; border:2px solid var(--acc-ink);
  margin:0 auto .4rem; display:grid; place-items:center; position:relative; background:var(--white);
}
.map__pin::after{ content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--acc-ink); }
.map__t{ font-size:var(--s1); font-weight:500; letter-spacing:-.01em; }
.map__d{ font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.06em; color:color-mix(in oklab, var(--ink) 70%, transparent); max-width:34ch; margin-inline:auto; line-height:1.6; }

/* immagini con trasparenza: nessun fondo, nessun ritaglio */
.fig--alpha{ background:none !important; border-radius:0; }
.fig--alpha img{ object-fit:contain; }
.js .fig--alpha.fig--curtain::after{ background:transparent; }

/* =========================================================================
   Campi di colore, vetro e il filo che attraversa le sezioni
   ========================================================================= */
.field{ position:relative; isolation:isolate; overflow:clip; }
.field > .grad{
  position:absolute; inset:-10% -5%; width:110%; height:120%;
  z-index:-1; display:block; pointer-events:auto;
  opacity:.6; filter:blur(28px) saturate(1.15);
}
@media (prefers-reduced-motion: reduce){ .field > .grad{ display:none; } }

/* vetro: schede che stanno sopra al campo di colore */
.glass{
  background:color-mix(in oklab, var(--white) 72%, transparent);
  border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  border-radius:var(--rad);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  padding:clamp(1.3rem,3vw,2.2rem);
}

/* il filo: continua dalla hero e lega le sezioni */
.thread{ position:relative; height:clamp(7rem,16vw,15rem); pointer-events:none; }
.thread svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.thread path{
  fill:none; stroke:var(--acc-mid); stroke-width:2.2;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset .12s linear;
}

/* carousel orizzontale con scroll-snap: foto reali, grandi */
.rail{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:max-content; align-items:start;
  gap:clamp(.9rem,2vw,1.6rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:var(--gut); margin-inline:calc(var(--gut) * -1);
  padding-bottom:.6rem;
  scrollbar-width:thin; scrollbar-color:var(--acc-mid) transparent;
}
.rail > *{ scroll-snap-align:center; width:min(78vw, 34rem); }
/* foto verticale intera: stessa altezza delle altre, meta' larghezza */
.rail > .is-tall{ width:calc(min(78vw, 34rem) * .5); }
.rail::-webkit-scrollbar{ height:5px; }
.rail::-webkit-scrollbar-thumb{ background:var(--acc-mid); border-radius:5px; }
.rail__hint{
  display:flex; align-items:center; gap:.5rem; margin-top:.9rem;
  font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.14em;
  text-transform:uppercase; opacity:.7;
}

/* parallasse leggera sulle immagini grandi */
.par{ overflow:clip; border-radius:var(--rad); }
@media (prefers-reduced-motion: reduce){ .par img{ transform:none !important; } }

/* =========================================================================
   Prima schermata: sequenza video guidata dallo scroll (assets/js/sequenza.js)
   Sezione alta piu' schermi, riquadro fisso a tutto schermo, testi chiari sopra.
   ========================================================================= */
.stage{ background:#8B7F72; color:#fff; }
.stage__scroll{ height:var(--stage-h, 520svh); }
@media (max-width:760px){ .stage__scroll{ height:var(--stage-h, 440svh); } }
.stage__pin{ background:#8B7F72; }
/* primo fotogramma subito visibile, mentre arrivano gli altri */
.stage__poster, .stage__poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
#scene{ opacity:0; transition:opacity .9s var(--e-out); }
.stage.is-ready #scene{ opacity:1; }
.stage__pin::after{
  background:
    linear-gradient(90deg, rgba(30,25,20,.36) 0%, rgba(30,25,20,0) 50%),
    linear-gradient(180deg, rgba(30,25,20,.44) 0%, rgba(30,25,20,0) 22%,
                    rgba(30,25,20,0) 58%, rgba(30,25,20,.58) 100%);
}
@media (max-width:760px){
  .stage__pin::after{
    background:linear-gradient(180deg, rgba(30,25,20,.5) 0%, rgba(30,25,20,0) 24%,
                               rgba(30,25,20,0) 52%, rgba(30,25,20,.62) 100%);
  }
}
.grain{ opacity:.05; }
.stage .eyebrow{ color:rgba(255,255,255,.86); }
.hero h1{ color:#fff; text-shadow:0 2px 28px rgba(20,16,12,.55), 0 1px 3px rgba(20,16,12,.4); }
.hero h1 .thin{ color:var(--acc); }
.hero__sub{ color:rgba(255,255,255,.94); text-shadow:0 1px 12px rgba(20,16,12,.75); }
.cue__bar{ background:rgba(255,255,255,.3); }
.cue__bar::after{ background:#fff; }
.cue .mono{ color:#fff; }
.chapter{ color:rgba(255,255,255,.6); text-shadow:0 1px 8px rgba(20,16,12,.5); }
.chapter.on{ color:#fff; }
.narr__k{ color:var(--acc); text-shadow:0 1px 8px rgba(20,16,12,.7); }
.narr__t{ color:#fff; text-shadow:0 1px 16px rgba(20,16,12,.8), 0 1px 3px rgba(20,16,12,.5); }
.narr__d{ color:rgba(255,255,255,.92); text-shadow:0 1px 10px rgba(20,16,12,.8); }
/* barra del caricamento dei fotogrammi */
.sc-loader{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:7; background:rgba(255,255,255,.2); transition:opacity .6s linear .3s; }
.sc-loader i{
  display:block; height:100%; transform:scaleX(0); transform-origin:0 50%; transition:transform .3s linear;
  background:linear-gradient(90deg, var(--rose-mid), var(--peach-mid), var(--butter-mid), var(--sage-mid), var(--sky-mid), var(--lilac-mid));
}
.stage.is-loaded .sc-loader{ opacity:0; }
/* dal 21/10/2026 l'attesa la racconta il caricamento iniziale col logo: la barra sotto il video non si mostra */
.stage .sc-loader{ display:none; }

/* ---------- Caricamento iniziale della Home: il filo che scrive il logo (caricamento.js) ---------- */
.carica{
  position:fixed; inset:0; z-index:500; background:var(--paper);
  display:grid; place-items:center;
  animation:caricaSalva .4s 9s forwards;   /* rete di sicurezza se lo script non parte */
}
.carica.is-via{ transform:translateY(-100%); transition:transform .95s var(--e-in-out); box-shadow:0 40px 80px rgba(30,25,20,.22); }
.carica__in{ display:grid; justify-items:center; width:min(38rem,72vw); }
.carica__logo{ width:100%; height:auto; display:block; overflow:visible; }
.carica__logo path{
  fill:var(--ink); fill-opacity:0; stroke:var(--rose-mid); stroke-width:2.6; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:1; stroke-opacity:0;
}
.carica__logo path:nth-child(6n+2){ stroke:var(--peach-mid); }
.carica__logo path:nth-child(6n+3){ stroke:var(--butter-mid); }
.carica__logo path:nth-child(6n+4){ stroke:var(--sage-mid); }
.carica__logo path:nth-child(6n+5){ stroke:var(--sky-mid); }
.carica__logo path:nth-child(6n+6){ stroke:var(--lilac-mid); }
.carica__filo{ width:100%; height:3px; margin-top:clamp(1.4rem,3vw,2.1rem); border-radius:2px; background:var(--line-soft); overflow:hidden; }
.carica__filo i{
  display:block; height:100%; clip-path:inset(0 100% 0 0);
  background:linear-gradient(90deg, var(--rose-mid), var(--peach-mid), var(--butter-mid), var(--sage-mid), var(--sky-mid), var(--lilac-mid));
}
.carica__n{ margin:1.1rem 0 0; font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.28em; text-transform:uppercase;
  color:color-mix(in oklab, var(--ink) 55%, transparent); }
.carica__n b{ font-weight:inherit; }
html.is-carica, html.is-carica body{ overflow:hidden; }
.no-js .carica{ display:none; }
@keyframes caricaSalva{ to{ opacity:0; visibility:hidden; } }
/* senza animazioni (o browser vecchio): resta il primo fotogramma, una sola schermata */
.stage.sc--static .stage__scroll{ height:100svh; }
.stage.sc--static #scene, .stage.sc--static .sc-loader{ display:none; }
/* intestazione chiara finche' sta sopra al video */
.hdr.on-dark:not(.is-solid){ color:#fff; }
.hdr.on-dark:not(.is-solid) .nav__link[aria-current="page"]{ color:#fff; }
.hdr.on-dark:not(.is-solid) .pill, .hdr.on-dark:not(.is-solid) .burger{ color:var(--ink); }