/* ============================================================
   WOOD RIVIERA — film di lavorazione (scroll-scrub)
   Scopato sotto #wrfilm, variabili --wr-*: convive col CSS del sito.
   ============================================================ */

@font-face {
  font-family: "Tinos";
  src: url("../assets/fonts/tinos-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("../assets/fonts/tinos-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- integrazione col resto della pagina ----------
   Con Lenis attivo lo smooth nativo va spento (doppia inerzia). */
html.lenis { scroll-behavior: auto !important; }

/* serif di sito: Bodoni Moda vendorizzato, vince sul loro :root */
html:root { --serif: "Tinos", "Times New Roman", Times, serif; }

/* Niente scorrimento laterale — ma MAI su html/body: renderebbero
   inefficace il position:sticky dei pin del film (testi che scappano
   in alto). Si contiene solo dove l'overflow nasce davvero. */
main#top > .section,
body > footer,
#collezione .wrap,
#bestsellers .wrap { overflow-x: clip; }

/* l'header sta sopra l'overlay del menu mobile: la X del burger resta visibile
   (il loro header z1000 < overlay z1100 nascondeva il bottone aperto) */
header#hdr { z-index: 1300; }

/* header stretto: sotto i 480px il sottotitolo del wordmark lascia spazio al CTA */
@media (max-width: 480px) {
  header#hdr .wordmark small { display: none; }
}

/* i chip del filtro collezione vanno a capo invece di sforare */
#collezione .filter { flex-wrap: wrap; row-gap: 8px; }

/* Il <footer> dentro la citazione Stosa ereditava il selettore generico
   footer{} del sito (fondo scuro + padding 4rem): era il "box enorme". */
.case blockquote footer {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.9rem;
}
.case blockquote {
  padding-left: 1.1rem;
  border-left: 2px solid var(--walnut, #6B4A2B);
}

/* ---------- Caso studio Stosa: su desktop due colonne, su mobile
     titolo + primo paragrafo, POI la foto, poi il resto ---------- */
#partner .case {
  grid-template-areas: "fig testo" "fig resto";
  grid-template-rows: auto 1fr;
  align-items: start;
}
#partner .case .fig { grid-area: fig; }
#partner .case .case-intro { grid-area: testo; }
#partner .case .case-rest { grid-area: resto; }

/* ---------- Materiale 02 · mosaico resine (foto dal configuratore) ---------- */
#materiali .rmosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, auto);   /* il sito imponeva righe fisse da 110px */
  gap: 10px;
}
#materiali .rtile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line, rgba(26, 22, 18, 0.14));
  background: var(--cream, #E2DCCF);
  aspect-ratio: 1 / 1;
  animation: none;
}
#materiali .rtile.big { grid-column: span 2; grid-row: span 2; }
#materiali .rtile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#materiali .rtile:hover img { transform: scale(1.06); }
#materiali .rtile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem 0.6rem;
  color: var(--bone, #F4F0E9);
  background: linear-gradient(to top, rgba(20, 17, 14, 0.78), transparent);
}
@media (max-width: 720px) {
  #materiali .rmosaic { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Best sellers · visualizzatore 3D ---------- */
.bs3d {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: center;
}
.bs3d-stage { margin: 0; position: relative; }
.bs3d-stage canvas {
  display: block;
  width: 100%;
  height: clamp(320px, 44vh, 520px);
  touch-action: pan-y;
}
.bs3d-hint { color: var(--stone, #8A8175); text-align: center; margin-top: 0.4rem; }
.bs3d-kicker { color: var(--stone-light, #B8B0A3); margin: 0 0 0.5rem; }
.bs3d-name { margin: 0 0 0.7rem; color: var(--bone, #F4F0E9); }
.bs3d-note { color: rgba(244, 240, 233, 0.72); max-width: 40ch; margin: 0 0 1.4rem; }
.bs3d-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.7rem; }
.bs3d-sw {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--sw, #888);
  border: 1px solid rgba(244, 240, 233, 0.28);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bs3d-sw:hover { transform: translateY(-2px); }
.bs3d-sw.on {
  border-color: rgba(244, 240, 233, 0.8);
  box-shadow: 0 0 0 3px rgba(184, 160, 122, 0.35);
}
.bs3d-sw:focus-visible { outline: 2px solid var(--stone-light, #B8B0A3); outline-offset: 3px; }
/* il .btn.solid del sito è ink-su-ink: invisibile su sezione scura */
/* 5 · CTA in bronzo di marca; al passaggio diventa nera con testo bianco */
#bestsellers .bs3d-cta {
  background: #7B634D;
  color: #F4F0E9;
  border-color: #7B634D;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
#bestsellers .bs3d-cta:hover,
#bestsellers .bs3d-cta:focus-visible {
  background: #14110F;
  color: #FFFFFF;
  border-color: #14110F;
}
#bestsellers.no3d .bs3d-stage,
#bestsellers.no3d .bs3d-swatches { display: none; }
@media (max-width: 860px) {
  .bs3d { grid-template-columns: 1fr; gap: 1.4rem; }
  .bs3d-stage canvas { height: clamp(260px, 38vh, 360px); }
  .bs3d-sw { width: 30px; height: 30px; }
}

/* Le sezioni del sito passano sopra i layer fissi del film. */
main#top > .section,
main#top > .pourband,
body > footer {
  position: relative;
  z-index: 10;
}
/* sfondo di base per le sezioni senza classe bg-*: copre il canvas fisso.
   Caricato PRIMA del foglio del sito: bg-ink / bg-paper / bg-cream vincono. */
.section { background: var(--bone, #F4F0E9); }

/* ---------- recensioni: restyle ordinato su fondo paper ---------- */
.section.reviews { background: var(--paper, #EBE6DC); }
.reviews .rev-bg { display: none; }
.reviews .rev-title {
  font-family: var(--serif, "Tinos", serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink, #1A1612);
  margin: 0.9rem 0 2.4rem;
}
.reviews .section-tag { color: var(--graphite, #4A4239) !important; }
.rev-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  align-items: start;
  max-width: 1060px;
}
.rev-side { display: flex; }
.rev-carousel { display: flex; align-items: center; gap: 0.8rem; flex: 1; }
.rev-track { flex: 1; }
.rev-card {
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--bone, #F4F0E9);
  border: 1px solid var(--line, rgba(26, 22, 18, 0.14));
  padding: clamp(1.3rem, 1.8vw, 1.9rem);
}
.rev-card.vis { display: flex; }
.rev-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--walnut, #6B4A2B);
  color: var(--bone, #F4F0E9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.rev-card b { font-size: 0.98rem; font-weight: 600; color: var(--ink, #1A1612); }
.rev-stars { color: #B08D57; letter-spacing: 0.18em; font-size: 0.84rem; }
.rev-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  font-weight: 350;
  color: var(--ink-soft, #2A241E);
  text-wrap: pretty;
}
.rev-src {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone, #8A8175);
}
.rev-arrow {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line, rgba(26, 22, 18, 0.14));
  background: transparent;
  color: var(--ink, #1A1612);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.rev-arrow:hover { background: var(--ink, #1A1612); color: var(--bone, #F4F0E9); }
.rev-photo { margin: 0; display: flex; flex-direction: column; }
.rev-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 380px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line, rgba(26, 22, 18, 0.14));
}
.rev-photo figcaption {
  font-family: var(--mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone, #8A8175);
  padding: 0.85rem 0 0;
  line-height: 1.7;
}
.rev-photo figcaption span { display: block; color: var(--walnut, #6B4A2B); }
@media (max-width: 860px) {
  .rev-grid { grid-template-columns: 1fr; }
  .rev-photo img { max-height: 300px; }
}

/* ---------- variabili del film ---------- */
#wrfilm {
  --wr-bone: #F4F0E9;
  --wr-ink-c: #1A1612;
  --wr-bronzo: #7B634D;
  --wr-accent: var(--wr-bronzo);
  --wr-accent-soft: #A88F6F;

  /* interpolate a runtime dal motore */
  --wr-bg: #F4F0E9;
  --wr-ink: #1A1612;
  --wr-ink-dim: rgba(26, 22, 18, 0.9);
  --wr-hairline: rgba(26, 22, 18, 0.34);
  --wr-scrim: rgba(244, 240, 233, 0.84);
  --wr-grade-a: rgba(244, 240, 233, 0.62);
  --wr-grade-b: rgba(237, 231, 219, 0.48);
  --wr-veil: 0;
  --wr-plate: rgba(244, 240, 233, 0.34);
  --wr-em: #6B4A2B;

  --wr-serif: "Tinos", "Times New Roman", Times, serif;
  --wr-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --wr-mono: "JetBrains Mono", "Courier New", monospace;

  font-family: var(--wr-sans);
  color: var(--wr-ink);
}

#wrfilm *, #wrfilm *::before, #wrfilm *::after { box-sizing: border-box; }
#wrfilm ::selection { background: var(--wr-bronzo); color: var(--wr-bone); }

/* ---------- canvas + gradazione ---------- */

#wrfilm #scrub {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
}

#wrfilm #grade {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left, var(--wr-grade-b) 0%, transparent 18%),
    linear-gradient(to bottom, var(--wr-grade-a) 0%, transparent 32%, transparent 60%, var(--wr-grade-b) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--wr-grade-b) 132%);
}

/* grana di pellicola, appena percettibile */
#wrfilm #grade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ombra di scena: gradiente direzionale, segue la sezione attiva */
#wrfilm #shade {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
#wrfilm #shade.shade-left {
  background: linear-gradient(to right, var(--wr-scrim) 0%, transparent 56%);
}
#wrfilm #shade.shade-right {
  background: linear-gradient(to left, var(--wr-scrim) 0%, transparent 56%);
}
#wrfilm #shade.shade-center {
  background: radial-gradient(58% 46% at 50% 50%, var(--wr-scrim) 0%, transparent 100%);
}

#wrfilm #veil {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #0B0908;
  opacity: var(--wr-veil);
}

/* ---------- preloader ---------- */

#wrfilm #loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--wr-bone);
  color: var(--wr-ink-c);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s ease 0.15s, visibility 0.9s ease 0.15s;
}
#wrfilm #loader.done { opacity: 0; visibility: hidden; }

#wrfilm .loader-inner { text-align: center; }

#wrfilm .loader-brand {
  font-family: var(--wr-serif);
  font-size: clamp(24px, 3.6vw, 38px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-weight: 500;
}

#wrfilm .loader-sub {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.55);
}

#wrfilm .loader-bar {
  width: 220px;
  height: 1px;
  background: rgba(26, 22, 18, 0.16);
  margin: 36px auto 12px;
  overflow: hidden;
}
#wrfilm .loader-fill {
  height: 100%;
  width: 0%;
  background: var(--wr-bronzo);
  transition: width 0.25s ease;
}
#wrfilm .loader-pct {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: rgba(26, 22, 18, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ---------- HUD ---------- */

#wrfilm #hud {
  position: fixed;
  top: 50%;
  right: clamp(18px, 2.6vw, 42px);
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  height: min(54vh, 500px);
  pointer-events: none;
}

#wrfilm .hud-top { text-align: right; }

/* anello di completamento dell'opera */
#wrfilm #hudRing {
  display: block;
  width: 46px;
  height: 46px;
  margin-left: auto;
  overflow: visible;
}
#wrfilm #hudRing .ring-track {
  fill: none;
  stroke: var(--wr-hairline);
  stroke-width: 1;
}
#wrfilm #hudRing .ring-fill {
  fill: none;
  stroke: var(--wr-em);
  stroke-width: 2.2;
  stroke-linecap: butt;
  stroke-dasharray: 119.38;
  stroke-dashoffset: 119.38;
  transform: rotate(-90deg);
  transform-origin: 22px 22px;
}
#wrfilm #hudRing .ring-core {
  fill: transparent;
  stroke: var(--wr-hairline);
  stroke-width: 1;
  transform: rotate(45deg);
  transform-origin: 22px 22px;
  transition: fill 0.6s ease, stroke 0.6s ease;
}
#wrfilm #hudRing.done .ring-core {
  fill: var(--wr-bronzo);
  stroke: var(--wr-accent-soft);
}
#wrfilm #hudRing.done .ring-fill {
  filter: drop-shadow(0 0 6px rgba(168, 143, 111, 0.7));
}
#wrfilm .hud-top span {
  display: block;
  margin-top: 8px;
  font-size: 8.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--wr-ink-dim);
}

