/* © 2026 William C. Chesher. All Rights Reserved.
   sfhsbta.com — site stylesheet.

   Owns three things that inline styles cannot do: media queries, hover/focus
   states, and the CSS-only filtering on /sources. Same origin, no @import, no
   webfonts — the fonts still come from _ds/ via the design-system tokens.

   Sections:  1 header + navigation   2 charts   3 sources library
*/

:root {
  --bta-ink: #1B1B1B;
  --bta-cream: #FEFEFE;
  --bta-yellow: #FFDE59;
  --bta-line: #DEDEDA;
  --bta-mute: #6C6C67;          /* 5.23 on cream -- and 3.26 on ink, which is the point */
  --bta-gold: #8A6A12;
  /* THE SAME TWO ROLES, DECLARED FOR A DARK GROUND. Without these, a page that needed quiet
     text on ink had nowhere to get it and invented one: #91918B and #B9B9B2 both appear as
     inline hardcodes, and both are CORRECT on ink (5.44 and 8.73) and badly wrong on cream
     (3.14 and 1.95), which is exactly what happens when a value is chosen by eye against
     whatever ground the author was looking at. Measured, not picked: 4.96 and 4.95 against
     the two dark grounds this site actually uses. */
  --bta-mute-on-dark: #8A8A83;  /* 4.96 on --bta-ink, 5.44 on the #111110 cards */
  --bta-gold-on-dark: #9A8030;  /* 4.95 on the #111110 award cards */

  /* THE HERO SCRIM, ONCE. It was THIRTEEN copies in SEVEN spellings across eight files --
     the same `.92/.80/.42/.10` four-stop written with and without leading zeros, a `.93/.06`
     variant on two pages, a five-stop on /proof, and three one-off darkenings. Same disease
     the highlight comment below records for the yellow, and worse here: a scrim is the one
     thing standing between a headline and an unreadable photograph, so the copy a change
     misses is the one that fails in a bright room on a projector.

     BRIGHTER, PUSHED LEFT, LESS GRADUAL (operator, 2026-09-12). The old curve was still at
     .42 alpha at 62% across and did not reach clear until the right edge, so it dimmed the
     photograph's subject to protect copy that stops around 40%. Measured on /events and
     /proof, the band's mean luminance was 0.016-0.033 while the copy sat at contrast 8-18
     against a 4.5 floor: the scrim was buying darkness nothing needed. This curve holds the
     left where the words are, then clears by 72% so the picture is the hero. */
  --bta-hero-sweep: linear-gradient(100deg,
    rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 18%, rgba(0,0,0,.26) 40%,
    rgba(0,0,0,.04) 58%, rgba(0,0,0,0) 72%);
  /* The bottom lift under the corner caption and the lowest line of copy. */
  --bta-hero-foot: linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,0) 32%);

  /* THE HERO HEADLINE SIZE, ONCE. Same story as the scrim above: one decision written three
     times -- this clamp in `.fb-in h1`, the same numbers again in /proof's `.ev-h1`, and
     clamp(26px,3.0vw,44px) inline on /why, which is 44px against 52px at 1610 and read as a
     different page. /why's hero is not a .fb-hero and cannot inherit the rule, so it takes
     the token; a page that needs its own size overrides the token rather than inventing a
     fourth clamp. Measured before raising /why: at 44px the headline cleared the nearer
     student's face by 237-324px at 1366-2560, so the band has the room. */
  --bta-hero-h1: clamp(28px, 3.4vw, 52px);
  /* And the lead with it. This was 17px on the shared heroes and 20px on /proof and /why --
     one decision, two numbers, and the pages that differed were the two with page-local hero
     CSS. 19px is the shared value: the 17 was set against a 42ch measure and reads thin
     beside a 52px headline, the 20 was never a decision, only the page default leaking in. */
  --bta-hero-lead: 19px;
}

/* ============================================================ 1. header */

.hd {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  min-height: 76px;
  padding: 14px 40px;
  border-bottom: 1px solid var(--bta-line);
  background: var(--bta-cream);
}
.hd-seal { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.hd-name { display: flex; flex-direction: column; line-height: 1; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.hd-name b {
  font-family: var(--font-core); font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--bta-ink); white-space: nowrap;
}
.hd-name span {
  font-family: var(--font-core); font-weight: 700; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--bta-mute); margin-top: 5px;
}

/* ------------------------------------------------------- 1b. navigation */

.nv { margin-left: auto; display: flex; align-items: center; gap: 10px 22px; position: relative; }

