/* =========================================================================
   Chasing History — greg777.org
   Palette and type lifted from the 2027 sponsorship deck so the site and the
   PDF read as one piece of work.
   ========================================================================= */

:root{
  --navy:#102A43;
  --navy-mid:#17344F;
  --navy-soft:#1E3F5C;
  /* The deck's orange is #D2622F. It only reaches 3.8:1 on white, which is fine
     for the big display numbers but fails WCAG AA for anything set small. So the
     brand orange is kept for large type and decoration, and two accessible
     siblings carry the small text and the button fills. */
  --orange:#D2622F;          /* display numbers, rules, accents */
  --orange-text:#B4501F;     /* small text on light — 5.11:1 */
  --orange-on-dark:#F59B68;  /* small text on navy — 5.09:1 and up */
  --orange-btn:#B4501F;      /* white on this — 5.11:1 */
  --orange-btn-hover:#8E3F18;/* 7.31:1 */
  --orange-tint:#FFE9DD;
  --mist:#EDF1F5;
  --cream:#F5F1EA;
  --slate:#4A6274;
  --slate-light:#9DB2C4;
  --line:#D8E0E8;
  --white:#FFFFFF;

  --wrap:1140px;
  --radius:4px;
  --shadow:0 2px 20px rgba(16,42,67,.10);
  --shadow-lg:0 10px 40px rgba(16,42,67,.16);

  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --header-h:70px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  font-family:var(--font);
  /* Body copy deliberately starts at 18px. The deck had to be re-typeset larger
     to be readable on a phone; this starts where that ended up. */
  font-size:18px;
  line-height:1.65;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--orange-text);text-decoration:none}
a:hover{text-decoration:underline}

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

.skip{position:absolute;left:-9999px;top:0;background:var(--orange-btn);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}

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

/* ----------------------------- TYPE ------------------------------------- */

h1,h2,h3{color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,6vw,4rem)}
h2{font-size:clamp(1.75rem,4vw,2.75rem)}
h3{font-size:1.3rem}
.h-sm{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:.4em}

.eyebrow{
  font-size:.95rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-text);margin:0 0 .9em;
}
.eyebrow.light{color:var(--orange-on-dark)}

.lede{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.6;max-width:62ch;color:var(--slate)}
.on-dark{color:var(--cream)}
h2.on-dark{color:var(--cream)}
.lede.on-dark{color:var(--slate-light)}

.source{font-size:.9rem;font-style:italic;color:var(--slate-light);margin-top:1.5em}
.source.on-dark{color:#7A8FA3}

/* ---------------------------- BUTTONS ----------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:var(--radius);
  font-size:1.05rem;font-weight:700;letter-spacing:.01em;
  border:2px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
  text-align:center;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:17px 36px;font-size:1.15rem}

.btn-donate{background:var(--orange-btn);color:#fff;border-color:var(--orange-btn)}
.btn-donate:hover{background:var(--orange-btn-hover);border-color:var(--orange-btn-hover);color:#fff}

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

.btn-outline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-outline:hover{border-color:var(--navy);background:var(--navy);color:#fff}

/* ---------------------------- HEADER ------------------------------------ */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  background:rgba(16,42,67,.0);
  transition:background .25s ease,box-shadow .25s ease;
}
.site-header.stuck{background:var(--navy);box-shadow:0 2px 14px rgba(0,0,0,.22)}

.header-inner{display:flex;align-items:center;gap:20px;height:var(--header-h)}

.brand{display:flex;align-items:center;gap:11px;color:#fff;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{
  background:var(--orange-btn);color:#fff;font-weight:700;font-size:1rem;letter-spacing:.06em;
  padding:7px 10px;border-radius:var(--radius);line-height:1;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1rem;color:#fff}
.brand-text span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-light)}

.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:#fff;font-size:.95rem;font-weight:600;opacity:.9}
.nav a:hover{opacity:1;text-decoration:none;color:var(--orange-on-dark)}

.header-donate{padding:11px 22px;font-size:.98rem;flex:0 0 auto}

