/* ==========================================================================
   KUMOSHOP — Catalogo (sito pubblico)
   Unità: --u è 1/100 della larghezza di un riquadro 16:9 inscritto nella finestra,
   così proporzioni e testi restano coerenti fra monitor larghi e stretti.
   ========================================================================== */

@font-face { font-family: 'Jost'; font-weight: 300; font-display: swap; src: url('../fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url('../fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url('../fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 300; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; src: url('../fonts/jost-latin-ext-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; src: url('../fonts/jost-latin-ext-400-normal.woff2') format('woff2'); }

:root {
  --vh: 1vh;
  --nav-height: 100vh;
  --u: min(1vw, calc(1.7778 * var(--vh)));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --skew: 3deg;
  --nav-time: 1.1s;
  --nav-ease: cubic-bezier(0.7, 0, 0.3, 1);
  /* tema: chiaro di base, scuro con html[data-theme='dark'] (interruttore nel menu) */
  --fg: #000;
  --bg: #fff;
  --pop-bg: rgba(0, 0, 0, 0.88);
  --pop-fg: #fff;
  --error-ink: #b3261e;
  /* intestazione: logo e riga del menu condividono lo stesso asse orizzontale */
  --logo-h: max(76px, calc(7.2 * var(--u)));
  --header-axis: max(calc(5 * var(--u)), calc(0.5 * var(--logo-h) + 8px));
  --font: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --gutter: 2.5vw;
  --fs-xs: max(10px, calc(0.68 * var(--u)));
  --fs-s: max(11px, calc(0.83 * var(--u)));
}
@supports (height: 1svh) { :root { --vh: 1svh; } }
/* Il menu segue anche lo spazio liberato dalla barra mobile del browser.
   Le card conservano invece l'altezza stabile, per non saltare durante lo scroll. */
@supports (height: 100dvh) { :root { --nav-height: 100dvh; } }
html[data-theme='dark'] {
  --fg: #ecebe8;
  --bg: #121113;
  --pop-bg: rgba(236, 235, 232, 0.94);
  --pop-fg: #121113;
  --error-ink: #ffb4ab;
  color-scheme: dark;
}
@media (max-width: 767px) {
  :root { --u: 3.6vw; --gutter: 6.15vw; --skew: 6deg; --fs-xs: 10px; --fs-s: 12px; --logo-h: 18vw; --header-axis: 11.1vw; }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  background: var(--bg);
  --color: var(--fg);
  color: var(--color);
  transition: color 0.5s, background-color 0.5s;
  min-height: calc(100 * var(--vh));
}
html { transition: background-color 0.5s; }
body[data-tone='light'] { --color: #fff; }
html.is-lock, html.is-lock body { overflow: hidden; height: 100%; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--color); color: var(--character, #fff); }
[hidden] { display: none !important; }
.u-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ----------------------------------------------------------------- parole divise in lettere */
.c-word { display: inline-flex; overflow: hidden; line-height: 1.15; vertical-align: top; --delay: 0s; }
/* niente will-change: ogni lettera finirebbe su un livello proprio, rasterizzato a mezzo pixel
   (lettere disallineate a riposo); il livello temporaneo serve solo durante le transizioni */
.c-word > span { display: inline-block; white-space: pre; }

/* entrata: le lettere salgono dal basso, una dopo l'altra */
.c-word-in { visibility: hidden; }
.c-word-in > span { transform: translateY(65%); opacity: 0; transition: transform 0.6s, opacity 0.2s; }
.is-active .c-word-in, .c-word-in.is-active, .is-inview .c-word-in { visibility: visible; }
.is-active .c-word-in > span, .c-word-in.is-active > span, .is-inview .c-word-in > span {
  transform: none;
  opacity: 1;
  transition: transform 0.8s var(--ease-out), opacity 0s;
  transition-delay: calc(var(--delay) + 0.05s + var(--i) * 0.05s);
}
.is-active .c-word-in.is-long > span, .c-word-in.is-active.is-long > span, .is-inview .c-word-in.is-long > span {
  transition: transform 0.6s var(--ease-expo), opacity 0s;
  transition-delay: calc(var(--delay) + 0.05s + var(--i) * 0.02s);
}

/* hover: ogni lettera esce in alto e rientra dal basso */
@keyframes ks-word-hover {
  0% { transform: translateY(0); opacity: 1; }
  30% { transform: translateY(-50%); opacity: 0; }
  30.01% { transform: translateY(45%); opacity: 1; animation-timing-function: var(--ease-back); }
  100% { transform: translateY(0); opacity: 1; }
}
.c-word.is-hover > span { animation: ks-word-hover 0.7s both; animation-delay: calc(var(--i) * 0.025s); }

/* ----------------------------------------------------------------- sequenza d'apertura
   1) il logotipo entra con un taglio obliquo, cresce ed esce dal lato opposto;
   2) il sito si rivela attraverso la K del logo e una "bolla" che completa l'apertura. */
.l-cover { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
html.is-loading .l-cover, html.is-changing .l-cover { visibility: visible; pointer-events: all; cursor: progress; }
.l-cover ._logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: calc(1.3 * var(--u));
  color: var(--fg);
  white-space: nowrap;
  transform: translate(-50%, -50%) skewY(0.6deg) scale(0.72);
  clip-path: polygon(-16% 0, -6% 0, 0% 100%, -10% 100%);
}
html:not(.is-loading) .l-cover ._logo { display: none; }
/* Sagome ricavate dal logo originale, non un carattere tipografico somigliante. */
.l-cover ._word { display: block; width: min(70vw, calc(25 * var(--u))); aspect-ratio: 1119 / 332; font-size: 0; background: currentColor; -webkit-mask: url('../img/wordmark.svg') center / contain no-repeat; mask: url('../img/wordmark.svg') center / contain no-repeat; }
html.is-opening .l-cover ._logo { animation: ks-cover 1.8s 0.2s both; }
@keyframes ks-cover {
  0% { transform: translate(-50%, -50%) skewY(0.6deg) scale(0.72); clip-path: polygon(-16% 0, -6% 0, 0% 100%, -10% 100%); }
  40% { clip-path: polygon(-6% 0, 106% 0, 112% 100%, 0% 100%); }
  88% { transform: translate(-50%, -50%) scale(1); clip-path: polygon(-6% 0, 106% 0, 112% 100%, 0% 100%); }
  100% { transform: translate(-50%, -50%) scale(1.28); clip-path: polygon(100% 0, 106% 0, 112% 100%, 106% 100%); }
}
html.is-loading body { cursor: progress; }
html.is-loading .l-root {
  -webkit-mask-image: url('../img/mark.svg'), url('../img/bubble.svg');
  mask-image: url('../img/mark.svg'), url('../img/bubble.svg');
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 0 0, 0 0; mask-size: 0 0, 0 0;
}
html.is-loading.is-revealing .l-root { animation: ks-reveal 1.5s both; }
html.is-loading .l-root::after { content: ''; position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, 0.22); pointer-events: none; }
html.is-loading.is-revealing .l-root::after { animation: ks-fade-out 1.5s both; }
@keyframes ks-reveal {
  0% { -webkit-mask-size: 0 0, 0 0; mask-size: 0 0, 0 0; animation-timing-function: var(--ease-out); }
  50% { -webkit-mask-size: calc(32 * var(--u)) calc(32 * var(--u)), 0 0; mask-size: calc(32 * var(--u)) calc(32 * var(--u)), 0 0; }
  100% { -webkit-mask-size: calc(64 * var(--u)) calc(64 * var(--u)), 165vmax 165vmax; mask-size: calc(64 * var(--u)) calc(64 * var(--u)), 165vmax 165vmax; }
}
@keyframes ks-fade-out { to { opacity: 0; } }

/* ----------------------------------------------------------------- header */
.l-header_logo {
  position: fixed;
  z-index: 110;
  /* logo centrato sull'asse dell'intestazione, come la riga del menu e il pulsante del menu */
  top: calc(var(--header-axis) - 0.5 * var(--logo-h));
  left: var(--gutter);
  transition: transform 0.5s, opacity 0.5s;
}
.l-header_logo a { display: flex; align-items: center; gap: calc(0.9 * var(--u)); color: var(--color); transition: color 0.5s; }
.l-header_logo ._mark {
  width: calc(2.1 * var(--u));
  height: calc(2.1 * var(--u));
  min-width: 22px;
  min-height: 22px;
  background: currentColor;
  -webkit-mask: url('../img/mark.svg') center / contain no-repeat;
  mask: url('../img/mark.svg') center / contain no-repeat;
}
.l-header_logo ._word { font-size: max(12px, calc(1.05 * var(--u))); font-weight: 400; letter-spacing: 0.42em; white-space: nowrap; }
.l-header_logo ._logo { display: block; width: auto; height: var(--logo-h); }
.l-header_list {
  position: fixed;
  z-index: 100;
  top: calc(var(--header-axis) - 1.05 * var(--u));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0 calc(3.3 * var(--u));
  pointer-events: none;
  transition: transform 0.6s, opacity 0.6s;
}
.l-header_list > a {
  display: block;
  padding: calc(0.6 * var(--u)) calc(0.4 * var(--u));
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color);
  pointer-events: auto;
  transition: color 0.5s, opacity 0.3s;
}
/* voci non selezionate in grassetto; quella della pagina corrente sottile e attenuata */
.l-header_list > a { font-weight: 500; }
.l-header_list [aria-current='page'] { font-weight: 400; opacity: 0.45; }
.l-header_list [aria-current='page']:hover { opacity: 0.8; }

.l-header_toggle {
  position: fixed;
  z-index: 110;
  top: calc(var(--header-axis) - 0.5 * max(28px, calc(2.6 * var(--u))));
  right: var(--gutter);
  width: calc(3.75 * var(--u));
  min-width: 34px;
  height: calc(2.6 * var(--u));
  min-height: 28px;
  transition: transform 0.8s, opacity 0.8s;
}
.l-header_toggle::before, .l-header_toggle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--color);
  transition: margin-top 0.3s, transform 1s var(--ease-expo);
}
.l-header_toggle::before { margin-top: calc(-0.16 * var(--u) - 1px); }
.l-header_toggle::after { margin-top: calc(0.16 * var(--u) + 1px); }
@media (hover: hover) {
  .l-header_toggle:hover::before { margin-top: calc(0.16 * var(--u) + 1px); transform: scaleX(0.9); }
  .l-header_toggle:hover::after { margin-top: calc(-0.16 * var(--u) - 1px); transform: scaleX(0.9); }
}
html.is-nav .l-header_toggle::before, html.is-nav .l-header_toggle::after { background: var(--fg); margin-top: 0; }
/* in chiusura le barre restano nere finché il pannello bianco è ancora dietro di loro */
html.is-nav-closing .l-header_toggle::before, html.is-nav-closing .l-header_toggle::after { background: var(--fg); }
html.is-nav .l-header_toggle::before { transform: rotate(13deg); }
html.is-nav .l-header_toggle::after { transform: rotate(-13deg); }
html.is-nav .l-header_toggle:hover::before { transform: scaleX(0.5) rotate(26deg); }
html.is-nav .l-header_toggle:hover::after { transform: scaleX(0.5) rotate(-26deg); }

