/* ==========================================================================
   THE HEAVIES AWARDS - variation 4
   Language borrowed from the Ondine Charters system: cold luxury, sharp
   corners, hairline rules, thin display type, airy dark sections.
   Recoloured to the brand: charcoal ink / warm porcelain / Heavies gold.
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var-latin.woff2") format("woff2-variations");
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var-latin.woff2") format("woff2-variations");
  font-weight: 300 500;
  font-display: swap;
}

:root {
  --ink: #1a1c1e;
  --ink-deep: #141618;
  --ink-raised: #232426;
  --ink-edge: #2f3134;
  --porcelain: #f5f4f0;
  --muted: rgba(245, 244, 240, 0.64);
  --faint: rgba(245, 244, 240, 0.4);
  --gold: #87764e;
  --gold-bright: #b3a077;
  --gold-fill: #8d7c53;
  --line: rgba(135, 118, 78, 0.26);
  --line-soft: rgba(245, 244, 240, 0.1);
  --scrim: linear-gradient(180deg, rgba(20, 22, 24, 0.6) 0%, rgba(20, 22, 24, 0.12) 32%, rgba(20, 22, 24, 0.68) 100%);
  --font-display: "Jost", sans-serif;
  --font-body: "Figtree", sans-serif;
  --wrap: 1280px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ink);
  color: var(--porcelain);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 3px; }
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 300;
  background: var(--gold); color: var(--ink); padding: 0.5rem 1rem;
}
.skip-link:focus { top: 0.75rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.14;
  color: var(--porcelain);
}
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; }
p + p { margin-top: 1em; }
.copy p { color: var(--muted); }

.label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.text-link {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  padding-bottom: 0.3rem;
}
.text-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.text-link:hover { color: var(--porcelain); }
.text-link:hover::after { transform: scaleX(1); }

/* ---------- Buttons: flat, sharp ---------- */
.btn-fill, .btn-line {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  text-align: center;
}
.btn-fill { background: var(--gold-fill); color: #14161a; }
.btn-fill:hover { background: var(--gold-bright); }
.btn-line { border: 1px solid var(--line); color: var(--porcelain); }
.btn-line:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(20, 22, 24, 0.55), rgba(20, 22, 24, 0));
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header.scrolled, .site-header.mega-open {
  background: var(--ink-deep);
  border-bottom-color: var(--line-soft);
}
.header-bar {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  transition: height 0.32s var(--ease);
}
/* Scrolled down, the bar gives back about a third of its height so it covers
   less of the page. */
.site-header.scrolled .header-bar { height: 50px; }
.brand img { height: 42px; width: auto; transition: height 0.32s var(--ease); }
.site-header.scrolled .brand img { height: 28px; }
@media (prefers-reduced-motion: reduce) {
  .header-bar, .brand img { transition: none; }
}
.primary-nav ul { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav-link, .mega-trigger {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--porcelain);
  padding: 0.5rem 0;
  position: relative;
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: color 0.2s var(--ease);
}
.nav-link::after, .mega-trigger::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-link:hover, .mega-trigger:hover, .mega-trigger[aria-expanded="true"] { color: var(--gold-bright); }
.nav-link:hover::after, .mega-trigger:hover::after, .mega-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.mega-trigger .caret {
  width: 8px; height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s var(--ease);
}
.mega-trigger[aria-expanded="true"] .caret { transform: rotate(225deg) translateY(-1px); }
.nav-cta {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--porcelain);
  padding: 0.65rem 1.4rem;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-cta:hover { border-color: var(--gold); color: var(--ink); background: var(--gold); }

/* ---------- Mega panels ---------- */
.mega-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink-deep) 0%, #101214 100%);
  border-top: 1px solid rgba(135, 118, 78, 0.14);
  border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  transform: translateY(-14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.mega-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(2rem, 3.6vw, 3.25rem) var(--gutter) clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.mega-intro { border-right: 1px solid var(--line-soft); padding-right: clamp(1.5rem, 3vw, 2.75rem); min-width: 0; }
.mega-intro .label { display: block; margin-bottom: 1rem; }
.mega-intro p { font-size: 0.93rem; color: var(--muted); line-height: 1.7; }
.mega-intro .text-link { margin-top: 1.4rem; }
.mega-grid { display: grid; gap: clamp(1.5rem, 2.6vw, 2.4rem); min-width: 0; }
.mega-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mega-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mega-card figure { overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-raised); }
.mega-card figure.contain { display: grid; place-items: center; padding: 1.2rem; }
.mega-card figure.contain img { width: 70%; height: auto; object-fit: contain; }
.mega-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), opacity 0.3s; }
.mega-card:hover figure img { transform: scale(1.045); }
.mega-card h4 { font-size: 1.02rem; font-weight: 400; margin-top: 0.9rem; }
.mega-card:hover h4 { color: var(--gold-bright); }
.mega-line { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin-top: 0.3rem; }
.mega-sub {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-top: 0.55rem;
}

