/* ===========================================================================
   PinkTutuGuy — the whole stylesheet.

   Replaces _ds_bundle.js (2,540 lines of React components transpiled in the
   browser by Babel) with plain CSS. Only the 13 components the site actually
   used are here; Dialog/Tabs/Tooltip/Switch/Radio/Poster/Milestone/UpdatePost
   were in the bundle and used nowhere.

   ⚠️ THE :root BLOCK BELOW IS GENERATED. It is the compiled output of
   brand.tokens.json, and the portal REWRITES IT IN PLACE when the customer
   changes a colour in Brand Studio (apps/api/src/lib/brand-apply.ts treats
   styles.css as the one non-HTML file whose :root it owns). Edit the tokens
   file, not this block — a hand-edit here is lost on the next rebrand.

   Everything after it is hand-written and safe to edit.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Patrick+Hand&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap");

:root {
  --pink: #EE2A7B;
  --pink-50: #FFF0F7;
  --pink-100: #FFD6E9;
  --pink-200: #FFB3D9;
  --pink-300: #FF8DC7;
  --pink-400: #FF5FA8;
  --pink-600: #D81B6A;
  --pink-700: #C2185B;
  --pink-800: #8E1043;
  --yellow: #FFD918;
  --yellow-300: #FFE566;
  --yellow-500: #F2C400;
  --ink: #221A1F;
  --white: #FFFFFF;
  --muted: #6E5F68;
  --slate-300: #AEB8C6;
  --slate-500: #71809B;
  --slate-700: #47526B;
  --green-success: #2FA84F;
  --red-danger: #E03131;
  --font-display: "Luckiest Guy", cursive;
  --font-hand: "Patrick Hand", cursive;
  --font-body: "Nunito", system-ui, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 64px;
  --text-poster: 96px;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  --leading-display: 0.95;
  --leading-tight: 1.15;
  --leading-body: 1.5;
  --tracking-display: 0.01em;
  --tracking-caps: 0.06em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-card: 24px;
  --radius-bubble: 28px;
  --radius-pill: 999px;
  --control-h-sm: 36px;
  --control-h-md: 48px;
  --control-h-lg: 60px;
  --hit-target-min: 44px;
  --border-comic: 2px solid var(--ink);
  --border-comic-thick: 3px solid var(--ink);
  --shadow-comic: 4px 4px 0 var(--ink);
  --shadow-comic-sm: 2px 2px 0 var(--ink);
  --shadow-comic-pink: 4px 4px 0 var(--pink-700);
  --shadow-pop: 6px 6px 0 var(--pink-200);
  --shadow-sticker: 0 0 0 5px var(--white), 6px 8px 14px rgba(34,26,31,.25);
  --shadow-soft: 0 8px 24px rgba(238,42,123,.18);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --duration-quick: 150ms;
  --duration-bounce: 280ms;
  --bg-sunburst: repeating-conic-gradient(from 0deg at 50% 50%, var(--pink-200) 0deg 9deg, var(--pink-100) 9deg 18deg);
  --bg-halftone: radial-gradient(var(--pink-200) 18%, transparent 19%);
  --bg-halftone-size: 14px 14px;
  --primary: var(--pink);
  --surface: var(--pink-50);
  --text: var(--ink);
  --accent: var(--yellow);
  --heading-font: var(--font-display);
  --body-font: var(--font-body);
  --surface-page: var(--pink-50);
  --surface-card: var(--white);
  --surface-raised: var(--pink-100);
  --surface-accent: var(--pink);
  --surface-highlight: var(--yellow);
  --surface-sky: var(--slate-500);
  --text-display: var(--pink);
  --text-body: var(--ink);
  --text-muted: var(--muted);
  --text-on-accent: var(--white);
  --text-on-highlight: var(--ink);
  --text-link: var(--pink-600);
  --accent-hover: var(--pink-600);
  --accent-press: var(--pink-700);
  --border-ink: var(--ink);
  --focus-ring: var(--pink-300);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--surface);
  font-family: var(--body-font);
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-link); }
a:hover { color: var(--pink-700); }
/* `height: auto` is NOT optional here. Every <img> carries width/height
   attributes so the browser can reserve space before the file loads (no layout
   shift) — but those attributes are presentational hints, so an image whose CSS
   sets only `width: 100%` takes the ATTRIBUTE's height literally and stretches.
   A square 1012x1012 illustration rendered 354x1018 until this line existed.
   Rules that deliberately crop (.news img, .photo--portrait) set their own
   height and win on specificity. */
