/* ============================================================
   MALEDETTA PRIMAVERA — "Notte Italiana"
   Design system. Edit tokens here; everything else follows.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* ---- CREAM / "GIORNO" PALETTE ---- */
  --ink:        #F4F0E6;   /* page ground — warm cream, keyed to the flyers */
  --ink-raised: #EDE7D9;   /* raised bands and cards */
  --ink-line:   rgba(26,22,16,.14);
  --ink-line-2: rgba(26,22,16,.30);

  --paper:      #17130E;   /* primary type — warm near-black, never pure #000 */
  --paper-mute: rgba(23,19,14,.72);
  --paper-faint:rgba(23,19,14,.50);

  /* tricolore — flag-accurate, unchanged */
  --green: #007A3C;        /* a shade deeper so it holds against cream */
  --white: #FFFFFF;
  --red:   #C41B25;

  /* type */
  --display: "Fraunces", "Cooper Black", Georgia, serif;
  --sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  clamp(3.4rem, 13vw, 11rem);
  --fs-h1:    clamp(2.4rem, 7vw, 5rem);
  --fs-h2:    clamp(1.8rem, 4vw, 3rem);
  --fs-h3:    clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-label: .688rem;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 12vh, 10rem);
  --maxw: 1400px;
  --maxw-text: 62ch;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 76px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:340;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

/* grain — sits above the ground, below content */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}

/* ---------- 3. TYPE ---------- */
.display{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  line-height:.86;
  letter-spacing:-.02em;
  text-transform:lowercase;
}
h1,h2,h3{font-family:var(--display);font-weight:900;
  font-variation-settings:"SOFT" 100,"WONK" 1;line-height:1.02;letter-spacing:-.015em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.15}

.label{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-mute);
}
.lede{font-size:clamp(1.125rem,1.6vw,1.4rem);line-height:1.5;color:var(--paper);max-width:var(--maxw-text)}
.prose{max-width:var(--maxw-text);color:var(--paper-mute)}
.prose > * + *{margin-top:1.1em}
.prose h2,.prose h3{color:var(--paper);margin-top:2.2em}
.prose a{color:var(--paper);border-bottom:1px solid var(--red);transition:color .25s}
.prose a:hover{color:var(--red)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li + li{margin-top:.4em}

/* tricolore hairline */
.rule{
  height:3px;width:min(220px,40vw);border:0;
  background:linear-gradient(90deg,var(--green) 0 33.33%,#E8E2D2 33.33% 66.66%,var(--red) 66.66% 100%);
}
.rule--full{width:100%;height:1px}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative;z-index:2}
.section--tight{padding-block:clamp(3rem,7vh,5rem)}
.section--snug{padding-block:clamp(2.25rem,5vh,3.5rem)}
.stack > * + *{margin-top:1.5rem}
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}

.section-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head .rule{margin-top:.25rem}

/* ---------- 5. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);display:flex;align-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(244,240,230,.86);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--ink-line);
}
/* An element with backdrop-filter becomes the containing block for its
   position:fixed descendants. That clipped the full-screen mobile menu to the
   76px nav bar whenever the page was scrolled, so the page showed through it.
   Drop the filter while the menu is open; the panel paints its own ground. */
.nav.is-menu-open,
.nav.is-menu-open.is-stuck{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:transparent;border-bottom-color:transparent;
}
.nav__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav__brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.nav__brand img{width:auto;height:clamp(22px,2.4vw,28px);flex-shrink:0}
.nav__brand span{
  font-family:var(--display);font-weight:900;font-size:1.02rem;
  font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:-.01em;line-height:1;
  white-space:nowrap;
}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);list-style:none}
.nav__links a{
  position:relative;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--paper-mute);padding-block:.5rem;transition:color .28s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--green) 0 33.33%,#D9D2C0 33.33% 66.66%,var(--red) 66.66% 100%);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--paper)}

.nav__toggle{display:none;width:44px;height:44px;margin-right:-10px;position:relative;z-index:110}
.nav__toggle span{display:block;width:24px;height:1.5px;background:var(--paper);margin:5px auto;
  transition:transform .35s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;inset:0;background:var(--ink);
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:.4rem;padding:var(--nav-h) var(--gutter) 4rem;
    clip-path:circle(0% at calc(100% - 40px) 38px);
    transition:clip-path .6s var(--ease);
  }
  .nav__links[data-open="true"]{clip-path:circle(150% at calc(100% - 40px) 38px)}
  .nav__links a{font-family:var(--display);font-size:clamp(2rem,9vw,3.2rem);
    font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:900;
    text-transform:lowercase;letter-spacing:-.02em;color:var(--paper)}
  .nav__links a::after{height:3px}
}