.nav-toggle { display: none; }
.drawer { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  background: var(--ink-deep);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-poster {
  position: absolute; inset: 0;
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
}
.hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
/* Once the film is running it covers the poster completely: at partial opacity
   the still underneath ghosted through. The brightness filter keeps the same
   perceived darkness the blend used to give, so the headline stays legible. */
.hero-video.is-playing { opacity: 1; filter: brightness(0.62); }
.hero-video.is-playing + .hero-scrim { background: var(--scrim); }
.hero-media:has(.hero-video.is-playing) .hero-poster { opacity: 0; }
.hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; border: 0;
}
.hero-scrim { position: absolute; inset: 0; background: var(--scrim); }
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10rem var(--gutter) clamp(4rem, 9vh, 7rem);
}
.hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 4.9rem);
  font-weight: 300;
  max-width: 18ch;
}
.hero-sub {
  margin-top: 1.4rem;
  max-width: 44ch;
  font-size: 1.05rem;
  color: var(--muted);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero-sub, .hero-ctas {
    opacity: 0; transform: translateY(22px);
    animation: rise 1s var(--ease) forwards;
  }
  .hero-sub { animation-delay: 0.15s; }
  .hero-ctas { animation-delay: 0.3s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

.rv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
}

/* ---------- Sections ---------- */
/* Section rhythm is owned by .site-section (see architecture layer below). */

/* Split: copy + captioned photo */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}
.split.media-left .split-media { order: -1; }
.split-copy h2 { margin-bottom: 1.4rem; max-width: 16ch; }
.split-copy p { color: var(--muted); max-width: 54ch; }
.split-copy .text-link { margin-top: 1.8rem; }
.split-media figcaption {
  font-size: 0.82rem;
  color: var(--faint);
  margin-top: 0.9rem;
  line-height: 1.6;
}

/* Stats hairline row */
.stats {
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(2.6rem, 5vw, 4rem);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  color: var(--gold-bright);
  line-height: 1.1;
}
.stat-cap { font-size: 0.9rem; color: var(--muted); margin-top: 0.35rem; }

/* Narrow statement block */
.statement h2 { margin-bottom: 1.4rem; }
.statement p { color: var(--muted); }
.statement .actions { margin-top: 2.2rem; }

/* Centered display quote */
.big-quote { text-align: center; }
.big-quote blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.45;
  max-width: 34ch;
  margin-inline: auto;
}
.big-quote .q-name {
  display: block;
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.big-quote .q-meta { display: block; margin-top: 0.4rem; font-size: 0.88rem; color: var(--faint); }

/* Definition rows (venue essentials) */
.def-rows { border-top: 1px solid var(--line-soft); }
.def-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.4rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.def-row dt {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.def-row dd { font-size: 0.97rem; color: var(--muted); }
.map-figure { position: relative; overflow: hidden; min-height: 420px; }
.map-figure iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(0.92) brightness(0.9);
}
.map-figure .pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  width: 30px; height: 43px;
  pointer-events: none; z-index: 2;
}

/* Charity logo panel */
.logo-panel {
  background: var(--ink-raised);
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 3rem;
}
.logo-panel img { max-width: 250px; }

/* Testimonials slider */
/* The quotes are stacked on top of one another and cross-fade, so nothing is
   removed from the flow mid-change. The script sets the stage height to the
   incoming quote and that height is transitioned too, which is what stops the
   page shunting when a short quote follows a long one — very noticeable on a
   phone, where the quotes are several lines taller. */
.quote-stage {
  position: relative;
  text-align: center;
  min-height: 12rem;
  transition: height 0.45s var(--ease);
}
.q-slide {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--q-out, 0));
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
}
.q-slide.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  position: relative;
}
/* Direction of travel, set by the script before each change. */
.quote-stage[data-dir="next"] .q-slide { --q-out: 2.5rem; }
.quote-stage[data-dir="prev"] .q-slide { --q-out: -2.5rem; }
@media (prefers-reduced-motion: reduce) {
  .quote-stage, .q-slide { transition: none; }
}
.q-slide blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.3vw, 1.7rem);
  line-height: 1.55;
  max-width: 34ch;
  margin-inline: auto;
  color: var(--porcelain);
}
.q-slide .q-name {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.q-slide .q-meta { display: block; margin-top: 0.35rem; font-size: 0.86rem; color: var(--faint); }
.quote-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  margin-top: 2.4rem;
}
.quote-controls button {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  color: var(--gold-bright);
  display: grid; place-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.quote-controls button:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.quote-controls svg { width: 15px; height: 15px; fill: currentColor; }
.q-count {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--faint);
  min-width: 74px;
  font-variant-numeric: tabular-nums;
  /* Centred in its own box, and nudged by the trailing letter-spacing that
     would otherwise push the digits left of true centre. */
  text-align: center;
  text-indent: 0.16em;
}
.t-more { text-align: center; margin-top: 2.2rem; }