.nv-inline {
  display: flex; align-items: center; gap: 4px 22px;
  font-family: var(--font-core); font-weight: 700; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.nv-a {
  color: var(--bta-ink); text-decoration: none; white-space: nowrap;
  padding: 5px 0; border-bottom: 3px solid transparent;
  transition: border-color 140ms cubic-bezier(.2,0,.2,1);
}
.nv-a:hover, .nv-a:focus-visible { color: var(--bta-ink); border-bottom-color: var(--bta-line); }
.nv-a.is-on { font-weight: 800; border-bottom-color: var(--bta-yellow); }

.nv-d { position: relative; display: flex; }
.nv-s {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border: 1px solid var(--bta-line); border-radius: 999px; background: var(--bta-cream);
  font-family: var(--font-core); font-weight: 700; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--bta-ink);
  cursor: pointer; list-style: none; white-space: nowrap; user-select: none;
  transition: background 140ms cubic-bezier(.2,0,.2,1), border-color 140ms cubic-bezier(.2,0,.2,1);
}
.nv-s::-webkit-details-marker { display: none; }
.nv-s:hover { background: #F7F7F2; border-color: #C9C9C2; }
.nv-s:focus-visible { outline: 3px solid var(--bta-yellow); outline-offset: 2px; }
.nv-s i { display: block; width: 9px; height: 9px; border-right: 2px solid var(--bta-ink); border-bottom: 2px solid var(--bta-ink); transform: translateY(-2px) rotate(45deg); transition: transform 140ms cubic-bezier(.2,0,.2,1); }
.nv-d[open] .nv-s { background: var(--bta-yellow); border-color: #E8C63F; }
.nv-d[open] .nv-s i { transform: translateY(1px) rotate(-135deg); }

.nv-p {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(3, minmax(min(158px, 100%), 1fr)); gap: 26px 40px;
  width: max-content; max-width: min(90vw, 700px);
  padding: 26px 30px 28px;
  background: var(--bta-cream); border: 1px solid var(--bta-line); border-radius: 18px;
  box-shadow: 0 20px 48px rgba(27,27,27,0.16);
  animation: nvIn 180ms cubic-bezier(.16,1,.3,1);
}
@keyframes nvIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.nv-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-h {
  font-family: var(--font-core); font-weight: 700; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bta-mute);
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bta-line);
}
.nv-l {
  display: block; padding: 7px 8px; margin: 0 -8px; border-radius: 8px;
  font-family: var(--font-text); font-size: 15px; line-height: 1.3;
  color: var(--bta-ink); text-decoration: none;
  transition: background 140ms cubic-bezier(.2,0,.2,1);
}
.nv-l:hover, .nv-l:focus-visible { background: #F5F5EF; color: var(--bta-ink); }
.nv-l.is-on { font-weight: 700; box-shadow: inset 3px 0 0 var(--bta-yellow); }
.nv-l small { display: block; font-size: 12px; line-height: 1.35; color: var(--bta-mute); margin-top: 2px; }

.nv-apply {
  display: inline-flex; flex: 0 0 auto; align-items: center; height: 36px; padding: 0 18px;
  border-radius: 999px; background: var(--bta-yellow); color: #000; text-decoration: none;
  font-family: var(--font-core); font-weight: 800; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 140ms cubic-bezier(.2,0,.2,1);
}
.nv-apply:hover { background: #F2CE3C; color: #000; }

.nv-s .sm-only { display: none; }
.nv-col-primary { display: none; }

@media (max-width: 1080px) {
  .nv-inline { font-size: 12px; gap: 4px 16px; }
}
@media (max-width: 900px) {
  .hd { padding: 12px 20px; gap: 12px 14px; }
  .nv-inline, .nv > .nv-apply { display: none; }
  .nv-s .lg-only { display: none; }
  .nv-s .sm-only { display: inline; }
  .nv-col-primary { display: flex; }
  .nv-p {
    grid-template-columns: 1fr; gap: 22px;
    width: min(88vw, 340px); max-width: none;
    max-height: min(74vh, 620px); overflow-y: auto;
    padding: 22px 22px 24px;
  }
  .nv-p .nv-apply { margin-top: 10px; justify-content: center; }
}

/* ============================================================ 2. charts

   These used to be hand-plotted SVG on a fixed 940px viewBox, which scaled the
   type down with the drawing — 15px labels became 5px on a phone. They are now
   HTML: the bars flex, the type never scales. Bar heights are set inline by the
   generator; nothing here needs to know the numbers. */

.ch-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr)); gap: 40px 44px; margin-top: 8px; }
.ch-panel { min-width: 0; }
.ch-t { margin: 0; font-family: var(--font-core); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; color: var(--bta-ink); }
.ch-s { margin: 6px 0 0; font-family: var(--font-text); font-size: 15px; line-height: 1.4; color: var(--bta-mute); }
.ch-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: end; margin-top: 24px; border-bottom: 2px solid var(--bta-line); }
.ch-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.ch-v { font-family: var(--font-core); font-weight: 800; font-size: 26px; letter-spacing: -0.015em; color: var(--bta-ink); margin-bottom: 10px; white-space: nowrap; }
.ch-col { width: 100%; max-width: 108px; border-radius: 10px 10px 0 0; }
.ch-labs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 12px; }
.ch-labs span { font-family: var(--font-text); font-size: 14px; line-height: 1.3; color: var(--bta-ink); text-align: center; }
.ch-note { margin: 16px 0 0; font-family: var(--font-text); font-size: 14px; font-weight: 700; color: var(--bta-gold); }

.cs-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; font-family: var(--font-text); font-size: 14px; color: var(--bta-ink); }
.cs-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cs-key { width: 14px; height: 14px; border-radius: 4px; box-sizing: border-box; }
.cs-plot { position: relative; height: 240px; margin-left: 56px; border-bottom: 2px solid var(--bta-line); }
.cs-g { position: absolute; left: 0; right: 0; border-top: 1px solid var(--bta-line); }
.cs-g b { position: absolute; right: calc(100% + 12px); top: -9px; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--bta-mute); white-space: nowrap; }
.cs-yrs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; }
.cs-men { width: 100%; max-width: 36px; margin: 0 auto; border: 2px solid #E8C63F; border-bottom: 0; border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; box-sizing: border-box; }
.cs-all { width: 100%; background: var(--bta-yellow); border-radius: 5px 5px 0 0; }
.cs-x { display: grid; grid-template-columns: repeat(8, 1fr); margin: 10px 0 0 56px; }
.cs-x span { font-family: var(--font-text); font-size: 13px; color: var(--bta-mute); text-align: center; }
.cs-cap { margin: 6px 0 0 56px; font-family: var(--font-text); font-size: 14px; color: var(--bta-mute); }
.cs-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 18px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--bta-line); }
.cs-tot b { display: block; font-family: var(--font-core); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--bta-ink); }
.cs-tot em { display: block; font-style: normal; font-family: var(--font-text); font-size: 15px; line-height: 1.4; color: var(--bta-mute); margin-top: 4px; }

