/* Career page — "The Record" (owner-review rework: standard sticky-image
   scrollytelling, replacing the earlier wheel-hijack/pinned-deck engine).
   Loaded only on the Career page (functions.php::bmhud_assets(), is_page(
   'career'), PLAT-009). Never move any of this into global.css — that file
   loads on every page and would leak this page's layout everywhere. Every
   selector below is scoped under .bmhud-career / .career-* so nothing
   bleeds off this page.

   Two DOM copies of each chapter's media exist on purpose (see the PHP file
   header for why): `.career-media-inline` (one per chapter, inside
   `.career-chapter`, next to that chapter's own text) and `.career-media-
   stack` (all 20, stacked absolute inside the single `.career-frame-
   sticky` column). BASE/FALLBACK CSS shows only the inline copies and
   hides the stack entirely — a plain, normally-scrolling story, exactly
   what renders with no JS, under prefers-reduced-motion, and (even with JS
   active) at narrow widths. The ENHANCED block, gated on `.is-enhanced`
   (added by career.js only once IntersectionObserver exists and reduced
   motion isn't requested), swaps that: hides the inline copies, reveals
   the sticky stack, and turns `.career-frame-inner` into a `position:
   sticky` frame that stays put in the viewport while `.career-track`
   (the text) scrolls past it natively — no JS scroll interception, no
   preventDefault, anywhere. career.js only toggles which stacked image is
   `.is-active` (via IntersectionObserver watching the text chapters), which
   text chapter is `.is-active` (for the text fade-in), and the progress
   rail.

   FE-011 (owner review pass): three fixes on top of the FE-010 build —
   (1) the frame now has a FIXED 4:3 aspect-ratio at max-width:780px with
   object-fit:cover throughout, instead of an unstable auto-width/clamped-
   height box, so every one of the 20 (already-4:3) photos fills it at an
   identical size — the `is-contain` padded-mat path is retired entirely,
   nothing needs it anymore; (2) the gold sheen sweep and the chapter-17
   heavy-frame pulse ("effects") are gone, replaced with four static gold
   corner brackets on the frame itself (not per-photo); (3) left text
   column narrowed to ~40% / image ~60% of a 1320px container with a wider
   gap, chapters are ~90vh and vertically centered, and each chapter's own
   text now fades between an inactive (dim, offset) and active (full,
   settled) state as it crosses the viewport center, matching the frame's
   own crossfade rhythm. */

.bmhud-career{
  --ink:#080B08; --obsidian:#0A0F0B; --surface:#121A13; --elevated:#1A241B;
  --pine:#0C3A0D; --forest:#104911; --emerald:#1E7A2C;
  --gold-deep:#B9842A; --gold:#E2A837; --gold-light:#EFC35C;
  --heading:#F4EFE3; --body:#CFC9BB; --muted:#8E8B7E;
  --border:rgba(244,239,227,0.10); --border-gold:rgba(226,168,55,0.30);
  --career-atmosphere:
    radial-gradient(1100px 760px at 100% 0%, rgba(30,122,44,.07), transparent 62%),
    repeating-linear-gradient(0deg, rgba(244,239,227,.03) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(244,239,227,.03) 0 1px, transparent 1px 44px);
  --career-atmosphere-repeat:no-repeat, repeat, repeat;
  --career-nav-bg:rgba(10,15,11,0.72);
  --career-node-color:#E2A837; --career-node-border:rgba(226,168,55,0.30);
  --career-node-bg:transparent; --career-node-radius:4px;
  --career-node-width:auto; --career-node-height:auto; --career-node-padding:5px 9px;
  --career-place-color:#8E8B7E; --career-copy-rule:#104911;
  --career-green-display:#1E7A2C; --career-mark-text:#080B08;
  --career-media-bg:#080B08; --career-media-border:rgba(226,168,55,0.30);
  --career-media-radius:6px; --career-inline-print-shadow:none;
  --career-badge-bg:#0A0F0B; --career-badge-border:rgba(226,168,55,0.30);
  --career-badge-color:#E2A837;
  --career-counter-bg:rgba(10,15,11,.68); --career-counter-border:rgba(244,239,227,0.10);
  --career-counter-backdrop:blur(6px); --career-counter-number:#E2A837;
  --career-vignette:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10,15,11,.45) 100%);
  --career-bright-filter:brightness(.92) saturate(.94);
  --career-frame-bg:#080B08; --career-frame-border:rgba(226,168,55,0.30);
  --career-frame-shadow:0 30px 64px -26px rgba(0,0,0,.6);
  --career-frame-extra:92px; --career-frame-row-gap:10px;
  --career-brackets-display:block;
  --career-status-color:#8E8B7E; --career-status-dot:#E2A837;
  --career-status-dot-shadow:0 0 6px 1px rgba(226,168,55,.55);
  --career-catalogue-index:#8E8B7E; --career-catalogue-number:#E2A837;
  --career-archive-color:#8E8B7E;
  --career-archive-number:#E2A837;
  --career-rail-track:#104911; --career-rail-fill:#E2A837;
  --career-album-thread-display:none; --career-album-thread:rgba(12,58,13,0);
  --career-album-indent:0; --career-album-meta-position:static;
  --career-album-meta-z:auto;
  --career-album-meta-top:auto; --career-album-meta-transform:none;
  --career-album-meta-direction:row; --career-album-meta-gap:.65rem;
  --career-album-place-writing:horizontal-tb;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}