/* Gallery */
.gallery-head { margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.gallery-head p { color: var(--muted); margin-top: 0.6rem; }
.mosaic { columns: 3 300px; column-gap: 14px; }
.mosaic img {
  width: 100%;
  margin-bottom: 14px;
  break-inside: avoid;
  filter: saturate(0.82);
  transition: filter 0.35s var(--ease);
}
.mosaic img:hover { filter: none; }

/* CTA */
.cta { text-align: center; border-top: 1px solid var(--line-soft); }
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta p { color: var(--muted); max-width: 46ch; margin: 1.2rem auto 0; }
.cta .hero-ctas { justify-content: center; margin-top: 2.4rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding-top: clamp(3rem, 6vw, 5rem); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 2.5fr) minmax(0, 3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
}
.footer-brand img { width: 150px; }
.footer-brand p { margin-top: 1.4rem; font-size: 0.92rem; color: var(--muted); max-width: 32ch; }
.footer-col .label { display: block; margin-bottom: 1.1rem; }
.footer-col a { display: block; font-size: 0.95rem; color: var(--muted); padding-block: 0.32rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-col address { font-style: normal; font-size: 0.95rem; color: var(--muted); line-height: 1.8; }
.footer-col address strong { display: block; color: var(--porcelain); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.3rem; }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
  font-size: 0.82rem;
  color: var(--faint);
}
.footer-bottom a { color: var(--faint); }
.footer-bottom a:hover { color: var(--gold-bright); }
@media (max-width: 640px) {
  /* Stacked rather than pushed apart, and centred under the columns. */
  .footer-bottom {
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
  }
  .footer-bottom > * { flex: 0 0 100%; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .primary-nav { display: none; }
  .nav-toggle {
    display: grid; gap: 5px;
    padding: 10px;
  }
  .nav-toggle span { width: 24px; height: 1.5px; background: var(--porcelain); transition: transform 0.3s var(--ease), opacity 0.2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .drawer {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw);
    background: var(--ink-deep);
    border-left: 1px solid var(--line-soft);
    z-index: 220;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    overflow-y: auto;
    padding: 76px 28px 40px;
  }
  .drawer.open { transform: none; }
  .drawer-close {
    position: absolute; top: 16px; right: 16px;
    width: 42px; height: 42px;
    border: 1px solid var(--line-soft);
    color: var(--porcelain); font-size: 19px;
  }
  .drawer a { display: block; color: var(--muted); font-size: 1rem; padding: 0.55rem 0; }
  .drawer a:hover { color: var(--gold-bright); }
  .drawer-group { border-bottom: 1px solid var(--line-soft); }
  .drawer-group > button {
    width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-display);
    font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--porcelain);
    padding: 1rem 0;
  }
  .drawer-group > button::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 1px solid var(--gold-bright);
    border-bottom: 1px solid var(--gold-bright);
    transform: rotate(45deg);
    transition: transform 0.25s;
  }
  .drawer-group.open > button::after { transform: rotate(225deg); }
  /* Same grid-row technique as the FAQs: height animates from nothing to
     content without needing a measured pixel value. */
  .drawer-sub {
    display: grid;
    grid-template-rows: 0fr;
    padding-left: 0.8rem;
    transition: grid-template-rows 0.35s var(--ease);
  }
  .drawer-sub > .drawer-sub-inner { overflow: hidden; min-height: 0; }
  .drawer-group.open .drawer-sub { grid-template-rows: 1fr; }
  .drawer-sub-inner > :last-child { margin-bottom: 1rem; }
  @media (prefers-reduced-motion: reduce) {
    .drawer-sub { transition: none; }
  }
  .drawer .btn-fill { display: block; margin-top: 1.6rem; }
  .drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 22, 24, 0.6);
    z-index: 210;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s;
  }
  .drawer-backdrop.show { opacity: 1; visibility: visible; }

  .split, .split.media-left { grid-template-columns: 1fr; }
  .split.media-left .split-media { order: 0; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.4rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero-ctas { width: 100%; }
  .hero-ctas .btn-fill, .hero-ctas .btn-line { flex: 1 1 100%; }
  .mosaic { columns: 2 140px; column-gap: 10px; }
  .mosaic img { margin-bottom: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .def-row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ==========================================================================
   v4.1 refinements
   ========================================================================== */

/* Glass header over the video: ~50% ink + blur, deepens on scroll */
.site-header {
  background: rgba(20, 22, 24, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(245, 244, 240, 0.06);
}
.site-header.scrolled, .site-header.mega-open {
  background: rgba(20, 22, 24, 0.82);
  border-bottom-color: var(--line-soft);
}

/* Hero headline: staggered word reveal, anchored left */
.hero h1 { max-width: none; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-right: 0.28em; }
.hero h1 .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { opacity: 1; transform: none; animation: none; }
  .hero h1 .w > span {
    transform: translateY(112%);
    animation: wordUp 0.9s var(--ease) forwards;
    animation-delay: calc(0.12s + var(--i) * 0.11s);
  }
  @keyframes wordUp { to { transform: translateY(0); } }
}

/* Prominent buttons */
.btn-fill, .btn-line {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  padding: 1.25rem 2.7rem;
}
.btn-fill { background: var(--gold-bright); color: #14161a; }
.btn-fill:hover { background: var(--porcelain); color: #14161a; }
.btn-line { border: 1.5px solid var(--gold); color: var(--porcelain); }
.btn-line:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Will you be a winner: wide two-column, left aligned */
.winner-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.winner-grid h2 { max-width: 14ch; }
.judges-block {
  margin-top: 2.2rem;
  padding: 1.4rem 0 1.4rem 1.6rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--gold-bright);
}
.judges-block footer {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.winner-copy p { color: var(--muted); max-width: 64ch; }

/* The evening: full-bleed feature band with overlaid panel */
.feature-band {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.feature-band > img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.85);
}
.feature-band::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 22, 24, 0.82) 0%, rgba(20, 22, 24, 0.45) 55%, rgba(20, 22, 24, 0.25) 100%);
}
.feature-panel {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  margin-right: var(--gutter);
  padding: clamp(2rem, 4vw, 3.4rem);
  background: rgba(20, 22, 24, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
}
.feature-panel h2 { margin-bottom: 1.3rem; }
.feature-panel p { color: var(--muted); font-size: 0.98rem; }
.feature-panel .text-link { margin-top: 1.6rem; }

/* Hosts: lead line emphasis */
.lead-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--porcelain);
  margin-bottom: 1.2rem;
}
.lead-quote em { font-style: normal; color: var(--gold-bright); }

