/* ==========================================================================
   CLINICAL EDITORIAL — global design system (all eight pages)

   World: the modern academic-medical-center website. A white paper ground,
   one institutional blue carrying every action, a light-weight serif display
   over a neutral grotesque body, soft 8px-rounded media, pill-shaped
   controls, and wide 12-column editorial rhythm. Calm, credible, legible at
   distance. Nothing decorative that a patient-facing health system would not
   ship.

   Visual language derived from mayoclinic.org (captured 2026-08-10) — see
   DESIGN.md for the token evidence. No Mayo Clinic marks, logos, wordmarks,
   or copy are used here; only the layout and token grammar.

   This began as a 1:1 selector replacement for the prior nav.css: same class
   names AND the same custom-property names, values remapped from the dark
   console world to this light one, so pages (and x23d.html's scoped block)
   adopted it by repointing a single <link>. Those prior stylesheets
   (nav / industrial / console / growth / styles.css) have since been deleted;
   this is now the only stylesheet in the project.

   Display: Source Serif 4.  Body/UI: Archivo.
   ========================================================================== */

:root {
  color-scheme: light;

  /* neutrals — paper ground, never pure-gray slabs */
  --void:    #FFFFFF;   /* primary ground: the page */
  --carbon:  #F4F4F4;   /* raised bands, alternating sections */
  --carbon2: #EBEBEB;   /* dividers, gauge tracks, table rules */
  --carbon3: #E1F0FF;   /* hover tint — the pale institutional blue */

  /* the two signals */
  --signal:    #0057B8;   /* institutional blue — every action, every accent */
  --signal-hi: #1371D5;   /* hover */
  --signal-lo: #004181;   /* pressed / deep */
  --signal-pale: #8CC5FF; /* large display accents over the blue ground */
  /* Small text on the blue ground needs a lighter tint: #8CC5FF only reaches
     3.78:1 on #0057B8, which clears AA for large type but not for body sizes. */
  --on-blue: #C5E2F9;
  --signal-wash: #E1F0FF; /* tinted panels */
  --telemetry: #009998;   /* secondary accent, used sparingly */
  --telemetry-dim: #076D6D;
  --alert:     #E4002B;   /* caution / breach, used sparingly */

  --bone:    #686868;

  --ink:    #080808;     /* primary text */
  --ink-2:  #3F3F3F;     /* body prose, secondary */
  --ink-3:  #686868;     /* captions, metadata, sources */
  --ink-4:  #949494;     /* faintest */

  --line:   #D6D6D6;     /* 1px borders */
  --line-2: #EBEBEB;

  /* the console world laid a calibration grid into the body; this world does
     not. Kept as transparent so any inherited use is a no-op. */
  --grid:   transparent;
  --grid-2: transparent;

  --deep:   #012D61;     /* footer navy */
  --deep-2: #002443;

  --ease:   cubic-bezier(.2, 0, .1, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);

  --shell: 1296px;
  --radius: 8px;
  --radius-lg: 16px;
  --pill: 1000px;
  --gap-section: clamp(3.5rem, 7vw, 6.5rem);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Archivo", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 700; line-height: 1.15; letter-spacing: -.005em; margin: 0; color: var(--ink);
}
h1, .display { font-weight: 300; line-height: 1.06; }
h3, .work-item h3, article.doc h3 { line-height: 1.2; letter-spacing: 0; }
article.doc h2 { line-height: 1.18; }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-hi); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px dashed var(--signal); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.1rem, 3vw, 2rem); }

/* the console world used a monospace for readouts; this world sets figures in
   the display serif with tabular numerals — the editorial equivalent. */
.mono { font-family: var(--serif); font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--signal); color: #fff; padding: .8rem 1.3rem; font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* The console status bar belongs to the prior world. nav.js no longer injects
   it; this keeps any cached copy from rendering. */
.console-bar { display: none !important; }

/* ==========================================================================
   Header — white rail, blue active state
   ========================================================================== */
.site-head { position: sticky; top: 0; z-index: 200; background: var(--void); border-bottom: 1px solid var(--line); }

