/* ===========================================================================
   Ski's Open Heart Foundation
   Built from .docs/design-system.md. Tokens first, then base, then components.

   Contrast note: the brand orange #DE722A is a mid-tone and cannot carry small
   text at WCAG AA against either white (3.21:1) or charcoal (4.15:1). It is a
   decorative / large-text colour only. --color-orange-600 (#B35A1E, 4.77:1 on
   white) does the work of links, buttons and focus rings. Verified, not assumed.
   =========================================================================== */

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
:where(h2, h3):first-child { margin-top: 0; }

/* --- Design tokens --------------------------------------------------------- */
:root {
  /* ---- Brand oranges ---- */
  --color-orange-50:  #FBF0E8;  /* tint backgrounds, callout panels */
  --color-orange-100: #F4D9C4;  /* borders/dividers on tinted panels */
  --color-orange-300: #F2A365;  /* orange text/links ON dark (charcoal) backgrounds — 6.5:1 on charcoal */
  --color-orange-500: #DE722A;  /* BRAND orange, sampled from logo — decorative, large text (>=24px), icons, rules. Do not use for small text on white or white text on it. */
  --color-orange-600: #B35A1E;  /* "orange-ink" — links, buttons, focus rings, any small orange text on white (4.8:1) */
  --color-orange-700: #8C4517;  /* hover/active state for orange-600 */

  /* ---- Charcoal / ink (brand charcoal is ink-900) ---- */
  --color-ink-900: #332E32;  /* BRAND charcoal, sampled from logo — headings, body text: 13.3:1 on white */
  --color-ink-600: #6B6569;  /* secondary/muted text — 5.7:1 on white */
  --color-ink-400: #9B9598;  /* decorative/disabled text only — 2.9:1, never for content that must be read */
  --color-ink-200: #D8D3D5;  /* input borders, dividers on white */
  --color-ink-100: #E6E2E4;  /* hairline rules, card borders */
  --color-ink-50:  #F7F5F3;  /* alternating section background */

  /* ---- Neutrals ---- */
  --color-white: #FFFFFF;

  /* ---- Semantic / state ---- */
  --color-danger:  #B3261E;  /* form errors — 6.5:1 on white */
  --color-success: #2E7D32;  /* confirmation messages — 5.1:1 on white */
  --color-focus:   var(--color-orange-600);

  /* ---- Surfaces ---- */
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-ink-50);
  --color-surface-accent: var(--color-orange-50);
}

:root {
  --text-xs:   0.8125rem; /* 13px — legal/fine print floor, never go smaller */
  --text-sm:   0.9375rem; /* 15px — captions, meta, form hints */
  --text-base: 1.0625rem; /* 17px — body copy default */
  --text-md:   1.1875rem; /* 19px — lead paragraphs, pull quotes */
  --text-lg:   1.375rem;  /* 22px — card titles, h4 */
  --text-xl:   1.75rem;   /* 28px — h3 */
  --text-2xl:  2.25rem;   /* 36px — h2 */
  --text-3xl:  clamp(2rem, 1.2rem + 3.5vw, 3.25rem); /* 32–52px — h1 / hero, fluid, no media query needed */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.65;
}

:root {
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
}

:root {
  --radius-sm: 0.25rem;  /* 4px  — inputs, buttons, tags */
  --radius-md: 0.625rem; /* 10px — cards, photo frames, callout panels */

  --shadow-sm: 0 1px 2px rgba(51, 46, 50, 0.08);
  --shadow-md: 0 6px 20px rgba(51, 46, 50, 0.12);
}

:root {
  --container-max: 71.25rem; /* 1140px */
  --container-prose: 68ch;   /* reading column for essay/long-form text */
  --gutter: var(--space-4);
}

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

.prose {
  max-width: var(--container-prose);
  margin-inline: auto;
}

