/* ==========================================================================
   The Blackstar Christmas — homepage
   Palette is lifted from the BSF logo and the GHS 200 / 500 / 1,000 vouchers.
   ========================================================================== */

/* Headers */
@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.woff2?v=2026-10-17") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Script accents: ticker, invitation line, countdown label, footer tagline */
@font-face {
  font-family: "Last Christmas";
  src: url("../fonts/LastChristmas-BSF.woff2?v=2026-10-17") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Feature: only the voucher artwork uses it (set inside the SVGs) */
@font-face {
  font-family: "Feature";
  src: url("../fonts/FeatureDisplay-Regular.woff2?v=2026-10-17") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --paper: #F5EDE1;            /* card stock */
  --cream: #FBF4E8;            /* text on dark, invitation card */
  --ink: #000000;             /* proper black */
  --ink-soft: #5A524B;
  --line: rgba(27, 23, 20, 0.14);
  --line-strong: rgba(27, 23, 20, 0.28);

  /* Voucher greens */
  --evergreen: #006550;        /* GHS 200 field */
  --evergreen-deep: #004938;   /* GHS 200 tree */

  /* Ribbon reds */
  --ribbon: #F42130;           /* GHS 200 band */
  --red-deep: #D9142A;         /* same red, dark enough for small cream text */
  --red-ink: #C8102E;          /* red text on paper */
  --claret: #4F0710;           /* from the GHS 1,000 tree (#68000A), deepened */

  /* Logo accents */
  --gold: #FFBC00;
  --orange: #F89737;
  --kente: #00AF57;
  --onyx: #222128;
  --night: #000000;

  /* Type */
  /* Anton for headings · SF Pro for everything else · Last Christmas for script accents.
     SF Pro on Apple devices; Inter (loaded from Google Fonts) stands in on Android and Windows. */
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-script: "Last Christmas", "Snell Roundhand", cursive;
  /* Tracking by size: Anton is already condensed, so large sizes only need a nudge */
  --track-display: -0.015em;    /* Anton, large */
  --track-display-sm: 0em;      /* Anton under ~40px */
  --track-caps: 0.08em;         /* small SF Pro caps (eyebrows, labels) */

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --gutter: clamp(16px, 2vw, 28px);
  --wrap: 1320px;
  /* Inline padding for full-width blocks so their content lines up with .wrap */
  --page-x: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --section-y: clamp(88px, 11vw, 168px);
  --radius-card: clamp(22px, 2.6vw, 40px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--stick-top) + 16px);
  font-synthesis: none;          /* Anton and the script have one weight: never fake a bold */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
/* Lazy images appear whole: hidden until the head script marks them loaded, then a short fade */
.js img[loading="lazy"] { transition: opacity 300ms ease-out; }
.js img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
.js .photo img[loading="lazy"] { transition: opacity 300ms ease-out, transform 500ms var(--ease-out); }   /* keep their hover zooms */
.js .film img[loading="lazy"] { transition: opacity 300ms ease-out, transform 700ms var(--ease-out); }
p, dd, address { text-wrap: pretty; }     /* avoids a lone word on the last line */
.lead, .mode-note, .countdown-note, .hero-credit, .invite-card > p, .vendor-card > p, .facts dd { text-wrap: balance; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button, input { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---------- Type system ----------
   Anton caps for headers · SF Pro for body and interface · Last Christmas for accents */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.display-2 {
  font-size: clamp(3rem, 6.4vw, 6.5rem);
  line-height: 1;
  margin: 16px 0 28px;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 68%, transparent);
}
.lead {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;              /* <button> would otherwise get the browser's grey */
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 18px; height: 18px; flex: none; transition: transform 200ms var(--ease-out); }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 1.0625rem; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-ghost { border-color: color-mix(in srgb, var(--cream) 55%, transparent); color: var(--cream); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-red { background: var(--red-deep); color: var(--cream); }

@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { background: #FFC933; }
  .btn-ghost:hover { background: color-mix(in srgb, var(--cream) 10%, transparent); border-color: var(--cream); }
  .btn-outline:hover { background: var(--ink); color: var(--cream); }
  .btn-ink:hover { background: #262626; }
  .btn-cream:hover { background: #fff; }
  .btn-red:hover { background: #BF0F23; }
  .btn:hover .icon { transform: translateX(3px); }
}

/* ---------- Header ---------- */
:root { --header-h: 64px; }
/* Where sticky things stop: under the header */
:root { --stick-top: var(--header-h); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  position: relative;
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 0 var(--page-x);
}
.brand { display: inline-flex; border-radius: 8px; }
.brand img { width: auto; height: 52px; }
.nav { justify-self: center; display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 180ms ease;
}
.nav a:hover { color: var(--ink); }
.header-cta { min-height: 42px; padding: 0 18px; }
.menu-button {
  display: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 999px;
  background: var(--ink);
  cursor: pointer;
  place-items: center;
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.menu-button:active { transform: scale(0.95); }
.menu-lines, .menu-lines::before {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 200ms var(--ease-out);
}
.menu-lines { transform: translateY(-3px); }
.menu-lines::before { content: ""; transform: translateY(6px); }
.menu-button[aria-expanded="true"] .menu-lines { transform: translateY(0) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-lines::before { transform: translateY(0) rotate(-90deg); }

/* Mobile menu: a flat, full-width panel that unrolls from under the bar, set like the
   programme list (Anton links, hairline rows). It scrolls on its own on short screens. */
.mobile-menu {
  position: absolute;
  top: calc(100% + 1px);                       /* just under the hairline */
  left: 0;
  right: 0;
  max-height: calc(100svh - var(--header-h) - 1px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--page-x) 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 180ms var(--ease-out), visibility 0s linear 180ms;      /* closing: quick */
}
.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 300ms var(--ease-out), visibility 0s;                   /* opening: unrolls downward */
}
.mobile-links li { border-bottom: 1px solid var(--line); }
.mobile-links li:last-child { border-bottom: 0; }
.mobile-links a {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: var(--track-display-sm);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease;
}
.mobile-links a:active { color: var(--red-ink); }     /* press feedback */
@media (hover: hover) and (pointer: fine) {
  .mobile-links a:hover { color: var(--red-ink); }
}
.mobile-menu-when { margin-top: 20px; font-size: 0.875rem; color: var(--ink-soft); }
.mobile-menu-free { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--red-ink); }
/* Rows settle in just behind the unrolling edge */
.mobile-menu li,
.mobile-menu-when {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 140ms ease, transform 140ms var(--ease-out);
}
.mobile-menu.is-open li,
.mobile-menu.is-open .mobile-menu-when {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease, transform 320ms var(--ease-out);
  transition-delay: calc(50ms + var(--i) * 30ms);
}
/* Dim the page underneath and hold it still while the menu is open */
.menu-scrim {
  position: fixed;
  top: calc(var(--header-h) + 1px);
  right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: rgba(21, 18, 15, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
html.menu-open { overflow: hidden; }

/* ==========================================================================
   HERO — the logo's sun at page scale: a gold sunburst radiating from behind the
   logo, the Anton title, the logo's notched red ribbon, and a kente edge.
   ========================================================================== */
.hero {
  --focus: var(--ink);
  --sun-x: calc(100% - var(--page-x) - min(230px, 19%));   /* centre of the logo (right-aligned, up to 460px wide) */
  --sun-y: 46%;
  --ray: #FFC83A;
  position: relative;
  overflow: hidden;
  background: var(--gold);
  color: var(--ink);
  min-height: clamp(620px, calc(100svh - var(--header-h) - 1px), 900px);
  display: grid;
  align-items: center;
}
/* Flat rays from a repeating conic gradient, turning very slowly */
.hero-rays {
  /* --rays-r is set by main.js to the distance from the sun to the hero's farthest corner, so the
     turning square always covers the whole hero; 110vmax is the fallback before it's measured */
  position: absolute;
  width: calc(var(--rays-r, 110vmax) * 2);
  height: calc(var(--rays-r, 110vmax) * 2);
  left: calc(var(--sun-x) - var(--rays-r, 110vmax));
  top: calc(var(--sun-y) - var(--rays-r, 110vmax));
  will-change: transform;
  background: repeating-conic-gradient(from 0deg, var(--ray) 0deg 6deg, var(--gold) 6deg 12deg);
  animation: hero-turn 160s linear infinite;
}
@keyframes hero-turn { to { transform: rotate(360deg); } }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 32px clamp(24px, 4vw, 64px);
  padding: clamp(48px, 6vw, 88px) var(--page-x) clamp(72px, 8vw, 112px);
}
.invite {
  font-family: var(--font-script);
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  line-height: 1.1;
  color: var(--red-deep);
}
.invite-text {
  display: inline-block;
  /* Room for the script's swashes, so nothing is trimmed while the greeting fades; the
     negative margin keeps the text exactly where it sits. */
  padding: 0.3em 0.75em;
  margin: -0.3em -0.75em;
}
.hero-title {
  font-size: clamp(3.75rem, 8.6vw, 9rem);
  line-height: 0.96;
  margin: 10px 0 30px;
  color: var(--ink);
}
.hero-title .line { display: block; overflow: hidden; padding-top: 0.06em; margin-top: -0.06em; }
.hero-title .line > span { display: inline-block; }
.hero-title .line-red { color: var(--red-deep); }

/* The logo's ribbon: red, notched at both ends */
.hero-ribbon {
  display: inline-block;
  padding: 14px 40px;
  background: var(--ribbon);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
}
.hero-when { display: grid; gap: 6px; margin-top: 26px; }
.hero-free {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-display-sm);
  color: var(--red-deep);
  transform-origin: left center;
  animation: free-breathe 1.8s ease-in-out infinite;   /* a clear swell that catches the eye */
}
.hero-free-star { width: 1.2em; height: auto; aspect-ratio: 277.04 / 206.18; fill: var(--ink); flex: none; }
@keyframes free-breathe { 50% { transform: scale(1.15); } }
.hero-date {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-display-sm);
}
.hero-where { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .btn-ink { color: var(--gold); }
.hero .btn-outline { border-width: 2px; }
/* The presenting partners, on a flat plate in the page cream so the gold and teal marks read on the yellow.
   Heights are set per logo in the HTML so the two carry the same visual weight. */
/* Presented-by band in the hero ribbon's notched silhouette, in the same cream the
   logos sit on so the gold and navy marks stay legible. */
.hero-partners-ribbon {
  display: inline-block;
  margin-bottom: 28px;
  padding: 14px clamp(34px, 4.5vw, 52px);
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
}
.hero-partners {
  display: inline-flex;
  align-items: center;
  gap: clamp(24px, 4vw, 40px);
}
.hero-partners li { display: flex; }
.hero-partners img { height: var(--h); width: auto; }

.hero-logo { justify-self: end; width: min(100%, 460px); height: auto; }   /* right edge on the page edge, like the header buttons */

/* Kente edge: green, gold, red and black blocks under a black rule */
/* Bunting: triangle pennants (the vouchers' tree triangles) hanging from an edge. Drawn by script:
   each pennant's top corners sit on the string's curve and its tip hangs square to that edge;
   the string runs over the pennants, and neighbouring swags meet in a clean angle at the edge.
   Under the hero they hang onto the paper; at the top of the footer, into the green. */
:root {
  --bunting-hero: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='48' viewBox='0 0 360 48'><polygon points='11.00,2.13 49.00,5.47 27.37,33.68' fill='%23F42130'/><polygon points='71.00,7.02 109.00,9.02 88.42,37.98' fill='%23FFBC00'/><polygon points='131.00,9.80 169.00,10.46 149.47,40.13' fill='%23006550'/><polygon points='191.00,10.46 229.00,9.80 210.53,40.13' fill='%23F42130'/><polygon points='251.00,9.02 289.00,7.02 271.58,37.98' fill='%23FFBC00'/><polygon points='311.00,5.47 349.00,2.13 332.63,33.68' fill='%23006550'/><path d='M0 1.0 Q180.0 20.0 360 1.0' fill='none' stroke='%23000000' stroke-width='2'/></svg>");
  --bunting-footer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='48' viewBox='0 0 360 48'><polygon points='11.00,2.13 49.00,5.47 27.37,33.68' fill='%23F42130'/><polygon points='71.00,7.02 109.00,9.02 88.42,37.98' fill='%23FFBC00'/><polygon points='131.00,9.80 169.00,10.46 149.47,40.13' fill='%23002A21'/><polygon points='191.00,10.46 229.00,9.80 210.53,40.13' fill='%23F42130'/><polygon points='251.00,9.02 289.00,7.02 271.58,37.98' fill='%23FFBC00'/><polygon points='311.00,5.47 349.00,2.13 332.63,33.68' fill='%23002A21'/><path d='M0 1.0 Q180.0 20.0 360 1.0' fill='none' stroke='%23FBF4E8' stroke-width='2'/></svg>");
}
.bunting {
  height: 48px;
  margin-bottom: -48px;               /* hangs over the next section's top padding, takes no space */
  position: relative;
  z-index: 1;
  background: var(--bunting-hero) 0 0 / 360px 48px repeat-x;
}

/* ==========================================================================
   LETTER — the National Commission on Culture's message. A cream sheet on the
   paper, defined by a gold hairline like the invitation card: letterhead, body, signature.
   ========================================================================== */
.letter { padding: var(--section-y) 0 0; }   /* the programme's own top padding sets the gap below */
.letter-card {
  --letter-x: clamp(24px, 7vw, 104px);   /* shared by the bar and the sheet so their text lines up */
  max-width: 880px;
  margin-inline: auto;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 20px;
  overflow: hidden;
}
.letter-sheet { padding: clamp(32px, 6vw, 88px) var(--letter-x); }

/* Once read, the letter folds into this bar. Rows animate 1fr ↔ 0fr; the inner wrapper
   clips, so the sheet's padding folds away with it. */
.letter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: clamp(20px, 3vw, 28px) var(--letter-x);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.letter-toggle[hidden] { display: none; }
.letter-toggle[aria-expanded="true"] { border-bottom: 1px solid var(--line); }
.letter-toggle-label {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--track-display-sm);
}
.letter-plus {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background-color 200ms ease, color 200ms ease;
}
.letter-plus::before,
.letter-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 300ms var(--ease-out);
}
.letter-plus::after { transform: rotate(90deg); }
.letter-toggle[aria-expanded="true"] .letter-plus::after { transform: rotate(0deg); }   /* plus turns into a minus */
.letter-toggle:active .letter-plus { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .letter-toggle:hover .letter-plus { background: var(--ink); color: var(--cream); }
}

.letter-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 500ms var(--ease-out);
}
.letter-panel-inner { min-height: 0; overflow: hidden; }
.letter-card.is-collapsed .letter-panel { grid-template-rows: 0fr; }
.letter-card.is-collapsed .letter-panel-inner { visibility: hidden; transition: visibility 0s linear 500ms; }
.letter-card.is-instant .letter-panel,
.letter-card.is-instant .letter-panel-inner,
.letter-card.is-instant .letter-plus::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .letter-panel, .letter-panel-inner, .letter-plus::after { transition: none; }
}
.letter-head {
  padding-bottom: clamp(28px, 4vw, 40px);
  margin-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.letter-logo { height: clamp(52px, 6vw, 72px); width: auto; margin-bottom: clamp(28px, 4vw, 40px); }
.letter-title {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  margin-top: 16px;
  text-wrap: balance;
}
.letter-body { display: grid; gap: 1.1em; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.6; }
.letter-body em { font-style: italic; }
.letter-greetings {
  padding-left: 20px;
  border-left: 2px solid var(--ribbon);
  font-size: 1.15em;
  font-weight: 500;
  color: var(--red-ink);
}
.letter-sign { margin-top: clamp(36px, 5vw, 56px); }
.letter-signature {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);   /* same size as the letter body */
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Hero entrance (one-off, so it can take its time) ----------
   Waits for the fonts (.is-ready), then: logo pops, title rises line by line, ribbon draws, the rest settles. */
.js .hero-logo { opacity: 0; transform: scale(0.9) rotate(-3deg); transition: opacity 600ms ease-out, transform 900ms var(--ease-out); }
.js .invite,
.js .hero-when,
.js .hero-actions,
.js .hero-credit { opacity: 0; transform: translateY(12px); transition: opacity 700ms ease-out, transform 900ms var(--ease-out); }
.js .hero-title .line > span { transform: translateY(106%); transition: transform 1000ms var(--ease-out); }
.js .hero-ribbon { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%, 0 50%); transition: clip-path 800ms var(--ease-in-out); }
.js .hero-partners-ribbon { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%, 0 50%); transition: clip-path 800ms var(--ease-in-out); }
.js .hero-credit { transition-delay: 280ms; }   /* the logos settle in as their ribbon unrolls */
.js .invite { transition-delay: 120ms; }
.js .hero-title .line:nth-child(1) > span { transition-delay: 120ms; }
.js .hero-title .line:nth-child(2) > span { transition-delay: 200ms; }
.js .hero-logo { transition-delay: 260ms; }
.js .hero-ribbon { transition-delay: 520ms; }
.js .hero-when { transition-delay: 700ms; }
.js .hero-actions { transition-delay: 780ms; }
.is-ready .hero-logo,
.is-ready .invite,
.is-ready .hero-when,
.is-ready .hero-actions,
.is-ready .hero-credit,
.is-ready .hero-title .line > span { opacity: 1; transform: none; }
.is-ready .hero-ribbon,
.is-ready .hero-partners-ribbon { clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%); }