/* inattività e pannelli aperti: il banner in alto si ritira verso l'alto */
html.is-idle:not(.is-nav):not(.is-open) .l-header_logo,
html.is-open .l-header_logo { transform: translateY(calc(-2.3 * var(--u))) skewY(1deg); opacity: 0; pointer-events: none; }
html.is-idle:not(.is-nav):not(.is-open) .l-header_list,
html.is-nav .l-header_list,
html.is-open .l-header_list { transform: translateY(calc(-2.1 * var(--u))) skewY(0.8deg); opacity: 0; }
html.is-idle:not(.is-nav):not(.is-open) .l-header_toggle,
html.is-open .l-header_toggle { transform: translateY(calc(-2.1 * var(--u))) skewY(0.5deg); opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
  .l-header_list { display: none; }
  .l-header_logo ._word { display: none; }
  .l-header_logo ._mark { width: 9vw; height: 9vw; }
  .l-header_toggle { top: calc(var(--header-axis) - 4.5vw); width: 12.3vw; height: 9vw; }
}

/* ----------------------------------------------------------------- menu a tutto schermo */
/* il pannello scende tutto insieme, vetrina e voci, con un solo bordo obliquo in basso, come nel riferimento.
   - Lo spostamento usa la proprietà `translate` e la pagina sotto si sposta con gli STESSI tempi e la stessa
     distanza: il bordo del pannello e quello della pagina restano incollati (nessuna banda di sfondo fra i due).
   - L'inclinazione è un'animazione separata (skewY attorno all'angolo in basso a sinistra) che parte da zero,
     cresce a metà corsa e torna a zero: da fermo il pannello chiuso è dritto e tutto fuori schermo, e lo skew
     sposta i punti solo in verticale, quindi niente scivolamenti laterali.
   - La pagina si inclina attorno al suo angolo in alto a destra: il suo bordo resta sempre sotto il pannello. */
.l-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height); /* stessa misura usata per spostare la pagina: i due bordi coincidono */
  z-index: 105;
  display: grid;
  grid-template-columns: 1fr 1fr;
  visibility: hidden;
  translate: 0 -100%;
  transform-origin: left bottom;
  transition: translate var(--nav-time) var(--nav-ease), visibility 0s var(--nav-time);
}
html.is-nav .l-nav { visibility: visible; translate: 0 0; transition-delay: 0s; animation: ks-nav-tilt-in var(--nav-time) ease-in-out; }
html.is-nav-motion:not(.is-nav) .l-nav { animation: ks-nav-tilt-out var(--nav-time) ease-in-out; }
/* Livelli limitati ai pannelli e alle quattro superfici della vetrina: il browser
   può riusare le immagini durante rotazione e zoom, comprese le sfocature.
   Le singole lettere non creano centinaia di superfici persistenti. */
html.is-nav-motion .l-nav { will-change: transform, translate; }
html.is-nav-motion .l-nav_feature ._link,
html.is-nav-motion .l-nav_feature ._image,
html.is-nav-motion .l-nav_feature ._image img,
html.is-nav-motion .l-nav_feature ._bg img { will-change: transform; }
/* Le lettere ritardate provocavano nuovi disegni dell'intera colonna a ogni
   ingresso. Livelli temporanei solo durante il movimento; a riposo tornano
   al disegno normale, senza alterare allineamento e nitidezza del testo. */
