/* The Micah Mandate Run for Life: brand layer, loaded last.
   Palette follows the official badge and the Micah Mandate site: ink, gold, ivory.
   --navy/--deep hold ink, --lime holds gold (names kept so earlier files still read). */
:root{--gold-deep:#8f6f2f;--ivory:#f6f1e7}

/* ---------- Header: dark, so the black-and-gold badge sits naturally ---------- */
header{background:var(--navy);color:var(--ivory);border-bottom:1px solid #d4ae5c33}
.brand-symbol{width:64px;height:64px;transform:none;filter:drop-shadow(0 2px 6px #0006)}
.brand small{letter-spacing:.2em;color:#d4ae5c}
.brand-dot{color:#d4ae5c}
nav a:after{background:#d4ae5c}
header>.button.dark{background:var(--lime);color:var(--deep)}
header>.button.dark:hover{background:#e3c783}
.menu{color:var(--ivory)}
@media(max-width:1050px){.brand-symbol{width:52px;height:52px}}
@media(max-width:760px){
  .brand-symbol{width:46px;height:46px}
  nav{background:var(--navy);box-shadow:0 12px 20px #0006;border-top:1px solid #d4ae5c33}
}
footer .brand-symbol{width:52px;height:52px;filter:none}

/* ---------- Opening intro on ink ---------- */
#brand-intro,#brand-intro::backdrop{background:var(--navy)}
#brand-intro{color:var(--ivory)}
.intro-city{color:#d4ae5c}
.intro-rule{background:#d4ae5c}
.intro-skip{color:var(--ivory);border-color:#f6f1e740}

/* ---------- Hero: the event's own photograph, toned to the palette ---------- */
.hero{background:var(--navy)}
.hero-video-frame{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .7s ease;filter:grayscale(.8) sepia(.28) brightness(.6) contrast(1.06)}
.hero-video-frame.is-playing{opacity:1}
.hero-youtube{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;max-width:none}
.hero-video-controls{position:absolute;z-index:3;right:7%;bottom:100px;display:flex;align-items:center;gap:16px;font-size:12px}
.hero-video-controls .hero-video-toggle{position:static}
.hero-video-controls a{text-decoration:underline;text-underline-offset:4px}
.archive-gallery img.archive-photo--participants{object-position:50% 35%}
@media(max-width:760px){.hero-video-controls{right:6%;bottom:90px;gap:12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-video-frame{transition:none}}
.hero-photo{object-position:50% 62%;filter:grayscale(.8) sepia(.28) brightness(.6) contrast(1.06)}
.hero-kicker{letter-spacing:.02em}
@media(max-width:760px){.hero-photo{object-position:42% 60%}}

/* ---------- Find your starting line ---------- */
.startline{display:grid;grid-template-columns:5fr 6fr;gap:7%;align-items:center;background:var(--paper)}
.startline-media{margin:0;position:relative}
.startline-media img{display:block;width:100%;height:auto;aspect-ratio:4/3.4;object-fit:cover;object-position:50% 70%;border-radius:4px;filter:saturate(.75) sepia(.12);box-shadow:0 18px 40px #15130f26}
.startline-media picture{display:block;position:relative}
.startline-media picture:after{content:'';position:absolute;inset:10px;border:1px solid #d4ae5c99;border-radius:2px;pointer-events:none}
.startline-media figcaption{font-size:12px;color:var(--muted);margin-top:12px}
.startline-copy .lead{font-size:20px;line-height:1.55;margin:22px 0 28px;max-width:560px}
.arrival{list-style:none;margin:0 0 26px;padding:0;counter-reset:arrive;display:grid;gap:0}
.arrival li{counter-increment:arrive;display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.arrival li:last-child{border-bottom:1px solid var(--line)}
.arrival li:before{content:counter(arrive,decimal-leading-zero);grid-row:span 3;font:700 26px/1 var(--display);color:var(--gold-deep)}
.arrival b{font:700 22px/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.arrival span{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.55}
.arrival .underlined{justify-self:start;margin-top:10px;font-size:13px;gap:14px;background:none;color:var(--ink);cursor:pointer}
.startline-note{font-size:13px;color:var(--muted);margin:0}
.startline-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.startline{grid-template-columns:1fr;gap:36px}}
@media(max-width:760px){.startline-copy .lead{font-size:18px}.arrival b{font-size:20px}.arrival li{grid-template-columns:36px 1fr}}

/* ---------- Course pins: one design on both maps ---------- */
.course-marker span.course-pin,.aerial-pin .course-pin{display:block;position:relative;width:0;height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.aerial-pin{width:0;height:0;padding:0;border:0;background:none;box-shadow:none;overflow:visible}
.course-pin i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 2px 6px #0007}
.course-pin b{position:absolute;top:-13px;left:13px;white-space:nowrap;font:700 12px/1 var(--body);letter-spacing:.08em;padding:6px 8px;border-radius:3px;background:var(--navy);color:#fff;border:1px solid #d4ae5c;box-shadow:0 3px 10px #0006}
.course-pin--start i{background:#d4ae5c}
.course-pin--start b{left:auto;right:13px;top:-30px;background:#d4ae5c;color:var(--deep);border-color:#fff;font-size:13px;padding:7px 10px}
.course-pin--finish i{background:#fff;border-color:var(--navy)}
.course-pin--finish b{top:6px;background:var(--navy);color:#fff;font-size:13px;padding:7px 10px}
.course-pin--mile b{background:#fff;color:var(--deep);border-color:var(--navy);letter-spacing:.04em}
.course-pin--parking i{display:none}
.course-pin--parking b{left:-12px;top:-12px;width:24px;height:24px;padding:0;display:grid;place-items:center;border-radius:4px;background:#fff;color:var(--deep);border:2px solid var(--navy);letter-spacing:0}
.aerial-pin:focus-visible{outline:none}
.aerial-pin:focus-visible .course-pin b{outline:3px solid #d4ae5c;outline-offset:2px}
.map-legend span{gap:7px}
.map-legend b.lp{display:inline-block;height:auto;min-width:0;border-radius:3px;padding:5px 7px;font:700 11px/1 var(--body);letter-spacing:.06em;background:var(--navy);color:#fff;border:1px solid #d4ae5c}
.map-legend b.lp--start{background:#d4ae5c;color:var(--deep);border-color:var(--deep)}
.map-legend b.lp--mile{background:#fff;color:var(--deep);border-color:var(--navy)}
.map-legend b.lp--parking{background:#fff;color:var(--deep);border:2px solid var(--navy);padding:4px 7px}
.aerial-runner{border-color:var(--deep);background:#d4ae5c;width:15px;height:15px}

/* ---------- Route guide (over the map) ---------- */
@media(min-width:901px){#race .course-panel>.course-tour{top:110px;bottom:auto;right:62px;width:min(290px,22vw);padding:20px}}
.course-tour strong{font-size:26px}
.route-steps{list-style:none;margin:14px 0 4px;padding:0;position:relative}
.route-steps:before{content:'';position:absolute;left:13px;top:16px;bottom:16px;width:2px;background:linear-gradient(#d4ae5c,#d4ae5c55)}
.course-tour .route-step{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;width:100%;padding:7px 8px 7px 0;background:none;color:#fff;border-radius:3px;text-align:left;font-size:14px}
.course-tour .route-step:hover{background:#ffffff10}
.course-tour .route-step[aria-current=step]{background:#d4ae5c26}
.route-step__dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);border:2px solid #d4ae5c;font:700 12px/1 var(--body);color:#fff}
.route-step--start .route-step__dot,.route-step--finish .route-step__dot{background:#d4ae5c;color:var(--deep);border-color:#fff}
.route-step[aria-current=step] .route-step__dot{box-shadow:0 0 0 4px #d4ae5c55}
.route-step__name{font-weight:600}
.route-step__mile{font-size:12px;color:#e7e0d3;font-variant-numeric:tabular-nums}
.course-tour .tour-caption{min-height:3em}
@media(max-width:900px){
  .course-panel>.course-tour strong{font-size:19px}
  .course-panel>.course-tour .route-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0 2px}
  .course-panel>.course-tour .route-steps:before{left:10%;right:10%;top:14px;bottom:auto;width:auto;height:2px;background:#d4ae5c88}
  .course-panel>.course-tour .route-step{grid-template-columns:1fr;justify-items:center;gap:4px;padding:0 0 4px;font-size:11px;text-align:center}
  .course-panel>.course-tour .route-step__mile{display:none}
  .course-panel>.course-tour .tour-caption{min-height:0}
}

/* ---------- Registration path ---------- */
.reg-steps{list-style:none;margin:30px 0 0;padding:0;counter-reset:step;max-width:420px}
.reg-steps li{counter-increment:step;position:relative}
.reg-steps li>a,.reg-steps li>span{display:grid;grid-template-columns:36px 1fr;column-gap:14px;padding:11px 0;align-items:center}
.reg-steps li>a:before,.reg-steps li>span:before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #15130f40;font:700 15px/1 var(--display);color:var(--ink);background:#fff}
.reg-steps li:not(:last-child):after{content:'';position:absolute;left:17.5px;top:47px;height:calc(100% - 36px);width:1px;background:#15130f30}
.reg-steps b{font:700 21px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.reg-steps li span span{font-size:13px;color:var(--muted);display:block}
.reg-steps a span{font-size:13px;color:var(--muted)}
.reg-steps a:hover b{text-decoration:underline;text-underline-offset:4px}
.reg-steps .is-current>a:before{background:#d4ae5c;border-color:#d4ae5c;color:var(--deep)}
.reg-status{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:3px;background:#d4ae5c33;color:var(--gold-deep);margin-bottom:14px}
#register-now{scroll-margin-top:110px}
#registration.is-open [data-when-closed]{display:none}
.fee-note{font-size:13px;color:var(--muted);margin:14px 0 30px}
.fee-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.registration .payment-info .button{margin-top:6px}

/* ---------- Gold on light surfaces needs a deeper tone for contrast ---------- */
.race-section .tabs button[aria-selected=true]{color:var(--ink);border-color:var(--gold-deep)}
@media(max-width:760px){.hide-sm{display:none}}
/* Phones and tablets: route guide below the map; legend on one row */
@media(max-width:900px){
  #race .race-grid>.course-tour{position:static;width:auto;margin:0;padding:24px 6% 28px;border:0;border-top:1px solid #d4ae5c55;border-radius:0;box-shadow:none;background:var(--navy)}
  #race .race-grid>.course-tour strong{font-size:24px}
  #race .race-grid>.course-tour .route-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:14px 0 6px}
  #race .race-grid>.course-tour .route-steps:before{left:10%;right:10%;top:14px;bottom:auto;width:auto;height:2px;background:#d4ae5c88}
  #race .race-grid>.course-tour .route-step{grid-template-columns:1fr;justify-items:center;gap:5px;padding:0 0 6px;font-size:12px;text-align:center}
  #race .race-grid>.course-tour .route-step__mile{display:block;font-size:11px}
  #race .race-grid>.course-tour .tour-caption{min-height:0}
  #race .map-legend{padding:8px 10px;gap:8px;flex-wrap:nowrap}
  #race .map-legend span{font-size:0;gap:0}
  #race .map-legend b.lp{font-size:10px}
}

/* Keep the registration label together; generic button spans style icons. */
header>.registration-cta{
  flex-shrink:0;
  justify-content:center;
  gap:12px;
  min-height:44px;
  padding:12px 16px;
  font:700 14px/1.2 var(--body);
  white-space:nowrap;
}
header>.registration-cta .registration-cta-label,
header>.registration-cta .hide-sm{
  font:inherit;
  line-height:inherit;
}
header>.registration-cta .registration-cta-label{display:inline}
header>.registration-cta>.ui-icon{width:18px;height:18px}
@media(max-width:1050px){
  header>.registration-cta{font-size:12px;gap:10px;padding:10px 12px}
  header>.registration-cta .hide-sm{display:none}
}
@media(max-width:760px){
  header>.registration-cta{gap:8px;padding:10px 12px}
}
@media(max-width:900px){
  header>nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    padding:25px 6%;
    background:var(--navy);
    border-top:1px solid #d4ae5c33;
    box-shadow:0 12px 20px #0006;
    gap:22px;
    font-size:14px;
  }
  header>nav.open{display:flex;flex-direction:column}
  header>.registration-cta{margin-left:auto}
  header>.menu{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0}
}

/* Keep the ministry destinations together in the existing mission section. */
.purpose-copy .ministry-links{display:grid;justify-items:start;gap:14px}

/* A quiet route back to the ministry, alongside the race navigation. */
header>nav{align-items:center;gap:16px;font-size:13px}
header>nav>a{white-space:nowrap}
header>nav>.micah-return{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d4ae5c66;
  border-radius:4px;
  color:var(--ivory);
  font-size:12px;
  line-height:1.25;
}
header>nav>.micah-return:after{display:none}
header>nav>.micah-return:hover{border-color:var(--lime);background:#d4ae5c16}
@media(max-width:1280px){
  header>nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    padding:25px 6%;
    max-height:calc(100svh - 140px);
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--navy);
    border-top:1px solid #d4ae5c33;
    box-shadow:0 12px 20px #0006;
    align-items:stretch;
    gap:22px;
    font-size:14px;
  }
  header>nav.open{display:flex;flex-direction:column}
  header>nav>.micah-return{align-self:flex-start;margin-top:2px}
  header>.registration-cta{margin-left:auto}
  header>.menu{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0}
}

/* Supplied FAQ answers retain native disclosure controls and readable lists. */
#faq .questions h3{font:700 14px/1.65 var(--body);margin:22px 0 8px}
#faq .questions ul{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 18px;padding:0 24px 0 22px}
#faq .questions li+li{margin-top:4px}
#faq .questions a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}