/* =========================================================
   M.A.G.D.A. — Associazione Culturale
   Colori piatti dal logo. Nessun gradiente.
   ========================================================= */
:root{
  --paper:#FBFAF6;
  --ink:#24303A;
  --blue:#2276BF;
  --green:#5DA03A;
  --yellow:#F2B320;
  --orange:#E8502A;
  --line:rgba(36,48,58,.14);

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);

  --gutter:clamp(16px, 5vw, 48px);
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --label:"Josefin Sans", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-variation-settings:"opsz" 14;
  font-size:17px;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--yellow);color:var(--ink)}

.eyebrow{
  font-family:var(--label);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor}
.big{
  font-size:clamp(44px, 12.5vw, 140px);line-height:.92;letter-spacing:-.035em;
  font-weight:700;font-variation-settings:"opsz" 96, "wdth" 80;
}
.muted{opacity:.55}

/* ---------- wordmark (riprende il logo) ---------- */
.wordmark{
  display:inline-flex;align-items:baseline;font-family:var(--label);font-weight:300;
  color:var(--ink);text-decoration:none;line-height:1;
}
.wordmark span{display:inline-block}
.wordmark i{
  display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--c);
  margin:0 .14em 0 .1em;transform:translateY(-.02em);
}
.wordmark--xl{font-size:clamp(40px, 11.5vw, 110px);letter-spacing:.02em}
.wordmark--sm{font-size:21px;letter-spacing:.02em;font-weight:400}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:grid;place-items:center;padding:var(--gutter);
}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(560px, 100%);max-width:calc(100vw - 2*var(--gutter))}
.mark{width:100%;max-width:calc(100vw - 2*var(--gutter));height:auto;overflow:visible}
.mark .ln{stroke-width:5}
.loader__sub{
  font-family:var(--label);letter-spacing:.32em;text-transform:uppercase;font-size:12px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 0 6px;
}

