:root {
  --ink: #000000;
  --ember: #FF5C1A;
  --ember-wash: #131209;
  --surface: #181818;
  --raised: #1F1F1F;
  --hairline: #272727;
  --line: #313131;
  --body: #C9C9C9;
  --muted: #9B9B9B;
  --paper: #FFFFFF;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 0.3s;
  --dur: 0.5s;
  --dur-slow: 0.9s;
  /* One step up from ember, for hover. The old hover flashed to pure white,
     which read as a toggle rather than a lift. */
  --ember-lift: #FF7038;
  --nav-h: 72px;
  --wrap: 1200px;
  --pad-x: clamp(20px, 5vw, 40px);
  --radius-pill: 9999px;
  --radius-card: 16px;
  --radius-lg: 24px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

/* picture must not create a box, or the frame layouts gain a stray inline gap. */
picture { display: contents; }

a { color: var(--paper); text-decoration: none; }
a:hover { color: var(--ember); }

button, input, textarea { font-family: inherit; }

::selection { background: var(--ember); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  background: var(--ember);
  color: var(--ink);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
}
.skip:focus { top: 12px; }

/* Type */
.eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ember);
}

.display-xl,
h1 {
  margin: 0;
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 7.5vw, 68px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-l,
h2 {
  margin: 0;
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-m {
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-title,
h3 {
  margin: 0;
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lead {
  margin: 24px 0 0;
  max-width: 680px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.prose { margin: 24px 0 0; font-size: 16px; line-height: 24px; color: var(--body); text-wrap: pretty; }
.prose + .prose { margin-top: 16px; }

/* Layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.sec { padding-block: clamp(64px, 10vw, 120px); }
.sec-tight { padding-block: clamp(48px, 8vw, 64px); }
.sec-cta { padding-block: clamp(96px, 14vw, 148px) clamp(64px, 8vw, 88px); text-align: center; background: var(--ember-wash); border-top: 1px solid var(--hairline); }
.sec-cta h2 { max-width: 680px; margin-left: auto; margin-right: auto; }
.sec-cta .lead { margin-left: auto; margin-right: auto; }
.surface { background: var(--surface); }
.wash { background: var(--ember-wash); }
.hair-top { border-top: 1px solid var(--hairline); }
.hair-bot { border-bottom: 1px solid var(--hairline); }
.center { text-align: center; }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ember); color: var(--ink); }
.btn-primary:hover { background: var(--ember-lift); color: var(--ink); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--paper); color: var(--paper); transform: translateY(-2px); }
.btn-sm { min-height: 44px; padding: 12px 16px; font-size: 14px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.cta-row.center { justify-content: center; margin-top: 40px; }

/* Nav */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  background: rgba(24, 24, 24, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--hairline);
  border-radius: 28px;
  padding: 6px 6px 6px 14px;
  min-height: 52px;
}

.nav-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.nav-logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.nav-logo img { height: 28px; width: auto; object-fit: contain; }
.nav-logo .logo-full { width: 86px; height: 28px; }
.nav-logo .logo-mark { display: none; width: 18px; height: 24px; }

.nav-links {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(12px, 2vw, 20px);
  font-size: 14px;
  font-weight: 600;
}

.nav-links a { color: var(--muted); padding-block: 8px; }
.nav-links a:hover { color: var(--paper); }
.nav-links a.is-current { color: var(--ember); }

.nav-cta { flex-shrink: 0; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border: 0;
  background: var(--ember);
  color: var(--ink);
  cursor: pointer;
  border-radius: 12px;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.82);
  padding: max(80px, calc(env(safe-area-inset-top) + 72px)) 16px 32px;
}
.nav-drawer.is-open { display: block; }
.nav-drawer-inner {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-drawer a {
  display: block;
  font-size: 18px;
  font-weight: 600;
  padding: 14px 12px;
  color: var(--paper);
  border-radius: 12px;
}
.nav-drawer a.is-current { color: var(--ember); }
.nav-drawer .btn { margin-top: 12px; width: 100%; }

/* Seven nav items need more room than the original five, so the desktop nav
   starts at 1040px. Everything else on the page still switches at 860px, which
   is why these rules live in their own queries rather than the big ones below.
   If you add an eighth item, raise both numbers together. */
@media (min-width: 1040px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-logo .logo-full { height: 30px; width: 93px; }
  .nav-pill {
    width: auto;
    /* Capped at the content width. Left uncapped it stretched to 1873px on a
       1920 monitor, at which point it is a bar, not a pill, and its edges line
       up with nothing on the page. */
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 8px 8px 8px 24px;
    gap: clamp(10px, 2vw, 24px);
  }
}

@media (max-width: 1039px) {
  .nav-cta { display: none; }
  .nav-links { display: none; }
}

@media (max-width: 859px) {
  .nav-logo .logo-full { height: 22px; width: 68px; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media, .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Weighted to the bottom, where the copy and the ghost button sit. A flat
     66% wash left white text on a bright stage photo hard to read. */
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.82) 26%,
      rgba(0, 0, 0, 0.6) 58%,
      rgba(0, 0, 0, 0.5) 100%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 48px) var(--pad-x) clamp(56px, 9vw, 80px);
}
.hero-meta { margin: 24px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }

.page-hero {
  padding-block: calc(var(--nav-h) + clamp(48px, 10vw, 88px)) clamp(48px, 7vw, 72px);
  border-bottom: 1px solid var(--hairline);
}

/* Countdown */
.countdown-sec { background: var(--ember-wash); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.countdown-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
/* Rounded, bordered boxes read as iOS widgets bolted onto the page. The
   numerals carry it on their own, divided by the same hairline used
   everywhere else. */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  flex: 1 1 320px;
  max-width: 470px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cd-cell {
  text-align: left;
  padding: 18px 8px 20px 18px;
  border-left: 1px solid var(--hairline);
  min-width: 0;
}
.cd-cell:first-child { border-left: 0; padding-left: 0; }
.cd-num {
  font-family: Poppins, sans-serif;
  font-weight: 200;
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.cd-label {
  margin-top: 8px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* Tagline */
.tagline {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(96px, 16vw, 160px) var(--pad-x);
}
.tagline p {
  margin: 0;
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 4.6vw, 42px);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.tagline [data-w] {
  color: rgba(255, 255, 255, 0.22);
  transition: color 0.7s var(--ease);
}

/* Media frames */
.frame {
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--hairline);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-round { border-radius: 24px; height: clamp(280px, 55vw, 520px); }
.frame-card { border-radius: 16px; }
.frame-circle {
  width: clamp(200px, 45vw, 280px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
}
.frame-circle img { object-position: center 20%; }

/* Event / card grids */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.link-quiet { color: var(--muted); font-weight: 600; font-size: 16px; }
.link-quiet:hover { color: var(--ember); }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 560px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

.event-card {
  display: block;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 24px;
  color: var(--paper);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.event-card:hover { transform: translateY(-4px); border-color: var(--ember); color: var(--paper); }
.event-card .when {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ember);
}
.event-card h3 { margin-top: 12px; }
.event-card p { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); text-wrap: pretty; }

.event-row {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.event-row .frame { min-height: clamp(200px, 40vw, 320px); border: 0; border-radius: 0; }
.event-row-copy {
  padding: clamp(28px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
.event-stack { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 800px) {
  .event-row { grid-template-columns: 1fr 1fr; }
}

/* Mosaic */
.mosaic-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(140px, 28vw);
  gap: 12px;
}
@media (min-width: 700px) {
  .mosaic-home {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-auto-rows: clamp(160px, 18vw, 240px);
    gap: 16px;
  }
}
.mosaic-home .frame { height: 100%; min-height: 0; }

.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(120px, 18vw);
  gap: 12px;
}
.mosaic .span-2 { grid-column: span 2; }
.mosaic .span-row { grid-row: span 2; }
.mosaic .frame { height: 100%; min-height: 0; }
@media (max-width: 859px) {
  .mosaic .span-row { grid-row: auto; }
  .nav-cta { display: none; }
}
@media (min-width: 700px) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 22vw, 220px);
    gap: 16px;
  }
}

.gallery-mosaic { cursor: zoom-in; }
.gallery-mosaic .frame { cursor: zoom-in; }

/* Team */
.team-lead { max-width: 400px; margin: 64px auto 0; text-align: center; }
.team-lead h3 { margin-top: 24px; }
.team-lead .role {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ember);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: clamp(48px, 8vw, 80px);
  text-align: center;
}
.avatar {
  width: clamp(88px, 22vw, 140px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: 0.08em;
  color: var(--ember);
}
.team-grid h3 {
  margin-top: 16px;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.team-grid .role {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--muted);
}
@media (min-width: 700px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Connect */
.fact { margin: 0; }
.fact dt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.fact dd { margin: 4px 0 0; color: var(--body); }
.facts { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.map-frame {
  height: 240px;
  background: var(--raised);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin-top: 8px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.05); }

.form-card {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-card label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
}
.form-card input,
.form-card textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--paper);
  font-size: 16px;
  outline: none;
  width: 100%;
}
.form-card input:focus,
.form-card textarea:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(255, 92, 26, 0.25);
}
.form-card textarea { resize: vertical; min-height: 120px; }
/* Cloudflare Turnstile renders its own iframe at a fixed size, so all this
   does is stop the grid gap doubling around it. */
.form-turnstile { min-height: 65px; }

.form-error { margin: 0; font-size: 14px; line-height: 20px; color: var(--ember); font-weight: 600; }
.form-success {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 48px 28px;
  text-align: center;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.form-success.is-shown { display: flex; }
.form-wrap.is-sent .form-card { display: none; }

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.92);
  padding: 24px;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(1200px, 100%);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}
.lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--paper);
  cursor: pointer;
  font-size: 22px;
}

