/* ============================================================
   PAGE — home  (index.html)
   ============================================================ */

/* ---------- HERO (light & open) ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--hero-bg);color:var(--c-ink-soft);
  padding-block:clamp(5rem,10vw,8rem) clamp(3.5rem,7vw,6rem);
  min-height:min(74vh,700px);display:flex;align-items:center;
}
@media (max-height:640px){ .hero{min-height:0} }

/* festival bunting across the top — the one flourish */
.hero__bunting{
  position:absolute;top:0;left:0;right:0;height:44px;pointer-events:none;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='44'%3E%3Cpath d='M0 4 H126' stroke='rgba(120,100,105,.4)' stroke-width='2'/%3E%3Cpolygon points='4,5 30,5 17,38' fill='%23D9703C'/%3E%3Cpolygon points='34,5 60,5 47,38' fill='%23D6335A'/%3E%3Cpolygon points='64,5 90,5 77,38' fill='%239B2F4A'/%3E%3Cpolygon points='94,5 120,5 107,38' fill='%23C2213A'/%3E%3C/svg%3E") repeat-x;
  background-size:126px 44px;
}
/* the bunting reads as carnival pennants — doesn't fit the theme at
   all, so Doomsday gets its own top-edge motif instead: a jagged
   glowing fracture line, echoing the cracked-window backdrop below
   rather than trying to reuse the festival-flag shape. */
[data-year-theme="doomsday"] .hero__bunting{
  height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='20'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 10 L20 9 L35 12 L55 8 L75 11 L95 7 L115 10 L135 6 L155 11 L175 8 L195 12 L215 7 L235 10 L255 8 L275 11 L300 9' fill='none' stroke='%232FA872' stroke-width='3' stroke-opacity='0.55' filter='url(%23b)'/%3E%3Cpath d='M0 10 L20 9 L35 12 L55 8 L75 11 L95 7 L115 10 L135 6 L155 11 L175 8 L195 12 L215 7 L235 10 L255 8 L275 11 L300 9' fill='none' stroke='%23C9962E' stroke-width='1' stroke-opacity='0.9'/%3E%3C/svg%3E") repeat-x;
  background-size:300px 20px;
}
/* the gentle "flags swaying" bob doesn't suit a crack line — a faint
   power-flicker reads better with the rest of this theme's "signal"
   language (see the countdown's own flash/pulse) */
[data-year-theme="doomsday"] .anim-bob{animation:doomsday-bunting-flicker 3.4s ease-in-out infinite}
@keyframes doomsday-bunting-flicker{
  0%,88%,100%{opacity:1}
  90%{opacity:.55}
  92%{opacity:1}
  94%{opacity:.7}
  96%{opacity:1}
}

/* ---- Doomsday hero — a dark cinematic scene regardless of the site's
   own light/dark toggle (the mood calls for it): a deep vignette,
   crossing light shafts, and a film-grain texture over the top —
   the same recipe most moody poster-key-art uses, rather than literal
   line-art shapes (an earlier pass tried a drawn window/logo watermark
   here and it read as a flat sticker/wireframe, not atmosphere). ---- */