/* ---------- header ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 14px) var(--gutter) 12px;
  mix-blend-mode:normal;
}
.top::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:var(--bg-o,0);transition:opacity .25s ease;z-index:-1}
.top.is-solid{--bg-o:1}
.progress{position:absolute;left:0;right:0;top:0;height:4px;display:flex}
.progress b{flex:1;background:var(--c);transform:scaleX(0);transform-origin:left}
.menu-btn{
  display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 16px;
  border-radius:99px;background:var(--ink);color:var(--paper);
  font-family:var(--label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  transition:transform .16s var(--ease-out);
}
.menu-btn:active{transform:scale(.97)}
.menu-btn__bars{width:32px;height:32px;border-radius:50%;background:var(--paper);display:grid;place-content:center;gap:4px}
.menu-btn__bars i{display:block;width:13px;height:2px;background:var(--ink);transition:transform .25s var(--ease-out)}
.menu-open .menu-btn__bars i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-open .menu-btn__bars i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- menu ---------- */
.menu{
  position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--paper);
  padding:calc(env(safe-area-inset-top) + 96px) var(--gutter) calc(env(safe-area-inset-bottom) + 28px);
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .5s var(--ease-drawer), visibility 0s .5s;
}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s var(--ease-drawer), visibility 0s}
.menu-open .top .wordmark{color:var(--paper)}
.menu-open .menu-btn{background:var(--paper);color:var(--ink)}
.menu-open .menu-btn__bars{background:var(--ink)}
.menu-open .menu-btn__bars i{background:var(--paper)}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{overflow:hidden;border-bottom:1px solid rgba(251,250,246,.14)}
.menu a{
  display:flex;align-items:baseline;gap:14px;padding:12px 0;text-decoration:none;
  font-size:clamp(34px, 10vw, 72px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
  font-variation-settings:"opsz" 96,"wdth" 85;
  transform:translateY(105%);transition:transform .5s var(--ease-out), color .2s ease;
}
.menu a small{font-family:var(--label);font-size:12px;letter-spacing:.2em;color:var(--c);font-weight:600}
.menu a[style*="--ink"] small{color:var(--paper)}
.menu-open .menu a{transform:none}
.menu-open .menu li:nth-child(2) a{transition-delay:.05s}
.menu-open .menu li:nth-child(3) a{transition-delay:.1s}
.menu-open .menu li:nth-child(4) a{transition-delay:.15s}
.menu-open .menu li:nth-child(5) a{transition-delay:.2s}
@media (hover:hover) and (pointer:fine){ .menu a:hover{color:var(--yellow)} }
.menu__foot{font-family:var(--label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh}
.hero__stage{position:relative;height:100svh;overflow:hidden;background:var(--paper)}
.hero__media{position:absolute;inset:0;clip-path:inset(0% 0% 0% 0% round 0px);will-change:clip-path}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.hero__media::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.28}
.hero__title{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom) + 92px);
  margin:0;font-weight:800;line-height:.86;letter-spacing:-.045em;
  font-size:clamp(46px, 13.5vw, 150px);font-variation-settings:"opsz" 96,"wdth" 75;
}
.hero__title .line{display:block;overflow:hidden;padding:.02em 0}
.hero__title .w{display:inline-block;background:var(--c);color:var(--fg, var(--paper));padding:.04em .12em .1em;border-radius:.12em}
.hero__kicker{
  position:absolute;top:calc(env(safe-area-inset-top) + 86px);left:var(--gutter);
  font-family:var(--label);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--paper);
}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom) + 30px);
  display:flex;align-items:center;gap:10px;color:var(--paper);
  font-family:var(--label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
}
.hero__scroll i{width:2px;height:38px;background:var(--paper);transform-origin:top;animation:drip 1.8s var(--ease-in-out) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:var(--paper);overflow:hidden;padding:18px 0;position:relative;z-index:2}
.marquee__track{display:flex;gap:22px;width:max-content;align-items:center;animation:marq 22s linear infinite}
.marquee span{font-size:clamp(34px, 9vw, 72px);font-weight:700;letter-spacing:-.03em;color:var(--c);font-variation-settings:"opsz" 96,"wdth" 80;line-height:1}
.marquee em{font-style:normal;font-size:18px;opacity:.5}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- manifesto ---------- */
.manifesto{position:relative;padding:120px var(--gutter) 140px;overflow:hidden}
.thread{position:absolute;right:-8vw;top:0;width:44vw;height:100%;opacity:.95;pointer-events:none}
.thread path{stroke-width:2.2;vector-effect:non-scaling-stroke}
.manifesto__text{
  position:relative;font-size:clamp(30px, 8.4vw, 76px);line-height:1.08;letter-spacing:-.025em;
  font-weight:600;font-variation-settings:"opsz" 72,"wdth" 90;max-width:16ch;
}
.manifesto__text b{font-weight:800;color:var(--c)}
.manifesto__text .wd{display:inline-block;opacity:.12}

/* ---------- capitoli orizzontali ---------- */
.chapters{position:relative;overflow:hidden;background:var(--ink)}
.chapters__track{display:flex;width:max-content;height:100svh}
.chapter{
  position:relative;width:100vw;height:100svh;flex:none;overflow:hidden;
  background:var(--bg);color:var(--fg);
  padding:calc(env(safe-area-inset-top) + 84px) var(--gutter) calc(env(safe-area-inset-bottom) + 28px);
  display:grid;grid-template-rows:auto 1fr auto;
}
.chapter__num{font-family:var(--label);font-size:12px;letter-spacing:.24em;font-weight:600}
.chapter__letter{
  position:absolute;right:-.06em;top:6svh;line-height:.8;
  font-size:min(78vw, 70svh);font-weight:200;letter-spacing:-.06em;
  font-variation-settings:"opsz" 96,"wdth" 75,"wght" 200;
  color:var(--fg);opacity:.95;pointer-events:none;
}
.chapter__img{
  position:relative;align-self:center;width:62vw;max-width:440px;aspect-ratio:3/4;overflow:hidden;
  border-radius:18px;clip-path:inset(0 0 0 0 round 18px);z-index:2;
}
.chapter__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.chapter__copy{position:relative;z-index:3;max-width:32ch}
.chapter__copy h2{font-size:clamp(44px, 13vw, 120px);font-weight:800;letter-spacing:-.045em;line-height:.9;font-variation-settings:"opsz" 96,"wdth" 75;margin-bottom:12px}
.chapter__copy p{font-size:17px;line-height:1.45}

