@charset "utf-8";
/* =========================================================================
   EMMELÙ — Capsule limited edition cucite a mano in Italia
   Stile: minimal editoriale, palette del logo (blush + espresso)
   ========================================================================= */

/* I font self-hosted sono in fonts.css, collegato prima di questo foglio
   nell'HTML: niente @import, così i due file si scaricano in parallelo. */

/* ---------- 2. Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* l'ancora si ferma sotto l'header fisso, qualunque sia la sua altezza */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* Le animazioni d'ingresso partono spostate di 28 px lateralmente
     ([data-reveal="left"|"right"]): sui pilastri quello sbordo apriva una
     barra di scorrimento orizzontale sul telefono. "clip" taglia l'eccedenza
     senza rendere la pagina scorrevole in orizzontale e — a differenza di
     overflow:hidden — non crea un contenitore di scorrimento, quindi
     l'header fisso e lo scorrimento alle ancore restano intatti. */
  overflow-x: clip;
  /* Sul telefono lo scroll "di troppo" in cima o in fondo passerebbe alla
     pagina del browser (pull-to-refresh, rimbalzo della barra): lo tiene
     tutto dentro il sito, che così sembra rispondere sempre lui e non un
     livello sopra. Non incide sulle prestazioni, solo sulla sensazione. */
  overscroll-behavior-y: contain;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] { list-style: none; }

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

/* l'attributo hidden deve vincere su qualsiasi display dichiarato dopo */
[hidden] { display: none !important; }

/* I titoli non devono mai chiedere il grassetto predefinito del browser: un
   <h2 class="visually-hidden"> senza peso dichiarato ereditava il 700, che
   corrisponde alla faccia Jost 600 e faceva scaricare 26 KB di font per un
   testo che nessuno vede. :where() ha specificità zero, quindi ogni regola
   già scritta continua a vincere. */
:where(h1, h2, h3, h4, h5, h6) { font-weight: 300; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* ---------- 3. Design tokens */
:root {
  /* Colori estratti dal logo EMMELÙ */
  --c-espresso: #3f2418;
  --c-espresso-2: #5c3d2e;
  --c-espresso-3: #8a6a58;
  --c-blush: #f6ddd0;
  --c-blush-soft: #fbeae1;
  --c-paper: #fbf7f4;
  --c-paper-2: #f4ece5;
  --c-terracotta: #c2836a;
  /* variante scura del terracotta, per i testi: contrasto AA sulle superfici chiare */
  --c-terracotta-ink: #9c5539;
  --c-white: #ffffff;

  --c-bg: var(--c-paper);
  --c-text: var(--c-espresso);
  --c-muted: #6f5346;
  --c-line: rgba(63, 36, 24, 0.16);
  --c-line-soft: rgba(63, 36, 24, 0.08);
  --c-overlay: rgba(35, 19, 12, 0.32);
  --c-focus: #8a4a2c;

  /* Tipografia */
  --f-sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: "Cormorant Garamond", Iowan Old Style, Georgia, "Times New Roman", serif;

  --fs-micro: clamp(0.66rem, 0.62rem + 0.16vw, 0.74rem);
  --fs-small: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --fs-body: clamp(0.94rem, 0.9rem + 0.24vw, 1.06rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.5vw, 1.32rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.7vw, 4rem);
  --fs-h1: clamp(2.3rem, 1.3rem + 4.6vw, 5.6rem);
  --fs-giant: clamp(4rem, 1rem + 15vw, 15rem);

  /* Spaziature e layout */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5rem;
  --sp-7: clamp(4.5rem, 3rem + 7vw, 10rem);

  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 4rem);
  --maxw: 82.5rem;
  --maxw-text: 46rem;
  --radius: 2px;
  --radius-lg: 1.25rem;

  --header-h: 4.5rem;

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.25s;
  --dur-2: 0.5s;
  --dur-3: 0.9s;
}

@media (min-width: 60em) {
  :root { --header-h: 5.25rem; }
}

/* ---------- 4. Base */
body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked {
  overflow: hidden;
  /* evita il salto di layout alla comparsa dell'overlay */
  touch-action: none;
}

::selection {
  background: var(--c-espresso);
  color: var(--c-blush);
}

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

/* Accessibilità: link di salto contenuto */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: var(--sp-2);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--c-espresso);
  color: var(--c-paper);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-1) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Utility di layout */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--maxw-text) + var(--gutter) * 2); }

.section { padding-block: var(--sp-7); }

.section--tight { padding-block: var(--sp-6); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-terracotta);
  flex: none;
}

.eyebrow--center { justify-content: center; }

.title {
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.title em {
  font-family: var(--f-serif);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--c-muted);
  max-width: 42ch;
}

.text-center { text-align: center; }

/* ---------- 6. Bottoni e link */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-espresso);
  --btn-bd: var(--c-espresso);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease-out-expo);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-espresso);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.btn:hover,
.btn:focus-visible {
  color: var(--c-blush-soft);
  border-color: var(--c-espresso);
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }

.btn:active { transform: scale(0.98); }

.btn--solid {
  --btn-bg: var(--c-espresso);
  --btn-fg: var(--c-blush-soft);
}

.btn--solid::after { background: var(--c-terracotta); }

.btn--light {
  --btn-fg: var(--c-paper);
  --btn-bd: rgba(251, 247, 244, 0.7);
}

.btn--light::after { background: var(--c-paper); }

.btn--light:hover,
.btn--light:focus-visible { color: var(--c-espresso); }

