/* BUILD: 2026-08-20h */
/* ==========================================================================
   Spark Foundation — site styles
   --------------------------------------------------------------------------
   BRAND NOTE (read me before a designer touches this file)

   The Spark Foundation logo is supplied as an animation and lives in
   assets/spark-logo.gif. --spark below is sampled straight out of that file,
   so the tile the logo sits on and every pink element on the page are the
   same colour to the byte.

   There is no full brand kit yet - the refresh is scheduled for Year 1 of the
   current grant program - so the accent colours and the two typefaces are
   considered, swappable defaults. To rebrand, change ONLY the values in :root.
   Nothing else in this file, and nothing in the HTML, hardcodes a colour or
   a font.
   ========================================================================== */

:root {
  /* --- Core brand ------------------------------------------------------- */
  --spark:        #ED3068;   /* sampled from the supplied logo animation */
  --spark-deep:   #C3194C;
  --spark-tint:   #FDEDF2;

  /* --- Accent colourways ------------------------------------------------ *
   * Spark's 2022+ event assets ship in named "colourways": turquoise,
   * mauve, purple, apricot, green, grass green, blue, magenta. These are
   * screen-accurate stand-ins for that system until the refresh lands.      */
  --turquoise:    #10B9B0;
  --purple:       #7A3BD6;
  --apricot:      #FF9A45;
  --green:        #2BAE72;
  --blue:         #2E6FF2;
  --mauve:        #B283D8;

  /* --- Neutrals --------------------------------------------------------- */
  --ink:          #16131C;
  --ink-2:        #3E3A48;
  --ink-3:        #6B6577;
  --rule:         #E4E0E8;
  --paper:        #FFFFFF;
  --paper-2:      #FAF8FA;
  --paper-3:      #F3F0F5;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* --- Metrics ---------------------------------------------------------- */
  --wrap:         1120px;
  --wrap-narrow:  760px;
  --radius:       14px;
  --radius-sm:    8px;
  --shadow:       0 1px 2px rgba(22,19,28,.06), 0 8px 24px rgba(22,19,28,.06);
  --shadow-lift:  0 2px 4px rgba(22,19,28,.08), 0 18px 44px rgba(22,19,28,.12);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--spark-deep); text-underline-offset: 3px; }
a:hover { color: var(--spark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em 0;
  font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
h4 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 1.1em 0; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); }

section { padding: 84px 0; }
section.tight { padding: 56px 0; }
.bg-tint { background: var(--paper-2); }
.bg-tint-2 { background: var(--paper-3); }
.bg-ink { background: var(--ink); color: #D6D2DE; }
.bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--spark);
  margin: 0 0 14px 0;
}
.bg-ink .eyebrow { color: var(--apricot); }

/* ==========================================================================
   Skip link
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

/* ==========================================================================
   Header / nav
   ========================================================================== */

/* The header is the brand colour, so the logo tile dissolves straight into it
   and the whole bar reads as one piece of the identity. Anything sitting on
   this bar has to be white. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--spark);
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 124px;
}

.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  color: var(--ink); letter-spacing: -0.02em; white-space: nowrap;
}

/* --- Animated logo lockup ------------------------------------------------
 * The supplied logo is an animation: the spark device morphs through a set of
 * poses and comes to rest on the canonical mark. Two files are shipped and CSS
 * picks between them, so anyone who has asked their system to reduce motion
 * gets the still version instead. The header uses spark-logo-loop.gif, which
 * runs continuously. Swap it for spark-logo.gif if you would rather it played
 * through once on load and then came to rest on the canonical mark.
 * -------------------------------------------------------------------------- */
.logo { display: block; width: auto; }
.logo--still { display: none; }
/* No rounded corner in the header - the logo's own pink field and the header
   are the same colour, so any radius would draw an edge that isn't there. */
.brand .logo { height: 92px; }
.footer-brand .logo { height: 78px; }