/* ---------- il posto ---------- */
.place{padding:120px 0 40px}
.section-head{padding:0 var(--gutter);margin-bottom:56px}
.stack{padding:0 var(--gutter)}
.card{
  position:sticky;top:calc(env(safe-area-inset-top) + 84px);
  height:min(70svh, 640px);margin:0 auto 22svh;max-width:560px;
  border-radius:22px;overflow:hidden;background:var(--c);
  transform:rotate(var(--r));transform-origin:50% 0;
  box-shadow:0 0 0 6px var(--c);
}
.card:last-child{margin-bottom:8svh}
.card img{width:100%;height:100%;object-fit:cover}
.card figcaption{
  position:absolute;left:14px;bottom:14px;right:14px;
  background:var(--paper);color:var(--ink);padding:12px 16px;border-radius:12px;
  font-weight:600;font-size:16px;letter-spacing:-.01em;
}

/* ---------- film ---------- */
.film{position:relative;background:var(--paper)}
.film__stage{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}
.film__frame{position:absolute;inset:0;clip-path:inset(30% 22% 30% 22% round 28px);will-change:clip-path;background:var(--ink)}
.film__frame video,.film__frame img{width:100%;height:100%;object-fit:cover}
.film__frame::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.3}
.film__line{
  position:relative;z-index:2;grid-area:1/1;color:var(--paper);
  font-size:clamp(56px, 18vw, 180px);font-weight:800;letter-spacing:-.045em;line-height:.9;
  font-variation-settings:"opsz" 96,"wdth" 75;opacity:0;text-align:center;padding:0 var(--gutter);
}

/* ---------- serate ---------- */
.nights{padding:120px 0 100px;overflow:hidden;background:var(--paper)}
.nights > .eyebrow{padding:0 var(--gutter)}
.nights__marquee{white-space:nowrap;margin:10px 0 30px}
.nights__marquee span{
  display:inline-block;font-size:clamp(80px, 26vw, 260px);font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-variation-settings:"opsz" 96,"wdth" 75;color:var(--green);
}
.nights__grid{position:relative;height:min(120vw, 760px);margin:0 var(--gutter)}
.fig{position:absolute;overflow:hidden;border-radius:999px 999px 24px 24px}
.fig img{width:100%;height:100%;object-fit:cover}
.fig--a{left:0;top:0;width:62%;height:82%}
.fig--b{right:0;bottom:0;width:52%;height:46%;border-radius:24px 24px 999px 999px}
.dot{position:absolute;width:min(14vw, 90px);aspect-ratio:1;border-radius:50%;background:var(--c)}
.dot:nth-of-type(1){right:10%;top:4%}
.dot:nth-of-type(2){right:30%;top:22%;width:min(9vw,60px)}
.dot:nth-of-type(3){left:6%;bottom:4%;width:min(11vw,70px)}
.dot:nth-of-type(4){right:4%;top:38%;width:min(7vw,46px)}
.nights__info{padding:56px var(--gutter) 0;max-width:640px}
.date{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:600}
.date span:first-child{font-family:var(--display);font-size:84px;letter-spacing:-.05em;line-height:.8;font-weight:800;color:var(--orange)}
.nights__info h3{font-size:clamp(30px, 8vw, 54px);line-height:1;letter-spacing:-.03em;font-weight:700;margin-bottom:16px;font-variation-settings:"opsz" 72,"wdth" 85}