.util { border-bottom: 1px solid var(--line-2); }
.util-in {
  max-width: var(--shell); margin: 0 auto;
  padding: .9rem clamp(1.1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 1.5rem;
}
.wordmark {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -.01em;
  color: var(--ink); line-height: 1; flex-shrink: 0; text-transform: capitalize;
}
.wordmark:hover { text-decoration: none; color: var(--signal); }
.util-spacer { flex: 1 1 auto; }
.util-links { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.util-links li + li::before { content: none; }
.util-links a {
  /* min-height keeps these inline links at a 24px tap target (WCAG 2.5.8) */
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--signal); transition: color 200ms var(--ease);
}
.util-links a:hover { color: var(--signal-hi); text-decoration: underline; text-underline-offset: 3px; }

/* nav band — white rail, blue underline marks the current page */
.band { background: var(--void); }
.band-in {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 clamp(1.1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 0;
}
.band-links { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.band-links a {
  display: block; padding: 1rem 1.15rem;
  font-size: .92rem; font-weight: 500; letter-spacing: 0;
  color: var(--ink); white-space: nowrap; position: relative;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.band-links a:first-child { padding-left: 0; }
.band-links a:hover { color: var(--signal); background: transparent; text-decoration: none; }
.band-links a.active { color: var(--signal); font-weight: 600; }
.band-links a.active::after {
  content: ""; position: absolute; left: 1.15rem; right: 0; bottom: -1px; height: 3px; background: var(--signal);
}
.band-links a.active:first-child::after { left: 0; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  color: var(--ink); padding: .6rem; cursor: pointer; line-height: 0; border-radius: var(--pill);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ==========================================================================
   Buttons — pill controls, 48px, the institutional shape
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .75rem 1.9rem; min-height: 48px; border-radius: var(--pill);
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  letter-spacing: 0; text-transform: none; border: 1px solid transparent; cursor: pointer;
  text-align: center;
  transition: background 300ms ease-in-out, color 300ms ease-in-out,
              border-color 300ms ease-in-out;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary { background: var(--signal); color: #fff; border-color: var(--signal); }
.btn-primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); color: #fff; text-decoration: none; }

.btn-line { background: transparent; color: var(--signal); border-color: var(--signal); }
.btn-line:hover { background: var(--signal-wash); border-color: var(--signal); color: var(--signal-lo); text-decoration: none; }

.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #3A3A3A; border-color: #3A3A3A; color: #fff; text-decoration: none; }

.btn-onDark { background: transparent; color: #fff; border-color: #fff; }
.btn-onDark:hover { background: #fff; color: var(--signal); border-color: #fff; text-decoration: none; }

/* on the blue grounds (hero, document header, closing band) the primary
   inverts to white — the institutional pattern */
.hero .btn-primary, .doc-head .btn-primary, .closer .btn-primary {
  background: #fff; color: var(--signal); border-color: #fff;
}
.hero .btn-primary:hover, .doc-head .btn-primary:hover, .closer .btn-primary:hover {
  background: var(--signal-wash); color: var(--signal-lo); border-color: var(--signal-wash);
}
.hero .btn-line, .doc-head .btn-line, .closer .btn-line {
  color: #fff; border-color: rgba(255,255,255,.7);
}
.hero .btn-line:hover, .doc-head .btn-line:hover, .closer .btn-line:hover {
  background: #fff; color: var(--signal); border-color: #fff;
}

/* ==========================================================================
   HERO — full-bleed institutional blue, editorial split
   ========================================================================== */
.hero {
  background: var(--signal);
  background-image: radial-gradient(120% 140% at 12% 0%, #0057B8 0%, #002A95 100%);
  color: #fff; border-bottom: 0;
}
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.1rem, 3vw, 2rem);
  min-height: clamp(440px, 62dvh, 640px);
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 0; }

.hero-eyebrow {
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none; color: var(--on-blue); margin: 0 0 1.1rem;
  display: block; max-width: 46ch; line-height: 1.45;
}
.hero-eyebrow::before { content: none; }

.hero-h {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 5.2vw, 4.75rem); line-height: 1.06; letter-spacing: -.01em;
  color: #fff; max-width: 16ch; margin: 0 0 1.5rem; text-wrap: balance;
}
.hero-h .lo { color: var(--signal-pale); font-weight: 300; }

.hero-lead {
  font-size: clamp(1.02rem, 1.25vw, 1.16rem); color: rgba(255,255,255,.9);
  max-width: 56ch; margin: 0 0 2.2rem; line-height: 1.6;
}
.hero-lead strong { color: #fff; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* right half: the illustration sits in a soft-edged media panel.
   `min-width: 0` is load-bearing: a grid item's automatic minimum size is
   transferred through `aspect-ratio`, so any min-height here becomes an
   implied min-WIDTH of height x ratio and bursts the column on narrow
   screens. Let the column set the width and the ratio set the height. */
.hero-vis {
  position: relative; aspect-ratio: 4 / 3; width: 100%; min-width: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius); overflow: hidden;
}
/* HUD corner brackets belong to the console world — retired here */
.hero-vis::before, .hero-vis::after,
.hero-vis .hud-bl, .hero-vis .hud-br { content: none; display: none; }
.hero-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8%; }
.vis-tag {
  position: absolute; z-index: 2; font-family: var(--sans);
  font-size: .74rem; letter-spacing: .01em; text-transform: none; color: rgba(255,255,255,.88);
}
.vis-tag.tl { top: 1rem; left: 1.2rem; }
.vis-tag.br { bottom: 1rem; right: 1.2rem; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: var(--gap-section) 0; }
.section-dark { background: var(--carbon); }
.section-dark h2, .section-dark h3 { color: var(--ink); }

.sec-lead { max-width: 34ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.sec-lead .kick {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--signal); margin: 0 0 .9rem;
  display: block;
}
.sec-lead .kick::before { content: none; }
.sec-lead h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -.005em; }
.sec-lead p { margin: 1rem 0 0; color: var(--ink-2); max-width: 58ch; font-size: 1.02rem; }

/* ==========================================================================
   Zig-zag rows
   ========================================================================== */
.zig {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--line-2);
}
.zig + .zig { margin-top: 0; }
.zig:nth-of-type(even) .zig-media { order: -1; }
.zig-copy h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: .7rem; }
.zig-copy p { color: var(--ink-2); max-width: 60ch; margin: 0; font-size: 1rem; }
.zig-meta { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.zig-meta .n {
  font-family: var(--serif); font-size: .95rem; font-weight: 600; color: var(--signal); letter-spacing: .02em;
}
.zig-meta .bar { flex: 1; height: 1px; background: var(--line); }

/* measured bars */
.gauge { margin-top: 0; }
.gauge-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .55rem; }
.gauge-top b { font-size: .9rem; font-weight: 600; color: var(--ink); }
.gauge-top i { font-style: normal; font-family: var(--serif); font-size: .95rem; color: var(--signal); font-variant-numeric: tabular-nums; }
.gauge-track { height: 8px; background: var(--carbon2); border-radius: var(--pill); overflow: hidden; }
.gauge-fill { height: 100%; width: var(--w, 50%); background: var(--signal); border-radius: var(--pill); }

/* stat row — editorial figures, not telemetry readouts */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); background: transparent; border-top: 0; }
.stat {
  background: var(--void); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; position: relative;
}
.stat::before { content: none; }
.stat b {
  display: block; padding-left: 0; margin-top: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -.01em; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.stat b em { font-style: normal; color: var(--signal); font-size: .6em; }
.stat span { display: block; margin-top: .8rem; padding-left: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }

/* ==========================================================================
   Work index — card grid
   ========================================================================== */
.work-scroll {
  display: grid; grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); background: transparent;
  overflow-x: visible; scroll-snap-type: none;
  border-top: 0; border-bottom: 0;
  max-width: var(--shell); margin: 0 auto;
  padding: 0 clamp(1.1rem, 3vw, 2rem);
}
.work-scroll::-webkit-scrollbar { height: 0; }
.work-item {
  scroll-snap-align: none; background: var(--void); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2rem); min-height: 270px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
  transition: border-color 300ms ease-in-out, background 300ms ease-in-out; position: relative;
}
.work-item:hover { background: var(--carbon3); border-color: var(--signal); text-decoration: none; }
.work-item .wi-kind {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; color: var(--signal);
  display: block;
}
.work-item .wi-kind::before { content: none; }
.work-item h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.45rem); color: var(--ink); margin-top: .6rem; }
.work-item p { margin: .7rem 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.work-item .wi-go {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 600; color: var(--signal); letter-spacing: 0; text-transform: none;
}
.work-item .wi-go::after {
  content: "\203A"; display: inline-block; font-size: 1.25em; line-height: 1;
  transition: transform 300ms ease-in-out;
}
.work-item:hover .wi-go::after,
.work-item:focus-visible .wi-go::after { transform: translateX(4px); }

/* ==========================================================================
   Logo strip
   ========================================================================== */
.orgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); background: transparent; }
.org {
  background: var(--void); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  transition: border-color 300ms ease-in-out, background 300ms ease-in-out;
}
.org:hover { background: var(--carbon3); border-color: var(--signal); text-decoration: none; }
.org img {
  height: 38px; width: auto; max-width: 100%;
  filter: grayscale(1) opacity(.62);
  transition: filter 300ms ease-in-out;
}
.org:hover img { filter: none; }
.org span { font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); text-align: center; }

