/* ============================================================
   CREST COLORS · the site in the crest's own colors, measured off
   the PNG: royal #0B3F95, rust #872207, gold #D08B0F, cream, black.
   Every section is one lit field. Display face: Big Shoulders
   Display, uppercase. Body: Inter. Loaded after main.css on every
   page; body.crest scopes it so main.css can be read on its own.
   Motion: fields rise into place, headline words rise, light rolls
   slowly across each field; all of it still under reduced motion.
============================================================ */
.crest main,
.crest .colophon { overflow-x: clip; }
.crest main > section,
.crest .res-groups { position: relative; isolation: isolate; }

/* ---------- Header: the numbers always, the nav always reachable ---------- */
/* The nav sticks under the crisis bar. main.js sets --crisis-h to the
   bar's height, slims both together on desktop (--head-give keeps the
   page from jumping when they do), and on phones tucks the nav away
   while scrolling down and brings it back on any scroll up. */
.crest .page-nav {
  position: sticky;
  top: var(--crisis-h, 40px);
  z-index: 99;
  margin-bottom: var(--head-give, 0px);
  box-shadow: 0 1px 0 rgba(238, 232, 216, 0.1);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.crest .page-nav.is-tucked { transform: translateY(-100%); }
.crest .page-nav.is-compact { padding-top: 10px; padding-bottom: 10px; }
.crest .page-nav.is-compact .brand__crest { width: 34px; height: 34px; }
.crest .page-nav.is-compact .brand__tagline,
.crest .page-nav.is-compact .brand__since,
.crest .page-nav.is-compact .brand__badge { display: none; }
/* Compact is one row at every desktop width. Below 1300px the links
   need the name's room, and the crest (alt text and all) links home. */
@media (min-width: 881px) {
  .crest .page-nav.is-compact { flex-wrap: nowrap; }
}
@media (min-width: 881px) and (max-width: 1299px) {
  .crest .page-nav.is-compact .brand__wordmark { display: none; }
}
:root:has(body.crest) { --sticky-top: 120px; }

/* Phone: one row of numbers. The line names stay in each link for
   screen readers, and in full on the desktop bar. */
@media (max-width: 880px) {
  :root:has(body.crest) { --sticky-top: 116px; }
  .crest .crisis-bar {
    display: block;
    padding: 0 14px;
  }
  .crest .crisis-bar__home { display: none; }
  .crest .crisis-bar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .crest .crisis-bar__eyebrow { flex: 0 0 auto; }
  .crest .crisis-bar__eyebrow .on-air__label,
  .crest .crisis-bar .r-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .crest .crisis-bar__resources {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 0 10px;
  }
  .crest .crisis-bar__resources li { padding: 0; border: 0; }
  .crest .crisis-bar__resources li::after { display: none; }
  .crest .crisis-bar__resources a {
    flex-direction: row;
    padding: 11px 0;
    border-bottom: 0;
  }
  .crest .crisis-bar .r-num { font-size: 13px; }
}
@media (max-width: 374px) {
  .crest .crisis-bar__resources { gap: 0 8px; }
  .crest .crisis-bar .r-num { font-size: 12px; }
  .crest .brand__wordmark > span:first-child { font-size: 17px; }
  .crest .nav-menu { padding: 0 13px; }
}

/* ---------- Phone header: crest, name, one Menu button ---------- */
.nav-menu { display: none; }
@media (max-width: 880px) {
  .crest .page-nav {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
  }
  /* Basis 0, so the name wraps its badge under it instead of pushing
     the Menu button onto a row of its own. */
  .crest .brand { flex: 1 1 0; min-width: 0; gap: 10px; }
  .crest .brand__crest { width: 40px; height: 40px; }
  .crest .brand__wordmark > span:first-child { font-size: 19px; }
  .crest .brand__name { row-gap: 3px; }
  .crest .nav-menu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    font: 700 13px/1 'Inter', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .crest .page-nav__links { display: none; }
  .crest .page-nav.is-open .page-nav__links {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 4px;
  }
  .crest .page-nav.is-open .page-nav__links li { border-top: 1px solid var(--rule); }
  .crest .page-nav.is-open .page-nav__links a { padding: 14px 0; width: 100%; }
  .crest .page-nav.is-open .page-nav__links .cta { margin-top: 12px; justify-content: center; }
}

/* ---------- Hero: headline up the first screen ---------- */
@media (max-width: 880px) {
  .crest .hero { padding-top: 32px; padding-bottom: 56px; }
}

/* ---------- Band: matched cutouts on a lit backdrop ---------- */
/* Every tile is framed the same way when it is cut (head the same
   height, crown the same distance from the top), so they line up. */
.crest .crew-band__face { position: relative; isolation: isolate; }
.crest .crew-band__face img {
  object-fit: cover;
  object-position: 50% 0%;
  transform: none;
  transform-origin: 50% 30%;
  position: relative;
  z-index: 1;
}
.crest .crew-band__face.is-lit img { transform: scale(1.04); }

/* ---------- Crew cards: big portraits, name over the fade ---------- */
.crest .crew__portrait {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 4px;
  isolation: isolate;
}
.crest .crew__portrait img {
  object-fit: cover;
  object-position: 50% 0%;
  position: relative;
  z-index: 1;
  filter: none;
}
.crest .crew__portrait::after { z-index: 2; }
.crest .crew__card:hover .crew__portrait img { filter: none; transform: none; }
.crest .crew__card { gap: 0; }
.crest .crew__meta {
  position: relative;
  z-index: 3;
  margin-top: -54px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
}
.crest .crew__name { order: -1; margin: 0 0 6px; line-height: 1; }
.crest .crew__role { margin: 0 0 4px; }
.crest .crew__service { margin: 0 0 12px; }
@media (min-width: 881px) {
  .crest .crew__grid { gap: 56px 32px; }
}

/* ---------- Desktop: titles run wide instead of stacking ---------- */
.crest .mission__facts dd { white-space: nowrap; }
@media (min-width: 881px) {
  .crest .section-title { max-width: none; }
}

/* ---------- Hachi card: the hand-drawn squiggle goes ---------- */
.crest .hachi__apply-underline { display: none; }
.crest .hachi__apply-cta { border-bottom: 3px solid var(--hachi); padding-bottom: 6px; }

/* ---------- Slabs sit flat: one face, no stamp tilt ---------- */
.crest .slab { transform: none; box-shadow: none; border-radius: 0; }
/* The hand-drawn underlines go; the word carries the color instead. */
.crest .donate-hl-mark,
.crest .apply-hero__mark,
.crest .apply-submit__underline { display: none; }

/* ---------- Reveal mechanics (only when motion is allowed) ---------- */
/* main.css stacks .section-title as a flex column; split into words,
   each word would become its own row, so split titles go back to block. */
.crest .section-title.is-split { display: block; }
.js-motion .is-split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.js-motion .is-split .w > span {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 45ms + 120ms);
}
.js-motion .is-split.is-in .w > span { transform: none; }
.js-motion [data-r] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms ease calc(var(--d, 0) * 90ms), transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d, 0) * 90ms);
}
.js-motion [data-r].is-in { opacity: 1; transform: none; }
.js-motion .hachi__apply[data-r].is-in { transform: rotate(1.2deg); }