.btn__icon {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.btn:hover .btn__icon { transform: translateX(3px); }

/* Link con sottolineatura animata */
.link-line {
  position: relative;
  text-decoration: none;
  padding-block-end: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-2) var(--ease-out-expo);
}

.link-line:hover,
.link-line:focus-visible { background-size: 100% 1px; }

/* CTA d'ordine nell'header: stesso bersaglio di tutte le altre — il direct
   di Instagram — ma sempre visibile, senza dover scorrere fino in fondo.
   Riusa la geometria di .btn in scala ridotta invece di ridichiararla. */
.header__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--c-espresso);
  border-radius: 999px;
  background: var(--c-espresso);
  color: var(--c-paper);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.header__cta:hover,
.header__cta:focus-visible {
  background: transparent;
  color: var(--c-espresso);
}

/* Ogni scheda ha il proprio link d'ordine: chi si è innamorato di un pezzo
   preciso non deve cercare la CTA generica in fondo alla sezione. */
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding-block: 0.3rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-terracotta-ink);
  transition: color var(--dur-2) var(--ease);
}

.card__cta .btn__icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.card__cta:hover,
.card__cta:focus-visible { color: var(--c-espresso); }

.card__cta:hover .btn__icon,
.card__cta:focus-visible .btn__icon { transform: translateX(4px); }

.steps__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

.banner__eyebrow {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- 7. Header */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease), backdrop-filter 0.45s var(--ease);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(251, 247, 244, 0.8), transparent);
  opacity: 1;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.header.is-stuck {
  background: rgba(251, 247, 244, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--c-line-soft);
}

/* Il vetro sfocato sull'header fisso costringe il telefono a ricalcolare
   la sfocatura del contenuto sottostante a ogni fotogramma di scroll: è
   la causa più probabile dello scroll poco fluido segnalato su mobile.
   Sotto i 62em si passa a uno sfondo pieno, senza sfocatura da ricalcolare. */
@media (max-width: 61.99em) {
  .header.is-stuck {
    background: rgba(251, 247, 244, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.header.is-stuck::before { opacity: 0; }

.header.is-hidden { transform: translateY(-105%); }

/* con il menu aperto lo sfondo è chiaro: il marchio torna scuro */
.header.is-over-menu { color: var(--c-espresso); }
.header.is-over-menu::before { opacity: 0; }

.header__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Il colore del testo è sempre scuro: sotto c'è la foto chiara dell'hero */
.header { color: var(--c-espresso); }

.header__nav { display: none; }
.header__nav--sections { grid-column: 1; grid-row: 1; }
.header__nav--end { grid-column: 3; grid-row: 1; }

/* Soglia della barra desktop: 76em (1216 px). Le sei voci più il marchio
   centrato e i collegamenti esterni chiedono spazio, e le colonne 1fr si
   allargano fino a toccare esattamente il marchio, lasciando come unico
   margine il gap della griglia — 16px, zero scorta reale. Va bene in un
   browser senza barra di scorrimento riservata, ma su Windows/Linux quella
   barra toglie ~15-17px alla larghezza utile per i breakpoint (mentre i
   font e le spaziature qui sotto, calcolati in vw, non la considerano):
   la differenza basta a far toccare il testo al marchio. Il gap più largo
   sotto e la soglia spostata più in là tengono un margine vero anche in
   quelle condizioni. Sotto la soglia comanda il menu a tutta pagina. */
@media (min-width: 76em) {
  .header__inner { column-gap: var(--sp-4); }

  .header__nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.4vw, 1.5rem);
    min-width: 0;
  }
  .header__nav--end { justify-content: flex-end; }
}

.header__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.82;
  transition: opacity var(--dur-1) var(--ease);
}

/* Sottolineatura che cresce dal centro: passaggio del mouse, focus da
   tastiera e sezione in lettura usano lo stesso segno grafico. */
.header__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.05rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.header__link:hover,
.header__link:focus-visible { opacity: 1; }

.header__link:hover::after,
.header__link:focus-visible::after { transform: scaleX(1); }

/* Sezione attualmente sotto gli occhi: la marca lo script di scroll-spy */
.header__link[aria-current="true"] { opacity: 1; }
.header__link[aria-current="true"]::after { transform: scaleX(1); }

.header__brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.header__brand:hover { transform: scale(1.04); }

.header__brand svg {
  width: clamp(4.2rem, 9vw, 5.6rem);
  height: auto;
  color: currentColor;
}

/* Bottone menu mobile */
.burger {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 6px;
  align-items: flex-end;
}

@media (min-width: 76em) { .burger { display: none; } }

/* Senza JavaScript il menu a scomparsa non sarebbe apribile:
   l'header diventa statico e mostra tutti i collegamenti. */
html:not(.js) .header {
  position: static;
  height: auto;
  padding-block: 0.85rem;
  background: var(--c-paper-2);
  color: var(--c-espresso);
}

html:not(.js) .header::before { display: none; }
html:not(.js) .burger { display: none; }

html:not(.js) .header__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.75rem;
}

html:not(.js) .header__brand { grid-column: auto; }

html:not(.js) .header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  /* l'header senza JavaScript è a colonna singola: le collocazioni
     esplicite della barra desktop creerebbero colonne inesistenti */
  grid-column: auto;
  grid-row: auto;
}

html:not(.js) .hero__inner { padding-top: var(--sp-5); }