/* Venue: full-bleed map with overlaid panel */
.venue-band {
  position: relative;
  height: clamp(560px, 74vh, 720px);
}
.venue-band iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(0.92) brightness(0.9);
}
.venue-band .pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  width: 30px; height: 43px;
  pointer-events: none; z-index: 2;
}
.venue-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  z-index: 3;
  width: min(500px, calc(100vw - 2 * var(--gutter)));
  background: rgba(20, 22, 24, 0.94);
  border: 1px solid var(--line-soft);
  padding: clamp(1.8rem, 3vw, 2.8rem);
}
.venue-overlay h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.venue-overlay .def-rows { margin-top: 1.4rem; }
.venue-overlay .def-row { grid-template-columns: 120px minmax(0, 1fr); padding-block: 0.9rem; }
.venue-overlay .text-link { margin-top: 1.4rem; }

/* Gallery: structured grid + lightbox */
.g-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 210px;
  grid-auto-flow: dense;
  gap: 14px;
}
.g-grid a { display: block; overflow: hidden; position: relative; }
.g-grid a:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.g-grid a:nth-child(6n + 4) { grid-row: span 2; }
.g-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: filter 0.35s var(--ease), transform 0.6s var(--ease);
}
.g-grid a:hover img { filter: none; transform: scale(1.04); }

.lightbox {
  position: fixed; inset: 0;
  z-index: 400;
  background: rgba(10, 11, 12, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 84vh; object-fit: contain; }
.lightbox button {
  position: absolute;
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  color: var(--porcelain);
  background: rgba(20, 22, 24, 0.7);
  display: grid; place-items: center;
  transition: background 0.25s, color 0.25s;
}
.lightbox button:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.lightbox button svg { width: 16px; height: 16px; fill: currentColor; }
.lb-close { top: 20px; right: 20px; font-size: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* CTA: wide, left aligned */
.cta { text-align: left; }
.cta .cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cta h2 { max-width: none; margin-inline: 0; font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.cta p { margin: 1.2rem 0 0; max-width: 56ch; }
.cta .hero-ctas { justify-content: flex-start; margin-top: 0; flex-direction: column; align-items: stretch; }

/* Booking pop-out */
.popup-backdrop {
  position: fixed; inset: 0;
  z-index: 500;
  background: rgba(10, 11, 12, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.popup-backdrop.open { display: flex; }
.popup {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  width: min(880px, 100%);
  background: var(--ink-deep);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .popup-backdrop.open .popup { animation: popIn 0.5s var(--ease); }
  @keyframes popIn { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: none; } }
}
.popup-media { position: relative; min-height: 380px; }
.popup-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.popup-body { padding: clamp(1.8rem, 3.4vw, 3rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.popup-body .label { display: block; margin-bottom: 1rem; }
.popup-body h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 300;
  line-height: 1.15;
}
.popup-body p { margin-top: 1rem; font-size: 0.95rem; color: var(--muted); }
.popup-body .btn-fill { margin-top: 1.8rem; }
.popup-body .popup-dismiss {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.popup-body .popup-dismiss:hover { color: var(--gold-bright); }
.popup-close {
  position: absolute; top: 12px; right: 12px;
  width: 42px; height: 42px;
  border: 1px solid var(--line-soft);
  color: var(--porcelain);
  background: rgba(20, 22, 24, 0.6);
  font-size: 19px;
  z-index: 2;
}
.popup-close:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 1080px) {
  .winner-grid { grid-template-columns: 1fr; }
  .feature-band { min-height: 0; padding-block: 3.5rem; }
  .feature-panel { margin-inline: var(--gutter); }
  .venue-band { height: auto; min-height: 78vh; }
  .venue-overlay { position: static; transform: none; margin: 0; width: auto; }
  .venue-band iframe { position: absolute; }
  .venue-band { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--gutter); }
  .cta .cta-grid { grid-template-columns: 1fr; }
  .cta .hero-ctas { flex-direction: row; }
  .popup { grid-template-columns: 1fr; overflow-y: auto; max-height: 92dvh; }
  .popup-media { min-height: 200px; }
}
@media (max-width: 640px) {
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .cta .hero-ctas { flex-direction: column; }
}

/* ==========================================================================
   v4.2 refinements
   ========================================================================== */

/* Lighter glass navigation */
.site-header { background: rgba(20, 22, 24, 0.32); }
.site-header.scrolled, .site-header.mega-open { background: rgba(20, 22, 24, 0.62); }

/* Testimonials: wider measure */
.q-slide blockquote { max-width: min(920px, 100%); }

/* Venue: overlay panel back in flow so it can never overlap the next section */
.venue-band {
  height: auto;
  min-height: clamp(560px, 74vh, 720px);
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 5vh, 4rem);
}
.venue-overlay { position: relative; top: auto; transform: none; }
/* Map is a backdrop, not an app: no scroll or drag capture */
.venue-band iframe { pointer-events: none; }

/* Gallery: cascading entrance + 3D tilt on hover */
@media (prefers-reduced-motion: no-preference) {
  .js .g-grid a { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
  .js .g-grid.in a { opacity: 1; transform: none; }
}
.g-grid a { transform-style: preserve-3d; }
.g-grid a.tilting { transition: none; }
.g-grid a.tilt-reset { transition: transform 0.4s var(--ease); }

/* Lightbox: zoom in */
@media (prefers-reduced-motion: no-preference) {
  .lightbox img { animation: lbZoom 0.45s var(--ease); }
  @keyframes lbZoom { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

.page-hero {
  position: relative;
  min-height: clamp(380px, 54vh, 560px);
  display: flex;
  align-items: flex-end;
  background: var(--ink-deep);
  overflow: hidden;
}
.page-hero > img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0.5;
  filter: saturate(0.8);
}
.page-hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.page-hero-content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 9rem var(--gutter) clamp(2.6rem, 6vh, 4.2rem);
}
.page-hero .label { display: block; margin-bottom: 1rem; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 300; max-width: 22ch; }
.page-hero .page-sub { margin-top: 1rem; max-width: 52ch; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .page-hero .label, .page-hero h1, .page-hero .page-sub {
    opacity: 0; transform: translateY(18px);
    animation: rise 0.9s var(--ease) forwards;
  }
  .page-hero h1 { animation-delay: 0.1s; }
  .page-hero .page-sub { animation-delay: 0.2s; }
}

/* People (hosts + judges) */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem);
}
.person figure { overflow: hidden; }
.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: saturate(0.85); transition: filter 0.4s var(--ease); }
.person:hover img { filter: none; }
.person h3 { font-size: 1.35rem; margin-top: 1.3rem; }
.person .label { display: block; margin-top: 0.4rem; }
.person p { margin-top: 0.9rem; font-size: 0.95rem; color: var(--muted); }

/* Winners */
.winner-item {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.2rem, 4.5vw, 3.6rem);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.winner-item:last-of-type { border-bottom: 1px solid var(--line-soft); }
.winner-item .label { line-height: 1.7; }
.winner-item h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 0.9rem; }
.winner-item p { color: var(--muted); font-size: 0.97rem; }
.winner-item .judges-block { margin-top: 1.4rem; font-size: 1.02rem; }

