/* ZEMYA · nero pieno, un colore per prodotto, lettere glifiche, curve di livello e strati. */
:root {
  --nero: #0B0B0C;
  --bianco: #F4F2EC;
  --grigio: #A5A399;
  --chiaro: #D8D6CF;
  --linea: rgba(244, 242, 236, .16);
  --pink: #F49AC1;
  --green: #7EF0A6;
  --purple: #B79CF5;
  --lamousse: #E9B872;
  --drysift: #D8CFAE;
  --accento: var(--green);
  --g: clamp(16px, 4vw, 56px);
  --testo: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dati: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --misura: 62ch;
}
[data-prodotto="pink"] { --accento: var(--pink); }
[data-prodotto="green"] { --accento: var(--green); }
[data-prodotto="purple"] { --accento: var(--purple); }
[data-prodotto="lamousse"] { --accento: var(--lamousse); }
[data-prodotto="drysift"] { --accento: var(--drysift); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nero); scroll-behavior: smooth; }
html:not(.moto), html:has(:focus-visible) { scroll-behavior: auto; }   /* con la tastiera il fuoco va visto subito, non a fine corsa */
body { margin: 0; background: var(--nero); color: var(--bianco); font: 400 17px/1.5 var(--testo); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
main:focus { outline: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
[id] { scroll-margin-top: 88px; }

.solo-lettura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cap { font: 400 12px/1.5 var(--dati); letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); }
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--g); }
.griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 24px); }
.riempie { width: 100%; height: 100%; object-fit: cover; }
.sezione { padding-block: clamp(64px, 10vw, 140px); }
.testo-grande { font-size: clamp(27px, 3.6vw, 52px); line-height: 1.14; letter-spacing: -.01em; font-weight: 400; }
.testo-medio { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.titolo-sezione { font-size: clamp(36px, 6.2vw, 92px); line-height: .98; }
.titolo-pagina { font-size: clamp(34px, 8vw, 120px); line-height: .98; letter-spacing: -.02em; }
.btn { display: inline-block; font: 500 13px/1.2 var(--testo); letter-spacing: .06em; text-transform: uppercase; color: var(--bianco); background: none; border: 1px solid var(--bianco); padding: 15px 22px; cursor: pointer; border-radius: 2px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
@media (hover: hover) { .btn:hover { background: var(--bianco); color: var(--nero); } }
.btn { transition: background .25s, color .25s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.btn:active { transform: scale(.97); }
.btn-pieno { background: var(--bianco); color: var(--nero); }
.btn-pieno:hover { background: none; color: var(--bianco); }
.btn:disabled { opacity: .45; cursor: default; }
.freccia { display: inline-block; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .45s cubic-bezier(.22, 1, .36, 1), padding .45s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .freccia:hover { background-size: 28% 2px; padding-right: 14px; } }
.freccia:focus-visible { background-size: 28% 2px; padding-right: 14px; }
.nome { height: 1em; width: auto; color: var(--accento); }
.nota { font-size: 14px; line-height: 1.45; color: var(--grigio); }
.logo-frase { display: inline-block; height: .72em; width: auto; margin-right: .03em; vertical-align: -.01em; color: var(--bianco); }
.ta-free { height: .76em; color: inherit; }

/* comparsa: solo se il JS c'è */
html.pronto.moto .rivela:not(.in) { opacity: 0; transform: translateY(18px); }
html.moto .rivela { transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }

/* salto al contenuto */
.salta { position: fixed; left: var(--g); top: 8px; z-index: 120; background: var(--bianco); color: var(--nero); padding: 10px 14px; transform: translateY(-200%); text-decoration: none; }
.salta:focus { transform: none; }

/* ---------------------------------------------------- barriera d'età */
.eta { display: none; }
html.eta-aperta { overflow: hidden; }
html.eta-aperta .eta { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--nero); padding: var(--g); overflow: auto; }
html.eta-aperta main, html.eta-aperta .testata, html.eta-aperta .piede, html.eta-aperta .salta { visibility: hidden; }
.eta-tex { position: absolute; inset: 0; opacity: .34; -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 62%, #000 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 62%, #000 100%); }
.eta-tex img { width: 100%; height: 100%; object-fit: cover; }
.eta-box { position: relative; width: min(100%, 520px); display: grid; gap: 20px; justify-items: start; }
.eta-box .logo { height: 22px; width: auto; color: var(--bianco); margin-bottom: 28px; }
.eta-box h2 { font-size: clamp(36px, 6vw, 60px); line-height: 1; letter-spacing: -.02em; }
.eta-box p { color: var(--chiaro); }
.eta-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.eta-no { color: var(--bianco) !important; }
.eta-memoria { margin-top: 8px; }

/* ---------------------------------------------------- testata */
.testata { transition: transform .35s cubic-bezier(.22, 1, .36, 1); position: fixed; inset: 0 0 auto; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--g); background: linear-gradient(rgba(11, 11, 12, .82), rgba(11, 11, 12, 0)); }
.testata.via { transform: translateY(-100%); }
.testata:focus-within { transform: none; }
.testata-logo { position: relative; display: block; color: inherit; padding: 4px 0; }
/* sotto il marchio si disegna la linea più forte del terreno, nel colore del prodotto */
.testata-logo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accento); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .testata-logo:hover::after { transform: scaleX(1); } }
.testata-logo:focus-visible::after { transform: scaleX(1); }
.testata { color: var(--bianco); }
.testata-logo .logo { height: 20px; width: auto; }
.testata-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.testata-nav > ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.testata a, .lingue summary, .menu-apri { font: 500 14px/1.2 var(--testo); white-space: nowrap; }
.testata-nav a { text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s; }
.testata-nav a:hover, .testata-nav a[aria-current="page"] { background-size: 100% 1px; }
.lingue { position: relative; }
.lingue summary { cursor: pointer; list-style: none; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 2px; }
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary:hover { border-color: var(--bianco); }
.lingue ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 172px; background: var(--nero); border: 1px solid var(--linea); padding: 8px 14px; }
.lingue li a { display: block; padding: 8px 0; font-weight: 400; }
.lingue [aria-current] { text-decoration: underline; text-underline-offset: 4px; background: none; }
.menu-apri { display: none; color: var(--bianco); background: none; border: 1px solid var(--linea); border-radius: 2px; padding: 9px 12px; cursor: pointer; }
.menu { position: fixed; inset: 0; z-index: 80; background: var(--nero); padding: 96px var(--g) var(--g); overflow: auto; display: grid; align-content: start; gap: 20px; }
.menu[hidden] { display: none; }
.menu-voci a { display: block; font-size: clamp(30px, 9vw, 44px); line-height: 1.25; font-weight: 500; text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.menu-lingue a { display: block; padding: 8px 0; text-decoration: none; white-space: nowrap; }
.menu-lingue [aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.menu > .cap { margin-top: 16px; }
html.menu-aperto { overflow: hidden; }
@media (max-width: 899px) {
  html.js .testata-nav { display: none; }
  html.js .menu-apri { display: block; }
  html:not(.js) .testata { position: static; flex-wrap: wrap; }
  html:not(.js) .testata-nav, html:not(.js) .testata-nav > ul { flex-wrap: wrap; gap: 8px 18px; }
}

/* ---------------------------------------------------- fra una pagina e l'altra: la nuova si apre dal centro, come il bollino */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .testata { view-transition-name: testata; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .58s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-fill-mode: both; }
  ::view-transition-group(testata) { animation-duration: .58s; }
  ::view-transition-old(root) { animation-name: vt-esce; }
  ::view-transition-new(root) { animation-name: vt-apre; }
}
@keyframes vt-esce { to { opacity: .2; transform: scale(.965); } }
@keyframes vt-apre { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }

/* ---------------------------------------------------- apertura */
.apertura { position: relative; --ap-x: 27vw; --ap-y: 0px; --lato: min(66svh, 46vw, 620px); }
.ap-palco { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-content: end; padding: 110px var(--g) clamp(40px, 8vh, 72px); background: radial-gradient(ellipse at 74% 55%, #151516, var(--nero) 62%); }
.ap-testo { position: relative; z-index: 3; width: 100%; }
.ap-testo .cap { margin-bottom: 18px; }
.apertura h1 { font-size: clamp(46px, min(8.2vw, 17svh), 158px); line-height: .95; letter-spacing: -.02em; max-width: min(7.6em, 46vw); }
html[lang="fr"] .apertura h1 { font-size: clamp(44px, min(7.2vw, 15svh), 138px); }
html[lang="es"] .apertura h1 { font-size: clamp(44px, min(7.7vw, 16svh), 148px); }
html[lang="cs"] .apertura h1 { font-size: clamp(44px, min(7vw, 15svh), 136px); }   /* «nevrací stejná.» è legato: deve stare in 46vw */
.ap-sotto { margin-top: 24px; max-width: 34ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--chiaro); }
.ap-figura { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: min(58vw, 92svh); aspect-ratio: 1; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.ap-jar { position: absolute; width: 165%; max-width: none; left: -32.5%; top: -57%; }

@media (orientation: portrait), (max-width: 760px) {
  .apertura { --ap-x: 0px; --ap-y: 21svh; --lato: min(82vw, 44svh); }
  .ap-palco { align-content: start; padding-top: 96px; }
  .ap-figura { position: relative; right: auto; top: auto; translate: none; width: min(calc(100vw - 2 * var(--g)), 62svh); margin: 8px auto 0; }
  .apertura h1, html[lang="fr"] .apertura h1, html[lang="es"] .apertura h1 { font-size: clamp(42px, 12.4vw, 100px); max-width: 7.6em; }
}
@media (orientation: portrait) and (max-height: 720px), (max-width: 760px) and (max-height: 720px) {
  .ap-sotto { display: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .ap-palco { padding-top: 76px; }
  .ap-sotto { display: none; }
  .apertura h1 { font-size: clamp(38px, 16svh, 80px); }
}

/* ---------------------------------------------------- l'esperienza */
html.xp .statico { display: none; }
html.xp .pag-home main { min-height: 1650svh; }   /* lo spazio c'è già prima che l'esperienza entri: il piede non salta */
section.xp { position: relative; height: 1650svh; }
.xp-ancora { position: absolute; left: 0; width: 1px; height: 1px; scroll-margin-top: 0; }
.xp-palco { position: sticky; top: 0; height: 100lvh; --barra: calc(100lvh - 100svh); overflow: hidden; background: var(--nero); touch-action: pan-y; }
.sul-barattolo { cursor: grab; }
.afferrato { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.xp-avanza { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bianco); opacity: .55; transform: scaleX(0); transform-origin: 0 0; pointer-events: none; }
.xp-grana { display: none; position: absolute; inset: -160px; pointer-events: none; background: url(/assets/xp/grana.png); opacity: .55; animation: xp-grana .8s steps(5) infinite; }
html.xp .xp-grana { display: block; }
@keyframes xp-grana { 0% { transform: translate(0, 0); } 20% { transform: translate(-62px, 38px); } 40% { transform: translate(44px, -71px); } 60% { transform: translate(-27px, -33px); } 80% { transform: translate(71px, 52px); } 100% { transform: translate(0, 0); } }
.xp-palco::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity .35s; background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .42) 100%); }
.xp-palco.sul-colore::after { opacity: 0; }
.xp-palco { --colore-testo: var(--bianco); }
.xp-velo { transition: opacity .35s; }
.xp-palco.sul-colore .xp-velo { visibility: hidden; }
.xp-palco.sul-colore .xp-indice, .xp-palco.sul-colore .xp-prodotto { opacity: 0 !important; }
.xp-palco.sul-colore .xp-avanza { background: var(--nero); }
.xp-palco.sul-link { cursor: pointer; }
html.sul-colore .testata { background: none; color: var(--nero); }
html.sul-colore .testata .lingue summary, html.sul-colore .menu-apri { color: var(--nero); border-color: rgba(11, 11, 12, .4); }
.xp-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xp-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--nero) 0, rgba(11, 11, 12, .88) 34%, rgba(11, 11, 12, 0) 58%); }
.xp-palco[data-velo="alto"] .xp-velo { background: linear-gradient(180deg, var(--nero) 0, rgba(11, 11, 12, .85) 22%, rgba(11, 11, 12, 0) 40%, rgba(11, 11, 12, 0) 72%, rgba(11, 11, 12, .9) 86%, var(--nero) 100%); }
.xp-palco[data-velo="basso"] .xp-velo { background: linear-gradient(0deg, var(--nero) 0, rgba(11, 11, 12, .9) 34%, rgba(11, 11, 12, 0) 56%); }
.xp-beat { align-content: start; position: absolute; left: var(--g); bottom: calc(var(--barra) + clamp(32px, 8svh, 80px)); width: min(46vw, 640px); display: grid; gap: 18px; justify-items: start; opacity: 0; will-change: opacity; pointer-events: none; }
.xp-beat.attiva a { pointer-events: auto; }
.xp-beat a.freccia { padding-block: 10px; }
.xp-beat .testo-medio, .xp-beat > p:not(.cap) { color: var(--chiaro); }
.xp-eroe { opacity: 1; }
.xp-eroe h1 { font-size: clamp(44px, min(7.6vw, 15.5svh), 150px); line-height: .95; letter-spacing: -.02em; }
/* la frase c'è subito: il mondo arriva dietro di lei, senza un sipario davanti */
html.moto .xp-eroe:not(.xp-suggerimenti) > * { animation: xp-sale 1s cubic-bezier(.22, 1, .36, 1) both; }
html.moto .xp-eroe > .xp-sotto { animation-delay: .15s; }
@keyframes xp-sale { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
html[lang="fr"] .xp-eroe h1 { font-size: clamp(42px, min(6.7vw, 14svh), 132px); }
html[lang="es"] .xp-eroe h1 { font-size: clamp(42px, min(7.1vw, 15svh), 140px); }
.xp-sotto { max-width: 34ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; text-wrap: balance; }
section.xp .cap, section.xp .xp-misure, .pr-apertura .cap, .pag-404 p { text-shadow: 0 0 8px var(--nero), 0 0 18px var(--nero); }
section.xp .xp-suggerimenti { left: auto; top: auto; right: var(--g); bottom: calc(var(--barra) + clamp(32px, 8svh, 80px)); width: auto; display: flex; align-items: baseline; gap: 22px; }
.xp-manifesto { width: min(54vw, 860px); bottom: calc(var(--barra) + clamp(40px, 10svh, 100px)); }
.xp-manifesto, .xp-manifesto .cap, section.xp .xp-manifesto > p:not(.cap), .xp-manifesto .freccia, .xp-manifesto .freccia:hover { color: var(--nero); }
.xp-manifesto .cap { font-family: var(--testo); font-weight: 500; }
.xp-manifesto .testo-grande { font-size: clamp(26px, 3.3vw, 56px); line-height: 1.1; letter-spacing: -.015em; font-weight: 500; }

.xp-parola { transition: opacity .25s; }
.xp-nome { clip-path: inset(-6% calc((1 - var(--w, 1)) * 100%) -6% 0); height: min(clamp(40px, 8vw, 118px), calc(min(39vw, 580px) / var(--ar))); width: auto; max-width: 100%; }
.xp-prodotto > .cap, .pr-titolo > .cap { font-family: var(--testo); font-weight: 500; }

.xp-prodotto { gap: 12px; }
.xp-prodotto .testo-medio { max-width: 30ch; }
.xp-indice { left: auto; right: var(--g); width: auto; justify-items: end; text-align: right; gap: 10px; padding: 18px 0 18px 32px; text-shadow: 0 0 2px var(--nero), 0 0 10px var(--nero), 0 0 18px var(--nero); }
.xp-indice::before { content: ''; position: absolute; inset: -30px -40px -30px -60px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(11, 11, 12, .9), rgba(11, 11, 12, 0)); }
.xp-indice ol { display: grid; gap: 2px; font: 500 12px/1.4 var(--testo); letter-spacing: .12em; color: var(--grigio); }
.xp-indice a { display: block; padding: 4px 0; text-decoration: none; transition: color .25s; }
.xp-indice a { transition: color .25s, transform .35s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .xp-indice a:hover { color: var(--bianco); transform: translateX(-6px); } }
.xp-indice li.on a { color: var(--accento); }
.xp-palco[data-prodotto="pink"] .xp-indice { --accento: var(--pink); }
.xp-palco[data-prodotto="green"] .xp-indice { --accento: var(--green); }
.xp-palco[data-prodotto="purple"] .xp-indice { --accento: var(--purple); }
.xp-palco[data-prodotto="lamousse"] .xp-indice { --accento: var(--lamousse); }
.xp-palco[data-prodotto="drysift"] .xp-indice { --accento: var(--drysift); }
.xp-tappo-testa { gap: 18px; }
.xp-guida { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: visible; }
.xp-guida line { stroke: var(--accento); stroke-width: 1; }
.xp-guida circle { fill: var(--accento); }
section.xp .xp-tappo { bottom: auto; top: 50%; translate: 0 -50%; width: min(38vw, 520px); }
section.xp .ta-lista { grid-column: auto; grid-template-columns: repeat(6, auto); justify-content: start; column-gap: 14px; row-gap: 16px; display: grid; }
section.xp .xp-misure { grid-template-columns: repeat(3, auto); margin-top: 8px; }
section.xp .ta-lista li { display: contents; }
section.xp .ta-lista i { grid-row: 1; font-style: normal; font-size: 13px; color: var(--chiaro); padding-bottom: 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; transition: color .2s, border-color .2s; }
section.xp .ta-lista li.on i { color: var(--accento); border-color: var(--accento); }
section.xp .ta-voce { display: grid; gap: 6px; grid-row: 2; grid-column: 1 / -1; align-self: start; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; max-width: 40ch; }
section.xp .ta-lista li.on .ta-voce { opacity: 1; transform: none; }
section.xp .ta-voce b { font-weight: 500; font-size: clamp(24px, 3vw, 44px); line-height: 1.05; letter-spacing: -.01em; }
section.xp .ta-voce p { color: var(--chiaro); font-size: clamp(17px, 1.4vw, 20px); }
.xp-oggetto { top: clamp(76px, 10svh, 110px); bottom: auto; width: min(58vw, 820px); gap: 12px; }
.xp-oggetto > p { max-width: 52ch; }
.xp-oggetto-voci { bottom: calc(var(--barra) + clamp(24px, 5svh, 56px)); width: min(60vw, 560px); }
.xp-oggetto .titolo-sezione, .xp-tappo-testa .titolo-sezione, .xp-dove .titolo-sezione { font-size: clamp(32px, 4.8vw, 72px); }
.xp-dove { gap: 14px; }
.xp-tutti { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.xp-tutti a { display: block; padding: 6px 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.xp-tutti a::after { content: ''; display: block; height: 1px; margin-top: 4px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.xp-tutti a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
@media (hover: hover) { .xp-tutti a:hover { transform: translateY(-4px); } }
.xp-tutto { height: 15px; }

.xp-posa { position: absolute; left: 73%; top: 47%; translate: -50% -50%; aspect-ratio: 11 / 12; width: min(39.6vw, 63.3svh); max-width: none; height: auto; pointer-events: none; animation: xp-posa .5s both; transition: opacity .6s; }
.xp-posa.via { opacity: 0; }
@keyframes xp-posa { from { opacity: 0; } }
.xp-carico { position: absolute; left: 73%; top: 80%; translate: -50% -50%; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }
.xp-carico.via { opacity: 0; visibility: hidden; }
.xp-carico.al-centro { top: 50%; }   /* dentro un capitolo il barattolo sta più in alto che nell'apertura */
.xp-carico-linea { display: block; width: 120px; height: 1px; background: var(--linea); position: relative; overflow: hidden; }
.xp-carico-linea::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--bianco); animation: xp-carico 1.4s ease-in-out infinite; }
@keyframes xp-carico { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@media (orientation: portrait), (max-width: 760px) {
  .xp-posa { left: 50%; translate: -50% 0; top: auto; bottom: 14svh; width: min(85vw, 39.5svh); }
  .xp-carico { left: 50%; top: 89%; }
  .xp-carico.al-centro { top: 40%; }
  .xp-palco[data-velom="sopra"] .xp-velo, .xp-palco[data-velom="sopra"][data-velo] .xp-velo { background: linear-gradient(180deg, var(--nero) 0, rgba(11, 11, 12, .86) 30%, rgba(11, 11, 12, 0) 46%); }
  .xp-palco[data-velom="sotto"] .xp-velo, .xp-palco[data-velom="sotto"][data-velo] .xp-velo { background: linear-gradient(0deg, var(--nero) 0, rgba(11, 11, 12, .88) 22%, rgba(11, 11, 12, 0) 36%); }
  .xp-beat { width: auto; right: var(--g); bottom: calc(var(--barra) + clamp(24px, 5svh, 48px)); gap: 10px; }
  .xp-eroe:not(.xp-suggerimenti) { top: 88px; bottom: auto; }
  .xp-eroe h1, html[lang="fr"] .xp-eroe h1, html[lang="es"] .xp-eroe h1 { font-size: clamp(38px, 11.4vw, 92px); }
  .xp-sotto { font-size: 16px; }
  section.xp .xp-suggerimenti { left: var(--g); right: var(--g); bottom: calc(var(--barra) + 20px); top: auto; justify-content: space-between; }
  .xp-manifesto { top: auto; width: auto; bottom: calc(var(--barra) + 40px); }
  .xp-manifesto .testo-grande { font-size: clamp(24px, 6.9vw, 42px); line-height: 1.1; }
  .xp-nome { height: min(clamp(34px, 11vw, 92px), calc((100vw - 2 * var(--g)) / var(--ar))); }
  .xp-prodotto .testo-medio { font-size: 16px; max-width: none; }
  .xp-indice { display: none; }
  .xp-tappo-testa { top: 84px; bottom: auto; }
  section.xp .xp-tappo { top: auto; translate: none; bottom: calc(var(--barra) + 28px); width: auto; }
  section.xp .ta-voce b { font-size: 22px; }
  section.xp .ta-voce p { font-size: 16px; }
  .xp-oggetto { top: 84px; bottom: auto; width: auto; }
  .xp-oggetto > p { font-size: 15px; line-height: 1.4; }
  .xp-oggetto-voci { left: var(--g); right: var(--g); width: auto; bottom: calc(var(--barra) + 24px); }
  .xp-dove { top: 84px; bottom: auto; }
}
@media (orientation: portrait) and (max-height: 700px) {
  .xp-tappo-testa > p { display: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .xp-indice, .xp-oggetto > p, .xp-dove > .cap, .xp-tutti { display: none; }
  .xp-oggetto .titolo-sezione, .xp-tappo-testa .titolo-sezione, .xp-dove .titolo-sezione { font-size: 26px; }
  .xp-eroe h1 { font-size: clamp(34px, 14svh, 72px); }
  .xp-sotto, .xp-beat .xp-sotto { display: none; }
  .xp-manifesto .testo-grande { font-size: clamp(16px, 5.4svh, 26px); }
  section.xp .ta-voce b { font-size: 22px; }
  .xp-oggetto > p, .xp-tappo-testa > p { display: none; }
}
/* solo per il rilevatore degli a capo: tutti i testi uno sotto l'altro, nella loro larghezza */
html.xp-testo section.xp { height: auto; }
html.xp-testo .xp-palco { position: static; height: auto; overflow: visible; display: grid; gap: 60px; padding-block: 100px; }
html.xp-testo .xp-tela, html.xp-testo .xp-velo, html.xp-testo .xp-carico, html.xp-testo .xp-guida, html.xp-testo .xp-avanza, html.xp-testo .xp-grana { display: none; }
html.xp-testo .xp-beat { position: static !important; opacity: 1 !important; visibility: visible !important; translate: none !important; margin-left: var(--g); }
html.xp-testo section.xp .ta-lista { display: grid; grid-template-columns: 1fr; }
html.xp-testo section.xp .ta-lista li { display: block; }
html.xp-testo section.xp .ta-voce { opacity: 1; visibility: visible; transform: none; }

/* pagina prodotto: il barattolo vero, che si gira col dito */
.pr-tela { display: none; }
html.xp .pr-tela { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s; }
html.xp-vivo .pr-tela { opacity: 1; }
html.xp-vivo .pr-tex, html.xp-vivo .pr-figura { opacity: 0; visibility: hidden; transition: opacity .7s, visibility 0s .7s; }
html.xp .pr-apertura { touch-action: pan-y; }
html.xp-vivo .pr-apertura::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--nero) 0, rgba(11, 11, 12, 0) 90px), linear-gradient(180deg, var(--nero) 0, rgba(11, 11, 12, 0) 90px), linear-gradient(90deg, var(--nero) 0, rgba(11, 11, 12, .8) 30%, rgba(11, 11, 12, 0) 54%); }
html.xp-vivo .pr-griglia { z-index: 2; }
@media (max-width: 899px) {
  html.xp-vivo .pr-apertura::after { background: linear-gradient(0deg, var(--nero) 0, rgba(11, 11, 12, 0) 70px), linear-gradient(180deg, var(--nero) 0, rgba(11, 11, 12, .82) 22%, rgba(11, 11, 12, 0) 40%); }
}

