/* ---------------------------------------------------------
   Self-hosted fonts. Served from this origin rather than
   Google's CDN: no third-party request, no visitor IP sent
   elsewhere, and nothing that would require a cookie banner.
   Raleway is the variable font (one file covers 400-700).
   --------------------------------------------------------- */

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/raleway-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   MORGAN SPINS — Onyx Independent Open 2027
   Black + white only. The hard horizontal split in the Onyx
   colour block is the organising motif for the whole page.
   Display type: Poppins (matches the Onyx lockup)
   Text type:    Raleway (the font on onyxcolorguard.org)
   ========================================================= */

:root {
  --black: #000;
  --white: #fff;
  --ink:   #0a0a0a;
  --g900:  #141414;
  --g700:  #2e2e2e;
  --g500:  #6b6b6b;
  --g400:  #8c8c8c;   /* smallest readable grey on black (6.2:1) */
  --g300:  #b4b4b4;
  --g150:  #e4e4e4;
  --g100:  #f2f2f2;

  --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --text: "Raleway", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 10vw, 140px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* <picture> is inline by default, which gives a percentage-width <img>
   nothing to resolve against. Make it a block so images fill their column. */
picture { display: block; width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--black);
  padding: 14px 20px;
  z-index: 200;
  font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- Shared type ---------- */

.eyebrow {
  font-family: var(--display);
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--g300);
  margin: 0 0 20px;
}
.eyebrow--dark { color: var(--g500); }

.h2 {
  font-family: var(--display);
  font-size: clamp(30px, 5.2vw, 56px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.028em;
  margin: 0 0 28px;
}
.h2--light { color: var(--white); }
.h2--nowrap {
  /* "Donate To Support My Competition" must not break across lines */
  white-space: nowrap;
  font-size: clamp(19px, 4.4vw, 52px);
  letter-spacing: -.035em;
}
.h2--oneline {
  /* "It isn't the tuition. It's the drive." on a single line at every width */
  white-space: nowrap;
  font-size: clamp(17px, 3.9vw, 56px);
  letter-spacing: -.035em;
}

.u-white { color: var(--white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--white); color: var(--black); transform: translateY(-2px); }

.btn--invert { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--invert:hover { background: transparent; color: var(--white); }

.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--black); }

.btn--dark { color: var(--black); border-color: var(--black); }
.btn--dark:hover { background: var(--black); color: var(--white); }

.btn--lg { padding: 18px 38px; font-size: 15px; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid var(--g700);
}
.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.nav__mark--thin { font-weight: 300; opacity: .72; }

.nav__links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.nav__links a {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g300);
  text-decoration: none;
  transition: color .18s ease;
}
.nav__links a:hover { color: var(--white); }