[data-year-theme="doomsday"] .hero{
  background:
    radial-gradient(60% 70% at 74% 18%, color-mix(in srgb,var(--c-primary) 30%,transparent), transparent 60%),
    linear-gradient(118deg, transparent 32%, color-mix(in srgb,var(--c-gold) 16%,transparent) 46%, transparent 60%),
    linear-gradient(72deg, transparent 58%, color-mix(in srgb,var(--c-primary) 20%,transparent) 68%, transparent 80%),
    radial-gradient(90% 60% at 50% 100%, rgba(0,0,0,.65), transparent 65%),
    radial-gradient(120% 95% at 50% 0%, #101a15 0%, #070c08 55%, #020403 100%);
  color:var(--c-on-dark-soft);
}
[data-year-theme="doomsday"] .hero h1,
[data-year-theme="doomsday"] .hero h2{color:var(--c-on-dark)}
[data-year-theme="doomsday"] .hero .eyebrow,
[data-year-theme="doomsday"] .hero__tag,
[data-year-theme="doomsday"] .hero__org{color:var(--c-on-dark-soft)}
/* --c-primary-ink is the light-theme (dark emerald) value by default —
   fine on a light surface, but this hero is always dark, and anything
   built on that token (the ghost "Lucky Draw tickets" button's text +
   border, via .btn--pill-ghost) went dark-on-dark and nearly vanished.
   Bumping it to the brighter dark-mode value inside .hero fixes every
   such component at once, not just this one button. */
[data-year-theme="doomsday"] .hero{--c-primary-ink:#4FD98C}
/* scoped to .hero specifically (not .hero__org alone) — that class is
   reused for every subpage's pagehead lockup too (see chrome.js), and
   those follow the normal light/dark toggle same as everywhere else;
   only this always-dark hero needs the logo permanently inverted */
[data-year-theme="doomsday"] .hero .hero__org img{filter:invert(1) brightness(1.6)}
/* film grain — an SVG turbulence filter tiled and blended over the
   gradient, the thing that stops a big flat gradient looking "digital" */
[data-year-theme="doomsday"] .hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:overlay;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.hero__photo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.1;filter:saturate(.9)}
.hero__fx{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.92}
@media (prefers-reduced-motion:reduce){ .hero__fx{opacity:.7} }

/* the hype-reel link is a keepsake of this year's theme (reel.html
   is hand-themed to 2026, not re-skinned from tokens.css), so it
   only appears while the year theme it documents is active */
.hero__reel-link{display:none}
[data-year-theme="doomsday"] .hero__reel-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--c-on-dark-soft);text-decoration:none;
  padding:.5rem .95rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-primary) 35%,transparent);
  transition:color var(--dur-2),border-color var(--dur-2),background var(--dur-2);
}
[data-year-theme="doomsday"] .hero__reel-link:hover{
  color:var(--c-primary-ink);border-color:var(--c-primary-ink);
  background:color-mix(in srgb,var(--c-primary) 10%,transparent);
}
[data-year-theme="doomsday"] .hero__reel-link svg{flex:none;color:var(--c-primary-ink)}

.hero__org{
  display:flex;width:fit-content;align-items:center;gap:.85rem;margin-bottom:1.8rem;
  text-decoration:none;color:var(--c-ink-soft);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.55;
}
.hero__org img{display:block;height:44px;width:auto;flex:none}
.hero__org span{padding-left:.85rem;border-left:1px solid var(--c-line)}
:root:not([data-theme="light"]) .hero__org img,
:root[data-theme="dark"] .hero__org img{filter:invert(1) brightness(1.6)}
.hero__org:hover{color:var(--c-primary-ink)}
.hero h1,.hero h2{color:var(--c-ink)}
.hero__title{font-size:var(--fs-3xl);font-weight:var(--weight-bold);letter-spacing:var(--track-display);margin-top:.5rem}
.hero__year{
  background:var(--accent-text);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__tag{font-size:var(--fs-md);color:var(--c-ink-soft);max-width:42ch;margin-top:1.2rem;line-height:1.4}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.hero .countdown{margin-top:2.4rem}
.hero .wrap{position:relative;z-index:2}

@media (prefers-reduced-motion:no-preference){
  .hero__year{animation:gradient-pan 9s linear infinite alternate}
}

/* ---------- generic tile intro block ---------- */
.tile__intro{max-width:44ch}
.tile__intro .lead{margin-top:.4rem}

/* ---------- WHAT'S ON / INVOLVE ---------- */
.card-grid{--col:230px;margin-top:2.4rem}

/* ---------- THE CAUSE ---------- */
.pillars{--col:230px;margin-top:2.2rem}
.pillar{
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  padding:var(--sp-5);background:rgba(255,255,255,.04);
  transition:transform var(--dur-3) var(--ease-out),
             border-color var(--dur-3) var(--ease-out),
             box-shadow var(--dur-3) var(--ease-out);
}
.pillar:hover{
  transform:translateY(-3px);
  border-color:rgba(217,112,60,.4);
  box-shadow:var(--shadow-lift-hover);
}
@media (prefers-reduced-motion:reduce){.pillar:hover{transform:none}}
.pillar__icon{width:34px;height:34px;color:var(--c-gold)}
.pillar h3{color:var(--c-on-dark);margin:.6rem 0 .3rem;font-size:1.08rem}
.pillar p{color:var(--c-on-dark-soft);font-size:var(--fs-sm)}
.pillar__stat{
  margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;
  color:var(--c-gold);font-weight:600;
}
/* a standing commitment, not a one-line footnote — gets its own
   highlighted band, not a muted caption under the pillar cards */
.cause-activities{
  margin-top:2rem;padding:1.4rem 1.6rem;border-radius:var(--r-lg);
  border-left:3px solid var(--c-gold);
  background:color-mix(in srgb, var(--c-gold) 10%, transparent);
}
.cause-activities__eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-gold);font-weight:600;
}
.cause-activities__note{
  margin-top:.5rem;font-size:var(--fs-base);color:var(--c-on-dark);line-height:1.5;max-width:64ch;
}

