/* =========================================================
   Night in Lanka
   Poster / editorial system. Zero radius, hairline rules,
   type as the main event.

   Palette is taken straight off the event logo: a Kandyan
   raksha mask rendered in neon. Hot pink leads, cyan answers
   it, violet and amber sit underneath. Everything on true
   night black, the same black the photos were shot against.
   ========================================================= */

:root{
  --bg:        #08080A;
  --bg-2:      #0D0D10;
  --bg-3:      #141418;
  --fg:        #F5F2F7;
  --fg-dim:    #918C9C;
  --fg-faint:  #565164;
  --border:    #23212B;
  --border-hi: #3A3648;

  --accent:    #FF2E88;   /* hot pink, primary interaction */
  --accent-d:  #D01A6B;
  --cyan:      #35DCEF;   /* the "in Lanka" script */
  --violet:    #8B4BF0;
  --amber:     #FFB020;   /* mask detail */
  --hot:       #FF3B5C;   /* errors, sold out */
  --ok:        #12B886;

  --ink:       #08080A;

  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-si:      'Noto Sans Sinhala', var(--f-body);
  --f-ta:      'Noto Sans Tamil', var(--f-body);

  --pad:       clamp(20px, 5vw, 72px);
  --gap:       clamp(32px, 5vw, 64px);
  --sec:       clamp(60px, 7.5vw, 104px);

  --t:         200ms cubic-bezier(.2,.6,.3,1);
  --max:       1440px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  /* clip, not hidden: `hidden` here (or on body) turns the element into a
     scroll container and breaks window.scrollTo plus in page anchors. */
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:-.03em; line-height:1.02; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }

::selection{ background:var(--accent); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.mono{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--accent); color:var(--ink);
  padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:900;
  opacity:.035; mix-blend-mode:overlay;
}

/* =========================================================
   Masthead
   ========================================================= */
.masthead{
  position:sticky; top:0; z-index:500;
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:border-color var(--t);
}
.masthead.is-stuck{ border-bottom-color:var(--border-hi); }

.masthead__inner{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--pad);
  height:72px;
  display:flex; align-items:center; gap:32px;
}

.wordmark{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; flex-shrink:0;
}
.wordmark img{
  width:auto; height:38px;
  filter:drop-shadow(0 0 12px rgba(255,46,136,.45));
}
.wordmark__text{
  font-family:var(--f-display); font-weight:700;
  font-size:13px; line-height:.98; letter-spacing:-.02em;
  text-transform:uppercase;
}

.nav{
  display:flex; gap:28px; margin-left:auto;
  font-size:14px; font-weight:500;
}
.nav a{
  text-decoration:none; color:var(--fg-dim);
  padding:6px 0; position:relative;
  transition:color var(--t);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.nav a:hover{ color:var(--fg); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--fg); }
.nav a.is-active::after{ transform:scaleX(1); }

.masthead__cta{ margin-left:8px; }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--border-hi);
  cursor:pointer; color:var(--fg);
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.burger span{
  display:block; width:17px; height:1.5px; background:currentColor;
  transition:transform var(--t), opacity var(--t);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column;
  border-top:1px solid var(--border);
}
.mobile-nav a{
  display:flex; align-items:baseline; gap:14px;
  padding:16px var(--pad);
  border-bottom:1px solid var(--border);
  text-decoration:none;
  font-family:var(--f-display); font-weight:600;
  font-size:19px; letter-spacing:-.02em;
}
.mobile-nav a span{ color:var(--accent); }
.mobile-nav__buy{
  background:var(--accent); color:var(--ink);
  justify-content:center; border-bottom:none;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 22px;
  font-family:var(--f-body); font-size:14px; font-weight:600;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:0;
  transition:background var(--t), color var(--t), border-color var(--t);
  white-space:nowrap;
}
.btn--accent{ background:var(--accent); color:var(--ink); }
.btn--accent:hover{ background:var(--fg); }
.btn--ghost{ background:none; color:var(--fg); border-color:var(--border-hi); }
.btn--ghost:hover{ border-color:var(--fg); background:var(--bg-3); }
.btn--block{ width:100%; }
.btn--sm{ min-height:40px; padding:0 16px; font-size:13px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
  text-decoration:none; color:var(--accent);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color var(--t), color var(--t);
}
.link:hover{ border-bottom-color:var(--accent); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  max-width:var(--max); margin:0 auto;
  padding:clamp(30px,4vw,56px) var(--pad) clamp(30px,4vw,48px);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  grid-template-areas:
    "meta   frame"
    "title  frame"
    "body   frame";
  column-gap:var(--gap); row-gap:clamp(20px,3vw,32px);
  /* stretch, not start: the right column spans all three rows, so
     stretching makes the photo and clock begin and end exactly level
     with the greeting line and the buttons on the left. */
  align-items:stretch;
}
.hero__meta{ grid-area:meta; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; }
.hero__title{ grid-area:title; }
.hero__body{ grid-area:body; max-width:52ch; }
.hero__side{
  grid-area:frame;
  display:flex; flex-direction:column;
  min-height:0;
}
/* The photo takes whatever height is left after the clock, so the
   column ends level with the buttons opposite. */
