/* ==========================================================================
   REBISTEL SARTORIA · Atelier di Filiz
   Design system unico: sartoria artigianale incontra editoria di lusso.
   Mobile-first. Ogni regola base è pensata per schermi piccoli;
   le media query (min-width) aggiungono complessità verso l'alto.
   ========================================================================== */

/* ---------- 0. CARATTERI ----------
   Serviti dal sito, non da Google. Prima ogni pagina chiamava
   fonts.googleapis.com e fonts.gstatic.com: l'indirizzo IP di ogni visitatore
   arrivava a un terzo prima ancora del banner cookie, mentre la Privacy Policy
   del sito dichiara di non comunicare dati a terzi. Ora quella frase e' vera.

   Entrambe le famiglie sono variabili (Cormorant Garamond 300-700,
   Jost 100-900): un solo file copre tutti i pesi usati. Delle 12 varianti che
   il sito chiedeva a Google, le pagine ne rendono davvero 7, misurate su
   tutte e sei le pagine, a schermo grande e a telefono.
   `latin-ext` viene scaricato solo se una pagina ne ha bisogno: per l'italiano
   quasi mai. Peso effettivo invariato rispetto a prima (circa 100 KB). */

@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Palette "seta e bordeaux": mai nero/bianco puri */
  --color-ink: #171310;
  --color-ink-soft: #2a231d;
  --color-cream: #f7f1e4;
  --color-cream-dim: #efe5d2;
  --color-paper: #fbf7ee;
  --color-wine: #6e1e2e;
  --color-wine-deep: #4a1420;
  --color-wine-bright: #8c2c3f;
  --color-gold: #b7883f;
  --color-gold-light: #d9b876;
  --color-gold-dim: #9c7736;
  /* L'oro del marchio, scurito quel tanto che basta a reggere come TESTO su
     crema e su carta (4,65:1 e 4,90:1, soglia 4,5:1). Gli altri tre restano
     come sono: servono per riempimenti, bordi e testo su fondo scuro, dove il
     contrasto non e' mai stato un problema. */
  --color-gold-text: #87672e;
  --color-taupe: #8a7c6b;
  --color-line: rgba(23, 19, 16, 0.12);
  --color-line-light: rgba(247, 241, 228, 0.18);

  /* Testo funzionale */
  --text-primary: var(--color-ink);
  --text-secondary: rgba(23, 19, 16, 0.64);
  /* NON USARE per il testo: 2,84:1 su crema, 1,00:1 sul piede scuro. Era la
     causa di quasi tutti i testi illeggibili del sito. Resta dichiarato perche'
     serve ancora per bordi e segni decorativi, dove nessuno deve leggere. */
  --text-tertiary: rgba(23, 19, 16, 0.44);
  --text-on-dark: var(--color-cream);
  --text-on-dark-soft: rgba(247, 241, 228, 0.68);

  /* Tipografia */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Jost", "Century Gothic", Futura, sans-serif;

  --text-hero: clamp(3.4rem, 2.2rem + 8vw, 9.5rem);
  --text-display: clamp(2.6rem, 1.9rem + 4.4vw, 5.6rem);
  --text-h2: clamp(2.1rem, 1.7rem + 2.4vw, 3.4rem);
  --text-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --text-body: clamp(1rem, 0.96rem + 0.15vw, 1.09rem);
  --text-small: 0.86rem;
  /* Era --text-eyebrow, dal nome dell'etichettina sopra i titoli. Quella non
     esiste piu'; la misura resta, e la usa l'indicazione "Scorri" nell'hero. */
  --text-micro: 0.78rem;

  /* Spaziature (scala fluida) */
  --space-3xs: 0.4rem;
  --space-2xs: 0.7rem;
  --space-xs: 1.1rem;
  --space-s: 1.6rem;
  --space-m: clamp(2rem, 1.7rem + 1.4vw, 3rem);
  --space-l: clamp(3rem, 2.4rem + 3vw, 5.5rem);
  --space-xl: clamp(4.5rem, 3.4rem + 5.4vw, 8.5rem);
  --space-2xl: clamp(6rem, 4.6rem + 6.8vw, 11rem);

  --container-max: 1280px;
  --container-pad: 1.25rem;

  /* Easing: mai lineare */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 220ms;
  --dur-normal: 460ms;
  --dur-slow: 760ms;
  --dur-slower: 1100ms;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-full: 999px;

  --shadow-soft: 0 20px 50px -25px rgba(23, 19, 16, 0.35);
  --shadow-lift: 0 30px 70px -30px rgba(23, 19, 16, 0.45);
}

@media (min-width: 768px){
  :root{ --container-pad: 2.4rem; }
}
@media (min-width: 1280px){
  :root{ --container-pad: 3.2rem; }
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin: 0; }
ul[class], ol[class]{ list-style: none; margin: 0; padding: 0; }
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
html:focus-within{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  background: var(--color-cream);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
  font-weight: 300;
  /* `clip` invece di `hidden`: taglia lo stesso l'overflow orizzontale ma non
     crea un contenitore di scorrimento, quindi position:sticky continua a
     funzionare. `hidden` resta come fallback per i browser più vecchi. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open{ overflow: hidden; }

::selection{
  background: var(--color-wine);
  color: var(--color-cream);
}

:focus-visible{
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link{
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-s);
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus{ top: 1rem; }

/* ---------- 3. TIPOGRAFIA ---------- */
h1, h2, h3, h4{
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Le etichettine sopra i titoli sono state tolte da tutto il sito: i titoli
   reggono da soli, e una riga in maiuscoletto che annuncia il titolo che sta
   sotto non aggiunge informazione. Le regole restano qui rimosse di proposito
   perche' non tornino per inerzia. */

.h-hero{
  font-size: var(--text-hero);
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.h-display{
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
h2, .h2{ font-size: var(--text-h2); line-height: 1.08; }
h3, .h3{ font-size: var(--text-h3); line-height: 1.2; }

.lead{
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--text-secondary);
  font-weight: 300;
}

em, .italic{ font-style: italic; }
.text-gold{ color: var(--color-gold-dim); }
.text-wine{ color: var(--color-wine); }
.text-secondary{ color: var(--text-secondary); }

p + p{ margin-top: 1em; }

/* ---------- 4. BOTTONI & LINK ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.9rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-full);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-normal) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-normal) var(--ease-out-expo);
  white-space: nowrap;
}
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.btn:hover::before, .btn:focus-visible::before{ transform: scaleX(1); }

.btn-primary{
  background: var(--color-wine);
  color: var(--color-cream);
  box-shadow: var(--shadow-soft);
}
.btn-primary::before{ background: var(--color-ink); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-outline{
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--color-line);
}
.btn-outline::before{ background: var(--color-ink); transform-origin: left; }
.btn-outline:hover{ color: var(--color-cream); border-color: var(--color-ink); }

.btn-outline.on-dark{
  color: var(--color-cream);
  border-color: var(--color-line-light);
}
.btn-outline.on-dark::before{ background: var(--color-gold); }
.btn-outline.on-dark:hover{ color: var(--color-ink); border-color: var(--color-gold); }

.btn svg{ width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform var(--dur-normal) var(--ease-out-back); }
.btn:hover svg{ transform: translateX(4px); }

.link-thread{
  position: relative;
  padding-bottom: 0.15em;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--dur-normal) var(--ease-out-expo);
}
.link-thread:hover, .link-thread:focus-visible{ background-size: 100% 1px; }

/* Bottoni sui telefoni.
   Il bottone ha `white-space: nowrap`, spaziatura fra le lettere 0,14em e
   30px di respiro ai lati: a 320px "Prenota una consulenza" misurava 318px e
   usciva dallo schermo. E quando ci stavano, restavano di larghezze diverse
   uno sotto l'altro, con il bordo destro a bandiera.
   Sotto i 560px: respiro e spaziatura ridotti quel tanto che basta a far
   entrare l'etichetta piu' lunga, e i bottoni d'azione a piena larghezza,
   incolonnati. La testata e il banner cookie restano fuori: li' i bottoni
   sono corti e affiancati, e a piena larghezza starebbero male. */
@media (max-width: 560px){
  .btn{
    padding: 0.95rem 1.25rem;
    letter-spacing: 0.09em;
    width: 100%;
    justify-content: center;
  }
  /* Eccezioni: qui i bottoni sono corti e stanno affiancati per scelta. */
  .cookie-actions .btn,
  .nav-cta{ width: auto; }

  /* I due bottoni dell'hero si incolonnano invece di andare a capo storti. */
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
}

/* ---------- 5. HEADER / NAV ---------- */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  padding-block: var(--space-xs);
  background: rgba(247, 241, 228, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-normal) var(--ease-out-expo), padding var(--dur-normal) var(--ease-out-expo), background var(--dur-normal) var(--ease-out-expo);
}
.site-header.is-scrolled{
  border-bottom-color: var(--color-line);
  padding-block: 0.85rem;
}

.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.brand{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  z-index: 20;
}
.brand-mark{ width: 42px; height: 42px; flex-shrink: 0; }
.brand-word{
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.brand-word span{ display: block; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-secondary); margin-top: 0.25em; }

.nav-desktop{ display: none; }
.nav-cta{ display: none; }

@media (min-width: 960px){
  .nav-desktop{
    display: flex;
    align-items: center;
    gap: var(--space-m);
  }
  .nav-desktop a{
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
  }
  .nav-desktop a::after{
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--color-wine);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-normal) var(--ease-out-expo);
  }
  .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; }
  .nav-desktop a[aria-current="page"]{ color: var(--color-wine); }
  .nav-cta{ display: inline-flex; }
}