/* ---------------------------------------------------- manifesto in breve */
.mb-testo { grid-column: 1 / 8; display: grid; gap: 28px; align-content: center; }
.mb-foto { grid-column: 9 / 13; aspect-ratio: 4 / 5; overflow: hidden; }
@media (max-width: 899px) {
  .mb-testo, .mb-foto { grid-column: 1 / -1; }
  .mb-foto { margin-top: 40px; }
}

/* ---------------------------------------------------- titoli di sezione */
.sh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 24px); row-gap: 20px; margin-bottom: clamp(32px, 5vw, 64px); align-items: end; }
.sh h2 { grid-column: 1 / 8; font-size: clamp(36px, 6.2vw, 92px); line-height: .98; }
.sh p { grid-column: 9 / 13; color: var(--chiaro); }
@media (max-width: 899px) { .sh h2, .sh p { grid-column: 1 / -1; } }

/* ---------------------------------------------------- i cinque prodotti */
.prodotti { border-bottom: 1px solid var(--linea); }
.prod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(12px, 3vw, 44px); padding-block: clamp(16px, 2.4vw, 32px); border-top: 1px solid var(--linea); text-decoration: none; }
.prod-bollino { width: clamp(96px, 11vw, 160px); height: auto; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.prod:hover .prod-bollino { transform: scale(1.05); }
.prod-testi { display: grid; gap: clamp(8px, 1vw, 14px); justify-items: start; }
.prod-nome { height: clamp(20px, 6.2vw, 74px); }
.prod-riga { color: var(--chiaro); max-width: var(--misura); }
.prod-vai { text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; transition: color .2s; }
.prod:hover .prod-vai { color: var(--accento); }
@media (max-width: 899px) {
  .prod { grid-template-columns: auto minmax(0, 1fr); }
  .prod-vai { display: none; }
}

/* ---------------------------------------------------- il tappo */
.tappo { padding-bottom: 0; }
.ta-griglia { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.ta-vista { grid-column: 1 / 8; position: relative; aspect-ratio: 1; width: min(100%, 72svh); justify-self: center; perspective: 1400px; }
.stk { position: absolute; inset: 6%; --s: clamp(.42px, .1vw, 1px); }
.ly { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ta-lista { grid-column: 8 / 13; display: grid; gap: 18px; }
.ta-lista li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; border-top: 1px solid var(--linea); padding-top: 12px; }
.ta-voce { display: grid; gap: 4px; }
.ta-voce b { font-weight: 500; font-size: 19px; line-height: 1.25; }
.ta-voce span { color: var(--chiaro); }
@media (max-width: 899px) and (orientation: portrait) {
  .ta-griglia { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ta-vista, .ta-lista { grid-column: 1; }
}
html.moto .ta-scena { height: 340svh; margin-top: clamp(-40px, -3vw, -16px); }
html.moto .ta-palco { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
html.moto .ta-lista { grid-template-columns: repeat(6, auto); justify-content: start; column-gap: 14px; row-gap: 16px; }
html.moto .ta-lista li { display: contents; }
html.moto .ta-lista i { grid-row: 1; font-style: normal; padding-bottom: 8px; border-bottom: 1px solid var(--linea); transition: color .2s, border-color .2s; }
html.moto .ta-lista li.on i { color: var(--accento); border-color: var(--accento); }
html.moto .ta-voce { grid-row: 2; grid-column: 1 / -1; align-self: start; opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity .3s, transform .3s; max-width: 40ch; }
html.moto .ta-lista li.on .ta-voce { opacity: 1; transform: none; visibility: visible; }
html.moto .ta-voce b { font-size: clamp(24px, 3vw, 44px); line-height: 1.05; letter-spacing: -.01em; }
html.moto .ta-voce span { font-size: clamp(17px, 1.4vw, 20px); margin-top: 8px; }
@media (max-width: 899px) and (orientation: portrait) {
  html.moto .ta-griglia { row-gap: 10px; align-content: center; }
  html.moto .ta-vista { width: min(100%, 50svh); }
  html.moto .ta-lista { min-height: 168px; align-content: start; }
}
.stk.sep { transform-style: preserve-3d; transform: perspective(1800px) scale(calc(1 - var(--e, 0) * .2)) rotateX(calc(var(--e, 0) * 58deg)); }
.stk.sep .ly { transform: translateZ(calc(var(--e, 0) * var(--z) * var(--s))); transition: opacity .3s; }
.ly-nome, .ly-free { --z: 210; }
.ly-terreno { --z: 105; }
.ly-anello { --z: 0; }
.ly-disco { --z: -105; }
.ly-tappo { --z: -210; }
/* quando gli strati sono staccati, i segni neri su fondo nero non si vedono: diventano bianchi */
.stk.staccato .ly-anello circle, .stk.staccato .ly-terreno g, .stk.staccato .ly-terreno path { stroke: var(--bianco); }
.stk.staccato .ly-terreno .maestra { stroke: var(--accento); }
.stk.staccato .ly-nome g, .stk.staccato .ly-free g { fill: var(--bianco); }
.stk.staccato .ly :is(circle, g, path) { transition: stroke .25s, fill .25s; }
.stk.staccato[data-attivo] .ly { opacity: .4; }
.stk.staccato[data-attivo="nome"] .ly-nome,
.stk.staccato[data-attivo="free"] .ly-free,
.stk.staccato[data-attivo="anello"] .ly-anello,
.stk.staccato[data-attivo="terreno"] .ly-terreno,
.stk.staccato[data-attivo="maestro"] .ly-terreno,
.stk.staccato[data-attivo="bordo"] .ly-tappo,
.stk.staccato[data-attivo="bordo"] .ly-disco { opacity: 1; }
.stk.staccato[data-attivo="maestro"] .ly-terreno path:not(.maestra) { opacity: .28; }

/* ---------------------------------------------------- l'oggetto */
.og-foto { grid-column: 1 / 7; aspect-ratio: 4 / 5; overflow: hidden; }
.og-dati { grid-column: 8 / 13; display: grid; gap: clamp(28px, 4vw, 48px); align-content: center; }
.og-testa { display: grid; gap: 20px; }
.og-testa p { color: var(--chiaro); }
.og-misure li { display: grid; grid-template-columns: clamp(84px, 7.6vw, 116px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 18px; border-top: 1px solid var(--linea); }
.og-misure li:last-child { border-bottom: 1px solid var(--linea); }
.og-misura { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.og-testo { color: var(--chiaro); }
@media (max-width: 899px) {
  .og-foto, .og-dati { grid-column: 1 / -1; }
  .og-dati { margin-top: 36px; }
}

/* ---------------------------------------------------- il ciclo */
.ciclo { position: relative; aspect-ratio: 16 / 9; max-height: 92svh; width: 100%; overflow: hidden; background: var(--nero); }
.ciclo img, .ciclo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; }
@media (orientation: portrait) { .ciclo { aspect-ratio: 9 / 16; } }

/* ---------------------------------------------------- negozi */
.dove { border-top: 1px solid var(--linea); }
.dove h2 { grid-column: 1 / 8; }
.dove-testo { grid-column: 9 / 13; display: grid; gap: 18px; justify-items: start; color: var(--chiaro); align-content: end; }
@media (max-width: 899px) {
  .dove h2, .dove-testo { grid-column: 1 / -1; }
  .dove-testo { margin-top: 24px; }
}

/* ---------------------------------------------------- piede */
.piede { border-top: 1px solid var(--linea); padding-bottom: 32px; }
.piede-logo { width: min(calc(100% - 2 * var(--g)), calc(1440px - 2 * var(--g))); margin: clamp(48px, 7vw, 96px) auto; color: var(--bianco); }
.piede-logo .logo { width: 100%; height: auto; }
.piede-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
.piede-frase { grid-column: 1 / 5; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }
.piede-dati { grid-column: 5 / 10; display: grid; gap: 10px; color: var(--chiaro); }
.piede-link { grid-column: 10 / 13; justify-self: end; display: grid; gap: 8px; align-content: start; }
.piede-link a { display: inline-block; padding-block: 3px; text-underline-offset: 4px; white-space: nowrap; transition: text-underline-offset .25s, color .25s; }
@media (hover: hover) { .piede-link a:hover { text-underline-offset: 7px; } }
.piede-fine { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--linea); }
@media (max-width: 899px) {
  .piede-frase, .piede-dati, .piede-link { grid-column: 1 / -1; justify-self: start; }
}

/* ---------------------------------------------------- pagina prodotto */
.pr-apertura { position: relative; min-height: 100svh; display: grid; align-items: end; padding-block: 96px clamp(32px, 6vh, 64px); overflow: hidden; }
.pr-tex { position: absolute; inset: 0; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent 54%, #000 70%); mask-image: linear-gradient(90deg, transparent 54%, #000 70%); }
.pr-tex .tex { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-tex .tex-verticale { display: none; }
.pr-tex .linea { opacity: .26; }
.pr-tex :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.22, 1, .36, 1); }
.pr-tex .maestra { transition-delay: .8s; }
html.pronto.moto .disegna:not(.in) :is(path, circle) { stroke-dashoffset: 1; }
.pr-griglia { position: relative; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.pr-titolo { grid-column: 1 / 8; grid-row: 1; display: grid; gap: 22px; padding-bottom: 8px; justify-items: start; z-index: 2; --colonna: min(41vw, 620px); }
.pr-titolo h1 { width: 100%; }
.pr-nome { height: min(clamp(48px, 11vw, 160px), calc(var(--colonna) / var(--ar))); width: auto; max-width: 100%; }
.pr-titolo .testo-medio { max-width: 30ch; color: var(--chiaro); }
.pr-figura { grid-column: 6 / 13; grid-row: 1; justify-self: center; aspect-ratio: 11 / 12; width: min(100%, calc((100svh - 190px) * 11 / 12)); }
.pr-jar { display: block; width: 100%; height: 100%; }
.pr-still { grid-column: 1 / 7; aspect-ratio: 4 / 5; overflow: hidden; }
.pr-still img, .og-foto img, .mb-foto img { transform: scale(1.22); transform-origin: 50% 100%; }
[data-prodotto="purple"] .pr-still img { transform: none; }
[data-prodotto="drysift"] .pr-still img { transform: none; object-position: 50% 78%; }
.pr-testo { grid-column: 8 / 13; display: grid; gap: clamp(24px, 3vw, 40px); align-content: center; justify-items: start; }
.tabella { width: 100%; margin: 0; }
.tabella > div { display: grid; grid-template-columns: minmax(10ch, 16ch) minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--linea); }
@media (max-width: 340px) { .tabella > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.tabella > div:last-child { border-bottom: 1px solid var(--linea); }
.tabella dd { margin: 0; }
.swatch { display: inline-block; width: .8em; height: .8em; margin-right: .5em; border-radius: 50%; background: var(--accento); vertical-align: -.02em; }
.pr-dati { padding-bottom: clamp(16px, 2vw, 32px); }
.pr-cap { padding-bottom: clamp(48px, 8vw, 110px); display: grid; justify-items: center; }
.pr-cap figure { width: min(100%, 720px); -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 66%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 50%, #000 66%, transparent 100%); }
.pr-tappo { width: 100%; }
.pr-prossimo { border-top: 1px solid var(--linea); padding-block: clamp(48px, 8vw, 110px); }
.pr-prossimo .wrap { display: grid; gap: 24px; justify-items: start; }
.pr-succ { display: block; width: fit-content; max-width: 100%; color: var(--bianco); transition: color .25s; }
.pr-succ::after { content: ''; display: block; height: 2px; margin-top: 12px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.pr-succ:is(:hover, :focus-visible) { color: var(--accento); }
.pr-succ:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.pr-succ-nome { color: inherit; height: clamp(34px, 9vw, 130px); max-width: 100%; }
@media (max-width: 899px) {
  .pr-apertura { align-items: stretch; }
  .pr-griglia { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 8px; }
  .pr-figura { align-self: center; }
  .pr-titolo, .pr-figura, .pr-still, .pr-testo { grid-column: 1; grid-row: auto; }
  .pr-titolo { --colonna: calc(100vw - 2 * var(--g)); }
  .pr-nome { height: min(clamp(48px, 16vw, 160px), calc(var(--colonna) / var(--ar))); }
  .pr-testo { margin-top: 36px; }
  .pr-figura { width: min(100%, 56svh); }
  .pr-tex { -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 52%); mask-image: linear-gradient(180deg, transparent 34%, #000 52%); }
  .pr-tex .tex-orizzontale { display: none; }
  .pr-tex .tex-verticale { display: block; }
  .pr-still { grid-column: 1 / -1; }
  .pr-testo { grid-column: 1 / -1; }
}

/* ---------------------------------------------------- manifesto */
.pag-testa { padding-top: clamp(120px, 16vw, 190px); }
.pag-manifesto .pag-testa { padding-bottom: 0; }
.terra-fondo { position: absolute; inset: 0; pointer-events: none; opacity: .5; -webkit-mask-image: radial-gradient(ellipse 72% 80% at 72% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 72% 80% at 72% 50%, #000 30%, transparent 100%); }
.terra-fondo { overflow: hidden; }
.terra-fondo img { width: 100%; height: 100%; object-fit: cover; }
html.moto .terra-fondo img { animation: terra-deriva 70s ease-in-out infinite alternate; }
@keyframes terra-deriva { from { transform: scale(1.06); } to { transform: scale(1.14) translate(-1.6%, 1.2%) rotate(.8deg); } }
html.moto:not(.pronto) .pag-manifesto .terra-fondo { visibility: hidden; }
.m-testa, .m-fine { position: relative; overflow: hidden; }
.m-testa > .wrap, .m-fine > .wrap { position: relative; }
.m-testa { min-height: 78svh; display: grid; align-content: end; }
.m-testa .terra-fondo { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.m-testa > .wrap { width: 100%; }
.m-parola { font-size: clamp(96px, 23vw, 340px); line-height: .92; letter-spacing: -.035em; font-weight: 500; color: var(--bianco); margin: 18px 0 0 -.03em; }
.m-glossa { margin-top: 22px; max-width: 46ch; color: var(--chiaro); }
.m-corpo { padding-top: clamp(32px, 5vw, 64px); }
.m-frasi { grid-column: 1 / 8; display: grid; gap: clamp(32px, 5vw, 72px); align-content: start; }
.m-frase { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.01em; font-weight: 400; color: var(--chiaro); text-wrap: pretty; }
.m-prima { font-size: clamp(34px, 5vw, 76px); line-height: 1.02; letter-spacing: -.02em; font-weight: 500; color: var(--bianco); text-wrap: balance; }
.m-fine { padding-block: clamp(96px, 16vw, 220px); }
.m-fine .terra-fondo { -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent); mask-image: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent); }
.m-forte { font-size: clamp(26px, 8.2vw, 124px); line-height: .98; letter-spacing: -.025em; font-weight: 500; max-width: 13em; text-wrap: balance; }
.m-firma { margin-top: clamp(28px, 4vw, 56px); }
.m-foto { grid-column: 9 / 13; position: sticky; top: 96px; aspect-ratio: 4 / 5; overflow: hidden; align-self: start; }
.m-foto img { object-position: 50% 100%; }
@media (max-width: 899px) {
  .m-frasi, .m-foto { grid-column: 1 / -1; }
  .m-foto { position: static; margin-top: 56px; aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------- contatti e testi */
.c-testa { grid-column: 1 / 8; display: grid; gap: 24px; }
.c-testa .testo-medio { max-width: 34ch; color: var(--chiaro); }
.c-dati { grid-column: 8 / 13; align-self: end; }
.c-lingue { grid-column: 8 / 13; margin-top: 18px; }
@media (max-width: 899px) {
  .c-testa, .c-dati, .c-lingue { grid-column: 1 / -1; }
  .c-dati { margin-top: 36px; }
}
.lettura { display: grid; gap: 32px; }
.lettura > * { max-width: var(--misura); }
.lettura .titolo-pagina { max-width: none; margin-bottom: 16px; }
.lettura section { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--linea); }
.lettura h2 { font-size: 21px; line-height: 1.25; }
.lettura p { color: var(--chiaro); }
.lettura .cap { color: var(--grigio); }

/* ---------------------------------------------------- oggetti (Serie 01): banchi alla scala vera */
.mr-testa { position: relative; overflow: hidden; min-height: 60svh; display: grid; align-content: end; }
.mr-testa .titolo-pagina { font-size: clamp(44px, 11.5vw, 120px); }
.mr-testa + .mr-gruppo { padding-top: clamp(40px, 5vw, 72px); }
.mr-testa .terra-fondo { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.mr-testa > .wrap { position: relative; width: 100%; display: grid; gap: 22px; justify-items: start; }
.mr-sotto { max-width: 44ch; color: var(--chiaro); }
.mr-colori { display: grid; gap: 6px; margin-top: 14px; }
.mr-colori ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; list-style: none; margin: 0; padding: 0; }
.mr-colori button { display: block; min-height: 44px; padding: 10px 0; background: none; border: 0; cursor: pointer; color: var(--accento);
  opacity: .64; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: opacity .25s, background-size .45s cubic-bezier(.22, 1, .36, 1); }
.mr-colori .nome { display: block; height: clamp(18px, 1.9vw, 26px); width: auto; }
.mr-colori button[aria-pressed="true"] { opacity: 1; background-size: 100% 2px; }
.mr-colori button:focus-visible { outline: 2px solid var(--bianco); outline-offset: 4px; }
@media (hover: hover) { .mr-colori button:hover { opacity: 1; background-size: 36% 2px; } .mr-colori button[aria-pressed="true"]:hover { background-size: 100% 2px; } }

.mr-gruppo { position: relative; padding-bottom: 0; }
.mr-gruppo-testa { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(28px, 4vw, 52px); }
.mr-gruppo-testa .testo-medio { max-width: 42ch; color: var(--chiaro); }
/* il banco è grafite come le tavole del marchio: sul nero pieno gli oggetti neri sparirebbero */
.mr-banco { display: block; container-type: inline-size; position: relative; background: #2A2A2C; border-radius: 3px;
  padding: clamp(28px, 5vw, 80px) clamp(14px, 4vw, 64px) clamp(22px, 3vw, 44px); text-decoration: none; }
.mr-tavolo { --k: clamp(calc(var(--kmin) * 1px), calc(100cqw / var(--tot)), calc(var(--kmax) * 1px));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: calc(var(--gap) * var(--k) * 1.6) calc(var(--gap) * var(--k)); list-style: none; margin: 0; padding: 0; }
.mr-pezzo { width: calc(var(--w) * var(--k)); display: flex; flex-direction: column; align-items: center; transition: opacity .35s; }
.mr-pezzo img { display: block; width: calc(var(--fw) * var(--k)); max-width: none; height: auto; margin: calc(var(--pad) * var(--k) * -1); transition: opacity .3s; }
.mr-pezzo img.cambia { opacity: .15; }
.mr-n { margin-top: 12px; font-size: 11px; color: rgba(244, 242, 236, .62); }
.mr-sx { align-items: flex-start; }
.mr-sx .mr-n { margin-left: calc(15 * var(--k) - .7em); }
.mr-gruppo.legge .mr-pezzo:not(.acceso) img { opacity: .4; }

.mr-legenda { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); }
@media (min-width: 640px) { .mr-legenda { grid-template-columns: repeat(var(--col-m), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mr-legenda { grid-template-columns: repeat(var(--col), minmax(0, 1fr)); } }
.mr-legenda li { display: grid; grid-template-columns: 3.2ch 1fr; column-gap: 12px; row-gap: 2px; padding: 13px 0 14px; border-top: 1px solid var(--linea); }
.mr-legenda .cap { grid-row: span 2; line-height: 1.6; }
.mr-legenda p { margin: 0; }
.mr-voce { font-weight: 500; transition: color .2s; }
.mr-scheda { grid-column: 2; font: 400 13px/1.45 var(--dati); color: var(--grigio); }
.mr-legenda .cap { grid-row: span 3; }
.mr-legenda li.acceso .mr-voce { color: var(--accento); }

.mr-fine { padding-block: clamp(48px, 7vw, 96px) clamp(80px, 11vw, 150px); }
.mr-fine .wrap { display: grid; gap: 22px; justify-items: start; }
.mr-fine .nota { max-width: 62ch; }

.mr-anteprima-testo { grid-column: 1 / 6; align-self: center; display: grid; gap: 22px; justify-items: start; }
.mr-anteprima-testo .testo-medio { max-width: 30ch; color: var(--chiaro); }
.mr-anteprima .mr-banco { grid-column: 6 / 13; transition: background .35s; }
@media (hover: hover) { .mr-anteprima .mr-banco:hover { background: #303033; } }
@media (max-width: 899px) {
  .mr-anteprima-testo, .mr-anteprima .mr-banco { grid-column: 1 / -1; }
  .mr-anteprima .mr-banco { margin-top: 36px; }
}

/* ---------------------------------------------------- 404 e radice */
.pag-404 { position: relative; overflow: hidden; min-height: 100svh; display: grid; place-items: center start; padding: var(--g); }
.pag-404 main { position: relative; }
.pag-404 main { display: grid; gap: 20px; justify-items: start; max-width: 720px; }
.radice { display: grid; gap: 10px; font-size: 22px; }

@media print { .testata, .ap-tex, .eta { display: none !important; } }