.hamburger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;margin-left:auto;
}
.hamburger span{display:block;height:2px;background:#fff;margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ----------------------------- HERO ------------------------------------- */

.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,42,67,.94) 0%,rgba(16,42,67,.72) 38%,rgba(16,42,67,.22) 70%,rgba(16,42,67,.35) 100%);
}
.hero-body{position:relative;z-index:2;padding-top:140px;padding-bottom:70px}
.hero h1{color:#fff;margin-bottom:.35em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .lede{color:#E4EBF2;max-width:56ch;margin-bottom:2em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* --------------------------- PROGRESS ----------------------------------- */

.progress-band{background:var(--navy-mid);color:#fff;padding:36px 0}
.progress-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:40px;align-items:center}
.progress-copy .h-sm{color:var(--slate-light)}
.progress-figures{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.raised{font-size:clamp(2rem,5vw,3rem);font-weight:700;color:var(--orange-on-dark);line-height:1}
.of{color:var(--slate-light);font-size:1rem}
.goal{font-size:1.3rem;font-weight:700;color:#fff}
.progress-note{margin:.6em 0 0;font-size:.95rem;color:var(--slate-light)}

.progress-meter{min-width:0}
.meter{height:16px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.meter-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--orange),#E8793F);
  transition:width 1.1s cubic-bezier(.22,.9,.3,1);
}
.meter-caption{margin:.8em 0 0;font-size:.95rem;color:var(--slate-light)}

/* --------------------------- SECTIONS ----------------------------------- */

.section{padding:86px 0}
.section-tint{background:var(--mist)}
.section-dark{background:var(--navy);color:var(--slate-light)}

.split{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;margin-top:40px;align-items:start}
.split-copy p{margin:0 0 1.2em;font-size:1.1rem}

.stat-stack{display:flex;flex-direction:column;gap:18px}
.stat{background:var(--mist);padding:22px 24px;border-left:4px solid var(--orange);border-radius:0 var(--radius) var(--radius) 0}
.stat-num{display:block;font-size:2.4rem;font-weight:700;color:var(--orange);line-height:1}
.stat-label{display:block;font-size:1rem;color:var(--slate);margin-top:6px}

.figure{margin:56px 0 0}
.figure img{border-radius:var(--radius);width:100%}
.figure figcaption{font-size:.95rem;color:var(--slate-light);margin-top:12px;font-style:italic}

/* A tall photo sitting beside a column of copy. Capped so it never towers over
   the text on desktop and never eats a whole phone screen on mobile. */
.split-media{grid-template-columns:1.3fr .9fr;align-items:center}
.figure-portrait{margin:0 auto;max-width:420px;width:100%}
.figure-portrait img{aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
.figure-portrait figcaption{text-align:center}

/* ----------------------------- ROUTE ------------------------------------ */

.route{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(7,1fr);gap:12px;
}
.route li{
  background:var(--navy-soft);padding:22px 16px;border-radius:var(--radius);
  border-top:4px solid var(--orange);
}
.route-date{display:block;font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-on-dark)}
.route-city{display:block;font-size:1.15rem;font-weight:700;color:#fff;margin:8px 0 10px}
.route-cont{display:block;font-size:.92rem;color:var(--slate-light)}

.race-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.race-stats div{border-top:1px solid rgba(255,255,255,.16);padding-top:18px}
.race-stats strong{display:block;font-size:2.1rem;color:var(--orange-on-dark);line-height:1}
.race-stats span{display:block;font-size:.98rem;color:var(--slate-light);margin-top:6px}

/* ----------------------------- IMPACT ----------------------------------- */

.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.impact{background:var(--mist);padding:28px 26px;border-radius:var(--radius)}
.impact strong{display:block;font-size:2.3rem;color:var(--orange);line-height:1}
.impact span{display:block;font-size:1rem;color:var(--slate);margin-top:8px}

.callout{background:var(--navy);color:var(--cream);padding:28px 32px;border-radius:var(--radius);margin-top:40px}
.callout p{margin:0;font-size:1.1rem}
.callout strong{color:#fff}

/* ------------------------------ GIVE ------------------------------------ */

.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0 32px}
.amount{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:26px 18px;font-size:1.9rem;font-weight:700;color:var(--navy);
  transition:border-color .18s ease,transform .12s ease,box-shadow .18s ease;
  text-align:center;
}
.amount span{display:block;font-size:.88rem;font-weight:400;color:var(--slate);margin-top:8px;line-height:1.35}
.amount:hover,.amount.is-active{border-color:var(--orange);text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.amount.is-active{background:var(--orange-tint)}

.amount-note{font-size:.95rem;color:var(--slate);margin:-12px 0 28px;max-width:62ch}
.give-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.give-actions .btn-ghost{color:var(--navy);border-color:var(--line)}
.give-actions .btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

.trust{font-size:.92rem;color:var(--slate-light);margin-top:28px;max-width:70ch}

/* ----------------------------- TIERS ------------------------------------ */

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.tier{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;
}
.tier-feature{border:2px solid var(--orange);box-shadow:var(--shadow)}
.tier-flag{
  display:inline-block;align-self:flex-start;background:var(--orange-btn);color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius);margin:0 0 14px;
}
.tier-amount{font-size:2.1rem;font-weight:700;color:var(--orange);margin:0;line-height:1}
.tier-name{font-size:1.15rem;font-weight:700;color:var(--navy);margin:6px 0 18px;letter-spacing:.02em}
.tier ul{list-style:none;margin:0 0 26px;padding:0;flex:1}
.tier li{font-size:1rem;padding:9px 0 9px 24px;position:relative;border-bottom:1px solid var(--mist)}
.tier li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:2px;background:var(--orange)}
.tier .btn{width:100%}

.deck-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  background:var(--mist);padding:30px 34px;border-radius:var(--radius);margin-top:40px;
}
.deck-cta p{margin:0;max-width:52ch;font-size:1.05rem}
.deck-cta strong{color:var(--navy)}

/* ---------------------------- GALLERY ----------------------------------- */

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.gallery figure{margin:0}
.gallery img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{font-size:.92rem;color:var(--slate);margin-top:10px;font-weight:600}

/* ---------------------------- CONTACT ----------------------------------- */

.contact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.contact-card{
  display:block;background:var(--navy-soft);padding:26px 28px;border-radius:var(--radius);
  border-left:4px solid var(--orange);transition:background .18s ease;
}
a.contact-card:hover{background:#27506F;text-decoration:none}
.contact-static{cursor:default}
.contact-label{display:block;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-light)}
.contact-value{display:block;font-size:1.2rem;font-weight:700;color:#fff;margin-top:8px;word-break:break-word}

/* ----------------------------- FOOTER ----------------------------------- */

.site-footer{background:#0A1C2E;color:#7A8FA3;padding:44px 0;font-size:.92rem}
.footer-inner p{margin:0 0 10px}
.footer-brand strong{color:#fff}
.footer-legal{max-width:80ch;line-height:1.6}
.site-footer a{color:var(--slate-light);text-decoration:underline}
.site-footer a:hover{color:#fff}

/* ------------------------- FLOATING DONATE ------------------------------ */

.float-donate{
  position:fixed;right:18px;bottom:18px;z-index:90;
  background:var(--orange-btn);color:#fff;font-weight:700;font-size:1.05rem;
  padding:15px 28px;border-radius:999px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease;
}
.float-donate.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.float-donate:hover{background:var(--orange-btn-hover);color:#fff;text-decoration:none}

/* ========================== RESPONSIVE =================================== */

@media (max-width:980px){
  .route{grid-template-columns:repeat(4,1fr)}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .race-stats{grid-template-columns:repeat(2,1fr)}
  .split,.split-media{grid-template-columns:1fr;gap:36px}
  .progress-grid{grid-template-columns:1fr;gap:24px}
}

@media (max-width:760px){
  body{font-size:17px}
  .section{padding:62px 0}
  .wrap{padding:0 20px}

  .hamburger{display:block}
  .header-donate{display:none}
  .nav{
    position:fixed;top:var(--header-h);left:0;right:0;
    flex-direction:column;gap:0;margin:0;
    background:var(--navy);padding:0 20px;
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav.open{max-height:70vh;padding:10px 20px 20px;overflow-y:auto}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:1.05rem}

  /* The header is translucent over the hero, so it needs its own backdrop
     once the menu is open or there is nothing behind the links. */
  .site-header.menu-open{background:var(--navy)}

  .hero{min-height:0}
  .hero-body{padding-top:120px;padding-bottom:52px}
  .hero-cta .btn{width:100%}

  .route{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr 1fr;gap:14px}
  .amounts{grid-template-columns:1fr 1fr}
  .contact-row{grid-template-columns:1fr}
  .deck-cta{flex-direction:column;align-items:flex-start}
  .deck-cta .btn{width:100%}
  .give-actions .btn{width:100%}
  .float-donate{left:18px;right:18px;text-align:center}
}

@media (max-width:460px){
  .tiers,.impact-grid,.race-stats,.route{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .amounts{grid-template-columns:1fr}
  .brand-text span{display:none}
}

/* ----------------------------- PRINT ------------------------------------ */

@media print{
  .site-header,.float-donate,.hero-cta,.give-actions,.hamburger{display:none !important}
  .hero{min-height:0}
  .section{padding:24px 0;page-break-inside:avoid}
  body{font-size:11pt;color:#000}
  .section-dark,.callout{background:#fff !important;color:#000 !important}
  h2.on-dark,.lede.on-dark,.on-dark{color:#000 !important}
}