/* Menu overlay mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-content: center;
  padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--sp-5);
  background: var(--c-blush-soft);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out-expo), visibility 0s linear 0.7s;
}

.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-out-expo), visibility 0s;
}

.menu__list {
  list-style: none;
  display: grid;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.menu__item {
  overflow: hidden;
}

.menu__link {
  display: block;
  font-size: clamp(2rem, 11vw, 3.4rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-out-expo), color var(--dur-1) var(--ease);
}

.menu.is-open .menu__link { transform: translateY(0); }

.menu__item:nth-child(1) .menu__link { transition-delay: 0.08s; }
.menu__item:nth-child(2) .menu__link { transition-delay: 0.14s; }
.menu__item:nth-child(3) .menu__link { transition-delay: 0.2s; }
.menu__item:nth-child(4) .menu__link { transition-delay: 0.26s; }
.menu__item:nth-child(5) .menu__link { transition-delay: 0.32s; }

.menu__link:hover { color: var(--c-terracotta-ink); }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.35s;
}

.menu.is-open .menu__foot { opacity: 1; }

@media (min-width: 76em) { .menu { display: none; } }

/* ---------- 8. Hero */
/* La foto è chiara e la borsa sta a destra: il testo vive sulla parete
   vuota a sinistra, in colore scuro. Nessun testo sovrapposto a un altro. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  background: var(--c-paper-2);
}

.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  will-change: transform;
}

.hero__media picture { display: contents; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* velo chiaro che garantisce la leggibilità del testo sulla foto */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(251, 247, 244, 0.94) 0%, rgba(251, 247, 244, 0.72) 48%, rgba(251, 247, 244, 0.18) 100%);
  pointer-events: none;
}

@media (min-width: 48em) {
  .hero__media img { object-position: 68% 50%; }
  .hero::after {
    background:
      linear-gradient(to right, rgba(251, 247, 244, 0.95) 0%, rgba(251, 247, 244, 0.82) 34%, rgba(251, 247, 244, 0.25) 62%, rgba(251, 247, 244, 0) 82%),
      linear-gradient(to bottom, rgba(251, 247, 244, 0.5) 0%, rgba(251, 247, 244, 0) 34%);
  }
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-6);
  color: var(--c-espresso);
}

.hero__content {
  max-width: 34rem;
  will-change: transform, opacity;
}

.hero__eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-espresso-2);
  margin-bottom: var(--sp-2);
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__sub {
  margin-top: var(--sp-2);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.32rem);
  font-weight: 300;
  line-height: 1.5;
  max-width: 32ch;
  color: var(--c-espresso-2);
}

.hero__sub em {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-espresso);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.hero__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

.hero__scroll {
  position: absolute;
  bottom: clamp(1.2rem, 4vh, 2.5rem);
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-espresso-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 48em) {
  .hero__scroll { left: var(--gutter); translate: 0 0; align-items: flex-start; }
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(63, 36, 24, 0.7), rgba(63, 36, 24, 0));
  animation: scroll-hint 2.2s var(--ease) infinite;
}

@keyframes scroll-hint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 9. Marquee */
.marquee {
  overflow: hidden;
  padding-block: var(--sp-3);
  border-block: 1px solid var(--c-line-soft);
  background: var(--c-blush-soft);
  --marquee-duration: 34s;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
  font-size: var(--fs-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-espresso-2);
  white-space: nowrap;
}

.marquee__group span { display: inline-flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }

.marquee__group span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-terracotta);
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 10. Collezioni (le nove linee) */
/* Griglia tipografica: di queste linee non esistono ancora fotografie, e una
   griglia di segnaposto costerebbe banda senza dire nulla. Ogni voce è già
   un link d'ordine, così chi sa cosa cerca arriva in direct dalla linea che
   gli interessa senza dover scorrere fino in fondo alla pagina. */
.lines__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.lines__grid {
  display: grid;
  /* 22rem è scelto perché da schermo largo produce tre colonne: nove linee
     riempiono esattamente tre righe, senza l'ultima riga spaiata che si
     otteneva con quattro colonne, e i nomi lunghi ("Piccola Pelletteria")
     restano su una riga sola. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0;
  list-style: none;
  /* Le voci si separano con i bordi delle celle, non con margini: così le
     righe restano allineate qualunque sia il numero di colonne che la
     griglia decide di formare. */
  border-top: 1px solid var(--c-line-soft);
}

.line {
  border-bottom: 1px solid var(--c-line-soft);
  /* Isola il ricalcolo dell'evidenziazione al passaggio del mouse: il
     browser non deve ricontrollare le altre otto voci. */
  contain: layout style;
}

.line__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(0.75rem, 2vw, 1.25rem);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease);
}

.line__num {
  flex: none;
  font-family: var(--f-serif);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--c-terracotta-ink);
}

.line__body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.line__name {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.15;
}

.line__text {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.line__icon {
  flex: none;
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-terracotta-ink);
  opacity: 0;
  /* Parte 8 px più a sinistra e scivola al suo posto: solo transform e
     opacity, quindi l'animazione resta sul compositore e non ridisegna
     né rimisura nulla. */
  transform: translateX(-8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.line__link:hover,
.line__link:focus-visible {
  background-color: var(--c-paper-2);
}

.line__link:hover .line__icon,
.line__link:focus-visible .line__icon {
  opacity: 1;
  transform: translateX(0);
}

/* Senza dispositivo di puntamento la freccia non comparirebbe mai: sul
   telefono resta visibile in permanenza, è l'unico segnale che la voce
   porta da qualche parte. */
@media (hover: none) {
  .line__icon { opacity: 1; transform: none; }
}

/* ---------- 11. Pezzi disponibili (schede delle borse) */
.collection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.collection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* Isola dal resto della pagina il ricalcolo di stile e layout innescato
     dallo zoom al passaggio del mouse o dalla rivelazione all'ingresso:
     il browser non deve più controllare se cambia qualcos'altro intorno.
     Niente "paint": l'ombra del focus e altri dettagli che sconfinano
     appena fuori dal bordo restano visibili. */
  contain: layout style;
}

.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-paper-2);
  isolation: isolate;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out-expo), opacity 0.6s var(--ease);
}