#wrfilm .hud-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 15px;
  min-height: 0;
}

#wrfilm .hud-rail {
  width: 1px;
  background: var(--wr-hairline);
  position: relative;
}
#wrfilm .hud-fill {
  position: absolute;
  top: 0;
  left: -0.5px;
  width: 2px;
  height: 0%;
  background: linear-gradient(to bottom, var(--wr-accent-soft), var(--wr-bronzo));
  box-shadow: 0 0 12px rgba(168, 143, 111, 0.55);
}

#wrfilm .hud-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}
#wrfilm .hud-phases li {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wr-ink-dim);
  opacity: 0.8;
  transition: opacity 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
#wrfilm .hud-phases li i {
  font-style: normal;
  font-size: 9px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
#wrfilm .hud-phases li b { font-weight: 600; }
#wrfilm .hud-phases li.active {
  opacity: 1;
  color: var(--wr-em);
  transform: translateX(-4px);
}
#wrfilm .hud-phases li.active b {
  animation: wr-snap 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#wrfilm .hud-phases li.passed { opacity: 0.85; color: var(--wr-ink); }

@keyframes wr-snap {
  0% { transform: translateX(9px); opacity: 0.2; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---------- fasi / coda ---------- */

#wrfilm #journey, #wrfilm #coda { position: relative; z-index: 10; }

#wrfilm .phase { height: 250vh; position: relative; }
#wrfilm #fase-materia { height: 300vh; }
#wrfilm .tail { height: 215vh; position: relative; }

#wrfilm .pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* due momenti nella stessa fase (es. hero + Tre materie in Materia) */
#wrfilm .moment {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  align-items: safe center;   /* mai tagliato in alto se il testo è alto */
  padding-top: 92px;          /* spazio per l'header fisso */
  padding-bottom: 28px;
  overflow: hidden;
}

#wrfilm .content {
  position: relative;
  margin: 0;
  padding: 0 clamp(24px, 6vw, 96px);
  max-width: 820px;
  will-change: opacity, transform;
}