.hero__frame{ margin:0; flex:1 1 auto; min-height:320px; }
.hero__frame img{
  width:100%; height:100%;
  max-height:none;
  object-fit:cover; object-position:50% 28%;
}
.hero__side .cd{ flex:0 0 auto; }

.greeting{
  display:inline-flex; align-items:center; gap:14px;
  margin:0; font-size:19px; color:var(--fg);
}
.greeting .si{ font-family:var(--f-si); }
.greeting .ta{ font-family:var(--f-ta); }
.greeting .rule{ width:26px; height:1px; background:var(--border-hi); }
.greeting--sm{ font-size:16px; }

.hero__status{ display:inline-flex; align-items:center; gap:9px; margin:0; }
.dot{
  width:7px; height:7px; background:var(--accent);
  display:inline-block; flex-shrink:0;
}
@media (prefers-reduced-motion:no-preference){
  .dot{ animation:blip 2.4s ease-in-out infinite; }
}
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.25} }

.hero__title{
  font-size:clamp(56px, 10.4vw, 142px);
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.hero__title .line{ display:block; }
.hero__title .line--year{
  color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  padding-left:.03em;
  filter:drop-shadow(0 0 18px rgba(255,46,136,.45));
}

.lede{
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.45; font-weight:500;
  letter-spacing:-.012em;
}
.hero__note{ color:var(--fg-dim); font-size:16px; max-width:48ch; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.hero__frame figcaption{ margin-top:12px; }

/* =========================================================
   Photographs
   The night is shot almost entirely in neon against black,
   so images need no treatment beyond a hairline and a little
   lift on hover. A pink wash on hover ties them to the logo.
   ========================================================= */
.ph{
  position:relative; margin:0;
  border:1px solid var(--border);
  overflow:hidden;
  background:var(--bg-2);
}
.ph img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 600ms cubic-bezier(.2,.6,.3,1), filter var(--t);
}
.ph::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(255,46,136,.18), transparent 55%, rgba(53,220,239,.14));
  opacity:0; transition:opacity var(--t);
}
@media (prefers-reduced-motion:no-preference){
  .ph:hover img{ transform:scale(1.035); }
}
.ph:hover::after{ opacity:1; }
.ph figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 14px 11px;
  background:linear-gradient(to top, rgba(8,8,10,.92), transparent);
  color:var(--fg);
}

/* full bleed harbour band */
.band{
  position:relative;
  border-block:1px solid var(--border);
  overflow:hidden;
}
.band img{ width:100%; height:auto; display:block; }
.band__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px var(--pad) 16px;
  background:linear-gradient(to top, rgba(8,8,10,.9), transparent);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.band__cap p{ margin:0; }

/* hero logo lockup */
.hero__logo{
  display:block; width:min(310px, 62%); height:auto;
  margin:0 0 6px;
  filter:drop-shadow(0 0 34px rgba(255,46,136,.34));
}

/* photobooth call out */
.booth{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:24px; align-items:center;
  margin-top:26px; padding:22px 24px;
  border:1px solid var(--border-hi);
  background:
    linear-gradient(120deg, rgba(255,46,136,.10), rgba(53,220,239,.08));
}
.booth h3{ font-size:clamp(19px,2.2vw,25px); letter-spacing:-.028em; margin-bottom:7px; }
.booth p{ color:var(--fg-dim); font-size:15px; max-width:56ch; }

.credit{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline;
}

/* =========================================================
   Image slots (placeholders, only used where no photo yet)
   ========================================================= */