/* Career light edition — a dark-parity RECOLOR of the composition above, not
   its own layout. The FE-017 "Album" (binding-thread spine, plate-number
   nodes, repositioned meta column, matted prints) was rejected by the owner
   on live review 2026-08-29 and retired in FE-BUG-009: light carries the dark
   Career's structure verbatim; only the palette swaps to paper. Explicit
   Light and Auto/OS Light carry the same Career-scoped values; dark remains
   the default above, including every shipped glow, grid, bracket and vignette. */
:root[data-theme="light"] .bmhud-career{
  --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
  --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
  --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
  --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
  --bm-hover-from-gold:var(--bm-gold-ink-hover);
  --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
  --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
  --career-atmosphere:none; --career-atmosphere-repeat:no-repeat;
  --career-nav-bg:rgba(231,224,206,0.78);
  --career-node-color:var(--bm-gold-ink); --career-node-border:var(--border-gold);
  --career-node-bg:transparent; --career-node-radius:4px;
  --career-node-width:auto; --career-node-height:auto; --career-node-padding:5px 9px;
  --career-place-color:var(--muted); --career-copy-rule:#104911;
  --career-green-display:#104911; --career-mark-text:var(--bm-on-gold);
  --career-media-bg:#E7E0CE; --career-media-border:var(--border-gold);
  --career-media-radius:6px;
  --career-inline-print-shadow:0 30px 64px -26px rgba(42,40,32,0.30);
  --career-badge-bg:#E7E0CE; --career-badge-border:var(--border-gold);
  --career-badge-color:var(--bm-gold-ink);
  --career-counter-bg:#E7E0CE; --career-counter-border:rgba(42,40,32,0.14);
  --career-counter-backdrop:none; --career-counter-number:var(--bm-gold-ink);
  --career-vignette:none; --career-bright-filter:none;
  --career-frame-bg:#E7E0CE; --career-frame-border:var(--border-gold);
  --career-frame-shadow:0 30px 64px -26px rgba(42,40,32,0.30);
  --career-frame-extra:92px; --career-frame-row-gap:10px;
  --career-brackets-display:block;
  --career-status-color:var(--muted); --career-status-dot:#B9842A;
  --career-status-dot-shadow:none;
  --career-catalogue-index:var(--muted); --career-catalogue-number:var(--bm-gold-ink);
  --career-archive-color:var(--muted);
  --career-archive-number:var(--bm-gold-ink);
  --career-rail-track:rgba(12,58,13,0.22); --career-rail-fill:#B9842A;
  --career-album-thread-display:none; --career-album-thread:rgba(12,58,13,0);
  --career-album-indent:0; --career-album-meta-position:static;
  --career-album-meta-z:auto;
  --career-album-meta-top:auto; --career-album-meta-transform:none;
  --career-album-meta-direction:row; --career-album-meta-gap:.65rem;
  --career-album-place-writing:horizontal-tb;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .bmhud-career{
    --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
    --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
    --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
    --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
    --bm-hover-from-gold:var(--bm-gold-ink-hover);
    --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
    --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
    --career-atmosphere:none; --career-atmosphere-repeat:no-repeat;
    --career-nav-bg:rgba(231,224,206,0.78);
    --career-node-color:var(--bm-gold-ink); --career-node-border:var(--border-gold);
    --career-node-bg:transparent; --career-node-radius:4px;
    --career-node-width:auto; --career-node-height:auto; --career-node-padding:5px 9px;
    --career-place-color:var(--muted); --career-copy-rule:#104911;
    --career-green-display:#104911; --career-mark-text:var(--bm-on-gold);
    --career-media-bg:#E7E0CE; --career-media-border:var(--border-gold);
    --career-media-radius:6px;
    --career-inline-print-shadow:0 30px 64px -26px rgba(42,40,32,0.30);
    --career-badge-bg:#E7E0CE; --career-badge-border:var(--border-gold);
    --career-badge-color:var(--bm-gold-ink);
    --career-counter-bg:#E7E0CE; --career-counter-border:rgba(42,40,32,0.14);
    --career-counter-backdrop:none; --career-counter-number:var(--bm-gold-ink);
    --career-vignette:none; --career-bright-filter:none;
    --career-frame-bg:#E7E0CE; --career-frame-border:var(--border-gold);
    --career-frame-shadow:0 30px 64px -26px rgba(42,40,32,0.30);
    --career-frame-extra:92px; --career-frame-row-gap:10px;
    --career-brackets-display:block;
    --career-status-color:var(--muted); --career-status-dot:#B9842A;
    --career-status-dot-shadow:none;
    --career-catalogue-index:var(--muted); --career-catalogue-number:var(--bm-gold-ink);
    --career-archive-color:var(--muted);
    --career-archive-number:var(--bm-gold-ink);
    --career-rail-track:rgba(12,58,13,0.22); --career-rail-fill:#B9842A;
    --career-album-thread-display:none; --career-album-thread:rgba(12,58,13,0);
    --career-album-indent:0; --career-album-meta-position:static;
    --career-album-meta-z:auto;
    --career-album-meta-top:auto; --career-album-meta-transform:none;
    --career-album-meta-direction:row; --career-album-meta-gap:.65rem;
    --career-album-place-writing:horizontal-tb;
  }
}
.bmhud-career *{ box-sizing:border-box; }

