/* ==========================================================================
   Ride for Sue — landing page
   Tokens are lifted verbatim from the Ride for Sue design system
   (_ds/ride-for-sue-design-system-882fc30f…/tokens/*.css). Everything below
   the TOKENS block is page layout, ported from the design's inline styles
   into classes so the page can carry media queries.
   ========================================================================== */

/* ------------------------------ TOKENS ---------------------------------- */

/* Five colour families, each named for a stretch of the ride. Dusk is the
   primary. Sue (coral) is rationed to four places only: the finish, the total
   raised, the thank-you, the refuel mark on a route chart. */
:root {
  /* neutrals */
  --paper: #fcfcfb;
  --card: #ffffff;
  --rule: #e6e5e1;
  --grey: #8a8983;
  --slate: #52514e;
  --ink: #14140f;
  --night: #1a1a19;
  --night-text: #c9c8c0;
  --night-label: #a8a79e;
  --night-meta: #9a998f;
  --night-rule: #33322f;
  --night-rule-strong: #4a4945;

  /* Dusk (lilac) — PRIMARY */
  --dus-pastel: #e8d7ff;
  --dus-mid: #cdaef2;
  --dus-deep: #8d5fbd;
  --dus-dark: #a77bd6;
  --dus-ink: #3c2851;

  /* Nine (sand) */
  --nin-pastel: #f1deb1;
  --nin-mid: #d9ba70;
  --nin-deep: #957405;
  --nin-dark: #b58d09;
  --nin-ink: #413000;

  /* Fraser (green) */
  --fra-pastel: #bcedd3;
  --fra-mid: #7fd2aa;
  --fra-deep: #078f62;
  --fra-dark: #1fac78;
  --fra-ink: #003e28;

  /* Narrows (blue) */
  --nar-pastel: #c9e3ff;
  --nar-mid: #8cc3fc;
  --nar-deep: #237cca;
  --nar-dark: #4897e3;
  --nar-ink: #0f3457;

  /* Sue (coral) — RATIONED */
  --sue-pastel: #ffd5cc;
  --sue-mid: #f7a695;
  --sue-deep: #bf523e;
  --sue-dark: #da6f5b;
  --sue-ink: #532219;

  /* semantic aliases */
  --bg-page: var(--paper);
  --bg-card: var(--card);
  --bg-dark: var(--night);
  --text-body: var(--ink);
  --text-muted: var(--slate);
  --text-faint: var(--grey);
  --text-inverse: var(--paper);
  --accent: var(--dus-deep);
  --accent-on-night: var(--dus-dark);
  --accent-rationed: var(--sue-deep);
  --link: var(--dus-deep);
  --link-hover: var(--dus-ink);

  /* type — Inter only. Hierarchy from weight, size and space. Never a second
     family, never italic, never colour. Numerals always tabular. */
  --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-inter);

  --fs-display: 76px;
  --fs-h1: 40px;
  --fs-lede: 24px;
  --fs-h3: 19px;
  --fs-small: 14.5px;
  --fs-label: 12px;
  --fs-stat: 34px;
  --fw-stat: 800;
  --tr-stat: -0.03em;

  /* space — 8px base. The margin is the design. */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --s7: 96px;
  --max-page: 1080px;
  --gutter: 40px;

  /* Corners are square. 4px on interface cards only. There are no shadows in
     this brand. */
  --radius-ui: 4px;
  --hairline: 1px solid var(--rule);

  /* The route band — the 2026 edition, measured from Garmin course 504518868.
     These four numbers are each stretch's real share of 101.68 km. Regenerate
     from next year's course file; never nudge by eye, never reorder. */
  --seg-1-w: 21.64%;
  --seg-2-w: 41.31%;
  --seg-3-w: 15.74%;
  --seg-4-w: 21.31%;
}

