/* ============================================================
   VASTOLA — A WORKING LIFE, VOLUME I
   A zine. Design system below.
   ============================================================ */

:root {
  /* Default palette: "Ink & Watercolor"
     --paper (callouts/cards) is a near-white, --paper-shadow (page bg) is a
     warmer beige so the cards visibly pop against the page. */
  --paper: #fbf6e7;
  --paper-shadow: #d9cdb0;
  --ink: #1a1714;
  --ink-soft: #3a322a;
  --rule: #1a1714;
  --accent: #c5573a;    /* terracotta */
  --bloom: #1f5d62;     /* teal */
  --highlight: #e8c547; /* mustard */

  /* Fonts */
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-loud: "Bowlby One", "Impact", sans-serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;
  --font-mono: "DM Mono", "Courier New", monospace;

  /* Watercolor intensity (0..1.4) */
  --wc-intensity: 1;

  /* Distressed photocopier intensity (0..1) */
  --distress: 0.35;

  /* Layout */
  --content-max: 1180px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Global vertical gap between a page's title/hero block and the first
     content header below it. Tuned to the Services page; mirrored across
     About me + Career story so all three pages match. */
  --page-head-gap: 56px;

  /* Gap below a page-title eyebrow and the main header beneath it. Tied to
     --page-head-gap so the eyebrow→header distance on About me + Offerings
     matches the Services page (the spacing template) exactly. */
  --eyebrow-gap: var(--page-head-gap);
}

/* Palette: Risograph */
[data-palette="riso"] {
  --paper: #f4f1e4;
  --paper-shadow: #ebe6d2;
  --ink: #0d0d0d;
  --ink-soft: #2a2a2a;
  --rule: #0d0d0d;
  --accent: #ff4889;
  --bloom: #2c3df0;
  --highlight: #ffd24a;
}

/* Palette: Tabloid */
[data-palette="tabloid"] {
  --paper: #ebe3cd;
  --paper-shadow: #ddd2b6;
  --ink: #1b1916;
  --ink-soft: #3b3528;
  --rule: #1b1916;
  --accent: #6e1f23;
  --bloom: #1b2e4f;
  --highlight: #d99c2b;
}

/* Palette: Editorial */
[data-palette="editorial"] {
  --paper: #ece9df;
  --paper-shadow: #ddd9cb;
  --ink: #0e0e0d;
  --ink-soft: #2c2c2a;
  --rule: #0e0e0d;
  --accent: #14392e;
  --bloom: #3a5a78;
  --highlight: #f0c419;
}

/* Font swap groups */
[data-font="serif"] {
  --font-display: "Bodoni Moda", serif;
  --font-loud: "Bowlby One", "Impact", sans-serif;
}
[data-font="condensed"] {
  --font-display: "Anton", "Impact", sans-serif;
  --font-loud: "Anton", "Impact", sans-serif;
}
[data-font="hand"] {
  --font-display: "Reenie Beanie", "Caveat", cursive;
  --font-loud: "Caveat Brush", "Caveat", cursive;
}

/* ===== Base ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.02) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode: multiply;
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

::selection { background: var(--highlight); color: var(--ink); }

/* ===== Typography ===== */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.loud {
  font-family: var(--font-loud);
  letter-spacing: 0.01em;
  line-height: 0.9;
}
.body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}
.hand {
  font-family: var(--font-hand);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dateline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Drop cap */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 5.4em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.08em -0.1em -0.04em;
  color: var(--accent);
}

/* ===== Page chrome ===== */

.page {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page--full {
  max-width: none;
  padding: 0;
}

.chapter {
  position: relative;
  padding: 100px 0 120px;
  border-top: 1px solid var(--ink);
}

.chapter:first-of-type { border-top: 0; }

/* Folio / page number footer */
.folio {
  position: absolute;
  top: 24px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}
/* LinkedIn stamp lives in the right-side folio slot — needs pointer-events back on */
.folio .li-stamp { pointer-events: auto; }
.folio .li-stamp__svg { width: 48px; }
.folio .li-stamp { filter: drop-shadow(2px 2px 0 rgba(20,18,16,0.28)); }
.folio .li-stamp:hover { filter: drop-shadow(3px 3px 0 rgba(20,18,16,0.34)); }

/* Random page numbers (PG 010, PG 028, etc.) hidden site-wide. They no
   longer make sense once the journey view became a single-job display. */
.folio .folio__num,
.folio__num {
  display: none;
}

/* Chapter eyebrow + title */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink);
}

.chapter__num {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  margin: 0 0 10px;
}

.chapter__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.chapter__subtitle {
  /* Newsreader italic for readability at deck sizes (Bodoni Moda italic was fragile here) */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 56ch;
  text-wrap: balance;
  letter-spacing: -0.005em;
}

/* Alt titles (clickable) */
.alt-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-items: center;
}
.alt-titles__label { opacity: 0.7; }
.alt-title {
  background: transparent;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all .15s ease;
}
.alt-title:hover { color: var(--accent); border-color: var(--accent); }
.alt-title[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ===== Two-column chapter body ===== */

.chapter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: 32px;
}
.chapter__grid--no-art {
  grid-template-columns: 1fr;
}
.chapter__grid--no-art .chapter__narrative {
  max-width: 65ch;
  margin: 0;
}
@media (max-width: 900px) {
  .chapter__grid { grid-template-columns: 1fr; }
}

.chapter__narrative {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  max-width: 50ch;
}
.chapter__narrative p { margin: 0 0 1em; }
.chapter__narrative p + p { text-indent: 1.4em; }

.chapter__art {
  position: relative;
  min-height: 360px;
}

/* ===== Stats row ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--ink);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stat__num em {
  font-style: italic;
  color: var(--accent);
}
.stat__label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 22ch;
}

/* ===== Pull quote ===== */
.pullquote {
  margin: 56px 0 8px;
  padding: 28px 0 0;
  border-top: 4px double var(--ink);
  position: relative;
}
.pullquote__mark {
  position: absolute;
  top: -28px;
  left: -8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}
.pullquote__text {
  /* Newsreader italic — more legible than Bodoni Moda italic at quote sizes */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.4;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.005em;
}
.pullquote__cite {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pullquote__cite strong { color: var(--ink); font-weight: 700; }

/* Accent-colored separator rule that sits above the recommendations link. */
.pullquote__rule {
  border: 0;
  height: 1px;
  background: var(--accent);
  margin: 36px 0 22px;
  max-width: 100%;
}
/* On the Career story page the rule under the quote is black, not accent. */
.cj__chapter-wrap .pullquote__rule {
  background: var(--ink);
}

/* "See all recommendations on LinkedIn →" link below the red rule. */
.pullquote__more {
  display: inline-block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.pullquote__more:hover { color: var(--ink); }

/* ===== Marginalia ===== */
.marginalia {
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: 28px;
  line-height: 1.05;
  position: absolute;
  transform: rotate(-4deg);
  pointer-events: none;
}

/* ===== Rules / dividers ===== */
.rule-thick { border: 0; border-top: 6px solid var(--ink); margin: 0; }
.rule-thin  { border: 0; border-top: 1px solid var(--ink); margin: 0; }
.rule-double { border: 0; border-top: 4px double var(--ink); margin: 0; }

/* ===== Stamp ===== */
.stamp {
  display: inline-block;
  font-family: var(--font-loud);
  letter-spacing: 0.08em;
  border: 4px solid currentColor;
  padding: 8px 14px;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--accent);
  transform: rotate(-6deg);
  background: rgba(255,255,255,0.02);
}

/* ===== Tape ===== */
.tape {
  display: inline-block;
  background: rgba(232, 197, 71, 0.55);
  padding: 4px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background .15s ease;
}
a.tape:hover { background: rgba(232, 197, 71, 0.9); color: var(--ink); }

/* ===== Card ===== */
.card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px;
  position: relative;
}

