/*
 * Beta Cell Foundation — shared stylesheet.
 *
 * Source of truth: assets/css/site.css on the main site, sliced to the blocks
 * a subdomain needs. Consumed at build time by wild and the LMS.
 *
 * Do not edit this file directly. Edit site.css and re-run
 * _tools/build-partials.py.
 */

:root {
  /* Brand palette — BCF Brand Guide 2026 */
  --bg:          #0a0e14;
  --surface:     #111620;
  --surface2:    #181f2e;
  --border:      #1e2a3a;
  --accent:      #1CCDFE;
  --accent2:     #0096ff;
  --accent-glow: rgba(28,205,254,0.10);
  --accent-ring: rgba(28,205,254,0.22);
  --cta:         #FFD53F;
  --cta-text:    #1a1a1a;
  --text:        #ffffff;
  --text-muted:  #8ca0bc;   /* 6.2:1 — primary reading colour */
  --text-dim:    #7f92ad;   /* 5.2:1 — labels; see header note */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Spacing — 4px base, named for the relationship each interval expresses.
     The ordering is the point: binding is always tighter than separation. */
  --space-bind:    16px;  /* heading → the content it introduces */
  --space-item:    20px;  /* siblings inside one group */
  --space-group:   48px;  /* group → the next group */
  --space-section: 64px;  /* section's own padding; 128px between two sections */
  --space-band:    88px;  /* a tonal band needs more air than a plain section */
  --space-chapter: 96px;  /* page intro → body; the largest change in meaning */

  /* Measures */
  --shell:  1120px;  /* outer page width */
  --prose:  660px;   /* ~68 characters — reading measure */
  --label:  148px;   /* margin label column */
  --gutter: 56px;    /* label → content */
}

@media (max-width: 900px) {
  :root {
    --space-group:   36px;
    --space-section: 44px;
    --space-band:    56px;
    --space-chapter: 64px;
  }
}
/* ── TYPE ──────────────────────────────────────────────────────────────── */
/* Syne carries the page title. From H2 down it sits at reading sizes where its
   width slows the eye, so headings below the title use the body face. */
h1, .display { font-family: 'Syne', sans-serif; color: var(--text); }
h2, h3, h4 { font-family: 'DM Sans', sans-serif; color: var(--text); }

.hi { color: var(--accent); }