/* Footer */
.site-footer { background: var(--ink); border-top: 1px solid var(--hairline); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-block: clamp(48px, 8vw, 64px);
}
.site-footer .logo { height: 34px; width: auto; }
.site-footer p { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); max-width: 280px; }
.foot-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.foot-col .label {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 12px;
  color: var(--muted);
}
.foot-col a { color: var(--body); }
.foot-col a:hover { color: var(--ember); }
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--hairline);
  padding-block: clamp(20px, 3vw, 28px) clamp(28px, 5vw, 40px);
  font-size: 12px;
  color: var(--muted);
}
.foot-meta p { margin: 0; max-width: none; }
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}

.page-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: clamp(48px, 8vw, 64px);
  font-size: 14px;
  color: var(--muted);
}
.page-foot img { height: 34px; width: auto; }
.page-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.page-foot a { color: var(--body); }

/* Reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .btn, .event-card, .tagline [data-w] { transition: none; }
}

@media (max-width: 859px) {
  :root {
    --pad-x: 24px;
    --nav-h: 68px;
  }

  html { overflow-x: clip; }
  body { overflow-x: clip; }

  .hero {
    min-height: 100svh;
    align-items: flex-end;
  }
  .hero-copy {
    padding: calc(var(--nav-h) + 12px) var(--pad-x) calc(36px + env(safe-area-inset-bottom, 0px));
  }
  .hero h1 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.12;
  }
  .hero .lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
  }
  .hero .cta-row { margin-top: 20px; gap: 12px; }
  .hero-meta { margin-top: 16px; font-size: 13px; }

  .page-hero {
    padding-block: calc(var(--nav-h) + 36px) 48px;
  }
  .page-hero h1 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .sec { padding-block: 56px; }
  .sec-tight { padding-block: 40px; }
  .sec-cta { padding-block: 64px 52px; }
  .tagline { padding: 64px var(--pad-x); }
  .tagline p { font-size: clamp(22px, 6.5vw, 28px); }

  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .sec-head h2,
  h2 {
    max-width: 100%;
    min-width: 0;
  }

  .countdown-row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .countdown {
    flex: none;
    width: 100%;
    max-width: none;
  }
  .countdown-row .btn { width: 100%; }

  .card-grid { margin-top: 28px; }
  .event-card { padding: 20px; }
  .event-card h3 { font-size: 18px; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    padding-block: 40px 24px;
  }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .site-footer p { max-width: none; }

  .page-foot {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 40px;
  }
}

@media (max-width: 559px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn,
  .cta-row .btn:only-child,
  .sec-cta .btn { width: 100%; max-width: none; flex: none; }
  .nav-cta .btn { width: auto; }
}

/* Honeypot: off screen but not display:none, so bots still fill it. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Programmatic focus on the success card should not draw a ring. */
[data-form-success]:focus { outline: none; }