.menu-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px; height: 46px;
  z-index: 20;
}
.menu-toggle span{
  display: block;
  width: 100%; height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out-expo);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* Quando il menu è aperto, l'header diventa trasparente e i suoi elementi
   (logo, testo, hamburger) passano al colore chiaro per restare leggibili
   sopra lo sfondo scuro del menu a schermo intero.

   ATTENZIONE AL TEMPO: il pannello scuro non appare di colpo, si apre come un
   cerchio che parte dall'hamburger in alto a DESTRA e impiega circa un secondo
   a coprire lo schermo. Il marchio sta in alto a SINISTRA, cioe' e' l'ultimo
   punto raggiunto. Cambiandogli colore subito, restava crema su crema:
   invisibile per mezzo secondo buono a ogni apertura del menu.
   Il colore chiaro arriva quindi in ritardo, quando il pannello lo ha
   raggiunto. In chiusura il ritardo non serve: il cerchio si ritira verso
   destra e scopre per primo proprio il marchio. */
/* La testata cambia fondo INSIEME al marchio, con lo stesso ritardo: cosi' il
   testo e il fondo su cui poggia si muovono sempre in coppia, e non esiste un
   istante in cui il cerchio scuro ha superato una lettera che e' ancora nera.
   A menu aperto il fondo e' lo stesso inchiostro del pannello: la giunzione
   non si vede. */
body.menu-open .site-header{
  background: var(--color-ink);
  border-bottom-color: transparent;
  /* Scatto, non dissolvenza: una dissolvenza incrociata fra crema e
     inchiostro passa per un grigio su cui il testo scuro sbiadisce. */
  transition-duration: 1ms;
  transition-delay: 430ms;
}
.site-header .brand-word,
.site-header .brand-word span,
.site-header .brand-mark circle:first-child,
.site-header .brand-mark text{
  transition: color var(--dur-fast) var(--ease-out-expo),
              stroke var(--dur-fast) var(--ease-out-expo),
              fill var(--dur-fast) var(--ease-out-expo);
}
body.menu-open .site-header .brand-word,
body.menu-open .site-header .brand-word span,
body.menu-open .site-header .brand-mark circle:first-child,
body.menu-open .site-header .brand-mark text{
  transition-duration: 1ms;
  transition-delay: 430ms;
}

body.menu-open .site-header .brand-word,
body.menu-open .site-header .brand-word span{ color: var(--color-cream); }
body.menu-open .site-header .brand-mark circle:first-child{ stroke: var(--color-gold-light); }
body.menu-open .site-header .brand-mark text{ fill: var(--color-cream) !important; }
body.menu-open .menu-toggle span{ background: var(--color-cream); }

/* Il banner cookie stava a z-index 900 e il menu a 10: aperto il menu, il
   banner ci galleggiava sopra coprendo i recapiti in fondo. Mentre il menu e'
   aperto il banner si toglie di mezzo, e torna appena si richiude. */
body.menu-open .cookie-banner{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out-expo), visibility var(--dur-fast);
}

@media (min-width: 960px){
  .menu-toggle{ display: none; }
}

.nav-mobile{
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  color: var(--color-cream);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--space-s);
  clip-path: circle(2% at calc(100% - 40px) 40px);
  transition: clip-path var(--dur-slower) var(--ease-in-out-expo);
  visibility: hidden;
}
.nav-mobile.is-open{
  clip-path: circle(150% at calc(100% - 40px) 40px);
  visibility: visible;
}
.nav-mobile-list{ display: flex; flex-direction: column; gap: 0.3rem; }
.nav-mobile-list a{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-style: italic;
  font-weight: 500;
  padding-block: 0.2rem;
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo), color var(--dur-fast);
}
.nav-mobile.is-open .nav-mobile-list a{ opacity: 1; transform: translateY(0); }
.nav-mobile-list a:hover{ color: var(--color-gold-light); }
.nav-mobile-list li:nth-child(1) a{ transition-delay: 0.08s; }
.nav-mobile-list li:nth-child(2) a{ transition-delay: 0.14s; }
.nav-mobile-list li:nth-child(3) a{ transition-delay: 0.2s; }
.nav-mobile-list li:nth-child(4) a{ transition-delay: 0.26s; }
.nav-mobile-list li:nth-child(5) a{ transition-delay: 0.32s; }

.nav-mobile-foot{
  margin-top: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--text-on-dark-soft);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out-expo) 0.4s, transform var(--dur-slow) var(--ease-out-expo) 0.4s;
}
.nav-mobile.is-open .nav-mobile-foot{ opacity: 1; transform: translateY(0); }