:root {
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

body {
  font-family: var(--font-sans);
}

/* --- Base typography ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-ink-900);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); margin-top: var(--space-8); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: 600; }

body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-ink-900);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--space-4); max-width: 68ch; }

a {
  color: var(--color-orange-600);
  text-decoration-color: var(--color-orange-100);
  text-underline-offset: 3px;
}
a:hover { color: var(--color-orange-700); text-decoration-color: currentColor; }

/* --- Header / navigation --------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-ink-100);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.site-logo img {
  display: block;
  width: 9.5rem;   /* ~152px, native ratio 373:88 preserved via height:auto */
  height: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;   /* 44px min touch target */
  height: 2.75rem;
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--color-ink-900);
  position: relative;
}
.nav-toggle-icon::before { content: ""; position: absolute; top: -6px; left: 0; width: 100%; }
.nav-toggle-icon::after  { content: ""; position: absolute; top: 6px;  left: 0; width: 100%; }

.site-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(20rem, 85vw);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
  background: var(--color-surface);
  border-left: 1px solid var(--color-ink-100);
  padding: var(--space-8) var(--space-5) var(--space-5);
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.site-nav.is-open { transform: translateX(0); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.site-nav a:not(.btn) {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink-900);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn):focus-visible { color: var(--color-orange-600); background: var(--color-orange-50); }
.site-nav a[aria-current="page"] { color: var(--color-orange-600); }
.site-nav .nav-donate { margin-top: var(--space-4); width: 100%; }

@media (min-width: 880px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static; inset: auto; width: auto;
    transform: none; transition: none;
    background: transparent; border-left: 0; padding: 0;
    overflow: visible; box-shadow: none;
  }
  .site-nav ul {
    grid-auto-flow: column;
    align-items: center;
    gap: var(--space-5);
  }
  .site-nav a:not(.btn) { padding: var(--space-2) 0; }
  .site-nav .nav-donate { margin-top: 0; width: auto; }
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-9);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-ink-100);
}
.site-footer-inner {
  padding-block: var(--space-8);
  display: grid;
  gap: var(--space-5);
}
.site-footer-logo { width: 8rem; height: auto; opacity: 0.9; }
.site-footer nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.site-footer nav a { color: var(--color-ink-900); font-weight: 600; text-decoration: none; }
.site-footer nav a:hover { color: var(--color-orange-600); }
.site-footer address { font-style: normal; color: var(--color-ink-600); line-height: var(--leading-base); }
.site-footer address a { color: var(--color-ink-600); }
.site-footer .memorial { font-weight: 700; color: var(--color-ink-900); margin: 0; }
.site-footer .legal { font-size: var(--text-xs); color: var(--color-ink-600); margin: 0; max-width: 60ch; }

@media (min-width: 1024px) {
  .site-footer-inner {
    grid-template-columns: auto 1fr auto;
    align-items: start;
  }
  .site-footer .memorial,
  .site-footer .legal { grid-column: 1 / -1; }
}

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;      /* 44px min touch target */
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.btn-primary { background: var(--color-orange-600); color: var(--color-white); }
.btn-primary:hover,
.btn-primary:active { background: var(--color-orange-700); }

.btn-secondary { background: var(--color-surface); border-color: var(--color-ink-900); color: var(--color-ink-900); }
.btn-secondary:hover { background: var(--color-ink-50); }

.btn-ghost { background: transparent; color: var(--color-orange-600); padding-inline: var(--space-2); min-height: auto; }
.btn-ghost:hover { color: var(--color-orange-700); text-decoration: underline; }

.btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
/* On the filled orange button, a same-hue outline is too low-contrast against it —
   use charcoal with a white gap instead so it stays visible on any surface. */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-ink-900);
}

.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 479px) {
  .btn-block-mobile { width: 100%; }
}

/* --- Cards ----------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; font-size: var(--text-lg); }
.card p:last-of-type { margin-bottom: var(--space-3); }

.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* --- Photo treatment ------------------------------------------------------- */
.photo-frame {
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-ink-100);
  aspect-ratio: 4 / 3;         /* default */
  background: var(--color-ink-50); /* shows while loading, and if an image is missing */
}
.photo-frame.is-portrait { aspect-ratio: 3 / 4; }
.photo-frame.is-wide     { aspect-ratio: 16 / 9; }
.photo-frame.is-square   { aspect-ratio: 1 / 1; }

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

figure { margin: 0; }
figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-600);
  font-style: italic;
}