/* FE-014 — gentle scroll-snap so a chapter comes to rest centered rather
   than settling anywhere. CSS-only; career.js is untouched (no wheel/key/
   touch interception, no preventDefault, no scroll-position manipulation —
   the FE-010 no-hijack invariant still holds). `:has` scopes this to the
   Career page's own <html> even though career.css already only loads on
   /career (belt and suspenders). `proximity` (never `mandatory`) only
   nudges the nearest chapter to center once the user comes to rest — it
   leaves the user alone mid-scroll and inside long chapters, so it can't
   become the rejected wheel-hijack. Each chapter's snap point is its own
   center, which agrees by construction with career.js's existing
   center-line IntersectionObserver (rootMargin:-50% 0 -50% 0), so the
   snapped text and the active sticky image always match. */
/* Base: gentle `proximity` for the no-JS / reduced-motion / mobile fallback
   (never traps a tall stacked chapter that exceeds the viewport). */
html:has(body.bmhud-career){ scroll-snap-type:y proximity; }

/* Desktop enhanced: `mandatory` so every chapter lands DEAD-CENTRE when the
   reader comes to rest (proximity alone let the text settle off-centre). The
   earlier footer bug — mandatory pulling the scroll back and hiding the
   footer — was NOT caused by mandatory itself but by there being no snap
   point below the last chapter's centre. The `.bm-footer` rule below fixes
   that root cause: an `end`-aligned snap point at the footer, so the reader
   can scroll past the final chapter and rest on the footer while every
   chapter still snaps centred. Gated on the same 901px floor as this file's
   `@media (max-width:900px)` block so it can never apply once chapters
   collapse into tall stacked figures (image+text > viewport) where mandatory
   would trap. Paired with `.career-chapter { scroll-snap-stop:normal }` so a
   fast flick still skips freely instead of stopping at every chapter. */
@media (min-width:901px){
  html:has(.career-scroll.is-enhanced){ scroll-snap-type:y mandatory; }
  html:has(.career-scroll.is-enhanced) .bm-footer{ scroll-snap-align:end; }
}

/* FE-012 (owner design rework) atmosphere: a very faint 44px square grid
   plus a low-alpha dark-green glow anchored top-right, both purely
   structural/ambient (invariant 6 — gold stays the only bright accent; this
   green is background texture, never text). Kept intentionally subtle. */
.bmhud-career{
  background-color:var(--obsidian);
  background-image:var(--career-atmosphere);
  background-repeat:var(--career-atmosphere-repeat);
  color:var(--body); font-family:var(--sans);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.bmhud-career a{ color:var(--bm-gold-ink,var(--gold)); text-decoration:none; transition:color .18s ease; }
.bmhud-career a:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }
.bmhud-career a:focus-visible{ outline:2px solid var(--bm-focus,var(--gold)); outline-offset:2px; border-radius:2px; }