/* the headline figure — this is the number that makes the case, so it
   gets the same scale and treatment as the hero year, not a caption */
.impact-callout{text-align:center;max-width:640px;margin:0 auto 2.6rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.14)}
.impact-callout__eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-on-dark-soft);opacity:.75;
}
.impact-callout__figure{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:clamp(3rem,6vw,4.6rem);line-height:1;margin:.5rem 0 .9rem;
  color:var(--c-gold);font-variant-numeric:tabular-nums;
}
.impact-callout__note{
  font-size:var(--fs-md);color:var(--c-on-dark-soft);
  max-width:52ch;margin-inline:auto;line-height:1.5;
}

/* ---------- HOME — why band + explore cards ---------- */
.home-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.tile--c .home-cta .btn--ghost{color:var(--c-on-dark);border-color:rgba(255,255,255,.4)}

/* ---------- HOME — impact numbers ---------- */
.impact-strip{--col:210px;margin:2.2rem 0 2.4rem;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden}
.impact-strip .stat{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem 1.4rem;background:rgba(255,255,255,.03)}
.impact-strip .stat__num{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(2rem,4vw,2.7rem);line-height:1;color:var(--c-gold);font-variant-numeric:tabular-nums}
.impact-strip .stat__label{font-size:var(--fs-sm);color:var(--c-on-dark-soft);line-height:1.45}

.explore-grid{--col:215px;margin-top:2.4rem}   /* four cards: one row on desktop, 2x2 on tablets */
.card--link{
  display:flex;flex-direction:column;text-decoration:none;
  border-left:3px solid var(--accent,var(--c-primary));
}
.card--link:hover{transform:translateY(-3px)}
.card--rose{--accent:var(--c-rose)}
.card--gold{--accent:var(--c-gold)}
.card--teal{--accent:var(--c-teal)}
.card__go{
  margin-top:auto;padding-top:1rem;font-family:var(--font-mono);
  font-size:var(--fs-sm);color:var(--accent,var(--c-primary-ink));font-weight:var(--weight-semi);
}

/* ---------- BANNER REVEAL (dark inset card on a light tile) ---------- */
.reveal-card{
  margin-top:2rem;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-tile-void);color:var(--c-on-dark);
  padding:clamp(1.6rem,4vw,3rem);
}
.reveal-card--compact{margin-top:0}
.reveal-card--compact .eyebrow{color:var(--c-on-dark-soft)}
.reveal-card--compact .eyebrow::before{background:var(--c-gold)}
.reveal-card--compact h3{font-size:var(--fs-md);margin-top:.4rem}

.noscript-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--c-tile-dark);color:var(--c-on-dark);text-align:center;
  padding:.7rem 1rem;font-size:.8rem;
}
.noscript-nav a{color:var(--c-on-dark);text-decoration:underline}
.reveal-card h3{color:var(--c-on-dark);font-size:var(--fs-lg);margin:.5rem 0 .5rem}
.reveal-card h3 em{color:var(--c-gold);font-style:italic}
.reveal-card p{color:var(--c-on-dark-soft);max-width:52ch}
.reveal-card .progress{margin-top:1.5rem}
.reveal-card__cap{margin-top:.55rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--c-on-dark-soft);opacity:.75}