/* --- Pull quotes ----------------------------------------------------------- */
.pull-quote {
  margin: var(--space-7) 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--color-orange-500);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-style: italic;
  color: var(--color-ink-900);
}
.pull-quote p { margin: 0; max-width: none; }
.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink-600);
}
.pull-quote cite::before { content: "\2014\00A0"; } /* em dash + nbsp */

/* --- Donation callout ------------------------------------------------------ */
.callout {
  background: var(--color-surface-accent);
  border: 1px solid var(--color-orange-100);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-block: var(--space-8);
}
.callout h2 { margin-top: 0; font-size: var(--text-xl); }
.callout p { margin-bottom: 0; }
.callout .btn { margin-top: var(--space-4); }

@media (min-width: 700px) {
  .callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .callout .btn { margin-top: 0; flex-shrink: 0; }
}

/* --- Forms ----------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label { font-weight: 600; font-size: var(--text-base); color: var(--color-ink-900); }
.field .hint { font-size: var(--text-sm); color: var(--color-ink-600); }

.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: 1rem; /* keep >=16px: prevents iOS auto-zoom on focus */
  min-height: 2.75rem;
  padding: var(--space-3);
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-900);
  width: 100%;
  box-sizing: border-box;
}
.field textarea { min-height: 8rem; resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-orange-600);
}

.field.has-error input,
.field.has-error textarea { border-color: var(--color-danger); }
.error-message {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-danger);
  margin: 0;
}

fieldset { border: 1px solid var(--color-ink-200); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-5); }
legend { font-weight: 700; padding: 0 var(--space-2); font-size: var(--text-base); }

.form-actions .btn { width: 100%; }
@media (min-width: 480px) {
  .form-actions .btn { width: auto; }
}

/* --- Drop-off locations ---------------------------------------------------- */
.locations {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-block: var(--space-6);
}
@media (min-width: 700px) {
  .locations { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.location-card {
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.location-card h3 { margin: 0; font-size: var(--text-base); }
.location-card address { font-style: normal; color: var(--color-ink-600); }
.location-card .note { font-size: var(--text-sm); color: var(--color-ink-600); margin: 0; }
.location-card .location-links {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-1);
}
.location-card .location-links a { font-size: var(--text-sm); font-weight: 700; }

/* --- Skip link & misc ------------------------------------------------------ */
  .skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-ink-900);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    z-index: 100;
  }
  .skip-link:focus { left: var(--space-4); top: var(--space-4); }


/* --- Page furniture -------------------------------------------------------
   Layout scaffolding not covered by the component spec: section rhythm, the
   home hero, and the small text patterns the copy needs (lead, facts, lists).
   -------------------------------------------------------------------------- */

.section { padding-block: var(--space-8); }
.section-alt { background: var(--color-surface-alt); }
.section + .section { padding-top: var(--space-8); }

/* First heading in a section shouldn't inherit h2's large top margin. */
.section > .container > h1:first-child,
.section > .container > h2:first-child,
.section > .container > .prose > h1:first-child { margin-top: 0; }

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-ink-900);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Home hero: text first, one modest photo beside it. No full-bleed banner. */
.hero { padding-top: var(--space-7); }
.hero-inner { display: grid; gap: var(--space-6); }
.hero-photo { margin: 0; max-width: 18rem; }

@media (min-width: 768px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
  }
  .hero-photo { max-width: none; justify-self: end; }
}

/* Lists that are content, not navigation. */
.plain-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.plain-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  max-width: 68ch;
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-orange-500);
}

@media (min-width: 768px) {
  .plain-list.columns { columns: 2; column-gap: var(--space-7); }
  .plain-list.columns li { break-inside: avoid; }
}

/* Quiet facts strip on Our Inspiration — deliberately not a stat dashboard. */
.facts {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-600);
}
.facts li { margin: 0; }

.byline {
  font-size: var(--text-sm);
  color: var(--color-ink-600);
  margin-bottom: var(--space-6);
}

.attribution {
  font-weight: 700;
  margin-top: var(--space-6);
}

/* Long-form reading column gets slightly larger body text. */
.prose > p { font-size: var(--text-md); }
.prose > .byline,
.prose > .facts { font-size: var(--text-sm); }

address.contact-block {
  font-style: normal;
  line-height: var(--leading-base);
  margin-bottom: var(--space-4);
}
address.contact-block-lg { font-size: var(--text-md); }