/* Seconda foto, quella che compare al passaggio del mouse.
   Non sta più nell'HTML per un motivo di peso: come <img loading="lazy"> il
   browser la scaricava all'apertura della pagina — quattro file, 175 KB —
   anche su un telefono, dove il passaggio del mouse non esiste.

   L'indirizzo vive in una proprietà personalizzata: finché --card-hover-img
   non viene sostituita dentro una proprietà vera resta semplice testo e il
   browser non scarica nulla. La sostituzione avviene quando lo script
   aggiunge .has-hover alla scheda, cioè al primo ingresso del puntatore. La
   classe poi resta, così anche la dissolvenza in uscita ha la sua immagine.

   L'immagine è decorativa (nel markup era aria-hidden): senza JavaScript, o
   navigando col dito, semplicemente non compare e non costa niente. */
@media (hover: hover) and (pointer: fine) {
  .card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.9s var(--ease-out-expo), opacity 0.6s var(--ease);
  }

  .card.has-hover .card__media::after { background-image: var(--card-hover-img); }

  .card.has-hover:hover .card__media img:first-child,
  .card.has-hover:focus-within .card__media img:first-child { transform: scale(1.06); opacity: 0; }

  .card.has-hover:hover .card__media::after,
  .card.has-hover:focus-within .card__media::after { opacity: 1; transform: scale(1.06); }

  .card:nth-child(1) {
    --card-hover-img: image-set(
      url("/assets/img/borsa-01b-w450.avif") type("image/avif"),
      url("/assets/img/borsa-01b-w450.webp") type("image/webp"),
      url("/assets/img/borsa-01b-w450.jpg") type("image/jpeg"));
  }

  .card:nth-child(2) {
    --card-hover-img: image-set(
      url("/assets/img/borsa-02b-w450.avif") type("image/avif"),
      url("/assets/img/borsa-02b-w450.webp") type("image/webp"),
      url("/assets/img/borsa-02b-w450.jpg") type("image/jpeg"));
  }

  .card:nth-child(3) {
    --card-hover-img: image-set(
      url("/assets/img/borsa-03b-w450.avif") type("image/avif"),
      url("/assets/img/borsa-03b-w450.webp") type("image/webp"),
      url("/assets/img/borsa-03b-w450.jpg") type("image/jpeg"));
  }

  .card:nth-child(4) {
    --card-hover-img: image-set(
      url("/assets/img/borsa-04b-w450.avif") type("image/avif"),
      url("/assets/img/borsa-04b-w450.webp") type("image/webp"),
      url("/assets/img/borsa-04b-w450.jpg") type("image/jpeg"));
  }
}

.card__badge {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(251, 247, 244, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-espresso);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card__zoom {
  position: absolute;
  z-index: 2;
  right: 0.85rem;
  bottom: 0.85rem;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(251, 247, 244, 0.92);
  color: var(--c-espresso);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out-expo),
    background-color var(--dur-1) var(--ease);
}

.card__zoom svg { width: 1rem; height: 1rem; }

.card:hover .card__zoom,
.card:focus-within .card__zoom { opacity: 1; transform: translateY(0) scale(1); }

.card__zoom:hover { background: var(--c-espresso); color: var(--c-blush-soft); }

.card__name {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card__meta {
  font-size: var(--fs-small);
  color: var(--c-muted);
  font-family: var(--f-serif);
  font-style: italic;
  letter-spacing: 0.02em;
}

.collection__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ---------- 12. Filosofia (titolo rivelato parola per parola) */
.philosophy {
  text-align: center;
  background: linear-gradient(to bottom, var(--c-paper) 0%, var(--c-blush-soft) 100%);
}

.philosophy__title {
  margin-top: var(--sp-3);
  font-size: clamp(1.9rem, 1rem + 4.2vw, 4.4rem);
  font-weight: 300;
  line-height: 1.06;
  text-transform: uppercase;
  max-width: 18ch;
  margin-inline: auto;
}

.philosophy__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.philosophy__title .word > span {
  display: inline-block;
  transition: transform 0.9s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.js .philosophy__title .word > span { transform: translateY(105%); }

.philosophy__title.is-inview .word > span { transform: translateY(0); }

.philosophy__text {
  margin: var(--sp-3) auto 0;
  max-width: 52ch;
  color: var(--c-muted);
  font-size: var(--fs-lead);
}

/* ---------- 13. Pilastri (griglia dei cinque valori) */
/* Prima era un "diagramma": marchio al centro, una voce a sinistra e due a
   destra, collegate da tre curve disegnate in SVG. Con cinque valori quella
   composizione non regge — le curve andrebbero ridisegnate a ogni cambio di
   testo — e le linee costavano una lettura di getTotalLength() per tracciato
   al primo ingresso in vista. Ora è una griglia: si adatta da sola al numero
   di voci, non misura niente e non ha SVG da tenere allineato. */
.pillars {
  background: var(--c-blush-soft);
  padding-block-end: var(--sp-7);
}

.pillars__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(7rem, 18vw, 10.5rem);
  aspect-ratio: 1;
  margin: var(--sp-4) auto var(--sp-5);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), rgba(246, 221, 208, 0.55) 62%, rgba(246, 221, 208, 0.15) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 24px 60px -30px rgba(63, 36, 24, 0.55);
}