/* ===== Watercolor blob holder ===== */
.bloom-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Halftone */
.halftone-dots {
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

/* ===== Page-turn moment between chapters ===== */
.page-turn {
  position: relative;
  height: 100px;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 49%, var(--ink) 49.5%, var(--ink) 50.5%, transparent 51%, transparent 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-turn__mark {
  /* Match the body background (now --paper-shadow) so the horizontal rule
     behind the label breaks cleanly around the text. */
  background: var(--paper-shadow);
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== Buttons / links ===== */
.linkbtn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
.linkbtn:hover { color: var(--accent); }

/* ===== Loud zine block ===== */
.zineblock {
  font-family: var(--font-loud);
  font-size: clamp(50px, 10vw, 140px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ===== Tweaks panel overrides (theme matches the zine) ===== */
.tweaks-panel { font-family: var(--font-mono) !important; }

/* ===== Misc helpers ===== */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 64px; }
.mt-6 { margin-top: 96px; }

/* respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   DISTRESSED PHOTOCOPIER EFFECT — tweakable via --distress (0..1)
   Subtle by default. Adds noise, slight desaturation, edge
   roughness, and a faint horizontal banding to mimic zine xerox.
   ============================================================ */
html {
  position: relative;
}

html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
}

/* Speckle / xerox grain */
html::before {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 1.3 -0.4'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: calc(var(--distress) * 0.55);
}

/* Photocopy horizontal banding + edge fade */
html::after {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      rgba(0,0,0,0.02) 3px 4px
    ),
    radial-gradient(ellipse at 50% 0%, transparent 60%, rgba(0,0,0,0.10) 100%),
    radial-gradient(ellipse at 50% 100%, transparent 60%, rgba(0,0,0,0.10) 100%);
  opacity: calc(var(--distress) * 0.9);
}

/* Slight desaturation on the whole page driven by distress.
   Applied to `.page-host` (a wrapper around all sections) rather than `body`
   so it doesn't create a containing block for `position: fixed` elements
   like the chapter nav and tweaks panel. */
.page-host {
  filter: saturate(calc(1 - var(--distress) * 0.18)) contrast(calc(1 + var(--distress) * 0.08));
}

@media print {
  html::before, html::after { display: none; }
  .page-host { filter: none; }
}

/* ============================================================
   UNIFIED STICKY MASTHEAD NAV — single row with center stack
   Edition (left) · Volumes nav + sub-nav stacked (center) · LinkedIn stamp (right)
   Lives outside .page-host so the distress filter doesn't trap it.
   ============================================================ */

/* The nav uses position:sticky to dock at the viewport top on scroll.
   It no longer shrinks on scroll — same size before and after docking. */
:root { --masthead-top-offset: 16px; }

.masthead-nav {
  position: sticky;
  top: 0;
  padding-top: 0;
  z-index: 100;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(20,18,16,0.04);
}
/* Brand group — the VASTOLA wordmark with a volume toggle that drops down on
   rollover. Replaces the old top colour-bar / grab-target band. */
.masthead-nav__brand-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Caret button — toggles the volume menu on tap/click (works on touch). */
.masthead-nav__vol-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s ease, transform .2s ease, background .15s ease;
}
.masthead-nav__vol-toggle svg { width: 16px; height: 16px; display: block; }
.masthead-nav__vol-toggle:hover { color: var(--accent); }
.masthead-nav__brand-group[data-volopen="true"] .masthead-nav__vol-toggle { transform: rotate(180deg); color: var(--accent); }
.masthead-nav__volumes {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(20, 18, 16, 0.14);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 5;
  white-space: nowrap;
}
/* Invisible bridge across the visual gap so hover doesn't drop between the
   wordmark and the menu. */
.masthead-nav__volumes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
/* Reveal on hover only where hover is reliable (pointer devices)… */
@media (hover: hover) {
  .masthead-nav__brand-group:hover .masthead-nav__volumes {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
/* …and always when the caret toggle has opened it (tap/click/keyboard). */
.masthead-nav__brand-group[data-volopen="true"] .masthead-nav__volumes {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.masthead-nav__volume {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 3px;
  transition: color .15s ease, background .15s ease;
}
.masthead-nav__volume:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.masthead-nav__volume.is-current { color: var(--ink); background: rgba(26, 23, 20, 0.06); }

/* "Connect with me" — yellow chip, now sits beneath the partnership line
   with deliberate vertical breathing room (not crammed). */
.masthead-nav__connect {
  display: inline-block;
  background: rgba(232, 197, 71, 0.55);
  padding: 7px 18px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background .15s ease, font-size .25s ease, padding .25s ease;
}
.masthead-nav__connect:hover {
  background: rgba(232, 197, 71, 0.9);
  color: var(--ink);
}

/* VASTOLA wordmark — in the top nav band, level with the volume tabs. Same
   editorial treatment as the cover wordmark (all-caps Bodoni, ink with the
   "TO" in accent red), sized down to fit the bar. */
.masthead-nav__wordmark {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  text-decoration: none;
}
.masthead-nav__wordmark em { font-style: italic; color: var(--accent); }
.masthead-nav__wordmark:hover { color: var(--ink); }
@media (max-width: 700px) {
  .masthead-nav__wordmark { font-size: clamp(20px, 6vw, 28px); }
}

/* ===== Meta band below the header — VASTOLA wordmark (left) + sub-nav ===== */
.masthead-meta {
  background: var(--paper);
}
.masthead-meta__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 26px;
  /* 3-column grid keeps the edition pinned left, sub-nav truly centered,
     and reserves a matching right cell so the center stays balanced. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.masthead-meta__inner .masthead-nav__brand-group {
  grid-column: 1;
  justify-self: start;
}
.masthead-meta__inner .masthead-nav__sub {
  grid-column: 2;
  justify-self: center;
}
.masthead-meta__inner .masthead-nav__connect {
  grid-column: 3;
  justify-self: end;
}
.masthead-meta__inner .masthead-nav__edition {
  grid-column: 3;
  justify-self: end;
}
.masthead-meta__inner .masthead-nav__edition {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.masthead-meta__inner .masthead-nav__edition strong { color: var(--ink); font-weight: 600; }

/* Redesigned sub-nav — now a segmented pill that visually stands on its own. */
.masthead-meta .masthead-nav__sub {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 3px;
  background: rgba(26, 23, 20, 0.05);
  border-radius: 999px;
}
.masthead-meta .masthead-nav__sub-link {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 7px 16px;
  cursor: pointer;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.masthead-meta .masthead-nav__sub-link:hover { color: var(--accent); }
/* Active section — made more prominent: ink pill, accent underline bar,
   slightly heavier + lifted, so the current page reads at a glance. */
.masthead-meta .masthead-nav__sub-link[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  box-shadow: 0 3px 0 -1px var(--accent), 0 2px 6px rgba(20, 18, 16, 0.18);
}
.masthead-meta .masthead-nav__sub-link[data-active="true"]:hover { color: var(--paper); }

@media (max-width: 700px) {
  :root { --masthead-top-offset: 10px; }
  .masthead-nav__edition-rest { display: none; }
  .masthead-nav__connect { font-size: 9px; padding: 6px 11px; letter-spacing: 0.1em; }
  .masthead-nav__wordmark { font-size: clamp(18px, 5vw, 24px); }
  /* Two rows on small screens: VASTOLA centered up top (Connect pinned right),
     the section pills centered on their own row below. The empty left cell
     mirrors the Connect cell so the wordmark stays truly centered. */
  .masthead-meta__inner {
    padding: 20px 14px 18px;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      ".     brand    connect"
      "sub   sub      sub";
    column-gap: 10px;
    row-gap: 14px;
  }
  .masthead-meta__inner .masthead-nav__brand-group { grid-area: brand; justify-self: center; }
  .masthead-meta__inner .masthead-nav__connect { grid-area: connect; justify-self: end; align-self: center; }
  .masthead-meta__inner .masthead-nav__sub { grid-area: sub; justify-self: center; }
  .masthead-meta .masthead-nav__sub-link { font-size: 9px; padding: 6px 12px; }

  /* Once the reader scrolls past the top, hide the wordmark row entirely —
     both the centered VASTOLA and the "Connect with me" CTA — so only the
     section sub-nav stays docked. The top strip returns on scroll-up. */
  .masthead-nav__brand-group,
  .masthead-nav__connect {
    transition: opacity .2s ease, transform .2s ease;
  }
  .masthead-nav[data-scrolled="true"] .masthead-meta__inner {
    grid-template-areas: "sub sub sub";
    row-gap: 0;
  }
  .masthead-nav[data-scrolled="true"] .masthead-nav__brand-group,
  .masthead-nav[data-scrolled="true"] .masthead-nav__connect {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}

/* ============================================================
   COVER MASTHEAD — title stack (supra above VASTOLA) + Vol. I badge
   ============================================================ */

/* Center the cover masthead column horizontally so the title block and its
   internal stack (title-row, deck, byline, availability) line up vertically. */
.cover__masthead { align-items: center; }

/* Shrink-to-fit wrapper around title-row + deck + byline + availability so they
   all share the same left edge — anchored at the "V" of VASTOLA. inline-flex
   sizes to the widest child (the title-row) and align-items: flex-start keeps
   everything (including narrower deck/byline) flush to that left edge.
   translateX shifts the whole block 65px to the right of its centered position
   without disturbing the flex-centering math on .cover__masthead. */
.cover__title-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  transform: translateX(65px);
}
/* On phones the 65px right-shift pushes VASTOLA off-screen — reset it. */
@media (max-width: 700px) {
  .cover__title-block { transform: none; }
}

/* The title-row wraps the title-stack (supra + VASTOLA) and the Vol. I badge
   side-by-side, with the badge overlapping the right edge of the final "A". */
.cover__title-row {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  /* Centering is now handled by the parent .cover__title-block; the title-row
     itself flushes to flex-start so its left edge defines the shared anchor. */
}

/* Vertical stack: supra sits directly above VASTOLA */
.cover__title-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Override the legacy absolute positioning; lift badge to top-right of "A" */
.cover__title-row .vol-badge {
  position: relative;
  top: auto;
  right: auto;
  margin-left: -34px;       /* ~20% overlap with title's right edge */
  margin-top: -8px;         /* anchored to top of the title cap, not bottom */
  flex-shrink: 0;
  z-index: 5;
}
@media (max-width: 900px) {
  .cover__title-row .vol-badge {
    margin-left: -26px;
    margin-top: -4px;
  }
}

/* Supra — now a clickable button that jumps to the Career Journey view.
   Centered above VASTOLA inside .cover__title-stack. */
.cover__supra {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.9;
  transform: rotate(-3deg);
  margin: 0 0 -10px;
  transition: transform .2s ease;
}
.cover__supra:hover { transform: rotate(-1.5deg) scale(1.03); }
.cover__supra:active { transform: rotate(-3deg) scale(0.98); }
.cover__supra:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
}

/* Small editorial tagline — now sits just above the cover footer, left-aligned
   with the page gutter (matches the masthead's VOL column). */
.cover__tagline {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  border-bottom: 1px dashed transparent;
  display: inline-block;
  /* .cover is display:grid — use justify-self to anchor left, align-self:end
     to pin near the footer (the next grid row). */
  justify-self: start;
  align-self: end;
  margin-bottom: 15px;        /* exactly 15px above the footer line */
  transition: border-color .15s ease, transform .15s ease;
}
.cover__tagline:hover { border-bottom-color: var(--accent); }
.cover__tagline:active { transform: translateY(1px); }

/* When the tagline lives inside the title-block (above the byline) rather than
   as a grid child of .cover, drop the grid-specific positioning and match the
   40px indent the deck/byline use so it sits directly above "Written, edited…". */
.cover__title-block > .cover__tagline {
  justify-self: auto;
  align-self: flex-start;
  margin: 28px 0 0 40px;
}
.cover__title-block > .cover__tagline + .cover__byline { margin-top: 8px; }

/* Spacing for the "Open for engagements" yellow tape under the byline */
.cover__availability { margin-top: 24px; }

/* Byline — keep "Detroit, MI · Remote" together on one line; allow wrap on mobile */
.cover__byline-location {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .cover__byline-location { white-space: normal; }
}

/* ============================================================
   CONTACT — "The colophon" header spacing
   Extra breathing room beneath the eyebrow and Ch. VIII before the title.
   ============================================================ */
.contact__eyebrow { margin-top: 20px; margin-bottom: 36px; }
.contact__num { margin-bottom: 28px; }

/* ============================================================
   X-SHAPED CALLOUT — clickable "psst — I'm a block-shaped operator"
   Sits inside Offerings near the role tabs; opens the XShapedModal.
   ============================================================ */
.xshaped-callout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px dashed var(--accent);
  padding: 7px 14px 7px 12px;
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  margin: 12px 0 0;
  transition: background .18s ease, transform .2s cubic-bezier(.6,.05,.3,1), box-shadow .2s ease;
}
.xshaped-callout:hover {
  background: rgba(197, 87, 58, 0.07);
  transform: translate(-2px, -2px) rotate(-0.5deg);
  box-shadow: 3px 3px 0 var(--accent);
}
.xshaped-callout:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}
.xshaped-callout__star {
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}
.xshaped-callout__text em {
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}
.xshaped-callout__hint {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-left: 1px solid var(--ink-soft);
  padding-left: 10px;
  margin-left: 2px;
}

/* X-shaped modal — reuses .cs-modal classes for layout. Tweaks here cover
   inline links in the body copy (rendered as raw <a>) and the references
   list. */
.cs-modal__section a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.cs-modal__section a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cs-modal__section strong {
  font-weight: 700;
  color: var(--ink);
}

.xshaped-modal__refs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.xshaped-modal__refs li {
  padding: 8px 0;
  border-top: 1px dashed var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
}
.xshaped-modal__refs li:first-child { border-top: none; padding-top: 4px; }
.xshaped-modal__refs a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.xshaped-modal__refs a:hover {
  color: var(--accent);
}

/* ============================================================
   STAT CARDS — clickable variant inside the Career Journey view
   The plain (non-clickable) variant retains the original grid layout.
   ============================================================ */
button.stat--clickable {
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--paper);
  border: 1px solid transparent;
  padding: 18px 18px 16px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
button.stat--clickable::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed transparent;
  pointer-events: none;
  transition: border-color .18s ease;
}
button.stat--clickable:hover,
button.stat--clickable:focus-visible {
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--accent);
  transform: translate(-2px, -2px);
  outline: none;
}
button.stat--clickable .stat__chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity .18s ease;
  margin-top: 6px;
}
button.stat--clickable:hover .stat__chip,
button.stat--clickable:focus-visible .stat__chip {
  opacity: 1;
}