.nav__cta { padding: 11px 24px; font-size: 12px; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--black);
  color: var(--g300);
  padding-block: clamp(48px, 8vw, 96px) 0;
  overflow: hidden;
}
.hero__grid {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  /* minmax(0,…) stops the oversized display type from dictating track width */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

.hero__copy { min-width: 0; }

.hero__title {
  font-family: var(--display);
  font-size: clamp(46px, 8.5vw, 98px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 26px;
}

.hero__lede {
  font-size: clamp(18px, 2.3vw, 23px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--g400);
  margin: 0 0 40px;
  max-width: 34ch;
}
.hero__lede--tight {
  /* "Now I need your help to get to the floor." must not wrap */
  max-width: none;
  white-space: nowrap;
  font-size: clamp(13px, 2.15vw, 23px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hero__media { align-self: end; }
.hero__media img {
  width: 100%;
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__media { max-width: 380px; margin-inline: auto; }
  .hero__actions { padding-bottom: 40px; }
  .hero__lede { max-width: none; }
}

/* ---------- Progress meter ---------- */

.meter {
  border-top: 1px solid var(--g700);
  padding-top: 22px;
  margin-bottom: 36px;
  max-width: 520px;
}
.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.meter__amount {
  font-family: var(--display);
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.02em;
}
.meter__of {
  font-family: var(--text);
  font-size: 15px;
  font-weight: 500;
  color: var(--g400);
  letter-spacing: 0;
}
.meter__goal { color: var(--g300); }

.meter__pct {
  font-family: var(--display);
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--g400);
}

.meter__track {
  height: 8px;
  background: var(--g700);
  margin-top: 14px;
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  width: 0;
  background: var(--white);
  transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}

.meter__note {
  font-size: 13px;
  color: var(--g400);
  margin: 12px 0 0;
}

/* ---------- Brand band ---------- */

.band { background: var(--black); line-height: 0; }
.band img { width: 100%; }

/* ---------- Ticker ---------- */

.ticker {
  background: var(--white);
  color: var(--black);
  border-block: 2px solid var(--black);
  overflow: hidden;
  padding: 13px 0;
}
.ticker__row {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: slide 34s linear infinite;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker .dot { opacity: .35; }

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__row { animation: none; }
  .meter__fill { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- Story ---------- */

.story {
  background: var(--white);
  padding-block: var(--section-y);
}
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(260px, .68fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}
.story__text p {
  margin: 0 0 20px;
  color: var(--g700);
  font-size: clamp(16px, 1.7vw, 18px);
}
.story__text strong { color: var(--black); font-weight: 700; }

.story__kicker {
  font-family: var(--display);
  font-size: clamp(17px, 2.1vw, 21px) !important;
  font-weight: 600;
  color: var(--black) !important;
  border-left: 4px solid var(--black);
  padding-left: 18px;
  margin-top: 30px !important;
  line-height: 1.35;
}

.story__stats { display: grid; gap: 0; }

.stat {
  display: grid;
  /* Fixed track, not ch: `ch` resolves against the row's Raleway, not the
     number's much larger Poppins, so the column came out ~36px for a 94px
     "2027" and the label collided with it. */
  grid-template-columns: clamp(66px, 7.6vw, 98px) 1fr;
  align-items: center;
  column-gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--g150);
}
.stat:first-child { border-top: 1px solid var(--g150); }
.stat__num {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--g500);
  font-weight: 600;
  line-height: 1.35;
}

.story__photo {
  margin-top: 30px;
  width: 100%;
  filter: grayscale(1) contrast(1.04);
}

@media (max-width: 820px) {
  .story__grid { grid-template-columns: 1fr; }
}

/* ---------- Budget ---------- */

.budget {
  background: var(--black);
  color: var(--g300);
  padding-block: var(--section-y);
}
.budget__intro {
  max-width: none;
  margin: 0 0 22px;
  color: var(--g400);
  font-size: clamp(16px, 1.7vw, 18px);
}
.budget__intro strong { color: var(--white); font-weight: 600; }
.budget__intro + .budget__intro { margin-bottom: clamp(44px, 6vw, 60px); }

.ledger { list-style: none; margin: 0; padding: 0; }

.ledger__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--g700);
}
.ledger__item {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--white);
  font-weight: 500;
}
.ledger__dots {
  flex: 1;
  min-width: 18px;
  border-bottom: 1px dotted var(--g700);
  transform: translateY(-4px);
}
.ledger__amt {
  font-family: var(--display);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.ledger__row--total {
  border-bottom: none;
  border-top: 2px solid var(--white);
  margin-top: 10px;
  padding-top: 26px;
}
.ledger__row--total .ledger__item {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(14px, 1.7vw, 17px);
}
.ledger__row--total .ledger__amt { font-size: clamp(24px, 3.6vw, 38px); }

/* Headline figures strip */
.figures {
  list-style: none;
  margin: 0 0 clamp(48px, 7vw, 76px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--g700);
  border-block: 1px solid var(--g700);
}
.figures li {
  background: var(--black);
  padding: 26px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.figures__n {
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--white);
}
.figures__l {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g400);
  line-height: 1.45;
}