/* ==========================================================================
   Bio
   ========================================================================== */
.bio { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.bio-photo { position: relative; margin: 0; }
.bio-photo img { display: block; width: 100%; border-radius: var(--radius); filter: none; }
.bio-photo b { display: block; margin-top: 1rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.bio-photo span { display: block; font-size: .9rem; color: var(--ink-3); margin-top: .15rem; }
.bio-text p { color: var(--ink-2); margin: 0 0 1.1rem; max-width: 65ch; font-size: 1.02rem; }
.bio-text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Closing CTA — institutional blue band
   ========================================================================== */
.closer {
  background: var(--signal);
  background-image: radial-gradient(120% 160% at 15% 0%, #0057B8 0%, #002A95 100%);
  color: #fff; padding: var(--gap-section) 0; border-top: 0;
}
.closer-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
.closer h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3.1rem); color: #fff; max-width: 18ch; line-height: 1.1; }
.closer p { color: rgba(255,255,255,.9); margin: 1.1rem 0 0; max-width: 52ch; }
.closer-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ==========================================================================
   Footer — deep navy
   ========================================================================== */
.site-foot { background: var(--deep); color: rgba(255,255,255,.78); padding: 3rem 0; border-top: 0; }
.foot-in { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; }
.site-foot p, .site-foot span { margin: 0; font-size: .88rem; }
.site-foot a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-foot a:hover { color: var(--signal-pale); }

/* ==========================================================================
   DOCUMENT PAGES — health-library editorial
   ========================================================================== */
.doc-head {
  background: var(--signal);
  background-image: radial-gradient(120% 150% at 10% 0%, #0057B8 0%, #002A95 100%);
  color: #fff; border-bottom: 0;
  padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 clamp(2.5rem, 4.5vw, 3.5rem);
}
.doc-head .kicker {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--on-blue); margin: 0 0 .9rem;
  display: block;
}
.doc-head .kicker::before { content: none; }
.doc-head h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 3.6rem); color: #fff; max-width: 22ch; line-height: 1.06; }
.doc-head .demonstrates { font-size: 1.06rem; color: rgba(255,255,255,.9); margin: 1.1rem 0 0; max-width: 62ch; }
.doc-head .meta {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 1.7rem 0 0; padding: 0;
  font-size: .88rem; border-top: 1px solid rgba(255,255,255,.28);
}
.doc-head .meta li { padding: .7rem 1.6rem .7rem 0; color: rgba(255,255,255,.82); }
.doc-head .meta strong { color: #fff; font-weight: 600; }

article.doc { max-width: 760px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.1rem, 3vw, 2rem) 1rem; }
article.doc h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin: 2.8rem 0 1rem;
  display: block; padding-bottom: .6rem; border-bottom: 2px solid var(--signal-wash);
}
article.doc h2::before { content: none; }
article.doc h2:first-child { margin-top: 0; }
article.doc h3 { font-family: var(--serif); font-weight: 700; font-size: 1.28rem; margin: 2rem 0 .6rem; color: var(--ink); }
article.doc h4 {
  font-family: var(--sans); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--signal); margin: 1.6rem 0 .5rem; font-weight: 700;
}
article.doc p { margin: 0 0 1.25rem; color: var(--ink-2); max-width: 68ch; line-height: 1.62; }
article.doc strong { color: var(--ink); font-weight: 600; }
article.doc ul, article.doc ol { margin: 0 0 1.25rem; padding-left: 1.4rem; color: var(--ink-2); }
article.doc li { margin-bottom: .5rem; line-height: 1.6; }
article.doc li::marker { color: var(--signal); }