/* Bow (countdown card): knot and the black star, with a gold glow */
.bow-knot { fill: #FFFDF8; stroke: #FFFDF8; }
.bow-knot path { stroke: none; }
.bow-knot line { stroke-width: 8; stroke-linecap: round; }
.bow-star { fill: var(--ink); }   /* its gold glow is the SVG filter #bow-glow, which Safari also renders */

/* ==========================================================================
   PROGRAMME — list layout from the reference, with mini vouchers as thumbnails
   ========================================================================== */
.programme {
  position: relative;
  padding: var(--section-y) 0 0;   /* the last zone card runs straight into the vouchers */
}
.programme-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 128px);
  align-items: start;
}
.programme-intro { position: sticky; top: calc(var(--stick-top) + 40px); }
.programme-intro .btn { margin-top: 32px; }
.days { margin-top: 32px; border-top: 1px solid var(--line); max-width: 380px; }
.days li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.days li:last-child { border-bottom: 0; }
.day-date { font-weight: 600; color: var(--ink); }
.day-note { color: var(--ink-soft); }

.zones { border-top: 1px solid var(--line-strong); }
.zone {
  display: grid;
  grid-template-columns: clamp(96px, 10vw, 140px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line-strong);
}
.zone:last-child { border-bottom: 0; }
.zone-tile {
  width: 100%;
  aspect-ratio: 1;
  clip-path: inset(0 round 14px);
  transition: transform 260ms var(--ease-out);
}
.zone-photo { height: auto; object-fit: cover; background: var(--line); }
.tile-red    { --t-bg: #F42130; --t-tree: #BF0A1C; --t-band: #F89737; }
.tile-gold   { --t-bg: #FFBC00; --t-tree: #F89737; --t-band: #F42130; }
.tile-orange { --t-bg: #F89737; --t-tree: #D9661A; --t-band: #006550; }
.tile-green  { --t-bg: #006550; --t-tree: #004938; --t-band: #F42130; }
.tile-onyx   { --t-bg: #222128; --t-tree: #68000A; --t-band: #353535; }
@media (hover: hover) and (pointer: fine) {
  .zone:hover .zone-tile { transform: rotate(-3deg) translateY(-2px); }
}
.zone-kicker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.zone-num { font-weight: 600; color: var(--red-ink); }
.zone-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-display-sm);
  line-height: 1.1;
  text-wrap: balance;
}
.zone-text { margin-top: 20px; color: var(--ink-soft); max-width: 50ch; text-wrap: pretty; }
/* Highlights: flat hairline chips, no fill */
.zone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  max-width: 60ch;
}
.zone-tags li {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ink);
}


/* ---------- Home: the five zones as photo cards around the section intro ----------
   3 columns: intro + 2 cards, then 3 cards. Each card: photo, then a solid panel in its zone's
   colour, with a large soft zone number in its corner. */
/* Intro: heading on the left, the lead, days and link on the right, over the stack */
.zone-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 32px clamp(32px, 6vw, 112px);
  margin-bottom: clamp(48px, 6vw, 88px);
}
.zone-intro .display-2 { font-size: clamp(3rem, 6.4vw, 6.5rem); margin-bottom: 0; text-wrap: balance; }
.zone-intro .lead { max-width: 42ch; }
.zone-intro .btn { margin-top: 28px; }