@media (max-width: 780px) { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .figures { grid-template-columns: 1fr; } }

.budget__sub {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g400);
  margin: 0 0 18px;
}
.ledger + .budget__sub { margin-top: clamp(52px, 7vw, 80px); }

/* Trip-by-trip list */
.trips { list-style: none; margin: 0; padding: 0; }

.trips__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--g700);
}
.trips__what {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--g300);
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
}
.trips__meta {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g400);
  font-weight: 600;
}
.trips__amt {
  font-family: var(--display);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 700;
  color: var(--g300);
  white-space: nowrap;
}

.trips__row--flag .trips__what,
.trips__row--flag .trips__amt { color: var(--white); }
.trips__row--flag .trips__meta { color: var(--g300); }

.trips__row--total {
  border-bottom: none;
  border-top: 1px solid var(--g700);
  margin-top: 8px;
  padding-top: 20px;
}
.trips__row--total .trips__what,
.trips__row--total .trips__amt { color: var(--white); }
.trips__row--total .trips__what { font-weight: 700; }
.trips__row--total .trips__meta { color: var(--g300); }

.budget__note {
  margin: clamp(40px, 6vw, 60px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--g900);
  font-size: 13px;
  line-height: 1.75;
  color: var(--g400);
  max-width: 76ch;
}
.budget__note strong { color: var(--g150); }

/* ---------- Give ---------- */

.give {
  background: var(--white);
  padding-block: var(--section-y);
}
.give__intro {
  max-width: 52ch;
  margin: 0 0 46px;
  color: var(--g700);
  font-size: clamp(16px, 1.7vw, 18px);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 26px 26px;
  border: 2px solid var(--black);
  text-decoration: none;
  background: var(--white);
  color: var(--black);
  transition: background .18s ease, color .18s ease, transform .18s ease;
  min-height: 178px;
}
.tier:hover { background: var(--black); color: var(--white); transform: translateY(-3px); }

.tier__amt {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
}
.tier--custom .tier__amt { font-size: clamp(24px, 3vw, 30px); letter-spacing: -.03em; }

.tier__label {
  font-size: 14px;
  color: var(--g500);
  font-weight: 500;
  transition: color .18s ease;
}
.tier:hover .tier__label { color: var(--g300); }

.tier__go {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tier--feature { background: var(--black); color: var(--white); }
.tier--feature .tier__label { color: var(--g300); }
.tier--feature:hover { background: var(--white); color: var(--black); }
.tier--feature:hover .tier__label { color: var(--g500); }

.tier__flag {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.tier--feature:hover .tier__flag { background: var(--black); color: var(--white); }

@media (max-width: 880px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tiers { grid-template-columns: 1fr; } .tier { min-height: 0; } }

.give__disclaimer {
  margin: 38px 0 0;
  padding: 20px 24px;
  background: var(--g100);
  border-left: 4px solid var(--black);
  font-size: 14px;
  line-height: 1.6;
  color: var(--g700);
  max-width: none;          /* runs the full width of the page */
}

/* ---------- Gallery ---------- */

.gallery {
  background: var(--black);
  padding-block: var(--section-y) 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-top: 46px;
}
.grid__item {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;          /* keeps every cell in the row the same height */
}
.grid__item--wide { grid-column: span 2; aspect-ratio: 16 / 7; }

/* The <picture> has to stretch too, or a percentage height on the
   <img> has nothing to resolve against and the cell renders empty. */
.grid__item picture { height: 100%; }

.grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.grid__item:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .grid__item:hover img { transform: none; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .grid__item--wide { grid-column: span 1; aspect-ratio: 3 / 2; }
}

/* ---------- Share ---------- */

.share {
  background: var(--white);
  padding-block: var(--section-y);
}
.share__inner {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.share__text {
  max-width: 50ch;
  color: var(--g700);
  margin: 0 0 30px;
  font-size: clamp(16px, 1.7vw, 18px);
}
.share__links { display: flex; flex-wrap: wrap; gap: 12px; }
.share__mark { width: 100%; max-width: 230px; margin-inline: auto; }

@media (max-width: 760px) {
  .share__inner { grid-template-columns: 1fr; }
  .share__mark { max-width: 150px; margin-inline: 0; }
}

/* ---------- Footer ---------- */

.foot {
  background: var(--black);
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--g400);
  padding-block: clamp(50px, 7vw, 80px) 40px;
  border-top: 1px solid var(--g700);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--g700);
}
.foot__brand {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--white);
  margin: 0 0 10px;
}
.foot__brand span { font-weight: 300; opacity: .72; }