/* prose links: blue, permanently underlined */
article.doc p a, article.doc li a, .testimonial a, .claim-block a, .table-wrap a {
  color: var(--signal); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color 200ms ease-in-out;
}
article.doc p a:hover, article.doc li a:hover,
.testimonial a:hover, .claim-block a:hover, .table-wrap a:hover {
  color: var(--signal-hi); text-decoration-thickness: 2px;
}

.lead-in {
  font-size: 1.14rem; color: var(--ink); border-left: 4px solid var(--signal);
  padding: .3rem 0 .3rem 1.4rem; margin: 0 0 2.2rem; line-height: 1.55;
}

/* Every component below is authored on a <p> that sits inside article.doc, so
   the generic `article.doc p` rule outranks a bare class selector and would
   reclaim their colour, measure, and margins. Re-assert them at matching
   specificity rather than weakening the generic rule. */
article.doc p.lead-in { color: var(--ink); max-width: 68ch; margin: 0 0 2.2rem; }
article.doc p.resume-role { color: var(--signal); margin: .25rem 0 .7rem; }
article.doc p.bio-other { color: var(--ink-3); margin: 1.2rem 0 0; }
article.doc p.table-note { color: var(--ink-3); margin: -1.2rem 0 2rem; max-width: none; }
article.doc p.fig-label { color: var(--ink); margin: .6rem 0 .15rem; max-width: none; }
article.doc p.fig-cap  { color: var(--ink-2); margin: 0 0 .35rem; max-width: none; }
article.doc p.fig-src  { color: var(--ink-3); margin: 0; max-width: none; }
article.doc .disclaimer p { max-width: none; margin: .3rem 0 0; }
article.doc .claim-block p:last-child { margin-bottom: 0; }
article.doc .bio-skills ul { padding-left: 0; }
article.doc .bio-skills li { margin-bottom: 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* tables — light editorial grids */
.table-wrap {
  overflow-x: auto; margin: 1.6rem 0 2rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--void);
}
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; line-height: 1.5; }
table.data caption { text-align: left; font-weight: 600; padding: 1rem 1.2rem .4rem; font-size: .98rem; color: var(--ink); }
table.data th, table.data td { padding: .8rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.data thead th {
  background: var(--carbon); color: var(--ink); font-weight: 700; font-size: .8rem;
  letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line);
}
table.data tbody tr:nth-child(even) { background: #FAFAFA; }
table.data tbody th { background: #FAFAFA; font-weight: 600; white-space: nowrap; color: var(--ink); }
table.data td.num { text-align: right; font-family: var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.table-note { font-size: .86rem; color: var(--ink-3); margin: -1.2rem 0 2rem; }

/* SWOT panels */
.grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: transparent;
  margin: 1.6rem 0 2rem; border: 0;
}
.grid-2 .panel { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.grid-2 .panel h4 {
  margin: 0 0 .7rem; color: #fff; display: inline-block; padding: .3rem .85rem; border-radius: var(--pill);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--sans); font-weight: 700;
}
.panel.pos h4 { background: var(--telemetry-dim); }
.panel.neg h4 { background: var(--signal); }
.grid-2 .panel ul { margin: 0; padding-left: 1.2rem; font-size: .93rem; color: var(--ink-2); }

dl.framework { margin: 1.6rem 0 2rem; border-top: 2px solid var(--signal); }
dl.framework > div { display: grid; grid-template-columns: 180px 1fr; gap: 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-2); }
dl.framework dt { font-weight: 700; color: var(--signal); font-family: var(--sans); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
dl.framework dd { margin: 0; color: var(--ink-2); }
dl.framework dd ul { margin: 0; padding-left: 1.1rem; }

figure.doc-figure { margin: 2rem 0; }
figure.doc-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--carbon); filter: none;
}
figure.doc-figure figcaption, .figure-pair figcaption { font-size: .86rem; color: var(--ink-3); margin-top: .7rem; line-height: 1.5; }
figure.doc-figure figcaption strong, .figure-pair figcaption strong { color: var(--ink-2); font-weight: 600; }
.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 1.8rem 0; }
.figure-pair figure { margin: 0; }
.figure-pair img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--carbon); filter: none; }