/* ---------- 6. HERO ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--space-2xl) + 3rem);
  padding-bottom: var(--space-l);
  background:
    radial-gradient(ellipse at 15% 20%, rgba(183,136,63,0.14), transparent 55%),
    repeating-linear-gradient(115deg, rgba(23,19,16,0.035) 0 2px, transparent 2px 34px),
    var(--color-cream);
  overflow: hidden;
}

.hero-stitch{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.85;
}
.hero-stitch path{
  fill: none;
  stroke: var(--color-wine);
  stroke-width: 1.4;
  stroke-dasharray: 9 10;
  stroke-linecap: round;
  opacity: 0.55;
}
.has-js .hero-stitch path{
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.6s var(--ease-out-expo);
}
.has-js .hero.in-view .hero-stitch path{ stroke-dashoffset: 0; }

/* Sul telefono la stessa curva viene schiacciata su meno larghezza: le linee
   si addensano proprio dove sta il testo. Piu' leggere, restano ricamo. */
@media (max-width: 699px){
  .hero-stitch path{ opacity: 0.34; }
}

.hero-inner{ position: relative; z-index: 2; }

/* Le cuciture decorative passavano sopra l'occhiello e il paragrafo, e sul
   telefono ne attraversavano ogni riga: e' il testo che spiega cosa fa
   l'atelier, sul dispositivo da cui arriva quasi tutto il traffico. Un alone
   di crema sotto la colonna di testo restituisce il fondo pieno dove ci sono
   le parole, e lascia il ricamo visibile tutt'intorno. Nessuna riga di testo
   e' stata spostata, nessuna parola cambiata. */
.hero-bottom > div:first-child{ position: relative; z-index: 1; }
.hero-bottom > div:first-child::before{
  content: "";
  position: absolute;
  inset: -1.6rem -2.4rem -1.2rem -2.4rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    120% 100% at 26% 50%,
    var(--color-cream) 0%,
    rgba(247, 241, 228, 0.96) 52%,
    rgba(247, 241, 228, 0) 88%
  );
}

.hero-top{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.hero-title{
  font-size: var(--text-hero);
  line-height: 0.92;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.hero-title .line{ display: block; overflow: hidden; }
.has-js .hero-title .line span{
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out-expo);
}
.has-js .hero.in-view .hero-title .line span{ transform: translateY(0); }
.hero-title .line:nth-child(1) span{ transition-delay: 0.05s; }
.hero-title .line:nth-child(2) span{ transition-delay: 0.16s; }
.hero-title .line:nth-child(3) span{ transition-delay: 0.27s; }
.hero-title em{ color: var(--color-wine); font-style: italic; }

.hero-side{
  max-width: 24ch;
  text-align: right;
  display: none;
}
@media (min-width: 900px){ .hero-side{ display: block; } }

.hero-bottom{
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 700px){
  .hero-bottom{ grid-template-columns: 1.1fr auto; align-items: end; }
}

.hero-lead{ max-width: 46ch; }

.hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-scroll{
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-s);
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary); /* era tertiary: 2,84:1 */
}
@media (min-width: 700px){ .hero-scroll{ display: flex; } }
.hero-scroll .line-anim{
  width: 1px; height: 46px;
  background: var(--color-line);
  position: relative;
  overflow: hidden;
}
.hero-scroll .line-anim::after{
  content: "";
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--color-wine);
  animation: scrollDrip 2.4s var(--ease-in-out-expo) infinite;
}
@keyframes scrollDrip{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}

/* ---------- 7. MARQUEE ---------- */
.marquee-band{
  background: var(--color-ink);
  color: var(--color-cream);
  overflow: hidden;
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-gold-dim);
  border-bottom: 1px solid var(--color-gold-dim);
}
.marquee-track{
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee 32s linear infinite;
}
.marquee-track span{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
  color: var(--text-on-dark-soft);
}
.marquee-track span em{ color: var(--color-gold-light); font-style: normal; font-family: var(--font-sans); font-size: 0.6em; letter-spacing: 0.1em; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* ---------- 8. SEZIONI GENERALI ---------- */
section{ position: relative; }
.section{ padding-block: var(--space-2xl); }
.section-tight{ padding-block: var(--space-xl); }

.section-head{
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}
@media (min-width: 860px){
  .section-head{ grid-template-columns: 1.3fr 1fr; align-items: end; }
}

/* L'occultamento iniziale si applica solo se JS è attivo (classe .has-js sull'html,
   impostata sincronamente in testa alla pagina): senza JS il contenuto resta
   sempre visibile, garantendo un fallback robusto (progressive enhancement). */
.has-js [data-reveal]{
  opacity: 0;
  transform: translateY(48px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

.has-js [data-reveal-stagger] > *{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-expo);
}
[data-reveal-stagger].is-visible > *{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1){ transition-delay: 0.02s; }
[data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay: 0.1s; }
[data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay: 0.18s; }
[data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay: 0.26s; }
[data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay: 0.34s; }
[data-reveal-stagger].is-visible > *:nth-child(6){ transition-delay: 0.42s; }

.divider-thread{
  width: 100%; height: 34px;
  color: var(--color-line);
}

/* ---------- 9. INTRO / NUMERI ---------- */
.intro{ background: var(--color-cream); }
.intro-grid{
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 900px){
  .intro-grid{ grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); }
}

.stat-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m) var(--space-s);
  margin-top: var(--space-m);
}
.stat{ border-top: 1px solid var(--color-line); padding-top: 0.9rem; }
.stat-num{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.9rem + 2vw, 3.6rem);
  color: var(--color-wine);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.stat-label{ font-size: var(--text-small); color: var(--text-secondary); margin-top: 0.4rem; max-width: 20ch; }

/* ---------- 10. SERVIZI ---------- */
.services-grid{
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
}

.service-card{
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-s);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out-expo), box-shadow var(--dur-normal) var(--ease-out-expo), border-color var(--dur-normal);
}
.service-card::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-wine), var(--color-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
  border-color: transparent;
}
.service-card:hover::after{ transform: scaleX(1); }
.service-icon{
  width: 52px; height: 52px;
  color: var(--color-wine);
}
.service-card h3{ font-size: 1.5rem; }
.service-card p{ color: var(--text-secondary); font-size: 0.96rem; }
.service-tag{
  margin-top: auto;
  font-size: var(--text-small);
  color: var(--color-gold-text); /* era gold-dim: 3,85:1 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- 11. PROCESSO ---------- */
.process{ background: var(--color-ink); color: var(--color-cream); }
.process .section-head h2{ color: var(--color-cream); }
.process-list{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: step;
}
.process-item{
  position: relative;
  padding: var(--space-s) 0 var(--space-s) var(--space-l);
  border-top: 1px solid var(--color-line-light);
  counter-increment: step;
  display: grid;
  gap: 0.6rem;
}
.process-item:last-child{ border-bottom: 1px solid var(--color-line-light); }
.process-item::before{
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: var(--space-s);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-gold);
  font-style: italic;
}
.process-item h3{ color: var(--color-cream); font-size: 1.5rem; }
.process-item p{ color: var(--text-on-dark-soft); max-width: 56ch; }

@media (min-width: 860px){
  .process-item{
    grid-template-columns: 1fr 1.6fr;
    align-items: baseline;
    padding-left: var(--space-xl);
  }
  .process-item::before{ font-size: 2rem; }
}

