/* ═══════════════════════════════════════════════════════════
   FIRESIDE FESTIVAL 2027
   Type   Friz Quadrata + Poppins, matching the existing site.
   Colour Red, orange and black, with the northern lights as accent.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Friz Quadrata';
  src:url('../assets/fonts/friz-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Friz Quadrata';
  src:url('../assets/fonts/friz-medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
/* There is no usable bold Friz. The only bold cut on the machine is a bootleg
   ALLTYPE file that Chrome's font sanitiser rejects outright, even after a full
   table rebuild, so weight 700 resolves to the legitimate Std Medium and the
   extra weight comes from a hairline stroke below. */
@font-face{
  font-family:'Friz Quadrata';
  src:url('../assets/fonts/friz-medium.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* black */
  --black:   #0C0A0A;
  --coal:    #141010;
  --ash:     #1C1616;
  --soot:    #060404;

  /* fire */
  --ember:   #FC4818;
  --flame:   #FF6B2C;
  --amber:   #FCB454;
  --brick:   #B43C48;
  --cream:   #FCF0C0;

  /* northern lights, accent only */
  --aurora-a:#3FD0C9;
  --aurora-b:#7C5CD6;

  --paper:   #F7F1E8;
  --muted:   rgba(247,241,232,.64);
  --faint:   rgba(247,241,232,.26);
  --hair:    rgba(252,180,84,.2);
  --hair-hot:rgba(252,72,24,.34);

  --display: 'Friz Quadrata', 'Palatino Linotype', Palatino, Georgia, serif;
  --body:    'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  --sec: clamp(80px, 10vw, 160px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(15px,1vw,16.5px);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-999px; top:0; z-index:999; background:var(--ember); color:#fff; padding:12px 20px; font-weight:600; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); position:relative; }

/* film grain over the whole page, the way the posters are printed */
.grain{
  position:fixed; inset:-120px; z-index:200; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 620ms steps(2) infinite;
}
@keyframes grainshift{
  0%  { transform:translate(0,0); }
  50% { transform:translate(-2%,1.5%); }
  100%{ transform:translate(1.5%,-1%); }
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }

/* ── type ───────────────────────────────────────────── */
.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,4.6vw,3.7rem);
  line-height:1.06;
  letter-spacing:-.012em;
  margin:0 0 .8em;
  color:var(--cream);
  text-wrap:balance;
}
.h2 .accent{ color:var(--ember); display:block; }
.eyebrow{
  font-family:var(--body);
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); font-weight:600;
  margin:0 0 1.5em; display:flex; align-items:center; gap:.7em;
}
.eyebrow--mid{ margin-top:4.5rem; }
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--ember); box-shadow:0 0 10px var(--ember); }
.lede{ color:var(--muted); max-width:56ch; font-size:1.02rem; }

/* ── buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-weight:600;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:2px;
  text-decoration:none; border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn--fill{ background:var(--ember); color:#fff; }
.btn--fill:hover{ background:var(--flame); }
.btn--ghost{ border-color:var(--hair); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber); }
.btn--sm{ padding:.72em 1.35em; font-size:.68rem; border:1px solid var(--hair); }
.btn--sm:hover{ border-color:var(--amber); color:var(--amber); }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:2rem;
  padding:12px var(--gut);
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:rgba(12,10,10,.9); backdrop-filter:blur(16px); border-bottom-color:rgba(252,180,84,.16); }
/* The logo lives in the hero, full size. The nav mark only appears once
   the hero is scrolled past, so the top of the page is not a storefront. */