/* ---- Sticky blurred nav (same grammar as about-nav / notebook-nav —
   replicated under career-* classes, the theme's established per-template
   pattern, so this stylesheet stays self-contained). ---- */
.career-nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:18px 28px;
  max-width:1240px; margin:0 auto;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  background:var(--career-nav-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.career-nav-brand{ color:var(--heading); font-family:var(--serif); font-weight:600; font-size:18px; line-height:1; letter-spacing:0; }
.career-nav-brand b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }
.career-nav-back{ color:var(--muted); font-size:12px; letter-spacing:.05em; white-space:nowrap; }
.career-nav-back:hover{ color:var(--bm-hover-from-gold,var(--gold)); }
.bmhud-career .career-nav-right{ display:flex; align-items:center; gap:18px; }

.career-notfound{ max-width:60ch; margin:0 auto; padding:8vh 28px; color:var(--body); }

/* =====================================================================
   BASE / FALLBACK — no JS, prefers-reduced-motion, or (even enhanced)
   narrow screens. A plain vertical story: chrome, then that chapter's own
   image, then its headline/body, normal document flow, normal scroll.
   Applies everywhere unless the ENHANCED block below overrides it (and
   the narrow-screen query re-applies most of it even when enhanced).
   ===================================================================== */

.career-main{ padding:0 0 2vh; }

.career-scroll{ position:relative; max-width:1320px; margin:0 auto; padding:0 28px; }

.career-layout{ display:block; }

.career-track{ display:block; }

.career-chapter{
  display:block;
  padding:6vh 0;
  border-bottom:1px solid var(--border);
  /* FE-014: snap point is this chapter's own center; `normal` (not
     `always`) so fast flicks pass through freely instead of trapping at
     every chapter. */
  scroll-snap-align:center;
  scroll-snap-stop:normal;
}
.career-chapter:last-child{ border-bottom:0; }

/* FE-012: chrome is now a number badge (thin gold-outlined box) + the
   place, baseline-aligned on one row. VISUAL_RECORD moved onto the frame
   itself (career-frame-status, per-figure below) since that label belongs
   to the photo interface, not the text column. */
.career-chrome{
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.career-chrome-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.04em;
  line-height:1; color:var(--career-node-color);
  width:var(--career-node-width); height:var(--career-node-height);
  padding:var(--career-node-padding);
  background:var(--career-node-bg);
  border:1px solid var(--career-node-border);
  border-radius:var(--career-node-radius);
}
.career-chrome-place{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--career-place-color);
}

.career-copy{
  max-width:60ch;
  border-left:2px solid var(--career-copy-rule);
  padding-left:1.2rem;
}
.career-headline{
  font-family:var(--serif); font-weight:600; color:var(--heading);
  font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.18; letter-spacing:-0.01em;
  margin:0 0 .8rem;
}
.career-body{
  font-family:var(--sans); color:var(--body); font-size:1rem; line-height:1.7;
  margin:0;
}
/* Chapter 17 "Who Framed ME." — a bigger, more confident headline only
   (FE-011: the earlier heavier gold picture-frame ring on its photo is
   retired; every frame now gets the same four corner brackets, no
   per-chapter special-casing). Every other headline keeps the standard
   size above. */
.career-chapter.is-poster .career-headline{
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.05;
}

/* =====================================================================
   FE-013 (ADR-001, owner batch 2026-08-28) — per-chapter emphasis
   accents. The old "illuminated lede" auto-split (`.career-lede`, always
   the headline's opening words) is retired; `headline`/`body` now carry
   explicit `<span>` markup only where the owner asked for it (see
   page-career.php header). Gold stays the default/primary accent; green
   is used ONLY as large display text per ADR-001 (never small green text
   on the dark base — invariant 6 still applies everywhere else on the
   page).
   ===================================================================== */

/* Gold word/phrase emphasis — inherits whatever type context it sits in
   (Fraunces on headlines, Inter on body), color change only. */
.career-hl-gold{ color:var(--bm-gold-ink,var(--gold)); }

/* Green emphasis — ADR-001: brand green (--emerald), large display text
   only. #17 is already a poster-scale headline (.is-poster above), so it
   qualifies as-is. #19 is a body-scale phrase, so it gets its own bump to
   large+bold here (~1.4rem / 600) rather than inheriting the 1rem body
   size — that's what keeps it "large display text", not small green text
   on dark. */