img { max-width: 100%; height: auto; }

/* One visible focus style for everything. The comic look is high-contrast
   already; the ring has to be too, or it disappears against the pink. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Respect the OS setting. Every animation here is decorative, so there is
   nothing to lose by turning them all off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5); }
.stack { display: flex; flex-direction: column; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Page shell + headings  (was PageShell in Site.jsx)
   --------------------------------------------------------------------------- */

.page { max-width: 1180px; margin: 0 auto; padding: var(--space-7) var(--space-5) 0; }

.page-title {
  font-family: var(--heading-font);
  font-size: 56px;
  line-height: var(--leading-display);
  color: var(--text-display);
  text-shadow: 4px 4px 0 var(--pink-100);
  margin: 0 0 var(--space-2);
}

.page-sub {
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  margin: 0 0 30px;
  color: var(--text-body);
}

.section-title {
  font-family: var(--heading-font);
  font-size: 38px;
  color: var(--text-body);
  margin: 0 0 var(--space-5);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  min-height: var(--hit-target-min);
  padding: 0 var(--space-5);
  border: var(--border-comic);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text-on-accent);
  font-family: var(--body-font);
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-comic-sm);
  transition: transform var(--duration-quick) var(--ease-spring),
              box-shadow var(--duration-quick) var(--ease-out),
              background var(--duration-quick) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); transform: translate(-1px, -1px); box-shadow: var(--shadow-comic); color: var(--text-on-accent); }
.btn:active { background: var(--accent-press); transform: translate(1px, 1px); box-shadow: none; }

.btn--sm { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-lg); }

.btn--secondary { background: var(--surface-card); color: var(--text-body); }
.btn--secondary:hover { background: var(--pink-100); color: var(--text-body); }

.btn--highlight { background: var(--accent); color: var(--text-on-highlight); }
.btn--highlight:hover { background: var(--yellow-500); color: var(--text-on-highlight); }

/* Round icon button — the footer socials. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit-target-min);
  height: var(--hit-target-min);
  border: var(--border-comic);
  border-radius: 50%;
  background: var(--surface-card);
  font-size: var(--text-lg);
  cursor: pointer;
  box-shadow: var(--shadow-comic-sm);
  text-decoration: none;
  transition: transform var(--duration-quick) var(--ease-spring);
}
.icon-btn:hover { transform: translate(-1px, -1px) rotate(-6deg); }

/* ---------------------------------------------------------------------------
   Form controls
   --------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label { font-weight: var(--weight-bold); font-size: var(--text-sm); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--hit-target-min);
  padding: 0 var(--space-4);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: var(--body-font);
  font-size: var(--text-md);
  color: var(--text-body);
}
.textarea { padding: var(--space-3) var(--space-4); min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }

/* Native select keeps its own arrow — restyling it cross-browser costs more
   than it returns, and the border already matches. */
.select { height: var(--control-h-md); }

.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.checkbox input {
  flex: none;
  width: 22px; height: 22px;
  margin: 2px 0 0;
  accent-color: var(--surface-accent);
  cursor: pointer;
}
.checkbox span { font-size: var(--text-sm); line-height: var(--leading-body); }