/* The stack: full-width cards that stick under the header. Each later card slides up over
   the one before, and main.js sets --cover (0 to 1) as it does, so the covered card sinks
   back: it shrinks from the top edge, rounds its corners and dims. */
.zone-stack { position: relative; container-type: inline-size; }   /* lets the cards measure the page edge (cqw) */
.zone-card {
  --zc-bg: var(--evergreen);
  --zc-fg: var(--cream);
  --cover: 0;
  /* The page's own side margin, measured on the full-width stack (a % here would measure half a card) */
  --edge: max(var(--gutter), calc((100cqw - var(--wrap)) / 2));
  position: sticky;
  top: var(--stick-top);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: calc(100svh - var(--stick-top));
  min-height: 560px;
  overflow: hidden;
  background: var(--zc-bg);
  color: var(--zc-fg);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--cover) * 0.08));
  border-radius: calc(var(--cover) * 32px);
}
.zone-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--cover) * 0.5);
  pointer-events: none;
}
/* Zones run red, gold, green, gold, black: the flag's colours and the black star */
.zc-red    { --zc-bg: var(--red-deep);  --zc-fg: var(--cream); }
.zc-gold   { --zc-bg: var(--gold);      --zc-fg: var(--ink); }
.zc-green  { --zc-bg: var(--evergreen); --zc-fg: var(--cream); }
.zc-night  { --zc-bg: var(--ink);       --zc-fg: var(--cream); }