figcaption {
  font-size: var(--text-sm);
  color: var(--color-ink-600);
  margin-top: var(--space-2);
}

/* Cards sit on the alt surface, so give them a white ground to lift off it. */
.section-alt .card { background: var(--color-surface); }

/* --- Fixes found in browser testing ---------------------------------------
   The reset zeroes all heading margins and the component spec only sets
   margin-top, so every heading sat flush against its first paragraph.

   The overflow-x rule below is defensive, not a fix for an observed bug:
   measurement showed document scrollWidth already equals the viewport width.
   The closed nav drawer sits at translateX(100%) off the right edge, which is
   harmless in Chrome but has historically caused phantom horizontal scroll in
   mobile Safari, so it is clipped on <html> (not <body>) to leave the sticky
   header working.
   -------------------------------------------------------------------------- */

html { overflow-x: hidden; }

h1 { margin-bottom: var(--space-5); }
h2 { margin-bottom: var(--space-4); }
h3 { margin-bottom: var(--space-3); margin-top: var(--space-6); }
h4 { margin-bottom: var(--space-2); }

/* A heading that opens a card or callout doesn't need the big top margin. */
.card > h3:first-child,
.card > h4:first-child,
.callout > h2:first-child,
.callout > h3:first-child { margin-top: 0; }

/* Ghost links used inline in body copy should align with the text above them,
   not sit indented by the button's own padding. */
p > .btn-ghost { padding-left: 0; }

/* Nav switches from drawer to inline row at 880px, not 700px: at 700-880 the
   seven links wrapped to two cramped rows in testing. Raising it means tablets
   get the drawer, which stays legible. */

/* --- Fixes from UX testing -------------------------------------------------
   1. Open drawer covered its own hamburger button, so the button could not be
      used to close it (elementFromPoint returned the nav, not the button).
      The toggle now sits above the drawer.
   2. The closed drawer's seven links stayed in the tab order while parked
      off-screen at translateX(100%), so keyboard users tabbed through seven
      invisible links before reaching content on every page. visibility:hidden
      removes them from the tab order; it is delayed on close so the slide-out
      animation still runs.
   3. Footer nav links were 22px tall — under the 44px touch target minimum.
   4. Plain text links had only the browser default focus ring.
   -------------------------------------------------------------------------- */

.site-nav { z-index: 50; }
.nav-toggle { position: relative; z-index: 60; }

.site-nav {
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}
.site-nav.is-open {
  visibility: visible;
  transition: transform var(--duration-base) var(--ease-standard),
              visibility 0s;
}

@media (min-width: 880px) {
  .site-nav { visibility: visible; transition: none; }
}

.site-footer nav a {
  display: inline-block;
  padding-block: var(--space-3);
}

a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The callout lays its text and its button out side by side, which only works
   when the text is wrapped in a single element. Guarding on :has means a
   callout with no button stays stacked instead of splintering into columns. */
@media (min-width: 700px) {
  .callout:not(:has(> .btn)) { display: block; }
}

/* --- Motto band -----------------------------------------------------------
   "Family First, Forever Family" was Ski's own line; it runs through the
   foundation's stickers, shirts and flyers. The artwork's own background is
   #322D31, one value off the brand charcoal, so the band is set to the
   artwork's colour and the image dissolves into it at any width.
   -------------------------------------------------------------------------- */

.motto {
  background: #322d31;
  padding-block: var(--space-4);
}
.motto img {
  display: block;
  width: 100%;
  /* Matched to the site's content width so the motto lines up with everything
     above it. This upscales the 892px source by about 1.28x, which is invisible
     on flat-colour lettering; going wider starts to show softness. */
  max-width: var(--container-max);
  height: auto;
  margin-inline: auto;
}

/* The footer's top margin leaves a white gap under the dark motto band, which
   reads as a mistake. The band is the last child of <main>, so it is not a
   sibling of the footer -- match through <main> rather than beside it. */
main:has(> .motto:last-child) + .site-footer { margin-top: 0; }

/* A callout that is the only thing in a section was stacking its own 64px
   margin on top of the section's 64px padding, leaving a canyon of white space
   above and below it. */
.section .callout:only-child { margin-block: 0; }