/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* Base */
  --white: #ffffff;
  --surface: #f5faf2;      /* soft mint-white, for alternating section bands */
  --surface-deep: #eaf4e4; /* slightly deeper mint, for cards on --surface */
  --ink: #2b2230;          /* warm plum-black, pulled from the logo outline */
  --ink-soft: #6d6274;     /* muted secondary text */
  --line: #e7e1de;         /* hairline borders on white */

  /* Brand accents, sampled from the TOSS logo artwork */
  --purple: #6f3ba6;
  --purple-tint: #f1e9fa;
  --green: #1e8449;         /* accessible text/icon green */
  --green-pastel: #e6f2e0;  /* pastel fill green, light */
  --lavender: #d3bfea;      /* soft brand purple, for backgrounds and section bands */
  --green-pastel-deep: #9dcd91;
  --gold: #c08f2e;          /* accessible text/icon gold */
  --gold-pastel: #f3ddA0;   /* pastel fill gold, matches the mascot's sparkle */

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1200px;
  --gutter: 24px;
  --section-space: 120px;
  --header-height: 76px;
  --radius: 20px;
  --radius-sm: 12px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 200ms;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --section-space: 72px;
    --header-height: 64px;
  }
}

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  /* The hero video intentionally bleeds to the viewport edge using 100vw
     math, which can overshoot by the scrollbar's width; clip that sliver
     instead of showing a horizontal scrollbar. */
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
}

body.menu-open {
  overflow: hidden;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 4px;
}

::selection {
  background: var(--purple);
  color: var(--white);
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-space) 0;
}

.section--tint {
  background: var(--surface);
}

.section--green {
  background: var(--green-pastel);
}

/* ==========================================================================
   Typography
   ========================================================================== */
.display {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  letter-spacing: -0.01em;
}

.h3 {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lead {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.muted {
  color: var(--ink-soft);
}

/* Underline that draws in on hover */
.link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--duration) var(--ease);
}

.link[aria-current="page"] {
  background-size: 100% 1px;
}

/* Hover effects only where there's a real pointer; on touch screens a tap
   would otherwise leave them stuck on. */
@media (hover: hover) {
  .link:hover {
    background-size: 100% 1px;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1.5px solid var(--purple);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--purple);
  cursor: pointer;
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

.btn--primary {
  background: var(--purple);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--purple);
  border-color: var(--purple);
}

.email-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 6px;
  padding: 6px 8px 6px 26px;
  background: var(--purple);
  color: var(--white);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.email-pill__link {
  color: inherit;
}

.email-pill__copy {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

.email-pill__copy:hover,
.email-pill__copy:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.email-pill__copy .icon-check,
.email-pill__copy.is-copied .icon-copy {
  display: none;
}

.email-pill__copy.is-copied .icon-check {
  display: block;
}

.btn--ghost {
  border-color: currentColor;
}

.btn--ghost:hover {
  background: var(--purple);
  color: var(--white);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 14px;
}

/* ==========================================================================
   Header / navbar
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Everywhere but the desktop snap layout (see "Section-by-section
   scrolling"), pages scroll freely and text passes right under the see-
   through header, so it frosts over once the page scrolls (main.js toggles
   .is-scrolled). */
@media not all and (min-width: 901px) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 var(--purple-tint);
  }
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--header-height);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}

.nav__logo {
  height: 48px;
  width: auto;
}

/* Sits in the grid's middle column, so it's centered in the navbar
   regardless of how wide the logo or the end group are. */
.nav__links {
  display: flex;
  justify-content: center;
  gap: 36px;
  font-size: 15px;
  font-weight: 500;
  color: var(--purple);
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav__toggle span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration) var(--ease);
}

.nav__toggle span:first-child {
  top: 18px;
}

.nav__toggle span:last-child {
  top: 25px;
}