/* Lightbox triggers are keyboard operable. */
[data-lightbox-src] { cursor: zoom-in; }
[data-lightbox-src]:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.btn[disabled] { opacity: 0.65; cursor: progress; }

.service-times {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--muted);
}

/* ======================================================================
   Components added with the CMS build: route cards, New here, Watch.
   Everything here uses the tokens at the top of this file. If you are
   adding to it, take the colour from a var, never a literal.
   ====================================================================== */

/* Shared spacing helpers, replacing the inline styles the old HTML carried. */
.btn-spaced { margin-top: 32px; }
.btn-spaced-sm { margin-top: 12px; }
.home-split { padding-bottom: clamp(96px, 16vw, 160px); }
.split-top { align-items: start; }
.countdown-address { margin-top: 12px; }
.plan-body { max-width: 480px; }
.event-row-body { margin: 0; max-width: 560px; }
.team-heading { max-width: 680px; margin-left: auto; margin-right: auto; }
.prayer-heading { max-width: 680px; margin-left: auto; margin-right: auto; }
.foot-address { margin: 0; color: var(--body); max-width: none; }

/* A standalone `when` label. .event-card .when already existed; the events and
   watch pages needed the same treatment outside a card. */
.when {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}

.fact-link { display: inline-block; margin-top: 8px; color: var(--ember); font-weight: 600; }
.fact-socials { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.fact-socials a { color: var(--body); font-weight: 600; }
.fact-socials a:hover { color: var(--ember); }

.gallery-note {
  margin: 48px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
}
.gallery-note a { color: var(--ember); font-weight: 600; }

.form-small { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.form-success-body { margin: 0; }

/* ---- Route cards -------------------------------------------------- */

.route-sec {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(8px, 2vw, 20px) clamp(16px, 2.5vw, 28px);
}
/* No arrow glyphs. A floating chevron on a card is decoration pretending to
   be an affordance: the whole card is already the link. The signal is the
   hairline drawing across the top on hover, which is the same rule language
   the New here list and the countdown use. */
.route-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.route-card {
  position: relative;
  display: block;
  color: var(--paper);
  padding: 30px 0 34px;
  border-top: 1px solid var(--hairline);
}
.route-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--ember);
  transition: width 0.55s var(--ease);
}
.route-card:hover::after,
.route-card:focus-visible::after { width: 100%; }
.route-card:hover,
.route-card:focus-visible { color: var(--paper); }
.route-title {
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.15;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  margin: 0;
  transition: color var(--dur) var(--ease);
}
.route-card:hover .route-title { color: var(--ember); }
.route-card p {
  margin: 12px 0 0;
  max-width: 32ch;
  font-size: 15px;
  line-height: 23px;
  color: var(--body);
}