/* ---------- 12. GALLERIA / TESSUTI ---------- */
.swatch-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px){ .swatch-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px){ .swatch-grid{ grid-template-columns: repeat(4, 1fr); } }

.swatch{
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-m);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--color-line);
}
.swatch-fabric{ position: absolute; inset: 0; transition: transform var(--dur-slower) var(--ease-out-expo); }
.swatch:hover .swatch-fabric{ transform: scale(1.08) rotate(1deg); }
.swatch-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Sopra il riflesso, altrimenti la luce che scorre slava la didascalia. */
  z-index: 3;
  /* La velatura precedente era gia' stata approfondita, ma restava troppo
     corta: il nome del tessuto cadeva dove la sfumatura era ormai al 30% e sui
     tessuti chiari spariva (Principe di Galles 2,18:1, Riga Sottile 3,46:1,
     Azzurro Atelier 3,69:1). Ora la velatura e' piu' ALTA, non piu' scura: il
     testo poggia sulla parte piena, e la dissolvenza verso il tessuto si
     distribuisce su tre volte lo spazio, quindi resta morbida come prima. */
  padding: 3rem 1rem 1rem;
  background: linear-gradient(0deg,
    rgba(23,19,16,0.92) 0%,
    rgba(23,19,16,0.88) 35%,
    rgba(23,19,16,0.72) 60%,
    rgba(23,19,16,0.35) 82%,
    transparent 100%);
  color: var(--color-cream);
  transform: translateY(6px);
  opacity: 0.96;
}
.swatch-caption .name{ font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
.swatch-caption .kind{ font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-light); }