/* the interval figure on /evidence-report */
.fi-row, .fi-head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 24px; align-items: center; }
.fi-lab { font-family: var(--font-text); font-size: 15px; line-height: 1.3; color: var(--bta-ink); text-align: right; }
.fi-lab em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bta-mute); margin-top: 3px; }
.fi-track { position: relative; height: 48px; }
.fi-head .fi-track { height: 62px; }
.fi-band { position: absolute; top: 13px; height: 22px; border-radius: 11px; background: rgba(255, 222, 89, 0.5); border: 1px solid var(--bta-gold); }
.fi-dot { position: absolute; top: 18px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bta-ink); }
.fi-flat { position: absolute; top: 15px; font-family: var(--font-text); font-size: 13px; color: var(--bta-mute); white-space: nowrap; }
.fi-zero, .fi-ten { position: absolute; top: 0; bottom: 0; }
.fi-zero { border-left: 2px solid var(--bta-ink); }
.fi-ten { border-left: 1.5px dashed var(--bta-gold); }
.fi-mark { position: absolute; top: 4px; transform: translateX(-50%); font-family: var(--font-text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.fi-hint { position: absolute; top: 32px; transform: translateX(-50%); font-family: var(--font-text); font-size: 12px; color: var(--bta-mute); white-space: nowrap; }
.fi-foot { margin: 14px 0 0; font-family: var(--font-text); font-size: 13px; line-height: 1.5; color: var(--bta-mute); }

@media (max-width: 760px) {
  .fi-row, .fi-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fi-lab { text-align: left; padding-top: 14px; }
  .fi-head .fi-lab { display: none; }
  .fi-track { height: 42px; }
  .fi-hint { display: none; }
  .cs-plot { height: 200px; }
}
/* TWO-COLUMN BLOCKS THAT NEVER COLLAPSED. /whatwehold, /investigations and /gallery
   each declared a two-column grid INLINE and carried no breakpoint at all -- whatwehold
   and gallery have no media query anywhere in the file. On a 390px phone that left the
   content column 91-157px wide and sliced headlines mid-word ("We do meaningf...",
   "SAN FRANCISC..."), while a fixed 180px label column ate half the screen.
   `!important` is not decoration here: the grid is declared in a style attribute, and a
   stylesheet cannot beat an inline declaration without it.
   760px matches the breakpoint .wr-split already uses on /investigations. */
@media (max-width: 760px) {
  .m-stack { grid-template-columns: minmax(0, 1fr) !important; }
}

/* THE WORDMARK WAS CLIPPED ON EVERY PHONE. `.hd-name b` is `white-space: nowrap`
   inside a `flex: 0 1 auto` that shrinks, and the room beside the seal and the menu
   button is always viewport-width minus 203px. The name needs 232px at 17px, so it fits
   only above 435px -- it lost 45px at 390 and 115px at 320, rendering "BUSINESSTECH ACADE".
   440px, NOT the 420px block below: clipping starts at 435, so a 420 breakpoint would
   leave 420-435 still cut, and the 420 block's numbers are tuned to the chart, not to this.
   Size alone cannot fix the narrow end either (320px would need an 8.6px wordmark), so the
   name wraps to two lines here and takes one step down with it. */
@media (max-width: 440px) {
  .hd-name b { white-space: normal; font-size: 14px; line-height: 1.08; }
  .hd-name span { letter-spacing: 0.18em; font-size: 9px; }
}

@media (max-width: 420px) {
  .ch-v { font-size: 22px; }
  .cs-plot, .cs-x, .cs-cap { margin-left: 46px; }

}

/* ==================================================== 3. sources library

   Filtering with no JavaScript: hidden radios + :has(). Nothing is checked on
   load, so the default is "everything" and the All chip is styled by the
   :not(:has(:checked)) rule below. Sorting flips the flex direction rather than
   reordering nodes, so the DOM order (newest first) is the reading order. */

.lb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 34px 0 0; padding: 0; border: 0; min-width: 0; }
.lb-legend { flex: 1 0 100%; }
.lb-bar + .lb-bar { margin-top: 12px; }
.lb-legend {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bta-mute); margin-right: 6px; padding: 0;
}
.lb-r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lb-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border: 1px solid var(--bta-line); border-radius: 999px; background: var(--bta-cream);
  font-family: var(--font-core); font-weight: 700; font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--bta-ink); cursor: pointer;
  white-space: nowrap; user-select: none;
  transition: background 140ms cubic-bezier(.2,0,.2,1), border-color 140ms cubic-bezier(.2,0,.2,1);
}
.lb-chip b { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--bta-mute); }
.lb-chip:hover { background: #F5F5EF; }
.lb-r:checked + .lb-chip { background: var(--bta-yellow); border-color: #E8C63F; }
.lb-r:checked + .lb-chip b,
.lb:not(:has(input[name="kind"]:checked)) .lb-chip[data-all="kind"] b,
.lb:not(:has(input[name="sort"]:checked)) .lb-chip[data-all="sort"] b { color: #6B5A12; }
.lb-r:focus-visible + .lb-chip { outline: 3px solid var(--bta-yellow); outline-offset: 2px; }
.lb:not(:has(input[name="kind"]:checked)) .lb-chip[data-all="kind"],
.lb:not(:has(input[name="sort"]:checked)) .lb-chip[data-all="sort"] { background: var(--bta-yellow); border-color: #E8C63F; }

.lb-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.lb:has(#sort-old:checked) .lb-grid { flex-direction: column-reverse; }
.lb:has(#kind-causal:checked)      .lb-doc:not([data-kind="causal"]),
.lb:has(#kind-compared:checked)    .lb-doc:not([data-kind="compared"]),
.lb:has(#kind-descriptive:checked) .lb-doc:not([data-kind="descriptive"]),
.lb:has(#kind-reference:checked)   .lb-doc:not([data-kind="reference"]) { display: none; }

.lb-doc {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 26px;
  border: 1px solid var(--bta-line); border-radius: 16px; background: var(--bta-cream);
  padding: 24px 26px; text-decoration: none;
  transition: border-color 140ms cubic-bezier(.2,0,.2,1), box-shadow 140ms cubic-bezier(.2,0,.2,1), transform 140ms cubic-bezier(.2,0,.2,1);
}
.lb-doc:hover { border-color: #C9C9C2; box-shadow: 0 10px 24px rgba(27,27,27,0.08); transform: translateY(-1px); }
.lb-doc:focus-visible { outline: 3px solid var(--bta-yellow); outline-offset: 2px; }
.lb-yr { font-family: var(--font-mono); font-size: 21px; line-height: 1; color: var(--bta-ink); }
.lb-kind {
  display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bta-gold); line-height: 1.4;
}
.lb-ti { margin: 0; font-family: var(--font-core); font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--bta-ink); }
.lb-who { margin: 8px 0 0; font-family: var(--font-text); font-size: 15px; line-height: 1.5; color: var(--bta-mute); }
.lb-note { margin: 10px 0 0; font-family: var(--font-text); font-size: 16px; line-height: 1.55; color: #2A2A2A; }
.lb-open { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bta-gold); }

@media (max-width: 640px) {
  .lb-doc { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px; }
  .lb-meta { display: flex; align-items: baseline; gap: 12px; }
  .lb-kind { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .lb-chip, .lb-doc { transition: none; } }

/* Every page hides its markup until React renders, so there is no flash to
   guard against — but a reduced-motion reader still gets no entrance. */
@media (prefers-reduced-motion: reduce) {
  .nv-p { animation: none; }
  .nv-a, .nv-s, .nv-l, .nv-apply { transition: none; }
}

/* --- reach comparison, /evidence-avid ---
   Four columns, not three. The value used to sit inside the track next to the bar, so at the
   full eight years the bar filled the track and pushed "8 years" straight into the outcome
   text beside it -- the two longest bars on the chart were exactly the ones that collided. */
.rc{margin-top:22px;border:1px solid #DEDEDA;border-radius:14px;background:#FEFEFE;padding:20px 22px}
.rc-row{display:grid;grid-template-columns:minmax(min(140px, 100%),200px) minmax(min(120px, 100%),1fr) auto minmax(min(120px, 100%),200px);
  gap:14px;align-items:center;padding:14px 0;border-top:1px solid #DEDEDA}
.rc-row:first-child{border-top:0}
.rc-name b{display:block;font-family:var(--font-core);font-weight:800;font-size:15px;color:#1B1B1B;line-height:1.25}
.rc-name span{display:block;margin-top:3px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:#6C6C67}
.rc-track{display:flex;align-items:center;min-height:26px;min-width:0;
  background:linear-gradient(to right,#EFEFEA 1px,transparent 1px) 0 0/12.5% 100%}
.rc-bar{height:20px;border-radius:10px;border:1px solid;flex:none;max-width:100%}
.rc-val{font-family:var(--font-mono);font-size:12px;color:#6C6C67;white-space:nowrap;justify-self:start}
.rc-what{font-family:var(--font-text);font-size:14px;line-height:1.4;color:#2A2A2A}
.rc-axis{display:flex;justify-content:space-between;margin:10px 0 0;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6C6C67}
@media (max-width:820px){
  .rc-row{grid-template-columns:1fr auto;gap:6px 12px}
  .rc-name{grid-column:1/-1}
  .rc-what{grid-column:1/-1;font-size:13px;color:#6C6C67}
}

/* The page shell. /evidence-avid asked for `.wrap` and nothing defined it, so that
   page has been running with no gutter at all — content flush to the window edge.
   This is now the canonical shell for any new page: one measure, one rhythm. */
.wrap {
  max-width: 1000px; margin: 0 auto;
  padding: clamp(36px, 4.6vw, 56px) clamp(20px, 4vw, 40px) 20px;
}
.wrap-wide { max-width: 1080px; }
.wrap-narrow { max-width: 900px; }

a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bta-yellow); outline-offset: 3px; border-radius: 2px;
}
:root:has(*) a { text-underline-offset: 3px; }

/* A link inside running copy keeps the yellow underline the brand asks for. Colour
   is left to the page — several set it inline — but the underline is ours. */
p a[href], li a[href], dd a[href], figcaption a[href] {
  text-decoration: underline;
  text-decoration-color: var(--bta-yellow);
  text-decoration-thickness: 2px;
  transition: text-decoration-color 140ms cubic-bezier(.2,0,.2,1);
}
p a[href]:hover, li a[href]:hover, dd a[href]:hover, figcaption a[href]:hover {
  text-decoration-color: #A8801A;
}
/* except when the link is a button or a card — those carry their own shape */
p a[class]:not([class=""]), li a[class]:not([class=""]) { text-decoration: none; }

img, svg, video, iframe { max-width: 100%; }

@media (prefers-reduced-motion: reduce) { p a[href] { transition: none; } }

/* PRE-HYDRATION GUARD. support.js REPLACES these control-flow elements once it runs, so
   hiding them costs nothing when it does. When it does not -- a filtered network, a
   blocked script, JS off -- the browser treats them as unknown inline elements and paints
   their contents, which is the raw template: a visitor reads "{{ card.name }}" where the
   pathway cards should be. Measured on the live homepage with the scripts stripped.
   Hidden is not a fix for the missing content, but a blank section degrades honestly and
   braces on a recruitment page do not. */
sc-for, sc-if, sc-else { display: none; }

/* FULL-BLEED HERO. The photograph IS the hero: edge to edge, the headline over it, a side
   sweep dark enough to hold type against a bright picture and a foot wash so a caption
   sits legibly in the corner. Generalised from the .ev-* hero the evidence page
   introduced -- that one stays page-local; this is the version pages share.
   min-height uses max(58vh, 32vw) so it is tall enough on a phone and does not take the
   whole screen on a desktop. It was taller and that was wrong twice over: it pushed the
   page's first real content below the fold, and on a wide monitor it made the band so
   short RELATIVE TO ITS WIDTH that a portrait photograph showed only a third of its
   height -- which is how Amelia's face ended up outside the frame. */
/* ONE BAND, ONE FIT, AND THE PICTURE IS NEVER UPSCALED (operator ruling, 2026-09-12, after a
   census of all eleven heroes: "lets come up with one strategey thwat works. I am leaning
   towards black bars on the sides ... Same font sizes for all heroes. Same (roughly) caption
   text amount. Same height (ideally). High quality pic (as much as possible). Same experience").

   WHAT THE CENSUS FOUND. Displayed width over native width -- above 1.0 the browser is
   inventing pixels, which is what "the pics look blurred" is. At 2560: /btalife 2.84x (it was
   serving `ropes-tower@900.jpg`, the GALLERY TILE variant, as its hero), /proof /events
   /thelab /women 1.71x, /ads 1.55x, /work /investigations /theboard 1.28x -- and /why 0.96x.
   /why was the only hero that never blurred and the only one with a media width cap. Band
   heights ranged 720px to 1357px at the same viewport, across three different object-fits and
   six aspect ratios from 0.75 to 5.50.

   THE RULE. The band is one height everywhere. The media box is capped at 1500px -- the
   narrowest hero source in seed/photos, which tops out at 2000px on the long edge with no
   larger original anywhere and no srcset -- and centred, so below 1500 the picture is
   full-bleed and above it the band's own black takes the sides. With the height capped at
   820px every hero sits at upscale <= 1.0 at every viewport, which is as sharp as these
   sources can be made. The cost is stated rather than hidden: 530px of black each side at
   2560. That is the trade the ruling chose.

   Do NOT reintroduce a per-page min-height. A second height is a second experience, and the
   heights above are what one looked like. */
.fb-hero,.bta-hero-band{position:relative;background:#000;overflow:hidden;display:flex;
  align-items:flex-end;--bta-hero-h:clamp(520px,44vw,820px);min-height:var(--bta-hero-h)}
/* THE WIDE-MONITOR OVERRIDE IS GONE, AND SO IS THE PROBLEM IT CHASED. It existed because a
   full-bleed band got wider without getting taller, so a portrait photograph lost more of its
   height the bigger the display -- two faces were cut that way. With the media capped at
   1500px the band's relationship to the picture stops depending on the display at all: past
   1500 the crop is frozen and the extra width is black. Nothing to chase. */
/* THE HEIGHT IS THE CONSTANT; THE WIDTH IS WHAT A PICTURE BUYS COVERAGE WITH.
   A 1500x820 window is 41% of a 1500x2000 photograph's height, and /events needs 55% of it --
   bear ears at 11% through the jack-o-lantern's eyes at 65%. No object-position reaches that,
   because the window is simply too short. But nothing says the picture has to be 1500 wide.
   Cut the same photograph 1500x1100 instead and show it 1118x820: the band keeps its height,
   the crop covers 55%, the extra 382px becomes black at the sides, and the upscale goes DOWN
   to 0.75x because more source pixels are squeezed into the same box.
   So the media box is sized from the picture's own aspect rather than a fixed width, and a
   hero that needs more of its photograph declares it. Default is the band's own 1500/820. */
.fb-hero .fb-media{position:absolute;top:0;bottom:0;left:50%;right:auto;transform:translateX(-50%);
  aspect-ratio:var(--bta-hero-ar,1500/820);width:auto;max-width:min(100%,1500px)}
/* THE PICTURE IS ALWAYS CENTRED, so the bars are always even (operator ruling: "even out the
   bars. The text can cover the costume a bit, not the face"). An off-centre nudge was tried
   here to give the copy black ground beside the jack-o-lantern; it worked and it looked
   lopsided, ~590px of black on one side against ~200px on the other. The ruling settles what
   the copy may overlap instead: a costume yes, a face never. */
/* video as well as img: /how is the first .fb-hero to carry a clip rather than a still,
   and this rule named only img, so a <video> would have sat unsized inside it. */
.fb-hero .fb-media img,.fb-hero .fb-media video{width:100%;height:100%;object-fit:cover;display:block}
.fb-hero .fb-sweep{position:absolute;inset:0;pointer-events:none;background:var(--bta-hero-sweep)}
.fb-hero .fb-foot{position:absolute;inset:0;pointer-events:none;background:var(--bta-hero-foot)}
/* DARK GROUND UNDER THE COPY ON /whatwehold, AND THE SEAL OFF JULISSA'S FACE (operator: "we
   cannot cover julissa", then "add some artificial dark space at bottom of pic and move her face
   up enough that it doesnt hit").
   THE PROBLEM IS A THIRTY-PERSON PHOTOGRAPH. cohort-hero.jpg is faces edge to edge, so the copy
   has nowhere to sit that is not somebody -- and the student at the left edge has her face at
   plate y 472-692 of 984, exactly where the seal lands. Measured at eight widths, the seal
   crossed her face by 84 to 108px at 1024, 1280, 1309 and 1440.
   TWO MOVES, AND IT TAKES BOTH. The media's bottom inset reserves 13% of the band as the band's
   own black, and because `cover` then re-centres the frame in a shorter box, the whole group
   lifts by half the difference -- 37px at 1309 -- off the copy and out of the corner. The top
   crop that buys is 63 plate px, and the topmost head in the frame starts at plate y 90, so it
   takes pavement and planter and no hair.
   THE STRIP ALONE IS NOT ENOUGH, and that is why the seal moves too: the copy block's height
   depends on where the headline WRAPS, so at 1024 and 1440 it runs a line taller, the seal rides
   higher, and a fixed strip still left 45-55px across her face. Lifting the seal out of the
   bottom block and onto the picture's top-left -- pavement and hedge, nobody standing there --
   takes ~130px out of the block and clears her at every width measured: 390, 768, 1024, 1280,
   1309, 1440, 1920, 2560.
   The band height is UNTOUCHED, per the 2026-09-12 ruling above ("Same height (ideally). Same
   experience"): this spends the band's own space differently, it does not ask for more. */
.whatwehold-hero .fb-media{transform:translateX(-50%) translateY(-9%)}
/* THE SEAL SITS TO THE LEFT OF THE HEADLINE, ON ITS LINE (operator: "put the seal to the left of
   'what we hold' same line"). That makes the copy a LOCKUP rather than a stack, so the block is a
   two-column grid: the seal in the left column on the headline's own row, the eyebrow above the
   headline in the right column, everything anchored to the band's bottom edge.
   It also costs less height than any stacked arrangement -- the seal's 105px stop adding to the
   column and sit beside 73px of headline instead -- which is what finally clears the student at
   the left edge of the frame at every width: 390, 768, 1024, 1280, 1309, 1440, 1516, 1920, 2560.
   The stacked version (seal at the foot, under the words) is what this replaced; it cleared her
   too, but only after spending the block's bottom padding and the seal's own bottom margin. */
.whatwehold-hero .fb-in{align-self:stretch;display:grid;align-content:end;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:". eyebrow" "seal headline";
  column-gap:clamp(12px,1.5vw,20px);padding-bottom:clamp(16px,2vw,28px)}
.whatwehold-hero .bta-seal{grid-area:seal;align-self:center;margin:0}
.whatwehold-hero .fb-eb{grid-area:eyebrow}
.whatwehold-hero .fb-in h1{grid-area:headline;align-self:center;margin:0}
/* AND THE BLOCK'S BOTTOM PADDING PAYS FOR IT. The shared hero holds its copy 88px off the band's
   bottom edge; with the seal added to the foot of the stack, that padding pushed the eyebrow and
   headline UP into the face this whole rule exists to clear -- measured, at 1024 through 1516, by
   19 to 43px. There were 112px of unused band below the seal, so the padding is what gives: the
   block drops, the seal lands in the corner, and nothing moves into anybody. */
/* THE TREATMENT FOLLOWS THE PHOTOGRAPH, NOT THE PAGE (operator, on /investigations: "brighten up
   this pic, and make xavier visible"). The house sweep is 82% black at the left edge because that
   is where the copy goes -- and in field-study.jpg the student at the far left stands IN that 82%,
   in shade, in a black shirt under a black cap. Measured on the rendered page: his face came out
   at luminance 0.0225 while the plate's own pixel there is 0.0888, so the page was discarding
   three quarters of him to light words that did not need it. The copy could afford to give it
   back: measured against their real backdrops, the headline sat at 18.9:1 and the eyebrow at
   13.1:1 against a 4.5 floor; after this they are 17.4:1 and 10.9:1 and his face is at 0.0518.
   The brightness is the other half of the same ask. The frame is backlit -- bright sky behind
   students in shade -- so the near-left sits low even with no scrim over it; 1.1 lifts the shade
   without clipping the sky (measured: 108,153,215 -> 119,168,236, no channel at 255).
   KEYED ON THE PICTURE, and that is deliberate twice over. It is a fact about this photograph --
   a subject standing in the dark end of the ramp -- so it should travel with the photograph to any
   page that uses it. And /investigations' markup is being rewritten in another session's open pr
   (#3611) as I write this: a rule that lives in the stylesheet and matches on the src survives
   whatever that does to the page, and conflicts with none of it. */
.fb-hero:has(.fb-media img[src*="field-study"]){--bta-hero-sweep:linear-gradient(100deg,
  rgba(0,0,0,.56) 0%, rgba(0,0,0,.40) 18%, rgba(0,0,0,.14) 40%,
  rgba(0,0,0,.02) 58%, rgba(0,0,0,0) 72%)}
.fb-hero:has(.fb-media img[src*="field-study"]) .fb-media img{filter:brightness(1.1) saturate(1.03)}
.fb-in{position:relative;width:100%;max-width:1280px;margin:0 auto;
  padding:clamp(44px,7.33vw,88px) clamp(20px,3.33vw,40px);pointer-events:none}
.fb-in>*{pointer-events:auto}
/* THE CAPTION CARRIES ITS OWN GROUND NOW. At the bottom it borrowed --bta-hero-foot. Moved
   to the top of the frame (operator: keep the inset, "just put them on top") it had nothing
   under it and measured 1.2-2.5 against a 4.5 floor on eight of the ten heroes, 98-100% of
   it under. A top scrim is not available -- the black band at the top is a standing no -- so
   the caption gets a chip the width of its own words: local, reads as the inset it already
   was, and adds no band. */
.fb-cap{position:absolute;right:clamp(14px,1.6vw,24px);bottom:clamp(12px,1.4vw,20px);
  margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#FFDE59;pointer-events:none;background:rgba(0,0,0,.62);padding:6px 11px;border-radius:999px}

/* BELOW 900px THE COPY STOPS SHARING THE FRAME WITH THE PICTURE.

   The band has a 520px floor, so as the viewport narrows the box gets RELATIVELY taller, cover
   flips from width-limited to height-limited, and the photograph starts cropping inward from
   the sides -- pulling whoever stands at its edges toward the middle, straight under the copy.
   At the same time the copy's own width stops shrinking (it is ch-based) so it covers a bigger
   and bigger share of what is left. Measured on /events at 892px: the headline sat across a
   student's face, at a width every desktop sweep in this session had stepped over -- 1024,
   1366, 1920, 2560, 3440.

   Stacked, the overlap is not reduced, it is impossible: the picture keeps the band's aspect
   and the words sit under it on the band's own black. /why already did this at the same
   breakpoint for the same reason; it is the shared rule now.

   The scrims go with it -- they exist to hold copy off a photograph, and there is no copy on
   the photograph here. That includes the per-page [data-ground] plates (/why, /work, /methods),
   which are the same job done tighter and were left dimming a corner nothing is written on.
   The caption joins the copy in normal flow rather than floating over the picture's corner --
   which is why the `@media (max-width:640px){.fb-cap{display:none}}` that used to sit above
   is gone: every .fb-cap on this site is inside an .fb-hero, so the rule below already beat it
   on specificity and phones have shown an in-flow caption all along. */
@media (max-width:900px){
  .fb-hero{display:block;min-height:0}
  .fb-hero .fb-media{position:relative;top:auto;bottom:auto;left:auto;right:auto;
    width:100%;max-width:none;transform:none;aspect-ratio:var(--bta-hero-ar,1500/820)}
  .fb-hero .fb-sweep,.fb-hero .fb-foot,.fb-hero [data-ground]{display:none}
  .fb-hero .fb-in{padding:clamp(26px,5vw,38px) clamp(20px,3.33vw,40px) clamp(30px,6vw,46px)}
  .fb-hero .fb-cap{position:static;display:block;margin:16px 0 0;
    padding:0 clamp(20px,3.33vw,40px) clamp(26px,5vw,38px)}
}

/* THE SHARED HERO MUST STYLE ITS OWN TYPE. /sumikko's headline was styled by .sk-hero h1;
   the moment the section became .fb-hero those rules stopped matching and the h1 rendered
   at body size in near-black over a photograph -- unreadable. A hero that only works when
   the page happens to carry matching page-local CSS is not a shared hero.
   Pages that set their own inline styles (as /how does) still win: inline beats
   stylesheet, so this is a floor rather than an override. */
.fb-in .fb-eb,.fb-in .sk-eb{display:block;font-family:var(--font-core);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#FFDE59}

/* THE HEADLINE HIGHLIGHT, IN ONE PLACE AND OFF THE TOKEN.

   Six headlines paint part of themselves in the brand yellow -- Make REAL THINGS, We build
   PROFESSIONALS, What an academy ACTUALLY DOES, FAB in the lab, What we HOLD, Run by
   STUDENTS -- and until now they did it three different ways: an inline `color:#FFDE59` on
   five pages, `color: rgb(255, 222, 89)` (the same colour, spelled differently, so a search
   for the hex missed it) on /why, and a page-local `h1 span{...}` rule on /theboard. Three
   spellings of one decision means a palette change has to find all three, and the one it
   misses is the one nobody notices until it is on a projector.

   `--bta-yellow` has existed the whole time. This is the class that finally uses it.

   COLOUR ONLY, DELIBERATELY. Two of the six also break the highlight onto its own line, and
   that is layout, not emphasis -- /theboard and /whatwehold keep their own `display:block`.
   Fusing the two here would force a line break on the four headlines that read as one line.

   NOT the index wordmark: its yellow spans are the lockup (BUSINESS / tech / ACADEMY), a
   brand mark rather than a headline emphasising part of a claim. Same colour, different
   job, and a class called `highlight` would misname it. */
.bta-highlight{color:var(--bta-yellow)}

/* THE ACADEMY SEAL ABOVE A HERO'S COPY. /why has shown it since that hero was built; /work and
   /proof now show it too (operator: "put the seal on top of work and proof like why"). It was
   inline on /why -- a relative span, two absolutely positioned rings and the mark, about 600
   bytes of style attribute -- which is fine for one page and wrong for three. */
.bta-seal{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(84px,8vw,108px);height:clamp(84px,8vw,108px);border-radius:50%;background:#1B1B1B;
  box-shadow:0 0 0 1px rgba(255,222,89,.3),0 0 90px 10px rgba(255,222,89,.1);
  margin:0 0 clamp(16px,2vw,24px)}
.bta-seal i{position:absolute;border-radius:50%}
.bta-seal i:nth-of-type(1){inset:6.5%;border:1px solid rgba(255,222,89,.22)}
.bta-seal i:nth-of-type(2){inset:13%;border:1px solid rgba(255,222,89,.14)}
.bta-seal img{width:70%;height:70%}
/* SMALL AND IN THE CORNER, EVERY HERO. At 66px/20ch a headline sprawls across whatever
   the photograph's subject is, and this session spent itself re-cropping page by page to
   dodge it -- a face, a lightsaber's screen, a plush. The operator's fix is the right one
   and it is here, not per page: shrink the type so the photograph is the hero and the words
   sit in the corner. These are /women's numbers, the page that already read correctly.
   Per-page overrides are REMOVED rather than left to agree by coincidence: one rule. */
.fb-in h1{margin:16px 0 0;max-width:14ch;font-family:var(--font-core);font-weight:800;
  font-size:var(--bta-hero-h1);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;
  color:#FEFEFE;text-wrap:balance}
.fb-in .lead,.fb-in>p{margin:22px 0 0;max-width:44ch;font-family:var(--font-text);
  font-size:var(--bta-hero-lead);line-height:1.55;color:#E6E4DE;text-wrap:pretty}


/* footer layout: one source, real breakpoints. auto-fit alone always places a
   second track, so 220+150+28 overflows a 320px content box at 360/390. */
.ft-grid{display:grid;gap:32px 28px;
  grid-template-columns:minmax(min(220px, 100%),1.4fr) repeat(auto-fit,minmax(min(150px, 100%),1fr))}
@media (max-width:700px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.ft-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .ft-grid>:first-child{grid-column:1/-1}}

/* ---- site navigation (handoff 2026-08-31) -------------------------------------
   Replaces the 2026-08-26 header. Two things here are NOT in the handoff and are kept
   because dropping them would be a regression: the .bta-js panel behaviour (without
   script every panel link stays visible and reachable) and active-page marking.

   THE THREE LINKS NEVER COLLAPSE. The old header hid .bta-navlinks below 940px and the
   panel carried Why / How / Evidence instead. The new panel does NOT contain them -- it is
   pills plus Decide / The academy / Evidence -- so hiding the links would leave three of
   the site's four top destinations unreachable on every phone. Below 400px their type and
   gaps step down instead. This is the handoff's own rule and it is load-bearing. */
.bta-navwrap {
  position: relative; z-index: 20;
  --n-bg:#FEFEFE; --n-panel:#FEFEFE; --n-line:#E6E4DE; --n-ink:#1B1B1B;
  --n-mute:#6C6C67; --n-hover:#F5F5EF; --n-eyebrow:#8A6A12; --n-pillborder:#C9C7C0;
}
/* Dark variant: one attribute on the wrap swaps every nav colour. The arcade and ads
   pill hovers are unchanged by it -- they were checked against both grounds. */
.bta-navwrap[data-nav="dark"] {
  --n-bg:#12071F; --n-panel:#0C0417; --n-line:#2A2A2A; --n-ink:#FEFEFE;
  --n-mute:#91918B; --n-hover:rgba(255,222,89,0.14); --n-eyebrow:#C9A227; --n-pillborder:#3D3D3D;
}
.bta-band { height: 14px; background: #FFDE59; }
.bta-header { display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 clamp(20px,3.33vw,40px); background: var(--n-bg); border-bottom: 1px solid var(--n-line); }
.bta-lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; white-space: nowrap; }
.bta-lockup > span { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.bta-lockup img { width: 32px; height: 32px; }
.bta-name { font-family: var(--font-core); font-weight: 800; font-size: 13px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--n-ink); overflow-wrap: normal; word-break: keep-all; }
.bta-school { font-family: var(--font-core); font-weight: 700; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--n-mute); margin-top: 3px; }
.bta-nav { display: flex; align-items: center; gap: clamp(14px,1.6vw,22px); margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.bta-navlinks { display: flex; align-items: center; gap: clamp(14px,1.6vw,22px); }
.bta-navlinks a { font-family: var(--font-core); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-ink); text-decoration: none; padding: 6px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.bta-navlinks a:hover { border-bottom-color: var(--n-ink); }
.bta-navlinks a[aria-current="page"] { border-bottom-color: #FFDE59; }
.bta-explore { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 23px; padding: 0 12px; border: 1px solid var(--n-line); border-radius: 999px; background: transparent; font-family: var(--font-core); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-ink); cursor: pointer; }
.bta-explore[aria-expanded="true"] { background: var(--n-hover); }
.bta-caret { display: block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 220ms cubic-bezier(.2,0,.2,1); margin-top: -3px; }
.bta-explore[aria-expanded="true"] .bta-caret { transform: rotate(-135deg); }
.bta-interest { box-sizing: border-box; display: inline-flex; align-items: center; height: 23px; padding: 0 13px; border-radius: 999px; background: #FFDE59; color: #000; text-decoration: none; font-family: var(--font-core); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.bta-interest:hover { background: #F2CE3C; color: #000; }
.bta-panel { position: absolute; left: 0; right: 0; top: 52px; background: var(--n-panel); border-bottom: 1px solid var(--n-line); box-shadow: 0 18px 40px -24px rgba(0,0,0,.42); max-height: calc(100vh - 100px); overflow-y: auto; }
.bta-panel[hidden] { display: none; }
.bta-js .bta-panel { display: none; }
.bta-js .bta-navwrap.bta-open .bta-panel { display: block; }
.bta-panel-inner { max-width: 1200px; margin: 0 auto; padding: 14px clamp(20px,3.33vw,40px) 20px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px 26px; }
.bta-group-label { font-family: var(--font-core); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-eyebrow); padding-bottom: 9px; border-bottom: 1px solid var(--n-line); }
.bta-items { display: flex; flex-direction: column; margin-top: 6px; }
.bta-items a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 8px; text-decoration: none; }
.bta-items a:hover { background: var(--n-hover); }
.bta-item-title { display: block; font-family: var(--font-core); font-weight: 700; font-size: 13.5px; color: var(--n-ink); }
.bta-item-note { display: block; font-family: var(--font-text); font-size: 12.5px; line-height: 1.35; color: var(--n-mute); margin-top: 2px; }
.bta-items a[aria-current="page"] .bta-item-title { color: #8A6A12; }

/* house register */
/* appley gold */
/* neon */
:where(.bta-navlinks a, .bta-explore, .bta-interest, .bta-items a):focus-visible { outline: 3px solid #FFDE59; outline-offset: 3px; border-radius: 2px; }

.bta-explore-mobile { display: none; }
@media (max-width: 939px) { .bta-panel { max-height: calc(100vh - 82px); } .bta-nav { gap: 14px; } .bta-navlinks { gap: 14px; } }
@media (max-width: 1040px) { .bta-panel-inner { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px) { .bta-panel-inner { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* wordmark goes before the links do -- the links have nowhere else to live. */
@media (max-width: 680px) { .bta-lockup > span { display: none; } .bta-lockup img { width: 30px; height: 30px; } .bta-lockup { flex: 0 0 auto; overflow: visible; } }
@media (max-width: 619px) { .bta-panel-inner { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 430px) { .bta-header { gap: 12px; padding: 0 16px; } .bta-nav { gap: 10px; } }
/* the step-down that replaces the old collapse */
@media (max-width: 400px) { .bta-navlinks { gap: 10px; } .bta-navlinks a { font-size: 11px; letter-spacing: 0.04em; } .bta-explore { padding: 0 9px; } .bta-interest { padding: 0 10px; } }

/* ---------------------------------------------------------------------------
   TOUCH TARGETS -- WCAG 2.5.8 (AA) wants 24x24 CSS px on anything you tap.
   Measured at 390 before this block: the fifteen footer navigation links were
   17px tall, the nondiscrimination <summary> 17px, and the standalone
   call-to-action links ("See the investigations", "Watch the spots") 22px.
   None of those is exempt -- the exemption is for a link INSIDE a sentence,
   and these are each the whole of their line.

   Padding rather than height, so the text does not move and only the tappable
   box grows. `display:inline-block` is required for the vertical padding to
   count at all on an inline element; these are all one-per-line already, so it
   changes no wrapping. --------------------------------------------------- */
footer li a,
footer details summary,
footer a[href^="mailto:"],
main p > a:only-child,
p > a:only-child {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}
/* The list already spaces its rows; pull back the padding so the footer keeps
   its rhythm instead of growing by 8px a row. */
footer li { margin-top: -4px; margin-bottom: -4px; }

/* ---------------------------------------------------------------------------
   NARROW SCREENS: LET LONG WORDS BREAK. The mobile pass had a floor of 320px
   and never looked below it, so the Galaxy Fold's 280px cover screen went
   untested -- and three pages overflow there, all for the same reason. A single
   word wider than its column cannot wrap: "Communications" measures 238px in a
   188px heading column on /board, "Understanding" 267px in 240px on
   /investigations. Nothing about that is specific to 280; it is simply where
   these particular words ran out of room first.

   overflow-wrap is inherited, so one declaration on body reaches everything,
   and `break-word` only acts when a word genuinely cannot fit -- at every width
   where the text already wraps normally this changes nothing. --------------- */
body { overflow-wrap: break-word; }
/* ...BUT NEVER THE WORDMARK. `overflow-wrap` is inherited, so the rule above reached
   .bta-name and "BusinessTech" -- one word, no space to break at -- started splitting
   mid-word: "BUSINESST / ECH / ACADEMY" on a 360px phone. A brand name broken across
   lines is worse than a brand name that does not fit, and the lockup already has two
   answers for not fitting (12px at 389, seal only below the threshold). */
.bta-lockup .bta-name { overflow-wrap: normal; word-break: keep-all; }

/* ---------------------------------------------------------------------------
   THE HERO SEAL IS A WATERMARK, AND BELOW 740px IT LANDS ON THE COPY. It is an
   absolutely-positioned layer, right-aligned inside the 1280px content column,
   and the desktop lead paragraph stops well short of it (max-width 46ch). On a
   phone that paragraph fills the width and runs straight underneath: measured
   by text-ink rather than element box, four separate text runs are covered at
   390 -- "Business and technology, taken together" by 145x23px of solid disc.

   740 is measured, not chosen: at 740 and above zero text runs intersect it; at
   640 there are three. It is decorative -- the same badge sits in the header on
   every page and its alt text is duplicated there -- so on narrow screens it
   simply does not render.

   The layout moved OFF the inline style attribute and into this class on purpose.
   With `display:flex` sitting inline on the element, the media query below could
   never win -- an inline declaration outranks any stylesheet rule short of
   !important, so the first version of this fix read exactly like a working one
   and hid nothing. Measured after: still four text runs covered at 390. */
.bta-hero-seal { position: absolute; inset: 0; display: flex; align-items: center; }
@media (max-width: 739px) { .bta-hero-seal { display: none; } }

/* GALLERY LAZY-LOADING. /btalife fetched all 52 photos -- 20 MB -- before the visitor
   scrolled a pixel, on a page 7.5 viewports tall. image-slot has no lazy mode and is a
   vendored starter component ("Re-running copy_starter_component overwrites this file"),
   so the deferral lives HERE and in support.js rather than in the component: a slot ships
   with data-src and support.js promotes it to src as the tile nears the viewport.
   A src-less slot would otherwise show the component's "drop an image / browse files"
   affordance -- correct in the design tool, wrong for a visitor -- so it is hidden for
   exactly the slots still waiting. The tile's own background is the placeholder. */
image-slot[data-src]::part(empty) { display: none; }

/* --- /why motion pass -------------------------------------------------------------
   Hover and focus only. Every ENTRANCE is applied by the page's own script and only
   after it has proved it can undo itself, so nothing here can hide content. --- */
.wq-verb { padding: 0 3px; margin: 0 -3px; border-radius: 3px; transition: background 380ms cubic-bezier(.2,0,.2,1); }
.wq-card { transition: box-shadow 140ms cubic-bezier(.2,0,.2,1), border-color 140ms cubic-bezier(.2,0,.2,1); }
.wq-card:hover { box-shadow: 0 10px 24px rgba(27,27,27,.08); border-color: #C9C9C2; }
.wq-pill { transition: background 140ms cubic-bezier(.2,0,.2,1), color 140ms cubic-bezier(.2,0,.2,1), transform 80ms cubic-bezier(.2,0,.2,1); }
.wq-pill-ink:hover { background: #2A2A2A; color: #FFDE59; }
.wq-pill-out:hover { background: #1B1B1B; color: #FFDE59; }
.wq-pill:active { transform: scale(.97); }
.wq-row:last-child { border-bottom: 0; }
[data-walkrail] a { transition: color 140ms cubic-bezier(.2,0,.2,1), border-color 220ms cubic-bezier(.2,0,.2,1); }
/* The reveal's transition rides a CLASS, not an inline style. Set inline it wins over
   every hover rule on the same node, and the cards silently lost their hover. */
.wq-reveal { transition: opacity 380ms cubic-bezier(.16,1,.3,1), transform 380ms cubic-bezier(.16,1,.3,1); }
.wq-card.wq-reveal { transition: opacity 380ms cubic-bezier(.16,1,.3,1), transform 380ms cubic-bezier(.16,1,.3,1), box-shadow 140ms cubic-bezier(.2,0,.2,1), border-color 140ms cubic-bezier(.2,0,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .wq-verb, .wq-card, .wq-pill, [data-walkrail] a { transition: none; }
  .wq-pill:active { transform: none; }
}

/* The two social marks in the footer bar. Monochrome glyphs on currentColor so they
   take the same yellow as the text links beside them and need no second asset. */
.ft-social { display: inline-flex; gap: 14px; align-items: center; }
.ft-social a { display: inline-flex; color: var(--bta-yellow);
  transition: opacity 140ms cubic-bezier(.2,0,.2,1); }
.ft-social a:hover, .ft-social a:focus-visible { opacity: .72; }