.pillars__mark svg {
  width: 54%;
  height: auto;
  color: var(--c-espresso);
}

/* L'anello era tratteggiato e ruotava all'infinito. Una rotazione perpetua
   tiene sveglio il compositore finché l'elemento esiste, anche fuori dalla
   vista, e su un tratteggio costringe a ridisegnare il bordo a ogni giro:
   costo continuo per un dettaglio che nessuno guarda. Resta fermo. */
.pillars__mark::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px dashed rgba(63, 36, 24, 0.22);
}

/* auto-fit + minmax: tre colonne da schermo largo (3 + 2 sulla seconda riga),
   due da tablet, una sul telefono. Nessun media query da tenere allineato al
   numero di voci: se domani i valori diventano sei, la griglia si adatta. */
.pillars__grid {
  display: grid;
  /* 21rem dà tre colonne da schermo largo (3 + 2) e due da tablet: con
     quattro colonne l'ultima voce restava sola su una riga tutta sua, e i
     nomi lunghi ("Personalizzazione") andavano a capo. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  list-style: none;
}

.pillar {
  position: relative;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-line);
  transition: border-color var(--dur-2) var(--ease);
}

.pillar:hover { border-color: var(--c-terracotta); }

.pillar__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: var(--fs-h3);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pillar__name small {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.55em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--c-terracotta-ink);
}

.pillar__text {
  margin-top: 0.35rem;
  color: var(--c-muted);
  font-size: var(--fs-small);
  max-width: 34ch;
}

.pillars__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

/* ---------- 14. Banner immagine a tutta larghezza */
.banner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 65vh, 42rem);
  overflow: clip;
  isolation: isolate;
  background: var(--c-espresso-2);
  text-align: center;
  color: var(--c-paper);
}

.banner__media {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  will-change: transform;
}

.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* la foto sotto è molto ricca di dettaglio: il velo è più scuro al centro,
   dove cadono titolo e testo, così restano leggibili ovunque */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(35, 19, 12, 0.42) 0%,
    rgba(35, 19, 12, 0.66) 45%,
    rgba(35, 19, 12, 0.66) 70%,
    rgba(35, 19, 12, 0.42) 100%
  );
}

.banner__inner {
  padding: var(--sp-6) var(--gutter);
  max-width: var(--maxw);
}

.banner__title {
  font-size: clamp(1.6rem, 0.9rem + 3.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(35, 19, 12, 0.4);
}

.banner__text {
  margin: var(--sp-2) auto 0;
  max-width: 46ch;
  font-size: var(--fs-body);
  color: rgba(251, 247, 244, 0.92);
}

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* ---------- 15. Passaggi */
.steps { background: var(--c-paper); }

.steps__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 2vw, 2rem);
  margin-bottom: var(--sp-6);
}

.steps__figure {
  font-family: var(--f-serif);
  font-size: clamp(3.5rem, 1.5rem + 8vw, 9rem);
  font-weight: 300;
  font-variant-numeric: lining-nums;
  line-height: 0.72;
  color: var(--c-terracotta-ink);
  flex: none;
  /* allinea la cima della cifra a quella del titolo accanto */
  margin-top: -0.06em;
}

.steps__title {
  font-size: clamp(1.6rem, 0.9rem + 3.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  text-transform: uppercase;
}

.steps__intro {
  margin-top: var(--sp-2);
  max-width: 44ch;
  color: var(--c-muted);
}

.steps__list {
  list-style: none;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  counter-reset: step;
}

.step {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
}

@media (min-width: 52em) {
  .step {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .step:nth-child(even) .step__media { order: 2; }
}

.step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-paper-2);
}

.step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out-expo);
}

.step:hover .step__media img { transform: scale(1.07); }

.step__index {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  line-height: 1;
  color: var(--c-terracotta-ink);
}

.step__num {
  position: relative;
  font-variant-numeric: lining-nums;
}

/* barretta decorativa dopo il numero, come nel riferimento */
.step__num::after {
  content: "/";
  margin-left: 0.08em;
  font-size: 0.72em;
  opacity: 0.7;
}

.step__label {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.step__name {
  margin-top: var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.step__text {
  margin-top: 0.75rem;
  color: var(--c-muted);
  max-width: 46ch;
}

.step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-2);
  list-style: none;
}

.step__tags li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-espresso-2);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.step__tags li:hover {
  background: var(--c-espresso);
  color: var(--c-blush-soft);
}

/* ---------- 16. Galleria */
.gallery { background: var(--c-blush-soft); }

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* sei foto: due colonne sul telefono, tre da tablet in su, niente orfani */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1rem);
}

@media (min-width: 48em) {
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  contain: layout style paint;
  border-radius: calc(var(--radius-lg) * 0.6);
  background: var(--c-paper-2);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out-expo), filter var(--dur-2) var(--ease);
}

.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.08); }

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35, 19, 12, 0);
  transition: background-color var(--dur-2) var(--ease);
}

.gallery__item:hover::after,
.gallery__item:focus-visible::after { background: rgba(35, 19, 12, 0.16); }

/* ---------- 17. Domande frequenti */
/* Le risposte stanno in <details>: si aprono senza JavaScript e restano nel
   documento anche da chiuse, quindi i motori di ricerca le leggono comunque. */
.faq__list {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
}

.faq__item { border-bottom: 1px solid var(--c-line-soft); contain: layout style; }

.faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-size: var(--fs-lead);
  color: var(--c-text);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease);
  /* via il triangolino nativo, qui e su Safari */
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

/* Un "+" che ruota di 45° e diventa "×" da aperto: un carattere soltanto,
   nessuna icona da scaricare. */