/* ------------------------------- BASE ----------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
}

p {
  margin: 0;
}

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

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 120ms linear;
}

a:hover {
  color: var(--link-hover);
}

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

.wrap {
  max-width: var(--max-page);
  margin: 0 auto;
}

/* Visible only to keyboard users, and only when focused. */
.skip {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  z-index: 10;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-ui);
  font: 600 15px/1.2 var(--font-sans);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--s5)));
  transition: transform 120ms linear;
}

.skip:focus-visible {
  transform: translateY(0);
  color: var(--paper);
}

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

.label {
  font: 600 var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.h2 {
  font: 700 var(--fs-h1) / 1.1 var(--font-sans);
  letter-spacing: -0.02em;
}

.h3 {
  font: 600 var(--fs-h3) / 1.4 var(--font-sans);
}

.small {
  font: 400 var(--fs-small) / 1.5 var(--font-sans);
}

.num {
  font-variant-numeric: tabular-nums;
}

.measure {
  max-width: 66ch;
}

.measure-wide {
  max-width: 75ch;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font: 600 15px/1.2 var(--font-sans);
  padding: 12px 22px;
  border-radius: var(--radius-ui);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms linear, color 120ms linear;
}

.btn--lg {
  font-size: 17px;
  padding: 16px 28px;
}

.btn--primary {
  background: var(--accent);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--dus-ink);
  color: var(--paper);
}

.btn--secondary {
  background: transparent;
  color: var(--text-body);
  border: var(--hairline);
}

.btn--secondary:hover {
  background: var(--dus-pastel);
  color: var(--dus-ink);
}

/* The hero's second action: a card-white button on the pastel field. */
.btn--outline {
  background: var(--card);
  color: var(--dus-ink);
  border: 1px solid var(--dus-deep);
}

.btn--outline:hover {
  background: var(--dus-pastel);
  color: var(--dus-ink);
}

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

.hero {
  background: var(--dus-pastel);
  padding: var(--s6) var(--gutter) 72px;
}

.hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
  align-items: center;
  justify-content: space-between;
}

.hero__copy {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.hero__title {
  font: 800 var(--fs-display) / 0.94 var(--font-sans);
  letter-spacing: -0.035em;
  color: var(--ink);
}

.hero__edition {
  color: var(--dus-deep);
  margin-top: var(--s4);
}

.hero__lede {
  font: 400 var(--fs-lede) / 1.45 var(--font-sans);
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

/* The heart sits slightly outside its column — it is a drawing, not a photo,
   and it is allowed to breathe past the grid. */
.hero__heart {
  width: 386px;
  flex: 0 0 386px;
  align-self: center;
  position: relative;
  left: -50px;
  height: auto;
}

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

.band {
  display: flex;
  height: 14px;
  width: 100%;
  overflow: hidden;
}

.band > i {
  display: block;
  height: 100%;
}

.band > i:nth-child(1) { width: var(--seg-1-w); background: var(--nin-pastel); }
.band > i:nth-child(2) { width: var(--seg-2-w); background: var(--fra-pastel); }
.band > i:nth-child(3) { width: var(--seg-3-w); background: var(--dus-pastel); }
.band > i:nth-child(4) { width: var(--seg-4-w); background: var(--nar-pastel); }

/* ------------------------------- FACTS ---------------------------------- */

.facts {
  padding: var(--s6) var(--gutter);
  border-bottom: var(--hairline);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.stat {
  padding: var(--s3);
  border: var(--hairline);
}

.stat__value {
  font-size: var(--fs-stat);
  font-weight: var(--fw-stat);
  letter-spacing: var(--tr-stat);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--text-body);
}

/* One of the four rationed coral moments: the total raised. */
.stat--rationed .stat__value {
  color: var(--accent-rationed);
}

.stat__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

/* -------------------------------- SUE ----------------------------------- */

.sue {
  padding: var(--s7) var(--gutter) 0;
}

.sue__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
  align-items: flex-start;
  justify-content: space-between;
}

.sue__copy {
  flex: 1 1 460px;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sue__lead {
  font: 700 var(--fs-h1) / 1.1 var(--font-sans);
  letter-spacing: -0.02em;
  max-width: 24ch;
}

.sue__prose {
  columns: 260px 2;
  column-gap: var(--s5);
  font: 400 var(--fs-small) / 1.5 var(--font-sans);
}

.sue__prose p {
  margin: 0 0 var(--s3);
  break-inside: avoid-column;
}

.sue__prose p:last-child {
  margin: 0;
}

.sue__signoff {
  font-weight: 700;
}

.sue__portraits {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  align-items: flex-start;
}

.portrait {
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
  border: 2px solid var(--dus-deep);
  border-radius: 50%;
  background: var(--card);
  padding: 6px;
  aspect-ratio: 1 / 1;
}

.portrait--offset {
  margin-left: -56px;
}

.portrait__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dus-pastel);
  display: grid;
  place-items: center;
  position: relative;
}

