:root {
  --editorial-paper: #f5f2eb;
  --editorial-ink: #1d2824;
  --editorial-muted: #5b6862;
  --editorial-line: #cfd5cf;
  --editorial-accent: #176b4d;
  --editorial-accent-dark: #0d4934;
  /* Spruce, like terracotta, does two jobs: link ink on paper, and a filled
     CTA carrying white text. Dark theme has to lighten the ink token to stay
     readable on charcoal, which then makes white-on-fill 1.7–2.0:1 — so
     filled CTAs take this always-solid pair instead of the ink tokens. */
  --editorial-accent-fill: var(--editorial-accent);
  --editorial-accent-fill-hover: var(--editorial-accent-dark);
  --editorial-on-accent: #ffffff;
  /* Tinted panels: table heads, callouts, fingerprint blocks, zebra stripes.
     These were hardcoded light hexes (#edf3ee / #e9eee9 / #edf1eb / #ece9e0 /
     #f7f6f1) that stayed light in dark theme while the ink flipped to cream,
     which is where most of the unreadable dark surfaces came from. The three
     near-identical cool tints are now one token. */
  --editorial-tint: #edf3ee;
  --editorial-tint-warm: #ece9e0;
  --editorial-stripe: #f7f6f1;
  --editorial-white: #fffefa;
  /* Long-form body copy: one step softer than --editorial-ink so the headline
     ramp still reads at essay length. This was a hardcoded #34423c on
     `.guide-prose p, li` with no dark counterpart, so every content-collection
     guide rendered slate-on-charcoal — 1.71:1 for body and links, 1.54:1 for
     the .disclosure block on its tinted panel. */
  --editorial-prose: #34423c;
  /* The footer title block is a deliberately dark band in BOTH themes, so it
     needs a surface token of its own. It used to paint itself
     `var(--editorial-ink)`, which is the page *ink* — in dark that flips to
     cream while the band's own light text stays put, turning the whole footer
     into cream-on-cream (1.02–1.17:1) on every single route. A band that owns
     its surface must own its ink too. */
  --editorial-band: #1d2824;
  --editorial-max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.editorial-shell {
  margin: 0;
  color: var(--editorial-ink);
  background-color: var(--editorial-paper);
  /* Barely-there drafting-paper grid — a couple percent ink, sits behind the
     white cards so measured text contrast is unaffected. */
  background-image:
    repeating-linear-gradient(0deg, rgba(29,40,36,.022) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(29,40,36,.022) 0 1px, transparent 1px 32px);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.65;
}

.editorial-shell h1,
.editorial-shell h2,
.editorial-shell h3 {
  /* This sheet loads last, so (0,1,1) here beats component rules like
     `.newsletter-bar__title` (0,1,0) and ties-and-wins against
     `.cta-section h2` — which painted page ink onto deliberately dark or
     saturated bands (1.17:1 on the newsletter bar). Surfaces that own their
     ink publish --surface-ink; everything else falls back to editorial ink. */
  color: var(--surface-ink, var(--editorial-ink));
  font-family: var(--font-display);
  font-weight: 560;
  font-optical-sizing: auto;
  /* SOFT rounds the terminals for warmth; WONK 0 keeps glyphs legible. opsz
     stays automatic (driven by font-optical-sizing + rendered size). */
  font-variation-settings: "SOFT" 26, "WONK" 0;
  letter-spacing: -.035em;
  line-height: 1.08;
}

/* Big optical-size display cuts: confident weight, high opsz, tighter track.
   Applied to the largest headlines across the editorial surfaces. */
.editorial-intro h2,
.library-hero h1,
.guide-hero h1,
.compare-hero h1,
.editorial-shell .ps-display,
.migrated-assessment .hero__title {
  font-weight: 600;
  font-variation-settings: "opsz" 108, "wght" 600, "SOFT" 34, "WONK" 0;
  letter-spacing: -.05em;
  line-height: .98;
}

/* Only unclassed links inherit the editorial ink. Classed anchors (buttons,
   cards, nav, disclosures) carry their own colors; letting this rule (0,1,1)
   win over e.g. `.btn--secondary` (0,1,0) made `<a class="btn">` inherit ink,
   producing ink-on-dark buttons (black-on-black on .btn--secondary). */
.editorial-shell a:not([class]) { color: inherit; }

/* Explicit dark theme (opt-in only — no auto-detection). Warm charcoal paper,
   not pure black; remaps the whole editorial palette so cards, rules, accents
   and links all track the drafting studio's dark tokens. Every pair here is
   verified to meet WCAG AA (see the contrast report). */
[data-theme="dark"] body.editorial-shell {
  --editorial-paper: #141714;
  --editorial-white: #1e231f;
  --editorial-ink: #f4efe7;
  --editorial-muted: #c3c0b8;
  --editorial-line: rgba(244, 239, 231, .16);
  --editorial-accent: #86c4aa;
  --editorial-accent-dark: #9ad0b7;
  --editorial-accent-fill: #2a6553;
  --editorial-accent-fill-hover: #327a63;
  --editorial-tint: #1e2521;
  --editorial-tint-warm: #23201c;
  --editorial-stripe: #181c19;
  /* Same one-step-softer relationship to the cream ink, inverted: 11.5–12.9:1
     on the dark paper, cards and tinted panels prose actually lands on. */
  --editorial-prose: #ded9d0;
  /* Half a step below the dark paper so the title block still reads as a
     separate plate; its light ink then clears 7.3–14:1. */
  --editorial-band: #0f120f;
  color: var(--editorial-ink);
}
[data-theme="dark"] .editorial-shell :where(h1, h2, h3) { color: var(--editorial-ink); }
/* Repaint the hardcoded light-hex surfaces for dark. */
[data-theme="dark"] .path-card:hover,
[data-theme="dark"] .library-card:hover,
[data-theme="dark"] .written-grid a:hover { background: #262c27; }
[data-theme="dark"] .migrated-assessment .hero { background: var(--editorial-paper) !important; }
[data-theme="dark"] .migrated-assessment .workspace-instrument { background-color: #1a1f1b; }
[data-theme="dark"] .migrated-assessment .hero__stats,
[data-theme="dark"] .migrated-assessment .hero__stats > div,
[data-theme="dark"] .migrated-assessment .assessment-card { background: var(--editorial-white); }
[data-theme="dark"] .migrated-assessment .stat__number,
[data-theme="dark"] .migrated-assessment .gradient-text { color: var(--editorial-ink) !important; }
[data-theme="dark"] .migrated-assessment .workspace-instrument__photo img { opacity: .18; }

.editorial-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--editorial-line);
  background: color-mix(in srgb, var(--editorial-paper) 94%, transparent);
  backdrop-filter: blur(14px);
}

.editorial-header__inner {
  width: min(calc(100% - 40px), var(--editorial-max));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--editorial-ink);
  font-weight: 600;
  text-decoration: none;
}