/* pattern tessuti, generati solo con CSS */
.fabric-tweed{ background:
  repeating-linear-gradient(45deg, #6e1e2e 0 4px, #4a1420 4px 8px),
  repeating-linear-gradient(-45deg, rgba(183,136,63,0.35) 0 2px, transparent 2px 10px); background-blend-mode: multiply; }
.fabric-principe{ background:
  repeating-linear-gradient(90deg, #17130f 0 10px, #2a231d 10px 20px),
  repeating-linear-gradient(0deg, transparent 0 18px, rgba(247,241,228,0.5) 18px 20px); background-blend-mode: screen; background-color:#f7f1e4;}
.fabric-pied{ background-image:
  radial-gradient(circle at 25% 25%, #17130f 3px, transparent 3.5px),
  radial-gradient(circle at 75% 75%, #17130f 3px, transparent 3.5px);
  background-size: 16px 16px; background-color: #efe5d2; }
.fabric-gessato{ background:
  repeating-linear-gradient(180deg, #2a231d 0 2px, transparent 2px 22px), #171310; }
.fabric-lino{ background: linear-gradient(115deg, #efe5d2, #d9cbaf 45%, #efe5d2 55%, #d9cbaf 100%); }
.fabric-tweed2{ background:
  repeating-linear-gradient(135deg, #8a7c6b 0 3px, #6e1e2e 3px 6px),
  repeating-linear-gradient(45deg, rgba(23,19,16,0.35) 0 2px, transparent 2px 9px); }
.fabric-cashmere{ background: radial-gradient(ellipse at 30% 30%, #d9b876, #b7883f 60%, #9c7736 100%); }
.fabric-seta{ background: linear-gradient(120deg, #6e1e2e, #8c2c3f 30%, #4a1420 70%, #6e1e2e); }

/* ---------- 13. TESTIMONIANZE ---------- */
.testimonial-strip{
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin: 0 calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: thin;
}
.testimonial{
  scroll-snap-align: start;
  flex: 0 0 min(420px, 84vw);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.testimonial-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
}
.testimonial-quote::before{ content: "“"; color: var(--color-gold); }
.testimonial-quote::after{ content: "”"; color: var(--color-gold); }
.testimonial-author{ display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.testimonial-avatar{ width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.testimonial-name{ font-size: 0.9rem; font-weight: 500; }
/* Le regole restano pronte per quando arriveranno testimonianze vere: la
   sezione e' stata tolta dalla home perche' le tre recensioni erano inventate,
   non perche' fosse fatta male. Contrasti gia' corretti. */
.testimonial-role{ font-size: 0.78rem; color: var(--text-secondary); } /* era tertiary: 2,87:1 */
.testimonial-stars{ color: var(--color-gold-text); letter-spacing: 0.1em; font-size: 0.85rem; } /* era gold: 2,97:1 */

/* ---------- 14. CTA FINALE ---------- */
.cta-band{
  background: var(--color-wine);
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
}
.cta-band::before{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(247,241,228,0.05) 0 2px, transparent 2px 30px);
}
.cta-inner{
  position: relative;
  display: grid;
  gap: var(--space-m);
  text-align: left;
}
@media (min-width: 860px){
  .cta-inner{ grid-template-columns: 1.4fr auto; align-items: center; }
}
.cta-band h2{ color: var(--color-cream); }
.cta-band .lead{ color: var(--text-on-dark-soft); }

/* ---------- 15. FOOTER ---------- */
.site-footer{
  background: var(--color-ink);
  color: var(--text-on-dark-soft);
  padding-block: var(--space-xl) var(--space-m);
}
.footer-top{
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--color-line-light);
}
@media (min-width: 860px){
  .footer-top{ grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; }
}
.footer-brand .brand-word{ color: var(--color-cream); }
.footer-brand .brand-word span{ color: var(--color-gold-light); }
.footer-tagline{ margin-top: 1rem; max-width: 32ch; color: var(--text-on-dark-soft); }
.footer-social{ display: flex; gap: 0.8rem; margin-top: 1.4rem; }
.footer-social a{
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-line-light);
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo);
}
.footer-social a:hover{ background: var(--color-gold); color: var(--color-ink); transform: translateY(-3px); }
.footer-social svg{ width: 17px; height: 17px; }

.footer-col h4{ color: var(--color-cream); font-size: 1.1rem; margin-bottom: 1rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.92rem; }
.footer-col address{ font-style: normal; font-size: 0.92rem; line-height: 1.7; }

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-m);
  font-size: 0.8rem;
  /* Era --text-tertiary: inchiostro al 44% SU inchiostro pieno, cioe' 1,00:1.
     Copyright, link alla Privacy Policy e firma dello studio erano invisibili
     su tutte e sei le pagine. Il token giusto per il fondo scuro esisteva
     gia': 7,99:1. */
  color: var(--text-on-dark-soft);
}
.footer-bottom-links{ display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- 16. CHI SIAMO PAGE ---------- */
.split-section{ display: grid; gap: var(--space-l); }
@media (min-width: 900px){
  .split-section{ grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
}
.portrait-frame{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-wine) 0%, var(--color-wine-deep) 55%, var(--color-ink) 100%);
}
.portrait-frame .ornament{ position: absolute; inset: 0; opacity: 0.9; }
.portrait-frame .frame-caption{
  position: absolute; left: 1.4rem; bottom: 1.4rem; right: 1.4rem;
  color: var(--color-cream);
}
.portrait-frame .frame-caption .name{ font-family: var(--font-display); font-style: italic; font-size: 1.8rem; }
.portrait-frame .frame-caption .role{ font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-light); }

.values-grid{ display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: var(--space-m); }
@media (min-width: 700px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
.value-item{ display: flex; gap: 1rem; align-items: flex-start; }
.value-item svg{ width: 30px; height: 30px; color: var(--color-wine); flex-shrink: 0; margin-top: 0.2rem; }
.value-item h3{ font-size: 1.2rem; margin-bottom: 0.3rem; }
.value-item p{ font-size: 0.92rem; color: var(--text-secondary); }

.timeline{ display: flex; flex-direction: column; gap: 0; margin-top: var(--space-m); }
.timeline-item{
  display: grid;
  grid-template-columns: minmax(84px, 118px) 1fr;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-top: 1px solid var(--color-line);
  position: relative;
}
.timeline-item:last-child{ border-bottom: 1px solid var(--color-line); }
.timeline-item .year{ font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--color-wine); }

/* ---------- 17. SERVIZI PAGE: dettagli ---------- */
.service-detail{
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-l);
  border-top: 1px solid var(--color-line);
}
.service-detail:last-of-type{ border-bottom: 1px solid var(--color-line); }
@media (min-width: 860px){
  .service-detail{ grid-template-columns: 0.6fr 1fr; }
}
.service-detail-media{
  aspect-ratio: 16/10;
  border-radius: var(--radius-m);
  position: relative;
  overflow: hidden;
}
.service-detail-num{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-gold-text); /* era gold-dim: 3,65:1 */
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: block;
}
.service-detail ul.check-list{ margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.check-list li{ display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.94rem; color: var(--text-secondary); }
.check-list svg{ width: 18px; height: 18px; color: var(--color-wine); flex-shrink: 0; margin-top: 0.2rem; }

/* ---------- 18. GALLERIA PAGE: filtri ---------- */
.filter-bar{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-m); }
.filter-btn{
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--dur-fast) var(--ease-out-expo);
}
.filter-btn:hover{ border-color: var(--color-wine); color: var(--color-wine); }
.filter-btn.is-active{ background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }

/* ---------- 19. CONTATTI PAGE ---------- */
.contact-grid{ display: grid; gap: var(--space-l); }
@media (min-width: 960px){
  .contact-grid{ grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); }
}
.info-card{
  background: var(--color-ink);
  color: var(--color-cream);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.info-row{ display: flex; gap: 1rem; align-items: flex-start; }
.info-row svg{ width: 22px; height: 22px; color: var(--color-gold); flex-shrink: 0; margin-top: 0.15rem; }
.info-row h4{ color: var(--color-cream); font-size: 1rem; margin-bottom: 0.2rem; }
.info-row p, .info-row address{ color: var(--text-on-dark-soft); font-size: 0.92rem; font-style: normal; line-height: 1.6; }

.map-abstract{
  aspect-ratio: 16/9;
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
  background: var(--color-cream-dim);
}

/* Mappa Google a caricamento richiesto.
   Finche' il visitatore non preme "Mostra la mappa" non parte nessuna
   richiesta verso Google: si vede la mappa disegnata del sito, con sopra
   l'avviso. E' cio' che rende vera la frase della Privacy Policy. */
.map-block{ position: relative; }
.map-consent{ position: relative; }
.map-consent .map-abstract{ margin: 0; }
.map-consent-panel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: var(--space-s);
  text-align: center;
  border-radius: var(--radius-m);
  /* velatura piena sotto il testo: la mappa disegnata sotto e' chiara */
  background: linear-gradient(0deg, rgba(23,19,16,0.9), rgba(23,19,16,0.82));
  color: var(--color-cream);
}
.map-consent-text{
  max-width: 44ch;
  /* Scala del sito, non una misura nuova: --text-small e' il gradino gia'
     usato da etichette e note. */
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--color-cream);
}
.map-consent-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.4rem;
}
.map-consent-link{ font-size: var(--text-small); color: var(--color-gold-light); }

/* Caricata: l'avviso sparisce e resta la mappa vera. */
.map-frame{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--radius-m);
  display: block;
}

@media (max-width: 560px){
  /* qui il bottone e' dentro un pannello stretto: a piena larghezza starebbe
     appiccicato ai bordi della velatura */
  .map-consent-actions .btn{ width: auto; }
}

.form-field{ display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.3rem; }
.form-field label{ font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.form-field input, .form-field textarea, .form-field select{
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  padding: 0.9rem 1rem;
  transition: border-color var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast) var(--ease-out-expo);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  border-color: var(--color-wine);
  box-shadow: 0 0 0 3px rgba(110, 30, 46, 0.14);
  outline: none;
}
.form-row{ display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px){ .form-row{ grid-template-columns: 1fr 1fr; } }
.form-note{ font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.6rem; } /* era tertiary: 2,84:1 */
.form-success{
  display: none;
  align-items: center;
  gap: 0.8rem;
  background: rgba(110,30,46,0.08);
  border: 1px solid var(--color-wine);
  border-radius: var(--radius-s);
  padding: 1rem 1.2rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.form-success.is-visible{ display: flex; }
.form-success svg{ width: 20px; height: 20px; color: var(--color-wine); flex-shrink: 0; }

/* ---------- 20. PAGE HEADER (interne) ---------- */
.page-hero{
  padding-top: calc(var(--space-2xl) + 2rem);
  padding-bottom: var(--space-l);
  background:
    radial-gradient(ellipse at 85% 0%, rgba(183,136,63,0.16), transparent 60%),
    var(--color-cream);
}
.page-hero h1{ max-width: 18ch; }
.page-hero .lead{ max-width: 60ch; margin-top: 1.2rem; }
.breadcrumbs{ display: flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1.2rem; } /* era tertiary: 2,84:1 */
.breadcrumbs a:hover{ color: var(--color-wine); }

/* ---------- 21. PRIVACY POLICY ---------- */
.policy-content{ max-width: 74ch; }
.policy-content h2{ font-size: 1.6rem; margin-top: var(--space-l); margin-bottom: 0.8rem; }
.policy-content h2:first-child{ margin-top: 0; }
.policy-content h3{ font-size: 1.15rem; margin-top: var(--space-m); margin-bottom: 0.5rem; }
.policy-content p{ color: var(--text-secondary); }
.policy-content ul{ margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.2rem; list-style: disc; color: var(--text-secondary); }
.policy-content li::marker{ color: var(--color-wine); }
.policy-meta{ font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--space-m); } /* era tertiary: 2,84:1 */

/* ---------- 22. COOKIE BANNER ---------- */
.cookie-banner{
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 900;
  background: var(--color-ink);
  color: var(--color-cream);
  border-radius: var(--radius-m);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(140%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size: 0.86rem; color: var(--text-on-dark-soft); }
.cookie-actions{ display: flex; gap: 0.8rem; flex-wrap: wrap; }
.cookie-actions .btn{ padding: 0.7rem 1.3rem; font-size: 0.76rem; }
/* Il banner ha fondo scuro: senza questo il bottone "Chiudi" resta
   inchiostro su inchiostro, cioè invisibile. */
.cookie-actions .btn-outline{
  color: var(--color-cream);
  border-color: var(--color-line-light);
}
.cookie-actions .btn-outline::before{ background: var(--color-gold); }
.cookie-actions .btn-outline:hover{ color: var(--color-ink); border-color: var(--color-gold); }

/* Ancorato in basso a sinistra (e non a destra, dove il pulsante "torna su" e le
   colonne di testo principali si trovano più spesso nei layout asimmetrici del sito),
   per ridurre al minimo la sovrapposizione con i contenuti editoriali. */
@media (min-width: 640px){
  .cookie-banner{ right: auto; left: 1.5rem; bottom: 1.5rem; max-width: 360px; }
}

/* ---------- 23. UTILS ---------- */
.mt-0{ margin-top: 0 !important; }
.center-text{ text-align: center; }
.max-w-p{ max-width: 62ch; }
.max-w-p-lg{ max-width: 72ch; }

.back-to-top{
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-expo), visibility var(--dur-normal);
  z-index: 300;
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--color-wine); }
.back-to-top svg{ width: 18px; height: 18px; }

.badge-swiss{
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  /* Vive solo nel piede scuro: --text-tertiary lo rendeva invisibile (1,00:1).
     Era la firma dello studio, e non si vedeva su nessuna pagina. */
  color: var(--text-on-dark-soft);
}
.badge-swiss svg{ width: 16px; height: 16px; }

/* ==========================================================================
   24 → 31 · MICRO-INTERAZIONI DEL MESTIERE
   Aggiunte pensate per restare "calme": una cosa in movimento alla volta,
   durate lunghe, nessun effetto tech (glitch/neon/particelle).
   Tutto è progressive enhancement: senza JS il sito resta completo.
   ========================================================================== */

/* ---------- 24. CURSORE SARTORIALE (ago + gessetto con scia) ---------- */
.cursor-kit{
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: none;
}
html.has-cursor .cursor-kit{ display: block; }

/* Il cursore di sistema viene nascosto solo quando il cursore custom è attivo
   (puntatore fine + nessuna preferenza di motion ridotto). I campi di testo
   mantengono sempre il caret nativo: lì la precisione conta più dell'effetto. */
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor .btn,
html.has-cursor [role="button"]{ cursor: none; }
html.has-cursor input,
html.has-cursor textarea{ cursor: text; }
html.has-cursor select,
html.has-cursor input[type="checkbox"],
html.has-cursor input[type="radio"],
html.has-cursor input[type="submit"]{ cursor: pointer; }

.cursor-trail{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cursor-tool{
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 36px;
  /* La punta dell'ago è disegnata a 4,4 nel viewBox: il margine negativo la
     riporta esattamente sul punto del puntatore. */
  margin: -4px 0 0 -4px;
  overflow: visible;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity var(--dur-normal) var(--ease-out-expo);
}
.cursor-tool g{
  transform-origin: 5px 5px;
  transition: opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-back);
}
/* L'ago attraversa fondi crema e fondi inchiostro: corpo scuro con filetto
   chiaro, così resta leggibile su entrambi senza cambiare colore. */
.cursor-needle-shape,
.cursor-needle-collar{
  fill: var(--color-ink);
  stroke: rgba(247, 241, 228, 0.92);
  stroke-width: 0.9;
}
.cursor-needle-eye{ fill: var(--color-cream); }
.cursor-needle-thread{ fill: none; stroke: var(--color-wine-bright); stroke-width: 1.5; stroke-linecap: round; }
.cursor-chalk-shape{ fill: var(--color-cream); stroke: var(--color-ink); stroke-width: 1.1; }
.cursor-chalk-tip{ fill: var(--color-wine); }

.cursor-tool .tool-chalk{ opacity: 0; transform: scale(0.7); }
.cursor-tool .tool-needle{ opacity: 1; transform: scale(1); }
.cursor-kit.is-marking .cursor-tool .tool-chalk{ opacity: 1; transform: scale(1); }
.cursor-kit.is-marking .cursor-tool .tool-needle{ opacity: 0; transform: scale(0.7); }
.cursor-kit.is-idle .cursor-tool{ opacity: 0; }
.cursor-kit.is-pressing .cursor-tool g{ transform: scale(0.86); }

/* Scroll bloccato mentre l'ago cuce il logo. */
body.is-loading{ overflow: hidden; }

/* ---------- 25. CUCITURA SU BOTTONI E LINK ---------- */
/* La cornice tratteggiata viene "disegnata" da una maschera che avanza:
   il tratteggio resta un punto ago regolare, la rivelazione è progressiva. */
/* Specificità volutamente più alta di `.btn svg`, che dimensiona le icone
   a 1.1em: senza questo la cornice cucita nascerebbe di 15 pixel. */
.btn .btn-seam{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  color: inherit;
}
/* E non è un'icona: non deve scorrere di lato all'hover. */
.btn:hover .btn-seam,
.btn:focus-visible .btn-seam{ transform: none; }
.seam-stitch{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-dasharray: 4.5 4;
  stroke-linecap: round;
  opacity: 0.5;
}
.seam-reveal{
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 980ms var(--ease-out-quart);
}
.btn:hover .seam-reveal,
.btn:focus-visible .seam-reveal{ stroke-dashoffset: 0 !important; }

.btn-thread{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out-expo);
}
/* Al rilascio il filo torna in tensione con un piccolo rimbalzo, come un punto
   che si assesta. Durante il movimento del cursore nessuna transizione:
   il filo deve seguire la mano, non inseguirla. */
.btn-thread.is-releasing{
  transition: opacity var(--dur-normal) var(--ease-out-expo), d 520ms var(--ease-out-back);
}
.btn:hover .btn-thread,
.btn:focus-visible .btn-thread{ opacity: 0.55; }

/* Link: la sottolineatura non è più una linea piena ma un punto ago cucito
   da sinistra a destra. */
.link-thread{
  background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px);
  background-size: 0% 1px;
}
.link-thread:hover, .link-thread:focus-visible{ background-size: 100% 1px; }