.zone-card-media { position: relative; overflow: hidden; background: var(--line); }
.zone-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zone-card:nth-child(even) .zone-card-media { order: 2; }   /* photos alternate sides */

/* Text keeps the page's own edge: the outer side is padded to the site's left/right margin */
.zone-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 88px) clamp(32px, 5vw, 88px) clamp(40px, 5vw, 88px) var(--edge);
}
.zone-card:nth-child(odd) .zone-card-body { padding-left: clamp(32px, 5vw, 88px); padding-right: var(--edge); }
.zone-card-body > * { max-width: 560px; }
.zone-card-num {
  position: absolute;
  top: clamp(24px, 3vw, 48px);
  right: clamp(24px, 3vw, 48px);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 9vw, 9rem);
  line-height: 0.85;
  color: color-mix(in srgb, var(--zc-fg) 18%, transparent);
  pointer-events: none;
}
.zone-card:nth-child(odd) .zone-card-num { right: var(--edge); }
.zone-card-kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--zc-fg) 72%, transparent);
}
.zone-card-title {
  margin: 16px 0 24px;
  padding-right: clamp(72px, 9vw, 160px);   /* clear of the number */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.8vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.zone-card-text {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--zc-fg) 88%, transparent);
  text-wrap: pretty;
}
.zone-card-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: clamp(24px, 3vw, 36px); }
.zone-card-tags li {
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--zc-fg) 34%, transparent);
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.3;
}

/* Phones and small tablets: photo on top filling what the text leaves, text below */
@media (max-width: 760px) {
  .zone-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .zone-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(140px, 1fr) auto;
    min-height: 0;
  }
  .zone-card:nth-child(even) .zone-card-media { order: 0; }
  .zone-card-body,
  .zone-card:nth-child(odd) .zone-card-body { justify-content: flex-start; padding: 24px var(--gutter) 28px; }
  .zone-card-num,
  .zone-card:nth-child(odd) .zone-card-num { top: 20px; right: var(--gutter); font-size: 4rem; }
  .zone-card-title { margin: 10px 0 14px; padding-right: 76px; font-size: clamp(2rem, 8.4vw, 2.5rem); letter-spacing: var(--track-display-sm); }
  .zone-card-text { font-size: 1rem; }
  .zone-card-tags { gap: 6px; padding-top: 18px; }
  .zone-card-tags li { padding: 5px 11px; font-size: 0.8125rem; }
}

/* ---------- Greetings ribbon ---------- */
.greetings {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--gold);
  color: var(--ink);
  padding: clamp(14px, 1.6vw, 22px) 0;
}
.greetings-track {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 40px);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.greetings span {
  font-family: var(--font-script);
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--red-deep);
  margin-inline: var(--ink, 0);   /* script capitals swash past their box; margins set from each word's measured ink so stars sit evenly between words */
}
.g-star {
  height: clamp(20px, 2.1vw, 32px);
  width: auto;
  aspect-ratio: 277.04 / 206.18;   /* the official star's own proportions */
  fill: var(--ink);
  flex: none;
}
@keyframes marquee { to { transform: translateX(calc(-50% - clamp(11px, 1.3vw, 20px))); } }

/* ==========================================================================
   VOUCHERS
   ========================================================================== */
.vouchers {
  --focus: var(--gold);
  background:
    radial-gradient(120% 80% at 50% 0%, #6A0B17 0%, transparent 60%),
    var(--claret);
  color: var(--cream);
  padding: var(--section-y) 0;
}
/* Same three columns and gap as the cards below, so the copy starts exactly over the second card */
.vouchers-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(20px, 3vw, 44px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.vouchers-copy { grid-column: 2 / -1; }
.vouchers-head .display-2 { margin-bottom: 0; }
.vouchers .lead { color: color-mix(in srgb, var(--cream) 80%, transparent); max-width: 44ch; }

.segmented {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.segmented button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  background: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
  cursor: pointer;
  transition: color 200ms ease;
}
.segmented button[aria-pressed="true"] { color: var(--ink); }
.segmented-thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--cream);
  transition: transform 240ms var(--ease-out);
}
.segmented[data-mode="gift"] .segmented-thumb { transform: translateX(100%); }
.mode-note {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  transition: opacity 180ms ease, filter 180ms ease;
}
.mode-note.is-swapping { opacity: 0; filter: blur(3px); }

.voucher-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.voucher-card {
  position: relative;
  border-radius: 3.7% / 6.4%;             /* the voucher's own corner radius */
  will-change: transform;
}
.voucher-art { width: 100%; height: auto; }
.voucher-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.34), transparent 48%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 240ms ease;
}
.voucher-card.is-hovered .voucher-sheen { opacity: 1; }
.voucher-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 16px;
  margin-top: 18px;   /* close to its own card, so it never reads as the next card's button */
}
[data-voucher-cta] { display: inline-block; }

/* Before vouchers go on sale (tools/site.json → vouchersOnSale): no buying, just the news */
.sale-note { margin-top: 24px; font-weight: 600; color: var(--gold); text-wrap: balance; }
.sale-note a { color: inherit; text-underline-offset: 3px; }
body:not([data-sales="soon"]) .sale-note { display: none; }
.voucher-terms { margin-top: 16px; font-size: 0.875rem; color: color-mix(in srgb, var(--cream) 72%, transparent); text-wrap: pretty; }
.voucher-terms a { color: inherit; text-underline-offset: 3px; }
[data-sales="soon"] .segmented,
[data-sales="soon"] .mode-note { display: none; }
.btn-soon {
  border-color: color-mix(in srgb, var(--cream) 35%, transparent);
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  cursor: default;
}
.btn-soon:active { transform: none; }