.wordmark__mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 20px;
}

.editorial-nav { display: flex; align-items: center; gap: 26px; }
.editorial-nav a { color: var(--editorial-muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.editorial-nav a:hover,
.editorial-nav a[aria-current="page"] { color: var(--editorial-ink); }

.editorial-nav .button-link {
  padding: 10px 16px;
  border-radius: 4px;
  color: var(--editorial-on-accent);
  background: var(--editorial-accent-fill);
}

.menu-toggle { display: none; }

/* Header actions cluster: nav + theme toggle grouped to the right. */
.editorial-header__inner { justify-content: flex-start; }
.editorial-nav { margin-left: auto; }
.editorial-header__actions { display: inline-flex; align-items: center; gap: 8px; }
.editorial-shell .theme-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--editorial-muted);
  background: transparent;
  border: 1px solid var(--editorial-line);
  border-radius: 4px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.editorial-shell .theme-toggle:hover { color: var(--editorial-ink); border-color: var(--editorial-muted); }
.editorial-shell .theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--editorial-accent) 45%, transparent); outline-offset: 2px; }

/* Micro-interactions: unified focus ring + a small arrow nudge on card hover.
   All motion is short, eased, and disabled under reduced-motion. */
.editorial-shell a:focus-visible,
.editorial-shell button:focus-visible { outline: 3px solid color-mix(in srgb, var(--editorial-accent) 50%, transparent); outline-offset: 3px; border-radius: 2px; }
.text-link span[aria-hidden],
.written-grid__cta span[aria-hidden] { display: inline-block; transition: transform .24s var(--ps-ease, cubic-bezier(.22,1,.36,1)); }
.path-card:hover .text-link span[aria-hidden],
.library-card:hover .text-link span[aria-hidden],
.written-grid a:hover .written-grid__cta span[aria-hidden] { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .text-link span[aria-hidden],
  .written-grid__cta span[aria-hidden] { transition: none; transform: none; }
}