/* THE HONEYPOT. Hidden from humans, left in the DOM for bots to fill in.
   Not `display:none` — some bots skip those. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status { font-weight: var(--weight-bold); font-size: var(--text-sm); min-height: 1.5em; }
.form-status[data-state="error"] { color: var(--red-danger); }
.form-status[data-state="ok"] { color: var(--green-success); }

/* ---------------------------------------------------------------------------
   Cards, badges, tags
   --------------------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic-sm);
  padding: var(--space-5);
}
.card--flat { box-shadow: none; }
.card--raised { background: var(--surface-raised); box-shadow: none; }
.card--highlight { background: var(--yellow-300); box-shadow: none; }

.badge {
  display: inline-block;
  padding: 4px 12px;
  border: var(--border-comic);
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  color: var(--text-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  white-space: nowrap;
}
.badge--yellow { background: var(--surface-highlight); color: var(--text-on-highlight); }
.badge--white { background: var(--surface-card); color: var(--text-body); }

.tag {
  display: inline-block;
  padding: 2px 10px;
  border: var(--border-comic);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* ---------------------------------------------------------------------------
   Stat tiles
   --------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 180px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-accent);
  color: var(--text-on-accent);
  border: var(--border-comic-thick);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic-sm);
}
.stat--yellow { background: var(--surface-highlight); color: var(--text-on-highlight); }
.stat--white { background: var(--surface-card); color: var(--text-body); }
.stat__emoji { font-size: var(--text-xl); }
.stat__value { font-family: var(--heading-font); font-size: var(--text-2xl); line-height: 1; }
.stat__label { font-size: var(--text-sm); font-weight: var(--weight-bold); text-align: center; }

.stat-row { display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap; }

/* Hand-placed jauntiness. The original tilted every tile inline with a random
   -2…2deg; three reusable classes give the same look without inline styles,
   which the portal's colour guard scans and the AI editor has to rewrite. */
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(1.5deg); }
.tilt-s { transform: rotate(-1deg); }

/* ---------------------------------------------------------------------------
   Speech bubble
   --------------------------------------------------------------------------- */