table.figtable { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; background: var(--void); }
table.figtable caption { text-align: left; font-weight: 600; padding: 1rem 1.2rem .4rem; font-size: .98rem; color: var(--ink); }
table.figtable th.colhead {
  background: var(--carbon); color: var(--ink); font-weight: 700; font-size: .78rem;
  letter-spacing: .05em; padding: .7rem 1rem; text-align: center; text-transform: uppercase;
  border: 1px solid var(--line);
}
table.figtable th.rowhead {
  background: #FAFAFA; font-weight: 700; font-size: .78rem; padding: .8rem .6rem; text-align: center;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; width: 2.4rem;
  border: 1px solid var(--line); color: var(--ink-2);
}
table.figtable td { border: 1px solid var(--line); padding: .9rem; vertical-align: top; width: 44%; background: var(--void); }
table.figtable figure { margin: 0; }
table.figtable img { width: 100%; height: auto; display: block; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--carbon); filter: none; }
.fig-label { font-weight: 700; font-size: .88rem; margin: .6rem 0 .15rem; color: var(--ink); }
.fig-cap { font-size: .86rem; color: var(--ink-2); margin: 0 0 .35rem; line-height: 1.5; }
.fig-src { font-size: .76rem; color: var(--ink-3); }
.fig-src a { color: var(--ink-3); }
.empty-cell { color: var(--ink-3); font-style: italic; text-align: center; vertical-align: middle; font-size: .88rem; }