.foot__small { margin: 0; font-size: 13px; line-height: 1.7; }

.foot__head {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 14px;
}
.foot__grid a {
  display: block;
  font-size: 14px;
  text-decoration: none;
  color: var(--g400);
  padding: 4px 0;
  transition: color .18s ease;
}
.foot__grid a:hover { color: var(--white); }

.foot__legal {
  margin: 30px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--g400);
  max-width: none;          /* runs the full width of the page */
}
.foot__legal strong { color: var(--g150); }

@media (max-width: 900px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > :first-child { grid-column: span 2; }
}
@media (max-width: 420px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__grid > :first-child { grid-column: span 1; }
}

/* ---------- Full-bleed blocks ---------- */
/* Escapes the 1180px .wrap so a block runs the width of the page. Parents
   carry overflow-x: clip, which contains the 100vw when a scrollbar is
   present. */
.u-wide {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* ---------- Text pages (privacy, terms) + 404 ---------- */

.doc {
  background: var(--white);
  padding-block: clamp(56px, 8vw, 100px);
}
.doc__inner { max-width: 720px; }

.doc h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5.5vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0 0 12px;
}
.doc .doc__meta {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g500);
  font-weight: 600;
  margin: 0 0 44px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--black);
}
.doc h2 {
  font-family: var(--display);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 44px 0 14px;
}
.doc p, .doc li {
  color: var(--g700);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.doc ul { padding-left: 22px; margin: 0 0 16px; }
.doc li { margin-bottom: 9px; }
.doc strong { color: var(--black); font-weight: 700; }
.doc a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { background: var(--black); color: var(--white); text-decoration: none; }

.doc__callout {
  background: var(--g100);
  border-left: 4px solid var(--black);
  padding: 20px 24px;
  margin: 28px 0;
}
.doc__callout p:last-child { margin-bottom: 0; }

.doc a.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--g150);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  width: 100%;
}
.doc a.doc__back:hover { background: none; color: var(--g500); }

/* ---------- 404 ---------- */

.oops {
  background: var(--black);
  color: var(--g400);
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding-block: clamp(60px, 10vw, 120px);
}
.oops .oops__num {
  font-family: var(--display);
  font-size: clamp(80px, 18vw, 190px);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.05em;
  color: var(--white);
  margin: 0 0 20px;
}
.oops h1 {
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0 0 18px;
  line-height: 1.1;
}
.oops p { max-width: 46ch; margin: 0 0 34px; font-size: clamp(15px, 1.7vw, 18px); }
.oops__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================================================
   WELCOME ANIMATION
   ---------------------------------------------------------
   Sequence (~4.4s):
     0.00  black
     0.28  the stage lights: floor rushes in and lands in perspective
     0.85  a single rifle is thrown, spinning, and falls back
     1.60  two flags, evenly spaced, spin up together and back down
     2.45  three rifles, evenly spaced, spin up together and back down
     3.30  Morgan appears
     3.95  he drives forward and the page takes over
   One animation per element: a second animation with fill:both would
   hold its own 0% frame from time zero and override the first.
   ========================================================= */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.intro { display: none; background: var(--black); }

.intro-on { overflow: hidden; }
.intro-on .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  animation: intro-out .40s ease-in 3.95s both;
}