/* ---------- BANNER REVEAL — the community mosaic ---------- */
.mosaic{
  display:grid;grid-template-columns:repeat(var(--mx,14),1fr);
  gap:3px;margin-top:1.5rem;width:100%;max-width:400px;
}
.mosaic--live{cursor:pointer;border-radius:4px}
.mosaic--live:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px}
.mosaic__t{
  aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.05);
  opacity:0;transform:scale(.35);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),box-shadow .45s;
}
.mosaic__t.is-on{opacity:1;transform:none}
.mosaic__t.is-mark{background:var(--c-gold)}
.mosaic__t.is-on.is-mark{box-shadow:0 0 9px color-mix(in srgb,var(--c-gold) 45%,transparent)}
.mosaic--live:hover .mosaic__t:not(.is-on){opacity:.4;transform:none}
.is-complete .mosaic__t.is-mark{box-shadow:0 0 14px color-mix(in srgb,var(--c-gold) 60%,transparent)}
/* dormant: a faint static "V" holding the space until the feature day */
.mosaic--dormant{cursor:default;pointer-events:none}
.mosaic--dormant .mosaic__t.is-on{opacity:.2}
.mosaic--dormant .mosaic__t.is-on.is-mark{box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .mosaic__t{transition:none}
}

/* ---------- GALLERY (imagery gets the one shadow) ---------- */
.gallery{--col:210px;margin-top:2.2rem}
.gallery__item{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  background:var(--c-parchment);box-shadow:var(--shadow-image);
}
.gallery__item img{width:100%;height:100%;object-fit:cover}
.gallery__item--empty{
  display:grid;place-items:center;box-shadow:none;border:1px dashed var(--c-line);
  color:var(--c-ink-mute);font-family:var(--font-mono);font-size:.7rem;text-align:center;padding:1rem;
}

/* live Instagram (source: "widget" / "embed") */
.gallery--embed{display:block}
.gallery--embed iframe{width:100%!important;border:0;border-radius:var(--r-lg)}
.gallery--grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  justify-items:center;align-items:start;
}
.gallery--grid .ig-embed{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:400px}
.gallery--grid .instagram-media{
  margin:0 !important;min-width:0 !important;width:100% !important;max-width:none !important;
}
.ig-embed__year{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-ink-mute);
  display:inline-flex;align-items:center;gap:.5rem;
}
.ig-embed__year::before{content:"";width:16px;height:2px;background:var(--c-gold)}

/* ---------- REEL WALL (source: "reels") ---------- */
.reel-wall{
  display:grid;gap:16px;margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.reel-card{
  position:relative;display:block;padding:0;border:0;cursor:pointer;
  aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-surface) center/cover no-repeat;
  box-shadow:var(--shadow-image);
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.reel-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 46px -10px rgba(10,7,18,.5)}
.reel-card:focus-visible{outline:3px solid var(--c-gold);outline-offset:3px}

/* poster cards: dark gradient at the foot so the year reads */
.reel-card:not(.reel-card--noposter)::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,7,18,0) 45%,rgba(10,7,18,.72));
}
.reel-card:not(.reel-card--noposter) .reel-card__year{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:1.6rem;letter-spacing:var(--track-tight);color:#fff;
}