.claim-block {
  background: var(--signal-wash); border: 1px solid #C5E2F9; border-left: 4px solid var(--signal);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.4rem 1.6rem; margin: 1.3rem 0;
}
.claim-block h3 { margin-top: 0; }
.testimonial { border-left: 4px solid var(--line); padding: .3rem 0 .3rem 1.3rem; margin: 1.3rem 0; font-style: italic; color: var(--ink-2); }
.testimonial cite { display: block; font-style: normal; font-weight: 600; color: var(--ink); margin-top: .45rem; font-size: .92rem; }

/* disclaimer / honesty callouts — load-bearing, kept high-contrast */
.disclaimer {
  background: #FFF6E6; border: 1px solid #F0D9A8; border-left: 5px solid #D79D13;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.4rem 1.6rem; margin: 2rem 0; color: var(--ink-2);
}
.disclaimer strong { color: #7A5200; font-weight: 700; }
.disclaimer .disclaimer-head { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: .5rem; font-size: 1.02rem; color: #7A5200; }
.disclaimer p { margin: .3rem 0 0; font-size: .96rem; line-height: 1.6; color: var(--ink-2); max-width: none; }

.references { margin: 1rem 0 2rem; }
ol.reflist { font-size: .88rem; color: var(--ink-2); padding-left: 1.4rem; line-height: 1.55; }
ol.reflist li { margin-bottom: .7rem; word-break: break-word; }
ol.reflist li::marker { color: var(--signal); }
ol.reflist a { word-break: break-all; }

.page-nav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
  margin: 3rem 0 1rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.page-nav a { font-weight: 600; }

/* Resume */
.resume-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; }
.resume-contact { color: rgba(255,255,255,.9); font-size: 1rem; margin: .8rem 0 0; }
.resume-contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.resume-contact a:hover { color: var(--signal-pale); }
.resume-job { margin: 0 0 1.8rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-2); }
.resume-job:last-child { border-bottom: 0; }
.resume-job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.resume-job-head .org { font-family: var(--serif); font-weight: 700; font-size: 1.22rem; letter-spacing: 0; color: var(--ink); }
.resume-job-head .org .loc { font-family: var(--sans); font-weight: 400; color: var(--ink-3); font-size: .88rem; letter-spacing: 0; }
.resume-job-head .dates { font-family: var(--sans); color: var(--ink-3); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resume-role { color: var(--signal); font-weight: 700; font-size: .92rem; margin: .25rem 0 .7rem; letter-spacing: .02em; text-transform: none; }
.resume-job ul { margin: 0; padding-left: 1.3rem; }
.resume-job li { margin-bottom: .45rem; color: var(--ink-2); font-size: .97rem; }
.resume-edu { margin-bottom: 1.6rem; }
.resume-edu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.resume-edu-head .degree { font-family: var(--serif); font-weight: 700; letter-spacing: 0; color: var(--ink); font-size: 1.1rem; }
.resume-edu-head .dates { font-family: var(--sans); color: var(--ink-3); font-size: .88rem; white-space: nowrap; }
.resume-edu .school { color: var(--ink-2); font-style: normal; margin: .2rem 0 .35rem; }
.resume-edu .detail { color: var(--ink-3); font-size: .9rem; margin: 0; }
.bio-skills { margin: 1.6rem 0 0; }
.bio-skills h3 { font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--signal); margin: 0 0 1rem; font-weight: 700; }
.bio-skills ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.bio-skills li { color: var(--ink-2); font-size: .98rem; line-height: 1.55; padding-left: 1.1rem; border-left: 3px solid var(--signal-wash); }
.bio-skills li strong { color: var(--ink); font-weight: 600; }
.bio-other { margin-top: 1.2rem; font-size: .93rem; color: var(--ink-3); }