/* FAQ accordions */
.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--porcelain);
  transition: color 0.2s;
}
.faq summary:hover { color: var(--gold-bright); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1px solid var(--gold-bright);
  border-bottom: 1px solid var(--gold-bright);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details[open] summary { color: var(--gold-bright); }
.faq .faq-a { padding: 0 0 1.6rem; max-width: 68ch; color: var(--muted); font-size: 0.96rem; }
.faq .faq-a p + p { margin-top: 0.8em; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--porcelain);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  padding: 0.95rem 1.05rem;
  border-radius: 0;
  width: 100%;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-bright) 50%), linear-gradient(135deg, var(--gold-bright) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field textarea { min-height: 140px; resize: vertical; }
.checks { display: grid; gap: 0.7rem; }
.checks label {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
}
.checks input { width: 18px; height: 18px; accent-color: #8d7c53; }
.form-actions { margin-top: 2rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.form-note { font-size: 0.85rem; color: var(--faint); max-width: 46ch; }

/* Category listing */
.cat-item {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
}
/* No closing rule under the last item: the section's own spacing ends the list. */
.cat-item h3 { font-size: 1.25rem; line-height: 1.35; }
.cat-item p { color: var(--muted); font-size: 0.96rem; }
.cat-item .text-link { margin-top: 1.1rem; }

/* Quote list (testimonials page) */
.quote-item {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
}
.quote-item:last-of-type { border-bottom: 1px solid var(--line-soft); }
.quote-item blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  max-width: 62ch;
}
.quote-item .q-name { display: block; margin-top: 1.2rem; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.quote-item .q-meta { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--faint); }

/* Legal copy */
.legal-copy { max-width: 820px; }
.legal-copy h1, .legal-copy h2, .legal-copy h3, .legal-copy h4 { margin: 1.8em 0 0.6em; font-weight: 400; }
.legal-copy h2 { font-size: 1.4rem; }
.legal-copy h3 { font-size: 1.15rem; }
.legal-copy p, .legal-copy li { color: var(--muted); font-size: 0.95rem; margin-top: 0.7em; }
.legal-copy ul, .legal-copy ol { padding-left: 1.4rem; }
.legal-copy ul { list-style: square; }
.legal-copy ol { list-style: decimal; }
.legal-copy a { color: var(--gold-bright); }

/* Simple list with gold markers */
.gold-list { display: grid; gap: 0.8rem; }
.gold-list li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: 0.97rem; }
.gold-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 1px; background: var(--gold-bright); }

.contact-lines a { display: block; color: var(--muted); padding-block: 0.2rem; }
.contact-lines a:hover { color: var(--gold-bright); }

@media (max-width: 1080px) {
  .people-grid { grid-template-columns: 1fr; }
  .winner-item, .cat-item { grid-template-columns: 1fr; gap: 0.8rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v4.3 refinements: mega menu v2, custom checkboxes, parallax banners
   ========================================================================== */

/* Mega menu v2: intro | featured story | aligned link ledger */
.mega-inner.v2 {
  grid-template-columns: 230px minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}
.mega-featured {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 320px;
}
.mega-featured img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.mega-featured:hover img { transform: scale(1.045); }
.mega-featured::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16, 18, 20, 0.92) 8%, rgba(16, 18, 20, 0.3) 55%, rgba(16, 18, 20, 0.08));
}
.mega-featured-copy { position: absolute; inset: auto 0 0 0; padding: 20px 22px; z-index: 1; }
.mega-featured-copy .label { display: block; margin-bottom: 0.5rem; }
.mega-featured-copy .mega-feature-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--porcelain); line-height: 1.35; }
.mega-featured-copy .mega-line { color: rgba(245, 244, 240, 0.72); margin-top: 0.35rem; }
.mega-list { display: flex; flex-direction: column; justify-content: center; }
.mega-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 0.78rem 0.2rem;
  border-bottom: 1px solid var(--line-soft);
}
.mega-list a:first-child { border-top: 1px solid var(--line-soft); }
.mega-list strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; color: var(--porcelain); transition: color 0.2s; }
.mega-list em { display: block; font-style: normal; font-size: 0.78rem; color: var(--faint); margin-top: 0.1rem; }
.mega-list svg { flex: none; width: 14px; height: 14px; fill: var(--gold-bright); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.mega-list a:hover strong { color: var(--gold-bright); }
.mega-list a:hover svg { opacity: 1; transform: none; }

/* Custom checkboxes */
.checks input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  flex: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  accent-color: auto;
}
.checks input:hover { border-color: var(--gold); }
.checks input:checked { background: var(--gold-fill); border-color: var(--gold-fill); }
.checks input:checked::before {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #14161a;
  border-bottom: 2px solid #14161a;
  transform: rotate(-45deg) translateY(-1px);
}
.checks input:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 2px; }
.checks label:hover { color: var(--porcelain); }