.nav__toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 767px) {
  .nav {
    grid-template-columns: auto 1fr auto;
  }

  .nav__brand {
    grid-column: 1;
  }

  .nav__end {
    grid-column: 3;
    gap: 8px;
  }

  .nav__toggle {
    display: block;
  }

  .nav__links {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 32px var(--gutter);
    background: var(--white);
    font-family: var(--font-heading);
    font-size: 36px;
    letter-spacing: -0.01em;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duration) var(--ease),
      visibility var(--duration);
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Solid behind the open menu, so nothing on the page shows through. The
     scrolled header's backdrop-filter is dropped too: it would make the
     fixed menu panel size itself to the header instead of the window. */
  .menu-open .site-header {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav__links .link {
    background-size: 0 0;
  }

  .nav__links .link[aria-current="page"] {
    color: var(--purple);
  }

  .nav .btn--sm {
    padding: 9px 16px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Home: hero
   ========================================================================== */
.hero-scrub {
  padding: 0;
}

/* The hero has two layouts. Side by side (statement left, sticky video
   right) on desktops, iPads and any window that's wide and tall enough or
   upright; stacked (video, statement, mission box) on phones and short or
   narrow landscape windows. The two media queries below are exact opposites;
   keep them, and the copy in main.js, in sync:
     side by side: (min-width: 901px) and (min-height: 500px),
                   (min-width: 700px) and (orientation: portrait)
     stacked:      (max-width: 699px),
                   (max-width: 900px) and (orientation: landscape),
                   (max-height: 499px) and (orientation: landscape) */

/* Side by side: pull the next section up so its band overlaps the sticky
   video's bottom edge by a small bit, instead of leaving a gap. */
@media (min-width: 901px) and (min-height: 500px), (min-width: 700px) and (orientation: portrait) {
  .hero-scrub + .section {
    position: relative;
    z-index: 1;
    margin-top: -20px;
  }
}

.hero-scrub__grid {
  display: grid;
  /* minmax(0, …) lets each track shrink below its content's min-content
     size (the statement's long words at this font size would otherwise
     inflate the left track past its fr share, starving the right column
     and breaking the canvas's edge-to-edge bleed math below). */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 64px);
}

.hero-scrub__left {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 96px);
  padding-top: clamp(16px, 3vw, 40px);
}

/* Side by side: the statement alone fills the first viewport, so the page
   reads as a pure hero until the visitor scrolls — the mission heading and
   copy that follow in the flex column are pushed below the fold. The
   column's own padding-top is zeroed here so the intro block's centering
   isn't thrown off by an extra offset on top of it. */
@media (min-width: 901px) and (min-height: 500px), (min-width: 700px) and (orientation: portrait) {
  .hero-scrub__left {
    padding-top: 0;
    /* The intro fills the space under the header, so the statement is
       centered and the box starts below the fold, this far past it. */
    gap: clamp(72px, 12vh, 128px);
    /* Spacing before the green section, plus the 20px the next section's
       band overlaps this one by. main.js sets --mission-space-below so the
       box ends up centered between the header and the band when the band
       reaches the bottom of the window; the fallback covers no-JS. */
    padding-bottom: calc(var(--mission-space-below, max(72px, 12vh)) + 20px);
  }

  .hero-scrub__intro {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    /* The window's height with the browser's toolbars showing (iPad Safari);
       the same as 100vh on desktops. */
    min-height: calc(100svh - var(--header-height));
  }
}

/* ==========================================================================
   Section-by-section scrolling (Home and About)
   Pages with html.snap-sections, desktop pointers only; phones and tablets
   keep free scrolling. Home stops at the statement, the mission box
   centered under the header, the green section and the footer; About stops
   at each section and the footer. snap-stop means a hard swipe can't skip
   a stop. Each plain section is sized to exactly one window with its
   content centered under the header, so a stop shows one section and
   nothing of its neighbors. Windows under 500px tall (where the hero is
   stacked) scroll freely too.
   ========================================================================== */
@media (min-width: 901px) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  html.snap-sections {
    scroll-snap-type: y mandatory;
    /* Space kept between a section's content and the header / window edge. */
    --snap-breathe: clamp(24px, 6vh, 72px);
  }
  .snap-sections :is(.hero-scrub__intro, main > .section) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* The header sits above <main>, so the statement's stop is the page top.
     (The whole hero is taller than the window, so it can't be the stop.) */
  .snap-sections .hero-scrub__intro { scroll-margin-top: var(--header-height); }
  /* Extending the box's snap area up by the header's height centers the
     box in the space below the header rather than in the whole window. */
  .snap-sections .hero-scrub .mission-box {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    scroll-margin-top: var(--header-height);
  }
  /* Each section fills the whole window at its stop, running up behind the
     header (so nothing above shows through it) with its content centered
     in the space below the header. */
  .snap-sections main > .section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: calc(var(--header-height) + var(--snap-breathe)) 0 var(--snap-breathe);
  }
  /* A page that opens on a plain section (About) starts below the header
     in the flow, so that one fills the rest of the first window instead
     and stops at the page top. */
  .snap-sections main > .section:first-child {
    min-height: calc(100vh - var(--header-height));
    padding-top: var(--snap-breathe);
    scroll-margin-top: var(--header-height);
  }
  .snap-sections main > .section--green { scroll-snap-align: center; }
  .snap-sections .site-footer { scroll-snap-align: end; }
}