html.is-nav-rendering .l-nav_main { will-change: transform; }
html.is-nav-rendering .l-nav_main .c-word > span:not(.u-sr) { will-change: transform, opacity; }
@keyframes ks-nav-tilt-in { 0%, 100% { transform: none; } 45% { transform: skewY(3deg); } }
@keyframes ks-nav-tilt-out { 0%, 100% { transform: none; } 55% { transform: skewY(3deg); } }
.l-nav_feature {
  position: relative;
  overflow: hidden;
  background: var(--navColor, #333);
  color: var(--navInk, #fff);
}
.l-nav_feature ._bg { position: absolute; inset: -10%; }
.l-nav_feature ._bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.1); transform: scale(1.2); opacity: 0.6; transition: opacity 0.6s; }
.l-nav_feature ._bg::after { content: ''; position: absolute; inset: 0; background: var(--navColor, #333); opacity: 0.55; transition: background-color 0.6s; }
.l-nav_feature ._stage { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1200px; }
.l-nav_feature ._link {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: calc(1.4 * var(--u));
  transform: translate(-6%, -6%) rotate(-4deg);
  transition: transform 1.5s 0.3s var(--ease-out);
}
html.is-nav .l-nav_feature ._link { transform: none; }
/* formato 4:5 come le schede prodotto dei negozi: inquadra la figura intera, grande come nel riferimento */
.l-nav_feature ._image {
  display: block;
  height: min(68vh, 38vw);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 calc(2.4 * var(--vh)) calc(6 * var(--vh)) rgba(0, 0, 0, 0.28);
  transform: rotateY(-10deg);
  transform-origin: right center;
  transition: transform 1s 0.3s var(--ease-expo);
}
html.is-nav .l-nav_feature ._image { transform: none; }
.l-nav_feature ._image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transition: transform 2s 0.3s var(--ease-out); }
html.is-nav .l-nav_feature ._image img { transform: scale(1); }
@media (hover: hover) { .l-nav_feature ._link:hover ._image img { transform: scale(1.05); transition-delay: 0s; } }
.l-nav_feature ._info {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  gap: calc(0.6 * var(--u));
  align-items: flex-start;
}
.l-nav_feature ._title { font-size: max(13px, calc(1.25 * var(--u))); font-weight: 400; letter-spacing: 0.06em; }
.l-nav_feature ._caption { font-size: var(--fs-xs); font-weight: 300; letter-spacing: 0.04em; opacity: 0.85; }
.l-nav_feature ._arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: max(46px, calc(3.4 * var(--u)));
  height: max(46px, calc(3.4 * var(--u)));
  margin-top: calc(-0.5 * max(46px, calc(3.4 * var(--u))));
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.6s 0.9s, background-color 0.3s;
}
.l-nav_feature ._arrow.-prev { left: var(--gutter); }
.l-nav_feature ._arrow.-next { right: var(--gutter); }
html.is-nav .l-nav_feature ._arrow { opacity: 0.75; }
.l-nav_feature ._arrow:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); transition-delay: 0s; }
.l-nav_feature ._arrow svg { width: 46%; height: 46%; }