@media (min-width: 960px){
  .nav-desktop a::after{
    background: repeating-linear-gradient(90deg, var(--color-wine) 0 4px, transparent 4px 8px);
    width: 0;
    transform: none;
    transition: width var(--dur-slow) var(--ease-out-expo);
  }
  .nav-desktop a:hover::after,
  .nav-desktop a[aria-current="page"]::after{ width: 100%; transform: none; }
}

/* ---------- 26. PARALLAX & SROTOLAMENTO (clip-path) ---------- */
.has-js [data-parallax]{ will-change: transform; }

/* Il ritaglio vive sul figlio, non sull'elemento osservato: un elemento
   ritagliato a zero viene visto dall'IntersectionObserver come fuori schermo,
   e non si rivelerebbe mai. */
[data-unroll] > .unroll-inner{
  display: block;
  width: 100%;
  height: 100%;
}
.has-js [data-unroll] > .unroll-inner{
  clip-path: inset(0 0 100% 0);
  transform: translateY(-3%) scale(1.04);
  transition: clip-path 1.25s var(--ease-out-expo), transform 1.4s var(--ease-out-expo);
}
[data-unroll].is-visible > .unroll-inner{
  clip-path: inset(0 0 0 0);
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .has-js [data-unroll] > .unroll-inner{ clip-path: none; transform: none; }
}

