/* ═══════════════════════════════════════════════════
   atelievents — BOZZA 2 · "Il percorso"
   Editoriale, tipografico, a capitoli.
   Didone + grottesca · bianco caldo, espresso, ottone
   ═══════════════════════════════════════════════════ */

:root{
  --bone:#FFFCF7;
  --sand:#F1EADF;
  --espresso:#14100D;
  --ink:#333333;
  --soft:#6B635A;
  --brass:#B08D57;
  --hair:rgba(20,16,13,.14);
  --hair-l:rgba(255,252,247,.2);
  --display:Didot,"Bodoni 72","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Inter,-apple-system,"Segoe UI",Arial,sans-serif;
  --pad:clamp(20px,5.5vw,110px);
  --e:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.02vw,17px);line-height:1.68;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
p+p{margin-top:1.1em}
a{color:inherit;text-decoration:none}
li{list-style:none}
sup{font-size:.4em;vertical-align:super}

/* ── grana ─────────────────────────────── */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── tipografia display ────────────────── */
.display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4.3vw,66px);line-height:1.06;
  letter-spacing:-.012em;
}
.display--xl{font-size:clamp(34px,5.6vw,92px)}
.display--xxl{font-size:clamp(42px,8.4vw,140px);line-height:.98}
.display em{font-style:italic;color:var(--soft)}
.display b{font-weight:inherit;display:block}

.kicker,.chapter{
  font-family:var(--sans);font-size:10.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:12px;
}
.chapter em{font-style:normal;color:var(--ink);letter-spacing:.18em}
.chapter--light em{color:var(--bone)}
.kicker i{display:block;width:38px;height:1px;background:var(--brass)}

/* rivelazione riga per riga */
.ln{display:block;overflow:hidden}
.ln>b{
  transform:translateY(102%);opacity:0;
  transition:transform 1.25s var(--e),opacity 1.1s var(--e);
}
.in .ln>b,.ln.go>b{transform:none;opacity:1}
.ln:nth-child(2)>b{transition-delay:.09s}
.ln:nth-child(3)>b{transition-delay:.18s}
.ln:nth-child(4)>b{transition-delay:.27s}
.ln:nth-child(5)>b{transition-delay:.36s}
.ln.sp{margin-top:.34em}

/* ── barra alta ────────────────────────── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px var(--pad);color:var(--bone);
  transition:color .6s var(--e),background .6s var(--e),padding .6s var(--e);
}
.top.light{background:rgba(255,252,247,.9);backdrop-filter:blur(14px) saturate(160%);color:var(--ink);padding:16px var(--pad);border-bottom:1px solid var(--hair)}
.top__logo{font-size:19px;letter-spacing:-.01em}
.top__cta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ── rail capitoli ─────────────────────── */
.rail{
  position:fixed;left:calc(var(--pad) / 2.2);top:50%;translate:0 -50%;z-index:110;
  display:flex;flex-direction:column;gap:14px;
  font-size:9.5px;letter-spacing:.16em;font-variant-numeric:tabular-nums;
  mix-blend-mode:difference;color:#fff;
}
.rail span{opacity:.28;transition:opacity .5s var(--e),transform .5s var(--e);transform-origin:left}
.rail span.on{opacity:1;transform:scale(1.35)}
@media(max-width:1100px){.rail{display:none}}

/* ── 00 apertura ───────────────────────── */
.open{
  background:var(--espresso);color:var(--bone);
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(110px,15vh,180px) var(--pad) clamp(28px,5vh,54px);
  position:relative;overflow:hidden;
}
.open__grid{display:grid;gap:clamp(34px,5vw,80px);align-items:center;flex:1}
@media(min-width:960px){.open__grid{grid-template-columns:1.5fr .82fr}}
.open .display{color:var(--bone);margin-top:clamp(26px,3.4vw,48px)}
.open .display em{color:rgba(255,252,247,.5)}
.open__sub{
  margin-top:clamp(26px,3.2vw,44px);color:rgba(255,252,247,.62);
  font-size:clamp(15px,1.2vw,19px);max-width:32ch;
}
.open__reel{position:relative}
.open__reel video{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.85) contrast(1.04)}
.open__reel figcaption{
  margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,252,247,.42);
}
@media(max-width:959px){.open__reel{display:none}}
.open__foot{
  display:flex;align-items:center;gap:18px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,252,247,.42);padding-top:clamp(24px,4vh,50px);
}
.open__foot .rule{flex:1;height:1px;background:var(--hair-l)}