/* ==========================================================================
   VENUE + COUNTDOWN
   ========================================================================== */
.venue { padding: var(--section-y) 0; }
.venue-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.venue-name {
  margin: 14px 0 clamp(28px, 3vw, 44px);
  max-width: 13ch;
  text-wrap: balance;
}
.facts { border-top: 1px solid var(--line-strong); }
.facts div {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.facts div:last-child { border-bottom: 0; }
.facts dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 3px;
}
.facts dd { font-weight: 500; }
.venue-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.countdown {
  --focus: var(--gold);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: clamp(22px, 2.6vw, 36px);
  padding: clamp(28px, 3.6vw, 52px);
  border-radius: var(--radius-card);
  background: var(--evergreen);
  color: var(--cream);
}
/* The card is a small voucher: ribbon down the right, tied with the star */
.countdown { --rib-x: max(13%, 72px); }
.countdown::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(var(--rib-x) - 4px);
  width: 8px;
  background: linear-gradient(90deg, #E9DFCD 0%, #FFFDF8 42%, #DCD0BB 100%);
  pointer-events: none;
}
.countdown > :not(.countdown-bow) { position: relative; z-index: 1; max-width: calc(100% - var(--rib-x) - 36px); }
.countdown-bow {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: calc(var(--rib-x) - 58px);
  width: 116px;
  overflow: visible;
}
.countdown-bow .bow-star { opacity: 1; }
.countdown-label { font-family: var(--font-script); font-size: clamp(2rem, 2.6vw, 2.75rem); line-height: 1.15; color: var(--gold); }
.countdown-grid[hidden] { display: none; }   /* during and after the festival there's nothing to count */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: clamp(14px, 1.8vw, 26px);
  padding: 10px 0;
}
.unit { display: grid; gap: 6px; }
.num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 4.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: var(--track-display-sm);
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  display: inline-block;
}
.unit-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
}
.countdown-note:empty { display: none; }
.countdown-note { max-width: 32ch; font-size: 0.9375rem; color: color-mix(in srgb, var(--cream) 80%, transparent); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
  --focus: var(--gold);
  background: var(--night);
  color: var(--cream);
  padding: var(--section-y) 0;
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px clamp(40px, 6vw, 110px);
  align-items: center;
}
.about-copy .display-2 { margin-bottom: clamp(28px, 3vw, 40px); }
.about-text + .about-text { margin-top: 0.85em; }
.about-text {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 86%, transparent);
  max-width: 42ch;
}

.film {
  position: relative;
  display: block;
  aspect-ratio: 9 / 12.5;               /* the 2025 clip is portrait */
  overflow: hidden;
  border-radius: var(--radius-card);
  color: var(--cream);
  text-decoration: none;
  background: #000;
}
.film img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 700ms var(--ease-out); }
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7));
}
.film-play {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  width: clamp(64px, 7vw, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease-out);
}
.film-play svg { width: 38%; fill: currentColor; transform: translateX(6%); }
.film:active .film-play { transform: translate(-50%, -50%) scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .film:hover img { transform: scale(1.02); }
  .film:hover .film-play { transform: translate(-50%, -50%) scale(1.05); }
}
.film-caption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 40px);
  display: grid;
  gap: 10px;
  font-family: var(--font-display);
  right: clamp(20px, 3vw, 44px);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  letter-spacing: var(--track-display-sm);
  text-transform: uppercase;
  line-height: 1.08;
}

.partners {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 24px 40px;
  align-items: center;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(251, 244, 232, 0.16);
}
.partner-list { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(32px, 4.4vw, 64px); }
/* Logo files are trimmed to their ink, so boxes centre on what you see.
   Each logo sets its own --h for equal optical weight: wide wordmarks run shorter,
   compact or tall marks taller, dense solid marks a touch smaller. */
.partner-list { --logo-scale: 1; }
.partner-list img { height: calc(var(--h, 56px) * var(--logo-scale)); width: auto; }

/* ==========================================================================
   JOIN + VENDORS
   ========================================================================== */
.join { padding: var(--section-y) 0; }
.join-grid {
  --card-pad: clamp(28px, 4vw, 56px);   /* shared by both cards so their contents line up */
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(16px, 2vw, 28px);
}
/* An invitation card: defined only by a gold hairline. The padding gives back the
   border's 1px so its outer size and text position match the vendor card exactly. */
.invite-card {
  position: relative;
  padding: calc(var(--card-pad) - 1px);
  border-radius: 20px;
  border: 1px solid var(--gold);
}
.invite-title {
  font-size: clamp(2.5rem, 4.4vw, 4.25rem);
  margin: 14px 0 20px;
}
.invite-card > p:not(.eyebrow) { color: var(--ink-soft); max-width: 40ch; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.signup input {
  flex: 1 1 260px;
  min-height: 56px;
  padding: 0 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 1.0625rem;
  transition: border-color 180ms ease;
}
.signup input::placeholder { color: #9A918A; }
.signup input:focus { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--ink); }
.signup input[aria-invalid="true"] { border-color: var(--red-ink); }
.signup .btn { min-height: 56px; padding: 0 28px; font-size: 1rem; }
[data-signup-label] { display: inline-block; }
.form-msg { flex-basis: 100%; font-size: 0.9375rem; color: var(--ink-soft); }
.form-msg:empty { display: none; }   /* no reserved gap under the button until there's something to say */
.form-msg.is-error { color: var(--red-ink); }

.vendor-card {
  --focus: var(--cream);
  display: grid;
  align-content: start;
  padding: var(--card-pad);
  border-radius: 20px;
  background: var(--red-deep);
  color: var(--cream);
}
.vendor-title {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  margin: 14px 0 20px;
}
.vendor-card > p:not(.eyebrow) { max-width: 34ch; }
.vendor-card .btn { justify-self: start; margin-top: 30px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 48px;
  background: var(--bunting-footer) 0 0 / 360px 48px repeat-x;
}
.site-footer {
  position: relative;
  --focus: var(--gold);
  background: var(--evergreen-deep);
  color: var(--cream);
  padding: clamp(72px, 8vw, 112px) 0 40px;
}
.footer-top { display: block; }   /* the journey line, full width */
/* The journey, in one straight line: Panafest through to Into the Future. On wide screens the type is
   sized to the space (the line is up to 52.5em long in SF Pro, which sets wider at small sizes) so it always fits; on phones it would be too small, so the
   same line scrolls instead, with the official star marking where it loops. */
.footer-journey-wrap { container-type: inline-size; overflow: hidden; }
.journey-track { display: flex; width: max-content; }
.footer-journey {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: min(1.5rem, calc(100cqi / 52.5));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--cream);
}
.footer-journey li { display: flex; align-items: center; gap: 0.45em; }
.footer-journey[aria-hidden="true"], .footer-journey .journey-loop-star { display: none; }
.journey-arrow { width: 0.8em; height: 0.8em; flex: none; color: var(--gold); }
.journey-now { color: var(--gold); }
@media (max-width: 860px) {   /* fitted, the line would drop below ~15px: scroll it instead */
  .footer-journey { font-size: 1.125rem; padding-right: 0.9em; gap: 0.5em; }
  .footer-journey[aria-hidden="true"], .footer-journey .journey-loop-star { display: flex; }
  .journey-loop-star svg { width: 1.1em; height: auto; aspect-ratio: 277.04 / 206.18; fill: var(--gold); margin-left: 0.45em; }
  .journey-track { animation: journey-scroll 26s linear infinite; }   /* constant motion → linear */
}
@keyframes journey-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .journey-track { animation: none; }
  .footer-journey-wrap { overflow-x: auto; }
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 36px;
  border-top: 1px solid rgba(251, 244, 232, 0.16);
}
.footer-head { font-size: 0.78rem; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.site-footer address,
.footer-links { font-size: 0.9375rem; line-height: 1.7; color: color-mix(in srgb, var(--cream) 82%, transparent); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  margin-top: 64px;
}
.footer-legal { font-size: 0.8125rem; color: color-mix(in srgb, var(--cream) 60%, transparent); }
.footer-policies { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.8125rem; color: color-mix(in srgb, var(--cream) 72%, transparent); }
/* "Website by" and the Transvo logomark, one link */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  text-decoration: none;
  transition: color 160ms ease;
}
.footer-credit img { width: 1.75em; height: 1.75em; }
@media (hover: hover) and (pointer: fine) {
  .footer-credit:hover { color: var(--cream); }
}

