/* ============================================================================
   ONE DAY — Fall Festival 2026 · Denver
   Design system: "Sunset over the Front Range"
   Palette lifted from the event flyer. No external CSS deps.
   ========================================================================= */

/* No @view-transition here on purpose. Cross-document transitions froze the
   incoming page when navigation started while the mobile drawer was open and
   body overflow was locked: the new page rendered but could not scroll and
   never finished painting. Not worth the polish. */

/* ---------- Tokens ------------------------------------------------------ */
:root {
  /* Sampled from the client's own flyer by band-quantizing each region of the
     artwork, not eyeballed. Percentages are that colour's share of its band.
       #0E0D26  foreground/skyline (59% of the headline band)
       #FFE8C5  "ONE DAY" headline cream (28%)
       #EC8D55  tagline orange (27%)
       #F4B765  amber panel behind the date + activity list (44%)
       #DA2A21  mountain red (25% of the mountain band)
       #542428  mountain shadow / "OCTOBER 10" text (19%)
       #FCA721  sun gold (12%)   #F37A2F  sun outer (18%)
       #EC7723  "WHERE FAITH..." accent line (20%) */
  --ink:        #0E0D26;
  --ink-2:      #171634;
  --ink-3:      #241F42;
  --ember:      #EC7723;   /* flyer accent orange — CTA fill, ink type on it = 6.3:1 */
  --rust:       #C65E26;   /* one-pager heading rust, recurring in both documents */
  --paper:      #F5E6D1;   /* one-pager panel tint — the soft light surface */
  --char:       #1C1C1C;   /* one-pager body ink */
  --brick:      #DA2A21;   /* flyer mountain red — kept for small emphasis only */
  --flame:      #EC7723;   /* their accent line orange, 6.3:1 on ink */
  --tagline:    #EC8D55;   /* the softer tagline orange, used verbatim */
  --sun:        #FCA721;
  --amber:      #F4B765;
  --sand:       #F4B765;
  --maroon:     #542428;
  --cream:      #FFE8C5;
  --cream-dim:  #E2CBAA;

  --bg:         var(--ink);
  --fg:         var(--cream);
  --muted:      #B6A392;   /* 6.97:1 on --ink */
  --hairline:   color-mix(in oklab, var(--cream) 14%, transparent);
  --card:       color-mix(in oklab, var(--ink-2) 88%, var(--ember) 12%);

  /* Type */
  --display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid scale */
  --step--1: clamp(.82rem, .78rem + .2vw, .93rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);
  --step-5:  clamp(3.2rem, 1.8rem + 6.5vw, 8rem);

  /* Space */
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 8rem);
  --measure: 66ch;
  --radius: 18px;
  --radius-sm: 12px;

  --shadow: 0 24px 60px -24px rgb(0 0 0 / .75);
  --ring: 0 0 0 3px color-mix(in oklab, var(--sun) 55%, transparent);
}

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* `overflow-x: hidden` on body makes its overflow-y compute to `auto`, promoting
   body to a scroll container — a classic source of iOS scroll jank. `clip` blocks
   sideways overflow without creating a scroll box. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* ---------- Layout ------------------------------------------------------ */
.wrap { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section p, .section li { color: var(--cream-dim); }
.stack > * + * { margin-top: 1rem; }
.lede { font-size: var(--step-1); color: var(--cream-dim); max-width: var(--measure); text-wrap: pretty; }

.eyebrow {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--flame), transparent);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 2.2rem; height: 2px; flex: none;
  background: linear-gradient(270deg, var(--flame), transparent);
}

/* ---------- Skip link --------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sun); color: var(--ink); padding: .8rem 1.2rem; font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header ------------------------------------------------------ */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; isolation: isolate;
  transition: background .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.site-header::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 190%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(14 13 38 / .72) 0%, rgb(14 13 38 / .38) 55%, transparent 100%);
  transition: opacity .35s ease;
}
.site-header[data-scrolled="true"]::before { opacity: 0; }
.site-header[data-scrolled="true"] {
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav { display: flex; align-items: center; gap: 1.5rem; padding-block: .95rem; }
/* Landscape on a notched iPhone puts the notch over the leading edge, which slid the logo
   underneath it. The drawer got env() insets when it was built; the header never did. */
@supports (padding: env(safe-area-inset-left)) {
  /* With viewport-fit=cover the page now runs edge to edge, so the header's background reaches
     the real top of the screen instead of starting below the status bar. Pad the CONTENT down
     out of the notch so only the background lives up there. */
  .site-header .wrap {
    padding-inline-start: max(var(--gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--gutter), env(safe-area-inset-right));
  }
  .site-header .nav { padding-block-start: calc(.95rem + env(safe-area-inset-top)); }
  .nav__links { padding-block-start: calc(6rem + env(safe-area-inset-top)); }
  body { padding-inline: 0; }
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-inline-end: auto; }
.brand__mark { width: 38px; height: 38px; flex: none; color: var(--ember);
  transition: color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .brand__mark { color: var(--sun); transform: rotate(-6deg) scale(1.06); }
.brand__text { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: 1.26rem; line-height: 1; }
.brand__text span { color: var(--ember); }
.brand__sub { display: block; font-family: var(--body); font-weight: 500; font-size: .62rem;
  letter-spacing: .19em; text-transform: uppercase; color: var(--cream-dim); margin-top: .26rem; }

.nav__links { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; }
.nav__links a:not(.btn) {
  display: block; padding: .55rem .8rem; border-radius: 999px; text-decoration: none;
  font-size: .95rem; font-weight: 500; color: var(--cream-dim);
  transition: color .2s ease, background .2s ease;
}
.nav__links a:not(.btn):hover { color: var(--cream); background: color-mix(in oklab, var(--cream) 8%, transparent); }
.nav__links a:not(.btn)[aria-current="page"] { color: var(--sun); }
.nav__links a.btn { text-decoration: none; }
.nav__meta { display: none; }   /* drawer-only; revealed in the mobile nav media query */

.nav__toggle {
  display: none; background: none; border: 1px solid var(--hairline);
  border-radius: 10px; padding: .6rem; cursor: pointer;
  min-width: 46px; min-height: 46px; align-items: center; justify-content: center;
}
/* One morphing icon, not two SVGs swapped with display:none. The three bars rotate into the
   X, which reads as a state change rather than a substitution. */
.nav__burger { display: block; position: relative; width: 22px; height: 16px; }
.nav__burger i {
  position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), opacity .18s ease .06s;
}
.nav__burger i:nth-child(1) { inset-block-start: 0; }
.nav__burger i:nth-child(2) { inset-block-start: 7px; }
.nav__burger i:nth-child(3) { inset-block-start: 14px; }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(2) { opacity: 0; transform: scaleX(.15); }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ---------- Buttons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--ember);
  --btn-fg: #16101F;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--ember) 65%, transparent);
}
.btn:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.07); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--sun { --btn-bg: var(--sun); --btn-fg: var(--ink); box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--sun) 70%, transparent); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--cream);
  border-color: color-mix(in oklab, var(--cream) 30%, transparent); box-shadow: none;
}
.btn--ghost:hover { background: color-mix(in oklab, var(--cream) 8%, transparent); }
.btn--sm { padding: .62rem 1.1rem; font-size: .88rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.08rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Hero -------------------------------------------------------- */
/* Drawn in CSS + SVG, not the flyer raster. Owner's call. Every colour is
   sampled from the flyer so it stays on-brand. */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end;
  isolation: isolate; overflow: hidden; background: var(--ink); }