/* ============================================================
   CAREER JOURNEY VIEW — header + phase timeline + full-page job
   ============================================================ */
.cj {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--gutter) 100px;
  position: relative;
}

/* Full-page mode — dark "top zone" (header + timeline + hero) over the
   paper-colored content below. The dark zone bleeds to viewport edges
   via the existing watermark/box-shadow tricks. */
.cj--fullpage {
  background: transparent;
}

/* ===== Dark top zone =====
   The header, phase labels, sticky timeline band, and job hero all live on
   an inverted ink background with cream/white text + accent (orange) + bloom
   (blue) for hierarchy. */
.cj--fullpage .cj__head,
.cj--fullpage .cj-phases-head,
.cj--fullpage .cj-phases,
.cj--fullpage .cj-hero {
  background: var(--ink);
  color: #fbf7e8;
  position: relative;
}
/* Bleed each dark section to the full viewport via giant box-shadow. */
.cj--fullpage .cj__head,
.cj--fullpage .cj-phases-head,
.cj--fullpage .cj-hero {
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(0 -100vmax);
}

/* Header — title, supra, deck on dark */
.cj--fullpage .cj__supra      { color: var(--accent); }
.cj--fullpage .cj__title      { color: #fbf7e8; }
.cj--fullpage .cj__title em   { color: var(--accent); }
.cj--fullpage .cj__deck       { color: rgba(245, 239, 222, 0.85); }

/* Phase head row — chapter labels, blurbs */
.cj--fullpage .cj-phase__num    { color: rgba(245, 239, 222, 0.55); }
.cj--fullpage .cj-phase__label  { color: #fbf7e8; }
.cj--fullpage .cj-phase__blurb  { color: var(--bloom); }
.cj--fullpage .cj-phases__row--heads {
  border-bottom-color: rgba(245, 239, 222, 0.25);
}

/* Chapter cards on dark */
.cj--fullpage .cj-chapter-node            { border-left-color: rgba(245, 239, 222, 0.18); }
.cj--fullpage .cj-chapter-node:hover      { border-left-color: color-mix(in oklab, var(--accent) 70%, transparent); }
.cj--fullpage .cj-chapter-node:hover .cj-chapter-node__company { color: var(--accent); }
.cj--fullpage .cj-chapter-node__dot       { background: var(--ink); border-color: rgba(245, 239, 222, 0.7); }
.cj--fullpage .cj-chapter-node__dates     { color: rgba(245, 239, 222, 0.65); }
.cj--fullpage .cj-chapter-node__company   { color: #fbf7e8; }
.cj--fullpage .cj-chapter-node[data-active="true"] { border-left-color: var(--accent); }
.cj--fullpage .cj-chapter-node[data-active="true"] .cj-chapter-node__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
}
.cj--fullpage .cj-chapter-node[data-active="true"] .cj-chapter-node__dates,
.cj--fullpage .cj-chapter-node[data-active="true"] .cj-chapter-node__company {
  color: var(--accent);
}

/* JobHero on dark */
.cj--fullpage .cj-hero__chapter-nod    { color: var(--accent); }
.cj--fullpage .cj-hero__title          { color: #fbf7e8; }
.cj--fullpage .cj-hero__subtitle       { color: rgba(245, 239, 222, 0.85); }
.cj--fullpage .cj-hero__meta           { border-top-color: rgba(245, 239, 222, 0.3); border-bottom-color: rgba(245, 239, 222, 0.3); }
.cj--fullpage .cj-hero__meta--top      { border-top-color: rgba(245, 239, 222, 0.3); }
.cj--fullpage .cj-hero__meta--bottom   { border-bottom-color: rgba(245, 239, 222, 0.3); }
.cj--fullpage .cj-hero__meta-pair dt   { color: rgba(245, 239, 222, 0.5); }
.cj--fullpage .cj-hero__meta-pair dd   { color: #fbf7e8; }
.cj--fullpage .cj-hero__meta-pair--series dd { color: var(--bloom); }

/* Watermarks read as lighter blooms on dark, so soften them. */
.cj--fullpage .cj__watermarks svg { mix-blend-mode: screen; opacity: 0.55; }

.cj__head {
  text-align: center;
  margin-bottom: 28px;
}
.cj__supra {
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: clamp(28px, 3.5vw, 42px);
  transform: rotate(-2deg);
  margin: 0 0 -4px;
  line-height: 0.9;
}
.cj__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(120px, 18vw, 240px);
  letter-spacing: -0.04em;
  line-height: 0.85;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}
.cj__title em { font-style: italic; color: var(--accent); }
.cj__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 18px auto 0;
  text-wrap: balance;
  line-height: 1.45;
}

/* ===== Phase-grouped timeline =====
   Split into two stacked rows:
   - .cj-phases-head : chapter labels (CHAPTER 0X / name / blurb). Scrolls normally.
   - .cj-phases      : the row of chapter cards. Sticks at viewport top on scroll.
   Both rows share the same grid so columns line up perfectly. */
.cj-phases-head {
  margin: 24px 0 0;
}
.cj-phases {
  position: sticky;
  /* Docks flush under the (now ~168px) masthead so the timeline is locked
     to the navigation with no visible gap. */
  top: 168px;
  z-index: 5;
  margin: 0 0 0;
  padding: 12px 0 16px;
  background: var(--ink);
  /* Bleed dark bg to viewport edges. */
  box-shadow:
    0 0 0 100vmax var(--ink),
    0 1px 0 0 rgba(245, 239, 222, 0.12);
  clip-path: inset(0 -100vmax);
}
.cj-phases.is-stuck {
  box-shadow:
    0 0 0 100vmax var(--ink),
    0 6px 14px -8px rgba(0, 0, 0, 0.4);
}

/* Visual chapter-group dividers. Vertical line at the LEFT edge of each
   phase column (except the first) so the 4 groups are clearly demarcated. */
.cj-phases__row > .cj-phase + .cj-phase {
  border-left: 1px solid rgba(245, 239, 222, 0.18);
  padding-left: 14px;
}
/* The phase-head row uses the same divider so labels and cards align. */
.cj-phases__row--heads > .cj-phase + .cj-phase {
  border-left: 1px solid rgba(245, 239, 222, 0.18);
  padding-left: 14px;
}

.cj-phases__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Scaling gets a wider column (3 jobs); Foundations/Craft each have 1 job
     and lose a few pixels; Implementing covers 2 jobs. */
  grid-template-columns: 0.85fr 0.85fr 2.1fr 1.2fr;
  gap: 18px;
  align-items: stretch;
  position: relative;
}
.cj-phases__row--heads {
  /* Single shared horizontal rule under all heads — this is the line the
     easter egg and the chapter dots align to. */
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
  padding-bottom: 10px;
  margin-bottom: 0;
}
.cj-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.cj-phase__head {
  padding: 0;
  margin: 0;
}
.cj-phase__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.cj-phase__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.cj-phase__blurb {
  margin: 2px 0 0;
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: 14px;
  transform: rotate(-1deg);
  display: inline-block;
}

.cj-phase__chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  position: relative;
}
.cj-phase__intermission-slot { display: flex; align-items: stretch; }
.cj-phase__chapter-item { flex: 1 1 0; min-width: 0; }