.faq__q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-size: 1.5em;
  line-height: 1;
  color: var(--c-terracotta-ink);
  transition: transform var(--dur-2) var(--ease);
}

.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__q:hover { color: var(--c-terracotta-ink); }

.faq__a {
  padding-bottom: var(--sp-3);
  max-width: 62ch;
}

.faq__a p { color: var(--c-muted); }

/* ---------- 18. Contatti */
.contact {
  background: var(--c-paper);
  text-align: center;
}

.contact__title {
  margin-top: var(--sp-2);
  font-size: clamp(1.8rem, 1rem + 3.6vw, 3.8rem);
  font-weight: 300;
  line-height: 1.05;
  text-transform: uppercase;
}

.contact__text {
  margin: var(--sp-2) auto 0;
  max-width: 48ch;
  color: var(--c-muted);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

.contact__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------- 19. Footer */
.footer {
  position: relative;
  background: var(--c-espresso);
  color: var(--c-blush-soft);
  padding-top: var(--sp-6);
  overflow: clip;
}

.footer a { text-decoration: none; }

.footer__grid {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}

@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sp-5);
  }
}

.footer__col h2,
.footer__col h3 {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(246, 221, 208, 0.72);
  margin-bottom: var(--sp-2);
}

.footer__list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

.footer__text {
  font-size: var(--fs-small);
  color: rgba(246, 221, 208, 0.82);
  max-width: 34ch;
}

.footer__wordmark {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  color: rgba(246, 221, 208, 0.16);
  font-weight: 300;
  font-size: var(--fs-giant);
  line-height: 0.78;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  transform: translateY(12%);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(246, 221, 208, 0.18);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: rgba(246, 221, 208, 0.78);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
}

.to-top {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 2rem);
  bottom: clamp(0.9rem, 2.5vw, 2rem);
  z-index: 80;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: rgba(251, 247, 244, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-espresso);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out-expo),
    visibility 0s linear var(--dur-2), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out-expo),
    visibility 0s, background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.to-top:hover { background: var(--c-espresso); color: var(--c-blush-soft); }

.to-top svg { width: 1rem; height: 1rem; }

/* ---------- 20. Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-2);
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: rgba(35, 19, 12, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease), visibility 0s;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lightbox__close {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(251, 247, 244, 0.4);
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.lightbox__close:hover { background: var(--c-paper); color: var(--c-espresso); }

.lightbox__close svg { width: 1rem; height: 1rem; }

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}

/* Il <picture> serve solo a scegliere il formato: non deve introdurre una
   scatola in più fra la griglia dello stage e l'immagine, altrimenti il
   centraggio e il clic sullo sfondo per chiudere cambierebbero comportamento. */
.lightbox__stage picture { display: contents; }

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  animation: lb-in 0.5s var(--ease-out-expo);
}

@keyframes lb-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox__caption {
  text-align: center;
  font-size: var(--fs-small);
  color: rgba(251, 247, 244, 0.8);
  min-height: 1.5em;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(251, 247, 244, 0.4);
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.lightbox__nav:hover { background: var(--c-paper); color: var(--c-espresso); }
.lightbox__nav svg { width: 1rem; height: 1rem; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* ---------- 21. Preferenze cookie (banner gestito da iubenda) */
/* Il banner e le sue opzioni sono renderizzati dalla Cookie Solution di
   iubenda (vedi <head>): qui resta solo lo stile del link "Preferenze
   cookie" nel footer, l'unico elemento del banner rimasto nostro. */
.cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- 22. Pagine legali */
.legal {
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
}

.legal__meta {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: var(--sp-2);
}

.legal__body { margin-top: var(--sp-5); }

.legal__body h2 {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal__body h3 {
  margin-top: var(--sp-3);
  margin-bottom: 0.35rem;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.legal__body p,
.legal__body ul,
.legal__body ol { margin-top: 0.75rem; color: var(--c-muted); }

.legal__body ul,
.legal__body ol { padding-left: 1.2rem; display: grid; gap: 0.4rem; }

.legal__body a { color: var(--c-espresso); text-underline-offset: 3px; }

/* riepilogo della scelta sui cookie, in cima alla cookie policy */
.legal__body .legal__status {
  margin-top: var(--sp-2);
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-terracotta-ink);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--c-blush-soft);
  color: var(--c-espresso);
}

.legal__table {
  width: 100%;
  margin-top: var(--sp-2);
  border-collapse: collapse;
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.legal__table th,
.legal__table td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: top;
}

.legal__table th {
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
  color: var(--c-muted);
}

.legal__scroll { overflow-x: auto; }

/* Pagina 404 */
.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-6);
  background: var(--c-blush-soft);
}

.error-page .lead { margin-inline: auto; }

.error-page__code {
  font-family: var(--f-serif);
  font-size: var(--fs-giant);
  line-height: 0.8;
  color: var(--c-terracotta-ink);
}