/* Parallax banners: JS drives translate, CSS provides the bleed */
@media (prefers-reduced-motion: no-preference) {
  .js [data-plx] { will-change: transform; transform: scale(1.18); }
}

/* Winner photos */
.winner-photo { margin: 0 0 1.4rem; }
.winner-photo img { width: 100%; max-height: 420px; object-fit: cover; }
.winner-photo figcaption { font-size: 0.82rem; color: var(--faint); margin-top: 0.7rem; }

/* ==========================================================================
   v4.4: generated banners + in-content photo rows
   ========================================================================== */
.page-hero > img.bg { opacity: 0.62; }
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.photo-row figure { overflow: hidden; }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.85); transition: filter 0.35s var(--ease), transform 0.6s var(--ease); }
.photo-row figure:hover img { filter: none; transform: scale(1.04); }
@media (max-width: 760px) { .photo-row { grid-template-columns: 1fr; } .photo-row img { aspect-ratio: 16 / 10; } }

/* ==========================================================================
   v4.5: sparkle bands under banners
   ========================================================================== */
.sparkle-band {
  position: relative;
  height: 150px;
  margin-top: -1px;
  pointer-events: none;
  overflow: hidden;
}
.sparkle-band canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0) 94%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0) 94%);
}
@media (max-width: 760px) { .sparkle-band { height: 110px; } }

/* ==========================================================================
   v4.6: rhythm fixes, timeline schedule, framed portraits, custom dropdowns
   ========================================================================== */

/* Sparkle band overlaps the next section so it never creates dead space */
.sparkle-band { margin-bottom: calc(-1 * clamp(4rem, 8vw, 7rem)); z-index: 5; }

/* Consistent hero-to-content rhythm everywhere */
.page-hero + .sparkle-band + section,
.page-hero + .sparkle-band + .stats,
.page-hero + .sparkle-band + div { padding-top: clamp(4.5rem, 9vw, 8rem); }

/* Evening schedule: gold timeline */
.timeline { position: relative; margin-top: 2rem; padding-left: 2.4rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(135, 118, 78, 0.15));
}
.tl-item { position: relative; padding: 0 0 2.1rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: calc(-2.4rem + 3px); top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(135, 118, 78, 0.15);
}
.tl-time {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--gold-bright);
  line-height: 1.1;
}
.tl-label { font-size: 0.97rem; color: var(--muted); margin-top: 0.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .rv.in .tl-item { animation: rise 0.7s var(--ease) backwards; }
  .js .rv.in .tl-item:nth-child(1) { animation-delay: 0.05s; }
  .js .rv.in .tl-item:nth-child(2) { animation-delay: 0.15s; }
  .js .rv.in .tl-item:nth-child(3) { animation-delay: 0.25s; }
  .js .rv.in .tl-item:nth-child(4) { animation-delay: 0.35s; }
  .js .rv.in .tl-item:nth-child(5) { animation-delay: 0.45s; }
  .js .rv.in .tl-item:nth-child(6) { animation-delay: 0.55s; }
}

/* Framed portraits: offset gold frame, lift and reveal */
.frame-gold { position: relative; }
.frame-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: -1;
  transition: transform 0.4s var(--ease);
}
.frame-gold:hover::after { transform: translate(8px, 8px); }
/* The caption tucks inside the offset rectangle rather than hanging outside it. */
.frame-gold figcaption { padding-left: 34px; }
.frame-gold img { transition: filter 0.4s var(--ease), transform 0.4s var(--ease); }
.frame-gold:hover img { filter: none; }

/* People cards: overlapping ink name panel */
.person { position: relative; }
.person figure { position: relative; overflow: visible; }
.person figure::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(12px, 12px);
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: -1;
  transition: transform 0.4s var(--ease);
}
.person:hover figure::after { transform: translate(7px, 7px); }
.person-meta {
  position: relative;
  margin: -3.2rem 1.4rem 0 0;
  background: var(--ink-deep);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold);
  padding: 1.2rem 1.4rem 1.3rem;
  z-index: 2;
}
.person-meta h3 { margin-top: 0; }
.person p { padding-inline: 0.2rem; }

/* Custom dropdowns */
.dd { position: relative; min-width: 0; }
.dd select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--porcelain);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  padding: 0.95rem 1.05rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dd.open .dd-toggle, .dd-toggle:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.06); }
/* Long category names ellipsis rather than pushing the control to two lines. */
.dd-toggle > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dd-toggle .caret {
  flex: none;
  width: 8px; height: 8px;
  border-right: 1px solid var(--gold-bright);
  border-bottom: 1px solid var(--gold-bright);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s var(--ease);
}
.dd.open .dd-toggle .caret { transform: rotate(225deg) translateY(-1px); }
.dd-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  z-index: 60;
  background: var(--ink-deep);
  border: 1px solid var(--line);
  max-height: 290px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  box-shadow: 0 24px 50px rgba(10, 11, 12, 0.5);
}
.dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu li {
  padding: 0.75rem 1.05rem;
  font-size: 0.92rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid rgba(245, 244, 240, 0.05);
  transition: background 0.15s, color 0.15s;
}
.dd-menu li:last-child { border-bottom: 0; }
.dd-menu li:hover, .dd-menu li.active {
  background: rgba(135, 118, 78, 0.14);
  color: var(--gold-bright);
}
.dd-menu li[aria-selected="true"] { color: var(--porcelain); background: rgba(135, 118, 78, 0.22); }