.editorial-section,
.library-section,
.guide-layout,
.library-hero {
  width: min(calc(100% - 40px), var(--editorial-max));
  margin-inline: auto;
}

.editorial-section { padding-block: clamp(72px, 9vw, 124px); }

.eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--editorial-accent);
  font-family: var(--ps-font-data, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}
/* Engineering-tick kicker: a hairline measure rule before the eyebrow. */
.section-heading .eyebrow,
.compare-heading .eyebrow,
.library-hero .eyebrow,
.editorial-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-heading .eyebrow::before,
.compare-heading .eyebrow::before,
.editorial-intro .eyebrow::before {
  width: 1.7rem;
  height: .55rem;
  content: "";
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 5px);
  border-block: 1px solid currentColor;
}
/* Mono metadata voice: dates, toplines, prices, meta lines, bylines. */
.library-card__meta,
.commercial-card__topline,
.commercial-card__price,
.guide-byline,
.compare-principles span {
  font-family: var(--ps-font-data, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

.editorial-intro { max-width: 920px; text-align: center; }
.editorial-intro h2 { max-width: 780px; margin: 0 auto 26px; font-size: clamp(2.3rem, 5vw, 4.5rem); }
.editorial-intro > p:last-child { max-width: 680px; margin: auto; color: var(--editorial-muted); font-size: 1.12rem; }

.section-heading { max-width: 700px; margin-bottom: 42px; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); }

.path-grid { border-top: 1px solid var(--editorial-line); }
/* Asymmetric lead: card 01 is a tall feature spanning both rows on the left;
   cards 02/03 stack to its right. Hairline gaps read as drafting rules. */
.path-grid__items {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1px;
  background: var(--editorial-line);
  border: 1px solid var(--editorial-line);
}
.path-grid__items .path-card:first-child { grid-row: span 2; }
.guide-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--editorial-line); border: 1px solid var(--editorial-line); }
/* Feature lead card in a library section: double-wide with a bigger head. */
.guide-card-grid .library-card--feature { grid-column: span 2; }
.guide-card-grid .library-card--feature h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.guide-card-grid .library-card--feature p { max-width: 44ch; font-size: 1.02rem; }