/* ---------- 23. Animazioni di ingresso (scroll reveal) */
/* Senza JavaScript il contenuto resta visibile: nulla viene mai nascosto. */
[data-reveal] {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

.js [data-reveal="left"] { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="scale"] { transform: scale(0.96); }

.js [data-reveal].is-inview,
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* ---------- 24. Hero a piani e menu cinetico */
/* Adattamento in JavaScript nativo di due effetti pensati per GSAP + Lenis.
   Stessa meccanica, nessuna libreria: il peso della pagina non cambia e la
   Content-Security-Policy resta chiusa agli script esterni. */

/* --- Hero: quattro piani che scorrono a velocità diverse ---------------- */
/* I piani di sfondo sono più alti dell'hero: scorrendo verso il basso non
   scoprono mai il bordo superiore. */
.hero__media,
.hero__wash {
  inset: -12% 0;
}

.hero::after { content: none; }

.hero__wash {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  background: linear-gradient(to bottom,
    rgba(251, 247, 244, 0.94) 0%,
    rgba(251, 247, 244, 0.72) 48%,
    rgba(251, 247, 244, 0.18) 100%);
}

/* foschia in primo piano: il piano più vicino, quindi il più lento */
.hero__fore {
  position: absolute;
  inset: auto 0 -6% 0;
  height: 38%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  /* niente filter: blur() — su un elemento che si muove obbliga il telefono a
     rifare la sfocatura a ogni fotogramma. Le sfumature sono già morbide. */
  background:
    radial-gradient(58% 130% at 14% 108%, rgba(246, 221, 208, 0.74) 0%, rgba(246, 221, 208, 0) 70%),
    linear-gradient(to top, rgba(251, 247, 244, 0.74) 0%, rgba(251, 247, 244, 0) 100%);
}

/* Sotto i 62em l'hero è statico: nessun piano in movimento, nessun livello
   di composizione in più da mantenere. */
@media (max-width: 61.99em) {
  .hero__media,
  .hero__wash,
  .hero__inner,
  .hero__fore { will-change: auto; transform: none; }
}

/* --- Area toccabile dei collegamenti di servizio ------------------------ */
/* I link del piè di pagina erano alti 17-21 px: sotto i 24 px richiesti da
   WCAG 2.2 per il tocco (criterio 2.5.8). L'imbottitura verticale allarga
   l'area sensibile senza spostare il testo di una virgola. Non si applica ai
   link dentro le frasi, dove la regola non vale e l'imbottitura
   scompaginerebbe l'interlinea. */
li > .link-line,
.collection__note > .link-line,
.cookie-prefs {
  display: inline-block;
  padding-block: 0.32rem;
}

/* Nota: qui è stato provato `content-visibility: auto` sulle sezioni e poi
   tolto. Le altezze reali vanno da 493 a 2772 px e cambiano molto fra
   telefono e computer: una sola altezza prenotata sarebbe sbagliata quasi
   ovunque e farebbe saltare la barra di scorrimento. Su sei sezioni il
   risparmio di disegno non ripaga quel difetto.

   Riprovato e rimisurato: il risparmio c'è ed è grosso — con la CPU
   rallentata 6x l'impaginazione scende da 228 a 144 ms e il ricalcolo di
   stile da 250 a 155 ms. Ma il difetto è peggiore di quanto scritto sopra:
   finché il contenuto di una sezione non è mai stato disegnato conta
   l'altezza prenotata, e il salto a un'ancora atterra fino a 800 px fuori
   bersaglio senza mai correggersi. Con la barra delle sezioni nell'header
   quelle ancore sono la navigazione principale del sito, quindi la scelta
   resta questa. Sul piè di pagina invece è sicuro: sotto di lui non c'è
   niente la cui posizione possa sbagliare. */
.footer {
  content-visibility: auto;
  /* `auto` davanti alla misura: il browser usa 700 px finché non ha mai
     disegnato il piè di pagina, poi ricorda l'altezza vera. */
  contain-intrinsic-size: auto 700px;
}

/* Il nastro scorrevole è un'animazione infinita: fuori schermo continuerebbe
   a far lavorare il compositore per nulla. Lo script aggiunge .is-onscreen
   solo quando è in vista. */
.marquee__track { animation-play-state: paused; }
.marquee.is-onscreen .marquee__track { animation-play-state: running; }

.hero__inner { z-index: 1; will-change: transform; }

@media (min-width: 48em) {
  .hero__wash {
    background:
      linear-gradient(to right,
        rgba(251, 247, 244, 0.95) 0%,
        rgba(251, 247, 244, 0.82) 34%,
        rgba(251, 247, 244, 0.25) 62%,
        rgba(251, 247, 244, 0) 82%),
      linear-gradient(to bottom, rgba(251, 247, 244, 0.5) 0%, rgba(251, 247, 244, 0) 34%);
  }
}

/* --- Pulsante del menu: le parole si scambiano, l'icona ruota ----------- */
.burger {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  width: auto;
  min-height: 44px;
  padding-inline: 0.2rem;
}

.burger__label {
  display: block;
  overflow: hidden;
  height: 1.2em;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.burger__word {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  transition: transform 0.55s var(--ease-out-expo);
}

.burger[aria-expanded="true"] .burger__word { transform: translateY(-100%); }

.burger__icon {
  display: block;
  width: 13px;
  height: 13px;
  transition: transform 0.65s var(--ease-out-expo);
}

.burger__icon svg { display: block; width: 100%; height: 100%; }

.burger[aria-expanded="true"] .burger__icon { transform: rotate(315deg); }

/* Da 76em in su la navigazione è la barra delle sezioni nell'header:
   il bottone Menu e il pannello a tutta pagina restano al telefono e al
   tablet, dove la barra non ci starebbe. */

/* --- Menu: pannelli sfalsati al posto del taglio ------------------------ */
.menu {
  background: transparent;
  clip-path: none;
  overflow: hidden;
  /* resta visibile finché l'ultimo pannello non è uscito */
  transition: visibility 0s linear 0.85s;
}

.menu.is-open {
  clip-path: none;
  transition: visibility 0s;
}

.menu__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.menu__panel {
  position: absolute;
  inset: 0;
  transform: translateX(101%);
  transition: transform 0.575s var(--ease-out-expo);
}

.menu__panel:nth-child(1) { background: var(--c-terracotta); }
.menu__panel:nth-child(2) { background: var(--c-blush); transition-delay: 0.12s; }
.menu__panel:nth-child(3) { background: var(--c-blush-soft); transition-delay: 0.24s; }

.menu.is-open .menu__panel { transform: translateX(0); }

/* --- Forme che affiorano dietro la voce puntata ------------------------- */
.menu__shapes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.menu__shape {
  position: absolute;
  top: 50%;
  right: -4%;
  width: min(64vw, 26rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--c-espresso);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}

.menu__shape.is-active { opacity: 1; }

.menu__shape-el {
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s var(--ease);
}

.menu__shape.is-active .menu__shape-el {
  opacity: 0.14;
  transform: scale(1) rotate(0deg);
}

.menu__shape-el:nth-child(2) { transition-delay: 0.07s; }
.menu__shape-el:nth-child(3) { transition-delay: 0.14s; }
.menu__shape-el:nth-child(4) { transition-delay: 0.21s; }
.menu__shape-el:nth-child(5) { transition-delay: 0.28s; }
.menu__shape-el:nth-child(6) { transition-delay: 0.35s; }
.menu__shape-el:nth-child(7) { transition-delay: 0.42s; }
.menu__shape-el:nth-child(8) { transition-delay: 0.49s; }

/* --- Voci: entrano dal basso ruotando ---------------------------------- */
.menu__link {
  transform: translateY(140%) rotate(6deg);
  transform-origin: 0% 100%;
}

.menu.is-open .menu__link { transform: translateY(0) rotate(0deg); }

/* partono dopo i pannelli, una dopo l'altra */
.menu__item:nth-child(1) .menu__link { transition-delay: 0.35s; }
.menu__item:nth-child(2) .menu__link { transition-delay: 0.40s; }
.menu__item:nth-child(3) .menu__link { transition-delay: 0.45s; }
.menu__item:nth-child(4) .menu__link { transition-delay: 0.50s; }
.menu__item:nth-child(5) .menu__link { transition-delay: 0.55s; }

.menu__foot { transition-delay: 0.6s; }

/* ---------- 25. Banner Cookie gestito da iubenda */
/* Il banner nativo di iubenda resta attivo (autoblocking, registrazione del
   consenso, conformità) ma la sua interfaccia visiva viene sostituita da
   quella qui sotto: i pulsanti restano nascosti anche via csConfiguration
   (banner.acceptButtonDisplay ecc.), questa regola è un secondo strato di
   sicurezza nel caso il contenitore renda comunque qualcosa. */
#iubenda-cs-banner {
  display: none !important;
}

/* Nascosto finché lo script non lo mostra esplicitamente: senza questa
   regola il banner comparirebbe per un istante anche a chi ha già scelto,
   perché lo stato "visibile" sarebbe quello di partenza invece che
   un'eccezione richiesta di proposito. */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--c-blush-soft);
  border-top: 1px solid var(--c-line);
  padding: var(--sp-3);
  font-size: var(--fs-small);
  box-shadow: 0 -4px 12px var(--c-overlay);
  pointer-events: auto;
}