/* ---------- 27. IMMAGINI: zoom + variazione di luce ---------- */
.media-frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  isolation: isolate;
  background: var(--color-cream-dim);
}
.media-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.005);
  transition: transform 1.5s var(--ease-out-expo), filter 1.5s var(--ease-out-expo);
}
.media-frame:hover img,
.media-frame:focus-within img{
  transform: scale(1.055);
  filter: brightness(1.05) contrast(1.03) saturate(1.04);
}
/* Riflesso morbido: la luce che scorre sul tessuto, non un flash. */
.media-frame::after{
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 40%,
    rgba(247,241,228,0.14) 48%,
    rgba(247,241,228,0.04) 55%,
    transparent 62%);
  transform: translate3d(-45%, 0, 0);
  opacity: 0;
  transition: transform 1.6s var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo);
}
.media-frame:hover::after,
.media-frame:focus-within::after{ transform: translate3d(45%, 0, 0); opacity: 1; }

.media-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Misurata a pixel sopra la foto vera: 7,4:1 e 7,9:1. Regge, e resta com'e'.
     (Un controllo automatico la segnala perche' non sa leggere un fondo
     fotografico e ripiega sul bianco: e' un falso allarme, non un difetto.) */
  padding: 1.2rem 1.3rem;
  background: linear-gradient(0deg, rgba(23,19,16,0.78), transparent 80%);
  color: var(--color-cream);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Lo stesso riflesso sulle campionature CSS della galleria. */
.swatch::after{
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 40%,
    rgba(247,241,228,0.16) 48%,
    rgba(247,241,228,0.05) 55%,
    transparent 62%);
  transform: translate3d(-45%, 0, 0);
  opacity: 0;
  transition: transform 1.6s var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo);
}
.swatch:hover::after{ transform: translate3d(45%, 0, 0); opacity: 1; }
.swatch:hover .swatch-fabric{ filter: brightness(1.06) saturate(1.05); }
.swatch-fabric{ transition: transform var(--dur-slower) var(--ease-out-expo), filter var(--dur-slower) var(--ease-out-expo); }

/* ---------- 28. TRANSIZIONE A TENDA + VELO DI TESSUTO ---------- */
.curtain{
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  display: none;
}
.has-js .curtain{ display: block; }

.curtain-panel{
  position: absolute;
  top: 0; bottom: 0;
  width: 51%;
  background-color: var(--color-wine-deep);
  background-image:
    linear-gradient(90deg, rgba(23,19,16,0.55) 0%, rgba(23,19,16,0) 22%, rgba(23,19,16,0.28) 48%, rgba(23,19,16,0) 74%, rgba(23,19,16,0.5) 100%),
    repeating-linear-gradient(90deg, rgba(23,19,16,0.16) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(247,241,228,0.045) 0 1px, transparent 1px 4px),
    image-set(url("images/tessuto-lana-macro.webp") type("image/webp"), url("images/tessuto-lana-macro.jpg") type("image/jpeg"));
  background-size: auto, auto, auto, cover;
  background-position: center;
  background-blend-mode: normal, multiply, normal, soft-light;
  will-change: transform;
}
.curtain-panel.is-left{ left: 0; --curtain-exit: -101%; }
.curtain-panel.is-right{ right: 0; --curtain-exit: 101%; }

/* Bordo interno cucito: la tenda ha un orlo, non un taglio netto. */
.curtain-panel::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(0deg, var(--color-gold-light) 0 6px, transparent 6px 12px);
  opacity: 0.65;
}
.curtain-panel.is-left::after{ right: 6px; }
.curtain-panel.is-right::after{ left: 6px; }

/* Bastone dorato in alto. */
.curtain-panel::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold-dim));
  opacity: 0.9;
}

/* Velo: la dissolvenza usa una texture di stoffa, non un fade nero. */
.curtain-veil{
  position: absolute;
  inset: 0;
  opacity: 0;
  background-color: var(--color-cream);
  /* Il velo deve sapere di stoffa, non essere una fotografia di stoffa:
     la crema in cima riduce lo scatto a una grana appena percepibile. */
  background-image:
    linear-gradient(rgba(247,241,228,0.88), rgba(247,241,228,0.88)),
    repeating-linear-gradient(115deg, rgba(23,19,16,0.07) 0 2px, transparent 2px 9px),
    image-set(url("images/tessuto-lana-macro.webp") type("image/webp"), url("images/tessuto-lana-macro.jpg") type("image/jpeg"));
  background-size: auto, auto, cover;
  background-position: center;
  background-blend-mode: normal, multiply, normal;
}

/* A riposo le tende stanno FUORI campo e ferme.
   Prima l'animazione di apertura partiva a ogni caricamento: aprendo il sito
   da zero si vedeva la transizione tra pagine, che non c'entra niente con
   l'arrivo. Peggio ancora alla primissima visita, dove partiva subito dopo la
   schermata di caricamento (togliendo `first-load` l'animazione si riattivava
   e ripartiva da capo). */
.has-js .curtain-panel{ transform: translate3d(var(--curtain-exit), 0, 0); }
.has-js .curtain-veil{ opacity: 0; }

/* La tenda si apre SOLO arrivando da un'altra pagina del sito: e' la pagina
   che stiamo lasciando a lasciare il segnale (vedi script.js, sezione 2). */
.has-js.from-nav .curtain-panel{ animation: curtainOpen 1s var(--ease-out-expo) both; }
.has-js.from-nav .curtain-veil{ animation: veilOut 780ms var(--ease-out-expo) both; }

.curtain.is-closing .curtain-panel{ animation: curtainClose 620ms var(--ease-in-out-expo) both; }
.curtain.is-closing .curtain-veil{ animation: veilIn 620ms var(--ease-out-quart) both; }

@keyframes curtainOpen{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(var(--curtain-exit), 0, 0); }
}
@keyframes curtainClose{
  from{ transform: translate3d(var(--curtain-exit), 0, 0); }
  to{ transform: translate3d(0, 0, 0); }
}
@keyframes veilOut{ from{ opacity: 0.72; } to{ opacity: 0; } }
@keyframes veilIn{ from{ opacity: 0; } to{ opacity: 0.72; } }

/* ---------- 29. SCHERMATA DI CARICAMENTO (l'ago cuce il logo) ---------- */
.stitch-loader{
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  /* Rete di sicurezza in CSS: se il JS non parte o si interrompe,
     la schermata si congeda comunque da sola. */
  animation: loaderFailsafe 5s linear forwards;
}
html.has-js.first-load .stitch-loader{ display: flex; }

.loader-panel{
  position: absolute;
  top: 0; bottom: 0;
  width: 51%;
  background-color: var(--color-ink);
  /* Il velo di inchiostro riporta la fotografia al rango di texture: senza,
     la lana ruba la scena alla cucitura dorata. */
  background-image:
    linear-gradient(rgba(23,19,16,0.66), rgba(23,19,16,0.66)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 24px),
    image-set(url("images/tessuto-lana-macro.webp") type("image/webp"), url("images/tessuto-lana-macro.jpg") type("image/jpeg"));
  background-size: auto, auto, cover;
  background-position: center;
  background-blend-mode: normal, multiply, normal;
  transition: transform 900ms var(--ease-in-out-expo);
}
.loader-panel.is-left{ left: 0; }
.loader-panel.is-right{ right: 0; }
.stitch-loader.is-done .loader-panel.is-left{ transform: translate3d(-101%, 0, 0); }
.stitch-loader.is-done .loader-panel.is-right{ transform: translate3d(101%, 0, 0); }