.hero-scrub__statement {
  font-family: "Besley", Georgia, serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--purple);
  max-width: 16ch;
  /* Flex items default to min-width: auto, which floors their shrink at
     their content's min-content size — the widest unbreakable word here —
     letting the statement overflow its column into the video regardless
     of max-width. This lets it actually wrap within the column. */
  min-width: 0;
}

.hero-scrub__statement-accent {
  color: var(--green);
}

/* The right column's grid cell stretches to match the left column's
   (taller, text-driven) height; the canvas sticks inside that cell and
   is released once the left column's content runs out. */
.hero-scrub__right {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  justify-content: flex-end;
  margin-top: calc(-1 * var(--header-height));
  /* Break out of the centered container so the video hugs the true
     right edge of the viewport, not just the grid column's edge. */
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - (var(--container) + var(--gutter) * 2)) / 2)));
}

.hero__canvas {
  width: 100%;
  max-width: 45vw;
  height: auto;
  aspect-ratio: 480 / 854;
}

/* Upright tablets: narrower columns, so a smaller statement, centered
   beside the video (the intro is as tall as the video, which is ~43vw wide
   at these sizes) rather than in a whole window's height. The window is
   tall enough to show all of the video, so it sticks below the header
   instead of running up behind it. */
@media (min-width: 700px) and (orientation: portrait) {
  .hero-scrub__statement {
    font-size: clamp(2rem, 4.5vw, 4.5rem);
    text-wrap: balance;
  }

  .hero-scrub__intro {
    min-height: calc(43vw * 854 / 480);
  }

  .hero-scrub__right {
    top: var(--header-height);
    margin-top: 0;
  }
}

/* Stacked: video, statement, mission box in one column. The left column's
   wrapper steps out of the layout (display: contents) so the video can come
   before its two children. The video's cell is a runway one screen taller
   than the video: the canvas pins below the header while the runway scrolls
   past, and main.js plays the frames across exactly that stretch. The grid
   starts the canvas right at its pin line, so the frames play from the
   first bit of scrolling. The canvas's height is set (not its width) so it
   always fits the screen. */