/* Chapter node — vertical stack with the dot above the date,
   left-aligned text. A faint left-rule sits on every card and
   thickens / shifts to the accent color on hover and active. */
.cj-chapter-node {
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-left: 2px solid color-mix(in oklab, var(--ink) 18%, transparent);
  padding: 6px 6px 6px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  transition: border-color .18s ease, color .18s ease;
  text-align: left;
}
.cj-chapter-node__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  display: inline-block;
  margin-bottom: 2px;
}
.cj-chapter-node__dates {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cj-chapter-node__company {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 1.18;
  color: var(--ink);
  text-wrap: balance;
}

/* Hover — accent hint on the left-rule and the company name. */
.cj-chapter-node:hover {
  border-left-color: color-mix(in oklab, var(--accent) 55%, transparent);
}
.cj-chapter-node:hover .cj-chapter-node__company { color: var(--accent); }

/* Active state — full-accent left rule, accent text + filled dot. */
.cj-chapter-node[data-active="true"] {
  border-left-color: var(--accent);
}
.cj-chapter-node[data-active="true"] .cj-chapter-node__dates,
.cj-chapter-node[data-active="true"] .cj-chapter-node__company {
  color: var(--accent);
}
.cj-chapter-node[data-active="true"] .cj-chapter-node__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Conic-gradient progress ring around the active chapter dot. */
.cj-chapter-node__progress {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), transparent 0);
  -webkit-mask:
    radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask:
    radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0.55;
  pointer-events: none;
}

/* Intermission easter egg — absolutely positioned in the gap between
   Craft Refinement (col 2) and Scaling (col 3) so it doesn't steal width
   from any chapter card. Vertically centered on the rule above the dots. */
.cj-phase[data-phase="scaling"] .cj-intermission {
  position: absolute;
  /* Sit centered in the 18px column gap between Craft Refinement and Scaling.
     top: -9px lifts it onto the rule line (which is 1px above .cj-phases'
     top minus 8px of .cj-phases padding-top above the row). */
  left: -9px;
  top: -9px;
  transform: translate(-50%, -50%);
  margin: 0;
}
.cj-intermission {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.4;
  transition: opacity .25s ease, transform .25s ease;
}
.cj-intermission:hover,
.cj-intermission:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}
.cj-intermission__glyph {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
  background: var(--paper);
  padding: 0 2px;
  position: relative;
  z-index: 2;
}
.cj-intermission__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  /* Pulsating blob sits behind the glyph and emanates outward */
  animation: cjIntermissionPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  transform-origin: center;
}
@keyframes cjIntermissionPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  50%      { transform: translate(-50%, -50%) scale(2.6); opacity: 0.35; }
}
.cj-intermission__hint {
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: center;
  opacity: 0;
  transition: opacity .25s ease;
  margin-top: 6px;
}
.cj-intermission:hover .cj-intermission__hint,
.cj-intermission:focus-visible .cj-intermission__hint { opacity: 1; }

@media (max-width: 900px) {
  .cj-phases__row { grid-template-columns: 1fr; gap: 24px; }
  .cj-phase__chapters { flex-wrap: wrap; }
  .cj-intermission__hint { transform: rotate(0deg); }
}

/* ===== Stage: full-page job display ===== */
.cj__stage {
  position: relative;
  margin-top: 24px;
  /* On a job change we scrollIntoView the stage; land the job hero just below
     the locked nav stack (condensed masthead ≈60 + collapsed timeline band
     ≈105 = ≈165), plus a small breathing gap so the chapter nod isn't clipped. */
  scroll-margin-top: 182px;
}

/* The hero "meta card" — sits on the page background, no box. */
.cj-hero {
  text-align: left;
  padding: 0 0 16px;
  max-width: 980px;
  margin: 0 auto;
}
.cj-hero__chapter-nod {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.cj-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 46px);   /* smaller than the page header (.svc__header) */
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
.cj-hero__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.32;
  color: var(--ink-soft);
  /* Fixed box width so every chapter's subtitle wraps at the same point
     (balance made short ones narrower). Capped to 100% on small screens. */
  width: min(60ch, 100%);
  max-width: 100%;
  margin: 0 0 24px;
  text-wrap: pretty;
}
.cj-hero__meta {
  display: grid;
  gap: 12px 22px;
  max-width: none;
  margin: 0;
  padding: 14px 0;
  text-align: left;
}
/* Top row: Company · Role · Location · Dates — 4 even columns. */
.cj-hero__meta--top {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 18px;
  padding-bottom: 14px;
  border-top: 1px dashed color-mix(in oklab, var(--ink) 35%, transparent);
}
/* Bottom row: Industry · Series — 2 even columns under the top row.
   Extra padding-top so Industry/Series have clear vertical separation from
   the top row's Company/Role/Location/Dates pairs above them. */
