/* =========================================================================
   Clancestry 2026 — main stylesheet
   Order: reset · base type · layout · grain/songlines · nav · hero ·
          editorial blocks · event cards · schedule · map · footer ·
          reveal states · reduced-motion · responsive
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ember-400); outline-offset: 3px; border-radius: 2px; }

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Atmospheric base: deep indigo with two soft radial embers (no extra DOM) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 82% 8%, color-mix(in srgb, var(--teal-600) 40%, transparent), transparent 70%),
    radial-gradient(55% 45% at 12% 92%, color-mix(in srgb, var(--ember-600) 34%, transparent), transparent 72%),
    var(--bg);
}
/* Film grain overlay */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
/* Brand display type: Franklin Gothic URW Cond, ALL CAPS (condensed → caps read well) */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; }
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--sand-50); }
em { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before {
  content: ""; width: 2.4em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2));
}
.eyebrow.is-ember { color: var(--ember-400); }
.eyebrow.is-ember::before { background: linear-gradient(90deg, transparent, var(--ember-400)); }

.lede { font-size: var(--step-1); line-height: 1.4; color: var(--sand-300); font-weight: 400; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section-head { max-width: var(--maxw-text); margin-bottom: var(--space-l); }
.section-head .eyebrow { margin-bottom: var(--space-s); }
.section-num {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--haze-dim);
  letter-spacing: 0.1em;
}

/* ---------- Songlines (flowing SVG line animations) ---------- */
.songline {
  position: absolute; pointer-events: none; z-index: 0; overflow: visible;
}
.songline path {
  fill: none;
  stroke: var(--teal-400);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
  /* dash values set in JS from getTotalLength(); animated via stroke-dashoffset */
}
.songline path.is-ember { stroke: var(--ember-400); }
/* If JS hasn't drawn them, keep them quietly visible (no flash of nothing) */
.no-js .songline path { stroke-dashoffset: 0 !important; }

/* ---------- Buttons / links ---------- */
.btn {
  --btn-bg: var(--ember-500);
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.95em 1.5em; border-radius: 100px;
  background: var(--btn-bg); color: #1a0e04; font-weight: 500;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ember-500) 70%, transparent); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--sand-100); border-color: var(--line-strong); }
.btn--ghost:hover { background: color-mix(in srgb, var(--sand-100) 8%, transparent); box-shadow: none; }
.btn--teal { --btn-bg: var(--teal-400); color: #04201d; }

.link-underline {
  position: relative; font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-100);
  padding-bottom: 2px;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--ember-400); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); }
.link-underline .arrow { display: inline-block; transition: transform .35s var(--ease); }
.link-underline:hover .arrow { transform: translateX(5px); }

/* ---------- Top navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding: clamp(0.9rem, 2vw, 1.4rem) var(--gutter);
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
/* Official Clancestry lock-up (white wordmark SVG) */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand__logo { display: block; height: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); width: auto; }
.brand-lockup { display: flex; align-items: center; gap: clamp(0.6rem, 1.5vw, 1.05rem); min-width: 0; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-links a:not(.btn) {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-300); position: relative; padding: 0.3em 0;
  transition: color .3s var(--ease);
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--sand-50); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--ember-400);
}
.nav-toggle { display: none; }

/* Mobile menu */
@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; z-index: 1100;
  }
  .nav-toggle span { display: block; height: 2px; width: 26px; background: var(--sand-100); transition: transform .4s var(--ease), opacity .3s var(--ease); margin-left: auto; }
  .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: var(--space-s); padding: var(--gutter);
    background: color-mix(in srgb, var(--ink-900) 97%, transparent);
    backdrop-filter: blur(8px);
    transform: translateX(100%); visibility: hidden; pointer-events: none;
    transition: transform .55s var(--ease), visibility 0s linear .55s;
    font-size: var(--step-1);
  }
  .nav-links a:not(.btn) { font-size: var(--step-2); font-family: var(--font-display); text-transform: none; letter-spacing: -0.01em; color: var(--sand-100); }
  .nav.is-open .nav-links { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform .55s var(--ease), visibility 0s; }
  /* While the menu is open, kill the sticky nav's backdrop-filter. A non-none
     backdrop-filter (added by .is-stuck once scrolled) makes .nav the containing
     block for the position:fixed .nav-links overlay, collapsing its inset:0 from
     the viewport down to the header bar — the overlay background then only paints
     that strip and the page bleeds through (broken/transparent menu when scrolled).
     transition:none so it snaps off instantly: otherwise it animates blur→none over
     .5s and stays a containing block through the panel slide-in. */
  .nav.is-open, .nav.is-open.is-stuck {
    backdrop-filter: none; -webkit-backdrop-filter: none; transition: none;
  }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: clamp(7rem, 13vh, 10rem); padding-bottom: var(--space-xl); overflow: clip; }
