:root{
  --carta:#F7F3EA;--carta-2:#EFE6D4;--carta-3:#E2D5BB;
  --inchiostro:#141F33;--inchiostro-soft:#4A5265;
  --cobalto:#1B3E8F;--cobalto-scuro:#0F2557;--limone:#F2C230;
  --f-serif:'Prata',Georgia,'Times New Roman',serif;
  --f-sans:'Karla',system-ui,-apple-system,sans-serif;
  --s1:.5rem;--s2:.75rem;--s3:1rem;--s4:1.5rem;--s5:2.5rem;--s6:4rem;
  --gutter:clamp(1.15rem,5vw,4rem);
  --ease:cubic-bezier(.23,1,.32,1);
  --sc-canvas:#F7F3EA;--sc-surface:#EFE6D4;--sc-ink:#141F33;--sc-ink-soft:#4A5265;
  --sc-accent:#1B3E8F;--sc-accent-ink:#F7F3EA;
  --sc-font-display:var(--f-serif);--sc-font-text:var(--f-sans);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;padding-bottom:3.5rem;background:var(--carta);color:var(--inchiostro);font-family:var(--f-sans);font-size:clamp(1rem,.45vw + .92rem,1.1rem);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure,ul,ol,li{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none !important}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--carta);color:var(--inchiostro);padding:.7rem 1rem;border:2px solid var(--cobalto)}
:focus-visible{outline:2.5px solid var(--cobalto);outline-offset:3px}

/* fregio dei capitoli */
.fregio{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:0 .5rem .6rem;pointer-events:none}
.fregio ol{display:flex;gap:.1rem;padding:.28rem .45rem;background:rgba(250,246,237,.95);border:1px solid rgba(20,31,51,.16);border-radius:999px;box-shadow:0 10px 30px rgba(20,31,51,.13);pointer-events:auto}
.fregio__a{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;color:rgba(20,31,51,.26);transition:color .3s var(--ease),background-color .3s var(--ease)}
.fregio__a svg path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.fregio__a.is-on{color:var(--cobalto)}
.fregio__a.is-on svg path{stroke-dashoffset:0}
.fregio__a[aria-current='true']{background:rgba(27,62,143,.1)}
.fregio__a:hover{color:var(--cobalto)}

/* apertura */
.apertura{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);padding:clamp(1.6rem,4vh,2.6rem) var(--gutter) clamp(3rem,7vh,5rem);overflow:hidden;background:radial-gradient(120% 90% at 85% -10%,#FCF9F1 0,rgba(252,249,241,0) 58%),var(--carta)}
.testatina{font-size:.72rem;letter-spacing:.27em;text-transform:uppercase;color:var(--cobalto)}
.apertura__scena{position:relative;display:flex;align-items:center;flex:1;min-height:42vh}
.apertura__piatto{position:absolute;left:44%;top:50%;width:min(40vw,32rem);transform:translate3d(0,calc(-50% + var(--hp,0) * -3.4rem),0);z-index:2;filter:drop-shadow(0 22px 40px rgba(27,62,143,.16))}
.apertura__titolo{font-family:var(--f-serif);font-weight:400;font-size:clamp(3.4rem,13.6vw,13.5rem);line-height:.9;letter-spacing:-.035em;position:relative;width:100%}
.apertura__titolo .r1{display:block;position:relative;z-index:1;color:var(--inchiostro);transform:translate3d(calc(var(--hp,0) * -1rem),calc(var(--hp,0) * -1.4rem),0)}
.apertura__titolo .r2{display:block;position:relative;z-index:3;margin-left:14%;color:var(--cobalto);transform:translate3d(calc(var(--hp,0) * 1.4rem),calc(var(--hp,0) * -2.6rem),0)}
.apertura__piede{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:end;border-top:1px solid rgba(20,31,51,.18);padding-top:var(--s3)}
.apertura__nota{max-width:44ch;font-size:clamp(.98rem,1.1vw,1.12rem);color:var(--inchiostro-soft)}
.apertura__via a{display:inline-flex;align-items:center;min-height:44px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalto);border-bottom:1px solid currentColor;padding:.3rem 0}

/* capitoli */
.cap{position:relative;padding:clamp(3rem,7vh,6rem) var(--gutter)}
.cap__n{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cobalto);margin-bottom:.9rem}
.cap__titolo{font-family:var(--f-serif);font-weight:400;font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;max-width:22ch}
.cap__som{margin-top:var(--s3);max-width:52ch;color:var(--inchiostro-soft);font-size:clamp(1rem,1.15vw,1.16rem)}
.via{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s3);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalto);border-bottom:1px solid currentColor;padding:.3rem 0}
.via:hover{color:var(--cobalto-scuro)}