.cj-hero__meta--bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed color-mix(in oklab, var(--ink) 35%, transparent);
  margin-top: 0;
}
/* Anchor the bottom row's Industry column to the same left edge as the
   top row's first column (Company). The Series cell follows next. */
.cj-hero__meta--bottom .cj-hero__meta-pair { min-width: 0; }

@media (max-width: 700px) {
  .cj-hero__meta--top    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cj-hero__meta--bottom { grid-template-columns: 1fr; }
}
.cj-hero__meta-pair { display: flex; flex-direction: column; min-width: 0; }
.cj-hero__meta-pair dt {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.cj-hero__meta-pair dd {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}
.cj-hero__meta-pair dd strong { font-weight: 700; }
.cj-hero__meta-pair--series dd {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
}

/* Full-page chapter wrap — constrain the cream sheet bg width to match the
   JobHero dashed border (880px max), centered on the page. The chapter
   internal header is hidden because JobHero already shows that info. */
/* Body copy sits on a full-bleed #F9F0D8 panel; the job hero above it stays on
   the page's textured background. */
.cj__chapter-wrap {
  margin-top: 0;
  position: relative;
  padding: 0 0 8px;
}
.cj__chapter-wrap .chapter {
  /* Match the job hero's box (980 / no side padding) so the body lines up on
     the same left edge as the title, subtitle, and dashed meta line above. */
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 0 40px;
  border-top: 0;
  /* The cream-sheet bg is cleared in chapter-art.css (after the rule that sets
     it) so the Career story chapter sits on the page bg. */
}
.cj__chapter-wrap .chapter > .folio,
.cj__chapter-wrap .chapter .chapter__num,
.cj__chapter-wrap .chapter .alt-titles,
.cj__chapter-wrap .chapter .chapter__title,
.cj__chapter-wrap .chapter .chapter__subtitle,
.cj__chapter-wrap .chapter .eyebrow,
.cj__chapter-wrap .chapter .chapter__descriptor {
  display: none;
}
.cj__chapter-wrap .chapter .page { padding: 0; max-width: none; }
/* The chapter art (Fig 1 / Fig 2) is slightly narrowed by the parent
   width clamp; explicitly cap its max-width so it never overflows. */
.cj__chapter-wrap .chapter__art { max-width: 100%; }

/* ===== Career story: two-column chapter body =====
   Left column = main copy, right column = stacked case-study blocks. The
   pull-quote that follows the wrapper spans the full width beneath both
   columns. Scoped to .cj__chapter-wrap so the chapter component is unaffected
   if it ever renders elsewhere (it falls back to a normal stack). */
.cj__chapter-wrap .chapter__body-cols {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 820px) {
  .cj__chapter-wrap .chapter__body-cols { grid-template-columns: 1fr; gap: 32px; }
}
/* Drop the standalone grid's top margin so the copy lines up with the
   case-studies header across the row. */
.cj__chapter-wrap .chapter__body-cols .chapter__grid { margin-top: 0; }
.cj__chapter-wrap .chapter__body-cols .chapter__grid--no-art .chapter__narrative {
  max-width: none;   /* fill the left column */
}

/* Case-studies header — mirrors "The problems I solve" (.lp-role__kicker):
   Caveat hand, accent colour, same size + slight rotation. */
.chapter__cases-head {
  position: relative;
  display: inline-block;
  margin: 0 0 16px;
}
.chapter__cases-title {
  display: inline-block;
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  transform: rotate(-1.5deg);
}
/* Small "coming soon" tag perched over the header. */
.chapter__cases-soon {
  position: absolute;
  top: -10px;
  right: -8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 3px 7px;
  transform: rotate(5deg);
  white-space: nowrap;
  pointer-events: none;
}
/* Stack the case-study blocks vertically. Their individual block design is
   unchanged — only the container layout (single column, no top rule). */
.cj__chapter-wrap .chapter__cases .stats {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  border-top: 0;
}

/* Decorative watermarks behind the whole journey section — blooms & splatters.
   They sit behind all content via z-index, with the layer marked
   pointer-events: none so they don't interfere with clicks. Bleed to the
   full viewport width so the texture isn't capped by the content gutter. */
.cj__watermarks {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cj--fullpage > *:not(.cj__watermarks) { z-index: 1; }
.cj--fullpage > .cj__head,
.cj--fullpage > .cj__stage { position: relative; }
/* Lift the sticky timeline above the watermarks so they don't tint it. */
.cj--fullpage > .cj-phases { z-index: 5; }

@media (max-width: 700px) {
  .cj-hero { padding: 8px 0 22px; }
  .cj-hero__meta { padding: 14px 0; }
}

/* ============================================================
   CASE STUDY MODAL — STAR+ formatted
   ============================================================ */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20,18,16,0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  overflow-y: auto;
  animation: cs-modal-in .18s ease-out;
}
@keyframes cs-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cs-modal__card {
  background: var(--paper);
  border: 1px solid var(--ink);
  max-width: 720px;
  width: 100%;
  position: relative;
  box-shadow: 10px 10px 0 var(--accent);
  animation: cs-card-in .25s cubic-bezier(.6,.05,.3,1);
}
@keyframes cs-card-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cs-modal__head {
  padding: 28px 56px 18px 36px;
  border-bottom: 4px double var(--ink);
  position: relative;
}
.cs-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.cs-modal__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
  text-wrap: balance;
}
.cs-modal__stat {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}
.cs-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: 1px solid var(--ink);
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.cs-modal__close:hover {
  background: var(--ink);
  color: var(--paper);
}
/* Subtle "coming soon" rubber stamp — these case studies are still drafts.
   Angled, low-opacity, non-interactive; reads as an editorial stamp pressed
   into the header rather than a loud banner. */
.cs-modal__stamp {
  position: absolute;
  top: 22px;
  right: 64px;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 72%, transparent);
  padding: 5px 11px 4px;
  border: 1.5px solid color-mix(in oklab, var(--accent) 45%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  transform: rotate(-8deg);
  opacity: 0.72;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .cs-modal__stamp { top: auto; bottom: 12px; right: 16px; font-size: 9px; padding: 4px 8px; letter-spacing: 0.22em; }
}
.cs-modal__body {
  padding: 24px 36px 36px;
}
.cs-modal__section { margin-bottom: 22px; }
.cs-modal__section:last-child { margin-bottom: 0; }
.cs-modal__sec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink-soft);
}
.cs-modal__section p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 0.85em;
  text-wrap: pretty;
}
.cs-modal__section p:last-child { margin-bottom: 0; }
.cs-modal code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(26,23,20,0.08);
  padding: 2px 6px;
}

@media (max-width: 700px) {
  .cs-modal { padding: 30px 12px; }
  .cs-modal__head { padding: 22px 48px 16px 20px; }
  .cs-modal__body { padding: 20px; }
}

/* ============================================================
   A CAREER STORY — page (formerly "My Career Journey")
   Cover masthead landing (above) → a horizontal, colour-coded grouped
   sub-nav → one job at a time below it. Light paper palette, reusing
   the base .cj-hero styles. No left rail, no frames, no iframes.
   Each group's accent colour comes from the inline --group variable
   (set per group in career-journey.jsx).
   ============================================================ */
.cs-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 100px;
  position: relative;
}
/* Keep real content above the decorative watermark layer. The sticky nav is
   excluded so it can take a higher z-index and stay above the scrolling copy
   (otherwise this rule's specificity overrides .cs-nav's z-index and the copy
   paints over the docked nav). */
.cs-page > *:not(.cj__watermarks):not(.cs-nav) { position: relative; z-index: 1; }

/* Compact the masthead landing on the career story page so the grouped nav
   below peeks above the fold on a typical 13–15" laptop — the chapter group
   headings ("FOUNDATIONS" …) show at the bottom, inviting a scroll. The full
   masthead + easter eggs are preserved; only the empty vertical slack is cut. */
.cs-landing .cover {
  min-height: auto;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
}
/* Constrain the masthead content to the same centred content column as the
   Services / About me pages and the job nav below — so the Career story header
   + sub-header line up with them instead of sitting further left. */
.cs-landing .cover__main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(14px, 2.6vw, 32px) var(--gutter);
}

/* Left-align the VASTOLA wordmark + eyebrow + sub-header (matching the
   About me / Services left-aligned headers). */
.cs-landing .cover__masthead { align-items: flex-start; }
.cs-landing .cover__title-block {
  transform: none;
  align-items: flex-start;
  margin: 0;
}
.cs-landing .cover__title-stack { align-items: flex-start; }
/* VASTOLA wordmark sized to match the headers on the other pages (e.g. "4 roles,
   one mission"); still all-caps. The Vol. badge scales down to suit. */