/* ── indice ────────────────────────────── */
.index{background:var(--espresso);color:var(--bone);padding:0 var(--pad) clamp(60px,9vh,110px)}
.index ol{border-top:1px solid var(--hair-l)}
.index a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--hair-l);
  transition:padding-left .6s var(--e),color .4s;
}
.index a:hover{padding-left:16px}
.index em{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--brass);min-width:2.4em}
.index span{font-family:var(--display);font-size:clamp(19px,2.1vw,30px);line-height:1.2}
.index i{width:26px;height:1px;background:rgba(255,252,247,.34);display:block;transition:width .6s var(--e)}
.index a:hover i{width:52px}

/* ── 01 claim ──────────────────────────── */
.claim{padding:clamp(90px,16vh,210px) var(--pad)}
.claim .display{margin:clamp(28px,3.4vw,50px) 0 clamp(40px,5vw,72px)}
.claim__cols{
  display:grid;gap:clamp(24px,3vw,54px);max-width:1000px;
  border-top:1px solid var(--hair);padding-top:clamp(26px,3vw,44px);
}
@media(min-width:800px){.claim__cols{grid-template-columns:1fr 1fr}}
.claim__cols p{color:var(--soft)}
.claim__cols b{font-weight:400;color:var(--ink)}

/* ── 02 percorso ───────────────────────── */
.path{padding:0 var(--pad) clamp(90px,15vh,190px)}
.path__track{position:relative;margin-top:clamp(34px,4vw,60px)}
.path__line{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--hair);display:none}
.path__line b{display:block;height:100%;width:0;background:var(--brass);transition:width 1.6s var(--e)}
.path.in .path__line b{width:100%}
.path ol{display:grid;gap:clamp(30px,3.4vw,44px)}
@media(min-width:900px){
  .path ol{grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,50px)}
  .path__line{display:block}
}
.path li{position:relative;padding-top:52px}
.path__n{
  position:absolute;top:0;left:0;
  font-family:var(--display);font-size:22px;color:var(--brass);
  background:var(--bone);padding-right:14px;line-height:1;
}
.path h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.75vw,26px);margin-bottom:.5em}
.path p{color:var(--soft);font-size:15px;max-width:34ch}

/* ── 03 scrollytelling ─────────────────── */
.craft{position:relative;background:var(--sand);padding:clamp(60px,8vh,110px) var(--pad)}
.craft__visual{position:relative}
@media(min-width:960px){
  .craft{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,6vw,110px);align-items:start;padding-top:0;padding-bottom:0}
  .craft__visual{position:sticky;top:0;height:100vh;display:flex;align-items:center}
}
.craft__visual figure{
  position:absolute;inset:0;margin:auto;height:70vh;width:100%;
  opacity:0;transform:scale(1.03);
  transition:opacity 1s var(--e),transform 1.4s var(--e);
}
.craft__visual figure.on{opacity:1;transform:none}
.craft__visual img{width:100%;height:100%;object-fit:cover}
.craft__visual figcaption{
  position:absolute;bottom:calc(15vh - 34px);left:0;
  font-size:10px;letter-spacing:.22em;color:var(--soft);
}
.craft__visual figcaption span{color:var(--brass)}
@media(max-width:959px){.craft__visual{display:none}}

.craft__step{padding:clamp(40px,9vh,120px) 0;border-bottom:1px solid var(--hair)}
.craft__step:last-child{border-bottom:none}
@media(min-width:960px){.craft__step{min-height:100vh;display:flex;flex-direction:column;justify-content:center;border-bottom:none}}
.craft__step .display{margin:clamp(20px,2.4vw,34px) 0 clamp(18px,2vw,28px)}
.craft__step p{color:var(--soft);max-width:42ch}
.craft__inline{width:100%;aspect-ratio:4/3;object-fit:cover;margin:clamp(20px,4vw,30px) 0}
@media(min-width:960px){.craft__inline{display:none}}