/* ---------- stagioni ---------- */
.seasons{padding:110px 0 120px;background:var(--yellow)}
.hint{margin-top:18px;font-family:var(--label);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:600}
.rail{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gutter) 10px;scroll-padding:0 var(--gutter);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.slide{flex:none;width:76vw;max-width:380px;scroll-snap-align:start;background:var(--paper);border-radius:20px;padding:10px;transform-origin:50% 100%}
.slide img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.slide figcaption{padding:14px 6px 6px;font-size:16px}
.slide figcaption b{display:block;font-family:var(--label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px;color:var(--orange)}

/* ---------- partecipa ---------- */
.join{padding:120px var(--gutter) 110px;background:var(--paper)}
.join__title{font-size:clamp(56px, 18vw, 190px);line-height:.86;letter-spacing:-.05em;font-weight:800;font-variation-settings:"opsz" 96,"wdth" 75}
.join__lead{margin:22px 0 28px;max-width:34ch}
.pad{position:relative;height:min(64svh, 520px);border-radius:22px;background:#fff;border:2px solid var(--ink);overflow:hidden}
.pad__canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.pad__clear{
  position:absolute;right:12px;bottom:12px;height:40px;padding:0 16px;border-radius:99px;background:var(--ink);color:var(--paper);
  font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  transition:transform .16s var(--ease-out);
}
.pad__clear:active{transform:scale(.97)}
.pad__hint{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:clamp(40px, 14vw, 120px);font-weight:800;letter-spacing:-.04em;color:var(--line);
  transition:opacity .3s ease;
}
.pad.is-drawn .pad__hint{opacity:0}
.join__cta{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.btn{
  position:relative;display:flex;align-items:center;justify-content:center;height:64px;border-radius:99px;
  border:2px solid var(--ink);text-decoration:none;font-weight:700;font-size:18px;overflow:hidden;
  transition:transform .16s var(--ease-out);
}
.btn span{position:relative;z-index:1;transition:color .25s ease}
.btn::before{content:"";position:absolute;inset:0;background:var(--blue);transform:translateY(101%);transition:transform .35s var(--ease-out)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:none}
  .btn:hover span{color:var(--paper)}
}

/* ---------- footer ---------- */
.foot{padding:70px var(--gutter) calc(env(safe-area-inset-bottom) + 30px);border-top:1px solid var(--line);background:var(--paper)}
.foot__logo{width:min(100%, 420px);margin:0 auto 46px;mix-blend-mode:multiply}
.foot__cols{display:grid;gap:34px;margin-bottom:46px}
.foot .link{display:inline-block;margin-top:8px;font-weight:700;text-underline-offset:4px}
.foot__legal{font-family:var(--label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* ---------- desktop ---------- */
@media (min-width:900px){
  body{font-size:19px}
  .chapter{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:6vw}
  .chapter__num{grid-column:1/-1}
  .chapter__img{grid-row:2;grid-column:2;width:100%;max-width:none;height:62svh;aspect-ratio:auto}
  .chapter__copy{grid-row:2;grid-column:1;align-self:end}
  .chapter__letter{left:auto;right:-.04em}
  .join__cta{flex-direction:row}
  .btn{flex:1}
  .foot__cols{grid-template-columns:1fr 1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .hero__scroll i{animation:none}
  .menu,.menu a{transition-duration:.01s}
  .manifesto__text .wd{opacity:1}
  .film__frame{clip-path:none}
  .film__line{opacity:1;position:relative}
  .film__stage{grid-auto-rows:min-content;align-content:center;gap:4px}
  .film__line{grid-area:auto}
  .card{position:relative;top:auto;margin-bottom:24px}
  .chapters__track{flex-direction:column;width:auto;height:auto}
  .chapter{width:auto}
}