.career-hl-green{ color:var(--career-green-display); }
.career-body .career-hl-green{
  display:inline-block;
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:600;
  line-height:1.25;
}

/* Gold "highlighter marker" — dark ink text on a solid gold field (#20's
   "Frankfurt am Main"). box-decoration-break so it stays one continuous
   highlight if the phrase ever wraps across lines. */
.career-mark{
  background:var(--gold);
  color:var(--career-mark-text);
  padding:0 .14em;
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* #3 — the shop-sign photo renders zoomed inside its already-clipped 4:3
   frame (overflow:hidden on .career-media / .career-frame-photo handles
   the crop); applies to both the inline and stacked media copies since
   both share `.career-media` + this modifier via `$bm_m['media_class']`. */
.career-media.is-zoom .career-img{
  transform:scale(1.5);
  transform-origin:center;
}

/* #13 — a third display face (Cormorant, ADR-001) for "The God was always
   in the details." only; every other headline stays Fraunces. Loaded by
   PLAT-010's Google Fonts enqueue extension. */
.career-chapter.is-scripture .career-headline{
  font-family:"Cormorant", Georgia, serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(2rem, 4.6vw, 3.2rem);
  line-height:1.06;
  letter-spacing:0;
}

/* #20 — matches the owner's reference: no green left rule under the
   Frankfurt copy. */
.career-chapter.is-no-rule .career-copy{
  border-left:0;
  padding-left:0;
}

.career-media{
  position:relative;
  margin:0 0 1.6rem;
  border-radius:var(--career-media-radius);
  overflow:hidden;
  background:var(--career-media-bg);
  border:1px solid var(--career-media-border);
  box-shadow:var(--career-inline-print-shadow);
  aspect-ratio:4/3;
  max-width:640px;
}
.career-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Badge + frame counter — an opaque scrim chip of their own, so they stay
   legible on ANY photo (light or dark) without needing per-frame tuning.
   Used by the inline (base/fallback/mobile) copy only — the enhanced
   sticky frame's own labels (FE-012) sit outside the image, see the
   `.career-frame-row` block below. */
.career-badge{
  position:absolute; top:0; left:0; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:30px; padding:0 9px;
  background:var(--career-badge-bg);
  border:1px solid var(--career-badge-border); border-top:0; border-left:0;
  border-bottom-right-radius:5px;
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.02em;
  color:var(--career-badge-color);
}
.career-frame-counter{
  position:absolute; left:10px; bottom:10px; z-index:3;
  max-width:calc(100% - 20px);
  padding:5px 10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--muted);
  background:var(--career-counter-bg);
  border:1px solid var(--career-counter-border);
  border-radius:3px;
  backdrop-filter:var(--career-counter-backdrop); -webkit-backdrop-filter:var(--career-counter-backdrop);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.career-frame-counter .n{ color:var(--career-counter-number); font-weight:600; }

/* Soft inner vignette (neutral, obsidian — never gold) — the darkroom
   treatment. Its daylight token is none so the print stays clean. */
.career-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--career-vignette);
}

/* The stacked (shared sticky frame) copy never renders in base/fallback
   mode — it only exists for the ENHANCED path below. Hidden entirely
   (not just visually) so its `loading="lazy"` images are never fetched
   while hidden. */
.career-frame-sticky{ display:none; }

/* Progress rail + idle hint are enhanced-only affordances — nothing to
   show when the story is a plain scroll of the page. Live region only
   speaks once career.js is driving the sticky swap. */
.career-rail,
.career-hint{ display:none; }
.career-live{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =====================================================================
   ENHANCED — standard sticky-image scrollytelling. Gated on .is-enhanced,
   added by career.js only when IntersectionObserver exists and the user
   has not requested reduced motion (career.js skips entirely otherwise,
   so this block never applies under prefers-reduced-motion: reduce). The
   page scrolls NATIVELY here — nothing in career.js intercepts wheel/key/
   touch input. career.js only toggles which `.career-media-stack` figure
   is `.is-active` (crossfade), which `.career-chapter` is `.is-active`
   (text fade-in), and the rail fill — based on which chapter is currently
   centered in the viewport.
   ===================================================================== */

.career-scroll.is-enhanced .career-media-inline{ display:none; }

.career-scroll.is-enhanced .career-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  column-gap:clamp(54px, 6vw, 130px);
}

.career-scroll.is-enhanced .career-track{ grid-column:1; }

.career-scroll.is-enhanced .career-chapter{
  min-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4vh 0;
  border-bottom:0;
}