@media (min-width: 760px) {
  .route-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(28px, 4vw, 64px);
  }
  .route-card { padding: 34px 0 34px; }
}

/* ---- New here: what a Sunday looks like ---------------------------- */

.expect-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.expect-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 8px;
  align-items: start;
  background: var(--surface);
  padding: 26px 0;
}
.expect-n {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.expect-item h3 {
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.expect-item p {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 23px;
  color: var(--body);
}
.expect-next {
  margin: 36px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}
.expect-next strong { color: var(--paper); font-weight: 700; }

@media (min-width: 760px) {
  .expect-list { grid-template-columns: 1fr 1fr; }
  .expect-item { padding: 30px 28px 30px 0; }
  .expect-item:nth-child(even) { padding-left: 28px; padding-right: 0; }
}

/* ---- FAQ ----------------------------------------------------------- */

.faq-list {
  margin-top: 36px;
  border-top: 1px solid var(--hairline);
}
.faq { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: Manrope, sans-serif;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--paper);
  transition: color 0.4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ember); }
.faq summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* A plus that becomes a minus. Two bars, one rotated. */
.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
  background: var(--ember);
  transition: transform 0.4s var(--ease);
}
.faq-mark::after { transform: rotate(90deg); }
.faq[open] .faq-mark::after { transform: rotate(0deg); }

.faq-body { padding: 0 0 24px; }
.faq-body p {
  margin: 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 25px;
  color: var(--body);
}