@media (prefers-reduced-motion: reduce) {
  .crest *, .crest *::before, .crest *::after { animation: none !important; transition: none !important; }
}

.crest {
  --royal: #0B3F95;
  --royal-hi: #2363C9;
  --royal-deep: #072A66;
  --black: #050505;
  --rust: #872207;
  --rust-hi: #B2380F;
  --gold: #D08B0F;
  --gold-hi: #F0AE36;
  --cream: #EEE8D8;
  --ink: #081127;
  --slate: var(--black);
  --slate-2: #0D0D0D;
  --bone: var(--cream);
  --bone-dim: #C9C2AE;
  --lamp: var(--gold-hi);
  --lamp-deep: var(--gold);
  --hachi: var(--rust);
  --rule: rgba(238, 232, 216, 0.16);
  --stage: var(--slate);
  --stage-2: var(--slate-2);
  --card: var(--bone);
  --card-dim: var(--bone-dim);
  --amber: var(--lamp);
  --display: 'Big Shoulders Display', 'Anton', sans-serif;
  background: var(--black);
}

/* ---------- Fields ---------- */
/* Each section is one field running edge to edge; its content keeps
   the 1180 column. The thank-you sheets and the forms sit on the
   page's own field instead (see Apply and Thanks below). */
.crest main > section:not(.thanks-sheet),
.crest .res-groups {
  overflow: clip;
  border-top: 0;
  max-width: none;
  margin: 0;
  padding-left: max(20px, calc((100vw - 1180px) / 2 + 32px));
  padding-right: max(20px, calc((100vw - 1180px) / 2 + 32px));
}
.crest main > section:not(.thanks-sheet)::before,
.crest main > section:not(.thanks-sheet)::after,
.crest .res-groups::before,
.crest .res-groups::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.crest main > section::before,
.crest .res-groups::before { background: var(--field, var(--black)); }
/* The light that rolls across each field is a plain translucent wash.
   A blended (soft-light) layer here left unpainted black patches over
   the text in Chrome while it moved, so it stays a normal layer. */
.crest main > section::after,
.crest .res-groups::after {
  background: radial-gradient(42% 60% at 50% 40%, var(--light, rgba(255, 255, 255, 0.07)), rgba(255, 255, 255, 0) 70%);
  animation: field-light var(--roll, 16s) ease-in-out infinite alternate;
}
@keyframes field-light {
  from { transform: translate3d(-28%, -6%, 0); }
  to   { transform: translate3d(30%, 8%, 0); }
}
.js-motion .crest main > section::before,
.js-motion .crest .res-groups::before {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1100ms cubic-bezier(0.7, 0, 0.2, 1);
}
.js-motion .crest main > section.is-in::before,
.js-motion .crest .res-groups.is-in::before { clip-path: inset(0); }
/* main.css pads the page mains at the bottom; the last field meets
   the footer instead. */
.crest .wed-main,
.crest .res-main,
.crest .donate-main { padding-bottom: 0; }