@media (max-width: 699px), (max-width: 900px) and (orientation: landscape), (max-height: 499px) and (orientation: landscape) {
  .hero-scrub {
    padding-bottom: clamp(64px, 10vw, 120px);
  }

  .hero-scrub__grid {
    --screen-h: 100vh;
    --canvas-h: min(
      calc(var(--screen-h) - var(--header-height) - 32px),
      calc((100vw - var(--gutter)) * 854 / 480)
    );
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 6vw, 48px);
    padding-top: 16px;
    text-align: center;
  }

  /* The window's height with the browser's toolbars showing. */
  @supports (height: 100svh) {
    .hero-scrub__grid {
      --screen-h: 100svh;
    }
  }

  .hero-scrub__left {
    display: contents;
  }

  .hero-scrub__intro {
    order: 1;
    padding-top: clamp(16px, 3vw, 40px);
  }

  .hero-scrub__statement {
    margin-inline: auto;
    text-wrap: balance;
  }

  .hero-scrub__right {
    position: static;
    align-items: flex-start;
    height: calc(var(--canvas-h) + var(--screen-h));
    margin-top: 0;
    /* The arm enters from the screen's right edge, as on desktop. */
    margin-right: calc(-1 * var(--gutter));
  }

  .hero__canvas {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    width: auto;
    max-width: none;
    height: var(--canvas-h);
  }

  .hero-scrub .mission-box {
    order: 2;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
    text-align: left;
  }
}

/* Stacked in landscape (phones turned sideways): a screen-height video is
   narrow, so it goes back beside the left column (statement, then mission
   box), like a small desktop. Its runway is that column's height, so the
   video stays pinned while the column scrolls past, and the statement is
   centered against it to start. */
@media (max-width: 900px) and (orientation: landscape), (max-height: 499px) and (orientation: landscape) {
  .hero-scrub__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    text-align: left;
  }

  .hero-scrub__left {
    display: flex;
    padding-top: 0;
  }

  .hero-scrub__intro {
    display: flex;
    align-items: center;
    min-height: var(--canvas-h);
    padding-top: 0;
  }

  .hero-scrub__statement {
    margin-inline: 0;
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  }

  .hero-scrub__right {
    align-self: stretch;
    height: auto;
  }

  .hero-scrub .mission-box {
    max-width: none;
    margin-inline: 0;
  }
}

/* ==========================================================================
   Mission / description section
   ========================================================================== */
.mission-box {
  background: var(--lavender);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
}

.mission-box .h2,
.mission-box .mission__body,
.mission-box .mission__body strong {
  color: var(--purple);
}

.mission__head {
  max-width: 60ch;
  margin-bottom: 20px;
}

.mission__stat {
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Keep the stat on one line: size it from the box's own width (cqi) so it
   shrinks with the column instead of wrapping. The cap (about its desktop
   size) keeps it from towering over the statement in wider stacked boxes. */
.mission-box {
  container-type: inline-size;
}

.mission-box .mission__stat {
  font-size: min(12.4cqi, 4.25rem); /* "25 Million Pounds" spans the full width of the text lines */
  white-space: nowrap;
}

.mission__body {
  display: grid;
  gap: 20px;
  max-width: 68ch;
  font-size: 18px;
  color: var(--ink-soft);
}

.mission__body strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   Donate + progress section
   ========================================================================== */
.donate {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.donate .h2 {
  color: var(--green);
}

.donate .lead {
  margin: 14px auto 0;
  color: var(--green);
}

.donate__contact {
  margin-bottom: 16px;
  color: var(--purple);
}

.donate__progress {
  margin: 32px 0;
  text-align: left;
}

.donate__amount {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--purple);
}

.donate__of {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--green);
}

.progress-track {
  height: 20px;
  margin: 22px 0 16px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: inset 0 1px 3px rgba(111, 59, 166, 0.14);
}

.progress-fill {
  position: relative;
  height: 100%;
  width: var(--progress, 0%);
  min-width: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-pastel-deep), var(--green));
  transition: width 900ms var(--ease);
}

/* Fleur-de-lis marker at the end of the fill */
.progress-fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  background: url("../fleur-de-lis.svg") center / contain no-repeat;
  transform: translate(50%, -50%);
  filter: drop-shadow(0 2px 3px rgba(30, 132, 73, 0.35));
}

.donate__percent {
  font-size: 15px;
  color: var(--green);
}

.donate__alt {
  margin-top: 16px;
  font-size: 14px;
  color: var(--green);
}

.donate__alt a {
  color: inherit;
  border-bottom: 1px solid currentColor;
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-title {
  font-family: "Besley", Georgia, serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--purple);
  text-align: center;
}