/* Leggibilità senza coprire lo sfondo: nessun pannello dietro al testo.
   Il contrasto arriva da (a) un velo direzionale leggero, (b) lettere
   leggermente più piene, (c) un'ombra di contatto morbidissima, alla
   maniera dei titoli sovraimpressi nel cinema. */
#wrfilm h1,
#wrfilm h2 {
  -webkit-text-stroke: 0.42px currentColor;
  paint-order: stroke fill;
  text-shadow: 0 1px 22px var(--wr-scrim);
}
#wrfilm .lede,
#wrfilm .body,
#wrfilm .overline,
#wrfilm .callouts b,
#wrfilm .callouts span {
  text-shadow: 0 1px 16px var(--wr-scrim);
}

#wrfilm .content-hero { max-width: 960px; }
#wrfilm .content-right { margin-left: auto; text-align: right; padding-right: clamp(90px, 11vw, 180px); }
#wrfilm .content-left  { margin-right: auto; text-align: left; }
#wrfilm .content-center { margin: 0 auto; text-align: center; }

/* overline nello stile dei section-tag del sito: mono + trattino */
#wrfilm .overline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wr-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wr-ink-dim);
  font-weight: 400;
  margin: 0 0 24px;
}
#wrfilm .overline::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--wr-em);
}