/* ==========================================================================
   LAUNCH INVITATION — pop-up built by main.js, 3 seconds after arrival
   ========================================================================== */
html.launch-open { overflow: hidden; }
.launch {
  --focus: var(--ink);
  /* As wide as fits: 560px, the screen less the gutters, or what the height allows for a 4:5 poster plus its bar */
  width: min(560px, calc(100vw - 32px), calc((100svh - 104px) * 0.8));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 260ms var(--ease-out), transform 380ms var(--ease-out);
}
.launch.is-open { opacity: 1; transform: none; }
.launch::backdrop { background: rgb(0 0 0 / 0.7); opacity: 0; transition: opacity 260ms ease-out; }
.launch.is-open::backdrop { opacity: 1; }
.launch-card { background: var(--cream); border-radius: 20px; overflow: hidden; }
.launch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 20px;
}
.launch-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-wrap: balance;
}
.launch-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.launch-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.launch-close:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .launch-close:hover { background: var(--ink); color: var(--cream); }
}
.launch-art { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .launch, .launch::backdrop { transition: none; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .nav { display: none; }
  :root { --header-h: 60px; }
  .menu-button { display: grid; }
  .header-bar { grid-template-columns: auto 1fr auto auto; gap: 12px; }
  .header-actions { grid-column: 3; }
  .header-cta { min-height: 40px; padding: 0 16px; }
  .menu-button { grid-column: 4; }
}
@media (min-width: 1101px) {
  .mobile-menu, .menu-scrim { display: none; }
  /* the menu button is hidden here, so drop its column (and its gap): the buttons end on the page edge */
  .header-bar { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 1023px) {
  /* Stacked hero: logo centred on top, the words below on the page edge; rays radiate from the logo */
  /* Stacked hero: one centred column, logo on top, rays radiating from it */
  .hero { --sun-x: 50%; --sun-y: calc(28px + min(62vw, 280px) * 0.55); min-height: 0; align-items: start; text-align: center; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; padding: 28px var(--page-x) 64px; }
  .hero-logo { order: -1; justify-self: center; width: min(62vw, 280px); margin-bottom: 20px; }
  .hero-copy { display: grid; justify-items: center; }
  .hero-when { justify-items: center; }
  .hero-free { justify-self: center; transform-origin: center; }
  .hero-actions { justify-content: center; width: 100%; max-width: 480px; }
  .hero-title { font-size: clamp(2.875rem, 15vw, 6rem); margin-bottom: 26px; }
  .hero-actions .btn { flex: 1 1 auto; }

  .programme-grid,
  .vouchers-head,
  .venue-grid,
  .about-grid,
  .join-grid { grid-template-columns: 1fr; }
  .vouchers-copy { grid-column: auto; }
  .film { max-width: 480px; }
  .programme-intro { position: static; }
  .voucher-list { grid-template-columns: 1fr; max-width: 520px; row-gap: 56px; }   /* stacked: each card and its button read as one item */
  .partners { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .brand img { height: 48px; }
  .header-cta { min-height: 40px; padding: 0 14px; gap: 6px; font-size: 0.875rem; }
  .header-cta .icon { width: 16px; height: 16px; }
  .hero-actions .btn { min-height: 54px; padding: 0 20px; font-size: 1rem; }
  .hero-ribbon { padding: 12px 30px; }
  .zone { grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 0; }
  .zone-body { display: contents; }
  .zone-tile { grid-row: 1 / span 2; align-self: center; clip-path: inset(0 round 10px); }
  .zone-kicker { grid-column: 2; align-self: end; margin-bottom: 6px; }
  .zone-title { grid-column: 2; align-self: start; }
  .zone-text, .zone-tags { grid-column: 1 / -1; max-width: none; }
  .countdown-grid { gap: 14px; }
  .num { font-size: 2.75rem; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  /* Two logos per row; each fits its cell width and a shared height so they read at similar sizes */
  .partner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; align-items: center; }
  .partner-list { --logo-scale: 0.78; }
  .partner-list li { display: flex; align-items: center; min-height: 64px; }
  .partner-list img { max-width: 100%; object-fit: contain; object-position: left center; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 340px) {
  .header-cta { display: none; }
}

/* ==========================================================================
   Preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .greetings-track { animation: none; }
  .hero-rays { animation: none; }
  .hero-free { animation: none; }
  .js .hero-title .line > span,
  .js .invite,
  .js .hero-when,
  .js .hero-actions,
  .js .hero-credit,
  .js .hero-logo { transform: none !important; }
  .js .hero-ribbon,
  .js .hero-partners-ribbon { clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%); }
  .js .hero-title .line > span { transition: none; }
  .voucher-card { transform: none !important; }
  .mobile-menu { clip-path: none; opacity: 0; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .mobile-menu.is-open { opacity: 1; transition: opacity 150ms ease, visibility 0s; }
  .mobile-menu li, .mobile-menu-when { transform: none !important; }
}

/* ==========================================================================
   INNER PAGES: about, contact, vendors, vouchers, photos
   ========================================================================== */

/* ---------- Header: two actions, current page ---------- */
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.mobile-links a[aria-current="page"] { color: var(--red-ink); }
.header-cta-vendor[aria-current="page"] { background: var(--ink); color: var(--cream); }

/* ---------- Page head: a full-bleed colour block, title on the shared left edge ---------- */
.page-head {
  --focus: var(--gold);
  background: var(--evergreen);
  color: var(--cream);
  padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 7vw, 104px);
}
.page-head-green { background: var(--evergreen); }
.page-head-red { background: var(--red-deep); }
.page-head-night { background: var(--night); }
.page-head-gold { --focus: var(--ink); background: var(--gold); color: var(--ink); }
.page-title {
  font-size: clamp(3.25rem, 8.4vw, 8rem);
  line-height: 0.96;
  margin: 16px 0 28px;
  max-width: 13ch;
  text-wrap: balance;
}
.page-head .lead { color: color-mix(in srgb, currentColor 82%, transparent); max-width: 46ch; }

/* Launch programme: numbered running order on hairline rows (no rule under the last) */

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section-tight { padding-top: 0; }
.section-rule .wrap { border-top: 1px solid var(--line-strong); padding-top: var(--section-y); }
.section-rule { padding-top: 0; }
.section-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  margin-top: 16px;
  text-wrap: balance;
}
.section-intro { margin-bottom: clamp(40px, 5vw, 72px); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 7vw, 128px);
  align-items: start;
}

/* Label and statement rows on hairlines (mission, theme, tagline; how vouchers work) */
.statements { border-top: 1px solid var(--line-strong); }
.statements div {
  display: grid;
  grid-template-columns: minmax(110px, 180px) 1fr;
  gap: 8px 24px;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line-strong);
}
.statements div:last-child { border-bottom: 0; }
.statements dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 6px;
}
.statements dd { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; text-wrap: pretty; }