/* ---------- 6. HERO ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding-top:var(--nav-h);z-index:2;overflow:hidden;
}
.hero__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hero__logo{width:min(620px,84vw);margin:0}
.hero__logo img{width:100%;height:auto}
.footer__logo{width:min(260px,72%);height:auto;margin-bottom:1.25rem}
.hero__word{font-family:var(--display);font-weight:900;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-size:var(--fs-hero);line-height:.82;letter-spacing:-.035em;text-transform:lowercase}
.hero .rule{margin-block:clamp(1.75rem,3.5vw,2.75rem) 1.25rem}
.hero__sub{font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--paper-mute)}
.hero__scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.hero__scroll::after{content:"";width:1px;height:36px;background:linear-gradient(var(--paper-faint),transparent);
  animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* page header for interior pages */
.page-head{padding-top:calc(var(--nav-h) + clamp(4rem,10vh,8rem));padding-bottom:clamp(2.5rem,6vh,4.5rem);position:relative;z-index:2}
.page-head .label{display:block;margin-bottom:1.25rem}
.page-head h1{font-size:var(--fs-h1);text-transform:lowercase;letter-spacing:-.03em}
.page-head .rule{margin-block:1.75rem 1.5rem}

/* ---------- 7. CARDS / MEDIA ---------- */
.card{
  background:var(--ink-raised);border:1px solid var(--ink-line);
  border-radius:20px;
  padding:clamp(1.6rem,2.6vw,2.35rem);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
  display:flex;flex-direction:column;gap:1rem;height:100%;
}
a.card:hover,.card--hover:hover{border-color:var(--red);transform:translateY(-4px);background:#F6F2E9}
.card__meta{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint)}
.card__title{font-family:var(--display);font-weight:900;font-size:1.35rem;
  font-variation-settings:"SOFT" 100,"WONK" 1;line-height:1.1;letter-spacing:-.01em}
.card__body{color:var(--paper-mute);font-size:.95rem}
.card__media{aspect-ratio:3/2;background:#E4DCCB;overflow:hidden;margin:-1px -1px 0;position:relative;
  border-radius:19px 19px 0 0}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);filter:saturate(.9)}
a.card:hover .card__media img{transform:scale(1.05)}
.card--media{padding:0;overflow:hidden}
.card--media .card__pad{padding:clamp(1.25rem,2vw,1.75rem);display:flex;flex-direction:column;gap:.65rem}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.7rem;border:1px solid var(--ink-line-2);border-radius:999px;
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  align-self:flex-start;
}
.btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--red:hover{background:var(--red);color:var(--white);border-color:var(--red)}
.btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--solid:hover{background:var(--red);color:var(--white);border-color:var(--red)}
.btn svg{width:14px;height:14px}

/* ---------- 8. CONSENT-GATED EMBEDS (GDPR: no 3rd-party cookies until click) ---------- */
.embed{position:relative;width:100%;background:var(--ink-raised);border:1px solid var(--ink-line);
  border-radius:18px;overflow:hidden}
.embed__gate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  text-align:center;padding:clamp(2.5rem,7vw,5rem) 1.5rem;min-height:var(--gate-h,340px);
}
.embed__gate h3{font-size:1.4rem;text-transform:lowercase}
.embed__gate p{color:var(--paper-faint);font-size:.85rem;max-width:44ch;line-height:1.55}
.embed__gate .btn{align-self:center}
.embed iframe{width:100%;border:0;display:block;border-radius:14px}
.embed__note{font-size:.7rem;color:var(--paper-faint);letter-spacing:.04em;margin-top:.75rem}

/* ---------- 8b. PODCAST PLAYER + EPISODES ---------- */
.embed--player{background:none;border:0;border-radius:0;overflow:visible}

.player{
  display:grid;gap:clamp(1.5rem,3.2vw,2.75rem);
  grid-template-columns:minmax(0,246px) minmax(0,1fr);
  align-items:center;
  padding:clamp(1.35rem,2.6vw,2.15rem);
  border:1px solid var(--ink-line);border-radius:22px;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(196,27,37,.06), transparent 62%),
    var(--ink-raised);
}
@media (max-width:760px){.player{grid-template-columns:1fr}}
.player__art{border-radius:16px;overflow:hidden;border:1px solid rgba(26,22,16,.12);
  box-shadow:0 22px 50px -22px rgba(40,30,15,.35)}
.player__art img{width:100%;height:auto;display:block}
.player__body{display:flex;flex-direction:column;gap:1.15rem;align-items:flex-start}
.player__title{font-family:var(--display);font-weight:900;
  font-variation-settings:"SOFT" 100,"WONK" 1;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.12;letter-spacing:-.015em;
  max-width:22ch}