.hero__sky { position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(120% 78% at 50% 74%,
    #FFD48A 0%, #F4B765 22%, #FCA721 40%, #F37A2F 56%, #DA2A21 70%, #542428 84%, var(--ink) 100%); }

/* The flyer's sun is a FLAT disc with a crisp rim, not a soft blob. The element
   IS the disc, so the rim can be a real ring and the halo can bloom outside it. */
.hero__sun {
  position: absolute; z-index: -2; left: 50%; bottom: 32%;
  width: min(30vw, 306px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFF3CE 0%, #FFD873 34%, #FDBC49 66%, #F9A21C 100%);
  box-shadow:
    0 0 0 2px #FFEFC0,                         /* the crisp rim, a hard edge not a blur */
    0 0 0 5px rgb(232 128 31 / .85),           /* the rim's own darker outline, as on the flyer */
    0 0 0 12px rgb(252 167 33 / .28),          /* inner bloom */
    0 0 100px 38px rgb(253 170 60 / .45),      /* halo */
    0 0 210px 90px rgb(240 120 40 / .26);      /* far glow */
  animation: sun-rise 2.6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sun-rise { from { translate: -50% 30%; opacity: 0; } to { translate: -50% 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__sun { animation: none; } }

.hero__crestwrap { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: -1;
  display: grid; place-items: center; padding-top: clamp(4.6rem, 9vh, 6rem); pointer-events: none; }
.hero__crest { width: clamp(88px, 11.5vh, 132px); height: auto;
  filter: drop-shadow(0 3px 16px rgb(70 28 4 / .34)); }

.hero__birds { position: absolute; inset-inline: 0; inset-block-start: 0; height: 60%; z-index: -1;
  pointer-events: none; opacity: .85; }
.hero__birds svg { width: 100%; height: 100%; }

/* Silhouette on a solid slab that runs to the bottom, else sky leaks under it. */
.hero__ridge { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: -1;
  display: flex; flex-direction: column; pointer-events: none; }
.hero__ridge svg { width: 100%; display: block; fill: currentColor; flex: none; }
.hero__ridge::after { content: ""; flex: 1 1 auto; background: currentColor; }
.hero__ridge--far  { color: #DA2A21; height: 50%; }
.hero__ridge--far  svg { height: clamp(56px, 9vw, 130px); }
.hero__ridge--mid  { color: #6B2A2C; height: 30%; }
.hero__ridge--mid  svg { height: clamp(46px, 8vw, 110px); }
.hero__ridge--near { color: #0B0A1E; height: 26%; }
.hero__ridge--near svg { height: clamp(120px, 19vw, 265px); }

.hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(14 13 38 / .38) 0%, rgb(14 13 38 / 0) 18%,
    rgb(14 13 38 / 0) 40%, rgb(14 13 38 / .16) 55%, rgb(14 13 38 / .62) 70%, rgb(14 13 38 / .93) 100%); }

.hero__inner { padding-block: clamp(5rem, 11vh, 7.5rem) clamp(3.2rem, 7vh, 5rem); position: relative; }
.hero__title { font-size: var(--step-5); font-weight: 900; letter-spacing: -.045em; line-height: .82;
  color: var(--cream); text-transform: uppercase; text-shadow: 0 8px 40px rgb(0 0 0 / .5); }
.hero__tagline { font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, .55rem + 2vw, 2rem); letter-spacing: -.01em;
  color: #FF9A52; margin-top: .55rem; text-shadow: 0 2px 18px rgb(0 0 0 / .7); }
.hero .eyebrow {
  color: #FFF1D2; width: max-content; align-self: start;
  background: rgb(14 13 38 / .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: .42rem 1rem; border-radius: 999px; letter-spacing: .2em;
  text-shadow: 0 1px 6px rgb(0 0 0 / .5);
}
.hero .eyebrow::before { display: none; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .45rem 1.6rem; margin-top: 1.3rem;
  font-size: var(--step-0); color: var(--cream); text-shadow: 0 2px 12px rgb(0 0 0 / .5); }
.hero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__meta svg { width: 1.1em; height: 1.1em; flex: none; color: var(--sun); }
.hero .btn-row { margin-top: 1.6rem; }

.hero__scroll { position: absolute; left: 50%; bottom: .5rem; translate: -50% 0;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim);
  display: grid; justify-items: center; gap: .4rem; }
.hero__scroll i { display: block; width: 1px; height: 34px;
  background: linear-gradient(var(--cream-dim), transparent); animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 0%,100% { opacity: .3; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(2px); } }
@media (max-width: 700px) { .hero__sun { bottom: 47%; width: min(50vw, 240px); } }

@media (max-height: 780px), (max-width: 700px) { .hero__scroll { display: none; } }

@media (max-height: 700px) {
  .hero__inner { padding-block: 4.2rem 1.6rem; }
  .hero__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero__meta { gap: .25rem 1.1rem; margin-top: .8rem; font-size: .92rem; }
  .countdown { margin-top: .9rem; gap: .4rem; }
  .count-unit { min-width: 60px; padding: .5rem .6rem; }
  .count-unit b { font-size: 1.3rem; }
  .hero .btn-row { margin-top: 1rem; }
  .hero .btn--lg { padding: .85rem 1.4rem; font-size: .98rem; }
}

/* ---------- Countdown --------------------------------------------------- */
.countdown { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.count-unit {
  min-width: 74px; padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center;
}
.count-unit b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 1.7rem;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--cream);
}
.count-unit small { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Ticker ------------------------------------------------------ */
.ticker {
  background: var(--ember); color: #16101F; overflow: hidden; padding-block: .7rem;
  border-block: 1px solid color-mix(in oklab, #000 25%, transparent);
}
.ticker__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 38s linear infinite; }
.ticker__track span {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: .95rem; display: inline-flex; align-items: center; gap: 2.5rem;
}
.ticker__track span::after { content: "★"; opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- Cards / grids ---------------------------------------------- */
.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1.5rem; position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--amber) 45%, transparent); }
.card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.card p { color: var(--cream-dim); font-size: .97rem; }
.card__num {
  font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: 1;
  color: #B0621F; margin-bottom: .3rem;
}

/* Photo cards */
.photo-card { border-radius: var(--radius); overflow: hidden; position: relative; isolation: isolate; }
.photo-card__media { aspect-ratio: 4 / 3; position: relative; background: linear-gradient(150deg, var(--ink-3), var(--ink-2)); }
.photo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.photo-card:hover .photo-card__media img { transform: scale(1.05); }
.photo-card__body {
  position: absolute; z-index: 2; inset-block-end: 0; inset-inline: 0; padding: 1.4rem 1.3rem 1.2rem;
  background: linear-gradient(transparent, rgb(8 7 22 / .55) 30%, rgb(8 7 22 / .93));
}
.photo-card__body h3 { font-size: var(--step-1); }
.photo-card__body p { font-size: .9rem; color: var(--cream-dim); margin-top: .25rem; }
.photo-card__tag {
  position: absolute; inset-block-start: .9rem; inset-inline-start: .9rem; z-index: 2;
  background: #120E22; color: #FFD277;
  font-family: var(--display); font-weight: 700; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px;
}

/* Image placeholder — a missing photo still looks designed, never broken. */
.ph { position: relative; background: linear-gradient(150deg, #3A2340, #241A34 55%, #1A1428); }
.ph::after {
  content: attr(data-ph); position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; padding: 1rem; font-family: var(--display); font-weight: 700;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
}
.ph img { position: relative; z-index: 1; }
.ph img[hidden] { display: none; }

/* ---------- Light surfaces ---------------------------------------------- */
/* Two reviewers measured the same thing independently: navy is ~20% of the
   flyer but was running 60%+ of this site's scroll. These give the page an
   alternating rhythm of warm light bands with dark used as punctuation. */
.section--paper { background: var(--paper); color: var(--char); }
.section--paper h2, .section--paper h3, .section--paper h4 { color: var(--maroon); }
.section--paper p, .section--paper li, .section--paper .lede { color: #33262B; }
.section--paper .eyebrow { color: #9E3F14; }
.section--paper .eyebrow::before { background: linear-gradient(90deg, #9E3F14, transparent); }
.section--paper .eyebrow--center::after { background: linear-gradient(270deg, #9E3F14, transparent); }
.section--paper .card,
.section--paper .builder,
.section--paper .faq details { background: #FFFFFF; border-color: rgb(84 36 40 / .16); color: var(--char); }
.section--paper .card p { color: #4A3A3E; }
.section--paper .card__num { color: color-mix(in oklab, var(--rust) 34%, transparent); }
.section--paper .stats { background: rgb(84 36 40 / .16); border-color: rgb(84 36 40 / .18); }
.section--paper .stat { background: #FFFFFF; }
.section--paper .stat b { color: var(--rust); }
.section--paper .stat small { color: #6B575C; }
.section--paper .btn--ghost { --btn-fg: var(--maroon); border-color: rgb(84 36 40 / .42); }
.section--paper .btn--ghost:hover { background: rgb(84 36 40 / .08); }
.section--paper .tier ul { color: #4A3A3E; }
.section--paper .tier li::before { color: var(--rust); }
.section--paper .faq summary { color: var(--maroon); }
.section--paper .faq summary::after { color: var(--rust); }
.section--paper .faq p { color: #4A3A3E; }
.section--paper .seg-tabs button { border-color: rgb(84 36 40 / .35); color: #5A464B; }
.section--paper .seg-tabs button[aria-selected="true"] { background: var(--ember); border-color: var(--ember); color: #16101F; }
.section--paper .timeline time { color: var(--rust); }
.section--paper .chip { background: rgb(84 36 40 / .06); border-color: rgb(84 36 40 / .22); color: #4A3A3E; }
.section--paper .builder__out { background: rgb(84 36 40 / .05); border-color: rgb(84 36 40 / .25); color: #4A3A3E; }
.section--paper .builder__out b { color: var(--rust); }

/* ---------- Amber panel ------------------------------------------------- */
/* Their flyer is roughly 76% light: an amber sky over a flat amber panel that
   carries the date, the activity list and the venue in dark maroon. A wholly
   dark site drops the single largest surface of their identity, so one section
   reproduces it literally. Measured: maroon on amber 7.1:1, ink on amber 9.6:1. */
.section--amber { background: var(--amber); color: var(--maroon); }
.section--amber h2, .section--amber h3 { color: var(--maroon); }
.section--amber p, .section--amber .lede { color: color-mix(in oklab, var(--maroon) 90%, transparent); }
.section--amber .eyebrow { color: #8E2F14; }
.section--amber .eyebrow::before { background: linear-gradient(90deg, #A8331B, transparent); }
.section--amber .eyebrow--center::after { background: linear-gradient(270deg, #A8331B, transparent); }
.section--amber .btn--ghost { --btn-fg: var(--maroon); border-color: color-mix(in oklab, var(--maroon) 45%, transparent); }
.section--amber .btn--ghost:hover { background: color-mix(in oklab, var(--maroon) 10%, transparent); }
/* Dark photo cards on the light panel mirror the flyer's own contrast. */
.section--amber .photo-card { box-shadow: 0 18px 44px -22px rgb(84 36 40 / .6); }

/* Card captions sit on a dark photo gradient, so they stay light no matter what
   surface the section itself uses. */
.section--amber .photo-card__body h3, .section--paper .photo-card__body h3,
.section--amber .act__body h3,        .section--paper .act__body h3 { color: var(--cream); }
.section--amber .photo-card__body p,  .section--paper .photo-card__body p,
.section--amber .act__body p,         .section--paper .act__body p { color: var(--cream-dim); }
.section--amber .photo-card__tag, .section--paper .photo-card__tag { color: #FFD277; }


/* Amber needed the same completeness paper got; without it cards, list items,
   tabs, stats and FAQ rows kept dark-theme type and vanished on the panel. */
.section--amber li { color: #3A2A2E; }
.section--amber .card,
.section--amber .builder,
.section--amber .faq details { background: #FFF6E6; border-color: rgb(84 36 40 / .20); color: var(--char); }
.section--amber .card h3, .section--amber .card h4 { color: var(--maroon); }
.section--amber .card p, .section--amber .tier ul, .section--amber .faq p { color: #4A3A3E; }
.section--amber .card__num { color: color-mix(in oklab, var(--rust) 38%, transparent); }
.section--amber .tier li::before { color: var(--rust); }
.section--amber .stats { background: rgb(84 36 40 / .18); border-color: rgb(84 36 40 / .20); }
.section--amber .stat { background: #FFF6E6; }
.section--amber .stat b { color: var(--rust); }
.section--amber .stat small { color: #6B575C; }
.section--amber .faq summary { color: var(--maroon); }
.section--amber .faq summary::after { color: var(--rust); }
.section--amber .seg-tabs button { border-color: rgb(84 36 40 / .38); color: #5A464B; }
.section--amber .seg-tabs button[aria-selected="true"] { background: var(--maroon); border-color: var(--maroon); color: #FFE8C5; }
.section--amber .timeline time { color: var(--rust); }
.section--amber .chip { background: rgb(84 36 40 / .08); border-color: rgb(84 36 40 / .25); color: #4A3A3E; }
.section--amber .builder__out { background: rgb(84 36 40 / .06); border-color: rgb(84 36 40 / .28); color: #4A3A3E; }
.section--amber .btn--ghost { --btn-fg: var(--maroon); border-color: rgb(84 36 40 / .45); }
.section--amber .card .btn--ghost { --btn-fg: var(--maroon); }
.section--paper li { color: #3A2A2E; }

.section--paper a:not(.btn), .section--amber a:not(.btn) { color: #9E3F14; font-weight: 600; }

/* ---------- Split feature ---------------------------------------------- */
.split { display: grid; gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }
.split__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Schedule ---------------------------------------------------- */
.seg-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.seg-tabs button {
  padding: .7rem 1.3rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline); color: var(--cream-dim);
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  transition: all .22s ease;
}
.seg-tabs button[aria-selected="true"] { background: var(--sun); color: var(--ink); border-color: var(--sun); }

.timeline { list-style: none; padding: 0; position: relative; }
/* ---------- Day builder ------------------------------------------------- */
.builder { background: var(--ink-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.6rem); }
.chip-grid { display: flex; flex-wrap: wrap; gap: .55rem; margin-block: 1.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .58rem 1rem; border-radius: 999px; font-size: .92rem;
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid var(--hairline); color: var(--cream-dim);
  transition: all .2s ease; user-select: none;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(input:checked) { background: var(--ember); border-color: var(--ember); color: #fff; }
.chip:has(input:focus-visible) { box-shadow: var(--ring); }
.chip__x { opacity: 0; width: 0; transition: all .2s ease; }
.chip:has(input:checked) .chip__x { opacity: 1; width: .8em; }

.builder__out {
  margin-top: 1.2rem; padding: 1.2rem 1.4rem; border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--ink) 60%, transparent); border: 1px dashed var(--hairline);
  font-size: .96rem; color: var(--cream-dim);
}
.builder__out b { color: var(--sun); }

/* ---------- Stat band --------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--ink-2); padding: 1.6rem 1.2rem; text-align: center; }
.stat b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1; color: var(--sun); font-variant-numeric: tabular-nums; }
.stat small { display: block; margin-top: .5rem; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }

/* ---------- Lineup ------------------------------------------------------ */
/* Five acts, not four (Petrina and JBthePreacher were split onto their own cards 2026-08-11).
   auto-fit at 240px wrapped to 4 + 1, which stranded the fifth card beside three empty tracks —
   the one layout on the site that reads as broken rather than designed. Explicit column counts
   keep every row full at each breakpoint. */
.lineup { display: grid; gap: 1rem; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .lineup { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .lineup { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .lineup { grid-template-columns: 1fr; } }
.act { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--ink-3); }
.act img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.act:hover img { transform: scale(1.06); filter: saturate(1.1); }
.act__body { position: absolute; z-index: 2; inset-block-end: 0; inset-inline: 0; padding: 1.6rem 1.2rem 1.1rem;
  background: linear-gradient(transparent, rgb(8 7 22 / .92)); }
.act__body h3 { font-size: 1.15rem; }
.act__body p { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin-top: .25rem; }

/* ---------- Tier cards -------------------------------------------------- */
.tier { display: flex; flex-direction: column; gap: 1rem; }
.tier--feature { border-color: color-mix(in oklab, var(--sun) 50%, transparent);
  background: linear-gradient(170deg, color-mix(in oklab, var(--ember) 18%, var(--ink-2)), var(--ink-2)); }
.tier ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .94rem; color: var(--cream-dim); }
.tier li { display: grid; grid-template-columns: 1.3em 1fr; gap: .5rem; align-items: start; }
.tier li::before { content: "✓"; color: var(--sun); font-weight: 700; }
.tier .btn { margin-top: auto; }
.badge { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .66rem;
  font-family: var(--display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--sun); color: var(--ink); }

/* ---------- Forms ------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: var(--cream); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--ink) 62%, transparent);
  border: 1px solid var(--hairline); color: var(--cream);
  transition: border-color .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--cream) 38%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber); background: color-mix(in oklab, var(--ink) 40%, transparent); }
.field textarea { min-height: 130px; resize: vertical; }
.field--row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .field--row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .82rem; color: var(--muted); }
.form__ok {
  padding: 1rem 1.2rem; border-radius: var(--radius-sm); font-size: .95rem;
  background: color-mix(in oklab, var(--sun) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--sun) 45%, transparent); color: var(--cream);
}

/* ---------- FAQ --------------------------------------------------------- */
.faq { display: grid; gap: .7rem; }
.faq details {
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--ink-2); padding: 1rem 1.3rem; transition: border-color .2s ease;
}
.faq details[open] { border-color: color-mix(in oklab, var(--amber) 45%, transparent); }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.02rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  /* the row itself was only ~27px of hit area inside a much taller-looking card */
  min-height: 44px; margin: -1rem -1.3rem; padding: 1rem 1.3rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sun); font-size: 1.4rem; line-height: 1; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: 1.2rem; color: var(--cream-dim); font-size: .96rem; }

/* ---------- CTA band ---------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, #F6C078 0%, #F4B765 42%, #F0A24B 72%, #E8752A 100%); }
.cta-band h2 { font-size: var(--step-4); text-transform: uppercase; color: #4A1E28; }
.cta-band .lede { margin-inline: auto; color: #3D2A2E; }
.cta-band .btn-row { justify-content: center; margin-top: 1.8rem; }

/* ---------- Footer ------------------------------------------------------ */
.site-footer { background: #0A0920; border-top: 1px solid var(--hairline); padding-block: 3.5rem 2rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.footer__grid h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: .9rem; }
.footer__grid ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.footer__grid a { color: var(--cream-dim); text-decoration: none; }
.footer__grid a:hover { color: var(--sun); }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: var(--muted); }
.footer__bottom a { color: var(--cream-dim); }
.footer__built { display: inline-flex; align-items: center; gap: .4rem; }
.footer__built a {
  color: var(--sun); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid color-mix(in oklab, var(--sun) 40%, transparent);
  transition: color .2s ease, border-color .2s ease;
}
.footer__built a:hover { color: var(--cream); border-color: var(--cream); }

/* ---------- Page hero (inner pages) ------------------------------------ */
.page-hero { position: relative; padding-block: clamp(8rem, 18vh, 11rem) clamp(2.5rem, 6vw, 4rem); isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 130% at 20% -10%, #DA2A21 0%, #542428 40%, var(--ink) 74%);
}
.page-hero h1 { font-size: var(--step-4); text-transform: uppercase; }

/* ---------- Reveal on scroll (JS adds .in) ----------------------------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Mobile nav -------------------------------------------------- */
@media (max-width: 980px) {
  /* The toggle must outrank the drawer or it slides over its own close button.
     display must be FLEX, not block — the base rule centres the icon with
     align-items/justify-content, which do nothing on a block box. It was sitting 3px
     off-centre in its own 46x46 button. */
  /* The drawer painted OVER the wordmark while the toggle sat above it, so the logo showed
     up sliced in half down its middle. The drawer's 6rem top padding was always meant to
     leave the header row visible — the brand just was never lifted into it. */
  .brand { position: relative; z-index: 2; }

  .nav__toggle {
    display: inline-flex; position: relative; z-index: 2;
    -webkit-tap-highlight-color: transparent;   /* iOS grey flash on tap */
    touch-action: manipulation;                 /* kill the legacy 300ms tap delay */
  }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); z-index: 1;
    background: var(--ink-2); border-left: 1px solid var(--hairline);
    flex-direction: column; align-items: stretch; gap: .2rem;
    /* The home indicator on notched iPhones sits over the last ~34px, and landscape
       notches eat the right edge — env() keeps the final item tappable on both. */
    padding: 6rem 1.2rem max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
    padding-inline-end: max(1.2rem, env(safe-area-inset-right));
    transform: translateX(102%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav__links[data-open="true"] { transform: none; }
  .nav__links a { padding: .85rem 1rem; font-size: 1.05rem; }
  .nav__links .btn { margin-top: .8rem; justify-content: center; }

  /* The drawer is full-height but the seven links only reach ~60% of it, leaving a large
     dead void under the RSVP button. Anchor the practical details to the bottom so the
     panel reads as designed rather than truncated. */
  .nav__meta { margin-top: auto; padding-top: 1.4rem; display: grid; gap: .3rem;
    border-top: 1px solid var(--hairline); font-size: .85rem; color: var(--muted); }
  .nav__meta strong { color: var(--cream); font-weight: 700; font-size: .92rem; }
  .nav__meta a { color: var(--sun); text-decoration: none; padding: .35rem 0; min-height: 32px;
    display: inline-flex; align-items: center; }

  /* Seven links + a button + the meta block came to ~780px, which overflows a 667px iPhone SE.
     The drawer scrolls, but a menu that needs scrolling to reach its own phone number is a
     worse menu. Tighten on short viewports instead. Measured, not guessed. */
  @media (max-height: 760px) {
    .nav__links { padding-top: 4.9rem; }
    .nav__links a:not(.btn) { padding-block: .58rem; font-size: 1rem; }
    .nav__links .btn { margin-top: .5rem; padding-block: .72rem; }
    .nav__meta { padding-top: .9rem; gap: .15rem; font-size: .8rem; }
    .nav__meta a { padding: .2rem 0; min-height: 28px; }
  }
  /* Below ~700px tall there is genuinely no room for the detail lines. Drop them rather than
     squeeze everything — on a screen that short the links already fill the panel, so the dead
     space this block exists to solve is not there anyway. Date + the two contacts survive. */
  @media (max-height: 700px) {
    .nav__meta > span { display: none; }
    .nav__meta { padding-top: .7rem; }
  }
  /* Under ~620px tall (a phone held sideways) even the trimmed block cannot earn its space —
     the seven links themselves have to scroll. Drop it entirely so there is less to scroll past.
     The drawer keeps overscroll-behavior:contain, so scrolling it never leaks to the page. */
  @media (max-height: 620px) { .nav__meta { display: none; } }

  /* Dim the page behind the open drawer; tapping it closes (handled in JS). */
  .nav__backdrop {
    position: fixed; inset: 0; z-index: 0; background: rgb(8 7 22 / .6);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .nav__backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

  /* The drawer items arrive staggered behind the panel rather than all at once. Index is set
     inline by build.py so this needs no JS. */
  .nav__links[data-open="true"] li {
    animation: navIn .42s cubic-bezier(.2,.9,.3,1) backwards;
    animation-delay: calc(60ms + var(--i, 0) * 38ms);
  }
  @keyframes navIn { from { opacity: 0; transform: translateX(18px); } }
}
@media (min-width: 981px) { .nav__backdrop { display: none; } }

/* Tabs were the only pill component on the site with no hover affordance. */
.seg-tabs button:not([aria-selected="true"]):hover { color: var(--cream); border-color: var(--amber); }
.section--amber .seg-tabs button:not([aria-selected="true"]):hover,
.section--paper .seg-tabs button:not([aria-selected="true"]):hover {
  color: var(--maroon); border-color: var(--maroon);
  background: color-mix(in oklab, var(--maroon) 8%, transparent); }
@media (max-width: 700px) { .seg-tabs button { padding: .85rem 1.3rem; } }

/* A static notice card was inheriting the hover lift meant for interactive cards. */
.card:not(a):hover { transform: none; }

/* Per-item accent so the three day-part lists aren't typographically identical. */
[role="tabpanel"] li { border-inline-start: 3px solid var(--ember); padding-inline-start: .75rem; }
[role="tabpanel"] li:nth-of-type(3n+2) { border-inline-start-color: var(--sun); }
[role="tabpanel"] li:nth-of-type(3n+3) { border-inline-start-color: var(--brick); }

/* The "set times to come" line had no container, unlike the equivalent notice on
   /schedule/ — it read as an afterthought rather than a decision. */
.tbd-note {
  display: block; width: max-content; max-width: 100%; margin: 1.7rem auto 0;
  padding: .55rem 1.15rem; border-radius: 999px; border: 1px dashed var(--hairline);
  color: var(--cream-dim); font-size: .88rem; text-align: center; }

/* BUG: the ghost button on the closing band measured 1.76:1 — pale cream on the
   amber gradient — on the exact sentence meant to close the sale. */
.cta-band .btn--ghost { --btn-fg: #4A1E28; border-color: color-mix(in oklab, #4A1E28 45%, transparent); }
.cta-band .btn--ghost:hover { background: color-mix(in oklab, #4A1E28 10%, transparent); }

/* "Still being finalised" was an apology buried mid-paragraph. As a tagged status
   callout it becomes "here is exactly what's pending" — and each page names a
   different pending item, so it doubles as a per-page differentiator. */
.status-note { display: flex; gap: .8rem; align-items: flex-start; margin-top: 1.2rem;
  padding: 1rem 1.2rem; border: 1px dashed var(--hairline); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--ink) 60%, transparent); }
.status-note__tag { flex: none; font-family: var(--display); font-weight: 800; font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sun);
  border: 1px solid color-mix(in oklab, var(--sun) 45%, transparent);
  border-radius: 999px; padding: .32rem .62rem; white-space: nowrap; }
.status-note p { margin: 0; }
.section--paper .status-note, .section--amber .status-note {
  background: rgb(84 36 40 / .05); border-color: rgb(84 36 40 / .28); }
.section--paper .status-note__tag, .section--amber .status-note__tag {
  color: var(--rust); border-color: color-mix(in oklab, var(--rust) 50%, transparent); }

.stat--lead b { font-size: clamp(2rem, 5vw, 3rem); }
.section--amber .stat small, .section--paper .stat small { font-weight: 600; }

/* BUG: .section--amber .card (0,2,0) outranks .tier--feature (0,1,0) regardless
   of source order, so the featured card silently lost its highlight on amber.
   Same family as the .nav__links a vs .btn bug fixed earlier. */
.section--amber .card.tier--feature {
  background: linear-gradient(170deg, color-mix(in oklab, var(--ember) 22%, #FFF6E6), #FFF6E6);
  border-color: color-mix(in oklab, var(--rust) 55%, transparent); }
.section--paper .card.tier--feature {
  background: linear-gradient(170deg, color-mix(in oklab, var(--ember) 18%, #FFFFFF), #FFFFFF);
  border-color: color-mix(in oklab, var(--rust) 50%, transparent); }

/* The media column was centred against a text column 218px taller, leaving dead
   space above and below the photo. Scoped so #location keeps centring. */
#what .split { align-items: start; }

/* The chips already carry their day-part in data-time for the JS; surfacing it
   visually costs nothing and makes a generic filter feel like this event.
   box-shadow not border, so nothing shifts. */
.chip:has(input[data-time="Morning"])   { box-shadow: inset 3px 0 0 var(--ember); }
.chip:has(input[data-time="Afternoon"]) { box-shadow: inset 3px 0 0 var(--sun); }
.chip:has(input[data-time="Evening"])   { box-shadow: inset 3px 0 0 var(--brick); }
.chip:has(input:checked) { box-shadow: none; }

/* Reuse the lineup's top-bar device so the three day-part cards differentiate. */
#glance .photo-card { position: relative; }
#glance .photo-card::before { content: ""; position: absolute; inset-inline: 0;
  inset-block-start: 0; height: 4px; z-index: 3; }
#glance .photo-card:nth-of-type(1)::before { background: var(--ember); }
#glance .photo-card:nth-of-type(2)::before { background: var(--sun); }
#glance .photo-card:nth-of-type(3)::before { background: var(--brick); }

/* Gold focus ring measured ~1.8:1 on light surfaces, under the 3:1 non-text floor. */
.section--paper :focus-visible, .section--amber :focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--maroon) 60%, transparent); }
.section--amber .faq summary::after { color: #8E2F14; }

/* The ticker hard-clipped at both edges and ran too fast to read on a phone. */
.ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
@media (max-width: 600px) { .ticker__track { animation-duration: 56s; } }

/* Google's default red/blue POI pins fought the warm palette. */
iframe[title^="Map"] { filter: grayscale(.55) contrast(1.1) saturate(.85); }

/* ---------- Atmosphere / texture ---------------------------------------- */
/* Grain already ships globally on body::after, so the hero-scoped version is
   deliberately omitted here to avoid doubling it. */

/* The flyer has a torn brush seam; this bites an ember tooth-strip into the
   first cream section. .section is already position:relative. */
#what::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px; height: 11px;
  background: var(--ember);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='11'%3E%3Cpolygon points='0,0 0,3 7,11 14,2 21,11 28,3 28,0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='11'%3E%3Cpolygon points='0,0 0,3 7,11 14,2 21,11 28,3 28,0'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;  mask-repeat: repeat-x;
  -webkit-mask-size: 28px 11px;   mask-size: 28px 11px;
}

/* Near-invisible at rest, blooms warm from the edges on hover. */
.card { box-shadow: inset 0 0 46px -30px var(--ember); }
.card:hover { box-shadow: inset 0 0 64px -22px var(--ember); }

/* Corner vignette — pulls the eye to the sun and the headline. */
.hero__scrim::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 45%, transparent 55%,
    color-mix(in oklab, var(--ink) 90%, transparent) 100%);
}

/* Warm haze at the far/mid ridge boundary. Sitting above ~55% washes out the
   eyebrow line — the reviewer measured +17 luminance there. Do not raise it. */
.hero__scrim::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 59%; height: 9%;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent,
    color-mix(in oklab, var(--sun) 40%, transparent) 50%, transparent);
}

/* ---------- Craft pass --------------------------------------------------- */
/* Below 700px the sun sits behind the tagline: cream on gold, close in
   lightness. A soft local scrim separates them without dimming the sun. */
@media (max-width: 700px) {
  .hero__tagline { position: relative; isolation: isolate; }
  .hero__tagline::before {
    content: ""; position: absolute; inset: -.35em -.7em; z-index: -1;
    background: radial-gradient(closest-side, rgb(14 13 38 / .44), transparent 75%);
    filter: blur(7px); border-radius: 999px;
  }
}

/* Oversized 01/02 numerals were the one element that could be lifted onto any
   SaaS pricing page. A ring badge echoes the RWC crest instead. */
#why .card__num {
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
  font-size: 1.3rem; border-radius: 50%; position: relative; margin-bottom: 1rem;
  box-shadow: inset 0 0 0 2.5px color-mix(in oklab, var(--rust) 60%, transparent);
}
#why .card__num::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--rust) 22%, transparent);
}

/* Grain over the flat vector fills — the single biggest depth win site-wide. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay; background-size: 140px 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

/* The footer just stopped; give it a closing beat that echoes the hero ridge. */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 8px;
  background: linear-gradient(135deg, var(--ember) 25%, transparent 25%) 0 0/8px 8px,
              linear-gradient(225deg, var(--ember) 25%, transparent 25%) 0 0/8px 8px;
  opacity: .32;
}

/* The four lineup images are deliberately faceless stand-ins; without this they
   blur into one stock pack. */
.lineup .act { position: relative; }
.lineup .act.ph::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px; z-index: 2;
  background: var(--ember);
}
.lineup .act.ph::before { background: var(--sun); }

/* Light-catch edge — the top highlight every polished dark UI has. */
.card, .builder, .faq details, .stat {
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--cream) 10%, transparent); }
.section--paper .card, .section--amber .card,
.section--paper .builder, .section--paper .faq details, .section--amber .faq details {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55); }

/* Photos set into the layout rather than pasted on top. */
.photo-card__media, .act, .split__media { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }

/* ---------- Editorial polish -------------------------------------------- */
/* Display sizes need tighter tracking than the h1-h4 base; only the homepage
   hero had it. */
.page-hero h1, .cta-band h2 { letter-spacing: -.035em; }

/* Widow control was scoped to .lede; ordinary body copy could still orphan a word. */
.section p { text-wrap: pretty; }

/* Numerals appear in more places than the countdown and stat band. */
.eyebrow, .seg-tabs button, .photo-card__tag { font-variant-numeric: tabular-nums; }

/* One drop cap, on the site's actual editorial lede. */
#what .lede::first-letter {
  font-family: var(--display); font-weight: 900; float: left;
  font-size: 3.4em; line-height: .82; padding: .04em .1em 0 0; color: var(--rust);
}

/* Pull-quote mark, echoing the flyer's own accent-rule device. */
#why h2 { position: relative; padding-inline-start: 1.4em; }
#why h2::before { content: "\201C"; position: absolute; inset-inline-start: 0; inset-block-start: -.15em;
  font-family: var(--display); font-size: 1.5em; color: var(--rust); opacity: .55; }

/* Reuse .card__num's oversized-numeral device on the three day-parts rather
   than inventing a second motif. */
#panel-morning h2::before, #panel-afternoon h2::before, #panel-evening h2::before {
  display: block; font-family: var(--display); font-weight: 900; font-size: 3.4rem;
  line-height: 1; color: color-mix(in oklab, var(--rust) 40%, transparent); margin-bottom: .1rem;
}
#panel-morning h2::before   { content: "01"; }
#panel-afternoon h2::before { content: "02"; }
#panel-evening h2::before   { content: "03"; }

/* The day-part lists were the one flat text dump on a card-driven site. */
[role="tabpanel"] li { border-block-end: 1px solid rgb(84 36 40 / .16); padding-block: .5rem; }
[role="tabpanel"] li:last-child { border-block-end: none; }

/* auto-fit leaves the lone "More to be announced" tile stranded beside three
   empty tracks — the only spot that reads as broken rather than designed. */
.lineup .act--announce { grid-column: 1 / -1; aspect-ratio: auto; min-height: 9rem; }

/* "500-1,000+" was breaking mid-figure in the 2-col mobile grid. */
@media (max-width: 480px) {
  .stat b { white-space: nowrap; font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
}
/* At <=700px the sun sits behind the headline: cream on gold, close in lightness. */
@media (max-width: 700px) {
  .hero__title, .hero__tagline { text-shadow: 0 2px 4px rgb(0 0 0 / .40), 0 10px 34px rgb(0 0 0 / .60); }
}

/* ---------- Motion polish ----------------------------------------------- */
/* Schedule panels used to hard-cut between segments — the flattest moment on
   the site, on the page whose whole job is walking someone through a day. */
[data-segment] { animation: panel-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The closing ask should arrive, not just be there. */
.js .cta-band.reveal { transform: translateY(36px) scale(.985); }
.cta-band.reveal.in { transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }

/* Only the digit that actually changed moves. */
.count-unit b.tick { animation: digit-tick .32s cubic-bezier(.2,.8,.2,1); }
@keyframes digit-tick { 0% { transform: translateY(-6px); opacity: .45; } 100% { transform: none; opacity: 1; } }

/* Barely perceptible, which is the point. */
.hero__birds svg { animation: bird-drift 90s linear infinite alternate; }
@keyframes bird-drift { from { transform: translateX(0); } to { transform: translateX(-2.5%); } }

/* Ridge parallax, Chromium-only for now. Unsupported browsers render static —
   inert, not broken — so there is no fallback path to maintain. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__ridge--far { animation: ridge-far 1 linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero__ridge--mid { animation: ridge-mid 1 linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes ridge-far { to { transform: translateY(-4%); } }
    @keyframes ridge-mid { to { transform: translateY(-8%); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-segment], .count-unit b.tick, .hero__birds svg { animation: none; }
  .cta-band.reveal, .cta-band.reveal.in { transform: none; transition: none; }
}

/* ---------- Print ------------------------------------------------------- */
@media print {
  .site-header, .ticker, .hero__scroll, .cta-band, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Gallery ------------------------------------------------------ */
/* Square cells: the client's photos arrive in both orientations, and a square
   crop is the only ratio that treats a portrait and a landscape equally well. */
.gallery { display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* auto-fit fell to ONE column inside the mobile gutters, turning 12 squares into 4,800px of
   scrolling — measured on a 390px viewport. A proof wall wants to read as a wall, so pin the
   count instead of letting it collapse. */
@media (max-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: .45rem; } }
@media (max-width: 430px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { margin: 0; aspect-ratio: 1; overflow: hidden; position: relative;
  border-radius: calc(var(--radius) * .55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); background: var(--ink-3); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.gallery figure:hover img, .gallery figure:focus-within img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .gallery img { transition: none; } }

/* A wide media box for photos that must be seen whole. The venue exterior is the case that
   forced it: any cover-crop tighter than its native ratio cuts the building. */
.split__media--wide { aspect-ratio: 11 / 6; }

/* ---------- Touch targets ------------------------------------------------ */
/* Footer links rendered as 18px-tall text runs — fine with a mouse, fiddly with a thumb and under
   the 24px WCAG 2.5.8 floor. Padding the anchor rather than the <li> keeps the whole row tappable.
   Measured on a real 390px viewport, not guessed. */
/* WCAG 2.5.8 floor of 24px applies to every pointer, not just touch — the first pass only scoped
   this to (hover: none) and desktop was never measured. 24px everywhere, 44px where thumbs are. */
.footer__grid li > a { display: flex; align-items: center; min-height: 24px; }
.footer__built a { display: inline-flex; align-items: center; min-height: 24px; padding-inline: .2rem; }
.brand { min-height: 24px; }

@media (hover: none), (max-width: 720px) {
  .footer__grid ul { gap: .1rem; }
  .footer__grid li > a { padding-block: .62rem; min-height: 44px; }
  .nav__links a { min-height: 46px; display: flex; align-items: center; }
  .footer__built a { min-height: 34px; }
}

/* ---------- Partnership pricing ------------------------------------------ */
/* Added 2026-08-11 when the sponsor + community-partner packets arrived and the pages stopped
   being "call us, levels are still being set". Real tiers, real numbers, straight from the PDF. */
.tier__price { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1; color: var(--sun); letter-spacing: -.02em; }
.tier__price small { display: block; font-family: var(--body); font-weight: 600; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .45rem; }
.section--paper .tier__price, .section--amber .tier__price { color: var(--rust); }
.section--paper .tier__price small, .section--amber .tier__price small { color: #6B565A; }
.tier__addon { font-size: .86rem; padding: .6rem .75rem; border-radius: 10px;
  background: color-mix(in oklab, var(--sun) 12%, transparent);
  border: 1px dashed color-mix(in oklab, var(--sun) 45%, transparent); }

/* Pill list — "sponsor an experience" and the in-kind wish list are both flat enumerations that
   read better as scannable chips than as another bulleted column. */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.pills li { padding: .45rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  border: 1px solid var(--hairline); background: color-mix(in oklab, var(--cream) 6%, transparent); }
.section--paper .pills li, .section--amber .pills li {
  border-color: rgb(84 36 40 / .22); background: rgb(255 255 255 / .5); color: #4A3A3E; }

/* Value stack: a two-column figure list, not a real table — it is a price sheet, not data. */
.valuestack { display: grid; gap: 0; margin: 0; }
.valuestack div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .7rem 0; border-block-end: 1px solid var(--hairline); font-size: .96rem; }
.valuestack div:last-child { border-block-end: none; border-block-start: 2px solid var(--sun);
  margin-block-start: .3rem; padding-block-start: .9rem; font-weight: 800; font-size: 1.08rem; }
.valuestack b { white-space: nowrap; color: var(--sun); font-weight: 800; }
.section--paper .valuestack div, .section--amber .valuestack div { border-color: rgb(84 36 40 / .16); }
.section--paper .valuestack b, .section--amber .valuestack b { color: var(--rust); }
.footnote { font-size: .82rem; color: var(--muted); margin-top: 1rem; max-width: 70ch; }
.section--paper .footnote, .section--amber .footnote { color: #6B565A; }

/* Client note 2026-08-11: the "Get started" buttons on the Co-op and Legacy cards read as greyed
   out / disabled. They were .btn--ghost, which is a transparent outline — on a dark card that is
   almost invisible and looks like a dead control. Give ghost buttons INSIDE a tier card a real
   surface so all three read as clickable, while the featured tier keeps the solid fill and stays
   the emphasis. */
.tier .btn--ghost {
  background: color-mix(in oklab, var(--cream) 11%, transparent);
  border-color: color-mix(in oklab, var(--cream) 34%, transparent);
  --btn-fg: var(--cream);
}
.tier .btn--ghost:hover {
  background: color-mix(in oklab, var(--sun) 22%, transparent);
  border-color: color-mix(in oklab, var(--sun) 62%, transparent);
}
.section--paper .tier .btn--ghost, .section--amber .tier .btn--ghost {
  background: rgb(84 36 40 / .07); border-color: rgb(84 36 40 / .38); --btn-fg: var(--maroon);
}
.section--paper .tier .btn--ghost:hover, .section--amber .tier .btn--ghost:hover {
  background: rgb(84 36 40 / .14);
}

/* ---------- Reduced motion (must be LAST) -------------------------------- */
/* This lived next to .nav__burger, which put it BEFORE the mobile nav block — equal specificity,
   so the later rule won and the staggered entrance still ran for people who asked for no motion.
   Cascade order is the fix; keep this at the end of the file. */
@media (prefers-reduced-motion: reduce) {
  .nav__burger i { transition: none; }
  .nav__links { transition: none; }
  .nav__links[data-open="true"] li { animation: none; }
  .nav__backdrop { transition: none; }
}