.l-nav_main {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding: calc(var(--header-axis) + 4 * var(--u)) calc(9 * var(--u)) calc(9 * var(--vh));
}
.l-nav_main ._inner { display: flex; flex-direction: column; height: 100%; }
.l-nav_main ._home { font-size: var(--fs-s); letter-spacing: 0.08em; }
/* voci principali grandi e ariose, allineate a sinistra (come nel riferimento) */
.l-nav_main ._gnav { margin-top: calc(5 * var(--vh)); }
.l-nav_main ._gnav > li:not(._works) > a { position: relative; display: inline-block; padding: calc(2.2 * var(--vh)) 0; font-size: max(30px, calc(3.6 * var(--u))); font-weight: 300; letter-spacing: 0.05em; line-height: 1.05; }
.l-nav_main ._gnav sup { position: absolute; top: calc(2.2 * var(--vh)); right: calc(-2.6 * var(--u)); font-size: var(--fs-xs); font-weight: 400; }
.l-nav_main ._works { display: flex; flex-wrap: wrap; gap: calc(0.4 * var(--u)) calc(1.4 * var(--u)); margin: calc(-0.6 * var(--vh)) 0 calc(0.8 * var(--vh)); }
.l-nav_main ._works a { font-size: var(--fs-s); letter-spacing: 0.04em; opacity: 0.6; transition: opacity 0.3s; }
.l-nav_main ._works a:hover { opacity: 1; }
.l-nav_main ._works sup { position: static; margin-left: 0.25em; font-size: 0.8em; }
.l-nav_main ._snav { margin-top: auto; padding-top: calc(4 * var(--vh)); display: flex; flex-direction: column; gap: calc(1.2 * var(--vh)); }
.l-nav_main ._snav a, .l-nav_main ._snav .is-off { font-size: var(--fs-s); letter-spacing: 0.05em; }
.l-nav_main ._snav .is-off { opacity: 0.45; cursor: default; }
/* modalità notte: dove prima c'era la data, sotto il pulsante del menu */
.l-nav_main ._theme { position: absolute; z-index: 1; right: var(--gutter); top: calc(var(--header-axis) + 3.2 * var(--u)); }
.l-nav_main ._theme button { display: inline-flex; align-items: center; gap: 1.1em; padding: calc(0.4 * var(--u)) 0; font-size: var(--fs-s); letter-spacing: 0.08em; }
.c-switch { position: relative; flex: none; width: 2.7em; height: 1.45em; border: 1px solid currentColor; border-radius: 999px; opacity: 0; transform: translateX(30%); transition: opacity 0.6s 0.6s, transform 0.8s 0.6s var(--ease-expo), background-color 0.4s; }
html.is-nav .c-switch { opacity: 1; transform: none; }
.c-switch > i { position: absolute; top: 50%; left: 0.22em; width: 0.95em; height: 0.95em; margin-top: -0.475em; border-radius: 50%; background: currentColor; transition: transform 0.5s var(--ease-back), background-color 0.4s; }
[aria-checked='true'] > .c-switch { background: currentColor; }
[aria-checked='true'] > .c-switch > i { transform: translateX(1.24em); background: var(--bg); }
@media (max-width: 767px) {
  .l-nav { grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .l-nav_feature ._image { height: 30vh; }
  .l-nav_feature ._arrow { width: 40px; height: 40px; margin-top: -20px; }
  .l-nav_main { min-height: 0; padding: 8vw 10vw max(8vw, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .l-nav_main ._theme { position: static; margin-bottom: 4vw; }
  .l-nav_main ._gnav { margin-top: 2vw; }
  .l-nav_main ._gnav > li:not(._works) > a { font-size: 7.2vw; padding: 1.8vw 0; }
  .l-nav_main ._gnav sup { right: -6vw; top: 1.5vw; }
  .l-nav_main ._snav { gap: 2.4vw; }
}

/* ----------------------------------------------------------------- pagina e transizioni */
.l-main {
  position: relative;
  min-height: calc(100 * var(--vh));
  background: var(--bg);
  transform-origin: center top;
  transition: transform 1s var(--ease-out);
}
.l-main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(calc(1 * var(--u)));
  backdrop-filter: blur(calc(1 * var(--u)));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s;
}
html.is-nav .l-main { transform: translateY(var(--nav-height)) skewY(var(--skew)); }
html.is-nav-motion .l-main { transform-origin: right top; transition: transform var(--nav-time) var(--nav-ease); will-change: transform; }
html.is-nav-motion .l-main *,
html.is-nav-motion .l-main *::before,
html.is-nav-motion .l-main *::after { animation-play-state: paused !important; }
html.is-nav .l-main::before { opacity: 1; }
.l-main.is-prev, .l-main.is-next { position: fixed; inset: 0; overflow: hidden; }
.l-main.is-prev { z-index: 1; }
.l-main.is-next { z-index: 2; transform: translateY(calc(100 * var(--vh))) skewY(calc(-1 * var(--skew))); }
html.is-changing body { pointer-events: none; }
html.is-changing .l-main.is-prev { transform: translateY(calc(-50 * var(--vh))) skewY(var(--skew)); }
html.is-changing .l-main.is-prev::before { opacity: 1; }
html.is-changing .l-main.is-next { transform: none; }

/* ----------------------------------------------------------------- catalogo */
.p-cat { position: relative; --character: #fff; }
/* barra degli strumenti (ricerca, filtro, Griglia/Indice): il bordo INFERIORE resta sempre sopra la card
   ingrandita al passaggio del mouse, qualunque sia il formato della finestra. Le card della griglia sono
   misurate in vh: card alta 56,67vh, centrata in 97,9vh (padding inferiore 2,1vh) e ingrandita ×1,1689
   → bordo superiore a 48,95 − 56,67 × 1,1689 / 2 ≈ 15,8vh; con 0,8vh di respiro la barra finisce a 15vh. */
.p-cat { --tools-bottom: calc(15 * var(--vh)); }
.p-cat_bar { display: contents; }
.p-cat_tools {
  position: absolute;
  z-index: 5;
  top: var(--tools-bottom);
  transform: translateY(-100%);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: calc(1.6 * var(--u));
  font-size: var(--fs-s);
  letter-spacing: 0.04em;
  transition: opacity 1s;
}
/* ricerca: al centro, sulla stessa riga del filtro per serie e della scelta Griglia/Indice */
.p-cat_search {
  position: absolute;
  z-index: 5;
  top: var(--tools-bottom);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: max(220px, calc(21 * var(--u)));
  padding: calc(0.3 * var(--u)) 0;
  transform: translate(-50%, -100%);
  font-size: var(--fs-s);
  letter-spacing: 0.04em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  transition: border-color 0.4s, opacity 1s;
}
.p-cat_search:focus-within, .p-cat_search.has-value { border-bottom-color: currentColor; }
.p-cat_search ._icon { flex: none; width: 1.15em; height: 1.15em; opacity: 0.55; }
.p-cat_search input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; outline: none; font-size: inherit; letter-spacing: inherit; }
.p-cat_search input::placeholder { color: currentColor; opacity: 0.4; }
.p-cat_search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.p-cat_search ._count { flex: none; font-size: var(--fs-xs); opacity: 0.5; white-space: nowrap; }
.p-cat_search ._clear { flex: none; width: 1.4em; height: 1.4em; line-height: 1; font-size: 1.15em; opacity: 0.6; transition: opacity 0.3s; }
.p-cat_search ._clear:hover { opacity: 1; }
.p-cat_empty button { margin-top: 1em; border-bottom: 1px solid; letter-spacing: 0.06em; }
.p-cat_views { display: flex; }
.p-cat_views button { padding: calc(0.3 * var(--u)) calc(0.4 * var(--u)); opacity: 0.2; transition: opacity 0.3s; }
.p-cat_views button[aria-pressed='true'] { opacity: 1; }
.p-cat_views button:hover { opacity: 1; }
.p-cat_filter { position: relative; }
.p-cat_filter > button { display: inline-flex; align-items: center; gap: 0.6em; padding: calc(0.3 * var(--u)) calc(0.4 * var(--u)); }
.p-cat_filter > button ._label { opacity: 0.45; }
.p-cat_filter > button::after { content: ''; width: 0.45em; height: 0.45em; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-25%) rotate(45deg); transition: transform 0.3s; }
.p-cat_filter.is-open > button::after { transform: translateY(15%) rotate(-135deg); }
.p-cat_filter ul {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: calc(16 * var(--u));
  margin-top: calc(0.5 * var(--u));
  padding: calc(0.6 * var(--u)) 0;
  border-radius: calc(1 * var(--u));
  background: var(--pop-bg);
  color: var(--pop-fg);
  transform-origin: top right;
  transform: scaleY(0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.5s var(--ease-back), visibility 0s 0.5s;
}
.p-cat_filter.is-open ul { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.p-cat_filter li button { display: flex; width: 100%; justify-content: space-between; gap: 2em; padding: calc(0.45 * var(--u)) calc(1.1 * var(--u)); text-align: left; opacity: 0.6; white-space: nowrap; }
.p-cat_filter li button:hover, .p-cat_filter li button[aria-checked='true'] { opacity: 1; }
.p-cat_filter li small { opacity: 0.6; }

.p-cat_list { position: relative; }
.p-cat_list ._item { user-select: none; -webkit-user-select: none; }
.p-cat_list ._link { display: block; -webkit-user-drag: none; }
.p-cat_list img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.p-cat_list ._image { position: relative; overflow: hidden; transition: transform 1s var(--ease-expo), box-shadow 1s; }
.p-cat_list ._image img { opacity: 0; transform: scale(1.5); }
/* rivelazione a tendina dal basso: il contenitore sale mentre il contenuto scende della stessa misura;
   il taglio lo fa l'overflow di ._image, che (a differenza di clip-path) non lascia filtrare righe di pixel */
.p-cat_list ._image-wrap, .p-cat_list ._image-counter { height: 100%; transform: translateY(100%); }
.p-cat_list ._image-counter { transform: translateY(-100%); }
.p-cat_list ._item.is-active ._image img { opacity: 1; transform: none; transition: opacity 1s, transform 2s var(--ease-expo); }
.p-cat_list ._item.is-active ._image-wrap, .p-cat_list ._item.is-active ._image-counter { transform: none; transition: transform 1s var(--ease-expo); }

/* vista griglia: nastro orizzontale infinito */
.p-cat[data-view='grid'] { height: calc(100 * var(--vh)); overflow: hidden; }
.p-cat[data-view='grid'] .p-cat_list { height: 100%; cursor: grab; touch-action: pan-y; }
.p-cat[data-view='grid'] .p-cat_list.is-drag { cursor: grabbing; }
.p-cat[data-view='grid'] .p-cat_group-title, .p-cat[data-view='grid'] .p-cat_info { display: none; }
.p-cat[data-view='grid'] .p-cat_grid { display: contents; }
.p-cat[data-view='grid'] ._item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: calc(42.78 * var(--vh));
  height: 100%;
  padding: 0 calc(1.11 * var(--vh)) calc(2.1 * var(--vh));
  will-change: transform;
}
.p-cat[data-view='grid'] ._link { transition: transform 1s var(--ease-expo); }
.p-cat[data-view='grid'] ._link, .p-cat[data-view='grid'] ._image { width: calc(40.56 * var(--vh)); height: calc(56.67 * var(--vh)); }
.p-cat[data-view='grid'] ._image { box-shadow: 0 calc(1.85 * var(--vh)) calc(3.7 * var(--vh)) rgba(0, 0, 0, 0); }
.p-cat[data-view='grid'] ._image-inner { height: 100%; margin: 0 calc(-2.78 * var(--vh)); transition: transform 2s var(--ease-expo); }
.p-cat[data-view='grid'] ._main {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(4.4 * var(--vh));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color);
  pointer-events: none;
  transition: color 0.5s, opacity 0.5s;
}
.p-cat[data-view='grid'] ._series { font-size: max(9px, calc(1.11 * var(--vh))); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.p-cat[data-view='grid'] ._name { margin-top: calc(1.76 * var(--vh)); font-size: calc(2.59 * var(--vh)); font-weight: 400; letter-spacing: 0.04em; }
.p-cat[data-view='grid'] ._caption { margin-top: calc(0.74 * var(--vh)); font-size: calc(1.48 * var(--vh)); font-weight: 300; letter-spacing: 0.04em; }
.p-cat[data-view='grid'] ._meta { margin-top: calc(1.2 * var(--vh)); font-size: max(10px, calc(1.15 * var(--vh))); letter-spacing: 0.06em; opacity: 0; transform: translateY(40%); transition: opacity 0.5s, transform 0.6s var(--ease-out); }
.p-cat[data-view='grid'] ._item.is-active ._meta { opacity: 0.75; transform: none; transition-delay: 0.6s; }
/* articolo sotto il puntatore (calcolato a ogni fotogramma, anche mentre il nastro scorre) */
.p-cat[data-view='grid'] ._item.is-hover { z-index: 2; }
.p-cat[data-view='grid'] ._item.is-hover ._image { transform: scale(1.1689); box-shadow: 0 calc(1.85 * var(--vh)) calc(3.7 * var(--vh)) rgba(0, 0, 0, 0.16); }
.p-cat[data-view='grid'] ._item.is-hover ._image-inner { transform: none !important; }
.p-cat[data-view='grid'] .p-cat_list.has-hover ._main { opacity: 0.3; }
.p-cat[data-view='grid'] .p-cat_list.has-hover ._item.is-hover ._main { opacity: 1; }
/* sfondo: bianco a riposo, colore o sfumatura dell'articolo sotto il puntatore (dissolvenza fra due livelli) */
.p-cat_bg { position: absolute; inset: 0; z-index: 0; background: var(--bg); pointer-events: none; transition: background-color 0.5s; }
.p-cat_bg > i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s; }
.p-cat_bg > i.is-on { opacity: 1; }
.p-cat[data-view='index'] .p-cat_bg { display: none; }
.p-cat[data-view='grid'] .p-cat_list { z-index: 1; }
.p-cat_empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-s); letter-spacing: 0.06em; opacity: 0.6; }