/* scala tipografica identica al resto del sito */
#wrfilm h1 {
  font-family: var(--wr-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.6rem, 1.6rem + 4.8vw, 5.6rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--wr-ink);
}

#wrfilm h2 {
  font-family: var(--wr-serif);
  font-optical-sizing: auto;
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.9rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--wr-ink);
}

#wrfilm h1 em, #wrfilm h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--wr-em);
}

#wrfilm .lede {
  margin: 1.4rem 0 0;
  font-size: clamp(1.02rem, 0.9rem + 0.45vw, 1.24rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--wr-ink-dim);
  max-width: 52ch;
}

#wrfilm .body {
  margin: 1.3rem 0 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--wr-ink-dim);
  max-width: 52ch;
}
#wrfilm .content-right .body { margin-left: auto; }
#wrfilm .content-center .body { margin-left: auto; margin-right: auto; }

/* timbro insight */
#wrfilm .stamp {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 40px;
  padding: 13px 26px;
  border: 1px solid var(--wr-hairline);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--wr-ink);
}
#wrfilm .stamp em {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--wr-bronzo);
}

/* callout materiali */
#wrfilm .callouts {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 28px;
  max-width: 480px;
}
#wrfilm .callouts li {
  position: relative;
  padding-left: 28px;
}
#wrfilm .callouts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--wr-bronzo);
  box-shadow: 0 0 12px rgba(168, 143, 111, 0.6);
}
#wrfilm .callouts b {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 550;
  margin-bottom: 7px;
}
#wrfilm .callouts span {
  font-size: 0.95rem;
  font-weight: 350;
  line-height: 1.65;
  color: var(--wr-ink-dim);
}