.intro__stage {
  position: relative;
  width: min(92vw, 780px);
  height: min(80vh, 640px);
  perspective: 820px;
  perspective-origin: 50% 38%;
}

/* ---- lighting the stage ---- */

.intro__floorwrap {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 155%;
  height: 46%;
  translate: -50% 0;
  transform-style: preserve-3d;
}
.intro__floor {
  position: absolute;
  inset: 0;
  transform: rotateX(74deg);
  transform-origin: 50% 100%;
  border: 2px solid var(--white);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.07) 0 2px, transparent 2px 64px),
    radial-gradient(ellipse at 50% 100%, #202020 0%, #000 78%);
  opacity: 0;
  animation: floor-seq 3.90s linear .28s both;
}

@keyframes floor-seq {
  0%   { opacity: 0; scale: .24 .08; filter: blur(7px); box-shadow: 0 0 0 rgba(255,255,255,0);
         animation-timing-function: cubic-bezier(.16,.9,.3,1); }
  10%  { opacity: 1; }
  16%  { opacity: 1; scale: 1 1; filter: blur(0); box-shadow: 0 0 90px rgba(255,255,255,.16);
         translate: 0 0; animation-timing-function: linear; }
  77%  { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.6,0,.9,.4); }
  100% { opacity: 0; translate: 0 76%; }
}

/* ---- the rifle ---- */
/* Vertical travel is in vh: a percentage translate resolves against the
   element's own box, which is far too small to read as a throw. */

.intro__rifle {
  position: absolute;
  left: 50%;
  bottom: 46%;
  width: min(24%, 168px);
  height: auto;
  fill: var(--white);
  opacity: 0;
  transform-origin: 50% 50%;
  animation: rifle-seq .82s cubic-bezier(.34,0,.5,1) .85s both;
}
@keyframes rifle-seq {
  0%   { opacity: 0; translate: -50% 7vh;   rotate: -20deg;  scale: .62; }
  10%  { opacity: 1; }
  48%  { opacity: 1; translate: -50% -23vh; rotate: 430deg;  scale: .74; }
  90%  { opacity: 1; translate: -50% 8vh;   rotate: 890deg;  scale: .64; }
  100% { opacity: 0; translate: -50% 14vh;  rotate: 950deg;  scale: .62; }
}

/* ---- the two flags ---- */

.intro__flag {
  position: absolute;
  bottom: 40%;
  width: min(21%, 150px);
  height: auto;
  fill: var(--white);
  opacity: 0;
  transform-origin: 50% 50%;
  animation: flag-seq .92s cubic-bezier(.34,0,.5,1) 1.60s both;
}
.intro__flag--a { left: 30%; }
.intro__flag--b { left: 70%; }

@keyframes flag-seq {
  0%   { opacity: 0; translate: -50% 9vh;   rotate: 0deg;   scale: .70; }
  12%  { opacity: 1; }
  46%  { opacity: 1; translate: -50% -21vh; rotate: 380deg; scale: .86; }
  88%  { opacity: 1; translate: -50% 7vh;   rotate: 730deg; scale: .72; }
  100% { opacity: 0; translate: -50% 13vh;  rotate: 790deg; scale: .70; }
}

/* ---- the three rifles ---- */
/* Evenly spaced across the stage and thrown together, the way a line does it. */

.intro__trio {
  position: absolute;
  bottom: 44%;
  width: min(17%, 118px);
  height: auto;
  fill: var(--white);
  opacity: 0;
  transform-origin: 50% 50%;
  animation: trio-seq .92s cubic-bezier(.34,0,.5,1) 2.45s both;
}
.intro__trio--a { left: 25%; }
.intro__trio--b { left: 50%; }
.intro__trio--c { left: 75%; }

