/* Fonts are self-hosted (SIL OFL, licences in /fonts) so no visitor data goes to Google. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lilita-one-latin-400-normal.woff2") format("woff2"); }

/* 4Checkpoint design tokens: from the "4Checkpoint Design Language" canvas.
   Poster colours are for fills; the -deep partners are for text and links (WCAG AA on paper). */
:root {
  --ink: #18202E;
  --paper: #FFF8F1;
  --white: #FFFFFF;
  --line: #EADFD4;
  --muted: #5A6272;
  --slot: #F3E9DF;
  --slot-line: #C9BBAE;

  --coral: #F2717F;   --coral-deep: #B8324A;  --coral-tint: #FDE3E6;
  /* Heritage headings: the deepest coral that still reads as the poster colour, 3.4:1 on white (AA large text). */
  --coral-strong: #E85D6C;
  --sky: #29A6DA;     --sky-deep: #0B6591;    --sky-tint: #EAF6FC;
  --amber: #FDB64A;   --amber-deep: #8F5200;  --amber-tint: #FFF0D6;
  --forest: #2F7D4A;  --forest-deep: #245F39;
  --ocean: #2447A8;   --ocean-deep: #1B3580;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-heritage: "Lilita One", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;

  /* Shape rule: pills for buttons; radius-sm for inputs, choices, signs, logos and small tiles;
     radius for cards and notes; radius-lg for bands and large art. Circles only for drawn shapes. */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --gutter: clamp(16px, 5vw, 72px);

  --space-block: clamp(24px, 4vw, 40px);
  --space-section: clamp(48px, 8vw, 88px);

  --accent: var(--coral);
  --accent-deep: var(--coral-deep);
}

.activity-cycle { --accent: var(--sky);    --accent-deep: var(--sky-deep); }
.activity-run   { --accent: var(--coral);  --accent-deep: var(--coral-deep); }
.activity-hike  { --accent: var(--forest); --accent-deep: var(--forest-deep); }
.activity-swim  { --accent: var(--ocean);  --accent-deep: var(--ocean-deep); }
.activity-you   { --accent: var(--amber);  --accent-deep: var(--amber-deep); }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}
body.theme-community { background: var(--white); }
/* Removes the double-tap zoom delay on phones. */
html { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }

a { color: var(--accent-deep); }
a:hover { color: var(--ink); }
img { max-width: 100%; display: block; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--ink); color: var(--white); padding: 8px 12px; z-index: 10; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; }

.container { width: 100%; max-width: 1296px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 640px; }

/* Header */
.site-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 12px var(--gutter); }
.wordmark { font: 400 clamp(24px, 3vw, 34px)/1 var(--font-heritage); color: var(--coral); text-shadow: 2px 2px 0 var(--amber); text-decoration: none; }
.wordmark:hover { color: var(--coral-deep); }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
/* Without JS the nav stays visible and wraps. */
@media (max-width: 719px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.open { display: block; }
  .js .site-nav .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .js .site-nav .nav-list a:not(.button) { display: block; padding: 12px 0; }
  .js .site-nav .button { margin-top: 8px; width: 100%; }
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-weight: 700; }
.nav-list a:not(.button) { color: var(--ink); text-decoration: none; }
.nav-list a:not(.button):hover { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Type */
.display { font: 900 clamp(48px, 8vw, 96px)/0.95 var(--font-display); letter-spacing: -0.04em; margin: 0 0 24px; }
.display-sm { font-size: clamp(40px, 7vw, 52px); }
.heritage { font: 400 clamp(56px, 12vw, 148px)/0.95 var(--font-heritage); color: var(--coral-strong); text-shadow: 4px 4px 0 var(--amber); margin: 16px 0; text-transform: uppercase; text-wrap: balance; }
.heritage-sm { font-size: clamp(34px, 7vw, 56px); text-shadow: 3px 3px 0 var(--amber); }
/* Below 360px the 56px floor makes "CHECKPOINT" wider than the screen. */
@media (max-width: 359px) { .heritage:not(.heritage-sm) { font-size: 46px; } }
.heritage-date { font: 400 24px/1.2 var(--font-heritage); color: var(--sky-deep); text-transform: uppercase; margin: 0 0 16px; }
.eyebrow { font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-deep); margin: 0 0 16px; }
.lead { font-size: clamp(18px, 2vw, 23px); max-width: 60ch; }
.muted { color: var(--muted); }
.lockup { font: 900 22px/1 var(--font-display); letter-spacing: -0.02em; margin: 8px 0 20px; }
.lockup-activity { color: var(--accent-deep); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 28px; border-radius: 999px; border: 2px solid transparent; font: 700 19px/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: #2B3548; color: var(--white); }
.button-coral { background: var(--coral); color: var(--ink); }
.button-amber { background: var(--amber); color: var(--ink); }
.button-amber:hover { background: #F09A1A; color: var(--ink); }
.button-light { background: var(--white); color: var(--ink); }
.button-light:hover { background: var(--ink); color: var(--white); }
.button-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.button-outline:hover { background: var(--ink); color: var(--white); }
.button:disabled { opacity: 0.7; cursor: progress; }
.button-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.actions-stack { flex-direction: column; }

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 24px; padding-bottom: 48px; }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr) 560px; } }
.photo-slot, .illustration-slot, .logo-slot { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 220px; padding: 24px; border-radius: var(--radius-lg); border: 2px dashed var(--slot-line); background: var(--slot); color: var(--muted); }
.ride-art { display: block; max-width: 560px; margin: 16px 0; }
.ride-art img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.illustration-slot { border-color: var(--sky-deep); background: var(--sky-tint); color: var(--sky-deep); font-weight: 700; margin: 16px 0; }
.logo-slot { min-height: 120px; border-radius: var(--radius-sm); font-size: 14px; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-height: 120px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tile::before { content: ""; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); }
.tile-cycle { --accent: var(--sky); --accent-deep: var(--sky-deep); }
.tile-run { --accent: var(--coral); --accent-deep: var(--coral-deep); }
.tile-hike { --accent: var(--forest); --accent-deep: var(--forest-deep); }
.tile-swim { --accent: var(--ocean); --accent-deep: var(--ocean-deep); }
.tile-you { --accent: var(--amber); --accent-deep: var(--amber-deep); }
.tile-name { font: 900 24px/1.1 var(--font-display); }
.tile-meta { font-weight: 700; color: var(--accent-deep); font-size: 16px; }