/* ── 04 ospiti ─────────────────────────── */
.guests{
  position:relative;overflow:hidden;background:var(--espresso);
  padding:clamp(110px,20vh,250px) var(--pad);text-align:center;color:var(--bone);
}
.guests__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.46) saturate(.72) contrast(1.05)}
.guests::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(110% 80% at 50% 50%,rgba(20,16,13,.55) 0%,rgba(20,16,13,.3) 60%,rgba(20,16,13,.15) 100%)}
.guests__in{position:relative;z-index:2;max-width:900px;margin:0 auto}
.guests__in .chapter{justify-content:center;margin-bottom:clamp(22px,2.6vw,36px)}
.guests .display{color:var(--bone)}
.guests .display em{color:rgba(255,252,247,.62)}
.guests p{margin-top:1.6em;color:rgba(255,252,247,.8)}
.guests__last{font-family:var(--display);font-size:clamp(17px,1.8vw,26px);line-height:1.35;color:var(--bone)!important;margin-top:2em!important}

/* ── 05 il giorno ──────────────────────── */
.day{background:var(--espresso);color:var(--bone);padding:clamp(90px,16vh,200px) var(--pad)}
.day .display{color:var(--bone);margin:clamp(26px,3vw,44px) 0}
.day .display em{color:rgba(255,252,247,.5)}
.day__body{
  display:grid;gap:clamp(22px,3vw,50px);max-width:960px;
  border-top:1px solid var(--hair-l);padding-top:clamp(24px,3vw,40px);
}
@media(min-width:800px){.day__body{grid-template-columns:1fr 1fr}}
.day__body p{color:rgba(255,252,247,.66)}
.day__punch{
  font-family:var(--display);font-size:clamp(22px,3vw,46px);line-height:1.16;
  margin:clamp(46px,6vw,90px) 0 clamp(40px,5vw,70px);max-width:16ch;
}
.day__fig{overflow:hidden;aspect-ratio:21/9}
.day__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 2s var(--e)}
.day.in .day__fig img{transform:none}

/* ── 06 filmstrip ──────────────────────── */
.film{background:var(--bone)}
.film__head{padding:clamp(70px,11vh,140px) var(--pad) clamp(30px,4vw,54px)}
.film__head .display{margin-top:clamp(18px,2.2vw,30px)}
.film__track{display:flex;gap:clamp(14px,2vw,34px);padding:0 var(--pad) clamp(70px,11vh,140px)}
.fr{flex:0 0 clamp(230px,26vw,360px)}
.fr figure{overflow:hidden;aspect-ratio:3/4;background:var(--sand)}
.fr img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e)}
.fr:hover img{transform:scale(1.06)}
.fr b{display:block;font-family:var(--display);font-weight:400;font-size:13px;color:var(--brass);margin:14px 0 4px}
.fr span{display:block;font-size:14px}
.fr em{display:block;font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-top:3px}
@media(min-width:960px){
  .film{height:330vh}
  .film__sticky{position:sticky;top:0;height:100vh;padding-top:76px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .film__head{padding:0 var(--pad) clamp(26px,3vw,44px)}
  .film__track{padding:0 var(--pad);will-change:transform}
}
@media(max-width:959px){
  .film__track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .fr{scroll-snap-align:start}
}

/* ── 07 francesca ──────────────────────── */
.me{padding:clamp(90px,15vh,190px) var(--pad);background:var(--sand)}
.me__grid{display:grid;gap:clamp(26px,4vw,70px);margin:clamp(26px,3vw,44px) 0 clamp(44px,6vw,80px)}
@media(min-width:900px){.me__grid{grid-template-columns:1.25fr .75fr;align-items:end}}
.me__txt{color:var(--soft);max-width:40ch}
.me__facts{border-top:1px solid var(--hair)}
.me__facts div{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);align-items:baseline;
  padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--hair);
}
.me__facts dt{font-family:var(--display);font-size:clamp(34px,5vw,74px);line-height:1;min-width:2.6em}
.me__facts dd{font-size:14px;color:var(--soft)}
.me__sign{margin-top:clamp(34px,4vw,56px);font-family:var(--display);font-size:22px}
.me__sign span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-top:6px}