/* ==========================================================================
   v4.7: no parallax, centred banner crops, taller faster sparkles, glass megas
   ========================================================================== */
.page-hero > img.bg { object-position: center; }
.feature-band > img.bg { object-position: center; }
.js [data-plx] { transform: none; will-change: auto; }

.sparkle-band { height: 230px; margin-bottom: calc(-1 * (clamp(4rem, 8vw, 7rem) + 80px)); }
@media (max-width: 760px) { .sparkle-band { height: 160px; margin-bottom: calc(-1 * (clamp(4rem, 8vw, 7rem) + 50px)); } }

.mega-panel {
  background: rgba(20, 22, 24, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ==========================================================================
   v4.8: expandable galleries (hover-flex rows, even height, click to open)
   ========================================================================== */
.xgal-stack { display: grid; gap: 10px; }
.xgal { display: flex; gap: 10px; height: clamp(300px, 44vh, 400px); }
.xgal a {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.55s var(--ease);
}
.xgal a img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88);
  transition: filter 0.4s var(--ease);
}
.xgal a::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10, 11, 12, 0.32);
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.xgal a:hover { flex: 2.3; }
.xgal:hover a:not(:hover) { flex: 0.55; }
.xgal a:hover::after { opacity: 0; }
.xgal a:hover img { filter: none; }
.xgal.rows-3 { height: clamp(260px, 34vh, 320px); }

.lb-count {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--porcelain);
  background: rgba(20, 22, 24, 0.7);
  border: 1px solid var(--line-soft);
  padding: 0.5rem 1.1rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .xgal, .xgal.rows-3 {
    height: 240px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
  }
  .xgal a, .xgal:hover a:not(:hover), .xgal a:hover { flex: 0 0 72%; scroll-snap-align: center; }
}

/* ==========================================================================
   v4.9: Ken Burns banners, duotone galleries, centred gallery title
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 26s from a standing start was imperceptible: a visitor reading a page for
     ten seconds saw about a 5% change. Shorter, and starting already in
     motion, so the drift reads without ever becoming distracting. */
  .page-hero > img.bg, .feature-band > img.bg {
    animation: kenburns 15s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes kenburns {
    from { transform: scale(1.03) translate(0.6%, 0.8%); }
    to   { transform: scale(1.16) translate(-0.9%, -1.8%); }
  }
}

/* Galleries: warm-tinted monochrome, colour on hover */
.xgal a img { filter: grayscale(1) sepia(0.3) saturate(1.15) brightness(0.9); }
.xgal a:hover img { filter: none; }

/* Homepage gallery: title centred between the two rows */
.xgal-title { text-align: center; padding: clamp(1.6rem, 3.4vw, 2.8rem) 1rem; }
.xgal-title p { color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem; }

/* ==========================================================================
   SECTION ARCHITECTURE
   Every block renders <section class="site-section …"><div class="site-container">
   The outer element owns background, spacing and full-bleed behaviour.
   The inner element owns max width, gutters and alignment.
   ========================================================================== */

.site-section {
  position: relative;
  /* No background of its own: the body already paints ink, and the design's
     offset frame rectangles sit at z-index -1 — an opaque section background
     would swallow them (the gold frames on the hosts, the judges' cards). */
}
.site-section--deep { background: var(--ink-deep); }
.site-section--raised { background: var(--ink-raised); }

.site-section--space-standard { padding-block: var(--section); }
.site-section--space-compact { padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-section--space-spacious { padding-block: clamp(6rem, 12vw, 11rem); }
.site-section--space-top { padding-block: var(--section) 0; }
.site-section--space-bottom { padding-block: 0 var(--section); }
.site-section--space-joined { padding-block: clamp(2rem, 4vw, 3.4rem) 0; }
.site-section--space-closing { padding-block: clamp(2rem, 4vw, 3.4rem) var(--section); }
.site-section--space-flush { padding-block: 0; }

.site-container {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-container--narrow { max-width: var(--wrap-narrow); }
.site-container--full { max-width: none; padding-inline: 0; }

/* Sections that carry their own edge-to-edge media suppress container gutters. */
.site-section--bleed > .site-container { max-width: none; padding-inline: 0; }

/* A section following the sparkle band pulls up into it (design rhythm). */
.sparkle-band + .site-section { padding-top: clamp(4.5rem, 9vw, 8rem); }

/* ==========================================================================
   EDITOR PARITY
   The block editor renders the same classes, so the canvas matches the site.
   ========================================================================== */
/* The canvas itself carries the ink, not each section. Painting every section
   here outranked .site-section--deep / --raised (two classes against one), so
   the Background control appeared to do nothing in the editor: the class
   changed but the colour never did. */
.editor-styles-wrapper { background: var(--ink); }

/* ==========================================================================
   FORMS (WordPress native form builder)
   Extends the design's existing .field / .form-grid / .checks styling.
   ========================================================================== */
.heavies-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.field-required { color: var(--gold-bright); }
.field-help {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--faint);
}
.field-error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #e5a3a3;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #e5a3a3;
}
.form-message {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-soft);
  font-size: 0.92rem;
}
.form-message.is-success {
  border-color: rgba(135, 118, 78, 0.5);
  color: var(--gold-bright);
  background: rgba(135, 118, 78, 0.08);
}
.form-message.is-error {
  border-color: rgba(229, 163, 163, 0.5);
  color: #e5a3a3;
  background: rgba(229, 163, 163, 0.07);
}
.heavies-form button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