.hero__pattern {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/pattern-hero.jpg") center/cover;
  opacity: 0.16; filter: saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent);
}
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-m), 4vw, var(--space-xl)); align-items: center; width: 100%; }
.hero__photo {
  position: relative; height: clamp(24rem, 72vh, 760px); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-photo); align-self: center;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero__photo::after { content:""; position:absolute; inset:0; background: linear-gradient(160deg, transparent 40%, color-mix(in srgb, var(--ink-900) 55%, transparent)); }

.hero__title { position: relative; z-index: 3; container-type: inline-size; }
/* Official lock-up as the hero wordmark — fills the title column like the old text did */
.hero__logo {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  aspect-ratio: 320.06 / 43.56;   /* reserve space (no load reflow) */
}
/* mix-blend headline technique now lives on .event-card__title (see below) */

.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); margin-top: var(--space-m); }
.hero__meta dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--haze); }
.hero__meta dd { font-family: var(--font-display); font-size: var(--step-1); }
.scroll-cue { position: absolute; left: var(--gutter); bottom: var(--space-m); z-index: 4; display: flex; align-items: center; gap: 0.8em; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--haze); }
.scroll-cue .line { width: 46px; height: 1px; background: var(--haze); position: relative; overflow: hidden; }
.scroll-cue .line::after { content:""; position:absolute; inset:0; background: var(--ember-400); transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* ---------- Acknowledgement of Country ---------- */
.acknowledge { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--ink-800) 60%, transparent); }
.acknowledge .wrap { display: grid; grid-template-columns: auto 1fr; gap: var(--space-l); align-items: start; padding-block: var(--space-l); }
.acknowledge .flag-dots { display: flex; gap: 8px; padding-top: 0.6em; }
.acknowledge .flag-dots span { width: 14px; height: 14px; border-radius: 50%; }
.acknowledge p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--sand-100); max-width: 52rem; }
.acknowledge .sig { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--haze); margin-top: var(--space-s); }

/* ---------- Editorial statement ---------- */
.statement .big {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.02em;
  max-width: 24ch;
}
.statement .big .hl { color: var(--ember-400); font-style: italic; }
.statement .big .hl-teal { color: var(--teal-300); font-style: italic; }
.statement-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); margin-top: var(--space-l); }
.statement-cols p { color: var(--sand-300); }

/* Two-up stat layout (forecourt) */
.stat-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); }
@media (max-width: 860px) { .stat-duo { grid-template-columns: 1fr; } }

/* ---------- Event cards ---------- */
.events-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.2rem, 2.4vw, 2.4rem) var(--space-m); }
.event-card {
  position: relative; grid-column: span 6; display: flex; flex-direction: column;
  isolation: isolate;
}
.event-card--lg { grid-column: span 6; }
.event-card--feature { grid-column: span 12; }
.event-card__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4/5; min-height: 18rem; background: var(--ink-700);
}
.event-card--feature .event-card__media { aspect-ratio: 16/9; }
.event-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
  filter: saturate(1.02);
}
.event-card:hover .event-card__media img { transform: scale(1.1); }
.event-card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--ink-900) 88%, transparent)); }
.event-card__tag, .event-card__genre {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.45em 0.85em; border-radius: 100px;
  background: color-mix(in srgb, var(--ink-900) 55%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--sand-100);
}
.event-card__tag.is-free, .event-card__genre.is-free { background: var(--ember-500); color: #1a0e04; border-color: transparent; font-weight: 600; }

/* Accessibility icon cluster — absolute, top-right, on the image */
.event-card__a11y {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0.4rem;
}
.event-card__a11y li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: color-mix(in srgb, var(--ink-900) 62%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--sand-100);
}
.event-card__a11y svg {
  width: 18px; height: 18px; display: block;
  fill: currentColor; stroke: currentColor;
}
/* Title sits over the photo bottom, blended for legibility on any image.
   Pinned to the bottom of .event-card__media (left:0; right:0; bottom:0) so
   multi-line titles grow UPWARD and can never overflow the image bottom.
   Applies to every card, feature and regular alike. */
.event-card__title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem;
  font-family: var(--font-display); font-size: var(--step-2); line-height: 0.98; color: #fff;
  mix-blend-mode: difference;
}
.no-blend .event-card__title { mix-blend-mode: normal; color: var(--sand-50); text-shadow: 0 2px 24px rgba(0,0,0,0.88), 0 1px 2px rgba(0,0,0,0.6); }