@media (prefers-reduced-motion: reduce) {
  .logo--motion { display: none; }
  .logo--still  { display: block; }
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav .btn { white-space: nowrap; }
.nav a {
  font-family: var(--font-display); font-size: .98rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding: 9px 15px; border-radius: 999px;
}

/* --- Two nav states, deliberately mutually exclusive ---------------------
 * Above 860px the nav sits ON the magenta bar, so everything is white.
 * Below 860px it becomes a white dropdown panel, so everything is dark.
 * These are min-width / max-width so neither can ever leak into the other -
 * an earlier version set white in the base rule and only tried to undo it
 * for mobile, which is how the menu ended up white on white.
 * ------------------------------------------------------------------------ */
@media (min-width: 1041px) {
  .nav a { color: #fff; }
  .nav a:hover { background: rgba(255,255,255,.18); color: #fff; }
  .nav a[aria-current="page"] { color: var(--spark-deep); background: #fff; font-weight: 700; }
  .nav .btn-primary { background: #fff; color: var(--spark-deep); box-shadow: none; }
  .nav .btn-primary:hover { background: var(--ink); color: #fff; }
  .nav .btn-ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
  .nav .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
}

.nav-toggle {
  display: none; background: none; border: 1.5px solid rgba(255,255,255,.6);
  border-radius: var(--radius-sm); padding: 9px 13px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; color: #fff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--spark); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--spark-deep); color: #fff; box-shadow: var(--shadow-lift); }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.bg-ink .btn-ghost { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.bg-ink .btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-sm { padding: 9px 17px; font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 88px;
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(237,48,104,.07) 0%, transparent 62%),
    radial-gradient(900px 380px at 92% 6%, rgba(46,111,242,.10) 0%, transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 56ch; margin-top: 6px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
  background: var(--paper); border: 1px solid var(--rule);
  padding: 7px 15px; border-radius: 999px; color: var(--ink-2);
  margin-bottom: 22px; box-shadow: var(--shadow);
}
.hero-tag .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--spark);
}


/* ==========================================================================
   Grids & cards
   ========================================================================== */

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.split.lean { grid-template-columns: 5fr 6fr; }

.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .45em; }
.card p { font-size: .96rem; color: var(--ink-2); }
.card .btn { align-self: flex-start; margin-top: auto; padding-top: 10px; }
.card-accent { border-top: 4px solid var(--spark); }
.card-accent.c2 { border-top-color: var(--turquoise); }
.card-accent.c3 { border-top-color: var(--purple); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 30px 22px; text-align: center; border-right: 1px solid var(--rule); background: var(--paper); }
.stat:last-child { border-right: none; }
.stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.9rem); color: var(--ink); line-height: 1;
  letter-spacing: -0.03em;
}
.stat .num em { font-style: normal; color: var(--spark); }
.stat .label { font-size: .88rem; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }

/* Beliefs / rule-separated lists */
.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list li {
  padding: 16px 0; border-bottom: 1px solid var(--rule);
  font-size: 1.05rem; color: var(--ink);
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
}
.rule-list li:first-child { border-top: 1px solid var(--rule); }

.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { padding: 13px 0 13px 30px; border-bottom: 1px solid var(--rule); position: relative; font-size: .98rem; }
.tick-list li:first-child { border-top: 1px solid var(--rule); }
.tick-list li::before {
  content: ""; position: absolute; left: 4px; top: 21px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--spark);
}
.tick-list li strong { color: var(--ink); font-family: var(--font-display); }