/* ---- designed cover (no image) ---- */
.reel-card--noposter{
  background:
    radial-gradient(120% 75% at 12% -5%, color-mix(in srgb,var(--accent) 60%,transparent), transparent 60%),
    radial-gradient(95% 60% at 92% 105%, color-mix(in srgb,var(--accent) 78%,var(--c-tile-void)), transparent 62%),
    linear-gradient(163deg, color-mix(in srgb,var(--accent) 82%,var(--c-tile-dark)), color-mix(in srgb,var(--accent) 26%,var(--c-tile-dark)));
}
.reel-card__scene{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.reel-card__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) .8px, transparent 1.1px);
  background-size:11px 11px;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 55%);
          mask-image:linear-gradient(160deg,#000,transparent 55%);
  opacity:.4;
}
.reel-card__meta{
  position:absolute;left:16px;right:16px;bottom:15px;z-index:2;
  display:flex;flex-direction:column;gap:.15rem;text-align:left;
}
.reel-card__kicker{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.reel-card--noposter .reel-card__year{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:clamp(1.8rem,7vw,2.4rem);line-height:.95;letter-spacing:-.03em;color:#fff;
}
.reel-card__mark{
  margin-top:.2rem;font-family:var(--font-display);font-weight:var(--weight-semi);
  font-size:.72rem;letter-spacing:.02em;color:rgba(255,255,255,.66);
}

/* play button — shared · glass */
.reel-card__play{
  position:absolute;top:44%;left:50%;z-index:3;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--glass-ink);
  transition:transform var(--dur-2) var(--ease-spring), background var(--dur-2);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .reel-card__play{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
}
.reel-card__play svg{margin-left:3px}
.reel-card__play::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
}
.reel-card:hover .reel-card__play{transform:translate(-50%,-50%) scale(1.12);background:rgba(255,255,255,.3)}

@media (prefers-reduced-motion:reduce){
  .reel-card:hover{transform:none}
  .reel-card:hover .reel-card__play{transform:translate(-50%,-50%)}
}

/* ---------- LIGHTBOX ---------- */
.lightbox[hidden]{display:none}
.lightbox{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.lightbox__backdrop{
  position:absolute;inset:0;background:rgba(9,6,16,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lightbox__dialog{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  animation:lb-in var(--dur-2) var(--ease-spring);
}
@keyframes lb-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lightbox__dialog{animation:none}}
.lightbox__year{
  margin:0;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--glass-ink,#fff);opacity:.85;
}
.lightbox__stage{display:flex;align-items:center;gap:.5rem}
.lightbox__nav{
  flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--glass-ink,#fff);
  display:grid;place-items:center;transition:background var(--dur-2),transform var(--dur-1);
}
.lightbox__nav:hover{background:var(--glass-bg-strong);transform:scale(1.06)}
.lightbox__nav:active{transform:var(--press)}
.lightbox__nav[hidden]{display:none}
.lightbox__frame{
  width:min(400px,84vw);height:min(78vh,660px);
  border-radius:var(--r-lg);overflow:hidden;background:#000;
}
.lightbox__strip{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;max-width:min(560px,92vw)}
.lightbox__strip[hidden]{display:none}
.lightbox__thumb{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;cursor:pointer;
  padding:.35rem .7rem;border-radius:var(--r-pill);
  border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--glass-ink,#fff);
  transition:background var(--dur-2),border-color var(--dur-2);
}
.lightbox__thumb:hover{background:var(--glass-bg-strong)}
.lightbox__thumb.is-current{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:600}
@media (max-width:560px){
  .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
  .lightbox__nav--prev{left:-6px}
  .lightbox__nav--next{right:-6px}
  .lightbox__nav:hover{transform:translateY(-50%) scale(1.06)}
}
.lightbox__frame iframe,
.lightbox__frame video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
.lightbox__close{
  position:absolute;top:-46px;right:0;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--glass-ink);
  display:grid;place-items:center;transition:background var(--dur-2);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lightbox__close{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
}
.lightbox__close:hover{background:var(--glass-bg-strong)}
@media (max-width:480px){ .lightbox__close{top:8px;right:8px} }

/* ---------- CREW ---------- */
.crew__photo{
  margin-top:1.6rem;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-image);background:var(--c-surface);
  max-width:820px;
}
.crew__photo img{width:100%;height:auto;display:block}
.crew__photo--empty{
  box-shadow:none;border:1px dashed var(--c-line);
  padding:2.5rem 1rem;text-align:center;
  color:var(--c-ink-mute);font-family:var(--font-mono);font-size:.72rem;
}
.crew__caption{margin-top:1rem;color:var(--c-ink-mute);font-size:var(--fs-sm);max-width:52ch}

/* ---- crew carousel ---- */
.crew-carousel{position:relative;outline:none}
.crew-carousel:focus-visible{outline:3px solid var(--c-gold);outline-offset:4px}
.crew-carousel__viewport{overflow:hidden}
.crew-carousel__track{
  display:flex;list-style:none;margin:0;padding:0;
  transition:transform var(--dur-4) var(--ease-out);
  will-change:transform;
}
.crew-carousel__slide{flex:0 0 100%;min-width:0;overflow:hidden}
.crew-carousel__slide img{
  width:100%;height:100%;display:block;object-fit:cover;
  aspect-ratio:16/10;background:var(--c-parchment);
  -webkit-user-select:none;user-select:none;
}
/* the per-slide zoom-in is driven by crew.js (Web Animations API);
   it self-disables under prefers-reduced-motion */
.crew-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--glass-ink);
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  transition:background var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .crew-carousel__nav{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
}
.crew-carousel__nav:hover{background:var(--glass-bg-strong);transform:translateY(-50%) scale(1.08)}
.crew-carousel__nav--prev{left:12px}
.crew-carousel__nav--next{right:12px}