.nav__mark{
  line-height:0; flex:0 0 auto;
  opacity:0; pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.nav.is-stuck .nav__mark{ opacity:1; pointer-events:auto; transform:none; }
.nav--static .nav__mark{ opacity:1; pointer-events:auto; transform:none; }
.nav__mark img{ width:128px; height:auto; }
.nav__links{ display:flex; gap:1.8rem; margin-left:auto; }
.nav__links a{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); font-weight:500;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--amber); }
.nav__toggle{
  display:none; margin-left:auto; width:44px; height:44px;
  background:none; border:1px solid var(--hair); border-radius:2px; cursor:pointer; position:relative;
}
.nav__toggle span:not(.sr){
  position:absolute; left:12px; width:20px; height:1.5px; background:var(--paper);
  transition:transform .3s var(--ease);
}
.nav__toggle span:nth-child(1){ top:18px; }
.nav__toggle span:nth-child(2){ top:24px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.drawer{
  position:fixed; inset:68px 0 auto 0; z-index:59;
  background:rgba(6,4,4,.98); backdrop-filter:blur(20px);
  padding:1rem var(--gut) 2rem; display:flex; flex-direction:column;
  border-bottom:1px solid var(--hair);
}
.drawer[hidden]{ display:none; }
.drawer a{
  font-family:var(--display); font-size:1.4rem; font-weight:500;
  text-decoration:none; padding:.6em 0;
  border-bottom:1px solid rgba(247,241,232,.08);
}
.drawer a:last-child{ border-bottom:0; color:var(--amber); }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; overflow:hidden;
  padding:120px var(--gut) 96px;
  isolation:isolate;
}
.hero__photo{ position:absolute; inset:0; z-index:-3; }
.hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  filter:saturate(1.06) contrast(1.04) brightness(.92);
}
.hero__photo::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(52% 40% at 50% 46%, rgba(6,4,4,.58) 0%, transparent 78%),
    radial-gradient(130% 80% at 50% 112%, rgba(252,72,24,.4) 0%, transparent 56%),
    linear-gradient(to bottom, var(--soot) 0%, rgba(12,10,10,.34) 30%, rgba(12,10,10,.5) 60%, var(--black) 99%);
}
/* northern lights, kept to a thin band at the very top */
.hero__aurora{ position:absolute; inset:0 0 auto 0; height:42vh; z-index:-2; overflow:hidden; opacity:.4; }
.hero__aurora i{
  position:absolute; left:-25%; width:150%; height:34vh; display:block;
  filter:blur(64px); border-radius:50%; mix-blend-mode:screen;
}
.hero__aurora i:nth-child(1){ top:-16vh; background:linear-gradient(100deg,transparent 12%,var(--aurora-a) 46%,transparent 80%); animation:drift 30s ease-in-out infinite; }
.hero__aurora i:nth-child(2){ top:-12vh; background:linear-gradient(80deg,transparent 20%,var(--aurora-b) 54%,transparent 86%); animation:drift 40s ease-in-out infinite reverse; opacity:.75; }
@keyframes drift{
  0%,100%{ transform:translate3d(-5%,0,0) rotate(-2deg) scaleY(1); }
  50%    { transform:translate3d(5%,2vh,0) rotate(1.6deg) scaleY(1.18); }
}
.hero__embers{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

.hero__inner{ position:relative; width:100%; max-width:1180px; }
.eyebrow--hero{ justify-content:center; margin-bottom:1.6rem; }

/* the logo is the hero */
.hero__logo{ margin:0; }
/* The wordmark is 1.96:1. Capping width by height x 1.96 keeps the natural
   ratio while still guaranteeing the date and buttons clear the fold, with
   no letterboxed dead space around the image. */
.hero__logo img{
  width:min(84vw, 880px, 90svh);
  height:auto;
  margin-inline:auto;
  filter:drop-shadow(0 22px 60px rgba(6,4,4,.85))
         drop-shadow(0 0 90px rgba(252,72,24,.28));
}
@media (max-width:860px){
  .hero__logo img{ width:min(92vw, 74svh); }
}

.hero__date{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.7rem,1.8vw,1.4rem);
  margin:clamp(1.4rem,2.6vw,2.2rem) 0 0;
  font-family:var(--display);
  font-size:clamp(1.15rem,3.1vw,2.5rem);
  font-weight:700; letter-spacing:.02em; line-height:1;
  color:var(--cream); text-transform:uppercase;
}
.hero__d1 em{ font-style:normal; color:var(--ember); padding:0 .08em; }
.hero__d2{ color:var(--amber); }
.hero__rule{
  width:clamp(28px,5vw,72px); height:1px; flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);
}