/* cap I */
.cap--tavola{background:linear-gradient(180deg,#FBF7EE,#F1EADC);border-top:1px solid rgba(20,31,51,.14)}
.tavola{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);gap:clamp(1.4rem,3.4vw,3rem);align-items:end;margin-top:clamp(1.6rem,4vh,3rem)}
.tavola__fig{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--carta-3)}
.tavola__fig img,.tavola__fig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tavola__fig video{z-index:2}
.tavola__nota{border-top:1px solid rgba(20,31,51,.2);padding-top:.9rem}
.tavola__nota p+p{margin-top:.7rem}
.tavola__nota b{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cobalto);margin-bottom:.4rem;font-weight:500}

/* cap II */
.cap--mani{background:var(--carta-2)}
.mani{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3.5rem);align-items:start;margin-top:clamp(1.6rem,4vh,3rem)}
.mani__fig{position:relative;overflow:hidden;aspect-ratio:3/2}
.mani__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mani__testo p{color:var(--inchiostro);max-width:46ch}
.mani__testo p+p{margin-top:.9rem;color:var(--inchiostro-soft)}
.passi{grid-column:1/-1;margin-top:var(--s5);border-top:1px solid rgba(20,31,51,.2)}
.passi li{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1rem;padding:.95rem 0;border-bottom:1px solid rgba(20,31,51,.13)}
.passi b{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cobalto);font-weight:500}
.passi span{color:var(--inchiostro-soft);font-size:.95rem}

/* cap III, il picco */
.cap--smalto{background:var(--cobalto);color:var(--carta);--acc:var(--limone);--acc-ink:#141F33;min-height:112vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,3vh,2.4rem);transition:background-color .55s var(--ease),color .55s var(--ease);overflow:hidden}
.cap--smalto[data-smalto='limone']{background:var(--limone);color:var(--inchiostro);--acc:var(--cobalto);--acc-ink:#F7F3EA}
.cap--smalto[data-smalto='calce']{background:var(--carta-2);color:var(--inchiostro);--acc:var(--cobalto);--acc-ink:#F7F3EA}
.cap--smalto .cap__n{color:var(--acc)}
.cap--smalto .cap__som{color:inherit;opacity:.86}
.cap--smalto .via{color:inherit;border-bottom-color:currentColor}
.cap--smalto .via:hover{color:inherit;opacity:.85}
.smalto{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:clamp(1.4rem,3vh,2.4rem)}
.smalto__scena{position:relative;aspect-ratio:1;display:grid;place-items:center;justify-self:center;width:100%;max-width:34rem}
.smalto__segno{position:absolute;inset:0;width:100%;height:100%;color:var(--acc);opacity:.5;transform-origin:50% 50%;transform:rotate(calc(var(--p3,0) * 14deg))}
.smalto__piatto{position:relative;z-index:2;width:min(44vw,30rem);border-radius:50%;overflow:hidden;box-shadow:0 30px 60px rgba(8,14,30,.34)}
.smalto__vaso{position:absolute;z-index:3;right:0;bottom:-4%;width:min(15vw,10.5rem);border-radius:.2rem;overflow:hidden;transform:rotate(-4deg);box-shadow:0 18px 34px rgba(8,14,30,.34)}
.smalto__linea{margin-top:var(--s4);font-size:clamp(1.05rem,1.3vw,1.25rem);max-width:36ch;min-height:5.2em;transition:opacity .22s ease}
.smalto__btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s4)}
.smalto__btn{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:.5rem 1.05rem;border:1px solid currentColor;border-radius:999px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:background-color .28s var(--ease),color .28s var(--ease),transform .18s var(--ease)}
.smalto__btn:hover{transform:translateY(-2px)}
.smalto__btn:active{transform:scale(.97)}
.smalto__btn[aria-pressed='true']{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.smalto__btn.is-tap{animation:smaltoTap .52s var(--ease)}
@keyframes smaltoTap{0%{transform:scale(.93)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
.smalto__dot{width:.7rem;height:.7rem;border-radius:50%;border:1px solid currentColor}
.smalto__dot--cobalto{background:#1B3E8F}
.smalto__dot--limone{background:#F2C230}
.smalto__dot--calce{background:#EFE6D4}
@keyframes smaltoPittura{0%{filter:brightness(1.09) saturate(1.08);transform:scale(1.016)}100%{filter:none;transform:scale(1)}}
.smalto__scena.is-painting .smalto__piatto{animation:smaltoPittura .62s var(--ease)}

/* cap IV */
.cap--pezzi{background:var(--carta);border-top:1px solid rgba(20,31,51,.14)}
.pezzi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:clamp(1.6rem,4vh,3rem)}
.pezzi__scelta{display:flex;flex-direction:column;gap:.7rem}
.pezzo{display:flex;align-items:center;gap:.9rem;padding:.45rem .9rem .45rem .45rem;border:1px solid rgba(20,31,51,.22);border-radius:.2rem;text-align:left;min-height:64px;transition:border-color .22s var(--ease),background-color .22s var(--ease),transform .18s var(--ease),box-shadow .22s var(--ease)}
.pezzo:hover{border-color:var(--cobalto)}
.pezzo:active{transform:scale(.985)}
.pezzo:disabled{opacity:.5}
.pezzo img{width:58px;height:58px;object-fit:cover;border-radius:.12rem;flex:none}
.pezzo__t{display:block;font-family:var(--f-serif);font-size:1.05rem;line-height:1.2}
.pezzo__s{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalto);margin-top:.25rem}
.pezzo[aria-pressed='true']{border-color:var(--cobalto);box-shadow:inset 0 0 0 1px var(--cobalto);background:rgba(27,62,143,.06)}
.pezzo[aria-pressed='true'] .pezzo__s::after{content:' · scelto'}
.tavola-conteggio{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--inchiostro-soft);margin-bottom:1rem;display:block}
.tavola-board{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;min-height:13rem;padding-top:1rem;border-top:1px solid rgba(20,31,51,.2);position:relative}
.board__vuoto{position:absolute;left:0;top:1.5rem;color:var(--inchiostro-soft);font-size:.95rem;max-width:26ch}
.chip{width:clamp(7.5rem,12vw,10.5rem);opacity:0;transform:translateY(14px) rotate(-1.5deg);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chip.is-in{opacity:1;transform:translateY(0) rotate(-1.5deg)}
.chip img{aspect-ratio:1;object-fit:cover;box-shadow:0 16px 32px rgba(20,31,51,.16)}
.chip b{display:block;margin-top:.5rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalto);font-weight:500}

/* cap V */
.cap--bottega{background:var(--carta-2);padding-left:0;padding-right:0;padding-bottom:0;border-top:1px solid rgba(20,31,51,.14)}
.bottega__fig{overflow:hidden;height:min(64vh,36rem);position:relative;background:var(--carta-3)}
.bottega__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bottega__testo{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.4rem,4vw,3.5rem);padding:clamp(1.8rem,4.5vh,3rem) var(--gutter) clamp(2.2rem,5vh,3.4rem);align-items:start;background:var(--carta-2);border-top:1px solid rgba(20,31,51,.16)}
.bottega__testo p{color:var(--inchiostro);max-width:42ch}
.bottega__testo p+p{margin-top:.8rem;color:var(--inchiostro-soft)}

/* colophon */
.colophon{background:var(--carta);border-top:2px solid var(--cobalto);padding:clamp(2.4rem,6vh,4rem) var(--gutter) clamp(2rem,4vh,2.6rem)}
.colophon__marchio{font-family:var(--f-serif);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1;margin-bottom:clamp(1.5rem,4vh,2.6rem)}
.colophon__griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.colophon h3{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cobalto);margin-bottom:.6rem;font-weight:500}
.colophon p,.colophon li{font-size:.93rem;color:var(--inchiostro-soft)}
.colophon li+li{margin-top:.35rem}
.colophon a{text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--cobalto);text-decoration-thickness:1.5px}
.colophon a:hover{color:var(--cobalto)}
.nota-demo{margin-top:clamp(1.1rem,2.6vh,1.6rem);padding-top:.9rem;border-top:1px solid rgba(20,31,51,.16);font-size:.8rem;color:var(--inchiostro-soft);max-width:64ch}

/* movimento */
.js [data-in]{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js [data-in].is-in{opacity:1;transform:none}
.js [data-wipe]{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease)}
.js [data-wipe].is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease)}