.t-page {                                  /* page title */
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.t-section {                               /* section heading */
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.t-block {                                 /* sub-heading inside a section */
  font-family: 'DM Sans', sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}
.t-card {
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

/* DM Mono labels metadata only — never sentences. */
.label {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  line-height: 1.4;
}
.label-dim { color: var(--text-dim); }

.lead {
  font-size: clamp(19px, 2.1vw, 22px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: var(--prose);
  text-wrap: pretty;
}

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: var(--space-bind); }
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }
/* ── SHELL ─────────────────────────────────────────────────────────────── */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 32px;
}
@media (max-width: 600px) { .shell { padding-inline: 20px; } }
/* ── HEADER ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,14,20,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.site-header-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 600px) { .site-header-in { padding: 0 20px; } }

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 36px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--accent); }

/* Same object as .btn-primary — it was inheriting the nav's muted link colour
   and losing its background on hover. */
.btn-support {
  background: var(--cta);
  color: var(--cta-text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  white-space: nowrap;
  transition: background .15s;
}
.nav a.btn-support,
.nav-mobile a.btn-support {
  color: var(--cta-text);
  font-weight: 600;
  font-size: 16px;
}
.nav a.btn-support:hover,
.nav-mobile a.btn-support:hover,
.btn-support:hover { background: #ffe066; color: var(--cta-text); }
.nav a.btn-support[aria-current="page"] { color: var(--cta-text); }

.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* touch floor */
  padding: 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The full nav plus the Support pill needs ~900px before it would clip. */
@media (max-width: 940px) {
  .nav { display: none; }
  .hamburger { display: flex; }
}

.nav-mobile {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 199;
  background: rgba(10,14,20,0.985);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  padding: 24px 20px;
  gap: 2px;
  overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 14px 12px;
  border-radius: var(--radius-sm);
}
.nav-mobile a:hover { color: var(--text); background: var(--surface); }
.nav-mobile a[aria-current="page"] { color: var(--accent); }
.nav-mobile .btn-support {
  margin: 16px 0 0;
  text-align: center;
  padding: 14px 18px;
  font-size: 17px;
}
/* ── PAGE INTRO ────────────────────────────────────────────────────────
   Every page opens identically: mono eyebrow, title, one subhead. */
.page-intro {
  padding-top: clamp(56px, 8vw, 88px);
  padding-bottom: var(--space-chapter);
}
.page-intro > .shell { position: relative; z-index: 1; }
.page-intro .label { margin-bottom: 18px; }
.page-intro .t-page { margin-bottom: 24px; max-width: 16ch; }
/* The split column is ~530px wide, where the full 54px display face fits only
   nine characters per line. The title steps down and the text column takes more
   of the row, so the hook reads in three lines instead of five. */
.intro-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.intro-split .t-page { font-size: clamp(32px, 3.7vw, 45px); max-width: none; }
.page-intro .t-page.wide { max-width: 22ch; }
.page-intro .lead { margin-bottom: 0; }
.page-intro .actions { margin-top: 36px; }
/* ── SECTION + MARGIN LABEL ────────────────────────────────────────────
   The system's signature. The label rides in the margin on wide screens
   and stacks above the content on narrow ones — one block, both layouts. */
.section { padding-block: var(--space-section); }

.section-in {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 900px) {
  .section-in { grid-template-columns: 1fr; gap: var(--space-bind); }
}

.section-label { position: sticky; top: 96px; }
@media (max-width: 900px) { .section-label { position: static; } }

.section-body > * + * { margin-top: var(--space-bind); }
.section-body > .t-section + * { margin-top: 20px; }
.section-body > * + .t-block { margin-top: var(--space-group); }

/* Tonal ground — separates sections without a rule or a box. */
.band { background: var(--surface); padding-block: var(--space-band); }
.band-2 { background: var(--surface2); padding-block: var(--space-band); }
/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;   /* a <button>.btn would inherit the UA buttonface */
  line-height: 1.2;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--cta); color: var(--cta-text); }
.btn-primary:hover { background: #ffe066; }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent-ring); background: var(--accent-glow); }
.btn-ghost {
  background: var(--accent-glow);
  border-color: var(--accent-ring);
  color: var(--accent);
}
.btn-ghost:hover { background: rgba(28,205,254,0.16); }

/* Inline forward link — the manual's "see also". */
.go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 500;
  font-size: 17px;
}
.go::after { content: '→'; transition: transform .15s; }
.go:hover::after { transform: translateX(3px); }
/* ── STEP LIST ─────────────────────────────────────────────────────────
   Numbered sequence. Carries the build-instruction grammar: the number
   leads, the rule threads the steps together, nothing is boxed. */
.steps { list-style: none; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  padding-bottom: var(--space-group);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -2px;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .04em;
}
/* The thread. Stops at the last step rather than trailing into nothing. */
.steps > li::after {
  content: '';
  position: absolute;
  left: 15px; top: 26px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps .t-block { margin-bottom: 8px; }
@media (max-width: 600px) {
  .steps > li { padding-left: 44px; }
  .steps > li::after { left: 10px; }
}
/* ── CARDS ─────────────────────────────────────────────────────────────
   One card. Used for programs and simulators alike so the anatomy is
   learned once. Tracks follow the item count instead of a fixed grid. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--space-item);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* One card keeps a card's width instead of stretching across the row. */
.grid:has(> :only-child) { grid-template-columns: minmax(268px, 420px); }
@media (min-width: 780px) {
  .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .15s, transform .15s;
}
.band .card, .band-2 .card { background: var(--bg); }
/* Only a card you can actually activate gets the affordance. */
a.card:hover, .card:has(a):hover {
  border-color: var(--accent-ring);
  transform: translateY(-2px);
}
.card .label { margin-bottom: 2px; }
.card p { font-size: 17px; line-height: 1.6; }
.card .go { margin-top: auto; padding-top: 10px; font-size: 16px; }
/* ── CALLOUT ───────────────────────────────────────────────────────────── */
.callout {
  padding: 20px 24px;
  border-left: 1px solid var(--accent);
  background: var(--accent-glow);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 17px;
  max-width: var(--prose);
}
.callout-cta { border-left-color: var(--cta); background: rgba(255,213,63,0.08); }
.callout .label { margin-bottom: 6px; }
/* ── FACTS ─────────────────────────────────────────────────────────────── */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-group) 56px; }
.fact { min-width: 150px; }
.fact-n {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.fact-l { margin-top: 6px; font-size: 16px; color: var(--text-muted); max-width: 26ch; }
/* ── SIMULATOR FRAME ───────────────────────────────────────────────────
   The embed is the content; it gets no decorative shell. Space is
   reserved until the frame reports its height (see site.js). */
.sim-frame {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-height: 900px;
  display: block;
}
@media (max-width: 700px) { .sim-frame { min-height: 1150px; } }
/* ── FORM ──────────────────────────────────────────────────────────────── */
.form { max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 16px; font-weight: 600; color: var(--text); }
.field .hint { font-size: 15px; color: var(--text-dim); }
.field input, .field textarea, .field select {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  min-height: 48px;
  width: 100%;
  transition: border-color .15s;
}
.band .field input, .band .field textarea, .band .field select { background: var(--bg); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
/* ── FOOTER ────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 64px 32px;
}
.footer-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 32px;
  display: grid;
  /* Four equal quarters. The brand no longer takes a wider track than the link
     columns, which buys each of them room and lets the longest labels sit on
     one line. The wider column gap is the point — the columns read as separate
     lists rather than one field of links. */
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 48px;
}
@media (max-width: 900px) { .footer-in { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
@media (max-width: 600px) { .footer-in { padding-inline: 20px; } }

/* The wordmark spans the description column beneath it. */
.footer-brand img { width: 100%; max-width: 240px; height: auto; margin-bottom: 16px; }
.footer-mission { font-size: 15px; color: var(--text-dim); max-width: 240px; line-height: 1.6; }
.footer-col-t {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
/* Padding not margin — 44px rows at the same visual density. */
.footer-col a {
  display: block;
  font-size: 16px;
  color: var(--text-muted);
  padding: 9px 0;
  transition: color .15s;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: var(--shell);
  margin: 40px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 15px;
  color: var(--text-dim);
}
@media (max-width: 600px) { .footer-bottom { padding-inline: 20px; } }
.footer-bottom a:hover { color: var(--accent); }
.footer-legal { display: flex; gap: 20px; }

/* The contact block sits under the wordmark: address, an institutional
   mailbox, and the EIN. Stacked rather than run together, so a funder can
   copy any one line without picking it out of a sentence. */
.footer-contact {
  font-style: normal;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 240px;
}
.footer-contact a { color: var(--text-muted); }
.footer-contact a:hover { color: var(--accent); }
.footer-ein { font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .04em; }

/* Trust row — its own rule above the legal line, because a third-party seal
   is a different kind of claim from a copyright notice and should not read
   as fine print. */
.footer-trust {
  max-width: var(--shell);
  margin: 40px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
/* The seal is a third party's mark and ships unmodified — no recolouring, no
   mask. It reads as a light square on the navy, which is what a credential
   should look like. */
.footer-seal { width: 68px; height: auto; flex: none; }
.footer-trust-text { display: flex; flex-direction: column; gap: 4px; }
.footer-trust a {
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-trust a:hover { color: var(--accent); }
@media (max-width: 600px) { .footer-trust { padding-inline: 20px; } }

/* The legal line follows the trust row, so it no longer draws its own rule. */
.footer-trust + .footer-bottom { margin-top: 24px; border-top: 0; padding-top: 0; }

/* Page-level seal lockup — same mark, sitting beside the paragraph that
   explains what it is rather than in the footer's legal strip. */
.seal-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.seal-row img { width: 92px; height: auto; flex: none; }
.seal-row .seal-text { max-width: var(--prose); font-size: 17px; color: var(--text-muted); line-height: 1.7; }
/* ── PLATE ─────────────────────────────────────────────────────────────
   A captioned figure, the manual's plate. Source photography maxes out at
   600x400, so plates are sized to what the file can carry rather than
   stretched full-bleed, where the upscale would show. */
.plate { margin: 0; }
.plate img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.plate figcaption {
  margin-top: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Hero with a plate alongside. Text leads; the plate never outranks it. */
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .intro-split { grid-template-columns: 1fr; gap: 40px; }
  .intro-split .plate { order: 2; }
}

/* A row of plates — program pages. */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-item);
}
/* ── PAGE-INTRO TEXTURE ────────────────────────────────────────────────
   Each page carries its own quiet background motion, at the opacity,
   speed, and direction the previous site used. All of it is decorative and
   pointer-inert; the reduced-motion block above stops every animation. */
.page-intro { position: relative; overflow: hidden; }
.page-intro > * { position: relative; z-index: 1; }

.hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Ambient wash, present on every page intro. */
.page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(28,205,254,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(255,213,63,.05) 0%, transparent 70%);
}

/* Simulators — sine waves on canvas (see site.js). */
.hero-wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Type One Run — the world map scrolling sideways. */
.hero-map {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  animation: map-scroll 140s linear infinite;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
}
.hero-map-img {
  flex-shrink: 0;
  height: 100%;
  width: auto;
  opacity: 0.04;
  filter: brightness(0) invert(1);
}
@keyframes map-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* T1Ds in the Wild — a grid drifting downward. */
.hero-grid-bg {
  position: absolute;
  inset: -60px 0 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(28,205,254,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,205,254,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 80%);
  animation: grid-scroll 8s linear infinite;
}
@keyframes grid-scroll { from { transform: translateY(0); } to { transform: translateY(60px); } }

/* Education — a dot field breathing. */
.hero-dots { position: absolute; inset: 0; pointer-events: none; }
.hero-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(28,205,254,0.14) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
  animation: dots-pulse 4s ease-in-out infinite, dots-drift 24s linear infinite;
}
@keyframes dots-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes dots-drift { from { background-position: 0 0; } to { background-position: 24px 24px; } }
/* ── PROGRAM LOCKUP ────────────────────────────────────────────────────
   A program page leads with its own mark above the BCF page title. */
/* Beside the title on wide screens, above it when the split collapses.
   The mark column is sized to the mark itself: a 1fr column left the logo
   centred in 460px of track, so it read as ~185px from the text when the
   grid gap was 64. */
.intro-split:has(.intro-mark) {
  /* A definite track, not auto: an SVG sized by max-height inside an auto
     track has no resolvable intrinsic width and collapses to zero. */
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 44px;
}
.intro-mark { display: flex; align-items: center; justify-content: flex-start; }
.intro-mark img { max-width: 100%; max-height: 200px; width: auto; height: auto; }
@media (max-width: 900px) {
  /* This override needs .intro-split:has(.intro-mark)'s specificity to beat it —
     a media query adds none, so the plain .intro-split rule above lost and the
     grid never collapsed. The text column was squeezed to 66px on a phone
     beside a fixed 240px logo track. */
  .intro-split:has(.intro-mark) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* The mark follows the copy on a phone rather than leading it, and is capped
     to the height of the home page's hero image (234px at 390px wide). A
     landscape mark such as Type One Run hits the width limit first and lands
     shorter; a portrait one such as T1Ds in the Wild reaches the full height. */
  /* Centred once the split collapses — left-aligned, a mark narrower than the
     column reads as though it slipped out of the grid. */
  .intro-mark { justify-content: center; }
  .intro-mark img { max-height: 234px; max-width: 100%; width: auto; }
}
/* ── FEATURE LIST ──────────────────────────────────────────────────────
   Observation and takeaway lists inside the teaching sections. */
.flist { list-style: none; max-width: var(--prose); }
.flist li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.6;
}
.flist li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.flist li strong { color: var(--text); }
.section-body > *:last-child { margin-bottom: 0; }
.section-body .flist:last-child li:last-child { margin-bottom: 0; }

/* Home — the topographic field drifting, as on the previous site. */
.hero-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
}
.hero-topo::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 3deg, rgba(28,205,254,0.05) 3deg, rgba(28,205,254,0.05) 3.5deg);
  animation: topo-drift 120s linear infinite;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%);
}
@keyframes topo-drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* The active-page rule outranked the pill on the mobile panel. */
.nav-mobile a.btn-support[aria-current="page"] { color: var(--cta-text); }
/* ── FOOTER NEWSLETTER ─────────────────────────────────────────────────
   Sits at the top of the footer on every page, above the link columns and
   divided from them by a hairline.

   The form is Zeffy's embed, which is cross-origin — its field and button
   cannot be restyled from here. Two things make it sit well anyway: every
   background inside it is transparent, so our ground shows through, and its
   submit button already renders in Beacon Yellow (#FFD53F).

   The frame is given more height than the form needs rather than cropped to
   fit. Its internal geometry moves with width (204px tall at 1280, 168px at
   400, with the email field starting at y77 and y57 respectively), so a
   fixed-pixel crop that hid the heading on desktop would slice through the
   field on a phone. Transparent overflow is invisible; a bad crop is not. */