/* Visible keyboard focus for the display:contents card links (the <a> itself
   generates no box, so route the focus ring onto a child) */
.event-card a:focus-visible { outline: none; }
.event-card a:focus-visible .event-card__media { outline: 3px solid var(--ember-400); outline-offset: 4px; }
.event-card a:focus-visible .event-card__title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.event-card--feature .event-card__title { font-size: var(--step-3); }
/* Mono detail line under the image (date · time · venue, etc.) */
.event-card__details {
  margin-top: 0.9em; padding-inline: 1rem;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--haze); letter-spacing: 0.04em;
}
.event-card__details .dot { color: var(--teal-400); }
.event-card__desc { margin-top: 0.7em; padding-inline: 1rem; color: var(--sand-300); max-width: 44ch; }
.event-card__cta { margin-top: 1em; padding-inline: 1rem; }

/* ---------- Schedule ---------- */
.day-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-l); position: sticky; top: 72px; z-index: 50;
  padding: 0.5rem; border-radius: 100px; background: color-mix(in srgb, var(--ink-800) 70%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); width: fit-content; max-width: 100%; overflow-x: auto; }
.day-nav button {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.55em 1em; border-radius: 100px; background: transparent; border: 0; color: var(--haze); cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.day-nav button:hover { color: var(--sand-100); }
.day-nav button.is-active { background: var(--ember-500); color: #1a0e04; }

.day { margin-bottom: var(--space-xl); scroll-margin-top: 140px; }
.day__head { display: flex; align-items: baseline; gap: 1rem; padding-bottom: var(--space-s); border-bottom: 1px solid var(--line-strong); margin-bottom: var(--space-s); }
.day__date { font-family: var(--font-display); font-size: var(--step-2); }
.day__count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--haze); letter-spacing: 0.1em; }
.slot {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem var(--space-m); align-items: center;
  padding: 1.1rem 0.5rem; border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease);
}
.slot:hover { background: color-mix(in srgb, var(--sand-100) 4%, transparent); }
.slot__time { font-family: var(--font-mono); font-size: var(--step-0); color: var(--ember-300); letter-spacing: 0.02em; }
.slot__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.05; }
.slot__sub { display: block; font-family: var(--font-body); font-size: var(--step--1); color: var(--haze); margin-top: 0.2em; letter-spacing: 0; }
.slot__venue { font-family: var(--font-mono); font-size: var(--step--1); color: var(--haze); letter-spacing: 0.04em; text-align: right; }
.slot__genre { display: inline-flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.75em; margin-left: 0.9em; }
.pill {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3em 0.7em; border-radius: 100px; border: 1px solid var(--line); color: var(--sand-300);
}
.pill.is-free { background: color-mix(in srgb, var(--teal-500) 24%, transparent); border-color: var(--teal-500); color: var(--teal-300); }

/* ---------- Map ---------- */
.map-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--ink-800);
  box-shadow: var(--shadow-photo);
}
.map-frame object, .map-frame iframe, .map-frame embed { width: 100%; height: 100%; border: 0; }
.map-frame__img { width: 100%; height: auto; display: block; }
.map-fallback { display: grid; place-items: center; gap: var(--space-s); padding: var(--space-xl); text-align: center; height: 100%; }
.venue-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-m); margin-top: var(--space-l); }
.venue { padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--ink-800) 50%, transparent); }
.venue h3 { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 0.3em; }
.venue p { color: var(--haze); font-size: var(--step--1); }
.venue .tagn { font-family: var(--font-mono); color: var(--ember-300); font-size: var(--step--1); letter-spacing: 0.1em; }

/* ---------- Generic info blocks ---------- */
.prose { max-width: var(--maxw-text); }
.prose h3 { font-size: var(--step-2); margin-top: var(--space-l); margin-bottom: var(--space-xs); }
.prose p + p { margin-top: var(--space-s); }
.prose p { color: var(--sand-300); }
.prose a { color: var(--ember-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: var(--ember-300); }
.infogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-m); margin-top: var(--space-l); }
.infocard { padding: var(--space-m); border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ink-800) 55%, transparent); }
.infocard h3 { font-size: var(--step-1); margin-bottom: 0.4em; }
.infocard p { color: var(--haze); font-size: var(--step-0); }
.infocard .big-num { font-family: var(--font-display); font-size: var(--step-3); color: var(--ember-400); line-height: 1; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(2.5rem, 6vw, 5.5rem); background: linear-gradient(120deg, var(--ink-700), var(--ink-800)); border: 1px solid var(--line); }
.cta-band__pattern { position: absolute; inset: 0; background: url("../assets/img/pattern-strip.jpg") center/cover; opacity: 0.18; mix-blend-mode: luminosity; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--step-3); max-width: 16ch; }