/* ---------- About: team ---------- */
.person {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 32px clamp(40px, 7vw, 128px);
  align-items: start;
}
.person-photo {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 500 / 574;
  object-fit: cover;
  border-radius: 20px;
  background: var(--line);
}
.person-name {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1;
  margin: 14px 0 24px;
}
.person-body p:not(.eyebrow) { color: var(--ink-soft); max-width: 58ch; line-height: 1.6; }
.person-body p:not(.eyebrow) + p { margin-top: 16px; }
.about-more { margin-top: 32px; }

/* ---------- Contact + vendors: aside and form ---------- */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(40px, 6vw, 110px);
  align-items: start;
}
.form-aside { border-top: 1px solid var(--line-strong); }
.office { padding: 28px 0; border-bottom: 1px solid var(--line); }
.office:last-child { border-bottom: 0; }
.office .eyebrow { margin-bottom: 12px; }
.office address, .office > p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.6; }
.office a { text-underline-offset: 3px; }
.office-email { display: inline-block; margin-top: 8px; font-weight: 600; }
.social-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.social-list a { font-weight: 600; }
.trade-list div + div { margin-top: 18px; }
.trade-list dt { font-weight: 600; }
.trade-list dd { margin-top: 4px; color: var(--ink-soft); line-height: 1.6; }
.feedback-quote p { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; text-wrap: pretty; }
.feedback-quote footer { margin-top: 14px; font-size: 0.875rem; color: var(--ink-soft); }
.feedback-note { text-wrap: pretty; }

/* ---------- FAQ: a label column, questions on hairline rows that open in place ---------- */
.faq-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 20px clamp(40px, 6vw, 110px);
  align-items: start;
}
.faq-group + .faq-group { margin-top: clamp(56px, 7vw, 96px); }
.faq-group-title { color: var(--ink-soft); padding-top: 26px; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq { border-bottom: 1px solid var(--line-strong); }
.faq:last-child { border-bottom: 0; }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: background-size 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.faq[open] summary::after { background-size: 14px 1.5px, 1.5px 0; }
.faq-answer { padding: 0 0 26px; max-width: 62ch; color: var(--ink-soft); line-height: 1.6; }
.faq-answer p { text-wrap: pretty; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a, .legal a { text-underline-offset: 3px; }
@media (hover: hover) { .faq summary:hover { color: var(--red-ink); } }
@media (max-width: 1023px) {
  .faq-group { grid-template-columns: 1fr; }
  .faq-group-title { padding-top: 0; }
}

/* ---------- Terms, privacy, refunds: one readable column on hairline sections ---------- */
.legal { max-width: 72ch; border-top: 1px solid var(--line-strong); }
.legal section { padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
.legal section:last-child { border-bottom: 0; }
.legal h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.3; margin-bottom: 20px; }
.legal p, .legal li { line-height: 1.6; text-wrap: pretty; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 14px; }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--ink-soft); }

/* A card defined by a hairline only. Its padding gives back the 1px border. */
.form-card {
  --card-pad: clamp(24px, 4vw, 56px);
  padding: calc(var(--card-pad) - 1px);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: var(--cream);
}
.form-title { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 28px; }
.field { display: grid; gap: 8px; }
.field + .field { margin-top: 22px; }
.field label:not(.dropzone), .field-label { font-size: 0.9375rem; font-weight: 600; }
.req { color: var(--red-ink); }
.optional { margin-left: 6px; font-weight: 400; color: var(--ink-soft); }
.field input:not([type=file]),
.field textarea {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  transition: border-color 160ms ease;
}
.field textarea { min-height: 128px; padding: 14px 18px; line-height: 1.5; resize: vertical; }
.field input:not([type=file]):focus,
.field textarea:focus { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--ink); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red-ink); }
.field-hint { font-size: 0.875rem; color: var(--ink-soft); }
.field-error { font-size: 0.875rem; font-weight: 500; color: var(--red-ink); }
.field-error:empty { display: none; }
.honeypot { position: absolute; left: -9999px; }

/* Business type: radio pills. The documents it needs appear beneath (forms.js). */
.field-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-choices legend { padding: 0; margin-bottom: 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.choice:active span { transform: scale(0.97); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.choice input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.has-error .choice span { border-color: var(--red-ink); }
@media (hover: hover) and (pointer: fine) {
  .choice:hover input:not(:checked) + span { border-color: var(--ink); }
}
.field[data-doc][hidden] { display: none; }

/* File picker: the whole box is the label, so a tap anywhere opens the chooser */
.dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.dropzone:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--ink); }
.dropzone.is-dragging { border-color: var(--ink); background: var(--paper); }
.dropzone.has-file { border-style: solid; }
.has-error .dropzone { border-color: var(--red-ink); }
.dropzone-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.dropzone-icon svg { width: 22px; height: 22px; }
.dropzone-text { display: grid; gap: 2px; min-width: 0; }
.dropzone-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-meta { font-size: 0.875rem; color: var(--ink-soft); }
.dropzone-action {
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dropzone:hover { border-color: var(--ink); }
  .dropzone:hover .dropzone-action { background: var(--ink); color: var(--cream); }
}

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 32px; }
/* While sending, the button keeps its colour; the label morphing to "Sending…" is the feedback */
.btn[disabled] { cursor: progress; }
.form-status { flex: 1 1 240px; font-size: 0.9375rem; color: var(--ink-soft); text-wrap: pretty; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--red-ink); }
.form-status.is-done { color: var(--evergreen); font-weight: 600; }
.form-note { margin-top: 20px; font-size: 0.8125rem; color: var(--ink-soft); }