.cs-landing .cover__title { font-size: clamp(36px, 5.4vw, 76px) !important; }
.cs-landing .cover__title-row .vol-badge { transform: rotate(8deg) scale(0.62); margin-left: -22px; }

/* The supra becomes the page eyebrow ("Career story · Two decades, in
   chapters"), styled exactly like the About me eyebrow: mono label flanked by
   two short rules. */
.cs-landing .cover__supra {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: 0;
  transform: none;
  line-height: 1.4;
  margin: 0 0 16px -45px;
  cursor: pointer;
}
.cs-landing .cover__supra::before,
.cs-landing .cover__supra::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink);
}
.cs-landing .cover__supra:hover { transform: none; color: var(--accent); }

/* Career story sub-header — matches the reference sub-header (.svc__subhead),
   left-aligned under the wordmark. */
.cs-landing .cover__deck {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
  margin: 18px 0 0;
  text-align: left;
}

/* ----- Horizontal grouped nav — pulled up to meet the bottom edge of the
   masthead's watercolour, then LOCKED to the top on scroll so the chapter/job
   links stay reachable while the copy scrolls behind it. ----- */
:root { --cs-nav-top: 60px; }   /* condensed masthead (top band hidden) height */
.cs-nav {
  margin: 4px 0 0;
  position: sticky;
  top: var(--cs-nav-top);
  z-index: 50;                 /* under the masthead (100), over the content (1) */
  border-top: 2px solid color-mix(in oklab, var(--ink) 22%, transparent);
}
/* Full-viewport-width opaque backdrop so the scrolling copy is cleanly hidden
   behind the docked nav (not visible through it), with a soft separating
   shadow once it's stuck. */
.cs-nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  box-shadow: 0 8px 14px -10px rgba(20, 18, 16, 0.32);
  z-index: -1;
  pointer-events: none;
}
.cs-nav__groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cs-nav__group {
  --group: var(--accent);
  position: relative;
  padding: 16px 16px 18px;
  border-top: 4px solid var(--group);                 /* the colour cap per group */
  border-left: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.cs-nav__group:first-child { border-left: 0; }
.cs-nav__group-head { margin: 0 0 12px; }
.cs-nav__group-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--group);
  margin-bottom: 3px;
}
.cs-nav__group-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.cs-nav__group-blurb {
  font-family: var(--font-hand);
  color: var(--group);
  font-size: 14px;
  margin: 2px 0 0;
  transform: rotate(-1deg);
  display: inline-block;
}
/* The job list drops as an OVERLAY below the group header (absolute, out of
   flow) so expanding the nav never reflows / pushes the page content down — the
   nav keeps its collapsed height and the panel floats over the copy. */
.cs-nav__companies {
  list-style: none;
  margin: 0;
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--paper);
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  box-shadow: 0 12px 18px -12px rgba(20, 18, 16, 0.34);
  /* Hidden until the nav opens (data-open, set in JS). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .22s ease, transform .26s ease, visibility 0s linear .26s;
}
.cs-nav[data-open="true"] .cs-nav__companies {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .22s ease, transform .26s ease, visibility 0s;
}
.cs-nav__company-item { margin: 0; }
.cs-nav__node {
  width: 100%;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid color-mix(in oklab, var(--group) 25%, transparent);
  padding: 6px 6px 7px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: border-color .18s ease, background .18s ease;
}
.cs-nav__node:hover {
  border-left-color: var(--group);
  background: color-mix(in oklab, var(--group) 7%, transparent);
}
.cs-nav__node[data-active="true"] {
  border-left-color: var(--group);
  background: color-mix(in oklab, var(--group) 13%, transparent);
}
.cs-nav__node-company {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
.cs-nav__node[data-active="true"] .cs-nav__node-company { color: var(--group); }
.cs-nav__node-dates {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The dot + rotation ring carried over from the old timeline node. */
.cs-nav__node-dot {
  position: absolute;
  left: -6px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--group);
}
.cs-nav__node[data-active="true"] .cs-nav__node-dot { background: var(--group); }
.cs-nav__node-progress {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(var(--group) calc(var(--p) * 1%), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0.6;
  pointer-events: none;
}

/* ----- Content below the nav (one job at a time) ----- */
/* The whole job dossier (chapter heading + metadata + body) shares ONE
   continuous, cohesive background — the page's lighter paper colour. No
   distinct band, no yellow: the section simply flows on the page background
   like the body copy beneath "My career did not begin in operations." */
/* ONE cohesive background for the whole job dossier: a solid, full-bleed paper
   band (the same colour the body copy + case studies sit on) that begins at the
   chapter number / job heading and runs through the body. It sits above the
   decorative watermarks, so the heading area no longer reads as a different
   (bloom-tinted) shade than the copy below it. */
/* The job hero (chapter number, title, subtitle, role details) sits on the
   page's textured background; only the body copy gets the #F9F0D8 panel
   (see .cj__chapter-wrap). */
.cs-content {
  min-width: 0;
  margin-top: var(--page-head-gap);
  padding: 0 0 44px;
  position: relative;   /* anchor for the flanking prev/next arrows */
}

/* Subtle chronological prev/next arrows, tucked into the side gutters beside
   the centred chapter column. */
.cj__nav-arrow {
  position: absolute;
  top: 6px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--paper) 65%, transparent);
  color: color-mix(in oklab, var(--ink) 52%, transparent);
  opacity: 0.55;
  cursor: pointer;
  z-index: 4;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cj__nav-arrow svg { width: 19px; height: 19px; display: block; }
.cj__nav-arrow:hover,
.cj__nav-arrow:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  outline: none;
}
.cj__nav-arrow--prev { left: 2px; }
.cj__nav-arrow--next { right: 2px; }
.cj__nav-arrow--prev:hover { transform: translateX(-2px); }
.cj__nav-arrow--next:hover { transform: translateX(2px); }

@media (max-width: 980px) {
  /* On narrow screens the chapter fills the column, so park the arrows in the
     top corners as small tappable controls. */
  .cj__nav-arrow { top: 6px; width: 34px; height: 34px; }
  .cj__nav-arrow--prev { left: 0; }
  .cj__nav-arrow--next { right: 0; }
}
.cs-content .cj__stage { margin-top: 0; }