.bubble {
  position: relative;
  background: var(--surface-card);
  border: var(--border-comic-thick);
  border-radius: var(--radius-bubble);
  box-shadow: var(--shadow-comic-sm);
  padding: var(--space-5);
}
.bubble::after,
.bubble::before {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 42px;
  border: 10px solid transparent;
  border-top-color: var(--surface-card);
  border-bottom: 0;
}
/* The ink outline of the tail: a second, larger triangle sitting behind it. */
.bubble::before {
  bottom: -22px;
  left: 39px;
  border-width: 13px;
  border-top-color: var(--ink);
  border-bottom: 0;
}
.bubble__quote { font-family: var(--font-hand); font-size: 22px; line-height: 1.4; }
.bubble__who { font-weight: var(--weight-extrabold); margin-top: var(--space-2); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   Progress meter — the fundraising total
   --------------------------------------------------------------------------- */

.meter { display: flex; flex-direction: column; gap: var(--space-2); }
.meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.meter__label { font-weight: var(--weight-extrabold); font-size: var(--text-md); }
.meter__value { font-family: var(--heading-font); font-size: var(--text-xl); color: var(--text-display); }
.meter__track {
  height: 26px;
  border: var(--border-comic);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  background: var(--surface-accent);
  border-right: var(--border-comic);
  /* width is set inline per-page — it is the one number that changes */
}

/* ---------------------------------------------------------------------------
   Site chrome — nav + footer
   --------------------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-card);
  border-bottom: var(--border-comic-thick);
  box-shadow: 0 4px 0 var(--pink-200);
}
.site-nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.site-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-nav__logo { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--surface-accent); }
.site-nav__word {
  font-family: var(--heading-font);
  font-size: 26px;
  color: var(--text-display);
  text-shadow: 2px 2px 0 var(--pink-100);
  white-space: nowrap;
}
.site-nav__links { display: flex; gap: var(--space-1); flex: 1; flex-wrap: wrap; }
.site-nav__link {
  text-decoration: none;
  font-weight: var(--weight-extrabold);
  font-size: 15px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  color: var(--pink-700);
}
.site-nav__link:hover { background: var(--pink-100); color: var(--pink-700); }
/* aria-current is the accessible source of truth for "you are here"; styling
   from it means the two can never disagree. */
.site-nav__link[aria-current="page"] {
  background: var(--surface-accent);
  color: var(--text-on-accent);
  border-color: var(--border-ink);
  box-shadow: var(--shadow-comic-sm);
}

.site-footer {
  background: var(--surface-accent);
  border-top: var(--border-comic-thick);
  margin-top: var(--space-8);
  color: var(--text-on-accent);
}
.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-6);
}
.site-footer__slogan {
  font-family: var(--heading-font);
  font-size: var(--text-xl);
  line-height: 1.25;
  text-shadow: 3px 3px 0 var(--pink-700);
}
.site-footer__who { font-family: var(--font-hand); font-size: var(--text-lg); opacity: .95; }
.site-footer h2 {
  font-size: 15px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin: 0;
}
.site-footer__socials { display: flex; gap: 10px; }
.site-footer a { color: var(--text-on-accent); }
.site-footer__legal {
  background: var(--pink-700);
  padding: 14px var(--space-5);
  font-size: var(--text-xs);
  text-align: center;
  line-height: var(--leading-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ---------------------------------------------------------------------------
   Home hero
   --------------------------------------------------------------------------- */

.hero { background: var(--bg-sunburst); border-bottom: var(--border-comic-thick); overflow: hidden; }
.hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px var(--space-5) var(--space-7);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero__title {
  font-family: var(--heading-font);
  font-size: 76px;
  line-height: var(--leading-display);
  margin: 0;
  color: var(--text-display);
  -webkit-text-stroke: 2.5px var(--ink);
  text-shadow: 7px 7px 0 var(--white);
}
.hero__sub { font-family: var(--font-hand); font-size: 28px; margin: 0; line-height: 1.3; }
.hero__art { position: relative; justify-self: center; }
.hero__art img {
  width: 100%;
  max-width: 430px;
  display: block;
  border-radius: 28px;
  border: 6px solid var(--ink);
  box-shadow: var(--shadow-sticker);
  transform: rotate(2deg);
}
.hero__sticker { position: absolute; font-size: 52px; filter: drop-shadow(3px 3px 0 rgba(34,26,31,.3)); }
.hero__sticker--tl { top: -18px; left: -14px; transform: rotate(-12deg); }
.hero__sticker--br { bottom: -10px; right: -8px; font-size: 40px; transform: rotate(10deg); }

/* The meter card that overlaps the hero's bottom edge. */
.hero-meter { max-width: 1180px; margin: -34px auto 0; padding: 0 var(--space-5); position: relative; z-index: 5; }
.hero-meter__card {
  background: var(--surface-card);
  border: var(--border-comic-thick);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-comic);
  padding: 22px 28px;
}

/* Layout helpers the pages use instead of inline styles. Inline styles are what
   the portal's colour guard has to scan and the AI editor has to rewrite, so the
   fewer of them the site carries, the better both behave. */

.page > section + section { margin-top: var(--space-7); }
.page > section:last-child { margin-bottom: var(--space-7); }

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.news__badge { align-self: flex-start; }
.news__title { margin: 0; }
.news__text { margin: 0; }

.transparency__copy { gap: var(--space-3); }
.transparency__head { margin: 0; }
.transparency p { margin: 0; }

.bubble { margin: 0; }

.site-footer__brand { gap: var(--space-2); }
.site-footer__col { gap: 10px; }
.site-footer__slogan { margin: 0; }
.site-footer__note { font-size: 13px; opacity: .9; }
.site-footer__credit { opacity: .85; }

.signup { display: flex; flex-direction: column; gap: 10px; }
.signup .checkbox span { font-size: var(--text-xs); }

/* ---------------------------------------------------------------------------
   News / update cards (Home)
   --------------------------------------------------------------------------- */

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.news { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.news img { width: 100%; height: 170px; object-fit: cover; border-bottom: var(--border-comic); display: block; }
.news__body { padding: var(--space-4) 18px; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.news__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.news__text { font-size: var(--text-sm); flex: 1; }

/* ---------------------------------------------------------------------------
   Event cards
   --------------------------------------------------------------------------- */

.event {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--space-4);
  background: var(--surface-card);
  border: var(--border-comic-thick);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic-sm);
  padding: 18px;
  align-items: start;
}
.event__date {
  text-align: center;
  background: var(--surface-accent);
  color: var(--text-on-accent);
  border: var(--border-comic);
  border-radius: 14px;
  box-shadow: var(--shadow-comic-sm);
  padding: var(--space-2) 0;
  transform: rotate(-2deg);
}
.event__month { font-size: var(--text-sm); font-weight: var(--weight-black); letter-spacing: var(--tracking-caps); }
.event__day { font-family: var(--heading-font); font-size: var(--text-2xl); line-height: 1; }
.event__body { display: flex; flex-direction: column; gap: var(--space-2); }
.event__title { font-family: var(--heading-font); font-size: var(--text-xl); color: var(--text-display); line-height: 1.1; }
.event__meta { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-bold); }