/* On dark sections the rule/tick lists need light text and light rules. */
.bg-ink .tick-list li,
.bg-ink .rule-list li { border-color: rgba(255,255,255,.14); color: #C9C4D4; }
.bg-ink .tick-list li strong,
.bg-ink .rule-list li { color: #fff; }
.bg-ink .tick-list li::before { background: var(--apricot); }

/* Segments (who Spark is for) */
.segment { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 18px 20px; background: var(--paper); }
.segment .role {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--spark-deep); margin-bottom: 7px;
}
.segment p { font-size: .93rem; margin: 0; }

/* People */
.people { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.person { text-align: center; }
/* The coloured initials tile is still the base layer. When a photo exists it
   sits on top; if one ever 404s the initials show through, so a missing file
   degrades to the old look instead of a blank circle. */
.person .avatar {
  position: relative; overflow: hidden;
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: #fff; letter-spacing: -0.02em;
}
.person .avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.person .nm { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.person .rl { font-size: .82rem; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.group-label {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: 44px 0 22px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.group-label:first-of-type { border-top: none; padding-top: 0; margin-top: 30px; }

/* Programme / event tiles */
.event {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px; background: var(--paper); display: flex; flex-direction: column; gap: 12px;
}
.event .when {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--spark-deep);
}
.event h3 { margin: 0; font-size: 1.12rem; }
.event dl { margin: 0; display: grid; grid-template-columns: 72px 1fr; gap: 6px 12px; font-size: .9rem; }
.event dt { color: var(--ink-3); font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; }
.event dd { margin: 0; color: var(--ink-2); }

/* Callout strip */
.strip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); padding: 26px 30px; box-shadow: var(--shadow);
}
.strip h3 { margin: 0 0 4px 0; }
.strip p { margin: 0; font-size: .96rem; }

/* Note box — for content still pending. Visible on purpose. */
.pending {
  border: 1px dashed var(--rule); border-left: 4px solid var(--apricot);
  background: var(--paper-2); border-radius: var(--radius-sm);
  padding: 18px 20px; font-size: .92rem; color: var(--ink-2);
}
.pending strong { color: var(--ink); font-family: var(--font-display); }

/* Sponsor logo strip — text lockups until real logo files are dropped in */
.logos { display: flex; flex-wrap: wrap; gap: 12px; }
.logos span {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 14px 20px; background: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink-2);
}

/* Contact list */
.contact { list-style: none; padding: 0; margin: 0; max-width: 520px; }
.contact li { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: .98rem; display: flex; gap: 14px; }
.contact li:first-child { border-top: 1px solid var(--rule); }
.contact .k {
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  min-width: 128px; padding-top: 3px;
}

/* Embedded form */
.embed { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.embed iframe { display: block; width: 100%; border: 0; min-height: 900px; }

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer is the brand colour too, so the page opens and closes on magenta and
   the logo tile dissolves into it at both ends. */
.site-footer { background: var(--spark); color: rgba(255,255,255,.88); padding: 58px 0 40px; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--ink); }
.site-footer h4 {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.66); margin: 0 0 14px 0; font-weight: 700;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.footer-grid p { font-size: .92rem; line-height: 1.6; }
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 9px; }
.footer-nav a { text-decoration: none; font-size: .94rem; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem; }
.acknowledgement { font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,.82); }
.colophon {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.28);
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .84rem; color: rgba(255,255,255,.72);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .people { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  section { padding: 60px 0; }
  .hero { padding: 68px 0 60px; }
  .split, .split.lean, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split { gap: 32px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .people { grid-template-columns: repeat(3, 1fr); }

  .brand .logo { height: 66px; }
  .site-header .wrap { min-height: 96px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .strip { flex-direction: column; align-items: flex-start; }
  .contact li { flex-direction: column; gap: 3px; }
  .contact .k { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   Photography
   --------------------------------------------------------------------------
   Photos are served straight from the "Spark Festival Past Event Photography
   for Promotional Use" folder in Drive, which is already shared publicly, so
   nothing needs to be uploaded to the web host. Each <img> carries its own
   Drive file id. To swap a picture, change the id. To move to locally hosted
   files later, point src at assets/photos/<name>.jpg - nothing else changes.
   ========================================================================== */

.shot {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--spark) 0%, var(--purple) 100%);
  /* the gradient shows through if a photo is slow or unavailable, so a
     failure looks like a brand colour block rather than a broken image */
}
.shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.shot:hover img { transform: scale(1.03); }

/* Full-bleed strip of photos, used to break up long pages */
.band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.band .shot { aspect-ratio: 4 / 5; }
.band .shot:nth-child(1), .band .shot:nth-child(5) { margin-top: 26px; }

/* Three-up strip, for landscape event photography. 3:2 rather than the band's
   4:5 because these are wide shots - a portrait crop would cut the room out
   of them. */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trio .shot { aspect-ratio: 3 / 2; }

/* Asymmetric hero mosaic - one big frame, two small */
.mosaic { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.mosaic .shot:first-child { grid-row: 1 / 3; }
.mosaic .shot { min-height: 150px; }

/* Two-up, used beside body copy */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair .shot { aspect-ratio: 1 / 1; }

.shot-single { aspect-ratio: 16 / 10; }

.caption { font-size: .84rem; color: var(--ink-3); margin-top: 12px; }
.bg-ink .caption { color: #9A94A8; }

/* ==========================================================================
   Video — click-to-play facade, so no third-party script loads until asked
   ========================================================================== */

.video {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: #000; box-shadow: var(--shadow-lift);
}
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.video .play::before {
  content: ""; width: 82px; height: 82px; border-radius: 50%;
  background: var(--spark); box-shadow: 0 10px 40px rgba(0,0,0,.45);
  transition: transform .18s ease;
}
.video .play::after {
  content: ""; position: absolute;
  border-left: 24px solid #fff; border-top: 15px solid transparent;
  border-bottom: 15px solid transparent; margin-left: 7px;
}
.video .play:hover::before { transform: scale(1.07); }
.video .label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; text-align: left; pointer-events: none;
}

/* --- Menu breakpoint, deliberately wider than the layout breakpoint -------
 * The bar holds four links plus two buttons. Below about 1040px that no
 * longer fits on one line and the labels wrap mid-button, so the menu
 * collapses to the dropdown here - earlier than the 860px the rest of the
 * layout uses. Add another nav item and this number needs to go up again.
 * ------------------------------------------------------------------------ */
@media (max-width: 1040px) {
  .nav-toggle { display: inline-block; }

  /* The mobile dropdown is a light panel, NOT the magenta bar - so every
     rule that turned nav text white for the bar has to be undone here, or
     the links render white on white and vanish. top:100% pins the panel to
     the bottom edge of the header whatever height the logo makes it. */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 8px 16px 16px;
    box-shadow: 0 14px 28px rgba(22,19,28,.16);
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 13px 12px; border-radius: var(--radius-sm);
    color: var(--ink); background: none;
  }
  /* :not(.btn) so this guard rail never outranks the CTA below, which
     must stay white on magenta. */
  .nav a:link:not(.btn), .nav a:visited:not(.btn) { color: var(--ink); }
  .nav a:hover { background: var(--spark-tint); color: var(--spark-deep); }
  .nav a[aria-current="page"] {
    background: var(--spark-tint); color: var(--spark-deep); font-weight: 700;
  }
  .nav .btn { margin-top: 10px; justify-content: center; }
  .nav a.btn-ghost,
  .nav a.btn-ghost:link,
  .nav a.btn-ghost:visited { background: var(--paper); border-color: var(--rule); color: var(--ink); }
  .nav a.btn-primary,
  .nav a.btn-primary:link,
  .nav a.btn-primary:visited { background: var(--spark); color: #fff; }
  .nav a.btn-primary:hover { background: var(--spark-deep); color: #fff; }
}

@media (max-width: 860px) {
  .band { grid-template-columns: repeat(3, 1fr); }
  .band .shot:nth-child(4), .band .shot:nth-child(5) { display: none; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic .shot:first-child { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 16/10; }
}
@media (max-width: 560px) {
  .band { grid-template-columns: 1fr 1fr; }
  .band .shot:nth-child(3) { display: none; }
  .band .shot { margin-top: 0 !important; }
}

/* ==========================================================================
   Sponsor band - sits at the top of the footer on a white field so that
   colour logos read properly against the dark footer below it.
   Drop a real logo file into assets/sponsors/ with the same filename to
   replace any of the interim wordmarks. Nothing else needs changing.
   ========================================================================== */

.sponsor-band { background: var(--spark); padding: 52px 0 6px; }
.sponsor-band .lead {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72);
  margin: 0 0 30px 0; text-align: center;
}
/* Logos are supplied as white knockouts, so they sit straight on the magenta
   with no plate behind them. Swapping a file? Use a white/reversed version. */
.sponsor-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 26px 56px;
}
.sponsor-row img { height: 54px; width: auto; object-fit: contain; }
/* Optical sizing - a three-line lockup and a single word can't share one height */
.sponsor-row img[alt="Herbert Smith Freehills"] { height: 74px; }
.sponsor-row img[alt="City of Sydney"] { height: 40px; }
.sponsor-row img[alt="Decidr"] { height: 44px; }
.sponsor-supporters {
  margin: 34px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.28);
  max-width: 800px; text-align: center;
  font-size: .88rem; color: rgba(255,255,255,.88); line-height: 1.7;
}
.sponsor-supporters strong {
  display: block; font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66);
  margin-bottom: 8px; font-weight: 700;
}
@media (max-width: 660px) {
  .sponsor-row { gap: 20px 34px; }
  .sponsor-row img { height: 40px; }
  .sponsor-row img[alt="Herbert Smith Freehills"] { height: 56px; }
  .sponsor-row img[alt="City of Sydney"] { height: 30px; }
  .sponsor-row img[alt="Decidr"] { height: 34px; }
}

/* ==========================================================================
   The closing question at the end of the festival copy
   ========================================================================== */

.ask-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin-top: 1.2em;
}