.cookie-banner.is-visible {
  display: block;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-banner__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  pointer-events: auto;
  z-index: 1;
}

.cookie-banner__text {
  flex: 1;
  min-width: 200px;
}

.cookie-banner__text p {
  margin: 0;
  color: var(--c-text);
  line-height: 1.5;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Peso 400 e non 500: era l'unico elemento della home a chiedere la faccia
   Jost 500, 26 KB scaricati sul percorso critico della prima visita per tre
   pulsanti. Il 500 resta dichiarato per i titoli delle pagine legali, dove
   il font arriva comunque dopo il primo disegno. */
.cookie-banner__btn {
  padding: 0.5rem 1.25rem;
  font-size: var(--fs-small);
  font-weight: 400;
  border-radius: 0.25rem;
  border: 1px solid var(--c-text);
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.cookie-banner__btn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.cookie-banner__btn--accept {
  background: var(--c-espresso);
  color: var(--c-white);
  border-color: var(--c-espresso);
}

.cookie-banner__btn--accept:hover {
  background: var(--c-espresso-2);
  border-color: var(--c-espresso-2);
}

.cookie-banner__btn--reject {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-text);
}

.cookie-banner__btn--reject:hover {
  background: var(--c-paper-2);
}

.cookie-banner__btn--settings {
  background: transparent;
  color: var(--c-terracotta-ink);
  border-color: var(--c-terracotta-ink);
  text-decoration: underline;
}

.cookie-banner__btn--settings:hover {
  background: rgba(156, 85, 57, 0.08);
}

@media (max-width: 640px) {
  .cookie-banner {
    padding: var(--sp-2);
  }

  .cookie-banner__content {
    gap: var(--sp-2);
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__actions {
    flex-direction: column;
  }

  .cookie-banner__btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .philosophy__title .word > span,
  .menu__link,
  .menu__panel {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__media,
  .hero__wash,
  .hero__inner,
  .hero__fore,
  .banner__media { transform: none !important; }

  /* le forme d'ambiente non compaiono affatto */
  .menu__shapes { display: none !important; }

  .cookie-banner {
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --c-muted: #422a1d;
    --c-line: rgba(63, 36, 24, 0.45);
    --c-line-soft: rgba(63, 36, 24, 0.28);
  }
  .btn { border-width: 2px; }
}

@media print {
  .header, .menu, .to-top, .cookie-banner, .cookie, .lightbox, .hero__scroll, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}