.events { display: flex; flex-direction: column; gap: var(--space-5); max-width: 820px; }
.event__title { margin: 0; }
.event__meta { margin: 0; }
.event__body > p { margin: 0; }
.event__foot { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding-top: var(--space-1); }
.event-notes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: var(--space-1) 2px; }

/* ---------------------------------------------------------------------------
   Timeline (About)
   --------------------------------------------------------------------------- */

.mile { display: flex; gap: var(--space-4); align-items: flex-start; }
.mile__year {
  flex: none;
  width: 86px;
  text-align: center;
  background: var(--surface-accent);
  color: var(--text-on-accent);
  border: var(--border-comic);
  border-radius: 14px;
  box-shadow: var(--shadow-comic-sm);
  padding: var(--space-2) 0;
  transform: rotate(-2deg);
}
.mile__year b { font-family: var(--heading-font); font-size: 22px; line-height: 1; display: block; font-weight: normal; }
.mile__body {
  flex: 1;
  background: var(--surface-card);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic-sm);
  padding: 14px 18px;
}

/* About — timeline + sticky aside */

.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; }

/* A genuine <ol>: these are dated events in order, and a screen reader saying
   "list, 4 items" is the structure a sighted reader gets from the year blocks. */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }

.about-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; }
/* Shared photo treatment — the die-cut sticker look, used on About and Why.
   Was a one-off `.about-photo`; three pages wanting the same thing is the point
   at which it stops being one-off. */
.photo-wrap { position: relative; }
.photo {
  width: 100%;
  display: block;
  border-radius: var(--radius-card);
  border: 5px solid var(--ink);
  box-shadow: var(--shadow-sticker);
}
.photo--tilt-r { transform: rotate(1.5deg); }
.photo--tilt-l { transform: rotate(-1.5deg); }
.photo--portrait { height: 300px; object-fit: cover; }

.photo-sticker {
  position: absolute;
  font-size: 40px;
  filter: drop-shadow(3px 3px 0 rgba(34,26,31,.3));
  pointer-events: none;
}
.photo-sticker--tl { top: -16px; left: -12px; transform: rotate(-12deg); }
.photo-sticker--tr { top: -16px; right: -10px; font-size: 44px; transform: rotate(10deg); }

.photo-caption {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  text-align: center;
  margin: -12px 0 0;
}
.about-who { margin: 6px 0 var(--space-3); font-size: var(--text-sm); }