.slot{
  position:relative;
  display:grid; place-content:center; gap:8px;
  text-align:center;
  background:
    repeating-linear-gradient(135deg,
      var(--bg-2) 0 12px, var(--bg-3) 12px 24px);
  border:1px solid var(--border);
  aspect-ratio:4/5;
  padding:20px;
  overflow:hidden;
}
.slot--hero{ aspect-ratio:5/6; }
.slot__label{ color:var(--fg-faint); }
.slot__hint{
  font-size:13px; color:var(--fg-faint);
  max-width:22ch; margin:0 auto;
}
.slot figcaption{ position:absolute; left:14px; bottom:12px; }

/* =========================================================
   Ticker
   ========================================================= */
.ticker{
  border-block:1px solid var(--border);
  background:var(--bg-2);
  overflow:hidden; padding:13px 0;
}
.ticker__track{
  display:flex; align-items:center; gap:26px;
  width:max-content;
  font-family:var(--f-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim);
}
@media (prefers-reduced-motion:no-preference){
  .ticker__track{ animation:slide 34s linear infinite; }
}
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.ticker .sep{ color:var(--accent); }
.ticker .sep:nth-of-type(even){ color:var(--cyan); }

/* =========================================================
   Section shell
   ========================================================= */
.section{
  max-width:var(--max); margin:0 auto;
  padding:var(--sec) var(--pad);
}
.section--bordered{ border-top:1px solid var(--border); }

.section__head{ margin-bottom:clamp(30px,3.6vw,48px); max-width:74ch; }
.kicker{ display:flex; align-items:center; gap:10px; margin:0 0 18px; }
.kicker .num{ color:var(--accent); }
.section__title{
  font-size:clamp(31px,5.2vw,62px);
  letter-spacing:-.035em;
}
.section__sub{
  margin-top:18px; color:var(--fg-dim);
  font-size:17px; max-width:56ch;
}

/* =========================================================
   Editorial block
   ========================================================= */
.editorial{
  display:grid;
  /* Cap the aside rather than letting it take a share of the width.
     As a fraction it grew to ~600px on desktop, which stretched the
     spec rows until label and value stopped reading as a pair. */
  grid-template-columns:minmax(0,1fr) minmax(0,352px);
  gap:var(--gap);
  /* stretch, not start: the aside fills the row so its last rule can
     be pinned to the bottom, level with the last line of body copy. */
  align-items:stretch;
  justify-content:space-between;
}
.editorial__main{ min-width:0; }
.editorial__main .section__title{ margin-bottom:clamp(24px,3vw,38px); }
.editorial__col{ font-size:18px; max-width:62ch; }
/* Nudge down so the pink rule lines up with the cap height of the "A",
   not the heading's box top. The gap is the font's ascender sitting
   above the capitals, which grid alignment cannot know about.
   Measured: cap top sits 9.7px below the box at a 62px heading. The
   columns only align above 1080px, where the heading ranges 56 to
   62px, so a fixed value is within a pixel across that whole range. */
/* Both edges are optically aligned, not box aligned.
   Top:    the rule meets the cap height of the "A", which sits 10px
           below the heading's box top at 62px.
   Bottom: the last rule meets the final baseline, which sits 8px
           above the paragraph's box bottom once descender and
           half-leading are accounted for.
   Measured from font metrics rather than guessed. */
.editorial__side{
  padding-top:10px;
  padding-bottom:8px;
  /* Quote at the top, spec table pushed to the bottom, so the column
     opens and closes level with the text beside it. */
  display:flex; flex-direction:column;
}
.editorial__side .spec{ margin-top:auto; }
.editorial__col .drop::first-letter{
  float:left; font-family:var(--f-display); font-weight:700;
  font-size:4.1em; line-height:.78;
  padding:.06em .14em 0 0; color:var(--accent);
}

.pullquote{
  margin:0 0 34px; padding:26px 0 0;
  border-top:2px solid var(--accent);
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(20px,2.3vw,26px); line-height:1.28;
  letter-spacing:-.025em;
}
.pullquote cite{
  display:block; margin-top:16px; font-style:normal;
}

.spec{ border-top:1px solid var(--border-hi); }
.spec li{
  display:grid; grid-template-columns:1fr auto; gap:16px;
  align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--border);
  font-size:15px; font-weight:500;
}
.spec li > .mono{ margin:0; }
.spec li > span:last-child{ text-align:right; color:var(--fg); }