/* vista indice: miniature raggruppate */
.p-cat[data-view='index'] { min-height: calc(100 * var(--vh)); padding: min(12.1vw, calc(21.6 * var(--vh))) var(--gutter) calc(10 * var(--vh)); }
.p-cat[data-view='index'] .p-cat_group { position: relative; padding: calc(1.66 * var(--u)) 0 calc(3.4 * var(--u)) 24vw; border-top: 1px solid currentColor; }
.p-cat[data-view='index'] .p-cat_group-title { position: absolute; left: 0; top: calc(1.66 * var(--u)); font-size: var(--fs-s); font-weight: 400; letter-spacing: 0.04em; }
.p-cat[data-view='index'] .p-cat_group-title small { margin-left: 0.6em; opacity: 0.45; }
.p-cat[data-view='index'] .p-cat_info { position: absolute; left: 0; top: calc(4 * var(--u)); width: 20vw; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.p-cat[data-view='index'] .p-cat_info ._name { font-size: calc(1.46 * var(--u)); font-weight: 400; letter-spacing: 0.04em; }
.p-cat[data-view='index'] .p-cat_info ._caption { margin-top: calc(0.3 * var(--u)); font-size: var(--fs-s); font-weight: 300; }
.p-cat[data-view='index'] .p-cat_info ._meta { margin-top: calc(0.8 * var(--u)); font-size: var(--fs-xs); letter-spacing: 0.06em; opacity: 0.7; }
.p-cat[data-view='index'] .p-cat_group:has(._link:hover) .p-cat_info { opacity: 1; transition-duration: 0.1s; }
.p-cat[data-view='index'] .p-cat_grid { display: grid; grid-template-columns: repeat(9, 6.77vw); gap: 1.66vw 1.25vw; }
.p-cat[data-view='index'] ._item { transform: none !important; }
.p-cat[data-view='index'] ._link { width: 6.77vw; height: 9.48vw; transition: filter 1s; }
.p-cat[data-view='index'] ._image, .p-cat[data-view='index'] ._image-inner { width: 100%; height: 100%; transform: none !important; }
.p-cat[data-view='index'] ._main { display: none; }
.p-cat[data-view='index'] .p-cat_grid:has(._link:hover) ._link { filter: grayscale(1); }
.p-cat[data-view='index'] ._link:hover { filter: none !important; }
@media (max-width: 767px) {
  .p-cat_bar { position: absolute; z-index: 5; top: 26.6vw; left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5vw; }
  .p-cat_tools { position: static; gap: 2.5vw; transform: none; letter-spacing: 0; }
  .p-cat_search { position: relative; top: auto; left: auto; width: auto; min-width: 0; padding: 0; transform: none; gap: 0.35em; }
  .p-cat_search input { font-size: 16px; } /* evita lo zoom automatico di Safari quando si scrive */
  .p-cat_search ._count { position: absolute; bottom: calc(100% + 2px); left: 0; font-size: 10px; }
  .p-cat_filter > button { gap: 0.35em; }
  .p-cat_filter > button ._value { max-width: 18vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .p-cat[data-view='index'] { padding-top: 39vw; }
  .p-cat[data-view='index'] .p-cat_group { padding: 4vw 0 12vw; }
  .p-cat[data-view='index'] .p-cat_group-title { position: static; font-size: 3.6vw; }
  .p-cat[data-view='index'] .p-cat_info { display: none; }
  .p-cat[data-view='index'] .p-cat_grid { grid-template-columns: repeat(2, 1fr); gap: 3vw; margin-top: 6vw; }
  .p-cat[data-view='index'] ._link { width: 100%; height: auto; aspect-ratio: 42.3 / 59.5; }
}

/* ----------------------------------------------------------------- disponibilità */
.c-avail { display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; }
.c-avail::before { content: ''; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.c-avail[data-tone='ok']::before { background: #3fbf7f; }
.c-avail[data-tone='info']::before { background: #6aa8ff; }
.c-avail[data-tone='warn']::before { background: #f2b544; }
.c-avail[data-tone='off']::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ----------------------------------------------------------------- dettaglio articolo */
.p-prod { position: relative; height: calc(100 * var(--vh)); overflow: hidden; background: var(--character-bg, var(--character)); color: #fff; }
.p-prod_rail { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.p-prod_rail.is-drag { cursor: grabbing; }
.p-prod_rail ._item { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; will-change: transform; user-select: none; }
/* il contenuto è più largo della cornice di quanto si sposta con la parallasse (fino al 4% della distanza
   dal centro), così ai lati non resta mai una fessura fra una foto e l'altra */
.p-prod_rail ._inner { height: 100%; margin: 0 calc(-0.04 * (50vw + 100 * var(--vh))); transition: transform 2s var(--ease-expo); }
.p-prod_rail img { height: 100%; width: 100%; object-fit: cover; max-width: none; pointer-events: none; -webkit-user-drag: none; opacity: 0; transform: scale(1.12); transition: opacity 1.2s, transform 2.2s var(--ease-expo); }
.p-prod_rail ._item.is-loaded img { opacity: 1; transform: none; }
.p-prod::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: calc(40 * var(--vh));
  /* più marcato in basso: i testi bianchi restano leggibili anche su foto a sfondo chiaro */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.36) 40%, rgba(0, 0, 0, 0));
  pointer-events: none;
  transition: opacity 1s;
}
/* velatura in alto: il menu bianco resta leggibile anche sopra foto chiare */
.p-prod::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 0 auto 0;
  height: calc(24 * var(--vh));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
  pointer-events: none;
  transition: opacity 1s;
}
html.is-idle:not(.is-open) .p-prod::before, html.is-idle:not(.is-open) .p-prod::after { opacity: 0; }
.p-prod_bar {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(2.6 * var(--u));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: calc(2 * var(--u));
  transition: opacity 0.8s, transform 0.8s var(--ease-out);
}
html.is-idle:not(.is-open) .p-prod_bar, html.is-open .p-prod_bar { opacity: 0; transform: translateY(calc(1 * var(--u))); pointer-events: none; }
.p-prod_title ._series { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.p-prod_title ._name { margin-top: calc(0.8 * var(--u)); font-size: max(30px, calc(3.4 * var(--u))); font-weight: 400; letter-spacing: 0.02em; }
.p-prod_title ._caption { margin-top: calc(0.4 * var(--u)); font-size: max(13px, calc(1.1 * var(--u))); font-weight: 300; letter-spacing: 0.04em; }
.p-prod_title ._meta { display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; margin-top: calc(1 * var(--u)); font-size: var(--fs-s); letter-spacing: 0.05em; }
.p-prod_buttons { display: flex; gap: calc(0.8 * var(--u)); }
.p-prod_bar { text-shadow: 0 0 1.2em rgba(0, 0, 0, 0.25); }
.p-prod_bar .c-button { text-shadow: none; }
.p-prod_back { justify-self: end; font-size: var(--fs-xs); letter-spacing: 0.24em; }
.p-prod_counter { position: absolute; z-index: 3; right: var(--gutter); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: var(--fs-xs); letter-spacing: 0.2em; opacity: 0.8; transition: opacity 0.8s; }
html.is-idle .p-prod_counter, html.is-open .p-prod_counter { opacity: 0; }
@media (max-width: 767px) {
  .p-prod_bar { grid-template-columns: 1fr; bottom: 6vw; gap: 4vw; }
  .p-prod_back { justify-self: start; }
  .p-prod_counter { display: none; }
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 2.6em;
  padding: 0 1.6em;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.4s, color 0.4s, transform 0.4s var(--ease-back), opacity 0.3s;
}
.c-button:hover { transform: translateY(-2px); }
.c-button.-fill { background: currentColor; }
.c-button.-fill > span { color: var(--character, #000); filter: invert(0); }
.c-button.-solid { background: #fff; border-color: #fff; color: #000; }
.c-button[disabled] { opacity: 0.4; pointer-events: none; }

/* pannelli Info / Foto */
.c-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  color: var(--panelInk, #fff);
  visibility: hidden;
  transition: visibility 0s 0.8s;
}
.c-panel.is-open { visibility: visible; transition-delay: 0s; }
/* sfocatura graduale: si anima il raggio del blur e la tinta del velo, NON l'opacità del pannello.
   Un contenitore con opacità < 1 diventa la "radice" del backdrop-filter: durante la dissolvenza il blur
   non vedrebbe la pagina sotto e comparirebbe di scatto alla fine. */
.c-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--character) 0%, transparent);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
  transition: background-color 0.8s cubic-bezier(0.33, 0, 0.2, 1), -webkit-backdrop-filter 0.8s cubic-bezier(0.33, 0, 0.2, 1), backdrop-filter 0.8s cubic-bezier(0.33, 0, 0.2, 1);
}
.c-panel.is-open::before {
  background: color-mix(in srgb, var(--character) 78%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  backdrop-filter: blur(28px) saturate(1.1);
}
.c-panel_scroll { opacity: 0; transition: opacity 0.5s; }
.c-panel.is-open .c-panel_scroll { opacity: 1; transition: opacity 0.6s 0.15s; }
.c-panel .c-panel_close { opacity: 0; transition: background-color 0.4s, color 0.4s, transform 0.4s var(--ease-back), opacity 0.5s; }
.c-panel.is-open .c-panel_close { opacity: 1; transition: background-color 0.4s, color 0.4s, transform 0.4s var(--ease-back), opacity 0.6s 0.15s; }
.c-panel_scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(7 * var(--u)) var(--gutter) calc(10 * var(--u)); }
.c-panel_close { position: fixed; z-index: 2; left: 50%; bottom: calc(2.6 * var(--u)); transform: translateX(-50%); }
.c-panel_close.c-button { background: var(--panelInk, #fff); border-color: var(--panelInk, #fff); color: var(--character); }
.c-panel_close.c-button:hover { transform: translateX(-50%) translateY(-2px); }

.c-info { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(6 * var(--u)); max-width: calc(110 * var(--u)); margin: 0 auto; }
.c-info h2 { font-size: max(22px, calc(2.2 * var(--u))); font-weight: 300; letter-spacing: 0.04em; margin-bottom: calc(3 * var(--u)); }
.c-info ._desc { font-size: max(13px, calc(0.95 * var(--u))); font-weight: 300; line-height: 1.9; letter-spacing: 0.02em; }
.c-info ._desc p + p { margin-top: 1em; }
.c-info ._price { display: flex; align-items: baseline; gap: 0.8em; flex-wrap: wrap; margin: calc(2.4 * var(--u)) 0 calc(0.6 * var(--u)); }
.c-info ._price strong { font-size: max(24px, calc(2.2 * var(--u))); font-weight: 400; letter-spacing: 0.02em; }
.c-info ._price small { font-size: var(--fs-xs); opacity: 0.8; letter-spacing: 0.04em; }
.c-info dl { display: grid; grid-template-columns: minmax(8em, 30%) 1fr; margin-top: calc(2.4 * var(--u)); font-size: max(12px, calc(0.78 * var(--u))); line-height: 1.85; letter-spacing: 0.02em; }
.c-info dt, .c-info dd { padding: calc(0.55 * var(--u)) 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); white-space: pre-line; }
.c-info dt { opacity: 0.75; }

.c-form { display: grid; gap: calc(1.2 * var(--u)); }
.c-form ._lead { font-size: var(--fs-s); font-weight: 300; line-height: 1.7; opacity: 0.9; }
.c-field { display: grid; gap: 0.4em; }
.c-field > span { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.c-field input, .c-field textarea {
  width: 100%;
  padding: 0.7em 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 0;
  background: transparent;
  font-size: max(14px, calc(0.95 * var(--u)));
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
}
.c-field textarea { min-height: 7.5em; resize: vertical; line-height: 1.6; }
.c-field input:focus, .c-field textarea:focus { border-bottom-color: currentColor; }
.c-field.is-error input, .c-field.is-error textarea { border-bottom-color: #ff8a80; }
.c-check { display: flex; gap: 0.8em; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.6; letter-spacing: 0.02em; opacity: 0.9; }
.c-check input { margin-top: 0.25em; accent-color: currentColor; }
.c-form ._hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c-form ._status { min-height: 1.4em; font-size: var(--fs-s); line-height: 1.5; }
.c-form ._status.is-error { color: #ffb4ab; }
body[data-tone='dark'] .c-form ._status.is-error { color: var(--error-ink); }
.c-form.-dark ._status.is-error { color: #b3261e; }
.c-form ._actions { display: flex; gap: 1em; flex-wrap: wrap; align-items: center; }
.c-form.is-sent ._fields { display: none; }

.c-photos ._head { text-align: center; margin-bottom: calc(3 * var(--u)); }
.c-photos ._head h2 { font-size: max(22px, calc(2.2 * var(--u))); font-weight: 400; letter-spacing: 0.04em; }
.c-photos ._head p { margin-top: calc(0.4 * var(--u)); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.c-photos ul { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(0.6 * var(--u)); max-width: calc(90 * var(--u)); margin: 0 auto; }
.c-photos li button { display: block; height: calc(11.5 * var(--u)); overflow: hidden; transition: opacity 0.4s, transform 0.6s var(--ease-expo); }
.c-photos li button img { height: 100%; width: auto; transition: transform 1s var(--ease-expo); }
.c-photos ul:has(button:hover) button { opacity: 0.45; }
.c-photos li button:hover { opacity: 1 !important; }
.c-photos li button:hover img { transform: scale(1.06); }
.c-photos li button[aria-current='true'] { outline: 1px solid currentColor; outline-offset: 3px; }

@media (max-width: 767px) {
  .c-info { grid-template-columns: 1fr; gap: 12vw; }
  .c-panel_scroll { padding: 24vw 6vw 28vw; }
  .c-photos li button { height: 28vw; }
}

/* ----------------------------------------------------------------- pagine testuali */
.p-text { min-height: calc(100 * var(--vh)); padding: min(14vw, calc(24 * var(--vh))) var(--gutter) calc(12 * var(--vh)); display: grid; grid-template-columns: 24vw 1fr; gap: calc(3 * var(--u)); border-color: currentColor; }
.p-text_head { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.p-text_head h1 { font-size: max(28px, calc(3.4 * var(--u))); font-weight: 300; letter-spacing: 0.04em; }
.p-text_head p { font-size: var(--fs-s); letter-spacing: 0.06em; opacity: 0.6; }
.p-text_body { max-width: calc(62 * var(--u)); font-size: max(15px, calc(1.15 * var(--u))); font-weight: 300; line-height: 1.95; letter-spacing: 0.02em; }
.p-text_body p + p { margin-top: 1.1em; }
.p-text_body .c-form { max-width: calc(48 * var(--u)); }
.p-text_body ._mail { margin-bottom: calc(2.4 * var(--u)); font-size: var(--fs-s); letter-spacing: 0.04em; }
.p-text_body ._mail a { border-bottom: 1px solid; }
@media (max-width: 767px) {
  .p-text { grid-template-columns: 1fr; padding-top: 32vw; }
}

/* ----------------------------------------------------------------- avviso modalità anteprima */
.c-demo-note { position: fixed; left: 50%; bottom: 10px; z-index: 300; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 11px; letter-spacing: 0.06em; pointer-events: none; opacity: 0.85; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
}

/* pulsanti pieni su pannelli chiari */
.c-form.-dark .c-button.-solid { background: #000; border-color: #000; color: #fff; }
.p-text .c-form .c-button.-solid { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ----------------------------------------------------------------- pagina Top: slideshow a tutto schermo */
.p-top { position: relative; height: calc(100 * var(--vh)); overflow: hidden; background: var(--character-bg, #2a2830); color: #fff; transition: background-color 1s; }
.p-top_list ._item { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.p-top_list ._item.is-prev { visibility: visible; z-index: 2; }
.p-top_list ._item.is-active { visibility: visible; z-index: 3; pointer-events: auto; animation: ks-hero-in 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) both; }
@keyframes ks-hero-in {
  0% { clip-path: polygon(116% 0, 100% 0, 100% 100%, 100% 100%); }
  100% { clip-path: polygon(-1% 0, 100% 0, 100% 100%, -5% 100%); }
}
/* indietro: la stessa tendina obliqua, specchiata, da sinistra verso destra */
.p-top_list ._item.is-active.is-back { animation-name: ks-hero-in-back; }
@keyframes ks-hero-in-back {
  0% { clip-path: polygon(-16% 0, 0% 0, 0% 100%, 0% 100%); }
  100% { clip-path: polygon(101% 0, 0% 0, 0% 100%, 105% 100%); }
}
.c-figure_inner { position: relative; display: block; height: 100%; color: #fff; }
.c-figure_image { position: absolute; inset: 0; background: var(--character-bg, #222); perspective: calc(20 * var(--u)); }
.c-figure_image img { width: 100%; height: 100%; object-fit: cover; }
.is-active .c-figure_image img, .is-prev .c-figure_image img { transform-origin: left center; animation: ks-hero-drift calc(var(--speed) + 1s) linear both; }
@keyframes ks-hero-drift {
  0% { transform: translateX(0) scale(1.2) rotateY(2deg); }
  100% { transform: translateX(-2%) scale(1.03) rotateY(-2deg); }
}
.c-figure_image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}
.c-figure_main { position: absolute; z-index: 2; left: var(--gutter); bottom: calc(4.1 * var(--vh)); }
.c-figure_main ._status { font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.06em; }
.c-figure_main ._name { margin-top: calc(1.25 * var(--u)); font-size: max(34px, calc(3.33 * var(--u))); font-weight: 300; letter-spacing: 0.04em; }
.c-figure_main ._caption { margin-top: calc(0.2 * var(--u)); font-size: max(13px, calc(1.04 * var(--u))); font-weight: 300; letter-spacing: 0.024em; }
.c-figure_main ._button { margin-top: calc(1.9 * var(--u)); }
.c-figure_credit { position: absolute; z-index: 2; top: calc(10.9 * var(--u)); right: var(--gutter); font-size: var(--fs-xs); line-height: 1.75; letter-spacing: 0.04em; }
.c-figure_credit dl { display: flex; justify-content: flex-end; gap: 0.35em; }
.c-figure_credit dt { opacity: 0.8; }
/* crediti e stato entrano come riga intera (niente scalino lettera per lettera): sempre allineati */
.c-figure_credit .c-word > span, .c-figure_main ._status .c-word > span { --i: 0 !important; }

.p-top_control { position: absolute; z-index: 4; right: var(--gutter); bottom: calc(4.4 * var(--vh)); display: flex; align-items: flex-end; gap: calc(1.25 * var(--u)); }
.p-top_control ._ctl { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: calc(6.8 * var(--u)); min-width: 64px; color: #fff; text-align: left; transition: width 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.p-top_control ._ctl.is-active { width: calc(14.8 * var(--u)); min-width: 150px; }
.p-top_control ._title { font-size: var(--fs-s); font-weight: 400; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.p-top_control ._caption { max-height: 0; overflow: hidden; font-size: max(9px, calc(0.6 * var(--u))); letter-spacing: 0.04em; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; transition: max-height 0.5s, padding 0.5s; }
.p-top_control ._ctl.is-active ._caption, .p-top_control ._ctl:hover ._caption { max-height: 1.6em; padding-top: 0.15em; }
.p-top_control ._ctl::before, .p-top_control ._ctl::after { content: ''; width: 100%; height: 1px; background: #fff; }
.p-top_control ._ctl::before { position: absolute; left: 0; bottom: 0; opacity: 0.25; }
.p-top_control ._ctl::after { margin-top: calc(0.3 * var(--u) + 2px); transform: scaleX(0); transform-origin: right center; transition: transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); }
.p-top_control ._ctl.is-active::after { transform: none; transform-origin: left center; transition: transform var(--speed) linear; }
.p-top_control ._ctl.is-paused::after { transition: none; }
.p-top_arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--ring);
  height: var(--ring);
  margin-top: calc(-0.5 * var(--ring));
  --ring: max(54px, calc(4 * var(--u)));
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.6s var(--ease-expo);
}
.p-top_arrow.-prev { left: var(--gutter); transform: translateX(-35%); }
.p-top_arrow.-next { right: var(--gutter); transform: translateX(35%); }
.p-top_arrow ._ring { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: rgba(0, 0, 0, 0.08); transition: background-color 0.3s, border-color 0.3s; }
.p-top_arrow svg { width: 46%; height: 46%; transition: transform 0.5s var(--ease-expo); }
.p-top_arrow.-prev svg { transform: rotate(180deg); }
.p-top.is-side-prev .p-top_arrow.-prev, .p-top.is-side-next .p-top_arrow.-next, .p-top_arrow:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.p-top_arrow:hover ._ring { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.p-top_arrow.-next:hover svg { transform: translateX(10%); }
.p-top_arrow.-prev:hover svg { transform: rotate(180deg) translateX(10%); }
html.is-nav .p-top_arrow { opacity: 0; pointer-events: none; }
@media (hover: none) { .p-top_arrow { display: none; } }
.p-top_empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.p-top_empty p { font-size: var(--fs-s); letter-spacing: 0.06em; line-height: 2; }
@media (max-width: 767px) {
  .c-figure_main { bottom: 14vw; }
  .c-figure_credit { top: 34vw; }
  .p-top_control { left: var(--gutter); bottom: 6vw; }
  .p-top_control ._ctl { display: none; }
  .p-top_control ._ctl.is-active { display: flex; width: 100%; }
  .p-top_control ._title, .p-top_control ._caption { display: none; }
}

/* pulsante a pillola che si "gonfia" all'entrata */
.c-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; height: max(28px, calc(1.6 * var(--u))); padding: 0 1.5em; --pill-bg: #fff; --pill-ink: #000; --pill-delay: 0.7s; }
.c-pill::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: max(28px, calc(1.6 * var(--u))); border-radius: 999px; background: var(--pill-bg); transform: scale(0); transition: width 0.6s var(--ease-back), transform 0.6s 0.3s var(--ease-expo); }
.is-active .c-pill::after { width: 100%; transform: none; transition: width 0.6s calc(var(--pill-delay) + 0.2s) var(--ease-back), transform 0.6s var(--pill-delay) var(--ease-expo); }
.c-pill > span { position: relative; z-index: 1; color: var(--pill-ink); font-size: var(--fs-xs); letter-spacing: 0.2em; line-height: 1; clip-path: inset(0 100% 0 0); transition: clip-path 0.2s; }
.is-active .c-pill > span { clip-path: inset(0 0 0 0); transition: clip-path 0.4s calc(var(--pill-delay) + 0.8s); }

/* ----------------------------------------------------------------- pagina Serie: indice delle voci */
.p-works { min-height: calc(100 * var(--vh)); padding: min(14vw, calc(24 * var(--vh))) var(--gutter) calc(12 * var(--vh)); display: grid; grid-template-columns: 24vw minmax(0, 1fr); gap: calc(3 * var(--u)); align-items: start; }
.p-works_head { position: sticky; top: min(14vw, calc(24 * var(--vh))); display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.p-works_head p { font-size: var(--fs-s); letter-spacing: 0.06em; opacity: 0.6; }
.p-works_head h1 { font-size: max(28px, calc(3.4 * var(--u))); font-weight: 300; letter-spacing: 0.04em; }
.p-works_head ._count { opacity: 0.45; }
.p-works_list { border-bottom: 1px solid currentColor; }
.p-works_row { position: relative; }
.p-works_row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 1.2s var(--ease-out); transition-delay: calc(0.15s + var(--i) * 0.06s); }
.is-active .p-works_row::before { transform: none; }
.p-works_row ._link {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  grid-template-areas: 'name thumbs go' 'desc thumbs go';
  align-items: center;
  gap: calc(0.4 * var(--u)) calc(2 * var(--u));
  padding: calc(1.6 * var(--u)) 0;
  transition: opacity 0.4s;
}
.p-works_list:has(._link:hover) ._link:not(:hover) { opacity: 0.35; }
.p-works_row ._name { grid-area: name; display: flex; align-items: flex-start; gap: 0.5em; font-size: max(24px, calc(2.6 * var(--u))); font-weight: 300; letter-spacing: 0.04em; }
.p-works_row ._name::before { content: ''; flex: none; width: 0.32em; height: 0.32em; margin-top: 0.45em; border-radius: 50%; background: var(--work, currentColor); opacity: 0.9; }
.p-works_row ._name sup { font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.04em; margin-top: 0.4em; opacity: 0.6; }
.p-works_row ._desc { grid-area: desc; font-size: var(--fs-s); font-weight: 300; line-height: 1.7; opacity: 0.7; padding-left: calc(0.32em + 0.5em); }
.p-works_row ._desc:empty { display: none; }
.p-works_row ._thumbs { grid-area: thumbs; justify-self: end; display: flex; gap: calc(0.5 * var(--u)); }
.p-works_row ._thumb { width: calc(4.4 * var(--u)); min-width: 40px; aspect-ratio: 40.56 / 56.67; overflow: hidden; }
.p-works_row ._thumb img { width: 100%; height: 100%; object-fit: cover; transform: translateY(105%); transition: transform 0.9s var(--ease-expo); transition-delay: calc(var(--k) * 0.05s); }
.p-works_row ._link:hover ._thumb img, .p-works_row ._link:focus-visible ._thumb img { transform: none; }
.p-works_row ._go { grid-area: go; font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; transform: translateX(-0.8em); transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.p-works_row ._link:hover ._go { opacity: 1; transform: none; }
.p-works_empty { font-size: var(--fs-s); }
@media (hover: none) { .p-works_row ._thumb img { transform: none; } }
@media (max-width: 767px) {
  .p-works { grid-template-columns: 1fr; padding-top: 32vw; }
  .p-works_head { position: static; }
  .p-works_row ._link { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'name' 'desc' 'thumbs'; }
  .p-works_row ._thumbs { justify-self: start; }
  .p-works_row ._go { display: none; }
  .p-works_row ._name { font-size: 6vw; }
}