/* The photo layers over the placeholder. If the file isn't there yet the layer
   simply paints nothing and the placeholder shows through — no JS, no broken
   image icon. Swap the two urls below if you rename the files. */
.portrait__photo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.portrait__photo--1 {
  background-image: url("/assets/photos/sue-portrait.jpg");
}

.portrait__photo--2 {
  background-image: url("/assets/photos/sue-on-a-bike.jpg");
}

/* Sits underneath the photo layer; visible only while the photo is missing. */
.portrait__placeholder {
  font: 600 var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dus-deep);
  text-align: center;
  padding: var(--s4);
}

/* ----------------------------- WHY WE RIDE ------------------------------ */

.why {
  padding: var(--s7) var(--gutter);
  background: color-mix(in oklab, var(--dus-pastel) 45%, var(--paper));
  margin-top: var(--s7);
}

.why__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.why__label {
  color: var(--dus-deep);
}

/* ------------------------------ THE RIDE -------------------------------- */

.ride {
  padding: var(--s7) var(--gutter);
  background: var(--night);
  color: var(--night-text);
}

.ride__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.ride h2 {
  color: var(--paper);
}

.ride a {
  color: var(--dus-dark);
}

.ride a:hover {
  color: var(--paper);
}

.ride__chart {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* The chart scrolls sideways rather than squashing on a narrow screen — a
   squashed elevation profile is a lie about the gradient. */
.ride__chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.elevation {
  display: block;
  width: 100%;
  height: auto;
  min-width: 560px;
}

.ep-t {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* Only worth saying on a screen where the chart actually overflows. */
.chart-hint {
  display: none;
  color: var(--night-meta);
}

.legend {
  display: grid;
  grid-template-columns: 21.64fr 41.31fr 15.74fr 21.31fr;
  gap: 2px;
  min-width: 560px;
}

.legend__seg {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.legend__bar {
  height: 8px;
}

.legend__seg:nth-child(1) .legend__bar { background: var(--nin-mid); }
.legend__seg:nth-child(2) .legend__bar { background: var(--fra-mid); }
.legend__seg:nth-child(3) .legend__bar { background: var(--dus-mid); }
.legend__seg:nth-child(4) .legend__bar { background: var(--nar-mid); }

.legend__name {
  font: 600 12px/1.3 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night-label);
}

.legend__km {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--night-meta);
  font-variant-numeric: tabular-nums;
}

.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s6);
  border: 1px solid var(--night-rule);
  border-radius: var(--radius-ui);
  padding: var(--s4);
}