/* Chapter text — inactive by default (dim, settled slightly below its
   resting position), active once its chapter crosses the viewport's
   center (career.js toggles `.is-active` on the `.career-chapter`
   itself, in lockstep with the matching stacked photo). Read-only CSS
   transition; no scroll-linked JS animation. */
.career-scroll.is-enhanced .career-chrome,
.career-scroll.is-enhanced .career-copy{
  opacity:.4;
  transform:translateY(14px);
  transition:opacity .52s ease, transform .52s ease;
}
.career-scroll.is-enhanced .career-chapter.is-active .career-chrome,
.career-scroll.is-enhanced .career-chapter.is-active .career-copy{
  opacity:1;
  transform:translateY(0);
}

/* .career-frame-sticky is a plain (non-sticky) box that stretches, by the
   grid's default item-stretch, to match the track column's full height —
   giving `.career-frame-inner` (the actual sticky element) room to travel
   for the whole scroll journey before naturally releasing near the end. */
.career-scroll.is-enhanced .career-frame-sticky{
  display:block;
  grid-column:2;
  position:relative;
}
/* FE-011: FIXED 4:3 frame at max-width:780px — the root cause of the
   "inconsistent size / cut edges" bug was an auto-width box with only a
   clamped height, so it never settled to the same size twice. Every one
   of the 20 source photos is already exactly 4:3 (verified), so a fixed
   aspect-ratio + object-fit:cover (on each `.career-media-stack` below)
   fills this box edge-to-edge, identically, every chapter — no cropping,
   because the source ratio already matches. The frame itself never moves
   (`position:sticky; top:50%` + a fixed transform) as the stacked photos
   crossfade inside it. */
/* FE-012 (owner design rework): the frame now needs room ABOVE and BELOW
   the 4:3 photo for the two interface label rows, so it's no longer a pure
   aspect-ratio:4/3 box. `::before` sizes the frame using a padding-top
   percentage (relative to the frame's own width, giving the 4:3 photo
   height) plus a fixed px allowance for the two label rows — the frame
   still never moves (`position:sticky; top:50%` + fixed transform) as the
   stacked figures crossfade inside it. Each figure is absolutely
   positioned to fill this sized box exactly (see .career-media-stack). */
.career-scroll.is-enhanced .career-frame-inner{
  position:sticky;
  top:50%;
  transform:translateY(-50%);
  /* Height-aware width cap. The frame's height is a function of its width
     (::before below = 0.75*width + 92px for the two label rows), so on a
     SHORT viewport a fixed 780px-wide frame (~677px tall) overflowed above
     the nav and below the fold, and the dead-centre `translateY(-50%)` lock
     then read as the paired text sitting far too low. The third `min()`
     term derives the widest frame whose full height still fits the viewport
     with room for the sticky nav: solving 0.75*w + 92 <= 100vh - 108 gives
     w <= (100vh - 200) * 4/3. On tall screens this term exceeds 780px, so
     the frame stays exactly 780px (unchanged); it only shrinks once the
     viewport is shorter than ~785px tall (e.g. 1366x768 laptops). */
  width:min(100%, 780px, calc((100vh - 200px) * 4 / 3));
  max-width:780px;
}
.career-scroll.is-enhanced .career-frame-inner::before{
  content:"";
  display:block;
  width:100%;
  /* 75% = the 4:3 photo's height as a fraction of the frame's width;
     92px = two label rows (36px height + 10px gap each side). */
  padding-top:calc(75% + var(--career-frame-extra));
}

.career-scroll.is-enhanced .career-media-stack{
  position:absolute;
  inset:0;
  margin:0;
  aspect-ratio:auto;
  max-width:none;
  border:0; border-radius:0; background:transparent; overflow:visible;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:scale(1.035);
  transition:opacity .65s cubic-bezier(.2,.65,.2,1), transform 1.2s cubic-bezier(.2,.65,.2,1);
  pointer-events:none;
  will-change:opacity, transform;
}
.career-scroll.is-enhanced .career-media-stack.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  z-index:2;
}

.career-scroll.is-enhanced .career-media-stack.is-bright .career-img{
  filter:var(--career-bright-filter);
}

/* ---- The photo itself: the fixed 4:3 box. Dark keeps FE-011's gold
   hairline/obsidian mat/shadow; daylight tokens translate that darkroom
   frame into a warm mat, ink keyline and soft lifted-print shadow. ---- */