@keyframes trio-seq {
  0%   { opacity: 0; translate: -50% 8vh;   rotate: -18deg; scale: .62; }
  11%  { opacity: 1; }
  47%  { opacity: 1; translate: -50% -22vh; rotate: 400deg; scale: .74; }
  89%  { opacity: 1; translate: -50% 7vh;   rotate: 830deg; scale: .64; }
  100% { opacity: 0; translate: -50% 13vh;  rotate: 890deg; scale: .62; }
}

/* ---- Morgan ---- */

.intro__photo {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: min(46%, 280px);
  translate: -50% 0;
  transform-origin: 50% 88%;
  opacity: 0;
  animation: photo-seq 1.00s linear 3.30s both;
}
.intro__photo img {
  width: 100%;
  filter: grayscale(1) contrast(1.12);
  -webkit-mask-image: radial-gradient(ellipse 60% 66% at 50% 46%, #000 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 66% at 50% 46%, #000 52%, transparent 100%);
}
@keyframes photo-seq {
  0%   { opacity: 0; scale: .94; animation-timing-function: ease-out; }
  24%  { opacity: 1; scale: 1;   animation-timing-function: linear; }
  50%  { opacity: 1; scale: 1;   animation-timing-function: cubic-bezier(.5,0,.75,0); }
  100% { opacity: 0; scale: 3.4; }
}

.intro__skip {
  position: absolute;
  bottom: clamp(20px, 5vh, 46px);
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--g400);
  animation: skip-in .5s ease .8s both;
}
@keyframes skip-in { from { opacity: 0 } to { opacity: 1 } }

@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* ---------- The intro on a phone held upright ----------
   The stage is sized in % of its own width, so a narrow portrait screen made
   every prop tiny while the floor, at 155% of the stage, ran ~83px off each
   edge of a 390px phone and never showed its corners. Portrait gets its own
   proportions: a floor that fits the screen, seen at a shallower angle so it
   reads as a floor rather than a sliver, and noticeably larger props. */

@media (max-width: 620px) {
  .intro__stage {
    width: min(94vw, 780px);
    height: min(78vh, 720px);
  }

  .intro__floorwrap {
    width: 100%;
    height: 38%;
    bottom: 9%;
  }
  .intro__floor {
    /* shallower than the 74deg used on desktop: on a tall screen there is
       room to show the floor face instead of edge-on */
    transform: rotateX(67deg);
    background-size: auto, auto, auto;
  }

  .intro__rifle { width: 46%; bottom: 54%; }
  .intro__flag  { width: 36%; bottom: 46%; }
  .intro__trio  { width: 24%; bottom: 48%; }
  .intro__photo { width: 68%; bottom: 13%; }

  /* the arcs are in vh, which is generous on an 844px screen; pull them in
     so nothing leaves the top of the frame */
  .intro__rifle { --lift: -19vh; }
}

/* A phone turned sideways has almost no height to work with. */
@media (max-height: 520px) and (orientation: landscape) {
  .intro__stage { width: min(76vw, 780px); height: 88vh; }
  .intro__floorwrap { height: 42%; bottom: 4%; }
  .intro__photo { width: min(26%, 190px); bottom: 8%; }
  .intro__rifle { width: min(18%, 130px); }
  .intro__flag  { width: min(15%, 110px); }
  .intro__trio  { width: min(12%, 90px); }
}

/* =========================================================
   SCROLL RIFLES
   One per section, alternating sides. Each is thrown on the
   section's own scroll progress: up, over, and back down past
   the bottom edge. --p is written by js/main.js (0 -> 1).
   ========================================================= */

.story, .budget, .give, .gallery, .share {
  position: relative;
  /* A rotated rifle is ~5x as wide as its box, so it can push the page wider.
     `clip` contains that without creating a scroll container the way
     `overflow-x: hidden` would. `hidden` is the fallback for older engines. */
  overflow-x: hidden;
  overflow-x: clip;
}
.story > .wrap, .budget > .wrap, .give > .wrap, .share > .wrap,
.gallery > .wrap, .gallery > .grid { position: relative; z-index: 1; }