/* Match the original's tight 6px gap under each entry's title — the browser
   default 1em pushes the timeline noticeably longer than the design. */
.mile__body b { font-size: 17px; }
.mile__body p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }

/* Why — the long-form page. Narrower than the others on purpose: this is the
   one page people actually READ, and a 1180px measure is too wide for prose. */

.why { display: flex; flex-direction: column; gap: var(--space-7); max-width: 980px; }
.why-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.why-grid--flip { grid-template-columns: 1fr 1.3fr; }
.why-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; }

.prose { gap: 14px; }
.prose p { margin: 0; font-size: 16.5px; line-height: 1.65; }
.prose__hand { font-family: var(--font-hand); font-size: var(--text-xl); }
.prose__badge { align-self: flex-start; }

.dad-card {
  background: var(--surface-card);
  border: var(--border-comic);
  border-radius: 20px;
  box-shadow: var(--shadow-comic-sm);
  padding: 20px var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dad-card p { margin: 0; font-size: 16.5px; line-height: 1.65; }
.dad-head {
  font-family: var(--heading-font);
  font-size: var(--text-xl);
  color: var(--text-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

.card__note { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; }

/* The ask — the site's one direct request. */
.ask {
  background: var(--surface-card);
  border: var(--border-comic-thick);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-comic-pink);
  padding: var(--space-6) var(--space-6) 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.ask__head { font-family: var(--heading-font); font-size: 30px; color: var(--text-display); line-height: 1.1; margin: 0; }
.ask__body { max-width: 640px; margin: 0; font-size: 16.5px; line-height: 1.65; }
.ask__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ask__opens { font-size: var(--text-xs); font-weight: var(--weight-bold); }
.ask__thanks { font-family: var(--font-hand); font-size: var(--text-lg); margin: 0; }
.ask__slogan {
  font-family: var(--heading-font);
  font-size: 22px;
  color: var(--text-display);
  line-height: 1.5;
  margin: 6px 0 0;
}
.ask__sign { font-size: 15px; font-weight: var(--weight-extrabold); }

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

.gallery { columns: 3; column-gap: 22px; max-width: 1180px; }
.gallery figure { margin: 0 0 22px; break-inside: avoid; }
.gallery__frame {
  background: var(--surface-card);
  border: var(--border-comic-thick);
  border-radius: 18px;
  box-shadow: var(--shadow-sticker);
  padding: 10px;
}
.gallery img { width: 100%; display: block; border-radius: 10px; }
.gallery figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-1) 2px;
}
.gallery figcaption span { font-family: var(--font-hand); font-size: 17px; }

/* Contact */

.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: start; max-width: 1020px; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-aside { display: flex; flex-direction: column; gap: 14px; }

.social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.social-list a { font-weight: var(--weight-extrabold); font-size: 15px; text-decoration: none; }
.social-list a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Transparency block — "so who pays? me."  Appears on Home and Why.
   --------------------------------------------------------------------------- */

.transparency {
  background: var(--surface-card);
  border: var(--border-comic-thick);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-comic-pink);
  padding: var(--space-6) var(--space-6) var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.transparency__head {
  font-family: var(--heading-font);
  font-size: var(--text-2xl);
  color: var(--text-display);
  line-height: 1;
}

/* The big pink call-to-action panel, moved here from the old donate page. */
.callout {
  background: var(--bg-sunburst);
  border: var(--border-comic-thick);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-comic);
  padding: 44px var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.callout__head {
  font-family: var(--heading-font);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 5px 5px 0 var(--surface-accent);
}
.callout__note {
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  background: linear-gradient(transparent 10%, var(--surface-highlight) 11% 89%, transparent 90%);
  padding: 0 10px;
}

/* 404 */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-4) var(--space-9);
  max-width: 760px;
  margin: 0 auto;
}
.notfound__code {
  font-family: var(--heading-font);
  font-size: var(--text-poster);
  line-height: 1;
  color: var(--primary);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 8px 8px 0 var(--pink-100);
}
.notfound__head {
  font-family: var(--heading-font);
  font-size: var(--text-2xl);
  color: var(--text-body);
  line-height: 1.15;
  margin: 0;
}
.notfound__body { font-family: var(--font-hand); font-size: var(--text-xl); margin: 0; }
.notfound__links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }
.notfound__note { font-size: var(--text-sm); margin: var(--space-2) 0 0; }