.player__desc{color:var(--paper-mute);font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.6;max-width:48ch;font-style:italic}
.player__desc a{color:var(--paper);border-bottom:1px solid var(--red);
  font-style:normal;transition:color .25s}
.player__desc a:hover{color:var(--red)}
/* the next night, spelled out under the ticket blurb */
.player__next{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;
  color:var(--paper);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.45}
.player__next b{letter-spacing:.04em;text-transform:uppercase}
.player__next span{color:var(--paper-faint);font-size:.8em;letter-spacing:.04em}
.player__art--photo{border-radius:16px;overflow:hidden;aspect-ratio:1}
.player__art--photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 42%}
.player__cta{
  display:inline-flex;align-items:center;gap:.95rem;
  padding:.55rem 1.7rem .55rem .55rem;border-radius:999px;
  background:var(--paper);color:var(--ink);
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.player__cta:hover{background:var(--red);color:var(--white);transform:translateY(-2px)}
.player__cta i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--red);color:var(--white);transition:background .3s var(--ease);flex-shrink:0}
.player__cta:hover i{background:var(--ink)}
.player__cta svg{width:12px;height:12px;margin-left:3px}
.player__note{font-size:.72rem;color:var(--paper-faint);letter-spacing:.03em;
  line-height:1.55;max-width:46ch}

.episodes{border-top:1px solid var(--ink-line)}
.ep{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;padding:clamp(1.3rem,2.4vw,1.9rem) clamp(.35rem,1.4vw,1.1rem);
  border-bottom:1px solid var(--ink-line);transition:background .35s var(--ease)}
.ep__n{font-size:var(--fs-label);letter-spacing:.2em;color:var(--paper-faint);min-width:4.5ch}
.ep__name{font-family:var(--display);font-weight:900;
  font-variation-settings:"SOFT" 100,"WONK" 1;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.1;letter-spacing:-.015em}
.ep__date{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);white-space:nowrap;transition:color .3s var(--ease)}
.ep__name{transition:transform .35s var(--ease)}
a.ep:hover{background:rgba(26,22,16,.05)}
a.ep:hover .ep__n{color:var(--red)}
a.ep:hover .ep__date{color:var(--paper-mute)}
a.ep:hover .ep__name{transform:translateX(7px)}
a.ep:focus-visible{background:rgba(26,22,16,.05)}
@media (max-width:640px){
  .ep{grid-template-columns:auto 1fr;gap:.45rem 1.1rem}
  .ep__date{grid-column:2}
}

/* ---------- 8c. TICKET GATE ART + EVENT ARCHIVE ---------- */
.player__art--panel{display:grid;place-items:center;aspect-ratio:1;
  padding:clamp(1.4rem,2.8vw,2.1rem);
  /* sampled from the Macchiato Bruxelles cover art: light warm centre
     falling to a deeper cream at the edges, so the panel reads as a
     printed sleeve rather than a flat swatch */
  background:
    radial-gradient(115% 105% at 52% 38%,
      #EFE2CF 0%, #ECDDC8 38%, #E3D3BB 72%, #D6C3A7 100%);
  box-shadow:inset 0 0 0 1px rgba(26,22,16,.07);}
.player__art--panel img{width:100%;height:auto;filter:none}
.player__art--icon svg{width:min(44%,150px);height:auto}

.events{columns:3 290px;column-gap:clamp(.9rem,1.8vw,1.6rem)}
.event{break-inside:avoid;margin-bottom:clamp(.9rem,1.8vw,1.6rem);
  border:1px solid var(--ink-line);border-radius:16px;overflow:hidden;
  background:var(--ink-raised);display:block;
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.event:hover{border-color:var(--ink-line-2)}
/* only events that actually have photos become links */
a.event:hover{border-color:var(--red);transform:translateY(-3px)}
a.event:hover .event__img{transform:scale(1.03)}
.event__img{transition:transform .7s var(--ease)}
.event__photos{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.event__img{width:100%;height:auto;display:block}
.event__pad{padding:clamp(1rem,1.8vw,1.35rem) clamp(1.1rem,2vw,1.5rem) clamp(1.15rem,2vw,1.5rem);
  display:flex;flex-direction:column;gap:.5rem}
.event__name{font-family:var(--display);font-weight:900;
  font-variation-settings:"SOFT" 100,"WONK" 1;
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.12;letter-spacing:-.01em}
.event__meta{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);line-height:1.7}
.event__meta b{color:var(--paper-mute);font-weight:500}

/* event with no surviving flyer — a typographic stand-in, not a broken image */
.event__blank{aspect-ratio:4/5;display:grid;place-items:center;text-align:center;
  padding:2rem 1.5rem;gap:1rem;
  background:radial-gradient(120% 130% at 50% 0%,rgba(196,27,37,.06),transparent 70%),#E9E2D2}
.event__blank svg{width:44px;height:44px;opacity:.75}
.event__blank p{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-faint)}

/* homepage gallery teaser tiles */
.shot{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--ink-line);
  aspect-ratio:3/2;background:#E4DCCB;
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.shot:hover{border-color:var(--red);transform:translateY(-3px)}
.shot:hover img{transform:scale(1.05)}

/* ---------- 9. GALLERY ---------- */
.gallery-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.chip{
  padding:.55rem 1.15rem;border:1px solid var(--ink-line);
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute);
  transition:all .28s var(--ease);
}
.chip:hover{border-color:var(--ink-line-2);color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.masonry{columns:4 260px;column-gap:clamp(.75rem,1.4vw,1.1rem)}
.masonry figure{
  break-inside:avoid;margin-bottom:clamp(.75rem,1.4vw,1.1rem);position:relative;
  overflow:hidden;background:#E4DCCB;cursor:zoom-in;
}
.masonry img{width:100%;transition:transform .8s var(--ease),opacity .5s;filter:saturate(.92)}
.masonry figure:hover img{transform:scale(1.04);filter:saturate(1.05)}
.masonry figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.25rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(23,19,14,.82));
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:#F4F0E6;
  opacity:0;transform:translateY(6px);transition:all .35s var(--ease);
}
.masonry figure:hover figcaption{opacity:1;transform:none}
.masonry figure.is-hidden{display:none}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(28,24,18,.96);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  backdrop-filter:blur(6px);
}
.lightbox[data-open="true"]{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain}
.lightbox__cap{position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;
  font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mute)}