.riflefly {
  position: absolute;
  top: 0;
  z-index: 0;
  width: clamp(118px, 15vw, 210px);
  pointer-events: none;
  /* --y is the screen-tracking offset written by js/main.js; using translate
     rather than top keeps this off the layout path. Default parks it well
     below the fold so it never flashes before the first measurement. */
  translate: 0 var(--y, 150vh);
  rotate: calc(var(--p, 0) * 900deg);
  opacity: var(--op, 0);
  will-change: translate, rotate;
}
.riflefly svg { width: 100%; height: auto; display: block; }

.riflefly--left  { left:  clamp(4px, 11vw, 150px); }
.riflefly--right { right: clamp(4px, 11vw, 150px); }

/* ink that reads against each section's own background */
.story  .riflefly svg, .give .riflefly svg, .share .riflefly svg { fill: rgba(0,0,0,.17); }
.budget .riflefly svg, .gallery .riflefly svg                    { fill: rgba(255,255,255,.23); }

@media (max-width: 720px) {
  .riflefly { width: clamp(96px, 30vw, 140px); }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .riflefly { display: none; }
}

/* ---------- Social icons in the nav and footer ---------- */

.nav__social { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; }
.nav__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--g300);
  transition: color .18s ease;
}
.nav__social a:hover { color: var(--white); }
.nav__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

.foot__social { display: inline-flex; gap: 6px; margin-top: 16px; }
.foot__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--g700);
  color: var(--g400);
  transition: color .18s ease, border-color .18s ease;
}
.foot__social a:hover { color: var(--white); border-color: var(--white); }
.foot__social svg { width: 16px; height: 16px; fill: currentColor; display: block; }

/* ---------- Share tiles ---------- */
/* Six equal tiles that sit on one row on desktop, then step down to three
   and two as the screen narrows. */

.sharegrid {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.sharegrid li { display: block; min-width: 0; }

.sharetile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 104px;
  padding: 0 6px;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sharetile:hover { background: var(--black); color: var(--white); transform: translateY(-2px); }
.sharetile:disabled { opacity: .55; cursor: default; transform: none; }

/* An SVG with only a viewBox fills its container, so the size must be set
   explicitly here or the icons render enormous. */
.sharetile__icon { display: grid; place-items: center; height: 26px; }
.sharetile__icon svg { width: 24px; height: 24px; fill: currentColor; display: block; }

.sharetile__label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
}

.share__native { margin: 18px 0 0; }

@media (max-width: 900px) { .sharegrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) {
  .sharegrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sharetile { height: 92px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) { .sharetile:hover { transform: none; } }

/* =========================================================
   MOBILE
   The nav ran out of room once the social icons were added,
   and several links were below the 44px minimum tap target.
   ========================================================= */

@media (max-width: 720px) {
  .nav__inner { gap: 12px; }
  /* Instagram and TikTok are in the footer too, so drop them rather than let
     the brand and the Donate button collide. The email stays: it is the most
     actionable of the three and still fits. */
  .nav__social a:not(.nav__mail) { display: none; }
  .nav__social { margin-left: 0; }
  .nav__brand { font-size: 15px; }
  .nav__cta { padding: 11px 18px; font-size: 11px; letter-spacing: .08em; }
}

@media (max-width: 900px) {
  /* 44px minimum tap targets */
  .foot__grid a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0;
  }
  .foot__social { gap: 10px; }
  .foot__social a { width: 44px; height: 44px; }
  .doc a, .give__disclaimer a { padding-block: 2px; }
}

@media (max-width: 560px) {
  /* stop the hero meter numbers from crowding on small screens */
  .meter__head { gap: 6px; }
  .meter__note { font-size: 12px; }
  /* the ticker is decorative; slow it so it is not distracting on a phone */
  .ticker__row { animation-duration: 46s; }
  /* give the figures strip a little more breathing room */
  .figures li { padding: 20px 16px 18px; }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
  .share__links .btn { width: 100%; }
}