.hero__venue{ margin:1.3rem 0 0; font-size:clamp(.92rem,1.3vw,1.1rem); font-weight:400; }
.hero__venue span{ color:var(--muted); font-size:.9em; font-weight:300; display:block; margin-top:.3em; }
.hero__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:2.3rem; }
@keyframes fall{ 0%,100%{ opacity:.2; transform:scaleY(.4); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }

/* ═══════════ TICKER ═══════════ */
.ticker{ border-block:1px solid var(--hair); background:var(--soot); overflow:hidden; padding:13px 0; }
.ticker__row{ display:flex; align-items:center; gap:1.5rem; width:max-content; animation:slide 52s linear infinite; }
.ticker__row span{
  font-family:var(--display); font-size:clamp(.9rem,1.5vw,1.3rem);
  font-weight:500; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
}
.ticker__row span:nth-child(4n+1){ color:var(--amber); }
.ticker__row b{ width:5px; height:5px; border-radius:50%; background:var(--ember); flex:0 0 auto; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ═══════════ STATS ═══════════ */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px; margin:3rem 0 0; padding:0;
  background:var(--hair); border:1px solid var(--hair);
}
.stat{ background:var(--black); padding:1.8rem 1.5rem; }
.stat dt{ font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem; font-weight:400; }
.stat dd{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1; color:var(--cream);
}
.stat dd i{ font-style:normal; color:var(--ember); }

/* ═══════════ RAIL (shared by the photo carousel and the poster wall) ═══════════ */
.rail{
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  cursor:grab; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-drag{ cursor:grabbing; scroll-behavior:auto; }
.rail__track{
  display:flex; align-items:flex-start; gap:clamp(16px,2.4vw,36px);
  padding-inline:max(var(--gut),calc(50vw - 620px));
  width:max-content;
}
.rail__nav{ display:flex; gap:.55rem; justify-content:center; margin-top:1.6rem; }
.rail__arrow{
  width:46px; height:46px; border-radius:2px; cursor:pointer;
  background:transparent; border:1px solid var(--hair);
  color:var(--paper); font-size:1rem; line-height:1;
  transition:background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.rail__arrow:hover:not(:disabled){ background:var(--ember); border-color:var(--ember); color:#fff; }
.rail__arrow:disabled{ opacity:.25; cursor:default; }

/* ═══════════ POLAROIDS ═══════════ */
/* Classic polaroid proportions, no caption. The deep bottom border is the
   whole point of the frame, so it stays. */
.polaroid{
  flex:0 0 auto; width:clamp(228px,27vw,320px);
  background:var(--paper); padding:13px 13px 46px;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.95);
  transform:rotate(var(--tilt));
  transition:transform .45s var(--ease);
}
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--ash); }
.rail:not(.is-drag) .polaroid:hover{ transform:rotate(0deg) translateY(-8px); }

.shots__foot{ display:flex; justify-content:center; margin-top:2rem; }

/* ═══════════ STORY ═══════════ */
.story{ background:var(--coal); }
.story__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.story__copy p{ color:var(--muted); max-width:46ch; }
.story__sig{ font-family:var(--display); font-size:1.25rem; color:var(--amber) !important; margin-top:1.8rem; }
.frame{ margin:0; background:var(--paper); padding:12px; box-shadow:0 26px 56px -26px rgba(0,0,0,.95); }
.frame img{ width:100%; }
.frame figcaption{
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:#3A2E28; padding:13px 4px 2px; text-align:center; font-weight:500;
}
.frame--tilt{ transform:rotate(-1.6deg); }

/* ═══════════ WEEKEND ═══════════ */
.nights{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,34px); margin-top:2.8rem; }
.night{ border:1px solid var(--hair); background:var(--coal); display:flex; flex-direction:column; overflow:hidden; }
.night__img{ aspect-ratio:16/10; overflow:hidden; }
.night__img img{ width:100%; height:100%; object-fit:cover; }
.night__body{ padding:clamp(24px,3vw,40px); }
.night__day{ font-family:var(--display); font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:700; margin:0; line-height:1; }
.night--sat .night__day{ color:var(--ember); }
.night--sun .night__day{ color:var(--amber); }
.night__date{ margin:.55rem 0 1.3rem; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.night__title{ font-family:var(--display); font-size:1.25rem; font-weight:500; margin:0 0 .7rem; color:var(--cream); }
.night__body p:not(.night__day):not(.night__date){ color:var(--muted); margin:0 0 1.5rem; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; }
.tags li{ font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; border:1px solid var(--hair); padding:.5em 1em; color:var(--muted); }

/* ═══════════ ARCHIVE ═══════════ */
.archive{
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(124,92,214,.13) 0%, transparent 64%),
    var(--soot);
  overflow:hidden;
}
.archive__head{ text-align:center; }
.archive__head .eyebrow{ justify-content:center; }
.archive__note{ color:var(--muted); font-size:.84rem; margin:0; }
.wall{ margin-top:clamp(40px,5vw,66px); padding-block:38px; }
.wall__track{ align-items:center; }