/* =========================================================
   Status board
   ========================================================= */
.board{ border-top:1px solid var(--border-hi); }
.board__row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--border);
}
.board__key{ color:var(--fg-faint); }
.board__val{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(19px,2.4vw,27px); letter-spacing:-.025em;
}
.board__row[data-state="pending"] .board__val{ color:var(--fg-dim); }
.board__row[data-state="confirmed"] .board__val{ color:var(--accent); }
.board__tag{ color:var(--fg-faint); white-space:nowrap; }

/* =========================================================
   Countdown, sits directly under the hero photo
   ========================================================= */
.cd{
  margin-top:14px;
  padding:18px 20px 20px;
  border:1px solid var(--border-hi);
  background:
    radial-gradient(130% 200% at 8% 0%, rgba(255,46,136,.14), transparent 62%),
    radial-gradient(120% 180% at 92% 100%, rgba(53,220,239,.11), transparent 64%),
    var(--bg-2);
}
.cd .kicker{ margin:0 0 12px; }

.cd__clock{
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:4px;
}
.cd__clock li{ text-align:center; }
.cd__clock b{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(30px,3.1vw,42px); line-height:.92;
  letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  text-shadow:0 0 22px rgba(255,46,136,.42);
}
.cd__clock span{ display:block; margin-top:7px; font-size:10px; color:var(--fg-faint); }
.cd__sep{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(22px,2.4vw,32px); line-height:.92;
  color:var(--border-hi);
}
.cd__when{
  margin:16px 0 0; padding-top:14px;
  border-top:1px solid var(--border);
  font-size:14px; font-weight:500; color:var(--fg-dim);
}
.cd__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

.cd.is-tonight .cd__clock{ display:none; }
.cd.is-tonight .cd__when{ color:var(--accent); border-top:none; padding-top:0; margin-top:0; }

.warning{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:44px; padding:22px;
  border:1px solid var(--border-hi);
  border-left:3px solid var(--hot);
  background:var(--bg-2);
}
.warning svg{ width:22px; height:22px; color:var(--hot); flex-shrink:0; margin-top:2px; }
.warning p{ font-size:16px; color:var(--fg-dim); }
.warning b{ color:var(--fg); }

/* =========================================================
   Buy tickets, under the status board
   ========================================================= */
.board__cta{ margin-top:30px; }

/* =========================================================
   Edition stubs
   ========================================================= */