/* CTA */
#wrfilm .cta-btn {
  display: inline-block;
  margin-top: 48px;
  padding: 21px 58px;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--wr-ink);
  text-decoration: none;
  border: 1px solid var(--wr-accent);
  background: transparent;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
#wrfilm .cta-btn:hover {
  background: var(--wr-bronzo);
  color: var(--wr-bone);
  box-shadow: 0 14px 48px rgba(123, 99, 77, 0.35);
  transform: translateY(-2px);
}

#wrfilm .footer-micro {
  margin-top: 88px;
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--wr-ink-dim);
}

/* invito allo scroll */
#wrfilm .scroll-hint {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
#wrfilm .scroll-hint span {
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wr-ink-dim);
}
#wrfilm .scroll-hint i {
  display: block;
  width: 76px;
  height: 1px;
  background: var(--wr-hairline);
  position: relative;
  overflow: hidden;
}
#wrfilm .scroll-hint i::after {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: var(--wr-bronzo);
  animation: wr-hint 2.2s ease-in-out infinite;
}
@keyframes wr-hint {
  0% { left: -40%; }
  60%, 100% { left: 110%; }
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  #wrfilm #hud { right: 12px; gap: 0; height: auto; }
  #wrfilm #hudRing { width: 34px; height: 34px; }
  #wrfilm .hud-top span { display: none; }
  #wrfilm .hud-body { display: none; }
  #wrfilm h1 { font-size: clamp(2.05rem, 8vw, 2.5rem); }
  #wrfilm h2 { font-size: clamp(1.6rem, 6.6vw, 2.05rem); }
  #wrfilm .content { padding: 0 56px 0 20px; }
  #wrfilm .content-right { padding-right: 56px; }
  #wrfilm .content-center { padding: 0 56px 0 20px; }
  #wrfilm .callouts { gap: 18px; max-width: none; }
  #wrfilm .stamp { margin-top: 26px; padding: 11px 18px; letter-spacing: 0.26em; }
  #wrfilm .scroll-hint { margin-top: 36px; }
  #wrfilm .footer-micro { margin-top: 56px; letter-spacing: 0.22em; }
  #wrfilm .cta-btn { padding: 17px 34px; letter-spacing: 0.26em; }
  #wrfilm #shade.shade-left { background: linear-gradient(to right, var(--wr-scrim) 0%, transparent 78%); }
  #wrfilm #shade.shade-right { background: linear-gradient(to left, var(--wr-scrim) 0%, transparent 78%); }
}

/* ============================================================
   WOOD RIVIERA — SCALA TIPOGRAFICA UNICA (v2)
   Da incollare IN FONDO a css/style.css, dopo il blocco
   "scala tipografica unica" esistente (che questo sostituisce).

   Principio: una sola misura per ruolo, ancorata al titolo di
   sezione gia' concordato — clamp(2rem, 1.45rem + 2.6vw, 3.9rem)
   ~ 56,5px @1280 — e al testo corrente 1.02rem/1.7.

   Nessun carattere nuovo, nessun colore nuovo: solo dimensioni,
   pesi, interlinee e spaziature.

   ATTENZIONE ALL'AMBITO: tutti i selettori sono ancorati a
   main#top > .section, agli id di sezione, a header#hdr o a
   body > footer. Il film #wrfilm e' figlio diretto di main#top
   ma NON ha classe .section, quindi nessuna regola lo raggiunge.
   Non aggiungere mai selettori che partano da "main#top " con
   discendente generico.
   ============================================================ */

/* ---------- 1 · I sei gradi della scala ----------
   Definiti su html:root per vincere sul :root del sito.
   Il film usa il proprio namespace --wr-*: non viene toccato. */