.poster{
  flex:0 0 auto; width:clamp(196px,25vw,282px);
  background:none; border:0; padding:0; color:inherit;
  cursor:pointer; text-align:left; position:relative;
  transition:transform .45s var(--ease);
  transform:rotate(var(--tilt));
}
.poster__pin{
  position:absolute; top:-12px; left:50%; width:12px; height:12px;
  border-radius:50%; background:var(--ember); z-index:3;
  box-shadow:0 0 14px rgba(252,72,24,.9), inset 0 -2px 3px rgba(0,0,0,.35);
  transform:translateX(-50%);
}
.poster__sheet{
  display:block; background:var(--paper); padding:8px 8px 10px;
  box-shadow:0 30px 56px -26px rgba(0,0,0,.95);
}
.poster__sheet img{ width:100%; aspect-ratio:4/5.2; object-fit:cover; object-position:top center; background:var(--ash); }
.poster__cap{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; padding-top:9px; }
.poster__yr, .poster__ed{ display:block; }
.poster__yr{ font-family:var(--display); font-weight:700; font-size:1.1rem; color:#241C1A; }
.poster__ed{ font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(36,28,26,.6); font-weight:500; }
.rail:not(.is-drag) .poster:hover, .poster:focus-visible{ transform:rotate(0deg) translateY(-12px); z-index:5; }

.poster__void{
  aspect-ratio:4/5.2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.5rem; text-align:center; padding:1.4rem;
}
.poster--gap .poster__sheet{ background:rgba(247,241,232,.04); border:1px dashed rgba(247,241,232,.24); box-shadow:none; }
.poster--gap .poster__sheet img{ display:none; }
.poster--gap .poster__void b{ font-family:var(--display); font-size:clamp(1rem,2vw,1.4rem); font-weight:500; color:rgba(247,241,232,.5); line-height:1.25; }
.poster--gap .poster__void span{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); line-height:1.7; }
.poster--gap .poster__yr{ color:var(--muted); }
.poster--gap .poster__ed{ color:var(--faint); }
.poster--gap{ cursor:default; }
.rail:not(.is-drag) .poster--gap:hover{ transform:rotate(var(--tilt)); }
.poster--skip .poster__sheet{ background:none; border:0; box-shadow:none; }

.poster--next .poster__sheet{ background:linear-gradient(168deg,#241413,var(--soot)); border:1px solid var(--hair-hot); }
.poster--next .poster__void b{ font-family:var(--display); font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; color:var(--cream); line-height:1; text-transform:uppercase; }
.poster--next .poster__void span{ font-size:.58rem; letter-spacing:.19em; text-transform:uppercase; color:var(--amber); }
.poster--next .poster__yr{ color:var(--cream); }
.poster--next .poster__ed{ color:rgba(252,180,84,.7); }


/* ═══════════ VENUE ═══════════ */
.venue{ position:relative; overflow:hidden; }
.venue__bg{ position:absolute; inset:0; z-index:0; }
.venue__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.26) saturate(.8); }
.venue__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(102deg,var(--black) 6%,rgba(12,10,10,.88) 46%,rgba(12,10,10,.52) 100%); }
.venue__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .85fr; gap:clamp(40px,6vw,84px); align-items:center; }
.venue__copy > p{ color:var(--muted); max-width:48ch; }
.venue__facts{ list-style:none; padding:0; margin:2.2rem 0; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
.venue__facts li{ border-top:1px solid var(--hair); padding-top:.85rem; }
.venue__facts b{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:500; color:var(--cream); }
.venue__facts span{ font-size:.76rem; color:var(--muted); }
.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); text-decoration:none; font-weight:600;
  border-bottom:1px solid var(--hair); padding-bottom:.45em;
  transition:gap .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow::after{ content:'→'; }