.stats-band { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 48px 0; padding: 32px 40px; border-radius: var(--radius-lg); background: var(--ink); color: var(--white); }
.stats-band p { margin: 0; }
.stats-band a { color: var(--white); font-weight: 700; }
.stat { font: 900 48px/1.1 var(--font-display); color: var(--amber); }
/* Fixed-width digits so money and counts line up. */
.stat, .ride-amount, .event-stats dd, .home-b-band-inner { font-variant-numeric: tabular-nums; }

/* Community (Direction B) pages */
.community-hero { padding-bottom: 24px; }
.ride-totals { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ride-totals li { padding: 14px; border-radius: var(--radius-sm); background: var(--amber-tint); display: flex; flex-direction: column; }
.ride-amount { font: 400 30px/1.1 var(--font-heritage); }
.cta-band { display: flex; flex-direction: column; gap: 10px; padding: 24px var(--gutter) 32px; background: var(--coral); align-items: stretch; }
@media (min-width: 720px) { .cta-band { flex-direction: row; justify-content: center; } }

/* Forms */
.form { display: flex; flex-direction: column; gap: 18px; margin: 24px 0 48px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 700; font-size: 16px; padding: 0; }
.field input[type="text"], .field input[type="email"], .field input:not([type]), .field textarea {
  min-height: 52px; padding: 12px 14px; border-radius: var(--radius-sm); border: 2px solid var(--muted); background: var(--white);
  font: 400 17px/1.4 var(--font-body); color: var(--ink);
}
.field textarea { resize: vertical; }
/* Borders are now dark enough (3:1) that a colour change alone won't show focus, so keep the ring. */
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: 3px solid var(--sky-deep); outline-offset: 2px; }
.field-check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field-check input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; }
.field-check label { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; font-size: 15px; cursor: pointer; }
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--radius-sm); border: 2px solid var(--muted); background: var(--white); font-weight: 700; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--sky-tint); }
.optional { font-weight: 400; color: var(--muted); }
.field-error, .form-errors { color: var(--coral-deep); font-size: 15px; font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 20px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.back-link { display: inline-block; margin: 8px 0; font-weight: 700; color: var(--ink); }

/* Cards, lists */
/* Cards group by tint, not borders. Sponsor cards keep white + border so logo backgrounds sit cleanly. */
.card { padding: 20px; border-radius: var(--radius); background: var(--paper); margin: 24px 0; }
.card-title { font: 900 20px/1.2 var(--font-display); margin: 0 0 12px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { padding-left: 32px; position: relative; font-size: 16px; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--forest); font-weight: 900; }
.steps { display: flex; flex-direction: column; gap: 12px; padding-left: 24px; margin: 24px 0; }
.done { padding-top: 32px; padding-bottom: 48px; }
.done-badge { width: 88px; height: 88px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 900; }
.done-badge-green { background: var(--forest); color: var(--white); }

/* Past events, sponsors */
.event-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.event-card { display: grid; gap: 24px; padding: 24px; border-radius: var(--radius-lg); background: var(--paper); }
@media (min-width: 900px) { .event-card { grid-template-columns: 520px minmax(0, 1fr); } }
.event-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-photos img { width: 100%; height: auto; border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: cover; }
.event-photos-single { grid-template-columns: minmax(0, 1fr); }
.event-photos-single img { aspect-ratio: 3 / 2; }
.event-meta { font-weight: 700; color: var(--accent-deep); margin: 0; }
.event-body h2 { font: 900 32px/1.1 var(--font-display); margin: 8px 0 16px; }
.event-stats { display: flex; flex-wrap: wrap; gap: 32px; margin: 0; }
.event-stats dt { color: var(--muted); font-size: 16px; }
.event-stats dd { margin: 0; font: 900 28px/1.2 var(--font-display); }

.sponsor-grid { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sponsor-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.sponsor-logo { display: flex; align-items: center; justify-content: center; height: 120px; padding: 8px; }
.sponsor-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
a.sponsor-logo { border-radius: var(--radius-sm); }
a.sponsor-logo:hover { background: var(--slot); }
.sponsor-card h2 { font: 800 20px/1.2 var(--font-display); margin: 4px 0 0; text-align: center; }
.sponsor-card p { margin: 0; font-size: 15px; text-align: center; }
.sponsor-card .note { font-size: 14px; font-style: italic; }
.beneficiary-note { padding: 24px 28px; border-radius: var(--radius); background: var(--coral-tint); margin-bottom: 48px; }

.prose h2 { font: 900 24px/1.2 var(--font-display); margin: 32px 0 8px; }
.draft-banner { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--amber-tint); color: var(--amber-deep); font-weight: 700; }

/* Footer */
.site-footer { padding: 32px var(--gutter) 48px; border-top: 1px solid var(--line); font-size: 16px; }
.site-footer a { color: var(--ink); }
.footer-beneficiary { display: flex; align-items: center; gap: 20px; }
.footer-beneficiary p { margin: 0; }
/* Without this the logo link shrinks when the text wraps, squashing the image. */
.footer-beneficiary a { flex-shrink: 0; }
.footer-beneficiary img { height: auto; }
.footer-links { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.credit { font-weight: 700; }

.form-notice, .hint { font-size: 15px; color: var(--muted); margin: 0; }
.form-notice a { color: var(--ink); }

/* Home, Direction B: sun, hill, heritage title, signpost nav */
.home-b { position: relative; overflow: hidden; padding: 24px 0 64px; }
.home-b-sun { position: absolute; left: 50%; top: 180px; width: min(500px, 80vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--amber); }
.home-b-hill { position: absolute; left: -10%; right: -10%; bottom: -200px; height: 420px; border-radius: 50% 50% 0 0; background: var(--coral); }
.home-b-inner { position: relative; }
.home-b-title { text-align: center; text-shadow: 6px 6px 0 var(--amber); }
.home-b-grid { display: grid; gap: 32px; align-items: start; margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .home-b-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: center; } }
.home-b-intro { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 560px; }
.home-b-intro p { margin: 0; }
.home-b-strap { font-size: 22px; font-weight: 700; line-height: 1.45; }
.signpost { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sign { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; max-width: 340px; min-height: 56px; padding: 12px 20px;
  border-radius: var(--radius-sm); border: 5px solid var(--coral); background: var(--white); color: var(--coral-deep);
  font: 400 22px/1.1 var(--font-heritage); text-transform: uppercase; text-decoration: none; }
.sign:hover { background: var(--coral-tint); color: var(--ink); }
.signpost-pole { width: 14px; height: 60px; background: var(--coral); border-radius: 0 0 6px 6px; margin-top: -12px; }
.home-b-band { background: var(--coral); padding: 20px 0 28px; }
.home-b-band-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; font-weight: 700; }
.home-b-band-inner p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Rhythm: every page ends with the same breathing room before the footer. */
main > section.container:last-child { padding-bottom: var(--space-section); }
.ride-detail { padding-top: var(--space-block); }
.ride-detail .ride-art { margin-top: 0; }

/* Motion (MOTION_INTENSITY 2): feedback only. Colour eases on hover, a 1px press on tap,
   signpost arrows nudge toward their destination. Nothing moves for reduced-motion users. */
.sign span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .button, .sign, a.sponsor-logo { transition: background-color 150ms ease, color 150ms ease, transform 120ms ease; }
  .sign span { transition: transform 150ms ease; }
  .button:active, .sign:active { transform: translateY(1px); }
  .sign-right:hover span { transform: translateX(4px); }
  .sign-left:hover span { transform: translateX(-4px); }
}

.prose h3 { font: 800 19px/1.3 var(--font-display); margin: 20px 0 6px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 12px 0; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--white); }