.lightbox__btn{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;
  font-size:1.5rem;color:var(--paper-mute);transition:color .25s}
.lightbox__btn:hover{color:var(--paper)}
.lightbox__prev{left:.5rem}.lightbox__next{right:.5rem}
.lightbox__close{position:absolute;top:1.25rem;right:1.5rem;width:44px;height:44px;font-size:1.6rem;
  color:var(--paper-mute);transition:color .25s}
.lightbox__close:hover{color:var(--red)}

/* ---------- 10. FOOTER ---------- */
.footer{border-top:1px solid var(--ink-line);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem;position:relative;z-index:2}
.footer__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin-bottom:4rem}
.footer h4{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper-faint);font-family:var(--sans);font-weight:500;margin-bottom:1.25rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.footer a{color:var(--paper-mute);font-size:.9rem;transition:color .25s}
.footer a:hover{color:var(--red)}
.footer__brand .display{font-size:1.6rem;margin-bottom:1rem}
.footer__legal{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  align-items:center;padding-top:2rem;border-top:1px solid var(--ink-line);
  font-size:.72rem;color:var(--paper-faint);letter-spacing:.06em}
.footer__legal p{max-width:70ch;line-height:1.6}

/* newsletter */
.subscribe{display:flex;gap:0;max-width:400px;border-bottom:1px solid var(--ink-line-2);
  transition:border-color .3s}
.subscribe:focus-within{border-bottom-color:var(--red)}
.subscribe input{flex:1;background:none;border:0;color:var(--paper);padding:.85rem 0;
  font-family:var(--sans);font-size:.9rem}
.subscribe input::placeholder{color:var(--paper-faint)}
.subscribe input:focus{outline:none}
.subscribe button{padding:.85rem 0 .85rem 1rem;font-size:var(--fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-mute);transition:color .25s}
.subscribe button:hover{color:var(--red)}

/* newsletter parked until there's a provider behind it */
.soon{display:inline-block;margin-left:.5rem;padding:.16rem .5rem;border-radius:999px;
  background:rgba(196,27,37,.10);color:var(--red);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  vertical-align:middle}
.subscribe.is-disabled{opacity:.45;border-bottom-style:dashed}
.subscribe.is-disabled input,.subscribe.is-disabled button{cursor:not-allowed}
.subscribe.is-disabled:focus-within{border-bottom-color:var(--ink-line-2)}

/* ---------- 11. UTILITIES + REVEAL ---------- */
.text-red{color:var(--red)}
.text-mute{color:var(--paper-mute)}
.center{text-align:center;margin-inline:auto}
.mt-l{margin-top:clamp(2rem,4vw,3.5rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}

/* editorial callout for placeholder content — remove once real copy lands */
.todo{border-left:2px solid var(--red);padding:.85rem 1.1rem;background:rgba(196,27,37,.07);
  font-size:.8rem;color:var(--paper-mute);letter-spacing:.02em}
.todo b{color:var(--red);letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}