.link-arrow:hover{ gap:.9em; border-color:var(--amber); }
.venue__stack{ display:grid; gap:18px; }
.venue__stack .frame:nth-child(1){ transform:rotate(1.4deg); }
.venue__stack .frame:nth-child(2){ transform:rotate(-1.2deg); margin-left:12%; }

/* ═══════════ PARTNERS ═══════════ */
.partners{ background:var(--coal); }
.reach{ list-style:none; padding:0; margin:2.8rem 0 4rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1.8rem; }
.reach b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3vw,2.5rem); color:var(--amber); line-height:1; }
.reach span{ font-size:.74rem; color:var(--muted); display:block; margin-top:.5rem; }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.tier{ background:var(--coal); padding:clamp(24px,2.6vw,36px); }
.tier__name{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.tier__price{ font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,3vw,2.4rem); margin:0 0 1.3rem; color:var(--cream); }
.tier ul{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.tier li{ font-size:.83rem; color:var(--muted); padding-left:1.1rem; position:relative; line-height:1.55; }
.tier li::before{ content:''; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--ember); }
.tier--title{ background:var(--ash); }
.tier--title .tier__price, .tier--title .tier__name{ color:var(--amber); }

.partners__cta{ margin-top:2.4rem; color:var(--muted); max-width:56ch; }
.partners__cta a{ color:var(--amber); text-underline-offset:4px; }
.logos{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.logos li{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--hair); padding:.7em 1.2em; color:var(--muted); }

/* ═══════════ LIST ═══════════ */
.list{ position:relative; overflow:hidden; text-align:center; }
.list__photo{ position:absolute; inset:0; z-index:0; }
.list__photo img{ width:100%; height:100%; object-fit:cover; filter:brightness(.3) saturate(.85); }
.list__photo::after{ content:''; position:absolute; inset:0; background:radial-gradient(66% 86% at 50% 50%, rgba(12,10,10,.66) 0%, var(--black) 84%); }
.list__inner{ position:relative; z-index:1; max-width:720px; }
.list__inner .eyebrow{ justify-content:center; }
.list__lede{ color:var(--muted); margin:0 auto 2.2rem; max-width:48ch; }
.signup{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.signup input{
  flex:1 1 300px; max-width:380px;
  background:rgba(6,4,4,.75); border:1px solid var(--hair);
  color:var(--paper); font-family:var(--body); font-size:.92rem; font-weight:300;
  padding:1.05em 1.3em; border-radius:2px;
}
.signup input::placeholder{ color:rgba(247,241,232,.32); }
.signup input:focus{ border-color:var(--amber); outline:none; }
.signup input[aria-invalid="true"]{ border-color:var(--brick); }
.signup__msg{ flex:1 0 100%; margin:.9rem 0 0; font-size:.8rem; min-height:1.2em; color:var(--amber); }
.list__fine{ margin-top:1.5rem; font-size:.72rem; color:var(--faint); }

/* ═══════════ FOOTER ═══════════ */
.foot{ background:var(--soot); border-top:1px solid var(--hair); padding-top:clamp(52px,6vw,80px); }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; }
.foot__brand img{ width:180px; height:auto; margin-bottom:1.1rem; }
.foot__brand p{ color:var(--muted); font-size:.83rem; max-width:32ch; margin:0; }
.foot__h{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin:0 0 .9rem; }
.foot__col p{ color:var(--muted); font-size:.83rem; margin:0; line-height:1.9; }
.foot__col a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--hair); }
.foot__col a:hover{ color:var(--amber); }
.foot__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:clamp(40px,5vw,64px); padding-block:1.5rem; border-top:1px solid rgba(247,241,232,.07); }
.foot__base p{ margin:0; font-size:.68rem; color:var(--faint); letter-spacing:.07em; }