@media (max-width:1000px){
  .tavola,.mani,.smalto,.pezzi,.bottega__testo{grid-template-columns:minmax(0,1fr)}
  .mani__testo{grid-column:1}
  .apertura__piatto{left:auto;right:-7%;top:36%;width:min(55vw,15rem);z-index:1;opacity:.95}
  .apertura__titolo{font-size:clamp(2.9rem,14.5vw,7.5rem);text-shadow:0 0 8px rgba(247,243,234,.98),0 0 20px rgba(247,243,234,.95),0 0 44px rgba(247,243,234,.86)}
  .apertura__titolo .r1{z-index:2}
  .apertura__titolo .r2{margin-left:6%;z-index:3}
  .colophon__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smalto__scena{max-width:26rem;margin-bottom:1rem}
  .smalto__piatto{width:min(72vw,26rem)}
  .smalto__vaso{width:min(26vw,8.5rem);right:2%}
  .passi li{grid-template-columns:8rem minmax(0,1fr)}
}
@media (max-width:560px){
  .apertura{min-height:auto;padding-bottom:4rem}
  .apertura__piede{grid-template-columns:1fr}
  .cap--smalto{min-height:0}
  .colophon__griglia{grid-template-columns:1fr}
  .passi li{grid-template-columns:1fr;gap:.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .js [data-in]{opacity:1 !important;transform:none !important}
  .js [data-wipe]{clip-path:none !important}
  .apertura__piatto,.apertura__titolo .r1,.apertura__titolo .r2{transform:none !important}
  .fregio__a svg path{stroke-dashoffset:0}
  .smalto__segno{transform:none}
}