/* ---- Watch --------------------------------------------------------- */

.message-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (min-width: 620px) { .message-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .message-grid { grid-template-columns: repeat(3, 1fr); } }

.message-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--paper);
  transition: transform 0.5s var(--ease);
}
.message-card:hover { transform: translateY(-4px); color: var(--paper); }
.message-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
}
.message-thumb img { width: 100%; height: 100%; object-fit: cover; }
.message-play {
  position: absolute;
  inset: auto auto 12px 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--ink);
  font-size: 14px;
  padding-left: 3px;
  transition: transform 0.5s var(--ease);
}
.message-card:hover .message-play { transform: scale(1.08); }
.message-copy h3 { margin-top: 10px; font-size: 18px; }
.message-meta {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

/* ---- Watch filters ------------------------------------------------ */

.filters {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--body);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.chip-btn:hover { border-color: var(--paper); color: var(--paper); }
.chip-btn.is-on {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ink);
}

.filter-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
}

.filter-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.filter-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-field select,
.filter-field input {
  appearance: none;
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--paper);
  font-family: inherit;
  font-size: 15px;
  min-height: 44px;
}
/* The native arrow is invisible on this ground, so draw one. */
.filter-field select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.filter-field select:focus-visible,
.filter-field input:focus-visible {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(255, 92, 26, 0.25);
}
.filter-field input::placeholder { color: var(--muted); }
.filter-field input[type='search']::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

.filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.filter-status p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.filter-clear {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.filter-clear:hover { color: var(--ember); }

.empty-filter {
  padding: clamp(40px, 6vw, 64px) 0;
  border-bottom: 1px solid var(--hairline);
}
.empty-filter h3 {
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.empty-filter p { margin: 10px 0 0; color: var(--muted); }

/* ---- Message cards ------------------------------------------------- */

.message-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
}

.message-title {
  margin-top: 10px;
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* "Latest" only means anything on the first visible card. */
.lead-only { display: none; }
.message-card.is-lead .lead-only { display: block; }

/* The newest visible message takes the full row. Because the class is moved by
   the filter script, this reflows to whatever is newest in the current view
   rather than being baked into one card. */
@media (min-width: 620px) {
  .message-card.is-lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
  }
  .message-card.is-lead .message-thumb { border-radius: var(--radius-lg); }
  .message-card.is-lead .message-title { font-size: clamp(24px, 3.2vw, 34px); }
  .message-card.is-lead .message-play { width: 60px; height: 60px; font-size: 19px; }
  .message-card.is-lead .message-meta { font-size: 15px; }
}

.archive-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hairline);
}
.archive-note p {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 23px;
  color: var(--muted);
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 7vw, 64px) clamp(24px, 5vw, 56px);
  max-width: 620px;
}
.empty-state .prose { max-width: 52ch; }

/* ---- Bigger avatars on the About page ------------------------------ */

.avatar-lg {
  width: clamp(200px, 45vw, 280px);
  font-size: clamp(36px, 7vw, 56px);
}
.frame-circle-sm { width: clamp(88px, 22vw, 140px); }

/* Seven links in a single column left a tall spike beside two short columns.
   Two sub-columns balances the footer block without changing its content. */
@media (min-width: 700px) {
  .foot-col-pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    align-content: start;
  }
  .foot-col-pages .label { grid-column: 1 / -1; }
}

/* Anything that reads as a figure gets lining, equal-width digits. */
.cd-num,
.expect-n,
.service-times,
.message-meta { font-variant-numeric: tabular-nums; }

/* Follows the featured message, which already has its own bottom padding.
   Two full section paddings back to back left a 240px hole at desktop. */

/* ---- Inline video player ------------------------------------------- */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.92);
}
.video-modal[hidden] { display: none; }

.video-modal-inner {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}
.video-modal-bar h2 {
  margin: 0;
  font-family: Poppins, Manrope, sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--paper);
}
.video-modal-bar a { font-size: 14px; }

.video-modal-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--paper);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.video-modal-close:hover { border-color: var(--ember); color: var(--ember); }

/* Below the fold of a short phone the bar would push the player off screen. */
@media (max-width: 559px) {
  .video-modal { align-items: flex-start; padding-top: 76px; }
}