.footer-cta {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 32px var(--space-group);
  margin-bottom: var(--space-group);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) { .footer-cta { padding-inline: 20px; } }

.footer-cta-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 24px 56px;
  /* Top-aligned, not centred, so the embed's own heading lines up with ours
     rather than floating above the eyebrow. */
  align-items: start;
}
@media (max-width: 860px) {
  .footer-cta-in { grid-template-columns: 1fr; gap: 20px; }
}

.footer-cta-text { max-width: 460px; }
.footer-cta .label { margin-bottom: 10px; }
.footer-cta-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 8px;
  text-wrap: balance;
}
.footer-cta-body { font-size: 17px; line-height: 1.6; color: var(--text-muted); }

/* The embed reports no height to us, so the frame is sized generously and the
   surplus stays transparent. */
/* Our headline sits 28px below the eyebrow; the embed's heading sits 24px
   inside its own frame. The 4px makes the two headings share a baseline —
   an optical alignment to a third-party frame, so it is deliberately tiny
   and harmless if Zeffy ever changes its padding. */
.footer-form { width: 100%; margin-top: 4px; }
@media (max-width: 860px) { .footer-form { margin-top: 0; } }
.footer-form iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  background: transparent;
}
@media (max-width: 860px) { .footer-form iframe { height: 190px; } }