html:root {
  /* L1 · titolo di sezione — ancora della scala (~56,5px @1280) */
  --t-h1s:     clamp(2rem, 1.45rem + 2.6vw, 3.9rem);
  --t-h1s-lh:  1.04;

  /* L2 · sottotitolo di blocco — 0,69x L1 (~38,9px @1280) */
  --t-h2s:     clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
  --t-h2s-lh:  1.1;

  /* L3 · titolo di card / nome oggetto — fisso, non scala */
  --t-card:    1.25rem;
  --t-card-lh: 1.15;

  /* L4 · citazione */
  --t-quote:    clamp(1.2rem, 1.02rem + 0.7vw, 1.55rem);
  --t-quote-lh: 1.45;

  /* L5 · testo corrente — base dichiarata del sito */
  --t-body:    1.02rem;
  --t-body-lh: 1.7;

  /* L6 · testo secondario (descrizioni, valori, link di servizio) */
  --t-small:    0.92rem;
  --t-small-lh: 1.6;

  /* M1 · occhiello di sezione (mono, maiuscoletto largo) */
  --t-eyebrow:  0.66rem;
  --t-eyebrow-ls: 0.22em;

  /* M2 · micro-etichetta (chiavi, codici, didascalie, footer) */
  --t-micro:    0.6rem;
  --t-micro-ls: 0.16em;

  /* A1 · azioni: bottoni e CTA */
  --t-action:    0.7rem;
  --t-action-ls: 0.14em;

  /* A2 · voci di menu */
  --t-nav: 0.84rem;
}

/* ============================================================
   2 · L1 — TITOLO DI SEZIONE
   Un unico corpo per ogni titolo di primo livello della pagina.
   Include .mat h3: i tre blocchi "Materiale" devono leggersi
   pari grado, oggi 01/02 sono h3 a 53px e 03 e' h2 a 56,5px.
   ============================================================ */
main#top > .section .sec-head h2,
main#top > .section > .wrap > h2,
#collezione .sec-head h2,
#bestsellers .sec-head h2,
#xl h2,
#materiali h2,
#materiali .mat h3,
#partner .case h2,
#recensioni .rev-title,
main#top > .section .terms h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h1s);
  line-height: var(--t-h1s-lh);
  letter-spacing: -0.01em;
  margin-top: 0.9rem;
  margin-bottom: 1.2rem;
}

/* ============================================================
   3 · L2 — SOTTOTITOLO DI BLOCCO
   Titoli interni a una sezione gia' intitolata.
   ============================================================ */
#bestsellers .bs3d-name,
main#top > .section .sub-head h3,
nav.mobile a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h2s);
  line-height: var(--t-h2s-lh);
  letter-spacing: -0.005em;
}
/* il menu mobile eredita la misura ma non i margini di un titolo */
nav.mobile a { margin: 0; }

/* ============================================================
   4 · L3 — TITOLO DI CARD / NOME OGGETTO
   Prodotti, gambe, righe della matrice, autori recensione:
   tutti serif 500 alla stessa misura.
   ============================================================ */
#collezione .prod h3,
#materiali .leg b,
#bestsellers .bs-cap b,
#bestsellers .bs-row .wname b,
#recensioni .rev-card b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-card);
  line-height: var(--t-card-lh);
  letter-spacing: 0;
}
/* il prezzo in card allineato al nome: stessa riga, stesso peso ottico */
#collezione .prod .price {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-card);
  line-height: var(--t-card-lh);
  white-space: nowrap;
}
/* sotto 700px la matrice non rimpicciolisce piu' di suo */
@media (max-width: 700px) {
  #bestsellers .bs-row .wname b { font-size: var(--t-card); }
}

/* ============================================================
   5 · L4 — CITAZIONI
   ============================================================ */
#partner .case blockquote,
main#top > .section blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: 0;
}

/* ============================================================
   6 · L5 — TESTO CORRENTE
   .body-text e' gia' 1.02rem/1.7: qui si riporta alla stessa
   misura anche .body-text.large in TUTTE le sezioni (oggi solo
   #xl e #materiali) e si allinea il default del body.
   ============================================================ */
main#top > .section .body-text,
main#top > .section .body-text.large,
main#top > .section .sec-head .rt,
main#top > .section p.lede {
  font-family: var(--sans);
  font-weight: 350;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  text-wrap: pretty;
}
/* il paragrafo guida si distingue per larghezza di colonna, non per corpo */
main#top > .section .body-text.large { max-width: 62ch; }

/* ============================================================
   7 · L6 — TESTO SECONDARIO
   Otto misure fra .8 e .96rem ricondotte a una.
   ============================================================ */