.crest .hero,
.crest .wed-hero,
.crest .res-hero,
.crest .donate-hero {
  --field:
    radial-gradient(80% 60% at 12% 0%, #2B6AD0 0%, rgba(43, 106, 208, 0) 60%),
    radial-gradient(70% 70% at 100% 100%, #041D4A 0%, rgba(4, 29, 74, 0) 70%),
    var(--royal);
  color: var(--cream);
}
.crest .mission {
  --roll: 20s;
  --field:
    radial-gradient(60% 80% at 0% 50%, rgba(208, 139, 15, 0.22), rgba(208, 139, 15, 0) 70%),
    var(--black);
}
.crest .wednesday {
  --roll: 18s;
  --field:
    radial-gradient(70% 50% at 80% 0%, #FFFBF0 0%, rgba(255, 251, 240, 0) 70%),
    linear-gradient(180deg, #EEE8D8, #DDD4BE);
  color: var(--ink);
}
.crest .hachi {
  --roll: 22s;
  --field:
    radial-gradient(70% 60% at 20% 10%, #B53D12 0%, rgba(181, 61, 18, 0) 65%),
    radial-gradient(60% 60% at 100% 100%, #4E1203 0%, rgba(78, 18, 3, 0) 70%),
    var(--rust);
}
.crest .crew {
  --roll: 24s;
  --field:
    radial-gradient(60% 40% at 90% 0%, rgba(35, 99, 201, 0.35), rgba(35, 99, 201, 0) 70%),
    var(--black);
}
.crest .stand {
  --roll: 15s;
  --field:
    radial-gradient(70% 60% at 30% 20%, #F7BE4A 0%, rgba(247, 190, 74, 0) 65%),
    radial-gradient(60% 50% at 100% 100%, #9C6608 0%, rgba(156, 102, 8, 0) 70%),
    var(--gold);
  color: var(--ink);
}
.crest .letter {
  --roll: 26s;
  --field:
    radial-gradient(60% 40% at 50% 0%, #2B6AD0 0%, rgba(43, 106, 208, 0) 65%),
    var(--royal-deep);
  max-width: none;
  padding-top: 72px;
  padding-bottom: 88px;
}
.crest .letter__sheet { max-width: 916px; margin: 0 auto; }

/* ---------- Type: one display face ---------- */
.crest .hero__title,
.crest .section-title,
.crest .section-title--quiet,
.crest .program__title,
.crest .hachi__lead,
.crest .stand__h-1,
.crest .stand__h-2,
.crest .stand__h-3,
.crest .crew__name,
.crest .letter__signature,
.crest .brand__wordmark > span:first-child {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.crest .section-title--quiet {
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: 0.92;
}
.crest .section-title { font-size: clamp(48px, 7.4vw, 104px); line-height: 0.92; }
.crest .brand__wordmark > span:first-child { font-size: 21px; font-weight: 800; letter-spacing: 0.01em; }

/* Every other heading that was Anton or Roboto Slab. Big titles take
   the display face in caps; small card titles take Inter. */
.crest .stand__h-2,
.crest .wed-hero .wh-1,
.crest .wed-hero .wh-2,
.crest .wed-hero .wh-3,
.crest .donate-hero .dh-1,
.crest .donate-hero .dh-2,
.crest .donate-hero .dh-3,
.crest .res-hero__title,
.crest .apply-hero__title,
.crest .amount-card__val,
.crest .where-row__split strong,
.crest .trust-stat__val,
.crest .archive-row__ep,
.crest .res-sheet__doc-kind,
.crest .res-print__price strong,
.crest .hachi__apply-headline,
.crest .apply-section__title,
.crest .donate-h2,
.crest .wed-h2,
.crest .wed-discord__title,
.crest .res-group__title,
.crest .res-sheet__title,
.crest .res-print__title,
.crest .res-why__title,
.crest .thanks-title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.crest .apply-upload__title,
.crest .apply-thanks h2,
.crest .apply-aside-card h3,
.crest .where-row__title,
.crest .other-card h3,
.crest .wed-format__title,
.crest .archive-row__title,
.crest .special-card__title,
.crest .res-row__title,
.crest .apply-choice__title,
.crest .thanks-pay__title,
.crest .thanks-urgent__title,
.crest .apply-error h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.crest .donate-h2,
.crest .wed-h2,
.crest .res-print__title,
.crest .res-why__title,
.crest .wed-discord__title { font-size: clamp(44px, 6vw, 84px); line-height: 0.92; }
.crest .res-group__title { font-size: clamp(36px, 4.4vw, 60px); line-height: 0.92; }
.crest .res-sheet__title { font-size: clamp(32px, 3.6vw, 48px); line-height: 0.95; }
.crest .apply-section__title { font-size: clamp(34px, 3.8vw, 52px); line-height: 0.95; }
.crest .thanks-title { font-size: clamp(44px, 6vw, 76px); line-height: 0.92; }
.crest .hachi__apply-headline { font-size: clamp(34px, 3.6vw, 48px); line-height: 0.95; }
.crest .brand__badge { font-family: 'Inter', sans-serif; color: var(--gold-hi); border-color: rgba(240, 174, 54, 0.5); text-transform: none; letter-spacing: 0.04em; }

/* ---------- Crisis bar and header ---------- */
.crest .crisis-bar { background: var(--black); border-bottom: 2px solid var(--gold); box-shadow: none; }
.crest .on-air { background: var(--gold-hi); }
.crest .page-nav { background: var(--black); border-bottom: 0; }
.crest .nav-menu { background: var(--gold); color: var(--ink); border: 0; }
.crest .page-nav__links .cta { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---------- Hero ---------- */
.crest .hero { padding-top: 40px; padding-bottom: 64px; }
.crest .hero.has-band .hero__title {
  font-size: min(clamp(52px, 8vw, 116px), calc((100cqi - 132px) / 5));
  line-height: 0.9;
  color: var(--cream);
}
@media (min-width: 960px) {
  .crest .hero.has-band { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); }
  .crest .hero.has-band .hero__title { font-size: clamp(60px, 5.6vw, 86px); }
  .crest .hero { padding-top: 72px; padding-bottom: 88px; }
}
.crest .hero__sub { color: var(--cream); }
.crest .hero__byline { color: var(--cream); }
.crest .hero__byline .rule { background: var(--gold-hi); height: 2px; }
.crest .crew-band__face { background: linear-gradient(180deg, #0E4AAA, var(--royal-deep)); border-radius: 0; }
.crest .crew-band__face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--royal);
  mix-blend-mode: color;
  transition: opacity 1400ms ease;
}
.crest .crew-band__face img { filter: grayscale(1) contrast(1.12) brightness(1.02); }
.crest .crew-band__face.is-lit::after { opacity: 0; }
.crest .crew-band__face.is-lit img { filter: contrast(1.05) saturate(1.05); }
.crest .crew-band__face.is-lit { box-shadow: inset 0 -4px 0 var(--gold-hi); }
/* The band never stops moving, so whichever tile sits at an edge is cut
   through the face. The edges fade into the field instead. */
.crest .has-band > .crew-band {
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 32%, #000 70%, transparent 96%);
          mask-image: linear-gradient(180deg, transparent 4%, #000 32%, #000 70%, transparent 96%);
}

/* ---------- Mission: gold numbers on black ---------- */
.crest .mission { padding-top: 56px; padding-bottom: 64px; }
.crest .mission__facts > div { padding-left: 18px; border-left: 4px solid var(--gold); }
.crest .mission__facts dt { color: var(--gold-hi); }
.crest .mission__facts dd { color: var(--cream); }
.crest .mission__facts dd .unit { color: var(--gold-hi); font-family: 'Inter', sans-serif; font-weight: 800; }

/* ---------- Wednesday: cream field, two solid cards ---------- */
.crest .wednesday { padding-top: 72px; padding-bottom: 80px; }
.crest .wednesday .section-title { color: var(--royal); }
.crest .wednesday .section-lede { color: var(--ink); }
.crest .program {
  border: 0;
  border-radius: 0;
  background: radial-gradient(90% 70% at 0% 0%, #2363C9, rgba(35, 99, 201, 0) 70%), var(--royal);
  color: var(--cream);
  box-shadow: 0 30px 60px -30px rgba(8, 17, 39, 0.6);
}
.crest .program + .program { background: radial-gradient(90% 70% at 0% 0%, #2A2A2A, rgba(42, 42, 42, 0) 70%), var(--black); }
/* When each card is on: a rust band across the top of the card, set in
   the display face, so it reads as part of the card and not a caption. */
.crest .program header {
  margin: -40px -40px 36px;
  padding: 18px 40px 16px;
  background: var(--rust);
  color: var(--cream);
  font: 800 clamp(24px, 2.4vw, 32px)/1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.crest .program__live { color: var(--cream); gap: 14px; }
.crest .program__live .on-air { width: 12px; height: 12px; }
@media (max-width: 880px) {
  .crest .program header { margin: -28px -28px 28px; padding: 16px 28px 14px; }
}
/* Equal columns: the title sizes to its card, never the other way. */
.crest .program-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .crest .program-row { grid-template-columns: minmax(0, 1fr); }
}
.crest .program { container-type: inline-size; display: flex; flex-direction: column; }
.crest .program__actions { margin-top: auto; }
/* The platform's own mark beside its name, in white as each brand kit
   allows. Twitch asks for a third of the Glitch's width clear on each
   side and half again below it: the gap and bottom margin cover that. */
.crest .program__title {
  display: flex;
  align-items: center;
  gap: 0.24em;
  margin-bottom: 0.26em;
  color: var(--cream);
  font-size: clamp(64px, 9vw, 120px);
  font-size: min(120px, 23cqi);
}
.crest .program__mark { flex: 0 0 auto; display: block; height: 0.74em; width: auto; }
.crest .program__mark--twitch { aspect-ratio: 2400 / 2800; }
.crest .program__mark--discord { height: 0.6em; aspect-ratio: 126.644 / 96; }
.crest .program__sub { color: var(--cream); }
.crest .program__body { color: var(--cream); }
.crest .program__actions li:first-child .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.crest .program .btn--ghost { border-color: rgba(238, 232, 216, 0.4); color: var(--cream); }
.crest .wednesday .wed-more a { color: var(--ink); border-color: var(--royal); text-wrap: balance; }
.crest .wednesday .wed-more a span { color: var(--royal); }

/* ---------- Hachi: rust field ---------- */
.crest .hachi { padding-top: 72px; }
.crest .hachi__lead { color: var(--cream); font-size: clamp(72px, 11vw, 176px); line-height: 0.88; }
.crest .hachi__lead > span:last-child { color: var(--gold-hi); }
.crest .hachi__body { color: var(--cream); }
.crest .hachi__support { border-top-color: rgba(238, 232, 216, 0.25); color: var(--cream); }
.crest .hachi__support a { border-bottom-color: var(--gold-hi); }
.crest .hachi__apply { box-shadow: 0 40px 80px -20px rgba(40, 6, 0, 0.7); }
/* The small stamp read 3.6:1 at its old 72% opacity; full strength and a darker red. */
.crest .hachi__apply-stamp { opacity: 1; color: #7A1A04; border-color: #7A1A04; }

/* ---------- Crew: people on royal ---------- */
.crest .crew { padding-top: 72px; }
.crest .crew .section-title { color: var(--cream); }
.crest .crew__portrait {
  border-radius: 0;
  background: radial-gradient(80% 90% at 30% 10%, #2B6AD0 0%, var(--royal) 50%, var(--royal-deep) 100%);
}
.crest .crew__portrait img { filter: contrast(1.06) saturate(0.95); }
.crest .crew__portrait::after {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 50%, rgba(5, 5, 5, 0.6) 76%, #050505 100%);
}
.crest .crew__name { font-size: 40px; color: var(--cream); }
.crest .crew__role { color: var(--gold-hi); font-size: 12px; }

/* ---------- Stand: gold field ---------- */
.crest .stand { padding-top: 80px; padding-bottom: 88px; }
.crest .stand__headline { color: var(--ink); }
.crest .stand__h-1,
.crest .stand__h-3 { color: var(--ink); font-size: clamp(88px, 13vw, 180px); line-height: 0.86; }
.crest .stand__h-2 { font-size: clamp(88px, 13vw, 180px); }
.crest .stand__headline .slab { background: var(--royal); color: var(--cream); padding: 0 0.1em; }
.crest .stand__sub { color: var(--ink); }
.crest .stand__cta {
  padding: 18px 26px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
}
.crest .stand__cta-arrow { color: var(--gold-hi); }
.crest .stand__meta { color: rgba(8, 17, 39, 0.75); }
.crest .stand__divider { background: rgba(8, 17, 39, 0.25); }
.crest .stand__option h3 { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.crest .stand__option p { color: var(--ink); }
.crest .stand__option-link { color: var(--ink); border-bottom-color: var(--ink); }
.crest .stand__option-link span { color: var(--ink); }
.crest .stand__option-note { color: rgba(8, 17, 39, 0.75); }

/* ---------- Letter ---------- */
.crest .letter__signature { font-size: 52px; font-weight: 800; }

/* ============================================================
   INNER PAGES · the same fields in the same order of colors:
   royal hero, then cream, black, gold or rust, royal-deep, and
   the black footer.
============================================================ */

/* ---------- Inner heroes ---------- */
/* Round four: the crew band stays on the home page only. Wednesdays
   puts its countdown where the photos were and Donate its four record
   figures (.has-side, .hero-side); Resources, Apply and Request run
   text only. */
.crest .wed-hero,
.crest .res-hero,
.crest .donate-hero { padding-top: 40px; padding-bottom: 64px; }
.crest .has-side { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.crest .has-side > * { grid-column: 1; min-width: 0; }
@media (min-width: 960px) {
  .crest .has-side { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); column-gap: 64px; }
  .crest .has-side > .hero-side { grid-column: 2; grid-row: 1 / span 4; margin-top: 24px; }
  .crest .wed-hero,
  .crest .res-hero,
  .crest .donate-hero { padding-top: 72px; padding-bottom: 88px; }
  .crest .res-hero__title { font-size: clamp(56px, 5vw, 72px); }
  .crest .donate-hero .dh-2 { font-size: clamp(96px, 8.6vw, 128px); }
}
/* Phones: each headline fits its longest word to the column (the
   divisor is that word's width in ems in Big Shoulders). */
@media (max-width: 959px) {
  .crest .wed-hero,
  .crest .res-hero,
  .crest .donate-hero { container-type: inline-size; }
  .crest .wed-hero .wh-1,
  .crest .wed-hero .wh-3 { font-size: min(clamp(40px, 5.4vw, 84px), calc(100cqi / 6.3)); }
  .crest .wed-hero .wh-2 { font-size: min(clamp(120px, 18vw, 240px), calc(100cqi / 2.3)); }
  .crest .donate-hero .dh-1,
  .crest .donate-hero .dh-3 { font-size: min(clamp(40px, 5.4vw, 84px), calc(100cqi / 6.4)); }
  .crest .donate-hero .dh-2 { font-size: min(clamp(96px, 14vw, 188px), calc(100cqi / 3.35)); }
  .crest .res-hero__title { font-size: min(clamp(46px, 8vw, 118px), calc(100cqi / 5)); }
}
@media (max-width: 600px) {
  .crest .wed-hero,
  .crest .donate-hero { padding-left: 20px; padding-right: 20px; }
}
.crest .apply-hero { container-type: inline-size; }
.crest .apply-hero__title { font-size: min(clamp(44px, 6.6vw, 96px), calc(100cqi / 6.05)); }

/* Wednesdays: the countdown card fills its column. */
.crest .wed-hero .hero-side .wed-status { max-width: 100%; }
@media (min-width: 960px) {
  .crest .wed-hero .hero-side .wed-status__countdown { font-size: clamp(40px, 4.2vw, 64px); }
}
/* On phones the cue keeps its round-three place under the intro and
   the countdown follows it. With the countdown first, the cue's slot
   fell below the fold and the floating cue sat on Watch on Twitch. */
@media (max-width: 959px) {
  .crest .wed-hero .wed-cue-slot { order: 2; }
  .crest .wed-hero .hero-side { order: 3; margin: 0; }
}

/* Donate: the record figures, label over value, each under a rule. */
.crest .hero-figs { margin: 0; display: grid; gap: 22px; }
.crest .hero-figs > div { padding-top: 18px; border-top: 3px solid var(--gold-hi); }
.crest .hero-figs dt { margin: 0 0 8px; font: 800 20px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-hi); }
.crest .hero-figs dd { margin: 0; font: 900 clamp(44px, 4.6vw, 68px)/0.95 var(--display); text-transform: uppercase; white-space: nowrap; color: var(--cream); }
/* The IRS writes 501(c)(3) in lowercase. */
.crest .hero-figs > div:first-child dd { text-transform: none; }
@media (max-width: 959px) {
  .crest .hero-figs { grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 28px; }
  .crest .hero-figs dt { font-size: 15px; }
  .crest .hero-figs dd { font-size: 28px; }
}
.crest .wed-hero__lede,
.crest .res-hero__lede,
.crest .donate-hero__lede { color: var(--cream); }
.crest .wed-hero__title,
.crest .donate-hero__title { line-height: 0.9; color: var(--cream); }
.crest .wed-hero .wh-1,
.crest .wed-hero .wh-3,
.crest .donate-hero .dh-1,
.crest .donate-hero .dh-3 { line-height: 0.92; }
.crest .wed-hero .slab,
.crest .donate-hero .slab { background: var(--gold); color: var(--ink); padding: 0.04em 0.1em 0; margin: 0.04em 0 0.06em; line-height: 0.9; }
.crest .res-hero__title { line-height: 0.9; color: var(--cream); max-width: none; }

/* ---------- Light fields ---------- */
/* main.css colors text, rules and quiet panels with the bone, rule and
   slate-2 tokens, all made for a dark page. On a cream or gold field
   they turn to ink; the accent turns royal on cream and ink on gold. */
.crest .wed-archive,
.crest .res-groups,
.crest .donate-amounts,
.crest .wed-first,
.crest .donate-other {
  --bone: var(--ink);
  --bone-dim: rgba(8, 17, 39, 0.74);
  --rule: rgba(8, 17, 39, 0.18);
  --slate-2: rgba(8, 17, 39, 0.07);
  --lamp: var(--royal);
}
.crest .wed-first,
.crest .donate-other {
  --bone-dim: rgba(8, 17, 39, 0.82);
  --rule: rgba(8, 17, 39, 0.24);
  --slate-2: rgba(8, 17, 39, 0.08);
  --lamp: var(--ink);
}
/* Cards that stay dark inside a light field take the dark tokens back. */
.crest .res-sheet,
.crest .amount-card {
  --bone: var(--cream);
  --bone-dim: rgba(238, 232, 216, 0.78);
  --rule: rgba(238, 232, 216, 0.2);
  --slate-2: #0D0D0D;
  --lamp: var(--gold-hi);
}
.crest .donate-hl { color: inherit; box-shadow: inset 0 -0.12em 0 var(--gold); }

/* ---------- Wednesdays ---------- */
.crest .wed-archive {
  --roll: 18s;
  --field:
    radial-gradient(70% 50% at 80% 0%, #FFFBF0 0%, rgba(255, 251, 240, 0) 70%),
    linear-gradient(180deg, #EEE8D8, #DDD4BE);
  color: var(--ink);
  padding-top: 72px;
  padding-bottom: 80px;
}
.crest .wed-archive .wed-h2 { color: var(--royal); }
.crest .wed-archive .wed-section-lede { color: var(--ink); }
.crest .wed-what {
  --roll: 24s;
  --field:
    radial-gradient(60% 40% at 90% 0%, rgba(35, 99, 201, 0.35), rgba(35, 99, 201, 0) 70%),
    var(--black);
  padding-top: 72px;
  padding-bottom: 72px;
}
.crest .wed-first {
  --roll: 15s;
  --field:
    radial-gradient(70% 60% at 30% 20%, #F7BE4A 0%, rgba(247, 190, 74, 0) 65%),
    radial-gradient(60% 50% at 100% 100%, #9C6608 0%, rgba(156, 102, 8, 0) 70%),
    var(--gold);
  color: var(--ink);
  padding-top: 72px;
  padding-bottom: 80px;
}
.crest .wed-first .wed-h2 { color: var(--ink); }
.crest .wed-format li {
  background: radial-gradient(90% 70% at 0% 0%, #2363C9, rgba(35, 99, 201, 0) 70%), var(--royal);
  border: 0;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.crest .wed-status {
  background: var(--black);
  border: 0;
  border-left: 4px solid var(--gold);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.crest .wed-status__btn--primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
/* Scroll cue: a black tab with the gold chevrons, under the hero's
   intro. The slot keeps its height while the cue is held at the foot
   of a short screen (.is-afloat), lined up with the photo column. */
.crest .wed-cue-slot { height: 64px; margin: -8px 0 36px; }
.crest .wed-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  box-sizing: border-box;
  padding: 4px 24px 4px 10px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: var(--black);
  color: var(--cream);
  font: 900 20px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.75);
}
.crest .wed-cue__mark { display: block; width: 30px; height: 52px; }
.crest .wed-cue__mark svg { display: block; width: 100%; height: 100%; }
/* The chevrons' motion was made in EffectCraft and exported as Lottie;
   these are its keyframes. Each chevron brightens and drifts 6 units
   down over 10 frames and settles over 16, 8 frames apart, on a
   48-frame loop at 30 fps. Under reduced motion it holds frame 26. */
.crest .wed-cue__mark path { opacity: 0.15; }
.crest .wed-cue__mark path:nth-child(2) { opacity: 0.575; transform: translateY(3px); }
.crest .wed-cue__mark path:nth-child(3) { opacity: 1; transform: translateY(6px); }
@keyframes cue-wave {
  0% { opacity: 0.15; transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  20.833% { opacity: 1; transform: translateY(6px); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  54.167%, 100% { opacity: 0.15; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .crest .wed-cue__mark path { animation: cue-wave 1.6s linear infinite both; }
  .crest .wed-cue__mark path:nth-child(2) { animation-delay: 0.2667s; }
  .crest .wed-cue__mark path:nth-child(3) { animation-delay: 0.5333s; }
}
.crest .wed-cue:hover,
.crest .wed-cue:focus-visible { border-color: var(--gold-hi); color: var(--gold-hi); outline: none; }
.crest .wed-cue.is-afloat {
  position: fixed;
  z-index: 90;
  right: var(--cue-right, 20px);
  bottom: max(20px, env(safe-area-inset-bottom));
}
.crest .wed-discord__panel { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.crest .wed-discord {
  --roll: 26s;
  --field:
    radial-gradient(60% 40% at 50% 0%, #2B6AD0 0%, rgba(43, 106, 208, 0) 65%),
    var(--royal-deep);
  padding-top: 72px;
  padding-bottom: 88px;
}

/* ---------- Resources ---------- */
.crest .res-groups {
  --roll: 18s;
  --field:
    radial-gradient(70% 30% at 80% 0%, #FFFBF0 0%, rgba(255, 251, 240, 0) 70%),
    linear-gradient(180deg, #EEE8D8, #DDD4BE);
  color: var(--ink);
  padding-top: 24px;
  padding-bottom: 72px;
}
.crest .res-group { max-width: none; padding-left: 0; padding-right: 0; }
.crest .res-group__title { color: var(--royal); }
/* The binder is a download, so it stays a sheet of paper, lifted off
   the cream field. */
.crest .res-sheet {
  background: #FFFCF4;
  box-shadow: 0 30px 60px -30px rgba(8, 17, 39, 0.45), 0 2px 0 rgba(8, 17, 39, 0.06);
}
.crest .res-print__grace { border-left-color: var(--gold-hi); background: rgba(20, 4, 0, 0.22); }
.crest .res-print {
  --roll: 22s;
  --field:
    radial-gradient(70% 60% at 20% 10%, #B53D12 0%, rgba(181, 61, 18, 0) 65%),
    radial-gradient(60% 60% at 100% 100%, #4E1203 0%, rgba(78, 18, 3, 0) 70%),
    var(--rust);
  color: var(--cream);
  padding-top: 72px;
  padding-bottom: 80px;
}
.crest .res-why {
  --roll: 26s;
  --field:
    radial-gradient(60% 40% at 50% 0%, #2B6AD0 0%, rgba(43, 106, 208, 0) 65%),
    var(--royal-deep);
  padding-top: 72px;
  padding-bottom: 72px;
}

/* ---------- Donate ---------- */
.crest .donate-amounts {
  --roll: 18s;
  --field:
    radial-gradient(70% 50% at 80% 0%, #FFFBF0 0%, rgba(255, 251, 240, 0) 70%),
    linear-gradient(180deg, #EEE8D8, #DDD4BE);
  color: var(--ink);
  padding-top: 72px;
  padding-bottom: 80px;
}
.crest .donate-amounts .donate-h2 { color: var(--royal); }
.crest .donate-amounts .donate-section-lede { color: var(--ink); }
.crest .donate-where {
  --roll: 20s;
  --field:
    radial-gradient(60% 80% at 0% 50%, rgba(208, 139, 15, 0.22), rgba(208, 139, 15, 0) 70%),
    var(--black);
  padding-top: 72px;
  padding-bottom: 72px;
}
.crest .donate-other {
  --roll: 15s;
  --field:
    radial-gradient(70% 60% at 30% 20%, #F7BE4A 0%, rgba(247, 190, 74, 0) 65%),
    radial-gradient(60% 50% at 100% 100%, #9C6608 0%, rgba(156, 102, 8, 0) 70%),
    var(--gold);
  color: var(--ink);
  padding-top: 72px;
  padding-bottom: 80px;
}
.crest .donate-other .donate-h2 { color: var(--ink); }
.crest .amount-card {
  background: radial-gradient(90% 70% at 0% 0%, #2363C9, rgba(35, 99, 201, 0) 70%), var(--royal);
  border: 0;
  box-shadow: 0 24px 48px -28px rgba(8, 17, 39, 0.7);
}
.crest .amount-card:hover { border-color: transparent; }
.crest .amount-card--featured { background: radial-gradient(90% 70% at 0% 0%, #F7BE4A, rgba(247, 190, 74, 0) 70%), var(--gold); color: var(--ink); }
.crest .amount-card--featured .amount-card__val,
.crest .amount-card--featured .amount-card__use { color: var(--ink); opacity: 1; }
.crest .amount-card__tag { background: var(--ink); color: var(--gold-hi); }
.crest .amount-card--custom { background: var(--black); border: 0; }
.crest .other-card { background: transparent; border: 0; border-top: 4px solid var(--ink); padding-left: 0; padding-right: 0; }
.crest .where-row__num,
.crest .where-row__split strong { color: var(--gold-hi); }
.crest .trust-stat__val { color: var(--cream); }
.crest .donate-trust {
  --roll: 26s;
  --field:
    radial-gradient(60% 40% at 50% 0%, #2B6AD0 0%, rgba(43, 106, 208, 0) 65%),
    var(--royal-deep);
  padding-top: 72px;
  padding-bottom: 72px;
}

/* ---------- Apply and Request: one field behind the shell ---------- */
.crest .apply-main {
  background:
    radial-gradient(70% 30% at 10% 0%, #2B6AD0 0%, rgba(43, 106, 208, 0) 70%),
    linear-gradient(180deg, var(--royal) 0, var(--royal-deep) 40%, #04122E 75%, var(--black) 100%);
  color: var(--cream);
}

.crest .apply-hero__title { color: var(--cream); }
.crest .apply-submit__btn {
  align-items: center;
  padding: 18px 28px;
  background: var(--ink);
  color: var(--cream);
  font-size: clamp(20px, 2vw, 24px);
}
.crest .apply-submit__arrow { color: var(--gold-hi); }
@media (max-width: 520px) {
  .crest .apply-submit__btn { font-size: 18px; padding: 16px 20px; text-align: left; }
}

/* ---------- Thank-you pages: the sheet on a royal field ---------- */
.crest .thanks-main {
  background:
    radial-gradient(70% 50% at 10% 0%, #2B6AD0 0%, rgba(43, 106, 208, 0) 70%),
    linear-gradient(180deg, var(--royal) 0, var(--royal-deep) 100%);
}
.crest .thanks-sheet { border-top-color: var(--gold); }
.crest .thanks-title { color: var(--royal); }

/* Small print that measured under 4.5:1 on its field. */
.crest .apply-hero__assurances li { color: var(--cream); }
/* The back link sits in the brightest corner of the field. */
.crest .apply-hero__back a { color: #FFFFFF; }
.crest .apply-hero__hl { color: #F6C76A; }
.crest .apply-field .opt { opacity: 0.68; }
.crest .thanks-help { color: rgba(20, 33, 57, 0.78); }
.crest .res-sheet__doc-detail,
.crest .res-sheet__meta { color: rgba(20, 33, 57, 0.78); }
.crest .res-sheet__updated { opacity: 1; }
.crest .res-print__step-num { color: #F6C76A; }

/* No headline ends on one short word alone on its line. */
.crest h1, .crest h2, .crest h3 { text-wrap: balance; }

/* ---------- Hierarchy: one level per job, each with its own face,
   size and color, so no section is a run of same-color text. ---------- */

/* Donate · where it goes: number, line, note and share read as four
   levels, the row title in the display face. */
.crest .where-row { row-gap: 10px; }
.crest .where-row__num {
  font: 900 clamp(48px, 5vw, 72px)/0.82 var(--display);
  letter-spacing: 0;
}
.crest .where-row__title {
  font: 900 clamp(28px, 2.8vw, 40px)/0.95 var(--display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cream);
}
.crest .where-row__body { font-size: 17px; color: rgba(238, 232, 216, 0.8); }
.crest .where-row__split { font-size: 14px; color: rgba(238, 232, 216, 0.72); }
.crest .where-row__split strong { font-size: clamp(56px, 5.4vw, 80px); }

/* Donate · other ways: the check, with the address to copy, is the main
   path and gets a black panel; the other three are ruled rows. */
.crest .other-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 0;
}
.crest .other-card { padding-top: 22px; padding-bottom: 26px; }
.crest .other-card h3 {
  max-width: 24ch;
  margin-bottom: 12px;
  font: 900 clamp(26px, 2.4vw, 34px)/0.98 var(--display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.crest .other-card__body { font-size: 17px; color: var(--ink); }
.crest .other-card__meta {
  display: inline-block;
  padding: 6px 12px 5px;
  background: var(--royal);
  color: var(--cream);
  font: 800 20px/1 var(--display);
  letter-spacing: 0.04em;
}
.crest .other-grid > .other-card:first-child {
  grid-row: span 3;
  align-self: stretch;
  padding: 36px clamp(24px, 3vw, 40px) 32px;
  background: var(--black);
  border-top: 0;
  box-shadow: 0 30px 60px -30px rgba(8, 17, 39, 0.6);
}
.crest .other-grid > .other-card:first-child h3 { color: var(--cream); }
.crest .other-card__address {
  margin: 22px 0 18px;
  padding-left: 18px;
  border-left: 4px solid var(--gold);
  font: 800 clamp(24px, 2.2vw, 30px)/1.12 var(--display);
  text-transform: uppercase;
  color: var(--gold-hi);
}
.crest .other-card__note { font-size: 14.5px; font-style: normal; color: rgba(238, 232, 216, 0.78); }
.crest .other-contact { font-size: 18px; border-top: 4px solid var(--ink); }
.crest .other-contact a { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--royal); }
@media (max-width: 880px) {
  .crest .other-grid { grid-template-columns: minmax(0, 1fr); }
  .crest .other-grid > .other-card:first-child { grid-row: auto; margin-bottom: 18px; }
}

/* Donate · the record: each label is a gold rule and a gold word, so
   the label, the figure and the note sit on three levels. */
.crest .trust-stat { border-top: 3px solid var(--gold); padding-top: 14px; }
.crest .trust-stat__label {
  margin-bottom: 14px;
  font: 800 20px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.crest .trust-stat__note { font-size: 15px; color: rgba(238, 232, 216, 0.8); }
/* The IRS writes 501(c)(3) in lowercase; capitals would misstate it. */
.crest .trust-stat:first-child .trust-stat__val { text-transform: none; }
/* An EIN is one number; it never breaks at the hyphen. */
.crest .trust-stat__val { white-space: nowrap; }
@media (max-width: 520px) {
  .crest .trust-stat__val { font-size: min(36px, 8vw); }
}

/* Home · the facts strip: the same gold label as the donate record. */
.crest .mission__facts dt {
  margin-bottom: 12px;
  font: 800 20px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Home · stand with us: the two other ways read as headings in the
   display face, under a full rule, with the partner line set apart. */
.crest .stand__meta { font-size: 15px; }
.crest .stand__divider { height: 4px; border: 0; background: var(--ink); }
.crest .stand__option h3 {
  font: 900 clamp(30px, 3vw, 42px)/0.95 var(--display);
  letter-spacing: 0;
  text-transform: uppercase;
}
.crest .stand__option p { font-size: 17px; }
.crest .stand__option-link { font: 800 22px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.crest .stand__option-note { margin-top: 20px; padding-left: 14px; border-left: 4px solid var(--royal); font-size: 15px; }

/* Wednesdays · the schedule: one line per week, date at the left, the
   links on the same line, and the next stream set apart in royal. */
.crest .archive-row {
  grid-template-columns: 132px minmax(0, 1fr) auto;
  grid-template-areas:
    "ep title links"
    "date meta links";
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 6px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 2px solid rgba(8, 17, 39, 0.16);
}
.crest .archive-row__ep { grid-area: ep; font-size: clamp(48px, 4.4vw, 64px); line-height: 0.82; color: var(--royal); }
.crest .archive-row__date {
  grid-area: date;
  font: 800 18px/1 var(--display);
  letter-spacing: 0.06em;
  color: rgba(8, 17, 39, 0.72);
}
.crest .archive-row__title {
  grid-area: title;
  margin: 0;
  font: 900 clamp(26px, 2.4vw, 34px)/0.95 var(--display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.crest .archive-row__meta { grid-area: meta; font-size: 15px; color: rgba(8, 17, 39, 0.78); }
.crest .archive-row__links { grid-area: links; align-self: center; gap: 24px; }
.crest .archive-row__links a {
  font: 800 20px/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
}
/* The panel reaches out past the column by its own padding, so its date
   and title line up with the rows under it. */
.crest .archive-row:first-child {
  --pad: clamp(20px, 2.6vw, 32px);
  margin: 0 calc(-1 * var(--pad)) 8px;
  padding: 28px var(--pad);
  border-bottom: 0;
  background: radial-gradient(90% 90% at 0% 0%, #2363C9, rgba(35, 99, 201, 0) 70%), var(--royal);
  box-shadow: 0 30px 60px -30px rgba(8, 17, 39, 0.6);
}
.crest .archive-row:first-child .archive-row__ep { color: var(--gold-hi); }
.crest .archive-row:first-child .archive-row__date,
.crest .archive-row:first-child .archive-row__meta { color: rgba(238, 232, 216, 0.82); }
.crest .archive-row:first-child .archive-row__title,
.crest .archive-row:first-child .archive-row__links a { color: var(--cream); }
.crest .archive-row:first-child .archive-row__links a { border-bottom-color: var(--gold-hi); }
@media (max-width: 880px) {
  .crest .archive-row {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "ep title"
      "date meta"
      ". links";
    column-gap: 16px;
  }
  .crest .archive-row__ep { font-size: 44px; }
  .crest .archive-row__date { font-size: 15px; }
  .crest .archive-row__links { margin-top: 10px; }
  .crest .archive-row:first-child { --pad: 16px; padding-top: 22px; padding-bottom: 22px; }
}

/* Wednesdays · first time: four different kinds of step. Watching and
   joining sit in the platforms' card colors, the reassurance is set as
   a statement on the field, and the crisis step is rust. */
.crest .first-steps {
  counter-reset: step;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.crest .first-steps li {
  counter-increment: step;
  position: relative;
  padding: 30px 32px 32px;
  border: 0;
  color: var(--cream);
  box-shadow: 0 30px 60px -30px rgba(8, 17, 39, 0.6);
}
.crest .first-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 16px;
  font: 900 clamp(48px, 4.6vw, 64px)/0.82 var(--display);
  color: var(--gold-hi);
}
.crest .first-steps li:nth-child(1) { background: radial-gradient(90% 70% at 0% 0%, #2363C9, rgba(35, 99, 201, 0) 70%), var(--royal); }
.crest .first-steps li:nth-child(2) { background: radial-gradient(90% 70% at 0% 0%, #2A2A2A, rgba(42, 42, 42, 0) 70%), var(--black); }
.crest .first-steps li:nth-child(3) { background: transparent; box-shadow: none; padding-left: 0; color: var(--ink); }
.crest .first-steps li:nth-child(3)::before { color: var(--ink); }
.crest .first-steps li:nth-child(4) { background: var(--rust); }
.crest .first-steps__body { font-size: 18px; color: inherit; }
.crest .first-steps li:nth-child(3) .first-steps__body {
  max-width: 18ch;
  font: 900 clamp(34px, 3.6vw, 52px)/0.96 var(--display);
  text-transform: uppercase;
}
.crest .first-steps__body a { color: inherit; font-weight: 700; border-bottom: 2px solid var(--gold-hi); }
.crest .first-steps__body a:hover { color: var(--gold-hi); }
.crest .first-steps li:nth-child(4) .first-steps__body a { white-space: nowrap; }
.crest .first-steps__body code { background: rgba(0, 0, 0, 0.28); border-color: rgba(238, 232, 216, 0.3); color: var(--cream); }
@media (max-width: 880px) {
  .crest .first-steps { grid-template-columns: minmax(0, 1fr); }
  .crest .first-steps li { padding: 24px 22px 26px; }
  .crest .first-steps li:nth-child(3) { padding: 8px 0; }
}

/* ---------- Footer ---------- */
.crest .colophon { background: var(--black); margin-top: 0; max-width: none; padding-left: max(20px, calc((100vw - 1180px) / 2 + 32px)); border-top: 2px solid var(--gold); }

/* ============================================================
   ROUND FOUR · MORE OF THE CREST'S RED
   Tony, Nov 8: "There needs to be more of the brand's red in the
   site design, it's very heavy gold and blue." The red is the
   crest's own center, #872207 (--rust), with --rust-hi for fills
   on black. Red takes the fields that were gold and the main
   buttons; gold goes back to what the crest uses it for, thin
   lines, labels and the slabs on the royal heroes. Royal keeps the
   heroes. Red and royal are the same lightness, so no red text or
   red rule sits on a royal field.
============================================================ */
/* The glow is #9E300D, a little darker than the Hachi field's, so the
   dimmed cream text stays above 4.5:1 and gold above 3:1 even where
   the glow is brightest. */
.crest {
  --red-field:
    radial-gradient(70% 60% at 20% 10%, #9E300D 0%, rgba(158, 48, 13, 0) 65%),
    radial-gradient(60% 60% at 100% 100%, #4E1203 0%, rgba(78, 18, 3, 0) 70%),
    var(--rust);
  --red-field-b:
    radial-gradient(70% 60% at 85% 0%, #9E300D 0%, rgba(158, 48, 13, 0) 65%),
    radial-gradient(60% 60% at 0% 100%, #4E1203 0%, rgba(78, 18, 3, 0) 70%),
    var(--rust);
}

/* Header and footer: the red line under the crisis bar and over the
   footer, and the two header buttons in red. */
.crest .crisis-bar { border-bottom-color: var(--rust-hi); }
.crest .colophon { border-top-color: var(--rust-hi); }
.crest .nav-menu { background: var(--rust-hi); color: var(--cream); }
.crest .page-nav__links .cta { background: var(--rust-hi); border-color: var(--rust-hi); color: var(--cream); }
.crest .page-nav__links .cta:hover,
.crest .page-nav__links a.cta.cta--current:hover { background: var(--cream); border-color: var(--cream); color: var(--rust); }

/* Main buttons in red. */
.crest .program__actions li:first-child .btn,
.crest .wed-status__btn--primary { background: var(--rust-hi); border-color: var(--rust-hi); color: var(--cream); }
.crest .program__actions li:first-child .btn:hover,
.crest .wed-status__btn--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--rust); }
.crest .wed-status { border-left-color: var(--rust-hi); }

/* Home · the facts strip and its glow on black. */
.crest .mission {
  --field:
    radial-gradient(60% 80% at 0% 50%, rgba(178, 56, 15, 0.34), rgba(178, 56, 15, 0) 70%),
    var(--black);
}
.crest .mission__facts > div { border-left-color: var(--rust-hi); }

/* Home · Stand with us: red field, cream type, the gold slab the
   other headlines use, and a cream button. */
.crest .stand { --field: var(--red-field-b); color: var(--cream); }
.crest .stand__headline,
.crest .stand__h-1,
.crest .stand__h-3,
.crest .stand__sub,
.crest .stand__option h3,
.crest .stand__option p,
.crest .stand__option-link { color: var(--cream); }
.crest .stand__headline .slab { background: var(--gold); color: var(--ink); }
.crest .stand__cta { background: var(--cream); color: var(--ink); }
.crest .stand__cta-arrow { color: var(--rust); }
.crest .stand__meta,
.crest .stand__option-note { color: rgba(238, 232, 216, 0.9); }
.crest .stand__divider { background: var(--gold-hi); }
.crest .stand__option-link { border-bottom-color: var(--gold-hi); }
.crest .stand__option-link span { color: var(--gold-hi); }
.crest .stand__option-note { border-left-color: var(--gold-hi); }

/* Wednesdays · first time: red field. The crisis step, red before,
   turns cream so it still stands apart. */
.crest .wed-first {
  --field: var(--red-field);
  --bone: var(--cream);
  --bone-dim: rgba(238, 232, 216, 0.9);
  --rule: rgba(238, 232, 216, 0.24);
  --slate-2: rgba(0, 0, 0, 0.18);
  --lamp: var(--gold-hi);
  color: var(--cream);
}
.crest .wed-first .wed-h2,
.crest .first-steps li:nth-child(3),
.crest .first-steps li:nth-child(3)::before { color: var(--cream); }
.crest .first-steps li:nth-child(4) { background: var(--cream); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(40, 6, 0, 0.8); }
.crest .first-steps li:nth-child(4)::before { color: var(--rust); }
.crest .first-steps li:nth-child(4) .first-steps__body a { border-bottom-color: var(--rust); }
.crest .first-steps li:nth-child(4) .first-steps__body a:hover { color: var(--rust); }
.crest .first-steps li:nth-child(4) .first-steps__body code { background: rgba(8, 17, 39, 0.07); border-color: rgba(8, 17, 39, 0.2); color: var(--ink); }

/* Donate · the most common amount in red. */
.crest .amount-card--featured {
  background: radial-gradient(90% 70% at 0% 0%, #9E300D, rgba(158, 48, 13, 0) 70%), var(--rust);
  color: var(--cream);
}
.crest .amount-card--featured .amount-card__val,
.crest .amount-card--featured .amount-card__use { color: var(--cream); }
.crest .amount-card__tag { background: var(--gold-hi); color: var(--ink); }

/* Donate · where it goes: the glow on black turns red. */
.crest .donate-where {
  --field:
    radial-gradient(60% 80% at 0% 50%, rgba(178, 56, 15, 0.34), rgba(178, 56, 15, 0) 70%),
    var(--black);
}

/* Donate · other ways: red field; the check panel stays black. */
.crest .donate-other {
  --field: var(--red-field-b);
  --bone: var(--cream);
  --bone-dim: rgba(238, 232, 216, 0.9);
  --rule: rgba(238, 232, 216, 0.24);
  --slate-2: rgba(0, 0, 0, 0.18);
  --lamp: var(--gold-hi);
  color: var(--cream);
}
.crest .donate-other .donate-h2,
.crest .other-card h3,
.crest .other-card__body,
.crest .other-contact,
.crest .other-contact a { color: var(--cream); }
.crest .other-card { border-top-color: var(--gold-hi); }
.crest .other-card__meta { background: var(--gold-hi); color: var(--ink); }
.crest .other-contact { border-top-color: var(--gold-hi); }
.crest .other-contact a { border-bottom-color: var(--gold-hi); }

/* Apply and Request: the send button in red, and the red edge on the
   side cards. Thank-you sheets take the red edge too. */
.crest .apply-submit__btn { background: var(--rust); color: var(--cream); }
.crest .apply-submit__btn:hover { background: var(--rust-hi); }
.crest .apply-aside-card { border-top-color: var(--rust-hi); }
.crest .thanks-sheet { border-top-color: var(--rust); }