/* ═══════════ LIGHTBOX ═══════════ */
.lb{
  border:0; padding:0; max-width:min(1040px,92vw); max-height:90vh; width:100%;
  background:var(--coal); color:var(--paper); box-shadow:0 40px 110px rgba(0,0,0,.9);
}
.lb::backdrop{ background:rgba(4,3,3,.92); backdrop-filter:blur(6px); }
.lb__body{ display:grid; grid-template-columns:.85fr 1fr; max-height:90vh; }
.lb__img{ width:100%; height:100%; object-fit:contain; background:var(--soot); max-height:90vh; }
.lb__meta{ padding:clamp(24px,3vw,42px); overflow-y:auto; }
.lb__year{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,5vw,3.8rem); margin:0; line-height:1; color:var(--cream); }
.lb__when{ margin:.7rem 0 .2rem; color:var(--amber); font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; }
.lb__where{ margin:0 0 1.8rem; color:var(--muted); font-size:.84rem; }
.lb__label{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; padding-top:1.3rem; border-top:1px solid var(--hair); }
.lb__acts{ margin:0; font-size:.88rem; line-height:1.95; color:var(--paper); font-weight:300; }
.lb__close{
  position:absolute; top:10px; right:12px; z-index:4;
  width:40px; height:40px; border-radius:2px; cursor:pointer;
  background:rgba(6,4,4,.82); border:1px solid var(--hair); color:var(--paper); font-size:1.4rem; line-height:1;
}
.lb__close:hover{ background:var(--ember); border-color:var(--ember); }

/* ═══════════ ABOUT PAGE ═══════════ */
.chap{ padding-block:clamp(64px,8vw,120px); }
.chap--alt{ background:var(--coal); }
.chap__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,80px); align-items:center; }
.chap__grid--flip .chap__copy{ order:2; }
.chap__grid--flip .chap__art{ order:1; }
.chap__year{
  font-family:var(--body); font-size:.68rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--amber); font-weight:600; margin:0 0 .9rem;
}
.chap__h{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.08;
  color:var(--cream); margin:0 0 1.1rem;
}
.chap__copy p:not(.chap__year){ color:var(--muted); max-width:46ch; margin:0 0 1.1rem; }

.chap__art{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,22px); align-items:start; }
.chap__shot{
  margin:0; background:var(--paper); padding:10px;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.95);
  transform:rotate(var(--tilt));
  transition:transform .4s var(--ease);
}
.chap__shot:first-child{ grid-column:span 2; }
.chap__shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--ash); }
.chap__shot:first-child img{ aspect-ratio:16/10; }
.chap__shot figcaption{
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:#3A2E28; font-weight:500; text-align:center; padding:11px 4px 1px;
}
.chap__shot:hover{ transform:rotate(0deg) translateY(-6px); }

.chap--now{ background:var(--soot); text-align:center; }
.chap--now .eyebrow{ justify-content:center; }
.now__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px);
  max-width:820px; margin:0 auto 3rem; text-align:left;
}
.now__grid p{ color:var(--muted); margin:0; }
.now__facts{
  list-style:none; padding:0; margin:0 auto 3rem; max-width:1000px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--hair); border:1px solid var(--hair); text-align:left;
}
.now__facts li{ background:var(--soot); padding:1.5rem 1.4rem; }
.now__facts b{ display:block; font-family:var(--display); font-size:1.15rem; color:var(--cream); font-weight:700; }
.now__facts span{ font-size:.76rem; color:var(--muted); display:block; margin-top:.35rem; }
.now__sig{ font-family:var(--display); font-size:1.4rem; color:var(--amber); margin:0 0 2.4rem; }
.now__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

/* ═══════════ GALLERY PAGE ═══════════ */
.page-head{ padding:150px var(--gut) 0; text-align:center; }
.page-head .eyebrow{ justify-content:center; }
.page-head .lede{ margin-inline:auto; }
.gal{ padding-block:clamp(40px,5vw,72px); }

/* Justified rows. flex-grow is the aspect ratio, so a row of frames fills
   edge to edge and every frame keeps the shape it was shot at. No forced
   crops, and DOM order survives, which the curated energy wave depends on. */
.gal__grid{
  display:flex; flex-wrap:wrap;
  gap:clamp(8px,1vw,14px);
}
.gal__item{
  flex-grow:var(--r); flex-shrink:1;
  flex-basis:calc(var(--r) * 230px);
  margin:0; padding:0; border:0; background:var(--ash);
  cursor:pointer; overflow:hidden; position:relative;
  aspect-ratio:var(--r);
}
.gal__item--feature{ flex-basis:calc(var(--r) * 360px); }
.gal__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease), filter .4s var(--ease);
}
.gal__item::after{
  content:''; position:absolute; inset:0; border:1px solid transparent;
  transition:border-color .25s var(--ease); pointer-events:none;
}
.gal__item:hover img{ transform:scale(1.045); }
.gal__item:hover::after{ border-color:var(--hair-hot); }