/* ==========================================================================
   Motion — transform/opacity only, calm
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .lift.reveal { opacity: 0; transform: translateY(16px); }
  .js .lift.reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .gauge-fill { animation: gauge 900ms var(--ease) backwards; }
  @keyframes gauge { from { transform: scaleX(0); transform-origin: left; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .js .lift, .js .lift.reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .band-in { position: relative; flex-wrap: wrap; }
  .band-links {
    display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: .6rem;
  }
  .band-links.open { display: flex; }
  .band-links a { padding: .85rem 0; border-top: 1px solid var(--line-2); }
  .band-links a:first-child { padding-left: 0; }
  .band-links a.active::after { left: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-vis { order: 2; aspect-ratio: 16 / 10; }
  .zig { grid-template-columns: 1fr; gap: 1.5rem; }
  .zig:nth-of-type(even) .zig-media { order: 0; }
  .orgs { grid-template-columns: repeat(2, 1fr); }
  .bio { grid-template-columns: 1fr; }
  .bio-photo { max-width: 280px; }
  .closer-grid { grid-template-columns: 1fr; align-items: start; }
  .figure-pair, .grid-2 { grid-template-columns: 1fr; }
  dl.framework > div { grid-template-columns: 1fr; gap: .3rem; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .stats { grid-template-columns: 1fr; }
  .hero-actions, .closer-actions, .resume-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .util-links { gap: 1rem; }
  .util-links a { font-size: .78rem; }
  table.figtable { display: block; min-width: 0; }
  table.figtable thead { display: none; }
  table.figtable tbody, table.figtable tr { display: block; }
  table.figtable tr { border-bottom: 2px solid var(--line); margin-bottom: .5rem; }
  table.figtable th.rowhead { display: block; width: auto; writing-mode: horizontal-tb; transform: none; text-align: left; border: 0; margin: .8rem 0 .3rem; }
  table.figtable td { display: block; width: auto; border: 0; padding: .6rem 0; }
  table.figtable td.empty-cell { display: none; }
}

/* ==========================================================================
   Figure lightbox — injected by lightbox.js on the document pages.
   These rules previously lived only in styles.css, which no page loaded, so
   the overlay was rendering unstyled. Carried here (and restyled for this
   world) before that file was deleted; this is now their only home.
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(1, 20, 45, .9);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 3vh 4vw;
}
.lightbox.open { display: flex; }
.lightbox-content { margin: 0; max-width: 1040px; max-height: 94vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-content img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: var(--radius); background: var(--void); cursor: zoom-out;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
}
.lightbox-content figcaption {
  color: rgba(255,255,255,.9); font-size: .9rem; margin-top: .9rem;
  text-align: center; line-height: 1.55; max-width: 760px;
}
.lightbox-content figcaption strong { color: #fff; font-weight: 600; }
.lightbox-content figcaption a { color: var(--on-blue); text-decoration: underline; text-underline-offset: 3px; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.2rem;
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  font-size: 1.9rem; line-height: 1; cursor: pointer;
  width: 48px; height: 48px; border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease-in-out;
}
.lightbox-close:hover,
.lightbox-close:focus-visible { background: rgba(255, 255, 255, .28); }

/* ==========================================================================
   Assistant widget
   ========================================================================== */