#collezione .prod .desc,
#collezione .prod .srow .v,
#materiali .leg span,
#partner .case .blk p,
#bestsellers .bs3d-note,
#recensioni .rev-card p,
body > footer .foot-col a,
body > footer .foot-brand p {
  font-family: var(--sans);
  font-weight: 350;
  font-size: var(--t-small);
  line-height: var(--t-small-lh);
}

/* ============================================================
   8 · M1 — OCCHIELLO DI SEZIONE
   .section-tag e .no diventano lo stesso oggetto, trattino
   compreso: e' la meta' visiva della segnalazione su Materiali.
   ============================================================ */
main#top > .section .section-tag,
#materiali .mat .no,
#bestsellers .bs3d-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  line-height: 1.4;
}
/* il trattino che manca a Materiale 01 e 02 */
#materiali .mat .no::before,
#bestsellers .bs3d-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--walnut);
  flex: none;
}
#bestsellers .bs3d-kicker::before { background: var(--stone-light); }

/* ============================================================
   9 · M2 — MICRO-ETICHETTA
   Undici misure (.52-.68rem) e sei letter-spacing ricondotti a uno.
   ============================================================ */
main#top > .section .caption,
main#top > .section figcaption,
#collezione .chip,
#collezione .prod .ph .tier,
#collezione .prod .srow .k,
#collezione .prod .lead,
#bestsellers .bs-head div,
#bestsellers .bs-row .wname span,
#bestsellers .bs-cap span,
#bestsellers .bs-hint,
#bestsellers .bs3d-hint,
#materiali .badges div,
#materiali .ss-cap,
#materiali .leg .code,
#materiali .leg .inc,
#materiali .ph-leg .phbox,
#partner .case .pmeta,
#partner .case .blk .k,
#partner .case blockquote footer,
#recensioni .rev-src,
main#top > .section .spec-row .k,
header#hdr .wordmark small,
body > footer .foot-col h5,
body > footer .foot-bottom {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: var(--t-micro-ls);
  text-transform: uppercase;
  line-height: 1.5;
}
/* il folio del footer resta un numero serif, non una micro-etichetta */
body > footer .foot-bottom .folio {
  font-family: var(--serif);
  font-size: var(--t-card);
  letter-spacing: 0;
  text-transform: none;
}
/* le referenze XL rientrano nel ruolo micro invece di essere sans .92rem */
#xl .refs b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: var(--t-micro-ls);
  text-transform: uppercase;
}
#xl .refs .n {
  font-family: var(--serif);
  font-size: var(--t-card);
}

/* ============================================================
   10 · A1 — AZIONI (bottoni, CTA, link "vai")
   ============================================================ */
main#top > .section .btn,
main#top > .section .nav-cta,
#collezione .prod .go,
#bestsellers .bs3d-cta,
header#hdr .btn,
header#hdr .nav-cta,
body > footer .btn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-action);
  letter-spacing: var(--t-action-ls);
  text-transform: uppercase;
  line-height: 1;
}
@media (max-width: 700px) {
  header#hdr .nav-cta { font-size: var(--t-action); padding: 0.7em 1em; }
}

/* ============================================================
   11 · A2 — MENU E WORDMARK
   ============================================================ */
header#hdr nav.links a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-nav);
  letter-spacing: 0.03em;
}
header#hdr .wordmark b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-nav);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ============================================================
   12 · Correzione della collisione .rt
   In index.html righe 535 e 658 i paragrafi guida sono marcati
   class="rt body-text" e prendono anche il .rt del mosaico resine
   (bordo + animazione rswirl). Finche' il markup non viene
   corretto, qui si neutralizza il caso.
   Correzione definitiva: rinominare quella classe in .sec-note
   nell'HTML e cancellare questo blocco.
   ============================================================ */
main#top > .section p.rt,
main#top > .section .sec-head .rt {
  border: 0;
  background: none;
  animation: none;
  overflow: visible;
  max-width: 38ch;
}
main#top > .section p.rt::after { content: none; }

/* ============================================================
   13 · PAGINE INTERNE (chi-siamo.html, prodotti/*.html)
   Vale SOLO se il foglio viene collegato anche li':
     chi-siamo.html      -> <link rel="stylesheet" href="css/style.css?v=35">
     prodotti/*.html     -> <link rel="stylesheet" href="../css/style.css?v=35">
   Senza questo <link> le regole non arrivano e le pagine interne
   restano fuori scala. Selettori con body[class] non disponibile:
   si usa la profondita' di classe per superare lo <style> locale.
   ============================================================ */