/* ---------- Footer ---------- */
.footer { position: relative; border-top: 1px solid var(--line); margin-top: var(--space-2xl); padding-block: var(--space-xl) var(--space-l); background: var(--ink-850); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-l); }
.footer__brand .display { font-size: var(--step-3); }
.footer__logo { display: block; width: clamp(11rem, 26vw, 18rem); height: auto; aspect-ratio: 320.06 / 43.56; }
.footer h4 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--haze); margin-bottom: var(--space-s); font-weight: 400; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.6em; }
.footer a:hover { color: var(--ember-300); }
.footer__partner { margin-top: var(--space-s); color: var(--haze); font-size: var(--step--1); }
.footer__ack { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--line); color: var(--haze); font-size: var(--step--1); max-width: 60rem; line-height: 1.6; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-l); font-family: var(--font-mono); font-size: var(--step--1); color: var(--haze-dim); letter-spacing: 0.06em; }

/* ---------- Supporting Partner (Energex — prominent feature) ---------- */
.supporter { display: grid; justify-items: center; text-align: center; gap: var(--space-m); }
.supporter .eyebrow { justify-content: center; }
.supporter__chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4.25rem);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.75);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.supporter__chip:hover { transform: translateY(-4px); box-shadow: 0 32px 72px -22px color-mix(in srgb, var(--ember-500) 45%, transparent); }
.supporter__chip img { height: clamp(52px, 9vw, 92px); width: auto; display: block; }
.supporter__note { color: var(--sand-300); font-size: var(--step-1); max-width: 36ch; }
.supporter__note strong { color: var(--sand-50); }

/* ---------- Institutional logos in the footer (QPAC / Qld Gov — white marks) ---------- */
.footer__logos { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); margin-top: var(--space-m); flex-wrap: wrap; }
.footer__logos img { height: 40px; width: auto; opacity: 0.9; transition: opacity .3s var(--ease); }
.footer__logos a:hover img { opacity: 1; }

/* ---------- Reveal states (progressive enhancement) ----------
   Elements are only hidden once JS confirms GSAP is ready (html.anim-ready).
   Without JS / on failure they remain fully visible. ScrollTrigger reveals them. */
.anim-ready [data-reveal] {
  opacity: 0; will-change: transform, opacity;
  transition: opacity .85s var(--ease), transform .95s var(--ease);
}
.anim-ready [data-reveal="up"]   { transform: translateY(42px); }
.anim-ready [data-reveal="left"] { transform: translateX(42px); }
.anim-ready [data-reveal="scale"]{ transform: scale(0.95); }
.anim-ready [data-reveal].is-in  { opacity: 1; transform: none; }

/* Split-text lines for staggered headline reveals */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.anim-ready .line-mask > * { display: block; transform: translateY(108%); transition: transform 1s var(--ease); }
.anim-ready .line-mask.is-in > * { transform: translateY(0); }

/* ---------- Reduced motion ----------
   Full-motion override (product decision, 2026-06-01): animations run for EVERY
   visitor regardless of prefers-reduced-motion, so the suppression block that
   used to live here was removed *intentionally* — this is not an omission. The
   JS `reduced` flag in js/main.js is hard-set to false to match. To re-honour
   the accessibility preference, restore both. */

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero { padding-top: 16vh; align-items: stretch; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .hero__photo { height: auto; aspect-ratio: 16/11; max-height: 46vh; order: -1; }
  .statement-cols, .statement .big { grid-template-columns: 1fr; max-width: none; }
  .acknowledge .wrap { grid-template-columns: 1fr; gap: var(--space-s); }
  .event-card, .event-card--lg { grid-column: span 12; }
  .slot { grid-template-columns: 5rem 1fr; align-items: start; }
  .slot__time { padding-top: 0.15em; }
  .slot__venue { grid-column: 2; text-align: left; }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-m); }
}
@media (max-width: 520px) {
  .hero__meta { gap: var(--space-xs) var(--space-m); }
  .slot { grid-template-columns: 1fr; gap: 0.3rem; padding-block: 1rem; }
  .slot__time { padding-top: 0; color: var(--ember-300); }
  .slot__title, .slot__venue { grid-column: 1; }
}

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--ember-500); color: #1a0e04; padding: 0.7em 1.2em; border-radius: 6px; font-family: var(--font-mono); transition: top .3s var(--ease); }
.skip-link:focus { top: 1rem; }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.center { text-align: center; }
.flex-cta { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.divider-strip { height: 6px; width: 100%; background: url("../assets/img/pattern-strip.jpg") center/cover; opacity: 0.9; }