.assistant-toggle {
  position: fixed; right: 24px; bottom: 24px; z-index: 950;
  width: 56px; height: 56px; border-radius: var(--pill);
  background: var(--signal); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(1,45,97,.28);
  transition: background 300ms ease-in-out;
}
.assistant-toggle:hover { background: var(--signal-hi); }
.assistant-toggle svg { width: 24px; height: 24px; }

.assistant-panel[hidden] { display: none; }
.assistant-panel {
  position: fixed; right: 24px; bottom: 94px; z-index: 950;
  width: 348px; max-width: calc(100vw - 32px);
  max-height: min(470px, calc(100dvh - 130px));
  display: flex; flex-direction: column;
  background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(1,45,97,.22); overflow: hidden;
}
.assistant-head { display: flex; align-items: center; justify-content: space-between; background: var(--signal); border-bottom: 0; padding: .9rem 1.15rem; }
.assistant-title { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.assistant-close { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.assistant-close:hover { color: var(--signal-pale); }
.assistant-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 130px; }
.assistant-msg { max-width: 90%; }
.assistant-msg p { margin: 0; padding: .65rem .9rem; font-size: .9rem; line-height: 1.5; border-radius: var(--radius-lg); }
.assistant-msg.bot { align-self: flex-start; }
.assistant-msg.bot p { background: var(--carbon); border: 1px solid var(--line-2); color: var(--ink); border-bottom-left-radius: 4px; }
.assistant-msg.user { align-self: flex-end; }
.assistant-msg.user p { background: var(--signal); color: #fff; border-bottom-right-radius: 4px; }
.assistant-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.assistant-link { display: inline-block; padding: .35rem .85rem; background: var(--void); border: 1px solid var(--signal); border-radius: var(--pill); color: var(--signal); font-size: .8rem; font-weight: 600; }
.assistant-link:hover { background: var(--signal); border-color: var(--signal); color: #fff; text-decoration: none; }
.assistant-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .7rem; }
.assistant-chip { background: none; border: 1px solid var(--line); border-radius: var(--pill); padding: .35rem .85rem; font-size: .8rem; font-weight: 500; font-family: inherit; color: var(--ink-2); cursor: pointer; transition: border-color 200ms ease-in-out, color 200ms ease-in-out; }
.assistant-chip:hover { color: var(--signal); border-color: var(--signal); }
.assistant-form { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--line-2); }
.assistant-input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--pill); padding: .65rem 1rem; font: inherit; font-size: .9rem; background: var(--void); color: var(--ink); }
.assistant-input:focus { border-color: var(--signal); outline: none; }
.assistant-input::placeholder { color: var(--ink-4); }
.assistant-send { background: var(--signal); color: #fff; border: 0; border-radius: var(--pill); width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 200ms ease-in-out; }
.assistant-send:hover { background: var(--signal-hi); }
.assistant-send svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .assistant-panel { right: 16px; }
  .assistant-toggle { right: 16px; bottom: 16px; }
}