.path-card,
.library-card {
  position: relative;
  min-height: 330px;
  padding: clamp(26px, 4vw, 42px);
  padding-top: clamp(46px, 5vw, 66px);
  color: var(--editorial-ink);
  background: var(--editorial-white);
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.path-grid__items .path-card:first-child { display: flex; flex-direction: column; justify-content: flex-end; }
.path-grid__items .path-card:first-child h3 { font-size: clamp(2rem, 3.2vw, 2.9rem); }

.path-card:hover,
.library-card:hover {
  background: var(--editorial-tint);
  box-shadow: inset 0 3px 0 var(--ps-terracotta-600, #b84d2a);
  transform: translateY(-3px);
}
.path-card h3,
.library-card h3 { margin: 0 0 18px; font-size: 1.75rem; }
.path-card p,
.library-card p { color: var(--editorial-muted); }
/* Oversized plate index numeral, top-left in the mono voice. */
.path-card__number,
.library-card__number {
  position: absolute;
  top: clamp(18px, 2.4vw, 26px);
  left: clamp(26px, 4vw, 42px);
  color: color-mix(in srgb, var(--ps-text, #171a17) 50%, transparent);
  font: 700 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--ps-font-data, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.path-grid__items .path-card:first-child .path-card__number { color: var(--ps-terracotta-600, #b84d2a); }

.text-link { display: inline-block; margin-top: 20px; color: var(--editorial-accent-dark); font-size: .88rem; font-weight: 700; }

.commercial-section { border-top: 1px solid var(--editorial-line); }
.commercial-heading { margin-bottom: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.commercial-heading h2 { max-width: 800px; margin: 0 0 18px; font-size: clamp(2.1rem, 4.5vw, 4rem); }
.commercial-heading p { max-width: 690px; margin: 0; color: var(--editorial-muted); }
.commercial-heading__cta { padding: 12px 17px; border: 1px solid var(--editorial-accent); border-radius: 4px; color: var(--editorial-accent-dark); font-weight: 700; text-decoration: none; }
.commercial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--editorial-line); background: var(--editorial-line); }
.commercial-card { min-width: 0; padding: 28px; background: var(--editorial-white); }
.commercial-card__topline { display: flex; justify-content: space-between; gap: 12px; color: var(--editorial-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.commercial-card h3 { min-height: 2.2em; margin: 28px 0 14px; font-size: 1.55rem; }
.commercial-card > p { color: var(--editorial-muted); font-size: .9rem; }
.commercial-card .commercial-card__price { margin-top: 24px; color: var(--editorial-ink); font-size: .78rem; font-weight: 700; }
.commercial-card__link { display: inline-flex; margin-top: 14px; color: var(--editorial-on-accent) !important; background: var(--editorial-accent-fill); padding: 11px 14px; border-radius: 3px; font-size: .84rem; font-weight: 700; text-decoration: none; }
.commercial-card__link:hover { background: var(--editorial-accent-fill-hover); }
.commercial-categories { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--editorial-muted); font-size: .86rem; }
.commercial-categories strong { color: var(--editorial-ink); }
.commercial-categories a { color: var(--editorial-accent-dark); font-weight: 700; }
.commercial-disclosure { margin: 0 0 24px; padding: 18px 20px; background: var(--editorial-tint-warm); color: var(--editorial-muted); font-size: .78rem; }
.commercial-disclosure a { color: var(--editorial-accent-dark); font-weight: 700; }
.evidence-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 110px);
  border-top: 1px solid var(--editorial-line);
}
.evidence-band h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.7rem); }
.evidence-band p { color: var(--editorial-muted); font-size: 1.05rem; }

.library-hero { max-width: 920px; padding-block: clamp(80px, 11vw, 150px); text-align: center; }
.library-hero h1 { margin: 0 0 28px; font-size: clamp(3rem, 7vw, 6.2rem); }
.library-hero > p:last-child { max-width: 670px; margin: auto; color: var(--editorial-muted); font-size: 1.15rem; }
.library-section { padding-bottom: 100px; }
.library-card { min-height: 285px; }
.library-card--featured { border-top: 4px solid var(--editorial-accent); }
.library-card--buying { border-top: 4px solid #9b5c31; }
.library-disclosure { margin: 24px 0 0; color: var(--editorial-muted); font-size: .8rem; }
.library-disclosure a { color: var(--editorial-accent-dark); font-weight: 700; }
.library-card__meta { display: block; margin-top: 24px; color: var(--editorial-muted); font-size: .8rem; }

.guide-hero { max-width: 880px; margin: 0 auto; padding-block: clamp(76px, 10vw, 140px); text-align: center; }
.guide-hero h1 { margin: 0 0 28px; font-size: clamp(2.8rem, 6vw, 5.8rem); }
.guide-hero__dek { max-width: 740px; margin: auto; color: var(--editorial-muted); font-size: 1.18rem; }
.guide-byline { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; color: var(--editorial-muted); font-size: .82rem; }

.guide-frame { display: grid; grid-template-columns: 250px minmax(0, 720px); justify-content: center; gap: clamp(42px, 8vw, 100px); padding-bottom: 120px; }
.guide-method { align-self: start; position: sticky; top: 30px; padding-top: 20px; border-top: 2px solid var(--editorial-ink); font-size: .88rem; }
.guide-method strong { display: block; margin-bottom: 12px; }
.guide-method p { color: var(--editorial-muted); }
.guide-method a { color: var(--editorial-accent-dark); font-weight: 700; }
.guide-prose { font-size: 1.06rem; }
.guide-prose h2 { margin: 2.7em 0 .7em; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.guide-prose h3 { margin: 2.2em 0 .55em; font-size: 1.55rem; }
.guide-prose p,
.guide-prose li { color: var(--editorial-prose); }
/* `:not(:where(.btn))` for the same reason as `a:not([class])` above: prose-link rules
   outrank `.btn--primary` (0,1,0) and repainted CTA buttons spruce-on-terracotta. */
.guide-prose a:not(:where(.btn)) { color: var(--editorial-accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-prose table { width: 100%; margin: 32px 0; border-collapse: collapse; font-size: .92rem; }
.guide-prose th,
.guide-prose td { padding: 13px 12px; border-bottom: 1px solid var(--editorial-line); text-align: left; vertical-align: top; }
.guide-prose blockquote { margin: 32px 0; padding: 20px 26px; border-left: 3px solid var(--editorial-accent); background: var(--editorial-white); }
.source-list { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--editorial-line); }
/* Owns its surface, so it owns its ink: it is also used outside .guide-prose,
   where it would otherwise inherit whatever ink the surrounding block carries. */
.disclosure { padding: 18px 20px; color: var(--editorial-prose); background: var(--editorial-tint-warm); font-size: .84rem; }

/* Footer as an engineering-drawing title block: boxed corner stamp, hairline
   rules dividing labelled cells, all metadata in the mono instrument voice. */
.editorial-footer { padding: clamp(48px, 7vw, 84px) max(20px, calc((100% - var(--editorial-max)) / 2)); color: #d9e0dc; background: var(--editorial-band); background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 30px); }
.editorial-footer__stamp { border: 1px solid rgba(217,224,220,.36); }
.editorial-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; }
.editorial-footer__grid > * { padding: clamp(22px, 3vw, 34px); border-left: 1px solid rgba(217,224,220,.18); }
.editorial-footer__grid > *:first-child { border-left: 0; }
.editorial-footer .wordmark--footer { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; color: #fff; font-family: var(--font-display); font-size: 1.25rem; }
.editorial-footer .wordmark--footer .wordmark__mark { border-color: currentColor; }
.editorial-footer p { max-width: 430px; color: #aebbb4; }
.editorial-footer nav { display: grid; align-content: start; gap: 10px; }
.editorial-footer nav strong { margin-bottom: 10px; color: #fff; font-family: var(--ps-font-data, ui-monospace, monospace); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.editorial-footer a { color: #bac6c0; font-size: .9rem; text-decoration: none; }
.editorial-footer a:hover { color: #fff; }
.editorial-footer__legal { margin: 0; padding: 16px clamp(22px, 3vw, 34px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border: 1px solid rgba(217,224,220,.36); border-top: 0; color: #96a49d; font-family: var(--ps-font-data, ui-monospace, monospace); font-size: .72rem; letter-spacing: .03em; }
.editorial-footer__legal span { display: inline-flex; align-items: center; gap: 9px; }
.editorial-footer__legal span:first-child::before { content: "◵"; color: var(--ps-terracotta-500, #cf643d); font-size: .95rem; }

/* Transitional assessment: keep its tested behavior, remove visual gimmicks. */
.migrated-assessment .hero { min-height: auto; padding-block: clamp(56px, 8vw, 100px); background: var(--editorial-paper) !important; }
.migrated-assessment .hero::before,
.migrated-assessment .hero::after,
.migrated-assessment .premium-hero__orb,
.migrated-assessment .hero__noise,
.migrated-assessment .hero__badge { display: none !important; }
.migrated-assessment .gradient-text { color: var(--editorial-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.migrated-assessment .hero__grid {
  align-items: start;
  gap: clamp(36px, 6vw, 72px);
}
.migrated-assessment .hero__title {
  max-width: 12ch;
  margin-bottom: 22px;
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
  letter-spacing: -.045em;
}
.migrated-assessment .hero__desc {
  max-width: 620px;
  color: var(--editorial-muted);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
}
.migrated-assessment .hero__actions { margin-top: 28px; }
.migrated-assessment .workspace-instrument {
  display: grid;
  grid-template-areas: "visual" "caption";
  margin: 42px 0 0;
  overflow: hidden;
  border: 1px solid var(--editorial-line);
  border-radius: 5px;
  color: var(--editorial-ink);
  background: var(--ps-paper-alt, #ebe8df);
  /* Drafting-paper ground: a faint blueprint grid behind the line drawing. */
  background-image:
    repeating-linear-gradient(90deg, var(--ps-line, rgba(23,26,23,.06)) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, var(--ps-line, rgba(23,26,23,.06)) 0 1px, transparent 1px 26px);
  background-position: -1px -1px;
}
/* Mono instrument labels; one measurement reads terracotta as the accent. */
.migrated-assessment .workspace-instrument__labels text {
  font-family: var(--ps-font-data, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  fill: var(--ps-text-soft, #3d443e);
}
.migrated-assessment .workspace-instrument__labels text:nth-of-type(4) {
  fill: var(--ps-brand, #b84d2a);
}
/* Draw-the-drawing-in on load: solid structure lines animate their stroke,
   then rails/labels/nodes fade up. Motion is opt-in only. */
@media (prefers-reduced-motion: no-preference) {
  .migrated-assessment .workspace-instrument__drawing > g:first-of-type > * {
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
    animation: ps-draw-in 1.5s var(--ps-ease, cubic-bezier(.22,1,.36,1)) forwards;
  }
  .migrated-assessment .workspace-instrument__drawing > g:first-of-type > *:nth-child(2) { animation-delay: .18s; }
  .migrated-assessment .workspace-instrument__drawing > g:first-of-type > *:nth-child(3) { animation-delay: .34s; }
  .migrated-assessment .workspace-instrument__rails { opacity: 0; animation: ps-fade-in .6s ease .95s forwards; }
  .migrated-assessment .workspace-instrument__labels { opacity: 0; animation: ps-fade-in .7s ease 1.15s forwards; }
  .migrated-assessment .workspace-instrument__drawing > circle { opacity: 0; animation: ps-fade-in .5s ease 1.4s forwards; }
}
@keyframes ps-draw-in { to { stroke-dashoffset: 0; } }
@keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }
.migrated-assessment .workspace-instrument__rails { stroke: var(--ps-instrument, #28614f); }
/* FIG-NN plate marker prefixes the caption in the mono instrument voice. */
.migrated-assessment .workspace-instrument figcaption::before {
  content: "FIG-01";
  margin-right: 12px;
  color: var(--ps-instrument, #28614f);
  font: 700 .72rem/1.5 var(--ps-font-data, ui-monospace, monospace);
  letter-spacing: .09em;
}
.migrated-assessment .workspace-instrument__photo,
.migrated-assessment .workspace-instrument__drawing {
  grid-area: visual;
}
.migrated-assessment .workspace-instrument__photo {
  display: block;
  min-height: 270px;
}
.migrated-assessment .workspace-instrument__photo img {
  width: 100%;
  height: 100%;
  min-height: 270px;
  display: block;
  object-fit: cover;
  opacity: .28;
  filter: saturate(.7) sepia(.08);
}
.migrated-assessment .workspace-instrument__drawing {
  z-index: 1;
  width: calc(100% - 36px);
  height: auto;
  margin: auto;
  align-self: center;
}
.migrated-assessment .workspace-instrument figcaption {
  grid-area: caption;
  margin: 0;
  padding: 15px 18px;
  border-top: 1px solid var(--editorial-line);
  color: var(--editorial-muted);
  background: var(--editorial-white);
  font-size: .84rem;
}
/* Title-block plate: reads like the data block on an engineering drawing —
   mono figures over hairline rules, tracked-out labels, a leading rule. */
.migrated-assessment .hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 30px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ps-line-strong, var(--editorial-line));
  background: var(--editorial-white);
}
.migrated-assessment .hero__stats > div {
  min-width: 0;
  padding: 16px 18px;
  background: var(--editorial-white);
  border-left: 1px solid var(--ps-line, var(--editorial-line));
}
.migrated-assessment .hero__stats > div:first-child { border-left: 0; }
.migrated-assessment .stat__number {
  color: var(--editorial-ink);
  font-family: var(--ps-font-data, ui-monospace, monospace);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-variation-settings: normal;
  letter-spacing: -.01em;
  line-height: 1;
}
.migrated-assessment .stat__label {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ps-line, var(--editorial-line));
  color: var(--ps-instrument, var(--editorial-muted));
  font-family: var(--ps-font-data, ui-monospace, monospace);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.migrated-assessment .assessment-card { border: 1px solid var(--editorial-line); border-radius: 6px; background: var(--editorial-white); box-shadow: 0 18px 50px rgba(29, 40, 36, .08); }
.migrated-assessment .assessment-card__kicker {
  margin: 0 0 8px;
  color: var(--editorial-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.migrated-assessment .choice-card { border-radius: 4px; box-shadow: none; }
.migrated-assessment .assessment-step > div:not([class]) { margin-top: var(--space-xl); }
[data-theme="dark"] .migrated-assessment .choice-card__label { color: #f7f4ed; }
[data-theme="dark"] .migrated-assessment .choice-card__desc { color: #d8d2c7; }

@media (max-width: 900px) {
  .editorial-header__inner { min-height: 66px; }
  .menu-toggle { display: inline-flex; min-width: 48px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--editorial-line); color: var(--editorial-ink); background: transparent; }
  .editorial-nav { display: none; position: absolute; inset: 66px 0 auto; padding: 22px; flex-direction: column; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--editorial-line); background: var(--editorial-paper); }
  .editorial-nav.is-open { display: flex; }
  .editorial-nav a { min-height: 44px; display: flex; align-items: center; padding: 8px; }
  .path-grid__items,
  .guide-card-grid { grid-template-columns: 1fr; }
  .path-grid__items .path-card:first-child,
  .guide-card-grid .library-card--feature { grid-row: auto; grid-column: auto; }
  .commercial-grid { grid-template-columns: repeat(2, 1fr); }
  .commercial-heading { grid-template-columns: 1fr; align-items: start; }
  .commercial-heading__cta { justify-self: start; }
  .path-card,
  .library-card { min-height: 0; }
  .evidence-band { grid-template-columns: 1fr; }
  .guide-frame { grid-template-columns: 1fr; }
  .guide-method { position: static; }
  .editorial-footer__grid { grid-template-columns: 1fr 1fr; }
  .editorial-footer__grid > div:first-child { grid-column: 1 / -1; }
  .migrated-assessment .hero__title { max-width: 14ch; }
  .migrated-assessment .assessment-card { max-width: 720px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .editorial-header__inner,
  .editorial-section,
  .library-section,
  .guide-layout,
  .library-hero { width: min(calc(100% - 28px), var(--editorial-max)); }
  .wordmark > span:last-child { font-size: .88rem; }
  .migrated-assessment .hero { padding-block: 38px 56px; }
  .migrated-assessment .hero__title { font-size: clamp(2.55rem, 13vw, 4rem); }
  .migrated-assessment .hero__actions { display: grid; grid-template-columns: 1fr; }
  .migrated-assessment .hero__actions .btn { width: 100%; justify-content: center; }
  .migrated-assessment .workspace-instrument { margin-top: 30px; }
  .migrated-assessment .workspace-instrument__photo,
  .migrated-assessment .workspace-instrument__photo img { min-height: 220px; }
  .migrated-assessment .workspace-instrument__drawing { width: calc(100% - 18px); }
  /* Let the three stats reflow instead of staying locked to 3 cramped columns:
     ~2-across on typical phones, single column with breathing room on the
     narrowest screens (<~380px). */
  .migrated-assessment .hero__stats { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  .migrated-assessment .hero__stats > div { padding: 16px 14px; }
  .migrated-assessment .stat__number { font-size: 1.55rem; }
  .migrated-assessment .assessment-card { padding: 24px 18px; }
  .commercial-grid { grid-template-columns: 1fr; }
  .commercial-card h3 { min-height: 0; }
  .editorial-footer__grid { grid-template-columns: 1fr; }
  .editorial-footer__grid > div:first-child { grid-column: auto; }
  .editorial-footer__legal { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}