.crew-carousel__dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:2;
  display:flex;gap:8px;align-items:center;
  padding:7px 10px;border-radius:var(--r-pill);
  background:var(--glass-bg);border:1px solid var(--glass-border);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .crew-carousel__dots{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
}
.crew-carousel__dot{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  border:0;background:rgba(255,255,255,.5);
  transition:background var(--dur-2),transform var(--dur-2) var(--ease-spring);
}
.crew-carousel__dot[aria-selected="true"]{background:#fff;transform:scale(1.5)}
@media (prefers-reduced-motion:reduce){
  .crew-carousel__track{transition:none}
  .crew-carousel__nav:hover{transform:translateY(-50%)}
}
@media (max-width:520px){
  .crew-carousel__nav{width:34px;height:34px}
  .crew-carousel__slide img{aspect-ratio:4/3}
}
.gallery__skeleton{
  border:1px dashed var(--c-line);border-radius:var(--r-lg);
  padding:2.5rem 1.5rem;text-align:center;
  color:var(--c-ink-mute);font-family:var(--font-mono);font-size:.8rem;line-height:1.6;
}
.gallery__skeleton code{background:var(--c-parchment);padding:.1rem .35rem;border-radius:var(--r-xs)}

/* ---------- VISIT ---------- */
.venue__grid{display:grid;gap:26px;margin-top:1.4rem;align-items:center}
@media (min-width:820px){ .venue__grid{grid-template-columns:1fr 1.15fr} }
.venue__name{margin-top:.7rem;font-weight:var(--weight-semi);font-size:var(--fs-md);color:var(--c-ink);line-height:1.3}
.venue__address{margin-top:.35rem;font-size:var(--fs-sm);color:var(--c-ink-mute);line-height:1.55;max-width:34ch}
.venue__info .btn{margin-top:1.4rem}
.venue__map{
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-image);              /* imagery on a surface — the one shadow */
  aspect-ratio:16/11;background:var(--c-surface);border:1px solid var(--c-line);
}
.venue__map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.95)}
:root[data-theme="dark"] .venue__map iframe,
.venue__map iframe{color-scheme:light}          /* keep the map readable on dark pages */

/* ---------- LUCKY DRAW ---------- */
.lucky__grid{display:grid;gap:28px;margin-top:1.4rem;align-items:center}
@media (min-width:800px){.lucky__grid{grid-template-columns:1.05fr .95fr}}
.lucky__info .lead{margin-top:.4rem}
.lucky__info .btn{margin-top:1.3rem}
.lucky__prizes{margin-top:0}

/* ---------- SUPPORTERS WALL ---------- */
.supporters__hint{margin-top:1rem;color:var(--c-ink-mute);font-size:var(--fs-sm)}

/* ---------- DONATE BAND (dark tile) ---------- */
.donate-band{text-align:center}
.donate-band h2{color:var(--c-on-dark);font-size:var(--fs-2xl)}
.donate-band p{margin:.7rem auto 1.6rem;max-width:46ch;color:var(--c-on-dark-soft)}
.donate-band .btn{--btn-bg:#fff;--btn-fg:var(--c-primary)}