.stubs{ border-top:1px solid var(--border-hi); }
.stub{
  position:relative;
  display:grid;
  grid-template-columns:130px minmax(0,1fr) 130px;
  gap:clamp(20px,3vw,44px);
  padding:32px 0;
  border-bottom:1px solid var(--border);
  transition:background var(--t);
}
.stub:hover{ background:var(--bg-2); }
.stub__year{
  font-size:15px; font-weight:500; color:var(--accent);
  letter-spacing:.1em; padding-top:4px;
}
.stub__body h3{
  font-size:clamp(20px,2.4vw,29px); margin-bottom:11px; letter-spacing:-.03em;
}
.stub__body p{ color:var(--fg-dim); font-size:16px; max-width:62ch; }
.stub__meta{
  display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:16px;
}
.stub__meta li{ display:flex; gap:8px; align-items:baseline; }
.stub__meta b{
  color:var(--fg); font-family:var(--f-body);
  font-size:13px; font-weight:600; letter-spacing:0; text-transform:none;
}
.stub__tab{
  display:flex; align-items:flex-start; justify-content:flex-end; padding-top:4px;
}
.stub__tab span{
  border:1px solid var(--border-hi); padding:5px 9px;
  color:var(--fg-dim); white-space:nowrap; font-size:10px;
}
.stub[data-year="2025"] .stub__tab span{ border-color:var(--hot); color:var(--hot); }
.stub[data-year="2026"] .stub__tab span{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.stub--origin .stub__tab span{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   Societies
   ========================================================= */
/* Six tracks, each card two wide. Three across the top, and the last
   two offset by one track so the short row sits centred under the
   long one rather than hanging off the left edge. */
.socs{
  display:grid; grid-template-columns:repeat(6,1fr);
}
.soc{
  grid-column:span 2;
  padding:28px 26px 26px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:11px;
  transition:background var(--t);
}
/* Edges are drawn per cell rather than on the container, because the
   offset second row no longer lines up with the container's sides. */
.soc:nth-child(-n+3){ border-top:1px solid var(--border); }
.soc:nth-child(1),
.soc:nth-child(4){ border-left:1px solid var(--border); }
.soc:nth-child(4){ grid-column:2 / span 2; }
.soc:nth-child(5){ grid-column:4 / span 2; }
.soc:hover{ background:var(--bg-2); }
.soc__uni{ color:var(--accent); margin:0; }
.soc h3{ font-size:20px; letter-spacing:-.025em; line-height:1.15; }
.soc__note{ color:var(--fg-dim); font-size:15px; flex:1; }

/* =========================================================
   Gallery
   ========================================================= */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
  gap:12px;
}
.gallery .ph{ grid-column:span 1; grid-row:span 2; }
.gallery .ph--tall{ grid-row:span 2; }
.gallery .ph--wide{ grid-column:span 2; }
.gallery .ph--big{ grid-column:span 2; grid-row:span 2; }
.gallery .slot{ aspect-ratio:1; margin:0; }
.slot--tall{ grid-row:span 2; aspect-ratio:auto !important; }
.slot--wide{ grid-column:span 2; aspect-ratio:2/1 !important; }

/* =========================================================
   Sponsors
   ========================================================= */
.sponsor{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:var(--gap); align-items:start;
}
.sponsor__pitch p{ max-width:60ch; }
.sponsor__pitch .lede{ margin-bottom:1em; }
.sponsor__pitch > p:not(.lede){ color:var(--fg-dim); font-size:17px; }
.sponsor__mail{ margin-top:12px; color:var(--fg-faint); text-transform:none; letter-spacing:.04em; }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border);
  margin:34px 0;
}
.stats > div{ background:var(--bg); padding:18px 16px; }
.stats dt{ margin-bottom:7px; }
.stats dd{
  margin:0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(22px,2.7vw,30px); letter-spacing:-.03em;
}

.sponsor__note{ margin-top:20px; color:var(--fg-faint); text-transform:none; letter-spacing:.04em; }

.sponsor__past{
  border:1px solid var(--border); padding:24px;
  background:var(--bg-2);
}

/* ---------- tiers ---------- */
.tiers__head{
  margin:clamp(44px,5vw,68px) 0 22px;
  font-size:clamp(23px,2.8vw,34px); letter-spacing:-.032em;
}
.tiers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border);
}
.tier{
  background:var(--bg); padding:24px 22px 26px;
  display:flex; flex-direction:column; gap:5px;
  transition:background var(--t);
}
.tier:hover{ background:var(--bg-2); }
.tier__name{ margin:0; color:var(--fg-dim); }
.tier--diamond .tier__name{ color:var(--accent); }
.tier--platinum .tier__name{ color:var(--cyan); }
.tier--gold .tier__name{ color:var(--amber); }
.tier__price{
  margin:0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(28px,3.2vw,38px); letter-spacing:-.04em;
}
.tier__slots{ margin:0 0 14px; color:var(--fg-faint); }
.tier__list{
  display:flex; flex-direction:column; gap:9px;
  border-top:1px solid var(--border); padding-top:15px;
}
.tier__list li{
  font-size:14px; line-height:1.5; color:var(--fg-dim);
  padding-left:15px; position:relative;
}
.tier__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; background:var(--border-hi);
}
.tier--diamond .tier__list li::before{ background:var(--accent); }
.tier--platinum .tier__list li::before{ background:var(--cyan); }
.tier--gold .tier__list li::before{ background:var(--amber); }