.details__item {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.details__label {
  color: var(--night-label);
}

.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.faq__item {
  padding: var(--s4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.faq__item h3 {
  color: var(--paper);
}

/* ----------------------- WHERE THE MONEY GOES --------------------------- */

.money {
  padding: var(--s7) var(--gutter);
}

.money__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.money h2 {
  max-width: 28ch;
}

.tiers {
  display: flex;
  flex-direction: column;
}

.tier {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s3) 0;
  border-top: var(--hairline);
}

.tier__amount {
  font: 600 var(--fs-h3) / 1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.tier--goal {
  border-bottom: var(--hairline);
}

.tier--goal .tier__amount {
  color: var(--dus-deep);
}

.tier__goal-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.tier__goal-label {
  color: var(--dus-deep);
}

.split {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 66ch;
}

.split__label {
  color: var(--grey);
}

/* -------------------------- THREE WAYS IN ------------------------------- */

.ways {
  padding: var(--s7) var(--gutter);
  background: var(--dus-deep);
}

.ways__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.ways h2 {
  color: var(--paper);
}

.ways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.way {
  border: var(--hairline);
  border-radius: var(--radius-ui);
  padding: var(--s4);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.way p {
  flex: 1;
}

.way .btn {
  align-self: flex-start;
}

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

.foot {
  background: var(--night);
  padding: var(--s7) var(--gutter) var(--s6);
  color: var(--night-text);
}

.foot__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.foot__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
}

.foot__col {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.foot__label {
  color: var(--night-label);
}

.foot__meta {
  color: var(--night-meta);
  font-variant-numeric: tabular-nums;
}

.foot__sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}

.foot__wordmark {
  font: 800 var(--fs-h1) / 0.94 var(--font-sans);
  letter-spacing: -0.035em;
  color: var(--paper);
}

.foot__edition {
  color: var(--dus-dark);
  margin-top: var(--s3);
}

.foot__heart {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: invert(1);
}

/* ----------------------------- RESPONSIVE -------------------------------- */

/* Tablet — the four-across facts row and the three-across cards are the first
   things to give. */
@media (max-width: 1000px) {
  :root {
    --fs-display: 60px;
    --fs-h1: 34px;
    --fs-lede: 21px;
    --s7: 72px;
    --gutter: 32px;
  }

  .facts__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ways__grid {
    grid-template-columns: 1fr;
  }

  .hero__heart {
    width: 300px;
    flex: 0 0 300px;
    left: 0;
  }

  .sue__inner {
    justify-content: flex-start;
  }

  .sue__portraits {
    flex-direction: row;
    align-items: flex-start;
  }

  .portrait {
    width: 220px;
  }

  .portrait--offset {
    margin-left: -40px;
    margin-top: var(--s5);
  }
}

/* Phone — single column throughout. */
@media (max-width: 700px) {
  :root {
    --fs-display: 46px;
    --fs-h1: 28px;
    --fs-lede: 19px;
    --fs-stat: 28px;
    --s6: 48px;
    --s7: 56px;
    --gutter: 20px;
  }

  body {
    font-size: 16px;
  }

  .hero {
    padding-bottom: var(--s6);
  }

  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__heart {
    width: 220px;
    flex: 0 0 auto;
    align-self: center;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .facts__grid {
    grid-template-columns: 1fr;
  }

  .sue__prose {
    columns: 1;
  }

  .sue__portraits {
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 100%;
  }

  .portrait {
    width: min(260px, 78vw);
  }

  .portrait--offset {
    margin-left: 0;
    margin-top: 0;
  }

  .details,
  .faq,
  .foot__cols {
    grid-template-columns: 1fr;
  }


  .faq__item {
    padding: 0;
  }

  .tier {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
}

/* Below this the elevation profile is genuinely wider than the screen — the
   560px min-width plus the page gutters. */
@media (max-width: 640px) {
  .chart-hint {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Printing this page is a legitimate thing to do — someone wants the route
   details on paper in a jersey pocket. */
@media print {
  .hero,
  .ways,
  .ride,
  .foot {
    background: #fff !important;
    color: #000 !important;
  }

  .ride *,
  .foot * {
    color: #000 !important;
  }

  .skip,
  .hero__heart,
  .foot__heart {
    display: none;
  }
}