/* Thank-you panel: replaces the form as soon as it's sent; background steps report in below */
.form-card { overflow: clip; overflow-clip-margin: 8px; }
.form-done { display: grid; justify-items: start; gap: 0; outline: none; }
.form-done[hidden] { display: none; }
.done-mark { width: 52px; height: 52px; margin-bottom: 24px; }
.done-ring, .done-tick { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.done-ring { stroke: var(--evergreen); stroke-width: 2; stroke-dasharray: 139; stroke-dashoffset: 0; }
.done-tick { stroke: var(--evergreen); stroke-width: 2.5; stroke-dasharray: 30; stroke-dashoffset: 0; }
.form-done:not([hidden]) .done-ring { animation: done-draw-ring 420ms var(--ease-out) both; }
.form-done:not([hidden]) .done-tick { animation: done-draw-tick 260ms var(--ease-out) 220ms both; }
@keyframes done-draw-ring { from { stroke-dashoffset: 139; } }
@keyframes done-draw-tick { from { stroke-dashoffset: 30; } }
.form-done[data-state="failed"] .done-mark { display: none; }
.done-title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; }
.done-text { margin-top: 20px; color: var(--ink-soft); max-width: 40ch; }
.done-progress {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.done-progress[hidden] { display: none; }
.done-progress > span:last-child { min-width: 0; transition: opacity 180ms ease, filter 180ms ease; }
.done-progress.is-swapping > span:last-child { opacity: 0; filter: blur(3px); }
.done-dot {
  flex: none;
  width: 8px; height: 8px;
  margin-top: calc(0.775em - 4px);          /* centred on the first line (line-height 1.55) */
  border-radius: 999px;
  background: var(--gold);
  animation: done-pulse 1.1s ease-in-out infinite;
}
.done-progress[data-state="saved"] { color: var(--evergreen); font-weight: 600; }
.done-progress[data-state="saved"] .done-dot { background: var(--evergreen); animation: none; }
@keyframes done-pulse { 50% { opacity: 0.25; } }
.done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.done-actions [hidden] { display: none; }

/* ---------- Vouchers page ---------- */
.vouchers-page { padding-top: clamp(56px, 8vw, 120px); }
.vouchers-page .display-2 { font-size: clamp(3.25rem, 8.4vw, 8rem); line-height: 0.96; }
.cta-band {
  --focus: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: var(--red-deep);
  color: var(--cream);
}
.cta-title { font-size: clamp(2rem, 3.6vw, 3.5rem); margin-top: 12px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.schedule-day .zone-title { text-wrap: balance; }

/* ---------- Photos ---------- */
.album-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.album-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.album-nav span { font-weight: 400; color: color-mix(in srgb, currentColor 65%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .album-nav a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
}

.album { padding: clamp(56px, 7vw, 104px) 0 0; }
.album:last-child { padding-bottom: var(--section-y); }
.album-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-strong);
}
.album-title { font-size: clamp(2.25rem, 4.4vw, 4rem); }
.album-meta { font-size: 0.9375rem; color: var(--ink-soft); }

/* Justified rows: every tile grows in proportion to its aspect ratio, so each row
   shares one height and fills the width. The filler keeps the last row at natural size. */
.photo-grid { --row: clamp(150px, 19vw, 280px); display: flex; flex-wrap: wrap; gap: 8px; }
.photo-grid::after { content: ""; flex: 1000 1 0; }
.photo {
  position: relative;
  flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--row));
  aspect-ratio: var(--r);
  overflow: hidden;
  border-radius: 6px;
  background: var(--line);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .photo:hover img { transform: scale(1.03); }
}

/* Viewer */
html.lightbox-open { overflow: hidden; }
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0F0C0A;
  outline: none;
  color: var(--cream);
  --focus: var(--gold);
}
.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: lb-in 200ms var(--ease-out);
}
.lightbox::backdrop { background: transparent; }
@keyframes lb-in { from { opacity: 0; } }
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--page-x);
}
.lb-count { font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--cream) 75%, transparent); }
.lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(16px, 7vw, 96px) clamp(16px, 3vw, 40px);
  touch-action: pan-y;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  animation: lb-img-in 240ms var(--ease-out);
}
.lb-img.is-loading { filter: blur(6px); }
@keyframes lb-img-in { from { opacity: 0; transform: scale(0.97); } }
.lb-btn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent);
  border-radius: 999px;
  background: rgba(15, 12, 10, 0.6);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.lb-btn:active { transform: scale(0.95); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-prev, .lb-next { position: absolute; top: 50%; translate: 0 -50%; }
.lb-prev { left: clamp(12px, 2vw, 28px); }
.lb-next { right: clamp(12px, 2vw, 28px); }
@media (hover: hover) and (pointer: fine) {
  .lb-btn:hover { background: var(--cream); color: var(--ink); }
}

/* ---------- Inner pages: tablet and phone ---------- */
@media (max-width: 1100px) {
  .header-cta-vendor { display: none; }
}
@media (max-width: 1023px) {
  .split, .form-layout, .person { grid-template-columns: minmax(0, 1fr); }
  .person-photo { max-width: 320px; }
}
@media (max-width: 600px) {
  /* Letter: slimmer sides so "the National Commission on Culture" keeps to one line under "A message from" */
  .letter-card { --letter-x: 20px; }
  .letter .eyebrow { font-size: clamp(0.6875rem, 3.3vw, 0.78rem); }
  /* Button pairs and form buttons go full width on phones, like the hero's */
  .venue-actions .btn,
  .signup .btn { flex: 1 1 100%; }
  .statements div { grid-template-columns: 1fr; }
  .statements dt { padding-top: 0; }
  .photo-grid { --row: 112px; gap: 4px; }
  .photo { border-radius: 4px; }
  .lb-prev, .lb-next { display: none; }            /* swipe instead */
  .lb-stage { padding: 0 0 24px; }
  .lb-img { border-radius: 0; }
  .form-card { border-radius: 20px; }
  .dropzone { grid-template-columns: auto minmax(0, 1fr); }
  .dropzone-action { display: none; }
  .cta-band { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open], .lb-img { animation: none; }
  .form-done:not([hidden]) .done-ring, .form-done:not([hidden]) .done-tick { animation: none; }
  .done-dot { animation-duration: 2.4s; }
  .photo img { transition: none; }
  .zone-card { transform: none; border-radius: 0; }
  .zone-card::after { opacity: 0; }
}

/* ---------- Press release page ---------- */
.press-date { margin-top: 16px; font-weight: 600; }
.press-pull {
  padding-left: 20px;
  border-left: 2px solid var(--ribbon);
  font-size: 1.15em;
  color: var(--red-ink);
}
.press-list { display: grid; gap: 0.6em; padding-left: 1.4em; list-style: decimal; }
.press-list li::marker { font-weight: 700; color: var(--red-deep); }
.press-links { display: grid; gap: 0.3em; }
.press-links a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.press-signed { margin-bottom: 8px; color: var(--ink-soft); }