/* Hack Club's type, at Sean's request. Their own fonts are paid and licensed to Hack Club only, so these are the
   closest free (OFL) matches: Epunda Slab for headings, like their Zarathustra, and Kumbh Sans for everything else,
   like their Phantom Sans. Each is one variable file. */
@font-face { font-family: "Epunda Slab"; src: url("/fonts/epunda-slab.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Kumbh Sans"; src: url("/fonts/kumbh-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Blues, grays and white from the palette Sean sent on 2026-10-09 (sky blues #C2CEE0, #A5BBD3, #85A1C8, #6787B6 and
   grays #9BA2AE, #7F868C, #5D6162, #242424). It replaced the light green. --green keeps its name but is now the
   blue accent, a shade darker than #6787B6 so white button text stays readable. */
:root {
  --bg: #FFFFFF;
  --mint: #EAEEF4;        /* light blue bands */
  --surface: #FFFFFF;     /* cards on white */
  --raised: #FFFFFF;      /* cards on light blue */
  --tint: #D3DCE9;        /* highlights and the progress track */
  --line: #D5DCE6;
  --line-strong: #A5BBD3;
  --text: #242424;        /* near-black ink */
  --muted: #5D6162;
  --green: #5576A8;       /* buttons and accents (blue) */
  --green-dark: #44628F;
  --error: #B42318;
  --heart: #D23F5E;       /* the like button once liked */
  --font: "Kumbh Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Epunda Slab", Georgia, serif;
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration-color: var(--green); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
img { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* Header */
header.site { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
/* Full width like hackclub.com: logo and name at the far left, the button at the far right, and the links
   centered in the middle of the page (Sean, 2026-10-08) */
header.site .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 76px; padding: 0 clamp(20px, 3vw, 40px); }
header.site .brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--text); text-decoration: none; }
header.site .brand img { display: block; height: 40px; width: auto; }
header.site .brand span { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; white-space: nowrap; }
/* The current page is highlighted with a pill instead of an underline */
nav.nav { display: flex; gap: 6px; font-size: 18px; font-weight: 450; }
nav.nav a { color: var(--muted); text-decoration: none; padding: 7px 14px; border-radius: 999px; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
nav.nav a:hover { color: var(--text); background: var(--mint); }
nav.nav a[aria-current="page"] { color: var(--text); background: var(--tint); }
header.site .end { justify-self: end; display: flex; align-items: center; gap: 16px; }
header.site .who { color: var(--muted); font-size: 15px; }
/* Desktop: the menu wrapper steps aside so the links and the button sit in the header grid */
header.site .menu { display: contents; }
header.site .menu-toggle { display: none; }
/* Phones, tablets and small laptops (five menu links since the Donate page): logo on the left and a three-line button on the right that opens a panel with the
   links and "Join the community", like hackclub.com (Sean, 2026-10-09) */
@media (max-width: 1120px) {
  header.site .bar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 20px; }
  header.site .brand { gap: 9px; }
  header.site .brand img { height: 34px; }
  header.site .brand span { font-size: 21px; }
  header.site .menu-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 46px; height: 46px; min-height: 0; margin: 0 -8px 0 auto; padding: 0;
    background: none; border: 0; border-radius: 14px; color: var(--text); cursor: pointer; transform: none;
  }
  header.site .menu-toggle:hover { background: var(--mint); border: 0; color: var(--text); transform: none; }
  header.site .menu-toggle span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  header.site.open .menu-toggle span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  header.site.open .menu-toggle span:nth-child(2) { opacity: 0; }
  header.site.open .menu-toggle span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  header.site .menu {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    padding: 10px 20px 22px; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(36, 44, 56, .3);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  }
  header.site.open .menu { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
  nav.nav { flex-direction: column; gap: 2px; font-size: 20px; }
  nav.nav a { padding: 12px 16px; }
  nav.nav a[href="/about/"] { order: -1; } /* About first in the three-line menu (Sean, 2026-10-09) */
  header.site .end { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
  header.site .end .button { justify-content: center; font-size: 17px; min-height: 50px; }
}
@media (max-width: 380px) {
  header.site .brand img { height: 30px; }
  header.site .brand span { font-size: 18px; }
}

/* Type */
h1, h2, h3 { font-family: var(--serif); font-weight: 450; letter-spacing: 0; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(42px, 7.5vw, 80px); line-height: 1; }
h2 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 14px; }
h3 { font-size: 24px; line-height: 1.2; margin-bottom: 8px; }
p { margin: 0 0 14px; }
.lead { color: var(--muted); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; max-width: 640px; margin: 18px 0 30px; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
.small, .fine { color: var(--muted); font-size: 14px; }
.fine { margin-top: 16px; }
ul, ol { padding-left: 22px; margin: 0 0 14px; }
li { margin-bottom: 8px; }

/* Sections */
.band { padding: clamp(64px, 9vw, 112px) 0; }
.band.alt { background: var(--mint); }
.band.tight { padding: clamp(48px, 6vw, 72px) 0; }
.band-head { max-width: 680px; margin-bottom: 36px; }
.band-head p { color: var(--muted); font-size: 18px; }
.center { text-align: center; }
.center .band-head, .center .lead { margin-left: auto; margin-right: auto; }

/* Buttons */
button, .button {
  font: 500 18px/1 var(--font); border-radius: 999px; padding: 15px 26px; cursor: pointer;
  border: 2px solid var(--green); background: var(--green); color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  transition: transform .15s ease, background-color .15s ease;
}
button:hover, .button:hover { transform: translateY(-2px) scale(1.02); background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.button.ghost, button.secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button.ghost:hover, button.secondary:hover { background: transparent; border-color: var(--green); color: var(--text); }
.button.small { font-size: 16px; min-height: 42px; padding: 10px 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.center .actions { justify-content: center; }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); font-weight: 400; font-size: inherit; transform: none; }
button.link:hover { transform: none; background: none; color: var(--text); }
.arrow { text-decoration: none; font-weight: 600; }
.arrow::after { content: "\00a0→"; }
.arrow:hover { text-decoration: underline; }

/* Home hero: centered like hackclub.com. The three paper cards sit off to the sides on wide screens, the way
   Hack Club's photos do, and stack under the join box on smaller ones. */
.hero { position: relative; padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 112px); overflow: hidden; text-align: center; }
.hero-main { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero .news { display: inline-block; color: var(--muted); font-size: 18px; font-weight: 400; text-decoration: none; margin: 0 0 22px; }
.hero .news::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); margin-right: 9px; vertical-align: 2px; }
@media (max-width: 600px) { .hero .news { font-size: 15px; } }
.hero .news:hover { color: var(--text); }
.hero h1 { font-size: clamp(44px, 8vw, 88px); max-width: 15ch; margin: 0 auto; }
.hero h1 .glow { display: block; background: linear-gradient(90deg, #44628F, #6787B6 45%, #5D6162); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin: 22px auto 30px; }
.hero form.join { max-width: 600px; margin: 0 auto; }
.hero .fine { display: inline-block; font-style: italic; font-size: 15px; border: 1px solid var(--line); border-radius: 22px; padding: 8px 18px; margin: 16px auto 0; }
.hero .fine a { color: var(--green-dark); }
/* Smaller email box and age line on phones */
@media (max-width: 600px) {
  .hero form.join { max-width: 300px; padding: 4px; }
  .hero form.join input { min-height: 40px; padding: 0 14px; }
  .hero form.join button { min-height: 40px; padding: 0 18px; font-size: 15px; }
  .hero .fine { max-width: 300px; font-size: 12px; line-height: 1.45; padding: 5px 12px; border-radius: 14px; margin-top: 12px; }
}
.stack { display: none; flex-direction: column; gap: 14px; background: var(--mint); border-radius: 28px; padding: 32px 24px; max-width: 440px; margin: 48px auto 0; text-align: left; }
/* The cards are stickers (Sean, 2026-10-10: "i don't like these leaves change them and keep the theme with the other
   stickers"): a pale card with a thick white die-cut edge, a little shine and a soft shadow, with one of the site's
   stickers stuck on a corner. Since 2026-10-13 they hold real lines from our interviews, each linking to its article
   (Sean: "i think htose are very generic messages ... add some of the quotes given by the interviews"). */
.paper {
  --bg: #FFF1C2; --icon: none;
  position: relative; display: block; color: var(--text); font-size: 14px; line-height: 1.5; padding: 18px 22px;
  text-decoration: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 46%), var(--bg);
  border: 6px solid #FFFFFF; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(60, 36, 16, .06), 0 3px 6px rgba(48, 28, 12, .16), 0 18px 28px -12px rgba(48, 28, 12, .42);
  transition: translate .2s ease, box-shadow .2s ease;
}
.paper:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(60, 36, 16, .06), 0 6px 10px rgba(48, 28, 12, .18), 0 24px 34px -12px rgba(48, 28, 12, .46); }
.paper:focus-visible { outline: 3px solid #C2CEE0; outline-offset: 3px; }
.paper::after {
  content: ""; position: absolute; top: -28px; right: -20px; width: 60px; height: 60px; rotate: 14deg; pointer-events: none;
  background: var(--icon) center / contain no-repeat;
}
.paper.p1::after, .paper.p3::after, .paper.p5::after, .paper.p7::after { right: auto; left: -20px; rotate: -12deg; }
.paper.p1 { --bg: #FFF1C2; --icon: url("/img/season/lightbulb.svg"); transform: rotate(-3deg); }
.paper.p2 { --bg: #DFF0E6; --icon: url("/img/season/seedling.svg"); transform: rotate(2deg); }
.paper.p3 { --bg: #FDE6D8; --icon: url("/img/season/barn.svg"); transform: rotate(-1.5deg); }
.paper.p4 { --bg: #E4F2DA; --icon: url("/img/season/neighbors.svg"); }
.paper.p5 { --bg: #E2ECF8; --icon: url("/img/season/envelope.svg"); }
.paper.p6 { --bg: #E9E3F8; --icon: url("/img/season/mappin.svg"); }
.paper.p7 { --bg: #FBE0E6; --icon: url("/img/season/bubbles.svg"); }
.paper.p8 { --bg: #FFF6D8; --icon: url("/img/season/notebook.svg"); }
.paper .tag { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(36, 36, 36, .64); margin-bottom: 6px; padding-right: 30px; }
.paper.p1 .tag, .paper.p3 .tag, .paper.p5 .tag, .paper.p7 .tag { padding: 0 0 0 30px; }
.paper p { font-family: var(--serif); font-size: 18px; font-weight: 450; line-height: 1.3; margin: 0; }
.paper .who { display: block; margin-top: 10px; font-size: 13px; line-height: 1.35; color: rgba(36, 36, 36, .7); border-left: 3px solid var(--green); padding-left: 8px; }
.paper .who b { display: block; font-weight: 600; color: var(--text); }
.hero .stack .extra { display: none; }
@media (min-width: 1360px) {
  .hero { padding-bottom: 136px; }
  .hero .stack { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; background: none; border-radius: 0; display: block; pointer-events: none; }
  .on-hero .hero .stack { top: var(--hdr); }
  /* Cards scattered down both sides like the photos on hackclub.com (Sean: "a whole bunch more of these on the
     sides"). --l and --r are the centers of the empty space beside the 760px column; tops are a share of the
     space under the header, so the pile stretches with the screen. Odd cards go left, even ones right. */
  .hero .stack { --l: calc((50% - 380px) / 2); --r: calc((50% - 380px) / 2); }
  .hero .stack .paper { position: absolute; width: 300px; margin: 0; padding: 16px 20px; font-size: 13px; pointer-events: auto; }
  .hero .stack .p4, .hero .stack .p5, .hero .stack .p7 { width: 330px; }
  .hero .stack .paper::after { width: 54px; height: 54px; top: -24px; }
  .hero .stack .paper p { font-size: 16px; }
  .hero .stack .extra { display: block; }
  .hero .stack .p1 { left: max(18px, calc(var(--l) - 160px)); top: 3%; transform: rotate(-6deg); }
  .hero .stack .p3 { left: max(40px, calc(var(--l) - 110px)); top: 30%; transform: rotate(4deg); }
  .hero .stack .p5 { left: max(18px, calc(var(--l) - 170px)); top: 58%; transform: rotate(-3deg); }
  .hero .stack .p2 { right: max(24px, calc(var(--r) - 150px)); top: 5%; transform: rotate(5deg); }
  .hero .stack .p4 { right: max(24px, calc(var(--r) - 160px)); top: 30%; transform: rotate(-4deg); }
  .hero .stack .p6 { right: max(30px, calc(var(--r) - 130px)); top: 63%; transform: rotate(3deg); }
  .hero .stack .p7, .hero .stack .p8 { display: none; }
}
/* Wider screens have room for a fourth card on each side */
@media (min-width: 1680px) {
  .hero .stack .p1 { left: max(18px, calc(var(--l) - 215px)); }
  .hero .stack .p3 { left: calc(var(--l) - 20px); top: 26%; }
  .hero .stack .p5 { left: max(18px, calc(var(--l) - 210px)); top: 51%; }
  .hero .stack .p7 { display: block; left: calc(var(--l) + 30px); top: 77%; transform: rotate(-2deg); }
  .hero .stack .p2 { right: calc(var(--r) - 80px); top: 4%; }
  .hero .stack .p4 { right: max(24px, calc(var(--r) - 230px)); top: 26%; }
  .hero .stack .p6 { right: calc(var(--r) + 10px); top: 55%; }
  .hero .stack .p8 { display: block; right: max(24px, calc(var(--r) - 200px)); top: 79%; transform: rotate(-5deg); }
}
/* On short screens drop the bottom card on each side so the pile doesn't overlap */
@media (min-width: 1360px) and (max-height: 820px) {
  .hero .stack .p7, .hero .stack .p8 { display: none; }
}

/* Cards */
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; } }
/* Short cards that stay two across on phones */
@media (max-width: 600px) { .grid.two.keep { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .grid.keep .card { padding: 18px 16px; } .grid.keep h3 { font-size: 19px; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.band.alt .card { background: var(--raised); }
.card > :last-child { margin-bottom: 0; }
.card p { color: var(--muted); }
.card .num { display: block; font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-bottom: 18px; }
.card .big { font-family: var(--serif); font-size: 52px; font-weight: 450; line-height: 1; color: var(--green); margin-bottom: 18px; display: block; }
.card .makes { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.card .makes b { color: var(--text); font-weight: 600; }
a.card { display: block; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
a.card:hover { transform: translateY(-3px); border-color: var(--muted); }
a.card h3 { color: var(--text); }

/* Big statement */
.statement { font-family: var(--serif); font-size: clamp(32px, 5.6vw, 60px); font-weight: 450; line-height: 1.1; max-width: 980px; margin: 0; }
.statement .dim { color: var(--muted); }

/* Chapter split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }
ul.checks { list-style: none; padding: 0; margin: 0; }
ul.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
ul.checks li:first-child { border-top: 0; padding-top: 0; }
ul.checks li::before { content: "✓"; font-weight: 700; color: var(--green); }
ul.checks b { font-weight: 600; }
ul.checks span { color: var(--muted); }

/* Question marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 16px; width: max-content; animation: slide 60s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .q { background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 14px 24px; font-weight: 500; white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee .track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee .track [aria-hidden="true"] { display: none; }
  .marquee .q { white-space: normal; }
}

/* Inner pages */
.page-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(38px, 6.5vw, 64px); max-width: 900px; }
.page-hero .lead { margin-bottom: 0; }
.page-hero .actions { margin-top: 28px; }
.content { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); }
.content h2 { font-size: clamp(26px, 4vw, 36px); }
.content section + section { margin-top: clamp(44px, 6vw, 64px); }
.content section[id] { scroll-margin-top: 90px; }

/* Guide */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; gap: 24px; } }
.toc { position: sticky; top: 92px; list-style: none; padding: 0; margin: 0; font-size: 15px; }
.toc li { margin: 0; }
.toc a { display: grid; grid-template-columns: 26px 1fr; padding: 7px 0; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); }
.toc a span:first-child { font-weight: 700; }
@media (max-width: 900px) {
  .toc { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
}
.module { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); margin: 0 0 20px; scroll-margin-top: 90px; }
.module .num { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.module h2 { font-size: clamp(26px, 4vw, 34px); }
.task { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 14px; padding: 16px 18px; margin: 22px 0 0; }
.task b { font-weight: 700; }
.example { background: var(--raised); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; font-size: 16px; }
.example p { margin: 0 0 10px; }
.example .label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
dl.facts { display: grid; grid-template-columns: 90px 1fr; gap: 10px 16px; margin: 0 0 16px; }
dl.facts dt { color: var(--muted); font-size: 15px; font-weight: 500; padding-top: 1px; }
dl.facts dd { margin: 0; }

/* Chapters weeks */

/* Footer */
footer.site { background: var(--mint); border-top: 1px solid var(--line); padding: 56px 0 40px; color: var(--muted); font-size: 15px; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr 1fr; } footer.site .cols > :first-child { grid-column: 1 / -1; } }
footer.site h4 { color: var(--text); font-size: 15px; font-weight: 600; margin: 0 0 12px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin: 0 0 8px; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--text); }
footer.site .tagline { font-family: var(--serif); color: var(--text); font-size: 24px; font-weight: 450; margin: 14px 0 6px; }
footer.site .legal { margin-top: 40px; font-size: 13px; }

/* Forms (account page) */
form { display: grid; gap: 14px; margin: 0 0 20px; }
label { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
input, select, textarea {
  font: 400 17px var(--font); color: var(--text); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; width: 100%; min-height: 50px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
label.check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 400; }
label.check input { width: 22px; min-height: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); }
.tabs { display: flex; gap: 8px; margin: 0 0 22px; }
/* Continue with Google, above the email forms */
.google { margin: 0 0 22px; }
.google-button { display: flex; justify-content: center; min-height: 44px; }
.google .error { text-align: center; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.tabs button { flex: 1; font-size: 16px; padding: 12px 14px; white-space: nowrap; min-height: 48px; }
.tabs button:hover { transform: none; }
.tabs button[aria-selected="false"] { background: transparent; color: var(--text); border-color: var(--line-strong); }
.error { color: var(--error); min-height: 1.5em; margin: 0; font-size: 15px; }
textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
form .pair { display: grid; gap: 14px; }
@media (min-width: 600px) { form .pair { grid-template-columns: 1fr 1fr; } }
form.apply { margin-top: 24px; }
/* A box only bots fill in, kept off screen (the chapter form) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note.sent { color: var(--text); background: var(--surface); margin-top: 24px; }
.note.sent h3 { margin: 0 0 6px; }
.note.sent p { margin: 0; color: var(--muted); }

/* About: the mission, a little bigger than body text */
.mission p { color: var(--text); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.55; }

/* Places whose people said yes to an interview, two side by side (Sean, 2026-10-10) */
.partners { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.partners li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 18px; min-height: 124px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
/* An odd tile out sits centered under the others. */
.partners li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2); }
.partners b { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--text); }
.partners span { color: var(--muted); font-size: 14px; }
@media (max-width: 480px) { .partners li { padding: 18px 12px; min-height: 110px; } .partners b { font-size: 17px; } .partners span { font-size: 13px; } }
/* A place whose interview is written up: the whole tile links to it. */
.partners li.read { padding: 0; border-color: var(--line-strong); transition: border-color .15s ease, background-color .15s ease; }
.partners li.read:hover { border-color: var(--green); background: var(--mint); }
.partners li.read a { flex: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 24px 18px; border-radius: inherit; text-decoration: none; }
.partners li.read em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--green); }
@media (max-width: 480px) { .partners li.read a { padding: 18px 12px; } .partners li.read em { font-size: 13px; } }
/* When each interview happened or is planned (Sean, 2026-10-13). Done ones are solid, set days are pale, and our
   guesses ("About Oct 26") and "Date to be set" are dashed. */
.partners .when { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 3px 11px; margin-bottom: 4px;
  border-radius: 999px; background: var(--mint); color: var(--green-dark); border: 1px solid transparent; }
.partners .when.done { background: var(--green); color: #FFFFFF; }
.partners .when.tbd { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }
@media (max-width: 480px) { .partners .when { font-size: 11px; padding: 2px 9px; } }

/* Interview write-ups (/interviews/<name>/) and their cards on the Interviews page */
.page-hero .byline { color: var(--muted); font-size: 15px; margin: 18px 0 0; }
.page-hero:has(.byline) h1 { text-wrap: balance; }
.story { max-width: 700px; }
.story p, .story li { font-size: 18px; line-height: 1.75; }
.story .intro { font-size: 20px; line-height: 1.65; }
.story .edited { color: var(--muted); font-size: 15px; font-style: italic; }
.story h2 { margin: clamp(44px, 6vw, 60px) 0 18px; }
.story .ask { font-weight: 600; border-left: 3px solid var(--line-strong); padding-left: 16px; margin-bottom: 18px; }
.story ul li { margin-bottom: 12px; }
.story .take { background: var(--mint); border-color: transparent; margin: clamp(44px, 6vw, 60px) 0 28px; }
.story .take h3 { margin-bottom: 14px; }
.story .take ol { margin-bottom: 0; }
.story .thanks { color: var(--muted); font-style: italic; }
.story .back { margin-top: 32px; }
.story-video { margin: 32px 0 0; }
.story-video .frame { position: relative; }
.story-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #242424; border-radius: var(--radius); }
.story-video .play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; border: 0;
  padding: 18px; border-radius: var(--radius); background: linear-gradient(rgba(36, 36, 36, 0) 55%, rgba(36, 36, 36, .45)); cursor: pointer; font: inherit; }
.story-video .play[hidden] { display: none; }
.story-video .play span { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: var(--text); font-size: 16px; font-weight: 600;
  padding: 10px 18px 10px 14px; border-radius: 999px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.story-video .play svg { width: 22px; height: 22px; fill: var(--green); }
.story-video .play:hover span, .story-video .play:focus-visible span { transform: scale(1.04); }
.story-video .play:disabled { cursor: progress; }
@media (max-width: 480px) { .story-video .play { padding: 12px; } .story-video .play span { font-size: 15px; padding: 8px 14px 8px 10px; } }
.story-video figcaption { color: var(--muted); font-size: 15px; margin-top: 10px; }
@media (max-width: 600px) { .story p, .story li { font-size: 17px; } .story .intro { font-size: 18px; } }
.story-link { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.story-link:hover, .story-link:has(.title:focus-visible) { border-color: var(--green); background: var(--mint); }
.story-link:has(.title:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.story-link .title { display: block; color: inherit; text-decoration: none; line-height: 1.2; }
.story-link .title:focus-visible { outline: none; }
/* The title link covers the whole card, and the heart sits above it so tapping it doesn't open the article. */
.story-link .title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.story-link .like { position: relative; z-index: 1; }
.story-link .where { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.story-link b { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 30px); font-weight: 450; line-height: 1.2; }
.story-link > span:not(.where):not(.more) { color: var(--muted); }
.story-link .more { color: var(--green); font-weight: 600; font-size: 15px; }
.story-link .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 24px; }
.story-link .foot .more { margin: 0; }
.story-link .foot .meta { display: inline-flex; align-items: center; gap: 16px; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
/* The article cards: two across everywhere (Sean, 2026-10-13: "on the mobile version of the app make it 2x2 for the
   articles", then "make thes two by two" for computers). On phones the card is the link, so "Read the interview" drops
   out and the text gets smaller and clipped to fit. */
.stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stories .story-link b { font-size: clamp(22px, 2.4vw, 27px); }
.stories .story-link .foot { margin-top: auto; padding-top: 24px; }
@media (max-width: 700px) {
  .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stories .story-link { padding: 16px 14px 14px; gap: 6px; border-radius: 16px; }
  .stories .story-link .where { font-size: 10.5px; letter-spacing: .08em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stories .story-link b { font-size: 17px; }
  .stories .story-link .title { line-height: 1.25; }
  .stories .story-link > span:not([class]) { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .stories .story-link .foot { margin-top: auto; padding-top: 10px; }
  .stories .story-link .foot .more { display: none; }
  .stories .story-link .foot .meta { flex-wrap: wrap; gap: 8px 12px; font-size: 12.5px; }
  .stories .story-link .foot .read { flex-basis: 100%; }
  .stories .story-link .views, .stories .story-link .like { font-size: 12.5px; gap: 4px; }
  .stories .story-link .views svg, .stories .story-link .like svg { width: 16px; height: 16px; }
  .stories .story-link .like { margin: -8px; padding: 8px; }
}
/* Views: an eye and the count, filled in by views.js */
.views { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.views[hidden] { display: none; }
.views svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.views b, .story-link .views b, .story-link .like b { font: inherit; line-height: 1; }
.views i { font-style: normal; }
.page-hero .byline:has(.views) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.page-hero .byline .views { color: inherit; font-size: inherit; font-weight: inherit; gap: 5px; }
.page-hero .byline .views svg { width: 16px; height: 16px; }
/* A heart beside the views at the top of each article too (Sean, 2026-10-13: "also here add a like button"). */
.page-hero .byline .like { margin: -8px -10px; color: inherit; font-size: inherit; font-weight: inherit; gap: 5px; }
.page-hero .byline .like svg { width: 17px; height: 17px; }
.page-hero .byline .like b { font: inherit; line-height: 1; }
.on-hero .page-hero .byline .like:hover, .on-hero .page-hero .byline .like[aria-pressed="true"] { color: #FF8FA6; }
/* Likes: a heart that fills in when this browser has liked the interview, filled in by likes.js */
.like { display: inline-flex; align-items: center; gap: 6px; margin: -8px -10px; padding: 8px 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; min-height: 0; transition: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.like svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; transition: transform .15s ease; }
.like:hover { transform: none; background: none; border-color: transparent; }
.like:hover, .like[aria-pressed="true"] { color: var(--heart); }
.like[aria-pressed="true"] svg { fill: currentColor; }
.like:active svg { transform: scale(.85); }
.like:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
.like b:empty { display: none; }
.like i { font-style: normal; }
.like-row { margin-top: 40px; }
.like-row .like { margin: 0; padding: 12px 20px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 16px; gap: 8px; }
.like-row .like svg { width: 21px; height: 21px; color: var(--heart); }
.like-row .like b { color: var(--muted); }
.like-row .like:hover, .like-row .like[aria-pressed="true"] { background: var(--surface); border-color: var(--heart); color: var(--text); }
.like-row + .back { margin-top: 24px; }

/* The Donate page (Sean, 2026-10-13: "add a donation page") */

/* The email box for new interviews (notify.js) and the unsubscribe page (unsubscribe.js) */
.notify { max-width: 640px; margin: 32px 0 0; }
.notify h3 { margin: 0 0 6px; }
.notify > p { margin: 0 0 18px; }
.notify form { display: grid; gap: 12px; margin: 0; }
.notify .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.notify .row button { min-height: 50px; }
.notify .error { min-height: 0; }
.notify .error:empty { display: none; }
.notify .done { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--bg); color: var(--text); font-weight: 600; }
.notify .done:focus { outline: none; }
.story .notify { margin-top: 40px; }
@media (max-width: 480px) { .notify .row { grid-template-columns: 1fr; } }
.unsub { margin-top: 24px; }
.unsub > p { margin: 0 0 18px; }
.unsub > [data-missing] { margin: 0; }
.unsub .error { margin-top: 10px; }
.unsub .error:empty { display: none; }
.unsub [data-done] h3 { margin: 0 0 6px; }
.unsub [data-done] p { margin: 0; }
.unsub [data-done]:focus { outline: none; }

/* Student path */
.note { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 24px; color: var(--muted); font-size: 15px; }
.note a { color: var(--text); }
.meter { height: 8px; background: var(--tint); border-radius: 4px; overflow: hidden; margin: 8px 0 6px; }
.meter > span { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.meter-label { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
ol.steps { list-style: none; padding: 0; margin: 0; }
ol.steps > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px; margin-bottom: 14px; }
ol.steps > li.is-done { border-color: var(--muted); }
ol.steps h2 { font-size: 24px; margin: 4px 0 8px; }
.step-num { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
ol.steps p { margin: 6px 0; }
.done-when { color: var(--muted); font-size: 15px; }
ol.steps button { margin-top: 12px; font-size: 15px; min-height: 44px; padding: 11px 20px; }
li.is-done button.toggle { background: transparent; color: var(--green-dark); border-color: var(--green); }

/* Numbers page */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stat b { display: block; font-family: var(--serif); font-size: 40px; font-weight: 450; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td { padding: 12px 0; border-bottom: 1px solid var(--line); }
td:last-child { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button, .button, a.card { transition: none; }
  button:hover, .button:hover, a.card:hover { transform: none; }
}


/* Small helpers */
.more { margin: 32px 0 0; }
.content h1 { font-size: clamp(34px, 6vw, 52px); margin: 0 0 10px; }

/* Join box */
form.join { display: flex; gap: 6px; max-width: 520px; margin: 0; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px; }
form.join:focus-within { border-color: var(--green); }
form.join input { flex: 1; min-width: 0; border: 0; background: transparent; min-height: 50px; padding: 0 18px; border-radius: 999px; }
form.join input:focus { outline: none; }
form.join button { min-height: 50px; padding: 0 28px; }
form.join button:hover { transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Guide outline: one card per section, each with a spot for its video */
.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .modules { grid-template-columns: 1fr; } }
.modules .module { margin: 0; display: flex; flex-direction: column; }
.modules .module h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 16px; }
.video { aspect-ratio: 16 / 9; border-radius: 14px; background: var(--tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 15px; font-weight: 500; margin: 0 0 18px; }
.video .play { width: 52px; height: 52px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.video .play::before { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--green); margin-left: 4px; }
.video iframe, .video video { width: 100%; height: 100%; border: 0; border-radius: 14px; }
ul.outline { margin: 0 0 4px; padding-left: 20px; }
ul.outline li { margin-bottom: 6px; }
.modules .task { margin-top: auto; }
.modules ul.outline + .task { margin-top: 14px; }
[hidden] { display: none !important; }

/* Photo tops (Sean, 2026-10-09: "make the background hero photo a picture of green trees"). It replaced the green
   and blue gradient. A dark gray wash keeps the white text and cards readable. On pages that open with a hero, the
   header sits over the photo and turns solid charcoal once the page scrolls. */
:root {
  --hdr: 77px;
  --gradient:
    linear-gradient(180deg, rgba(24, 27, 32, .66) 0%, rgba(24, 27, 32, .42) 38%, rgba(24, 27, 32, .48) 70%, rgba(24, 27, 32, .74) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(24, 27, 32, .22), transparent 75%),
    url("/img/hero-trees.webp?v=25") center 38% / cover no-repeat,
    #3B4A3F;
}
@media (max-width: 1120px) { :root { --hdr: 107px; } }
.on-hero .hero, .on-hero .page-hero {
  background: var(--gradient); color: #FFFFFF; border-bottom: 0;
}
.on-hero .hero { padding-top: calc(var(--hdr) + clamp(48px, 8vw, 104px)); }
/* A page opens on its photo top alone, filling the screen; the rest shows on scroll (Sean, 2026-10-08).
   The account form keeps a short top so sign-up stays in view. */
.on-hero .hero, .on-hero .page-hero:not(.compact) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.on-hero .hero > .wrap, .on-hero .page-hero > .wrap { width: 100%; }
.on-hero .page-hero { padding-top: calc(var(--hdr) + clamp(48px, 8vw, 96px)); padding-bottom: clamp(48px, 7vw, 80px); }
.on-hero .hero h1, .on-hero .page-hero h1 { color: #FFFFFF; }
.on-hero .hero h1 .glow { background: linear-gradient(90deg, #FFFFFF, #C2CEE0 45%, #A5BBD3); -webkit-background-clip: text; background-clip: text; }
.on-hero .hero .lead, .on-hero .page-hero .lead { color: rgba(255, 255, 255, .92); }
.on-hero .page-hero .eyebrow { color: rgba(255, 255, 255, .85); }
.on-hero .page-hero .byline { color: rgba(255, 255, 255, .85); }
.on-hero .hero .news { color: rgba(255, 255, 255, .92); }
.on-hero .hero .news::before { background: #C2CEE0; }
.on-hero .hero .news:hover { color: #fff; }
.on-hero .hero a:not(.button), .on-hero .page-hero a:not(.button) { color: #FFFFFF; text-decoration-color: #C2CEE0; }
.on-hero .hero form.join { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
.on-hero .hero form.join:focus-within { border-color: #C2CEE0; }
.on-hero .hero form.join input { color: #fff; }
.on-hero .hero form.join input::placeholder { color: rgba(255, 255, 255, .75); }
.on-hero .hero .fine { color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .28); }
.on-hero .hero .fine a { color: #C2CEE0; }
.on-hero .hero .stack { background: none; padding: 8px 0 0; }
.on-hero .hero .stack a.paper { color: var(--text); text-decoration: none; }
/* Under 1360px the first three cards sit in one row right under the join box, three across (Sean, 2026-10-14: "do
   not add it at the bottom it makes the starting page look cliunky", then "make it three across below the gmail
   thing"). Phones are too narrow for three, so there the same row slides sideways. */
@media (max-width: 1359px) {
  .on-hero .hero .stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch;
    max-width: 1000px; margin: 40px auto 0; padding: 22px 0 0; background: none; border-radius: 0; }
  .on-hero .hero .stack .paper { width: auto; margin: 0; padding: 14px 16px; font-size: 13px; }
  .on-hero .hero .stack .paper p { font-size: 16px; }
  .on-hero .hero .stack .paper::after { width: 44px; height: 44px; top: -20px; }
  .on-hero .hero .stack .paper.p1::after, .on-hero .hero .stack .paper.p3::after { left: -12px; }
  .on-hero .hero .stack .paper.p2::after { right: -12px; }
  .on-hero .hero .stack .paper .tag { padding: 0 24px 0 0; }
  .on-hero .hero .stack .paper.p1 .tag, .on-hero .hero .stack .paper.p3 .tag { padding: 0 0 0 24px; }
  .on-hero .hero .stack .p1 { transform: rotate(-2deg); }
  .on-hero .hero .stack .p2 { transform: rotate(1.5deg); }
  .on-hero .hero .stack .p3 { transform: rotate(-1deg); }
}
@media (max-width: 720px) {
  .on-hero .hero .stack { display: flex; flex-direction: row; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 32px -20px 0; padding: 24px 20px 14px; scroll-padding: 0 20px; }
  .on-hero .hero .stack::-webkit-scrollbar { display: none; }
  .on-hero .hero .stack .paper { flex: 0 0 80%; scroll-snap-align: center; }
}
/* White buttons on the photo, like Hack Club's */
.on-hero .hero button, .on-hero .page-hero .button, .on-hero header.site .button {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--text);
}
.on-hero .hero button:hover, .on-hero .page-hero .button:hover, .on-hero header.site .button:hover { background: #fff; border-color: #fff; color: var(--text); }
.on-hero .page-hero .button.ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #FFFFFF; }
.on-hero .page-hero .button.ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
/* The header over the photo */
.on-hero header.site {
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(36, 36, 36, .94); border-bottom-color: rgba(255, 255, 255, .1);
  transition: background-color .2s ease, border-color .2s ease;
}
.on-hero.at-top header.site { background: transparent; backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .14); }
.on-hero header.site.open, .on-hero.at-top header.site.open { background: #242424; backdrop-filter: none; }
.on-hero header.site .menu-toggle, .on-hero header.site .menu-toggle:hover { color: #FFFFFF; }
.on-hero header.site .menu-toggle:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 1120px) {
  .on-hero header.site .menu { background: #242424; border-bottom-color: rgba(255, 255, 255, .1); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); }
}
.on-hero header.site .brand { color: #FFFFFF; }
.on-hero nav.nav a, .on-hero header.site .who { color: rgba(255, 255, 255, .92); }
.on-hero nav.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.on-hero nav.nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .16); }
.on-hero .content section[id], .on-hero .module { scroll-margin-top: calc(var(--hdr) + 16px); }

/* Texture under the photo (Sean, 2026-10-08, recolored 2026-10-09): faint blue dots on white with soft blue
   glows, blue graph paper on the light blue bands, and a dark graph-paper footer like hackclub.com's. */
body:not(.deck) main {
  background-image:
    radial-gradient(ellipse 45% 520px at 0% 30%, rgba(103, 135, 182, .1), transparent 70%),
    radial-gradient(ellipse 45% 520px at 100% 75%, rgba(133, 161, 200, .1), transparent 70%),
    radial-gradient(rgba(103, 135, 182, .26) 1.2px, transparent 1.7px);
  background-size: 100% 1600px, 100% 1600px, 24px 24px;
}
.band.alt {
  background-color: var(--mint);
  background-image:
    radial-gradient(ellipse 45% 70% at 100% 0%, rgba(155, 162, 174, .16), transparent 70%),
    radial-gradient(ellipse 45% 70% at 0% 100%, rgba(133, 161, 200, .2), transparent 70%),
    linear-gradient(rgba(103, 135, 182, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 135, 182, .12) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
.card { box-shadow: 0 14px 34px -22px rgba(36, 44, 56, .32); }
a.card:hover { box-shadow: 0 20px 40px -20px rgba(36, 44, 56, .38); }
footer.site {
  background-color: #242424; border-top: 0; color: rgba(255, 255, 255, .85);
  background-image:
    radial-gradient(ellipse 50% 80% at 100% 0%, rgba(127, 134, 140, .22), transparent 70%),
    radial-gradient(ellipse 50% 90% at 0% 100%, rgba(103, 135, 182, .3), transparent 70%),
    linear-gradient(rgba(165, 187, 211, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 187, 211, .1) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
footer.site h4, footer.site .tagline { color: #FFFFFF; }
footer.site a { color: rgba(255, 255, 255, .85); }
footer.site a:hover { color: #fff; }

/* Seasons (Sean, 2026-10-09: "for the tree background change it for the about guide and interviews and chapters to be
   the four seasons summer fall winter spring" and "below when scrolling down for each one make it themed like each
   season"). About is summer, Guide fall, Interviews winter, Chapters spring. Each page hero carries data-season;
   the page below it takes that season's colors, glows and a scatter of suns, maple leaves, snowflakes or blossoms. */
main:has(> [data-season="summer"]) {
  --green: #2E7D32; --green-dark: #256628; --mint: #EEF6E4; --tint: #FBEFC9; --line-strong: #B9D99A;
  --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) scale(1.0) translate(-20 -20)' opacity='1'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23E9A92E'/%3E%3Cg stroke='%23E9A92E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg transform='translate(70 60) scale(1.35) translate(-20 -20)' opacity='0.5'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23F2B33D'/%3E%3Cg stroke='%23F2B33D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(300 120) rotate(35) scale(1.1475000000000002) translate(-20 -20)' opacity='0.42'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%237DBB5A'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(480 40) scale(0.7425) translate(-20 -20)' opacity='0.42'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23F2B33D'/%3E%3Cg stroke='%23F2B33D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(190 260) rotate(-50) scale(0.9450000000000001) translate(-20 -20)' opacity='0.38'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%235FA34C'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(430 300) scale(1.0125) translate(-20 -20)' opacity='0.45'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23F6C453'/%3E%3Cg stroke='%23F6C453' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(80 420) rotate(120) scale(1.08) translate(-20 -20)' opacity='0.4'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%238CC56A'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(320 470) rotate(70) scale(0.8100000000000002) translate(-20 -20)' opacity='0.36'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%235FA34C'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(520 500) scale(0.6075) translate(-20 -20)' opacity='0.4'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23F2B33D'/%3E%3Cg stroke='%23F2B33D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(242, 179, 61, .14), rgba(242, 179, 61, 0) 620px),
    radial-gradient(ellipse 60% 640px at 100% 0%, rgba(242, 179, 61, .22), transparent 70%),
    radial-gradient(ellipse 50% 640px at 0% 55%, rgba(125, 187, 90, .16), transparent 70%),
    radial-gradient(rgba(233, 169, 46, .3) 1.2px, transparent 1.7px);
  background-size: 560px 560px, 100% 100%, 100% 1800px, 100% 1800px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
}
main:has(> [data-season="summer"]) .card { border-color: rgba(242, 179, 61, .45); box-shadow: 0 14px 34px -22px rgba(233, 169, 46, .5); }
main:has(> [data-season="fall"]) {
  --green: #B4461B; --green-dark: #933815; --mint: #FBEBDD; --tint: #F8DCC2; --line-strong: #EBB58C;
  --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) rotate(0) scale(1.0) translate(-20 -20)' opacity='1'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23D9622B'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg transform='translate(70 60) rotate(-18) scale(1.4175) translate(-20 -20)' opacity='0.5'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23D9622B'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(300 120) rotate(40) scale(1.0125) translate(-20 -20)' opacity='0.5'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%23E8A33A'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(480 40) rotate(25) scale(1.0125) translate(-20 -20)' opacity='0.45'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23B83A26'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(190 260) rotate(160) scale(1.215) translate(-20 -20)' opacity='0.45'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23E8892B'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(430 300) rotate(-60) scale(1.08) translate(-20 -20)' opacity='0.45'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%23C9502A'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(80 420) rotate(80) scale(1.0125) translate(-20 -20)' opacity='0.5'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23D9B23A'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(320 470) rotate(110) scale(0.8775000000000001) translate(-20 -20)' opacity='0.42'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%23B83A26'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(520 500) rotate(-40) scale(0.8100000000000002) translate(-20 -20)' opacity='0.48'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23E07A2B'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(232, 137, 43, .14), rgba(232, 137, 43, 0) 620px),
    radial-gradient(ellipse 60% 640px at 100% 0%, rgba(232, 137, 43, .22), transparent 70%),
    radial-gradient(ellipse 50% 640px at 0% 55%, rgba(184, 58, 38, .16), transparent 70%),
    radial-gradient(rgba(217, 98, 43, .3) 1.2px, transparent 1.7px);
  background-size: 560px 560px, 100% 100%, 100% 1800px, 100% 1800px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
}
main:has(> [data-season="fall"]) .card { border-color: rgba(232, 137, 43, .45); box-shadow: 0 14px 34px -22px rgba(217, 98, 43, .5); }
main:has(> [data-season="winter"]) {
  --green: #2F5F8A; --green-dark: #254C6F; --mint: #E8F1F9; --tint: #DCE9F5; --line-strong: #A9C9E6;
  --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) rotate(0) scale(1.0) translate(-20 -20)' fill='none' stroke='%235B93C7' stroke-opacity='1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3C/svg%3E");
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg transform='translate(70 60) rotate(0) scale(1.35) translate(-20 -20)' fill='none' stroke='%237FAFDA' stroke-opacity='0.6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(300 120) rotate(15) scale(0.8100000000000002) translate(-20 -20)' fill='none' stroke='%239CC3E6' stroke-opacity='0.6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(480 40) rotate(30) scale(1.0125) translate(-20 -20)' fill='none' stroke='%237FAFDA' stroke-opacity='0.5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(190 260) rotate(10) scale(1.1475000000000002) translate(-20 -20)' fill='none' stroke='%239CC3E6' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(430 300) rotate(40) scale(0.7425) translate(-20 -20)' fill='none' stroke='%237FAFDA' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(80 420) rotate(20) scale(0.9450000000000001) translate(-20 -20)' fill='none' stroke='%239CC3E6' stroke-opacity='0.6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(320 470) rotate(5) scale(1.2825000000000002) translate(-20 -20)' fill='none' stroke='%237FAFDA' stroke-opacity='0.5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(520 500) rotate(25) scale(0.675) translate(-20 -20)' fill='none' stroke='%239CC3E6' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Ccircle cx='150' cy='150' r='3' fill='%23B9D3EC' opacity='.7'/%3E%3Ccircle cx='380' cy='210' r='2.5' fill='%23B9D3EC' opacity='.7'/%3E%3Ccircle cx='250' cy='380' r='3' fill='%23B9D3EC' opacity='.7'/%3E%3Ccircle cx='500' cy='400' r='2.5' fill='%23B9D3EC' opacity='.7'/%3E%3Ccircle cx='40' cy='300' r='2' fill='%23B9D3EC' opacity='.7'/%3E%3Ccircle cx='230' cy='40' r='2.5' fill='%23B9D3EC' opacity='.7'/%3E%3Ccircle cx='420' cy='540' r='2' fill='%23B9D3EC' opacity='.7'/%3E%3Ccircle cx='130' cy='520' r='3' fill='%23B9D3EC' opacity='.7'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(127, 175, 218, .14), rgba(127, 175, 218, 0) 620px),
    radial-gradient(ellipse 60% 640px at 100% 0%, rgba(127, 175, 218, .22), transparent 70%),
    radial-gradient(ellipse 50% 640px at 0% 55%, rgba(185, 211, 236, .16), transparent 70%),
    radial-gradient(rgba(91, 147, 199, .3) 1.2px, transparent 1.7px);
  background-size: 560px 560px, 100% 100%, 100% 1800px, 100% 1800px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
}
main:has(> [data-season="winter"]) .card { border-color: rgba(127, 175, 218, .45); box-shadow: 0 14px 34px -22px rgba(91, 147, 199, .5); }
main:has(> [data-season="spring"]) {
  --green: #B03A6B; --green-dark: #8F2E57; --mint: #FCE9F0; --tint: #F9D6E3; --line-strong: #F1A9C3;
  --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) rotate(0) scale(1.0) translate(-20 -20)' opacity='1'%3E%3Cg fill='%23F08FB0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E0577F'/%3E%3C/g%3E%3C/svg%3E");
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg transform='translate(70 60) rotate(0) scale(1.35) translate(-20 -20)' opacity='0.55'%3E%3Cg fill='%23F4A7C0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E0577F'/%3E%3C/g%3E%3Cellipse cx='300' cy='120' rx='6.912000000000001' ry='10.8' transform='rotate(40 300 120)' fill='%23F4A7C0' opacity='0.5'/%3E%3Cg transform='translate(480 40) rotate(20) scale(0.9450000000000001) translate(-20 -20)' opacity='0.55'%3E%3Cg fill='%23F7BCD0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E57F9B'/%3E%3C/g%3E%3Cg transform='translate(190 260) rotate(12) scale(1.1475000000000002) translate(-20 -20)' opacity='0.5'%3E%3Cg fill='%23F4A7C0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23F6C453'/%3E%3C/g%3E%3Cellipse cx='430' cy='300' rx='6.048000000000001' ry='9.450000000000001' transform='rotate(-30 430 300)' fill='%23F7BCD0' opacity='0.55'/%3E%3Cg transform='translate(80 420) rotate(30) scale(1.0125) translate(-20 -20)' opacity='0.5'%3E%3Cg fill='%23F7BCD0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E0577F'/%3E%3C/g%3E%3Cg transform='translate(320 470) rotate(60) scale(0.7425) translate(-20 -20)' opacity='0.4'%3E%3Cpath d='M20 2C31 10 33 26 20 38C7 26 9 10 20 2Z' fill='%238BC36A'/%3E%3Cpath d='M20 6V40' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(520 500) rotate(8) scale(0.8100000000000002) translate(-20 -20)' opacity='0.5'%3E%3Cg fill='%23F4A7C0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23F6C453'/%3E%3C/g%3E%3Cellipse cx='250' cy='380' rx='5.184000000000001' ry='8.100000000000001' transform='rotate(70 250 380)' fill='%23F4A7C0' opacity='0.5'/%3E%3Cellipse cx='380' cy='210' rx='5.6160000000000005' ry='8.775' transform='rotate(10 380 210)' fill='%23F7BCD0' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(244, 167, 192, .14), rgba(244, 167, 192, 0) 620px),
    radial-gradient(ellipse 60% 640px at 100% 0%, rgba(244, 167, 192, .22), transparent 70%),
    radial-gradient(ellipse 50% 640px at 0% 55%, rgba(139, 195, 106, .16), transparent 70%),
    radial-gradient(rgba(224, 87, 127, .3) 1.2px, transparent 1.7px);
  background-size: 560px 560px, 100% 100%, 100% 1800px, 100% 1800px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
}
main:has(> [data-season="spring"]) .card { border-color: rgba(244, 167, 192, .45); box-shadow: 0 14px 34px -22px rgba(224, 87, 127, .5); }
main:has(> [data-season]) .content h2::before {
  content: ""; display: inline-block; width: .82em; height: .82em; margin-right: .32em; vertical-align: -.06em;
  background: var(--season-icon) center / contain no-repeat;
}
@media (max-width: 700px) { main:has(> [data-season]) { background-size: 420px 420px, 100% 100%, 100% 1400px, 100% 1400px, 24px 24px; } }
/* Donate is all four seasons (Sean, 2026-10-13: "combining the other four seasons into this one since it will be
   sponsoring and funging students for all 4 seasons"). */
main:has(> [data-season="year"]) {
  --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) rotate(0) scale(1.0) translate(-20 -20)' opacity='1'%3E%3Cg fill='%23F08FB0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E0577F'/%3E%3C/g%3E%3C/svg%3E");
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg transform='translate(70 60) rotate(0) scale(1.215) translate(-20 -20)' opacity='0.5'%3E%3Cg fill='%23F4A7C0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E0577F'/%3E%3C/g%3E%3Cg transform='translate(300 120) scale(0.8775000000000001) translate(-20 -20)' opacity='0.45'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23F2B33D'/%3E%3Cg stroke='%23F2B33D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(480 40) rotate(25) scale(1.0125) translate(-20 -20)' opacity='0.45'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23D9622B'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(190 260) rotate(10) scale(1.08) translate(-20 -20)' fill='none' stroke='%237FAFDA' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3Cg transform='translate(430 300) rotate(20) scale(0.8775000000000001) translate(-20 -20)' opacity='0.5'%3E%3Cg fill='%23F7BCD0'%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='6' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23F6C453'/%3E%3C/g%3E%3Cg transform='translate(80 420) rotate(80) scale(1.0125) translate(-20 -20)' opacity='0.48'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23E8A33A'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(320 470) scale(0.7425) translate(-20 -20)' opacity='0.42'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23F6C453'/%3E%3Cg stroke='%23F6C453' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(520 500) rotate(25) scale(0.8100000000000002) translate(-20 -20)' fill='none' stroke='%239CC3E6' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 36% 620px at 0% 0%, rgba(244, 167, 192, 0.22), transparent 70%),
    radial-gradient(ellipse 36% 620px at 36% 0%, rgba(242, 179, 61, 0.2), transparent 70%),
    radial-gradient(ellipse 36% 620px at 66% 0%, rgba(232, 137, 43, 0.18), transparent 70%),
    radial-gradient(ellipse 36% 620px at 100% 0%, rgba(127, 175, 218, 0.24), transparent 70%),
    radial-gradient(rgba(133, 161, 200, .32) 1.2px, transparent 1.7px);
  background-size: 560px 560px, 100% 1800px, 100% 1800px, 100% 1800px, 100% 1800px, 24px 24px;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
main:has(> [data-season="year"]) .content > section:nth-of-type(4n + 2) { --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) scale(1.0) translate(-20 -20)' opacity='1'%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23E9A92E'/%3E%3Cg stroke='%23E9A92E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 3V8' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(45 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(135 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(225 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(270 20 20)'/%3E%3Cpath d='M20 3V8' transform='rotate(315 20 20)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
main:has(> [data-season="year"]) .content > section:nth-of-type(4n + 3) { --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) rotate(0) scale(1.0) translate(-20 -20)' opacity='1'%3E%3Cpath d='M20 31L11.5 33L12.5 28.5L3 22.5L6.5 20.5L2 13L9 14L10.5 10L15.5 15.5L13 4L17.5 6.5L20 0L22.5 6.5L27 4L24.5 15.5L29.5 10L31 14L38 13L33.5 20.5L37 22.5L27.5 28.5L28.5 33Z' fill='%23D9622B'/%3E%3Cpath d='M20 31V40M20 30V8M20 22L9 15M20 22L31 15' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"); }
main:has(> [data-season="year"]) .content > section:nth-of-type(4n + 4) { --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20) rotate(0) scale(1.0) translate(-20 -20)' fill='none' stroke='%235B93C7' stroke-opacity='1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(0 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(60 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(120 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(240 20 20)'/%3E%3Cpath d='M20 20V3M20 8.5l-4.2-3.4M20 8.5l4.2-3.4M20 14l-3.2-2.6M20 14l3.2-2.6' transform='rotate(300 20 20)'/%3E%3C/g%3E%3C/svg%3E"); }
main:has(> [data-season="year"]) .card { border-color: rgba(133, 161, 200, .45); box-shadow: 0 14px 34px -22px rgba(85, 118, 168, .45); }
main:has(> [data-season="year"]) .boxes .card { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box,
  linear-gradient(100deg, #EE9BBB, #F0C04F 36%, #E99A5B 64%, #8DB8E0) border-box; }
@media (max-width: 700px) { main:has(> [data-season="year"]) { background-size: 420px 420px, 100% 1400px, 100% 1400px, 100% 1400px, 100% 1400px, 24px 24px; } }
/* Boxed lists like the hearts4elders pages Sean sent (2026-10-13): Start a chapter (who can start one, what you
   need, what we provide) and Donate (where your donation goes). */
.boxes > * + * { margin-top: clamp(30px, 4vw, 44px); }
.content .boxes .card { max-width: 900px; padding: clamp(26px, 4vw, 40px) clamp(22px, 4vw, 44px); border: 2px solid var(--line-strong); }
main:has(> [data-season="spring"]) .boxes .card { border-color: rgba(214, 96, 135, .42); }
main:has(> [data-season="summer"]) .boxes .card { border-color: rgba(214, 150, 30, .5); }
.boxes .plain { max-width: 900px; padding: 0 clamp(22px, 4vw, 44px); }
.boxes h2 { margin-bottom: 18px; }
ul.dots { padding-left: 22px; margin: 0; }
ul.dots li { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
ul.dots li:last-child { margin-bottom: 0; }
ul.dots li::marker { color: var(--green); }
.boxes .card .small { margin: 20px 0 0; }
@media (max-width: 600px) { ul.dots li { font-size: 17px; } }
/* Season scenes (Sean, 2026-10-10: "i want them to be like this kinda blurry game ... specific stickers between each
   section add some kind of vine or trees that pop out the animation of snow etc etc add EVERYTHING make it
   absolutely stunning website"). Each season page opens on a soft, game-like version of the tree photo with a hill,
   trees and plants that pop up, and a branch hanging into the corner. Vines with stickers sit between the sections
   and a little scene sits on the footer. build.py adds the markup from site-src/scene.py, art.py and art2.py and
   copies this block into app.css; the moving parts (snow, leaves, petals, summer light, geese, side vines) are in
   /seasons.js. The homepage is fall too, with a farm (see "Homepage" below). */
.on-hero .page-hero[data-season] {
  position: relative; overflow: hidden;
  padding-bottom: calc(clamp(48px, 7vw, 80px) + min(18vw, 26svh, 260px));
}
.on-hero .page-hero[data-season="summer"] {
  background: linear-gradient(180deg, rgba(22, 30, 24, .62) 0%, rgba(22, 30, 24, .34) 36%, rgba(22, 30, 24, .2) 66%, rgba(22, 30, 24, .12) 100%),
    url("/img/hero-summer.webp?v=31") center 38% / cover no-repeat, #6E9A4E;
}
.on-hero .page-hero[data-season="fall"] {
  background: linear-gradient(180deg, rgba(40, 22, 14, .62) 0%, rgba(40, 22, 14, .34) 36%, rgba(40, 22, 14, .2) 66%, rgba(40, 22, 14, .12) 100%),
    url("/img/hero-fall.webp?v=31") center 38% / cover no-repeat, #B4622A;
}
.on-hero .page-hero[data-season="winter"] {
  background: linear-gradient(180deg, rgba(20, 34, 54, .7) 0%, rgba(20, 34, 54, .48) 36%, rgba(20, 34, 54, .3) 66%, rgba(20, 34, 54, .12) 100%),
    url("/img/hero-winter.webp?v=31") center 38% / cover no-repeat, #8FA7BF;
}
.on-hero .page-hero[data-season="spring"] {
  background: linear-gradient(180deg, rgba(34, 30, 40, .62) 0%, rgba(34, 30, 40, .34) 36%, rgba(34, 30, 40, .2) 66%, rgba(34, 30, 40, .12) 100%),
    url("/img/hero-spring.webp?v=31") center 38% / cover no-repeat, #9CC9A0;
}
/* Donate is all four seasons (Sean, 2026-10-13). The four photos sit on top of each other and each shows through its
   own quarter of the hero, spring to winter from left to right, so they line up at any screen width. */
.on-hero .page-hero[data-season="year"] { background: #8FA7A0; }
.s-bands { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s-bands span { position: absolute; inset: 0; background: var(--shade), var(--photo) center 38% / cover no-repeat; }
.s-bands .b-winter { --photo: url("/img/hero-winter.webp?v=31"); --shade: linear-gradient(180deg, rgba(20, 34, 54, .7) 0%, rgba(20, 34, 54, .48) 36%, rgba(20, 34, 54, .3) 66%, rgba(20, 34, 54, .12) 100%); }
.s-bands .b-fall { --photo: url("/img/hero-fall.webp?v=31"); --shade: linear-gradient(180deg, rgba(40, 22, 14, .62) 0%, rgba(40, 22, 14, .34) 36%, rgba(40, 22, 14, .2) 66%, rgba(40, 22, 14, .12) 100%); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 80%); mask-image: linear-gradient(90deg, #000 70%, transparent 80%); }
.s-bands .b-summer { --photo: url("/img/hero-summer.webp?v=31"); --shade: linear-gradient(180deg, rgba(22, 30, 24, .62) 0%, rgba(22, 30, 24, .34) 36%, rgba(22, 30, 24, .2) 66%, rgba(22, 30, 24, .12) 100%); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); }
.s-bands .b-spring { --photo: url("/img/hero-spring.webp?v=31"); --shade: linear-gradient(180deg, rgba(34, 30, 40, .62) 0%, rgba(34, 30, 40, .34) 36%, rgba(34, 30, 40, .2) 66%, rgba(34, 30, 40, .12) 100%); -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 30%); mask-image: linear-gradient(90deg, #000 20%, transparent 30%); }
.page-hero[data-season] > .wrap { position: relative; z-index: 3; }
.page-hero[data-season] h1, .page-hero[data-season] .lead, .page-hero[data-season] .eyebrow { text-shadow: 0 2px 22px rgba(16, 20, 26, .5), 0 1px 3px rgba(16, 20, 26, .35); }

.s-branch, .s-hill, .s-pop, .s-front { position: absolute; display: block; pointer-events: none; }
.s-branch {
  top: var(--hdr); right: 0; width: clamp(130px, 22vw, 330px); height: auto; aspect-ratio: 330 / 230; z-index: 1;
  transform-origin: 100% 0; translate: calc(var(--px, 0) * 8px) calc(var(--py, 0) * 5px); transition: translate .8s ease-out;
}
.s-hill { left: 0; bottom: 0; width: 100%; height: clamp(46px, 7vw, 104px); z-index: 1; }
.s-pop { bottom: 0; height: min(26vw, 40svh, 400px); min-height: 132px; width: auto; aspect-ratio: 360 / 250; z-index: 1; overflow: visible; transition: translate .8s ease-out; }
.s-pop.l { left: -1.5%; translate: calc(var(--px, 0) * -14px) 0; }
.s-pop.r { right: -1.5%; translate: calc(var(--px, 0) * -14px) 0; }
.s-front { left: 0; bottom: -1px; width: 100%; height: clamp(20px, 3.2vw, 46px); z-index: 2; }
.s-branch.l { right: auto; left: 0; transform-origin: 0 0; translate: calc(var(--px, 0) * -8px) calc(var(--py, 0) * 5px); }
.s-pop .pop, .s-pop .sway, .s-foot .fo, .s-vine .lf, .s-side .lf { transform-box: fill-box; transform-origin: 50% 100%; }

/* Vines and stickers between the sections */
.page-hero[data-season] ~ .content { position: relative; z-index: 2; padding-bottom: clamp(16px, 3vw, 32px); }
.s-strip { position: relative; z-index: 2; padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(8px, 2vw, 20px); }
.s-div { position: relative; height: clamp(104px, 12vw, 140px); margin: clamp(20px, 3vw, 36px) 0; }
.s-vine { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-vine .stem { stroke-dasharray: 1 1; }
.s-stk {
  position: absolute; top: 50%; left: var(--x); width: var(--w); height: auto; z-index: 1;
  margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); rotate: var(--r);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
  transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), rotate .3s cubic-bezier(.34, 1.56, .64, 1);
}
.s-stk.mid { --w: clamp(88px, 10vw, 124px); }
.s-stk.side { --w: clamp(68px, 8vw, 100px); }
.s-stk:hover { scale: 1.12; rotate: calc(var(--r) * -1); }
.s-stk.boing { scale: .86; }

/* A sticker peeking off the corner of a card */
main:has(> .page-hero[data-season]) .card { position: relative; }
main:has(> .page-hero[data-season]) .card.peek h3 { padding-right: 34px; }
.page-hero[data-season] ~ .content .card.peek::after {
  content: ""; position: absolute; top: -24px; right: -12px; width: 66px; height: 66px; rotate: 12deg; pointer-events: none;
  background: var(--peek) center / contain no-repeat;
}

/* The scene sitting on the footer */
.s-foot { position: relative; z-index: 3; height: clamp(56px, 6.5vw, 96px); pointer-events: none; }
.s-foot svg { display: block; width: 100%; height: 100%; }
main:has(> [data-season]) + footer.site { position: relative; z-index: 2; }

/* Homepage (Sean, 2026-10-10: "that main page starting page make it fall" and "just make the starting page better
   with everything"): a golden harvest photo, a farm that pops up along the bottom, an oak branch hanging in from the
   left, and vines with stickers draped across the seams between the bands. */
.on-hero .hero[data-season="fall"] {
  background: linear-gradient(180deg, rgba(40, 22, 14, .64) 0%, rgba(40, 22, 14, .44) 36%, rgba(40, 22, 14, .3) 66%, rgba(40, 22, 14, .16) 100%),
    url("/img/hero-home.webp?v=32") center 38% / cover no-repeat, #B4822A;
  padding-bottom: calc(clamp(40px, 6vw, 80px) + min(18vw, 26svh, 260px));
}
.hero[data-season] .hero-main, .hero[data-season] .stack { position: relative; z-index: 3; }
.hero[data-season] h1, .hero[data-season] .lead, .hero[data-season] .news { text-shadow: 0 2px 22px rgba(16, 20, 26, .5), 0 1px 3px rgba(16, 20, 26, .35); }
@media (min-width: 1360px) {
  .on-hero .hero[data-season="fall"] { padding-bottom: calc(96px + min(18vw, 26svh, 260px)); }
  .hero[data-season] .stack { position: absolute; bottom: min(16vw, 24svh, 240px); }
  /* The cards fill the corners here, so the branch stays off and the lowest card on each side gives way to the farm */
  .hero[data-season] .s-branch { display: none; }
}
main:has(> [data-season]) > .band { position: relative; z-index: 2; }
main:has(> .hero[data-season]) > .s-side { z-index: 2; }
main:has(> .hero[data-season="fall"]) > .band.alt { background: rgba(251, 235, 221, .88); }
.s-div.seam { z-index: 3; margin: calc(clamp(104px, 12vw, 140px) / -2) 0; }

/* Falling snow, leaves and petals, and the vines up the sides of wide screens */
main:has(> [data-season]) { position: relative; }
.s-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.s-side { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; pointer-events: none; overflow-x: clip; }
.s-side svg { position: absolute; top: 0; overflow: visible; }
.s-side .lf { transform: scale(0); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.s-side .lf.on { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .s-pop .pop { animation: s-pop 1s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--d, 0s)) both; }
  .s-pop .sway { animation: s-sway 4.6s ease-in-out var(--sd, 0s) infinite alternate; }
  .s-pop .sway.s { --amp: .9deg; animation-duration: 6.4s; }
  .s-branch { animation: s-branch-in 1.2s cubic-bezier(.34, 1.56, .64, 1) .1s both, s-swing 7s ease-in-out 1.3s infinite alternate; }
  .s-branch.l { animation-name: s-branch-in-l, s-swing-l; }
  .s-js .s-div .stem { transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .1s; }
  .s-js .s-div:not(.in) .stem { stroke-dashoffset: 1; }
  .s-js .s-div .lf { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
  .s-js .s-div:not(.in) .lf { transform: scale(0); }
  .s-js .s-div:not(.in) .s-stk { scale: 0; }
  .s-js .s-div.in .s-stk { animation: s-stick .85s cubic-bezier(.34, 1.56, .64, 1) var(--d) backwards, s-float 5s ease-in-out calc(var(--d) + .85s) infinite alternate; }
  .s-js .s-foot .fo { transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) var(--d), opacity .3s ease var(--d); }
  .s-js .s-foot:not(.in) .fo { transform: translateY(45%) scale(.2); opacity: 0; }
}
@keyframes s-pop { from { transform: translateY(30%) scale(.3); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes s-sway { from { transform: rotate(calc(var(--amp, 2.2deg) * -1)); } to { transform: rotate(var(--amp, 2.2deg)); } }
@keyframes s-branch-in { from { transform: translate(40%, -30%) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes s-swing { from { transform: rotate(-1.6deg); } to { transform: rotate(2.4deg); } }
@keyframes s-branch-in-l { from { transform: translate(-40%, -30%) rotate(12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes s-swing-l { from { transform: rotate(1.6deg); } to { transform: rotate(-2.4deg); } }
@keyframes s-stick { from { scale: 0; rotate: -40deg; } to { scale: 1; rotate: var(--r); } }
@keyframes s-float { from { translate: 0 -3px; } to { translate: 0 4px; } }
@media (max-width: 600px) {
  .s-branch { opacity: .92; }
  .page-hero[data-season] ~ .content .card.peek::after { width: 54px; height: 54px; top: -20px; right: -8px; }
}