.gal__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.6em .9em .8em;
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper); text-align:left; font-weight:500;
  background:linear-gradient(to top, rgba(6,4,4,.88), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gal__item:hover .gal__cap, .gal__item:focus-visible .gal__cap{ opacity:1; transform:none; }

.photo-lb{ border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh; }
.photo-lb::backdrop{ background:rgba(4,3,3,.94); backdrop-filter:blur(6px); }
.photo-lb img{ max-width:96vw; max-height:88vh; width:auto; height:auto; margin-inline:auto; }
.photo-lb figcaption{ text-align:center; color:var(--muted); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; padding-top:14px; }

/* ═══════════ REVEAL ═══════════ */
[data-rise]{ opacity:0; transform:translateY(18px); }
[data-rise].is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .venue__inner{ grid-template-columns:1fr; }
  .venue__stack{ grid-template-columns:1fr 1fr; }
  .venue__stack .frame:nth-child(2){ margin-left:0; }
  .tiers{ grid-template-columns:1fr; }
  .lb__body{ grid-template-columns:1fr; overflow-y:auto; }
  .lb__img{ max-height:50vh; }
}
@media (max-width:860px){
  .nav__links, .nav .btn--sm{ display:none; }
  .nav__toggle{ display:block; }
  .story__grid{ grid-template-columns:1fr; }
  .nights{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:560px){
  .nav{ padding-block:9px; }
  .nav__mark img{ width:104px; }
  .hero{ min-height:92svh; padding-top:104px; }
  .venue__facts{ grid-template-columns:1fr; }
  .venue__stack{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .gal__item{ flex-basis:calc(var(--r) * 150px); }
  .btn{ padding:1em 1.5em; font-size:.72rem; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .signup input, .signup .btn{ flex-basis:100%; max-width:none; width:100%; }
  .foot__base{ flex-direction:column; gap:.4rem; }
  .page-head{ padding-top:120px; }
}

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

@media (max-width:1080px){
  .chap__grid{ grid-template-columns:1fr; }
  .chap__grid--flip .chap__copy{ order:1; }
  .chap__grid--flip .chap__art{ order:2; }
}
@media (max-width:560px){
  .chap__art{ grid-template-columns:1fr; }
  .chap__shot:first-child{ grid-column:span 1; }
  .now__grid{ grid-template-columns:1fr; }
  .now__cta{ flex-direction:column; align-items:stretch; }
}

/* ═══════════ TOUCH TARGETS ═══════════
   On pointer-coarse devices every tappable thing gets to 44px so it can
   actually be hit. Footer links are inline in a paragraph, so they need
   inline-block before vertical padding will do anything. */
@media (pointer: coarse){
  .btn{ min-height:44px; }
  .link-arrow{
    min-height:44px; align-items:center;
    padding-block:.6em; padding-bottom:.7em;
  }
  .foot__col a{
    display:inline-block;
    min-height:44px; line-height:44px;
    padding-inline-end:.2em;
  }
  .foot__col p{ line-height:1.35; }
  .rail__arrow{ width:48px; height:48px; }
  .nav__toggle{ width:48px; height:48px; }
  .drawer a{ min-height:48px; display:flex; align-items:center; }
}

/* Emoji ink boxes are taller than Latin caps, so at the h2 line-height of 1.06
   they spill past the line box and read as clipped. Scaling them down to sit
   inside it keeps the headings tight. */
.h2 .emoji{
  font-size:.8em;
  line-height:1;
  vertical-align:-.02em;
  display:inline-block;
}

/* Faking the missing bold. A stroke in the text colour thickens the stems
   without the smearing that browser-synthesised bold gives a serif. */
.h2, .hero__date, .chap__h, .night__day, .night__title,
.now__facts b, .now__sig, .story__sig, .tier__price, .reach b,
.lb__year, .drawer a, .ticker__row span{
  -webkit-text-stroke:.021em currentColor;
  paint-order:stroke fill;
}
.poster__yr{ -webkit-text-stroke:.02em currentColor; paint-order:stroke fill; }