/* ── dove / marquee ────────────────────── */
.where{background:var(--espresso);color:var(--bone);padding:clamp(70px,11vh,140px) 0;overflow:hidden}
.where .chapter{justify-content:center;margin-bottom:clamp(26px,3.4vw,48px)}
.marq{overflow:hidden;border-top:1px solid var(--hair-l);border-bottom:1px solid var(--hair-l);padding:clamp(16px,2.4vw,30px) 0}
.marq__in{display:flex;align-items:center;gap:clamp(20px,3vw,50px);width:max-content;animation:sl 46s linear infinite}
.marq span{font-family:var(--display);font-size:clamp(26px,4vw,64px);white-space:nowrap}
.marq i{color:var(--brass);font-style:normal;font-size:clamp(14px,2vw,28px)}
@keyframes sl{to{transform:translateX(-50%)}}
.where__note{
  max-width:56ch;margin:clamp(30px,4vw,54px) auto 0;padding:0 var(--pad);
  text-align:center;color:rgba(255,252,247,.6);
}

/* ── domande ───────────────────────────── */
.qa{padding:clamp(80px,13vh,170px) var(--pad)}
.qa__list{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{
  list-style:none;cursor:pointer;padding:clamp(18px,2.2vw,28px) 44px clamp(18px,2.2vw,28px) 0;
  font-family:var(--display);font-size:clamp(17px,1.9vw,27px);line-height:1.3;
  position:relative;transition:color .4s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:var(--ink);
  transition:transform .5s var(--e);
}
.qa summary::before{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:var(--ink);
  transform:rotate(90deg);transition:transform .5s var(--e),opacity .4s;
}
.qa details[open] summary::before{transform:rotate(0);opacity:0}
.qa details[open] summary{color:var(--brass)}
.qa details p{padding:0 0 clamp(20px,2.4vw,30px);color:var(--soft);max-width:60ch}

/* ── chiusura ──────────────────────────── */
.end{
  background:var(--espresso);color:var(--bone);
  padding:clamp(100px,18vh,230px) var(--pad);text-align:center;
}
.end .display{color:var(--bone)}
.end .display em{color:rgba(255,252,247,.5)}
.end>p{margin:clamp(28px,3.4vw,48px) auto 0;color:rgba(255,252,247,.66);max-width:46ch}
.big{
  display:inline-flex;align-items:center;gap:18px;margin-top:clamp(36px,4.4vw,64px);
  font-family:var(--display);font-size:clamp(20px,2.4vw,36px);
  border-bottom:1px solid rgba(255,252,247,.4);padding-bottom:10px;
  transition:gap .6s var(--e),border-color .5s;
}
.big:hover{gap:32px;border-color:var(--brass)}
.big i{font-style:normal;color:var(--brass)}

/* ── footer ────────────────────────────── */
.foot{
  background:var(--espresso);color:rgba(255,252,247,.62);
  border-top:1px solid var(--hair-l);
  padding:clamp(44px,6vh,80px) var(--pad);
  display:grid;gap:clamp(26px,3vw,44px);font-size:13px;
}
@media(min-width:820px){.foot{grid-template-columns:1.4fr 1fr 1fr .7fr;align-items:start}}
.foot__logo{color:var(--bone);font-size:21px;font-family:var(--sans)}
.foot__c{display:flex;flex-direction:column;gap:9px}
.foot__c a{transition:color .35s}
.foot__c a:hover{color:var(--brass)}
.foot__c--dim{color:rgba(255,252,247,.36);line-height:1.9}

/* ── reveal ────────────────────────────── */
[data-ch],.index,.where,.qa,.end,.film__head{opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--e),transform 1.2s var(--e)}
[data-ch].in,.index.in,.where.in,.qa.in,.end.in,.film__head.in{opacity:1;transform:none}
.open{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-ch],.index,.where,.qa,.end,.film__head{opacity:1;transform:none}
  .ln>b{transform:none;opacity:1}
  html{scroll-behavior:auto}
}