.about-title__accent {
  color: var(--green);
}

/* The next section's own top padding supplies the gap below. */
.about-founders {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: 0;
}

.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(40px, 6vw, 64px);
}

.founder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--lavender);
  border-radius: var(--radius);
  text-align: center;
}

.founder__photo {
  width: 200px;
  height: 200px;
  margin-bottom: 24px;
  border: 4px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
}

.founder__photo--initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: var(--white);
  font-family: "Besley", Georgia, serif;
  font-size: 56px;
  font-weight: 800;
}

.founder__name {
  font-family: "Besley", Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  color: var(--purple);
  text-wrap: balance;
}

.founder__role {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
}

.founder__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.founder__bio {
  max-width: 48ch;
  margin-top: 18px;
  color: var(--purple);
}

/* The About box and partner band swap the homepage's colors: pastel green
   with green text for the story, lavender with purple text for the partner. */
/* With section snapping on, the founders section has to fit one window, so
   its sizes also scale with the window's height and give way on short
   screens (they're unchanged from about 1080px tall up). */
@media (min-width: 901px) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  .snap-sections .about-title { font-size: clamp(2.25rem, min(5.5vw, 9vh), 4.5rem); }
  .snap-sections .founders { margin-top: clamp(24px, 6vh, 64px); }
  .snap-sections .founder { padding: clamp(20px, min(4vw, 4.5vh), 48px); }
  .snap-sections .founder__photo {
    width: clamp(96px, 18.5vh, 200px);
    height: clamp(96px, 18.5vh, 200px);
    margin-bottom: clamp(12px, 2.2vh, 24px);
  }
}

.about-story {
  background: var(--green-pastel);
}

.about-story .h2,
.about-story .mission__body,
.about-story .mission__body strong {
  color: var(--green);
}

.about-partner {
  background: var(--lavender);
}

.about-partner .h2,
.about-partner .lead {
  color: var(--purple);
}

@media (max-width: 767px) {
  .founders {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: 56px 0 40px;
  background: var(--white);
  color: var(--ink);
  border-top: 1px solid var(--purple-tint);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
}

.footer__brand {
  display: inline-block;
}

.footer__logo {
  height: 112px;
  width: auto;
}

.footer__col-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 14px;
}

.footer__links {
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.footer__links a {
  color: var(--ink-soft);
}

.footer__links a:hover {
  color: var(--ink);
}

.footer__tagline {
  margin-top: 14px;
  max-width: 32ch;
  color: var(--ink-soft);
  font-size: 14px;
}

.footer__bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--purple-tint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

.footer__admin {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
}

.footer__admin a {
  color: var(--ink-soft);
  opacity: 0.7;
}

.footer__admin a:hover {
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================================================
   Admin page (admin/index.html)
   ========================================================================== */
.admin {
  background: var(--green-pastel);
}

.admin__main {
  display: grid;
  place-items: center;
  padding: 48px var(--gutter);
}

.admin-card {
  width: 100%;
  max-width: 520px;
  padding: 36px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(43, 34, 48, 0.08);
}

.admin-card__brand {
  display: inline-block;
  margin-bottom: 20px;
}

.admin-card__status {
  color: var(--ink-soft);
}

.admin-form {
  display: grid;
  gap: 20px;
}

.admin-form[hidden] {
  display: none;
}

.admin-form .h3 {
  color: var(--purple);
}

.admin-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-field {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.admin-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font: 400 16px var(--font-body);
}

.admin-field input:focus {
  border-color: var(--purple);
  outline: none;
}

.admin-preview {
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  background: var(--green-pastel);
}

.admin-preview .progress-track {
  margin: 16px 16px 12px 0;
}

.admin-msg {
  min-height: 1.4em;
  font-size: 14px;
  color: var(--ink-soft);
}

.admin-msg:empty {
  min-height: 0;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-actions .btn--ghost:not(:hover) {
  background: transparent;
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 480px) {
  .admin-card {
    padding: 24px 20px;
  }

  .admin-fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}