/* ---------------------------------------------------------------------------
   Responsive.

   The original was inline-styled at a fixed 1280×800 and had NO breakpoints —
   every grid was a hard `1.1fr 1fr`, so the whole site was unusable on a
   phone. Most of this site's traffic arrives from Facebook and Instagram
   links, which is to say: from phones. Fixing that is the single biggest
   practical win in this conversion.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__inner,
  .transparency,
  .about-grid,
  .contact-grid,
  .why-grid,
  .why-grid--flip,
  .site-footer__inner { grid-template-columns: 1fr; }
  .why-aside { position: static; }
  /* Photo first, then the words about it — the same order the desktop eye takes. */
  .why-grid--flip .photo-wrap { order: -1; }
  /* Sticky is meaningless once it is the last thing on the page rather than a
     column beside the content — it would just pin the photo over the footer. */
  .about-aside { position: static; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
  .hero__title { font-size: 56px; }
  .page-title { font-size: 44px; }
  .hero__art { order: -1; }
}

@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .gallery { columns: 1; }
  .hero__title { font-size: 40px; -webkit-text-stroke-width: 2px; text-shadow: 4px 4px 0 var(--white); }
  .hero__sub { font-size: 22px; }
  .page-title { font-size: 34px; }
  .section-title { font-size: 28px; }
  .page { padding-top: var(--space-5); }
  /* The nav is the one thing that genuinely breaks at this width. `flex: 1` leaves
     the link row too narrow to fit more than one item once the brand has taken the
     first line, so six links become six rows — ~630px of chrome before the visitor
     sees anything. Giving the row its own full-width line lets them wrap 3-and-3.
     Caught by looking at it; every computed-style check passed. */
  .site-nav__inner { gap: var(--space-2); padding: var(--space-2) var(--space-4); }
  .site-nav__links {
    flex: 1 0 100%;
    order: 3;
    justify-content: center;
    gap: 2px;
  }
  .site-nav__link { padding: 6px 10px; font-size: 14px; }
  .site-nav__word { font-size: 20px; }
  .site-nav__logo { width: 38px; height: 38px; }
  /* Brand left, Donate right, links underneath. */
  .site-nav__brand { flex: 1; }
  .event { grid-template-columns: 1fr; }
  .event__date { width: 92px; }
  /* The timeline's fixed 86px year block leaves the text ~200px wide at this
     size, so every entry wraps into a very tall column. Stacking the year as a
     compact pill above gives the body the full width back. */
  .mile { flex-direction: column; gap: var(--space-2); }
  .mile__year {
    width: auto;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 14px;
  }
  .mile__year b { display: inline; }
  .ask { padding: var(--space-5) var(--space-4) var(--space-6); }
  .ask__head { font-size: 22px; }
  .ask__actions .btn { width: 100%; }
  .notfound__code { font-size: var(--text-4xl); -webkit-text-stroke-width: 2px; text-shadow: 5px 5px 0 var(--pink-100); }
  .notfound__head { font-size: var(--text-xl); }
  .notfound__links .btn { width: 100%; }
  .stat { min-width: 140px; flex: 1; }
  /* Tilt reads as "broken layout" once things are stacked and full-width. */
  .tilt-l, .tilt-r, .tilt-s { transform: none; }
}

/* Print: the comic shadows waste toner and the nav is meaningless on paper. */
@media print {
  .site-nav, .site-footer__socials, .btn { display: none; }
  body { background: var(--white); }
  * { box-shadow: none !important; }
}