/* The intro column beside a form, replicating the design's winner-grid
   form pages (attend, contact, online entries). */
.form-aside > p { margin-top: 1em; color: var(--muted); }
.form-aside > h2 + p { margin-top: 1.4rem; }
.form-aside .def-rows { margin-top: 1.8rem; }
.form-aside .text-link { margin-top: 1.6rem; }
.form-aside .split-media { margin-top: 2rem; }
.form-aside .split-media img.is-bw { filter: grayscale(1); }
.split-copy .def-rows { margin-top: 1.8rem; }
.split-copy .def-rows + .text-link { margin-top: 1.8rem; }

/* The intro column of a grid-layout list section. */
.list-intro > p { margin-top: 1.4rem; color: var(--muted); }
.list-intro .split-media { margin-top: 2rem; }
.winner-copy .body-action { margin-top: 1.8rem; }

/* ==========================================================================
   Hero lockup, aligned form asides, animated FAQs
   ========================================================================== */

/* The hero wordmark supplied as artwork rather than set as live type. */
.hero h1.hero-h1--image { max-width: none; }
.hero-lockup {
  display: block;
  width: min(560px, 82vw);
  height: auto;
}
@media (max-width: 640px) { .hero-lockup { width: min(420px, 88vw); } }

/* Aside with a heading but no copy: the heading takes its own row so the form
   starts level with the rule beneath it. */
.form-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.form-section-grid > .form-aside-head { grid-column: 1; grid-row: 1; }
.form-section-grid > .form-aside { grid-column: 1; grid-row: 2; }
.form-section-grid > .heavies-form { grid-column: 2; grid-row: 2; align-self: start; }
.form-section-grid > .form-aside-head h2 { max-width: 14ch; margin-bottom: 0; }
.form-section-grid > .form-aside > *:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .form-section-grid { grid-template-columns: 1fr; }
  .form-section-grid > .form-aside-head,
  .form-section-grid > .form-aside,
  .form-section-grid > .heavies-form { grid-column: 1; grid-row: auto; }
}

/* Detail rows that keep pace with the height of the form beside them. */
@media (min-width: 901px) {
  .winner-grid.form-stretch,
  .form-section-grid.form-stretch { align-items: stretch; }
  .form-stretch > .form-aside { display: flex; flex-direction: column; }
  .form-stretch > .form-aside > .def-rows { display: flex; flex-direction: column; flex: 1 1 auto; }
  .form-stretch > .form-aside > .def-rows > .def-row { flex: 1 1 auto; align-content: center; }
}

/* FAQs open and close by sliding rather than snapping. */
.faq .faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.faq details[open] .faq-a-wrap,
.faq details.is-opening .faq-a-wrap { grid-template-rows: 1fr; }
.faq details.is-closing .faq-a-wrap { grid-template-rows: 0fr; }
/* The panel's own padding would survive the collapse and leave a 26px gap,
   so the closing space comes from the last paragraph's margin instead — that
   sits inside the clipped box and goes to nothing with it. */
.faq .faq-a-wrap > .faq-a { overflow: hidden; min-height: 0; padding-bottom: 0; }
.faq .faq-a-wrap > .faq-a > *:last-child { margin-bottom: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .faq .faq-a-wrap { transition: none; }
}

/* Pop-out gallery: a slow drift under a plain cross-fade. */
.popup-media { overflow: hidden; }
.popup-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Eased both ways so neither image arrives or leaves abruptly. */
  transition: opacity var(--popup-fade, 1.1s) cubic-bezier(0.4, 0, 0.3, 1);
}
.popup-slide.is-active { opacity: 1; }
.popup-media--gallery .popup-slide img {
  transform-origin: center;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  /* The drift runs on every slide for as long as the pop-out is open, rather
     than starting when a slide becomes active and being torn off when it
     stops. Tying it to the active class meant the outgoing image snapped back
     to its starting scale halfway through its own fade — that jump was the
     ugly part. It also has nothing to do with how fast the slides change: a
     long cycle means each slide shows a small, slow part of the movement. */
  .popup-media--gallery.is-running .popup-slide img {
    animation: popupKenBurns 28s ease-in-out infinite alternate;
  }
  /* Offset each one so they are not all drifting in lockstep. */
  .popup-media--gallery .popup-slide:nth-child(2) img { animation-delay: -7s; }
  .popup-media--gallery .popup-slide:nth-child(3) img { animation-delay: -14s; }
  .popup-media--gallery .popup-slide:nth-child(4) img { animation-delay: -21s; }
  .popup-media--gallery .popup-slide:nth-child(5) img { animation-delay: -3.5s; }
  .popup-media--gallery .popup-slide:nth-child(6) img { animation-delay: -17.5s; }
  @keyframes popupKenBurns {
    from { transform: scale(1.06) translate(0.8%, 0.6%); }
    to   { transform: scale(1.14) translate(-0.8%, -1%); }
  }
}

/* Nothing in a form may force the page wider than the screen. */
.form-grid > * { min-width: 0; }
.dd-toggle { max-width: 100%; }