.career-scroll.is-enhanced .career-frame-photo{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  border-radius:var(--career-media-radius);
  overflow:hidden;
  background:var(--career-frame-bg);
  border:1px solid var(--career-frame-border);
  box-shadow:var(--career-frame-shadow);
}
.career-scroll.is-enhanced .career-frame-brackets{
  display:var(--career-brackets-display);
  position:absolute; inset:0; z-index:4; pointer-events:none;
}
.career-bracket{ position:absolute; width:18px; height:18px; }
.career-bracket-tl{ top:8px; left:8px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
.career-bracket-tr{ top:8px; right:8px; border-top:2px solid var(--gold); border-right:2px solid var(--gold); }
.career-bracket-bl{ bottom:8px; left:8px; border-bottom:2px solid var(--gold); border-left:2px solid var(--gold); }
.career-bracket-br{ bottom:8px; right:8px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }

/* ---- Interface label rows — ABOVE and BELOW the photo, OUTSIDE the image
   box (FE-012; previously these sat as on-image scrim chips). Plain mono
   text on the page's own atmosphere, no chip/blur needed since they're no
   longer competing with a photo underneath them. Children of each
   `.career-media-stack` figure, so they crossfade in step with that
   figure's own opacity transition (no separate animation needed). ---- */
.career-scroll.is-enhanced .career-frame-row{
  flex:0 0 auto;
  height:36px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
}
.career-scroll.is-enhanced .career-frame-row-above{ margin-bottom:var(--career-frame-row-gap); }
.career-scroll.is-enhanced .career-frame-row-below{ margin-top:var(--career-frame-row-gap); }

.career-frame-status{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--career-status-color); text-transform:uppercase;
}
.career-frame-status-dot{
  width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:var(--career-status-dot);
  box-shadow:var(--career-status-dot-shadow);
}
.career-frame-place{ color:var(--career-place-color); text-transform:uppercase; }

/* Named `.career-frame-index` (not `.career-frame-counter`) on purpose —
   that class already belongs to the base/fallback inline copy's on-image
   overlay chip (see the BASE/FALLBACK block above) and reusing it here
   would bleed these enhanced-only flex/color rules into that unrelated
   element via the cascade. min-width:0 + ellipsis on the title guards
   against the row squeezing the longest owner titles (e.g. "Great Team
   and Great Achievement") at the narrower end of the enhanced breakpoint
   range, just above 900px. */
.career-frame-index{
  display:inline-flex; align-items:baseline; gap:.4em; color:var(--career-catalogue-index);
  min-width:0; overflow:hidden;
}
.career-frame-index .n{ color:var(--career-catalogue-number); font-weight:600; flex:0 0 auto; }
.career-frame-title{
  font-family:var(--serif); font-size:14px; letter-spacing:0; color:var(--heading);
  text-transform:none;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.career-frame-archive{ color:var(--career-archive-color); flex:0 0 auto; white-space:nowrap; }
.career-frame-archive .n{ color:var(--career-archive-number); }

/* ---- Progress rail — dark keeps its shipped green track / gold fill;
   daylight recolors to a quiet pine track with an ochre fill (attention =
   ochre on paper, per brand — FE-BUG-009 reverted the FE-017 "forest
   progress" fill). Height still comes from career.js's active chapter. ---- */
.career-scroll.is-enhanced .career-rail{
  display:block;
  position:absolute; right:-24px; top:14%; bottom:14%;
  width:2px; background:var(--career-rail-track); border-radius:2px; z-index:3;
}
.career-rail-fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--career-rail-fill); border-radius:2px;
  transition:height .45s ease;
}

/* ---- Vestigial FE-017 "Album binding" machinery — now inert in BOTH
   editions. FE-BUG-009 set --career-album-thread-display:none and
   --career-album-indent:0 for light too (dark was already none/0), so the
   ::before thread and the plate-number nodes never render anywhere. Kept
   as disabled tokens rather than deleted; a later pass may drop the
   pseudo-element, the --career-album-* tokens and this rule outright. ---- */
.bmhud-career .career-chapter{
  position:relative;
  padding-inline-start:var(--career-album-indent);
}
.bmhud-career .career-chapter::before{
  content:"";
  display:var(--career-album-thread-display);
  position:absolute; z-index:0;
  inset-block:0;
  inset-inline-start:22px;
  width:2px;
  background:var(--career-album-thread);
}
.bmhud-career .career-chapter:first-child::before{ inset-block-start:50%; }
.bmhud-career .career-chapter:last-child::before{ inset-block-end:50%; }
.bmhud-career .career-chrome{
  position:var(--career-album-meta-position);
  z-index:var(--career-album-meta-z);
  inset-block-start:var(--career-album-meta-top);
  inset-inline-start:0;
  transform:var(--career-album-meta-transform);
  flex-direction:var(--career-album-meta-direction);
  gap:var(--career-album-meta-gap);
}
.bmhud-career .career-chrome-place{
  writing-mode:var(--career-album-place-writing);
  text-orientation:mixed;
}