.booth--sponsor{ margin-top:26px; }
.booth--sponsor .credit{ margin-top:14px; }
.booth--sponsor .credit span:last-child{ font-size:14px; color:var(--fg-dim); }
.past{ margin-top:18px; }
.past li{
  display:flex; flex-direction:column; gap:3px;
  padding:13px 0; border-bottom:1px solid var(--border);
}
.past li:last-child{ border-bottom:none; padding-bottom:0; }
.past b{ font-size:16px; font-weight:600; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--border-hi); max-width:860px; }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:22px 44px 22px 0; position:relative;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(17px,1.9vw,21px); letter-spacing:-.02em;
  transition:color var(--t);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:12px; height:12px; margin-top:-6px;
  border-right:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--t);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.faq details p{
  padding:0 44px 24px 0; color:var(--fg-dim); font-size:16px; max-width:64ch;
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  border-top:1px solid var(--border);
  background:var(--bg-2);
}
.footer__grid{
  max-width:var(--max); margin:0 auto;
  padding:clamp(48px,7vw,88px) var(--pad) clamp(32px,4vw,48px);
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.7fr);
  gap:var(--gap);
}
.footer__blurb{
  margin-top:18px; color:var(--fg-dim); font-size:15px; max-width:44ch;
}
.footer__links{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.footer__links a{
  text-decoration:none; font-size:15px; color:var(--fg-dim);
  transition:color var(--t);
}
.footer__links a:hover{ color:var(--accent); }

.footer__base{
  max-width:var(--max); margin:0 auto;
  padding:20px var(--pad) 108px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer__base p{ margin:0; }

/* =========================================================
   Sticky bar
   ========================================================= */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px var(--pad);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,8,10,.95);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border-hi);
  transform:translateY(110%);
  transition:transform var(--t);
}
.stickybar.is-on{ transform:translateY(0); }
.stickybar__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.stickybar__txt b{ font-size:14px; font-weight:600; }
.stickybar__txt span{ font-size:10px; }

/* =========================================================
   Reveal
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(12px); }
  .reveal.is-in{
    opacity:1; transform:none;
    transition:opacity 380ms ease-out, transform 380ms cubic-bezier(.2,.6,.3,1);
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:"meta" "title" "body" "frame";
  }
  .hero__frame{ max-width:520px; }
  .slot--hero{ aspect-ratio:16/10; }
  .editorial,
  .sponsor{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav, .masthead__cta{ display:none; }
  .burger{ display:flex; }
  .mobile-nav{ display:none; }
  .mobile-nav.is-open{ display:flex; }
  html{ scroll-padding-top:80px; }

  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .slot--wide{ grid-column:span 2; }
  .slot--tall{ grid-row:span 1; aspect-ratio:1 !important; }

  .stats{ grid-template-columns:repeat(2,1fr); }
  .booth{ grid-template-columns:1fr; }

  /* Two across, last one full width. The centred offset needs three
     cards above it to centre against, so it goes when the top row does. */
  .socs{ grid-template-columns:repeat(2,1fr); }
  .soc{ grid-column:auto; }
  .soc:nth-child(4){ grid-column:auto; border-left:0; }
  .soc:nth-child(5){ grid-column:1 / -1; }
  .soc:nth-child(3){ border-top:0; }
  .soc:nth-child(3),
  .soc:nth-child(5){ border-left:1px solid var(--border); }
}