/* ----- Mobile: the nav becomes a horizontal snap-scroll strip ----- */
@media (max-width: 760px) {
  :root { --cs-nav-top: 54px; }   /* condensed masthead, mobile */
  .cs-nav { margin-top: 48px; }
  .cj__stage { scroll-margin-top: 150px; }
  .cs-nav__groups {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 80%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* Hide the scrollbar so the strip doesn't read as an embedded iframe;
       the peeking next group + snap still signal that it swipes. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cs-nav__groups::-webkit-scrollbar { display: none; }
  .cs-nav__group { scroll-snap-align: start; }
  .cs-content { margin-top: 28px; }
  /* No hover on touch — keep all chapters expanded. */
  .cs-nav__company-item { max-height: 92px; opacity: 1; margin-bottom: 6px; }
}

/* ============================================================
   MOBILE SUB-NAV TRAY — shared left slide-out drawer (.mnav),
   driven by <MobileNavTray>. Used by the About-me roles strip and
   the career-story timeline. On wide screens the full grid/strip
   navs are shown and BOTH the trigger and the drawer are hidden;
   on narrow screens the grids collapse to a single "where am I"
   trigger bar that opens a paper drawer — a mobile echo of the
   zine's table of contents.
   ============================================================ */
.mnav-trigger { display: none; }   /* desktop: the full nav shows instead */
.mnav { display: none; }           /* desktop: drawer never present */

@media (max-width: 760px) {
  /* Swap the desktop nav surfaces for the trigger bar. */
  .lp-tabs-wrap { display: none; }
  .cs-nav__groups { display: none; }

  /* ----- Trigger: the collapsed "where am I" bar ----- */
  .mnav-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    text-align: left;
    padding: 9px 16px;
    background: var(--paper);
    border: 0;
    border-left: 4px solid var(--accent);
    cursor: pointer;
    box-shadow: 0 10px 18px -16px rgba(20, 18, 16, 0.55);
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-trigger:active { background: color-mix(in oklab, var(--ink) 4%, var(--paper)); }
  /* The roles trigger preserves the strip's 2px bottom rule. */
  .roles-section .mnav-trigger {
    border-bottom: 2px solid color-mix(in oklab, var(--ink) 22%, transparent);
  }
  .mnav-trigger__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
  .mnav-trigger__kicker {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .mnav-trigger__current { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
  .mnav-trigger__num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
  }
  .mnav-trigger__label {
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mnav-trigger__cue {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 12%, var(--paper));
    color: var(--accent);
  }
  .mnav-trigger__cue svg { width: 20px; height: 20px; display: block; }

  /* ----- Overlay: scrim + sliding panel (portaled to <body>) ----- */
  .mnav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;                 /* above the masthead (100) */
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear .34s;
  }
  .mnav.is-open { pointer-events: auto; visibility: visible; transition: visibility 0s; }

  .mnav__scrim {
    position: absolute;
    inset: 0;
    background: rgba(16, 14, 12, 0.46);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .32s ease;
  }
  .mnav.is-open .mnav__scrim { opacity: 1; }

  .mnav__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 358px);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-right: 1px solid color-mix(in oklab, var(--ink) 24%, transparent);
    box-shadow: 16px 0 44px -18px rgba(16, 14, 12, 0.6);
    transform: translateX(-104%);
    transition: transform .36s cubic-bezier(.22, .61, .36, 1);
    outline: none;
    overflow: hidden;
  }
  .mnav.is-open .mnav__panel { transform: none; }
  /* A zine "spine" stripe down the binding edge. */
  .mnav__panel::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--accent), var(--bloom));
  }

  .mnav__head {
    position: relative;
    flex: none;
    padding: calc(20px + env(safe-area-inset-top)) 18px 15px 24px;
    border-bottom: 2px solid color-mix(in oklab, var(--ink) 16%, transparent);
  }
  .mnav__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
  }
  .mnav__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 27px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .mnav__close {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    right: 12px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, transform .2s ease;
  }
  .mnav__close svg { width: 18px; height: 18px; display: block; }
  .mnav__close:hover { color: var(--accent); border-color: var(--accent); transform: rotate(90deg); }

  .mnav__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 14px calc(28px + env(safe-area-inset-bottom));
  }
  .mnav.is-open .mnav__body { animation: mnav-body-in .5s .07s both; }
  @keyframes mnav-body-in {
    from { opacity: 0; transform: translateX(-7px); }
    to   { opacity: 1; transform: none; }
  }

  /* ----- List items (roles + companies) ----- */
  .mnav-list { list-style: none; margin: 0; padding: 0; }
  .mnav-item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 7px;
    padding: 14px 14px 14px 16px;
    min-height: 54px;
    cursor: pointer;
    transition: background .16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-item:hover,
  .mnav-item:active { background: color-mix(in oklab, var(--ink) 5%, transparent); }
  .mnav-item__num {
    flex: none;
    padding-top: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
  }
  .mnav-item__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .mnav-item__dates {
    flex: none;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .mnav-item__here {
    flex: none;
    align-self: center;
    font-family: var(--font-hand);
    font-size: 17px;
    line-height: 1;
    color: var(--accent);
    transform: rotate(-3deg);
    white-space: nowrap;
  }
  .mnav-item[data-active="true"] { background: color-mix(in oklab, var(--accent) 12%, transparent); }
  .mnav-item[data-active="true"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
    background: var(--accent);
  }
  .mnav-item[data-active="true"] .mnav-item__title { color: var(--accent); }

  /* ----- Phase groups (career story only) ----- */
  .mnav-group { --group: var(--accent); }
  .mnav-group + .mnav-group { margin-top: 16px; }
  .mnav-group__head {
    padding: 12px 16px 6px;
    margin: 8px 0 2px;
    border-top: 3px solid var(--group);
  }
  .mnav-group__num {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--group);
  }
  .mnav-group__label {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .mnav-group__blurb {
    display: inline-block;
    margin: 1px 0 0;
    font-family: var(--font-hand);
    font-size: 14px;
    color: var(--group);
    transform: rotate(-1deg);
  }
  /* Company items inherit the group accent for their active treatment. */
  .mnav-group .mnav-item__title { font-size: 18px; font-weight: 700; }
  .mnav-group .mnav-item[data-active="true"] { background: color-mix(in oklab, var(--group) 13%, transparent); }
  .mnav-group .mnav-item[data-active="true"]::before { background: var(--group); }
  .mnav-group .mnav-item[data-active="true"] .mnav-item__title { color: var(--group); }
  .mnav-group .mnav-item__here { color: var(--group); }
}

@media (prefers-reduced-motion: reduce) {
  .mnav__panel,
  .mnav__scrim { transition: none; }
  .mnav.is-open .mnav__body { animation: none; }
  .mnav__close:hover { transform: none; }
}

/* ============================================================
   LET'S PARTNER! — the new home / landing page.
   Client-led selling page: problem-first hero + a single-open,
   deep-linkable role accordion + the existing engagement block.
   Light paper palette, reusing existing type + color tokens.
   ============================================================ */
.lp { position: relative; overflow: hidden; }
.lp__page { position: relative; z-index: 1; padding-top: 28px; padding-bottom: 48px; }

.lp__hero {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0 4px;
}
.lp__hero .eyebrow { justify-content: center; }
.lp__hero .eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink);
}
.lp__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5.8vw, 82px);
  line-height: 0.99;
  letter-spacing: -0.03em;
  margin: 14px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.lp__headline em { font-style: italic; color: var(--accent); }
.lp__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 24px auto 0;
  text-wrap: balance;
}
.lp__deck em { color: var(--accent); font-style: italic; }
.lp__sig {
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: clamp(20px, 2.2vw, 28px);
  transform: rotate(-2deg);
  margin: 28px 0 16px;
}

/* ----- Role tabs — sit on a horizontal rule; one panel at a time ----- */
.lp-tabs-wrap {
  max-width: none;            /* full content width — wider rule, clean left edge */
  margin: 0;
  border-bottom: 2px solid color-mix(in oklab, var(--ink) 22%, transparent);
  scroll-margin-top: 130px;
}
.lp-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.lp-tab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;   /* active underline rides the rule */
  margin-bottom: -2px;                     /* overlap the wrap's 2px rule */
  padding: 14px 16px 16px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.lp-tab + .lp-tab { border-left: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
.lp-tab:hover { background: rgba(20, 18, 16, 0.03); }
.lp-tab:hover .lp-tab__title { color: var(--accent); }
/* Active tab — more prominent: tan fill + thicker accent underline + accent
   number/title, so the selected role is unmistakable. */
.lp-tab[data-active="true"] {
  border-bottom-width: 5px;
  border-bottom-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--paper));
}
.lp-tab[data-active="true"] .lp-tab__num { color: var(--accent); }
.lp-tab[data-active="true"] .lp-tab__title { color: var(--accent); }
.lp-tab[data-active="true"] .lp-tab__sub { color: var(--ink); }
.lp-tab__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.lp-tab__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color .15s ease;
}
.lp-tab__sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .lp-tabs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(165px, 72%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .lp-tab { scroll-snap-align: start; }
}

/* ----- Active role panel ----- */
/* ----- Active role panel (clearer hierarchy, all-tan, no black box) ----- */
.lp-panel { max-width: none; margin: 0; animation: lp-panel-in .28s ease-out; }
@keyframes lp-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Role header — names the active role above its copy, so switching tabs visibly
   re-labels the section. Sits between the tab strip and the two-column copy. */
.lp-role__head {
  padding: 0;
  margin: 0 0 22px;
}
.lp-role__head-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.lp-role__head-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

/* Role main copy — now uses the (smaller) page sub-header treatment; fills the
   left column of the two-column panel. (Font family is shared Newsreader, so
   the swap exchanges size + colour.) */
.lp-role__lead {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: none;
  text-wrap: pretty;
}

/* Two columns: main copy + practice + CTA (left) · problems (right). */
.lp-role__cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-top: 44px;
  padding-bottom: 46px;
}
.lp-role__left { min-width: 0; }
.lp-role__right { min-width: 0; }
@media (max-width: 820px) { .lp-role__cols { grid-template-columns: 1fr; gap: 30px; } }
/* Mobile: a divider line above the active role's "No. 0X" header, separating
   the role selector (trigger) above from the role detail below. */
@media (max-width: 760px) {
  .lp-role__cols { padding-top: 20px; }
  .lp-role__head {
    border-top: 2px solid color-mix(in oklab, var(--ink) 20%, transparent);
    padding-top: 22px;
  }
}

.lp-role__kicker {
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0 0 16px;
  transform: rotate(-1.5deg);
}