/* ---- Idle scroll hint — bottom-center, mono label + gold chevron.
   career.js toggles .is-visible after ~4s of no interaction on chapter 1
   and removes it (permanently) on the first scroll. Purely decorative —
   it never blocks or alters native scrolling. ---- */
.career-scroll.is-enhanced .career-hint{
  display:flex;
  position:fixed; left:50%; bottom:5vh; z-index:40;
  transform:translate(-50%,6px);
  flex-direction:column; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
}
.career-scroll.is-enhanced .career-hint.is-visible{
  opacity:1; transform:translate(-50%,0);
}
.career-hint-chevron{
  color:var(--bm-gold-ink,var(--gold)); font-size:14px; line-height:1;
  animation:career-hint-bounce 1.6s ease-in-out infinite;
}
@keyframes career-hint-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}

/* ---- Narrow screens (spec: <=900px) — stacked image-with-its-caption,
   normal scroll, NO sticky side-by-side, even when .is-enhanced is
   present. This is a deliberate override, not just a fallback: mobile
   always gets the plain story, minimal motion. ---- */
@media (max-width:900px){
  .career-nav{ padding:16px 18px; flex-wrap:wrap; }
  .career-scroll{ padding:0 18px; }
  .career-chapter{ padding:4vh 0 4vh var(--career-album-indent); }
  .career-media{ max-width:none; }

  .career-scroll.is-enhanced .career-media-inline{ display:block; }
  .career-scroll.is-enhanced .career-frame-sticky{ display:none; }
  .career-scroll.is-enhanced .career-layout{ display:block; }
  .career-scroll.is-enhanced .career-chapter{
    min-height:0; display:block; padding:4vh 0 4vh var(--career-album-indent);
    border-bottom:1px solid var(--border);
  }
  .career-scroll.is-enhanced .career-chapter:last-child{ border-bottom:0; }
  .career-scroll.is-enhanced .career-chapter.is-poster .career-headline{
    font-size:clamp(1.8rem,8vw,2.6rem); line-height:1.05;
  }
  .career-scroll.is-enhanced .career-hint{ display:none; }
  /* Minimal motion on mobile: the text fade is a desktop-frame-rhythm
     device: at this width every chapter's text is always fully visible,
     no dim/offset resting state. */
  .career-scroll.is-enhanced .career-chrome,
  .career-scroll.is-enhanced .career-copy{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ---- Footer (matches the site-wide grammar) ---- */
.bmhud-career .bm-footer{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  max-width:1240px; margin:0 auto; padding:26px 28px 46px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bmhud-career .bm-footer b{ color:var(--bm-gold-ink,var(--gold)); }
.bmhud-career .bm-footer-name{ font-family:var(--serif); font-weight:500; font-size:14px; letter-spacing:0; color:var(--heading); }
.bmhud-career .bm-footer-name b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }

/* ---- Motion / accessibility ----
   Belt-and-braces: career.js already refuses to add .is-enhanced under
   prefers-reduced-motion (so the ENHANCED block above never applies), but
   this guarantees it even if .is-enhanced somehow ends up on the element
   (e.g. a future regression) — force back to the static fallback and kill
   the hint bounce + the text fade-in. */
@media (prefers-reduced-motion:reduce){
  .bmhud-career *{ transition:none !important; animation:none !important; }
  .career-scroll.is-enhanced .career-media-inline{ display:block !important; }
  .career-scroll.is-enhanced .career-frame-sticky{ display:none !important; }
  .career-scroll.is-enhanced .career-layout{ display:block !important; }
  .career-scroll.is-enhanced .career-chapter{
    min-height:0 !important; display:block !important;
    padding:6vh 0 6vh var(--career-album-indent) !important;
    border-bottom:1px solid var(--border) !important;
  }
  .career-scroll.is-enhanced .career-chapter.is-poster .career-headline{
    font-size:clamp(1.5rem,3.2vw,2.2rem) !important; line-height:1.18 !important;
  }
  .career-scroll.is-enhanced .career-chrome,
  .career-scroll.is-enhanced .career-copy{
    opacity:1 !important; transform:none !important;
  }
  .career-scroll.is-enhanced .career-hint{ display:none !important; }
}