@media (max-width:620px){
  /* Most of this audience arrives from an Instagram story on a phone,
     so the small screen is the real design target, not the fallback. */
  body{ font-size:16px; }

  /* Tighter rhythm. At desktop spacing the page ran past 17,000px,
     which is a lot of thumb for one event page. */
  :root{
    --sec:  clamp(48px, 11vw, 64px);
    --gap:  28px;
  }
  .section__head{ margin-bottom:26px; }
  .section__sub{ margin-top:14px; font-size:16px; }

  /* 11px mono with wide tracking is legible on a laptop and not on a
     phone held at arm's length. Bigger, and tracked slightly tighter. */
  .mono{ font-size:12px; letter-spacing:.11em; }
  .fineprint, .sponsor__note, .sponsor__mail{ font-size:12.5px; }
  .tkt__foot .mono{ font-size:11px; }

  .hero{ padding-top:22px; }
  .hero__title{ font-size:clamp(46px,15.5vw,88px); }
  .hero__title .line--year{ -webkit-text-stroke-width:1.2px; }
  /* Predictable frame once the grid is a single column. The desktop
     rule lets the photo flex to match the text column, which has no
     meaning when they are stacked. */
  .hero__frame{ flex:0 0 auto; min-height:0; }
  .hero__frame img{ aspect-ratio:4/5; height:auto; max-height:58vh; }
  .hero__actions{ margin-top:20px; }
  .hero__actions .btn{ flex:1 1 auto; }

  /* Countdown above the photo once stacked. On a phone the date and
     the clock are the persuasive bit, and burying them under a
     500px image puts them two thumb flicks from the CTA. */
  .hero__side{ display:flex; flex-direction:column; }
  .hero__side .cd{ order:-1; margin-top:0; margin-bottom:14px; }

  .cd__clock b{ font-size:clamp(30px,8.6vw,40px); }

  .board__row{
    grid-template-columns:1fr;
    gap:5px; padding:17px 0;
  }
  .board__tag{ white-space:normal; }

  .stub{
    grid-template-columns:1fr;
    gap:10px; padding:22px 0;
  }
  .stub__tab{ justify-content:flex-start; order:-1; padding-top:0; }
  .stub__year{ padding-top:0; }
  .stub__body p{ font-size:15.5px; }

  .editorial__col{ font-size:17px; }
  .editorial__col .drop::first-letter{ font-size:3.4em; }

  .socs{ grid-template-columns:1fr; }
  .socs .soc{ padding:22px 20px; border-left:1px solid var(--border); }
  .socs .soc:nth-child(-n+3){ border-top:0; }
  .socs .soc:first-child{ border-top:1px solid var(--border); }
  .tier{ padding:20px 18px 22px; }
  .faq summary{ padding:18px 40px 18px 0; }
  .faq details p{ padding-bottom:20px; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__base{ padding-bottom:104px; }

  .warning{ padding:16px; }
  .sponsor__past{ padding:20px; }
  .booth{ padding:20px; }
}

@media (max-width:420px){
  .gallery{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .gallery .ph--wide, .gallery .ph--big{ grid-column:span 1; }
  .gallery .ph--big{ grid-row:span 1; }
  .slot--wide{ grid-column:span 1; }
  .stats{ grid-template-columns:1fr; }
  .cd__inner, .cd{ padding-left:16px; padding-right:16px; }
}

a, button, summary, label, select, input{ touch-action:manipulation; }

/* =========================================================
   Touch targets
   Anything tappable needs 44px. Several links were sitting at
   18 to 23px, which is fine with a mouse and a coin flip with
   a thumb. Keyed to width rather than `pointer:coarse` so it
   also covers a narrow desktop window, and so it is testable.
   ========================================================= */
@media (max-width:860px){
  .link{
    padding-top:11px; padding-bottom:11px;
    min-height:44px; box-sizing:border-box;
  }
  .footer__links{ gap:0; }
  .footer__links a{
    display:flex; align-items:center;
    min-height:44px;
  }
  .faq summary{ min-height:56px; }
  .mobile-nav a{ min-height:56px; align-items:center; }
  .wordmark{ padding:6px 4px 6px 0; }
  .credit .link{ min-height:44px; }
  .past li{ padding-top:14px; padding-bottom:14px; }
  .stickybar .btn--sm{ min-height:44px; padding:0 18px; }
}

/* =========================================================
   Horizontal rails on phones

   The gallery and the sponsor tiers are the two longest
   stacks on the page. Stacked vertically they added roughly
   2,500px of scrolling between the reader and the next
   section. As snap rails they are shorter, quicker to skim,
   and photos in particular read better side by side.

   Both are self contained blocks with a visible peek of the
   next card, so the horizontal gesture is discoverable and
   never competes with the page scroll.
   ========================================================= */
/* Base state first. Declared after the media query it would win the
   cascade and the hint would never show. */
.rail-hint{ display:none; }

@media (max-width:860px){
  .gallery,
  .tiers{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed to the screen edge so the rail reads as scrollable */
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    scroll-padding-inline:var(--pad);
  }
  .gallery::-webkit-scrollbar,
  .tiers::-webkit-scrollbar{ display:none; }

  /* One card size for the whole rail. Flex stretches every item to the
     tallest anyway, so the desktop mosaic spans would only produce
     inconsistent crops here. */
  .gallery{ gap:10px; grid-auto-rows:auto; align-items:stretch; }
  .gallery .ph{
    flex:0 0 78%;
    scroll-snap-align:start;
    aspect-ratio:4/5;
    grid-column:auto; grid-row:auto;
  }

  .tiers{
    gap:1px; border:none; background:none;
    padding-block:1px;
  }
  .tier{
    flex:0 0 74%;
    scroll-snap-align:start;
    border:1px solid var(--border);
  }

  /* Tell people the rail moves, without adding a widget. */
  .rail-hint{
    display:flex; align-items:center; gap:8px;
    margin-top:14px;
  }
  .rail-hint::after{
    content:''; flex:1 1 auto; height:1px; background:var(--border);
  }
}