/* Problem cards — TAN/paper treatment, numbered, title + body for hierarchy. */
.lp-role__problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-problem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  border-left: 3px solid var(--accent);
  padding: 16px 18px;
  box-shadow: 3px 3px 0 rgba(20, 18, 16, 0.06);
}
.lp-problem__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  color: var(--accent);
  line-height: 1;
}
.lp-problem__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 5px;
}
.lp-problem__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* Outcome — TAN callout (replaces the old black box). */
.lp-role__outcome {
  background: color-mix(in oklab, var(--accent) 8%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  border-left: 3px solid var(--accent);
  padding: 18px 20px;
  margin: 0 0 26px;
}
.lp-role__outcome-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.lp-role__outcome-copy {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.32;
  color: var(--ink);
}
.lp-role__practice { margin-top: 26px; }
.lp-role__practice-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.lp-role__practice-list li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.lp-role__bullet { color: var(--accent); margin-right: 4px; }
.lp-role__cta {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  transition: color .15s ease;
}
.lp-role__cta:hover { color: var(--accent); }

/* Engagement block (Services page) sits below its hero. */
.lp .engage-block { margin-top: var(--page-head-gap); }

/* ============================================================
   ABOUT ME — page header (above the role tabs) + SERVICES hero.
   ============================================================ */
.about-me { position: relative; overflow: hidden; }
.about-me__page { position: relative; z-index: 1; padding-top: 30px; padding-bottom: 40px; }
.about-me__hero { max-width: none; margin: 0; text-align: left; padding: 38px 0 0; }
/* Eyebrow nudged 45px to the left (its leading rule hangs into the margin so
   the label text lines up with the content). */
.about-me__hero .eyebrow { justify-content: flex-start; margin-left: -45px; margin-bottom: var(--eyebrow-gap); }
.about-me__hero .eyebrow::after {
  content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ink);
}
.about-me__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 42px);   /* matched to .engage-block__title ("Four ways in.") */
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;   /* eyebrow→headline gap comes solely from .eyebrow margin-bottom (--eyebrow-gap) */
  color: var(--ink);
  text-wrap: balance;
}
.about-me__headline em { font-style: italic; color: var(--accent); }
/* Page sub-header — uses the (larger) treatment swapped over from the role main
   copy (shared Newsreader family; the swap exchanges size + colour). */
.about-me__deck {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
  margin: 20px 0 0;
  text-wrap: pretty;
}
.roles-section { margin-top: 24px; }

/* Services page hero — eyebrow (page · tagline, matching About me) + the
   strategy statement as the headline, all left-aligned. */
.svc__hero { max-width: none; margin: 0; text-align: left; padding: 38px 0 0; }
.svc__hero .eyebrow { justify-content: flex-start; margin-left: -45px; margin-bottom: var(--eyebrow-gap); }
.svc__hero .eyebrow::after {
  content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ink);
}
.svc__header {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(31px, 4.8vw, 69px);   /* −3px; shared by Services + Career story */
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 14px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
/* Services sub-header — the REFERENCE sub-header treatment for all pages
   (About me + Career story match this font, size, colour, width). Smaller
   than before per the latest pass. */
.svc__subhead {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
  margin: 20px 0 0;
  text-wrap: pretty;
}
/* "The operating system" highlighted in the site's red/terracotta accent. */
.svc__hl { color: var(--accent); }

/* Career story header — top space matched to the other pages (which get
   ~30px page padding + 64px hero padding above their eyebrow); .cs-page has no
   top padding, so the header carries it all. Plus room below the block. */
.svc__hero.cs-story-head { padding-top: 36px; padding-bottom: 0; }

/* On narrow screens there isn't room for the -45px eyebrow shift, so reset it
   and center the page title (eyebrow + headline) for a balanced mobile head. */
@media (max-width: 700px) {
  .about-me__hero,
  .svc__hero,
  .svc__hero.cs-story-head { text-align: center; }
  .about-me__hero .eyebrow,
  .svc__hero .eyebrow,
  .cs-landing .cover__supra { margin-left: 0; }
  .about-me__hero .eyebrow,
  .svc__hero .eyebrow { justify-content: center; }
  .about-me__headline,
  .svc__header { text-align: center; }
}

/* ----- Cross-promo links (navigate between pages via the view hash) ----- */
.xpromo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px 28px;
  /* Full content width, left-aligned — so the dashed rule spans the content and
     the signup (left item) lines up with the text above. */
  max-width: none;
  margin: 52px 0 0;
  padding-top: 26px;
  border-top: 1px dashed color-mix(in oklab, var(--ink) 25%, transparent);
}
/* Career story: the content above is the 980px-wide hero/chapter box (centred
   in the page), so match it here so the signup aligns with the title. */
.cs-page .xpromo {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.xpromo__label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
/* Internal navigation (within the site) — a pill/button treatment, deliberately
   distinct from the mono + accent-underline links that lead OFF-site. */
.xpromo__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  background: color-mix(in oklab, var(--ink) 5%, transparent);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 9px 20px;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.xpromo__link:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--accent);
}
.xpromo__link:active { transform: translateY(0); box-shadow: 1px 1px 0 var(--accent); }

/* ============================================================
   FOOTER RELAYOUT — vertical order: heading → credits (left) → lucky cat →
   divider → info block (copyright + colophon) → colour bar → sign-off.
   Type is inherited from the original classes (.cover__tagline /
   .cover__byline / .colophon); only position + spacing are set here. Clean,
   well-spaced, not densely stacked.
   ============================================================ */

/* (2) Credits beneath the heading — LEFT-aligned, type unchanged. */
.footer-credits { margin: 14px 0 28px; text-align: left; }
.footer-credits .cover__tagline { display: inline-block; margin: 0 0 8px; }
.footer-credits .cover__byline { margin: 0; text-align: left; }
.footer-credits .cover__partner { text-align: left; }

/* Footer top row — credits on the left, lucky cat + counter + sign-off grouped
   on the right. Condenses the footer (the cat no longer sits in its own tall
   centered block below the credits). */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 40px;
  margin: 14px 0 0;
}
.footer-top .footer-credits { margin: 0; flex: 1 1 260px; }
.footer-highfive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-left: auto;            /* hug the right edge */
  margin-top: -60px;            /* lift the cat + hint + sign-off to condense the footer */
}
.footer-highfive .high-five { margin: 0; }   /* drop the tall 70px block margin */
.footer-highfive .footer-signoff { margin: 2px 0 0; }
/* Mobile: the credits + cat stack, so center the cat block on its own row and
   drop the desktop negative lift (which would otherwise pull it into the
   credits above). align-items:center already centers the cat + text within. */
@media (max-width: 700px) {
  .footer-highfive {
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
  }
}

/* (4) Divider. */
.footer-rule {
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 40%, transparent);
  width: 100%;
  margin: 28px 0 24px;
}

/* (5) Info block — colophon, then the social links + copyright row directly
   above the color picker (reordered via flex order). */
.footer-info { margin: 26px 0 0; display: flex; flex-direction: column; gap: 18px; }
.footer-info .colophon { order: 1; }
.footer-info .footer-social { order: 2; margin: 26px 0 0; }
/* Small monochrome social logos (B&W), in front of the copyright. */
.footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; }
/* Copyright shares the social row, after the colour bar. */
.footer-social .footer-info__copyright { margin: 0; }
.footer-social__link {
  display: inline-flex;
  color: var(--ink);
  opacity: 0.85;
  transition: color .15s ease, opacity .15s ease, transform .15s ease;
}
.footer-social__link:hover { color: var(--accent); opacity: 1; transform: translateY(-1px); }
.footer-social__link svg { display: block; width: 20px; height: 20px; }
.footer-info__copyright {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.footer-info .colophon {
  margin: 0;
  padding: 0;
  border-top: 0;
  gap: 18px 24px;
}

/* Easter-egg row (color picker + targets) — sits between the social icons and
   the copyright on the social row. */
.footer-colorbar { margin: 0; display: inline-flex; align-items: center; }

/* (7) Sign-off. */
.footer-signoff {
  margin: 16px 0 0;
  text-align: center;
  color: var(--ink-soft);
}

/* Footer type a touch smaller overall (kept legible). */
.contact .eyebrow { font-size: 10px; }
.contact .mono { font-size: 10px; }
.contact .colophon { font-size: 10px; }
/* Copyright — smaller + sentence case (not all-caps). */
.contact .footer-info__copyright {
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0.06em;
}
/* Edition line (relocated to the footer) — right-aligned, 2px smaller than the
   footer mono. */
.footer-edition {
  text-align: right;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.contact .footer-edition { font-size: 8px; }

/* ============================================================
   CASE-STUDY MODAL FIGURE — the GuideBinder (Fig. 4) relocated from
   the Disney chapter into the modal, under "What I Built". The caption
   travels inside the GuideBinder component itself.
   ============================================================ */
.cs-modal__fig {
  margin: 20px 0 4px;
  max-width: 100%;
  overflow-x: auto;
}