/* ==========================================================================
   Hero with a video background
   --------------------------------------------------------------------------
   The YouTube player is injected by script, muted, non-interactive and sized
   to cover the hero. A still frame sits underneath it, which is all that phones
   and reduced-motion visitors ever see. Everything in the hero turns white,
   and a scrim keeps the text readable over moving footage.
   ========================================================================== */

.hero--video {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 82vh, 860px);
  display: flex;
  align-items: center;
  background: var(--ink);
  border-bottom: none;
}
.hero--video > .wrap { position: relative; z-index: 2; width: 100%; }

/* The poster frame lives on the <video> element, so it shows before the file
   loads, on any browser that blocks autoplay, and whenever the video is hidden
   for reduced motion. */
.hero-media { position: absolute; inset: 0; z-index: 0; background-color: var(--ink); }
.hero-vid { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anyone who has asked their system to reduce motion gets the still frame. */
@media (prefers-reduced-motion: reduce) {
  .hero-vid { display: none; }
  .hero-media {
    background-image: url('video/hero-poster.jpg');
    background-size: cover; background-position: center;
  }
}

/* Darker on the left where the words are, lighter on the right so the footage
   still reads as footage. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(18,15,24,.94) 0%, rgba(18,15,24,.86) 38%,
                    rgba(18,15,24,.62) 70%, rgba(18,15,24,.5) 100%),
    linear-gradient(to bottom, rgba(18,15,24,.35), rgba(18,15,24,0) 30%);
}

.hero--video h1 { color: #fff; }
.hero--video .lede { color: rgba(255,255,255,.9); }
.hero--video .hero-tag {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
  color: #fff; box-shadow: none; backdrop-filter: blur(4px);
}
.hero--video .btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.hero--video .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

@media (max-width: 860px) {
  .hero--video { min-height: 0; padding: 68px 0 60px; }
}