.loader-inner{
  position: relative;
  z-index: 2;
  width: min(760px, 86vw);
  transition: opacity var(--dur-normal) var(--ease-out-expo);
}
.stitch-loader.is-done .loader-inner{ opacity: 0; }

.loader-sew{ width: 100%; height: auto; overflow: visible; }
.sew-ghost{
  fill: none;
  stroke: rgba(247,241,228,0.16);
  stroke-width: 0.8;
}
.sew-stitch{
  fill: none;
  stroke: var(--color-gold-light);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sew-ghost, .sew-stitch{
  font-family: var(--font-display);
  font-size: 118px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-anchor: middle;
}
.sew-mask-rect{ transform: scaleX(0); transform-origin: 0 0; }
.sew-needle{ opacity: 0; }
.is-sewing .sew-mask-rect{ animation: sewReveal 2s cubic-bezier(0.36, 0.02, 0.24, 1) forwards; }
.is-sewing .sew-needle{ animation: sewNeedle 2s cubic-bezier(0.36, 0.02, 0.24, 1) forwards; }
@keyframes sewReveal{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
/* Nessun fotogramma intermedio sulla trasformazione: così l'ago resta
   esattamente sul bordo della maschera che rivela la cucitura. */
@keyframes sewNeedle{
  0%{ opacity: 0; transform: translateX(8px); }
  7%{ opacity: 1; }
  93%{ opacity: 1; }
  100%{ opacity: 0; transform: translateX(552px); }
}
/* Il su e giù del punto vive su un gruppo separato, per non sfasare la corsa. */
.is-sewing .sew-needle-bob{ animation: sewBob 440ms ease-in-out infinite; }
@keyframes sewBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}
.sew-needle-shape{ fill: var(--color-cream); }
.sew-needle-eye{ fill: none; stroke: var(--color-wine-bright); stroke-width: 2; }

.loader-word{
  margin-top: 1.4rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(247,241,228,0.5);
}

@keyframes loaderFailsafe{
  0%, 96%{ opacity: 1; visibility: visible; }
  100%{ opacity: 0; visibility: hidden; pointer-events: none; }
}
.stitch-loader.is-gone{ display: none !important; }

/* ---------- 30. STORYTELLING: IL CAPO CHE SI CUCE ---------- */
/* Nessun overflow qui: un antenato che ritaglia trasformerebbe il telaio
   sticky in un elemento statico. */
.sew-story{ background: var(--color-paper); }
.sew-story-grid{ display: grid; gap: var(--space-m); }
@media (min-width: 900px){
  .sew-story-grid{ grid-template-columns: 0.95fr 1fr; gap: var(--space-xl); align-items: start; }
}

.sew-stage{
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(183,136,63,0.12), transparent 62%),
    var(--color-cream);
  padding: var(--space-s);
}
@media (min-width: 900px){
  .sew-stage{ position: sticky; top: calc(var(--space-xl) + 1rem); }
}
.sew-stage-label{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-secondary); /* era tertiary: 2,84:1 */
  margin-bottom: 0.6rem;
}
.sew-stage-label .value{ font-family: var(--font-display); font-style: italic; font-size: 1.1rem; letter-spacing: 0; color: var(--color-wine); text-transform: none; }

.jacket{ width: 100%; height: auto; display: block; max-height: 56vh; }
/* Il modello prima della cucitura: appena accennato, come un gessato. */
.jacket-ghost{ fill: none; stroke: rgba(23, 19, 16, 0.2); stroke-width: 1; stroke-dasharray: 1.5 5; }
.jacket-stitch{
  fill: none;
  stroke: var(--color-wine);
  stroke-width: 2.1;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jacket-draw{
  fill: none;
  stroke: #fff;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Il tessuto entra in moltiplica: scurisce la carta invece di sbiadirla,
   così il capo resta nei toni caldi della palette. */
.jacket-cloth{ opacity: 0; mix-blend-mode: multiply; transition: opacity var(--dur-slow) linear; }
.jacket-buttons circle{
  fill: var(--color-ink);
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-back);
}
.jacket-buttons.is-on circle{ opacity: 1; transform: scale(1); }
.jacket-buttons.is-on circle:nth-child(2){ transition-delay: 0.12s; }
.jacket-buttons.is-on circle:nth-child(3){ transition-delay: 0.24s; }
.jacket-needle{ opacity: 0; transition: opacity var(--dur-normal) linear; }
.jacket-needle.is-on{ opacity: 1; }
.jacket-needle-shape{ fill: var(--color-ink); }
.jacket-needle-eye{ fill: none; stroke: var(--color-gold-light); stroke-width: 2.4; }

.sew-steps{ display: flex; flex-direction: column; }
.sew-step{
  padding-block: var(--space-m);
  border-top: 1px dashed var(--color-line);
  opacity: 0.4;
  transition: opacity var(--dur-slow) var(--ease-out-expo);
}
.sew-step:last-child{ border-bottom: 1px dashed var(--color-line); }
/* Passi molto distanziati: la colonna di testo è ciò che tiene appuntato il
   telaio, quindi la sua altezza è la durata della cucitura. */
@media (min-width: 900px){
  .sew-step{ padding-block: var(--space-xl); }
}
.sew-step.is-active{ opacity: 1; }
.sew-step .num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-gold-text); /* era gold-dim: 3,85:1 */
  display: block;
  margin-bottom: 0.4rem;
}
.sew-step h3{ font-size: 1.6rem; }
.sew-step p{ color: var(--text-secondary); margin-top: 0.6rem; max-width: 48ch; }
@media (prefers-reduced-motion: reduce){
  .sew-step{ opacity: 1; }
}

/* ---------- 31. BANDA TESSUTO IN PARALLASSE ---------- */
.fabric-band{
  position: relative;
  height: clamp(300px, 46vw, 560px);
  overflow: hidden;
  background: var(--color-ink);
}
.fabric-band .fabric-band-media{
  position: absolute;
  top: -12%; left: 0;
  width: 100%; height: 124%;
}
.fabric-band .fabric-band-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.fabric-band-quote{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}
.fabric-band-quote blockquote{
  max-width: 30ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.16;
  color: var(--color-cream);
  text-shadow: 0 2px 30px rgba(23,19,16,0.55);
}
.fabric-band-quote cite{
  display: block;
  margin-top: 1.2rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.fabric-band::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(23,19,16,0.82), rgba(23,19,16,0.35) 55%, rgba(23,19,16,0.6));
}

.atelier-split{ display: grid; gap: var(--space-m); }
@media (min-width: 860px){
  .atelier-split{ grid-template-columns: 1fr 0.9fr; gap: var(--space-xl); align-items: center; }
}
.atelier-split .media-frame{ aspect-ratio: 3/4; }

/* ---------- 32. RIFINITURE SUI CONTENITORI DI IMMAGINE ---------- */
/* <picture> è inline per default: senza questo il figlio non riempie il frame. */
.media-frame picture,
.fabric-band-media picture,
.media-frame .unroll-inner{
  display: block;
  width: 100%;
  height: 100%;
}