/* L1 · titoli di sezione delle pagine interne */
body .story h2,
body .cta-final h2,
body .sec-head h2,
body .info h1,
body .final h2,
body .faq-intro h2,
body .related h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h1s);
  line-height: var(--t-h1s-lh);
  letter-spacing: -0.01em;
}
/* la h1 di prodotto resta 500 come il nome dell'oggetto che e' */
body .info h1 { font-weight: 500; }

/* L3 · card e nomi */
body .rel .b h3,
body .values .v b,
body .rev .who b,
body .mob-cta .mc-price b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-card);
  line-height: var(--t-card-lh);
}
body .price,
body .rel .b span {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-card);
}

/* L4 · citazioni */
body .review-band blockquote,
body .rev-featured blockquote,
body .story .pull,
body .quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
}

/* L5 / L6 · corpo e secondario */
body .desc,
body .story p {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}
body .faq p,
body .faq-intro p,
body .rev p,
body .values .v p,
body .srow .v,
body .trust div {
  font-size: var(--t-small);
  line-height: var(--t-small-lh);
}

/* M1 / M2 · occhielli e micro-etichette */
body .info .tierlab {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
}
body .srow .k,
body .ctas .micro,
body .price small,
body .quote footer,
body .review-band footer,
body .rev-featured footer,
body .rev .who span,
body .gal .main .unique,
body .about-hero .scrolld,
body .mob-cta .mc-price span {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--t-micro-ls);
  text-transform: uppercase;
}

/* A1 · azioni interne */
body .faq summary {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}

/* ============================================================
   RIFINITURE MOBILE (richieste dopo la prova sul telefono)
   ============================================================ */
@media (max-width: 860px) {
  /* il caso studio si legge nell'ordine naturale: titolo, paragrafo, foto, resto */
  #partner .case {
    grid-template-areas: "testo" "fig" "resto";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #partner .case .fig { margin-top: 0.4rem; }
}

@media (max-width: 720px) {
  /* 1 · nella hero del film niente indicatore di avanzamento: il testo
        torna a piena larghezza e allineato */
  #wrfilm #hud { display: none; }
  #wrfilm .content,
  #wrfilm .content-center { padding: 0 22px; }
  #wrfilm .content-right { padding: 0 22px; text-align: left; margin-left: 0; }
  #wrfilm .content-left { padding: 0 22px; }
  #wrfilm .body,
  #wrfilm .lede { margin-left: 0; margin-right: 0; }

  /* 3 · niente comparsa a dissolvenza su mobile: tutto già in pagina
        (su desktop l'effetto resta) */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 4 · via il suggerimento sotto il modello 3D */
  .bs3d-hint { display: none; }
}

/* ---------- Chi siamo: foto e titolo più vicini (tolta la didascalia) ---------- */
body .story { gap: clamp(1.4rem, 3vw, 3.4rem); }
body .story .fig { margin-bottom: 0; }
body .story h2 { margin-top: 0.5rem; }
@media (max-width: 860px) {
  body .story { gap: 1.2rem; }
  body .story h2 { margin-top: 0.3rem; }
}

/* ---------- Barra di navigazione ----------
   Con cinque voci (Tavoli, Giornale, Recensioni, Progetti XL, Partner) la barra
   richiede ~932px misurati. Fra 941 e 1200 stringo le spaziature per guadagnare
   margine; sotto i 940 passa al menu a scomparsa. Le pagine prodotto passavano
   già a 900: qui si allineano anche home, listino e chi siamo.
   Specificità alzata di proposito per battere il <style> inline delle pagine. */
@media (max-width: 1200px) and (min-width: 941px) {
  header#hdr nav.links   { gap: 1.4rem; }
  header#hdr nav.links a { white-space: nowrap; }
}
@media (max-width: 940px) {
  header#hdr nav.links { display: none; }
  header#hdr .burger   { display: flex; }
  body > nav.mobile {
    display: flex; position: fixed; inset: 0;
    background: rgba(244, 240, 233, .98); backdrop-filter: blur(10px); z-index: 1100;
    flex-direction: column; justify-content: center; align-items: center; gap: 1.3rem;
    opacity: 0; pointer-events: none; transition: opacity .4s;
  }
  body > nav.mobile.open { opacity: 1; pointer-events: auto; }
  body > nav.mobile a {
    font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--ink);
  }
}