/* ============================================================
   Jeff Sylvan · jeffrey.blog
   Engineering portfolio & field notes. Star-chart identity
   shared with the CogniCluster network, tuned for long-form
   technical reading. System fonts only.
   ============================================================ */

:root {
  --void: #05080f;
  --void-2: #070c16;
  --panel: #0b1220;
  --panel-2: #0d1526;
  --line: #1b2942;
  --line-soft: #14203a;
  --control-line: #52627b;
  --contact-selected-bg: rgba(79, 216, 196, 0.08);
  --ink: #e9eef7;
  --body: #c3cede;
  --muted: #8b9cb5;
  --faint: #a8b3c6; /* 8.1:1 on the void; comfortable headroom for small mono labels */
  --amber: #ffb648;
  --amber-dim: #c98a2e;
  --cyan: #4fd8c4;
  --red: #ff5d5d;
  --blue: #6ea8ff;
  --focus: var(--cyan);
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  /* fixed-chrome geometry: one source for offsets, anchors, and padding */
  --global-nav-h: 34px;
  --local-nav-h: 56px;
  --chrome-h: calc(var(--global-nav-h) + var(--local-nav-h));
  --chrome-maxw: 1080px;
  --maxw: 1080px;
  --artw: 780px;
  --editorial-prose-max: 45rem;
  --editorial-gutter: 1.75rem;
  /* spacing scale (8px base); prefer these tokens in new rules */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--chrome-h) + 18px); }
body {
  margin: 0;
  padding-top: var(--chrome-h); /* clears both fixed bars */
  background: var(--void);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.7;
  overflow-x: hidden;
}
::selection { background: rgba(255, 182, 72, 0.28); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* keyboard focus: one visible ring everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ext::after { content: " \2197"; font-size: 0.8em; }

.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 100;
  background: var(--amber); color: #10131a;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 4px;
}
.skip-link:focus { top: 8px; }

#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* The CogniCluster network bar is fully self-contained in
   /network-header.js (markup + scoped cc-network-* styles). The geometry
   vars above mirror its published offsets (34px desktop, 38px mobile, local
   nav 56px/62px) so both systems compute identical fixed-chrome math. */

/* ---------- local nav (the Jeff Sylvan site header) ---------- */
nav.top {
  position: fixed; top: var(--global-nav-h); left: 0; right: 0; z-index: 60;
  background: rgba(5, 8, 15, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: var(--chrome-maxw); margin: 0 auto; padding: 0 28px;
  height: var(--local-nav-h); display: flex; align-items: center; gap: 22px;
}
.brand {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.13em; color: var(--ink); white-space: nowrap;
}
.brand b { color: var(--amber); }
.brand:hover { text-decoration: none; }
/* primary nav is wayfinding, not chrome: sans sentence case at reading
   size; the mono uppercase voice stays on kickers, labels, pills, and the
   network bar where it earns its keep */
.nav-links { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.nav-links a {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--body);
  padding: 6px 0;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--amber);
}
/* the nav resume chip speaks the same voice as every other resume action:
   the amber-outlined mono chip */
.resume-link {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--amber);
  border: 1px solid rgba(255, 182, 72, 0.5); border-radius: 3px;
  padding: 5px 12px;
}
.resume-link:hover { border-color: var(--amber); text-decoration: none; }

/* disclosure button: hidden until JS enhances, mobile-only via media query */
.local-menu-btn { display: none; }
.menu-chevron::after { content: " \25BE"; }

/* ---------- hero (index) ---------- */
.hero {
  position: relative; z-index: 1;
  padding: 48px 0 60px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(5,8,15,0.92) 78%, var(--void) 100%),
    url("assets/backdrop-station.jpg") center 30% / cover no-repeat;
  border-bottom: 1px solid var(--line-soft);
}
#c-hero3d {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
#c-hero3d.ready { opacity: 1; }
#c-hero3d.failed { display: none; }
/* text-protection scrim: keeps the worst-case photo pixels behind the copy
   column above 4.5:1 while the station stays visible on the right */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(5,8,15,0.90) 0%,
    rgba(5,8,15,0.84) 48%,
    rgba(5,8,15,0.45) 68%,
    rgba(5,8,15,0.08) 100%);
  pointer-events: none;
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.hero-crest {
  width: 64px; height: 64px; margin-bottom: 18px; background: var(--amber);
  -webkit-mask: url("assets/wings.png") center / contain no-repeat;
  mask: url("assets/wings.png") center / contain no-repeat;
}
.hero h1 {
  font-size: clamp(38px, 5.6vw, 64px); font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.06; margin: 12px 0 18px; color: var(--ink);
  max-width: 21ch;
}
.hero h1 em { font-style: normal; color: var(--amber); }
.hero-sub { font-size: 19px; max-width: 62ch; color: var(--body); line-height: 1.6; }
.subhero {
  min-height: 320px;
  display: flex;
  align-items: center;
}
.subhero h1 {
  font-size: clamp(34px, 5vw, 54px);
  max-width: 940px;
}
/* layered hero copy: one-sentence summary (.hero-sub), compact proof chips
   (.hero-proof), then the deep-dive lead (.hero-more) */
.hero-proof {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hero-proof li {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--muted); background: rgba(5, 8, 15, 0.55);
  border: 1px solid var(--line); border-radius: 3px; padding: 6px 11px;
}
.hero-proof li.target { color: var(--amber); border-color: rgba(255, 182, 72, 0.5); }
.hero-more { font-size: 15.5px; max-width: 62ch; color: var(--muted); line-height: 1.65; margin: 16px 0 0; }

.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #10131a; background: var(--amber); padding: 11px 20px; border-radius: 3px; font-weight: 700;
}
.cta-btn:hover { background: #ffc670; text-decoration: none; }
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--line); padding: 10px 20px; border-radius: 3px;
}
.ghost-btn:hover { border-color: var(--amber); color: var(--amber); text-decoration: none; }
.hero .ghost-btn { background: rgba(5, 8, 15, 0.5); }
/* anchor offsets under the two fixed bars are handled once, by
   scroll-padding-top on html; do not add per-element scroll margins */

/* hero value line + case-study one-liners: readable sentences, not stat
   fragments; the amber rule ties each example to the claim above it */
.hero-value { margin: 22px 0 0; max-width: 68ch; }
.hero-value > p {
  margin: 0 0 14px; color: var(--ink);
  font-size: 17.5px; font-weight: 650; line-height: 1.5;
}
.hero-outcomes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.hero-outcomes li {
  padding: 3px 0 3px 16px; border-left: 2px solid var(--amber-dim);
  color: var(--body); font-size: 16.5px; line-height: 1.5;
  background: rgba(5, 8, 15, 0.45);
}

/* labels use the dim amber so full-strength amber keeps meaning "act here" */
.series-chip {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--amber-dim);
}
.series-chip a { color: var(--amber-dim); }

/* ---------- entry page ---------- */
.entry-hero {
  padding: 44px 0 46px;
  min-height: 340px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(5,8,15,0.42) 0%, rgba(5,8,15,0.88) 82%, var(--void) 100%),
    url("assets/backdrop-station.jpg") center 34% / cover no-repeat;
}
.entry-hero .hero-sub { max-width: 68ch; }
.entry-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.entry-card {
  display: block; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.86), rgba(13, 21, 38, 0.7));
  padding: 28px 30px 26px; color: var(--body);
}
.entry-card:hover {
  border-color: rgba(255, 182, 72, 0.58);
  text-decoration: none;
}
.entry-card.accent:hover { border-color: rgba(79, 216, 196, 0.62); }
.entry-card .sec-label { margin-bottom: 18px; }
.entry-card h2 {
  margin: 0 0 12px; color: var(--ink);
  font-size: 24px; line-height: 1.25; font-weight: 800;
}
.entry-card p {
  margin: 0 0 18px; color: var(--muted);
  font-size: 15.5px; line-height: 1.65;
}
.entry-card .entry-summary { margin-bottom: 22px; }
.entry-card span {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--amber);
}
.entry-card.accent span { color: var(--cyan); }

/* ---------- homepage: selected impact ---------- */
.impact-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-bottom: 30px;
}
.impact-case {
  min-width: 0; padding: 4px 0 6px 18px;
  border-left: 2px solid var(--line);
}
.impact-org {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.impact-case h3 {
  margin: 8px 0 10px; color: var(--ink);
  font-size: 20px; line-height: 1.3; font-weight: 800;
}
.impact-case p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

/* ---------- homepage: featured proof ---------- */
.proof-head h3 {
  margin: 0 0 14px; color: var(--ink);
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; font-weight: 800;
}
.proof-head .sec-intro { margin-bottom: 30px; }
#proof .ev-table { margin-bottom: 30px; }

/* ---------- reading lists (homepage writing + field notes) ---------- */
.read-list { display: grid; gap: 4px; margin-bottom: 26px; }
.read-row {
  display: block; min-width: 0;
  padding: 14px 16px; margin: 0 -16px;
  border-radius: 5px; color: var(--body);
}
.read-row:hover { background: rgba(11, 18, 32, 0.7); text-decoration: none; }
.read-row .read-meta {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--faint);
}
.read-row b {
  display: block; margin: 6px 0 4px;
  color: var(--ink); font-size: 17px; line-height: 1.35; font-weight: 750;
}
.read-row em {
  display: block; color: var(--muted);
  font-size: 14.5px; line-height: 1.6; font-style: normal;
}
.read-row:hover b { color: var(--amber); }

/* ---------- availability band ---------- */
.avail-band h2 {
  margin: 0 0 14px; color: var(--ink);
  font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 850;
  letter-spacing: -0.01em;
}

/* ---------- work page aside (beyond engineering roles) ---------- */
.work-aside {
  max-width: 76ch; padding: 4px 0 6px 18px;
  border-left: 2px solid var(--line);
}
.work-aside p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

/* ---------- index cards ---------- */
section { position: relative; z-index: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 60px 28px 72px; }
.sec-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--amber-dim); margin: 0 0 22px;
  font-weight: 400;
  display: flex; align-items: center; gap: 12px;
}
.sec-label::before {
  content: ""; width: 20px; height: 20px; background: var(--amber-dim);
  -webkit-mask: url("assets/chevron.png") center / contain no-repeat;
  mask: url("assets/chevron.png") center / contain no-repeat;
}
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card {
  display: block; border: 1px solid var(--line); border-radius: 5px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 24px 26px; color: var(--body); position: relative;
}
.card:hover { border-color: rgba(255, 182, 72, 0.55); text-decoration: none; }
.card-part { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--faint); }
.card h3 { margin: 10px 0 8px; color: var(--ink); font-size: 19px; line-height: 1.3; }
.card p { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }
.card-go { font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: 0.08em; }
.foot-note { max-width: 72ch; color: var(--muted); font-size: 15px; margin-top: 36px; }
.foot-note.closing {
  color: var(--body); max-width: 68ch;
  border-left: 2px solid var(--amber-dim); padding: 2px 0 2px 16px;
}

/* ---------- work page ---------- */
.work-cases {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.case-card {
  max-width: none; margin: 0; padding: 28px 30px;
  border: 1px solid var(--line); border-radius: 6px;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.9), rgba(13, 21, 38, 0.72));
}
.case-card h2 {
  margin: 0 0 16px; color: var(--ink);
  font-size: 24px; line-height: 1.25; font-weight: 800;
}
.case-card p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.case-card p b { color: var(--ink); font-weight: 700; }

/* ---------- article ---------- */
article {
  position: relative; z-index: 1;
  max-width: var(--artw); margin: 0 auto;
  padding: 52px 28px 60px;
}
.art-head { margin-bottom: 40px; }
.art-head h1 {
  font-size: clamp(32px, 5vw, 48px); font-weight: 850; letter-spacing: -0.015em;
  line-height: 1.12; color: var(--ink); margin: 14px 0 20px;
}
.preamble {
  color: var(--muted); font-size: 16px; font-style: italic;
  border-left: 2px solid var(--amber); padding-left: 18px;
}
.preamble a { color: var(--blue); }

article h2 {
  font-size: 26px; font-weight: 800; color: var(--ink);
  margin: 52px 0 16px; letter-spacing: -0.01em; line-height: 1.25;
}
article p { margin: 0 0 20px; }
article strong { color: var(--ink); }
article li { margin: 8px 0; }
article code {
  font-family: var(--mono); font-size: 0.86em;
  background: rgba(11, 18, 32, 0.9); border: 1px solid var(--line-soft);
  padding: 1px 6px; border-radius: 3px; color: #d7dfeb;
}
article pre {
  background: #060a13; border: 1px solid var(--line); border-radius: 5px;
  padding: 18px 20px; overflow-x: auto; font-size: 13.5px; line-height: 1.7;
  margin: 0 0 20px;
}
article pre code { background: none; border: none; padding: 0; }
article blockquote {
  margin: 0 0 20px; padding: 4px 0 4px 20px;
  border-left: 2px solid var(--cyan); color: var(--muted);
}

/* tables */
.table-scroll { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 5px; }
article table { border-collapse: collapse; width: 100%; font-size: 14px; }
article th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber); text-align: left; padding: 12px 14px;
  background: rgba(11, 18, 32, 0.9); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
article td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
article tr:last-child td { border-bottom: none; }
article tbody tr:hover { background: rgba(255, 182, 72, 0.04); }

/* diagrams */
.diagram {
  margin: 30px 0 34px; padding: 22px 18px 14px;
  border: 1px solid var(--line); border-radius: 6px;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(207,216,232,0.45), transparent 100%),
    radial-gradient(1px 1px at 78% 12%, rgba(207,216,232,0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 82%, rgba(159,216,255,0.3), transparent 100%),
    radial-gradient(1px 1px at 34% 64%, rgba(255,217,160,0.35), transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(207,216,232,0.35), transparent 100%),
    radial-gradient(90% 100% at 70% 0%, rgba(255,182,72,0.05) 0%, transparent 60%),
    radial-gradient(120% 140% at 50% 0%, #0c1428 0%, var(--void-2) 75%);
  position: relative;
}
.diagram::before, .diagram::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  background: var(--amber); opacity: 0.8; pointer-events: none;
  -webkit-mask: url("../assets/corner.png") center / contain no-repeat;
  mask: url("../assets/corner.png") center / contain no-repeat;
}
.diagram::before { top: -4px; left: -4px; }
.diagram::after { bottom: -4px; right: -4px; transform: rotate(180deg); }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  letter-spacing: 0.05em; margin-top: 12px; text-align: center; line-height: 1.6;
}

/* diagram vocabulary (inline SVGs inherit these; gradients/orbs live in the
   shared defs block the build injects into every page) */
.dg-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; fill: var(--muted); }
.dg-label.big { font-size: 13px; }
.dg-label.small { font-size: 10px; }
.dg-ink { fill: var(--ink); }
.dg-amber { fill: var(--amber); }
.dg-cyan { fill: var(--cyan); }
.dg-red { fill: var(--red); }
.dg-blue { fill: var(--blue); }
.dg-faint { fill: var(--faint); }
.dg-box { fill: url(#g-panel); stroke: #2e4368; stroke-width: 1.2; }
.dg-box.hot { stroke: rgba(255, 182, 72, 0.85); filter: drop-shadow(0 0 9px rgba(255, 182, 72, 0.3)); }
.dg-box.good { stroke: rgba(79, 216, 196, 0.85); filter: drop-shadow(0 0 9px rgba(79, 216, 196, 0.28)); }
.dg-box.bad { stroke: rgba(255, 93, 93, 0.85); stroke-dasharray: 5 4; filter: drop-shadow(0 0 9px rgba(255, 93, 93, 0.28)); }
.dg-hexline { fill: none; stroke: var(--faint); stroke-width: 1.3; }
.dg-hexline.amber { stroke: var(--amber); filter: drop-shadow(0 0 7px rgba(255, 182, 72, 0.45)); }
.dg-hexline.cyan { stroke: var(--cyan); filter: drop-shadow(0 0 7px rgba(79, 216, 196, 0.4)); }
.dg-hexline.red { stroke: var(--red); stroke-dasharray: 4 3; filter: drop-shadow(0 0 7px rgba(255, 93, 93, 0.4)); }
.dg-hexfill { fill: rgba(79, 216, 196, 0.14); stroke: var(--cyan); stroke-width: 1.3; filter: drop-shadow(0 0 8px rgba(79, 216, 196, 0.45)); }
.dg-line { stroke: #2e4368; stroke-width: 1.3; fill: none; }
.dg-line.amber { stroke: rgba(255, 182, 72, 0.8); }
.dg-line.cyan { stroke: rgba(79, 216, 196, 0.8); }
.dg-line.red { stroke: rgba(255, 93, 93, 0.8); }
.dg-line.dash { stroke-dasharray: 5 4; }
.dg-line.thick { stroke-width: 2.2; }
.dg-line.thick.amber { filter: drop-shadow(0 0 6px rgba(255, 182, 72, 0.5)); }
.dg-line.thick.cyan { filter: drop-shadow(0 0 6px rgba(79, 216, 196, 0.45)); }
.dg-flow { stroke-dasharray: 6 7; animation: dgflow 1.5s linear infinite; }
@keyframes dgflow { to { stroke-dashoffset: -13; } }
.dg-bar { fill: url(#g-bar-amber); filter: drop-shadow(0 0 7px rgba(255, 182, 72, 0.35)); }
.dg-bar.dim { fill: #263858; filter: none; }
.dg-bar.red { fill: url(#g-bar-red); filter: drop-shadow(0 0 7px rgba(255, 93, 93, 0.35)); }
.dg-bar.cyan { fill: url(#g-bar-cyan); filter: drop-shadow(0 0 7px rgba(79, 216, 196, 0.35)); }
.dg-node { fill: url(#g-orb-amber); }
.dg-node.cyan { fill: url(#g-orb-cyan); }
.dg-node.red { fill: url(#g-orb-red); }
.dg-pulse { animation: dgpulse 2s ease-in-out infinite; }
@keyframes dgpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* in-article 3D scenes */
.scene3d-fig { margin: 30px 0 34px; }
.scene3d-fig.failed .scene3d, .scene3d-fig.failed .scrub { display: none; }
.scene3d {
  position: relative;
  height: 440px;
  border: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: radial-gradient(130% 150% at 50% 0%, #0c1428 0%, var(--void-2) 75%);
}
.scene3d-fig figcaption {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  letter-spacing: 0.05em; margin-top: 12px; text-align: center; line-height: 1.6;
}
.scene3d canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 1s ease;
}
.scene3d canvas.ready { opacity: 1; }
.overlay-label {
  position: absolute; z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--muted); background: rgba(5, 8, 15, 0.72);
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 10px;
  pointer-events: none;
}
.overlay-label.amber { color: var(--amber); border-color: rgba(255, 182, 72, 0.45); }
.overlay-label.cyan { color: var(--cyan); border-color: rgba(79, 216, 196, 0.45); }
.overlay-label.red { color: var(--red); border-color: rgba(255, 93, 93, 0.45); }

/* scrub timeline + system-state panel */
.scrub {
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 6px 6px;
  background: rgba(9, 15, 28, 0.85);
  padding: 16px 20px 18px;
}
.scrub-row { display: flex; align-items: center; gap: 12px; }
.scrub-prev, .scrub-next {
  background: var(--panel); color: var(--amber);
  border: 1px solid var(--line); border-radius: 4px;
  width: 34px; height: 30px; font-size: 17px; line-height: 1;
  cursor: pointer; flex: none;
}
.scrub-prev:hover, .scrub-next:hover { border-color: var(--amber); }
.scrub-range { flex: 1; accent-color: var(--amber); height: 6px; cursor: pointer; }
.scrub-phase {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--amber); margin-top: 12px;
}
.scrub-note { font-size: 14px; color: var(--muted); margin-top: 4px; min-height: 42px; }
.sys-panel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px;
}
.sys {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 9px 12px; background: rgba(11, 18, 32, 0.7);
  transition: border-color 0.25s;
}
.sys-name {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--faint); margin-bottom: 4px;
}
.sys-val { font-family: var(--mono); font-size: 11.5px; color: var(--ink); line-height: 1.5; }
.sys[data-state="on"] { border-color: rgba(79, 216, 196, 0.55); }
.sys[data-state="on"] .sys-val { color: var(--cyan); }
.sys[data-state="hot"] { border-color: rgba(255, 182, 72, 0.65); box-shadow: 0 0 12px rgba(255, 182, 72, 0.12); }
.sys[data-state="hot"] .sys-val { color: var(--amber); }
.sys[data-state="warn"] { border-color: rgba(255, 182, 72, 0.35); }
.sys[data-state="warn"] .sys-val { color: #d9b98a; }
.sys[data-state="off"] { opacity: 0.6; }
.sys[data-state="off"] .sys-val { color: var(--faint); }

@media (max-width: 760px) {
  .scene3d { height: 320px; }
  .sys-panel { grid-template-columns: 1fr; }
  .overlay-label { font-size: 9.5px; padding: 3px 7px; }
}

/* callouts */
.callout {
  margin: 26px 0; padding: 14px 18px;
  border: 1px dashed rgba(255, 182, 72, 0.5); border-radius: 5px;
  font-size: 14.5px; color: var(--muted);
}
.callout.decision { border-color: rgba(110, 168, 255, 0.5); }
.callout.delta {
  border-style: solid;
  border-color: rgba(79, 216, 196, 0.45);
  background: rgba(79, 216, 196, 0.04);
}
.callout-label {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--amber); margin-bottom: 6px;
}
.callout.decision .callout-label { color: var(--blue); }
.callout.delta .callout-label { color: var(--cyan); }
.callout.delta strong { color: var(--ink); }

/* article footer nav + bio */
.art-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 56px 0 0; padding-top: 30px; border-top: 1px solid var(--line-soft);
}
.art-nav a {
  border: 1px solid var(--line); border-radius: 5px; padding: 14px 18px;
  color: var(--ink); font-weight: 650; font-size: 15px; line-height: 1.4;
}
.art-nav a:hover { border-color: rgba(255, 182, 72, 0.55); text-decoration: none; }
.art-nav a span {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; color: var(--faint); margin-bottom: 5px;
}
.art-nav .next { text-align: right; }
.bio {
  margin-top: 34px; padding: 18px 20px; border-left: 2px solid var(--line);
  color: var(--faint); font-size: 13.5px; font-style: italic; line-height: 1.65;
}

/* ---------- annotated article reading spine ---------- */
.article-page {
  --article-paper: #f6f0e5;
  --article-raised: #fffdf8;
  --article-ink: #231f1a;
  --article-muted: #665e52;
  --article-rule: #c7b89e;
  --article-link: #7a2f22;
  --article-accent: #9a3f2d;
  --article-focus: #145c72;
  background: #1d2228;
}
.article-page main {
  position: relative;
  z-index: 1;
  background: var(--article-paper);
  color: var(--article-ink);
}
.article-page ::selection { background: #e8c8a4; }
.article-page .article-journal {
  --article-gutter: var(--editorial-gutter);
  --article-measure: var(--editorial-prose-max);
  max-width: none;
  margin: 0;
  padding: 0 0 72px;
  color: var(--article-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.78;
}
.article-page .article-header {
  margin: 0;
  padding: 58px var(--article-gutter) 46px;
  border-bottom: 1px solid var(--article-rule);
  background: var(--article-paper);
}
.article-header-inner,
.article-page .article-body > p,
.article-page .article-body > h2,
.article-page .article-body > h3,
.article-page .article-body > ul,
.article-page .article-body > ol,
.article-page .article-body > blockquote,
.article-page .article-body > pre,
.article-page .article-body > .callout,
.article-page .article-end {
  width: min(var(--article-measure), calc(100vw - (2 * var(--article-gutter))));
  margin-right: auto;
  margin-left: auto;
}
.article-page .article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 22px;
  color: var(--article-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article-page .article-breadcrumb a,
.article-page .article-meta a { color: var(--article-link); }
.article-page .article-document-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--article-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-page .article-status { color: var(--article-accent); font-weight: 700; }
.article-page .art-head h1 {
  max-width: 18ch;
  margin: 0 0 20px;
  color: var(--article-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 7vw, 74px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.article-page .article-dek {
  max-width: 62ch;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  color: var(--article-muted);
  font-size: 21px;
  font-style: normal;
  line-height: 1.52;
}
.article-page .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  color: var(--article-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.article-page .article-meta > * + *::before {
  content: "·";
  margin-right: 20px;
  color: var(--article-rule);
}
.article-page .article-thesis {
  margin: 34px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--article-rule);
  border-left: 4px solid var(--article-accent);
  background: var(--article-raised);
  color: var(--article-ink);
  font-size: 17px;
  line-height: 1.6;
}
.article-page .article-thesis-label,
.article-page .article-toc-label {
  display: block;
  margin-bottom: 8px;
  color: var(--article-accent);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.article-page .article-toc {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--article-rule);
}
.article-page .article-toc ol {
  columns: 2;
  column-gap: 34px;
  margin: 0;
  padding-left: 20px;
  color: var(--article-muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}
.article-page .article-toc li { break-inside: avoid; margin: 0 0 8px; padding-left: 4px; }
.article-page .article-toc a { color: var(--article-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-page .article-body { padding-top: 54px; }
.article-page .article-body > p { margin-top: 0; margin-bottom: 25px; }
.article-page .article-body > p:first-child::first-letter {
  float: left;
  margin: 8px 9px 0 0;
  color: var(--article-accent);
  font-size: 66px;
  font-weight: 700;
  line-height: 0.72;
}
.article-page .article-body a,
.article-page .article-end a {
  color: var(--article-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-page .article-body strong { color: var(--article-ink); }
.article-page .article-body > h2 {
  scroll-margin-top: calc(var(--chrome-h) + 30px);
  margin-top: 64px;
  margin-bottom: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--article-rule);
  color: var(--article-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(29px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.article-page .article-body > ul,
.article-page .article-body > ol { margin-top: 0; margin-bottom: 28px; padding-left: 26px; }
.article-page .article-body li { margin: 9px 0; padding-left: 4px; }
.article-page .article-body blockquote {
  margin-top: 28px;
  margin-bottom: 28px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--article-accent);
  color: var(--article-muted);
  font-style: italic;
}
.article-page .article-body code {
  border: 1px solid #d7c9b1;
  background: var(--article-raised);
  color: #4f2f28;
}
.article-page .article-body pre {
  margin-top: 30px;
  margin-bottom: 34px;
  border: 1px solid #303740;
  border-radius: 2px;
  background: #1d2228;
  color: #f2ebdd;
}
.article-page .article-body pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
}
.article-page .article-body > .diagram,
.article-page .article-body > .scene3d-fig,
.article-page .article-body > .table-scroll {
  width: min(var(--article-measure), calc(100vw - (2 * var(--article-gutter))));
  margin: 38px auto 42px;
}
.article-page .diagram {
  padding: 24px 20px 16px;
  border: 1px solid #343b44;
  border-radius: 2px;
  background: #1d2228;
}
.article-page .raster-diagram { padding: 14px 14px 16px; background: #fff; }
.article-page .raster-diagram img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}
.plotwarden-lightbox-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.plotwarden-lightbox-trigger:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
#plotwarden-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: rgba(5, 8, 15, 0.98);
  overflow: auto;
}
#plotwarden-lightbox[open] {
  display: grid;
  place-items: center;
}
#plotwarden-lightbox::backdrop { background: rgba(5, 8, 15, 0.96); }
#plotwarden-lightbox-image {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 18px 64px rgba(0, 0, 0, 0.55);
}
.plotwarden-lightbox-close {
  position: fixed;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(5, 8, 15, 0.9);
  color: #fff;
  font: 300 32px/1 var(--sans);
  cursor: pointer;
}
.plotwarden-lightbox-close:hover { background: #1b2942; }
.plotwarden-lightbox-close:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  #plotwarden-lightbox { padding: 8px; }
  #plotwarden-lightbox-image {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .plotwarden-lightbox-close { top: 8px; right: 8px; }
}
.article-page .diagram::before,
.article-page .diagram::after { display: none; }
.article-page .diagram figcaption,
.article-page .scene3d-fig figcaption { color: #b9b1a5; }
.article-page .raster-diagram figcaption { color: var(--article-muted); }
.article-page .scene3d { border-radius: 2px 2px 0 0; background: #1d2228; }
.article-page .table-scroll {
  border: 1px solid var(--article-rule);
  border-radius: 2px;
  background: var(--article-raised);
}
.article-page article th {
  border-color: var(--article-rule);
  background: #eae0d0;
  color: var(--article-accent);
}
.article-page article td { border-color: #ded2bf; color: var(--article-ink); }
.article-page article tbody tr:hover { background: #f2e9dc; }
.article-page .callout {
  margin-top: 32px;
  margin-bottom: 34px;
  border: 1px solid var(--article-rule);
  border-left: 4px solid var(--article-accent);
  border-radius: 2px;
  background: var(--article-raised);
  color: var(--article-muted);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
}
.article-page .callout.delta { border-color: var(--article-rule); border-left-color: var(--article-focus); background: var(--article-raised); }
.article-page .callout-label { color: var(--article-accent); }
.article-page .callout.delta .callout-label { color: var(--article-focus); }
.article-page .callout.maturity { border-left-color: var(--article-focus); }
.article-page .callout.maturity .callout-label { color: var(--article-focus); }
.article-page .callout.evidence { border-left-color: #326b5b; }
.article-page .callout.evidence .callout-label { color: #326b5b; }
.article-page .callout.exit { border-left-color: #8c3f36; }
.article-page .callout.exit .callout-label { color: #8c3f36; }
.article-page .article-end { margin-top: 70px; }
.article-page .art-nav { border-color: var(--article-rule); }
.article-page .art-nav a {
  border-color: var(--article-rule);
  border-radius: 2px;
  background: var(--article-raised);
  color: var(--article-ink);
  text-decoration: none;
}
.article-page .art-nav a:hover { border-color: var(--article-accent); }
.article-page .art-nav a span { color: var(--article-muted); }
.article-page .collection-nav {
  padding-top: 30px; border-top: 1px solid var(--article-rule);
  font-family: var(--sans);
}
.article-page .collection-nav-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 32px; align-items: start; margin-bottom: 24px;
}
.article-page .collection-nav h2 {
  margin: 0; color: var(--article-ink); font-family: var(--article-serif);
  font-size: 30px; line-height: 1.1;
}
.article-page .collection-nav-head p {
  margin: 0; color: var(--article-muted); font-size: 15px; line-height: 1.6;
}
.article-page .collection-nav ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 0 0 20px; padding: 0; list-style: none;
}
.article-page .collection-nav li { margin: 0; }
.article-page .collection-nav li a {
  display: block; height: 100%; padding: 15px 17px;
  border: 1px solid var(--article-rule); background: var(--article-raised);
  color: var(--article-ink); text-decoration: none;
}
.article-page .collection-nav li a:hover { border-color: var(--article-accent); }
.article-page .collection-nav li a span {
  display: block; margin-bottom: 5px; color: var(--article-accent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article-page .collection-index-link { font-size: 14px; font-weight: 700; }
.article-page .bio {
  border-color: var(--article-rule);
  color: var(--article-muted);
  font-family: var(--sans);
  font-style: normal;
}
.article-page .site-foot { background: #1d2228; }

@media (max-width: 760px) {
  .article-page .article-journal { --article-gutter: 20px; padding: 0 0 54px; font-size: 17px; }
  .article-page .article-header { padding-top: 38px; padding-bottom: 34px; }
  .article-page .art-head h1 { font-size: clamp(38px, 12vw, 56px); }
  .article-page .article-dek { font-size: 18px; }
  .article-page .article-meta { display: grid; gap: 4px; }
  .article-page .article-meta > * + *::before { content: none; }
  .article-page .article-toc ol { columns: 1; }
  .article-page .article-body { padding-top: 38px; }
  .article-page .article-body > h2 { margin-top: 48px; }
  .article-page .article-body > .diagram,
  .article-page .article-body > .scene3d-fig,
  .article-page .article-body > .table-scroll { width: calc(100vw - (2 * var(--article-gutter))); }
  .article-page .collection-nav-head,
  .article-page .collection-nav ul { grid-template-columns: 1fr; }
  .article-page .collection-nav-head { gap: 10px; }
}

/* ---------- Making Room to Build: restrained field manual ---------- */
.series-making-room {
  --article-paper: #f5efe4;
  --article-raised: #fffdf8;
  --article-ink: #1c211f;
  --article-muted: #5e5b53;
  --article-rule: #c9baa2;
  --article-link: #075e68;
  --article-accent: #8a3b12;
  --article-focus: #005fcc;
}
.series-making-room .article-journal {
  --article-measure: var(--editorial-prose-max);
  font-family: Georgia, "Iowan Old Style", serif;
}
.series-making-room .article-example-kind {
  width: min(var(--article-measure), calc(100vw - (2 * var(--article-gutter))));
  margin: 0 auto 18px;
  color: var(--article-accent);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.series-making-room .article-body pre {
  max-width: 100%;
  overflow-x: auto;
  contain: inline-size;
  border-color: #2f3a45;
  background: #121920;
  color: #f4f7f8;
}

/* ---------- site footer ---------- */
.site-foot { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); padding: 36px 0 52px; }
.foot-inner {
  max-width: var(--chrome-maxw); margin: 0 auto; padding: 0 28px;
  display: grid; gap: 14px; justify-items: start;
  font-size: 13px; color: var(--muted); font-family: var(--mono);
  line-height: 1.6;
}
.foot-id { color: var(--ink); letter-spacing: 0.1em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-inner a { color: var(--muted); }
.foot-inner a:hover { color: var(--ink); }
.foot-net { color: var(--faint); font-size: 12px; letter-spacing: 0.04em; }
.foot-net a { color: var(--faint); }
.foot-net a:hover { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .cards, .entry-grid, .art-nav { grid-template-columns: 1fr; }
  .art-nav .next { text-align: left; }
  article { padding-top: 40px; }
  .hero { padding: 36px 0 48px; }
  .hero-sub { font-size: 17px; }
  /* the page never depends on the 3D scene: below 760px hero3d.js
     does not boot (no three.js, no models) and the canvas stays out of the
     way; the static backdrop and starfield carry the identity */
  #c-hero3d { display: none; }
  .hero-proof li { font-size: 10.5px; padding: 6px 9px; }
  .hero-more { font-size: 15px; }
  .hero-crest { width: 48px; height: 48px; margin-bottom: 14px; }
  /* compact card-stack rhythm on mobile: one shared 20px gutter for
     nav, hero, sections, articles, and footer */
  .wrap { padding: 44px 20px 52px; }
  .compactwrap { padding-top: 36px; padding-bottom: 36px; }
  .nav-inner, .hero-inner, .foot-inner { padding-left: 20px; padding-right: 20px; }
  .nav-inner { gap: 18px; }
  article { padding-left: 20px; padding-right: 20px; }
}

/* Ambient Agents series accents and working-document slot markers */
.sec-label.cyan { color: var(--cyan); }
.sec-label.cyan::before { background: var(--cyan); }
.series-chip.cyan, .series-chip.cyan a { color: var(--cyan); }
.sec-intro {
  max-width: 62ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 26px;
}
.cards.ambient .card-part { color: var(--cyan); }
.cards.ambient .card:hover { border-color: rgba(79, 216, 196, 0.55); }
mark.slot {
  background: none;
  color: var(--amber);
  border: 1px dashed rgba(255, 182, 72, 0.45);
  border-radius: 3px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 0.82em;
  white-space: nowrap;
}

/* ---------- author layer ---------- */

/* about page */
.hero.about {
  padding: 48px 0 56px;
  background:
    linear-gradient(180deg, rgba(5,8,15,0.6) 0%, rgba(5,8,15,0.93) 78%, var(--void) 100%),
    url("assets/backdrop-bridge.jpg") center 38% / cover no-repeat;
}
/* single-column lede, quiet availability line at its foot */
.about-lede { max-width: 80ch; }
.about-lede p { margin: 0 0 20px; font-size: 18px; }
.about-lede .avail-line { margin-top: 8px; }

/* career record: experience rows in the brittanychiang.com idiom
   (period | role · company, description, tech chips; quiet hover card) */
.xp-list { display: grid; gap: 4px; }
.xp-row {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  column-gap: 24px; padding: 18px 16px; margin: 0 -16px;
  border-radius: 6px; border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.xp-row:hover {
  background: rgba(11, 18, 32, 0.7);
  border-color: var(--line-soft);
}
.xp-when {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; text-transform: uppercase;
  color: var(--faint); padding-top: 4px; white-space: nowrap;
}
.xp-body { min-width: 0; }
.xp-role {
  margin: 0 0 8px; font-size: 16.5px; font-weight: 750;
  color: var(--ink); line-height: 1.4;
}
.xp-role .xp-org { color: var(--muted); font-weight: 650; }
.xp-row:hover .xp-role .xp-org { color: var(--cyan); }
.xp-note {
  margin: 0; max-width: 66ch;
  font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
.xp-tech {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.xp-tech li {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--cyan); background: rgba(79, 216, 196, 0.08);
  border: 1px solid rgba(79, 216, 196, 0.25);
  border-radius: 999px; padding: 4px 12px;
}
.xp-row:first-child .xp-when { color: var(--amber); }
.linkedin-detail {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; color: var(--blue); font-weight: 700; white-space: nowrap;
}
.linkedin-detail span {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; margin: 0; border-radius: 3px;
  background: var(--blue); color: var(--void);
  font-family: Arial, sans-serif; font-size: 11px; line-height: 1; font-weight: 800;
}

/* article bio link row */
.bio-links {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.05em; margin-top: 12px; color: var(--faint);
}
.bio-links a { color: var(--muted); }
.bio-links a:hover { color: var(--amber); }

@media (max-width: 760px) {
  /* stacked experience rows: period above the role */
  .xp-row { display: block; padding: 16px 12px; margin: 0 -12px; }
  .xp-when { padding-top: 0; margin-bottom: 6px; }
}

/* ---------- Jeff Sylvan brand chrome ---------- */

.brand-sub {
  display: inline-block; margin-left: 10px; font-weight: 400;
  font-size: 11px; letter-spacing: 0.08em; color: var(--faint);
  text-transform: none;
}

/* availability line: plain muted text at the end of the about lede */
.avail-line {
  margin: 26px 0 0; max-width: 74ch;
  font-size: 15px; color: var(--body); line-height: 1.65;
  padding-left: 16px; border-left: 2px solid var(--amber-dim);
}

/* related-project pointer card */
.pointer-card {
  margin: 0;
  border: 1px solid rgba(79, 216, 196, 0.4); border-radius: 6px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 30px 34px; max-width: 760px;
}
.pointer-card h2 {
  margin: 0 0 12px; color: var(--ink);
  font-size: 23px; font-weight: 800; letter-spacing: -0.01em;
}
.pointer-card p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.pointer-card .pointer-notes {
  margin: 16px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--faint);
}
.pointer-card .pointer-notes a { color: var(--muted); }
.pointer-card .pointer-notes a:hover { color: var(--cyan); }

/* compact section spacing (work-samples row and similar short strips) */
.compactwrap { padding-top: 44px; padding-bottom: 44px; }

@media (max-width: 1200px) {
  .brand-sub { display: none; }
}

/* ---------- compact chrome on small screens ---------- */
@media (max-width: 760px) {
  /* mirrors the shared network component's mobile offsets: 38px bar + 62px
     local nav */
  :root { --global-nav-h: 38px; --local-nav-h: 62px; }
  .nav-inner { gap: 12px; padding: 0 18px; }
  .brand { font-size: 12px; letter-spacing: 0.1em; }
  .nav-links {
    gap: 12px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; font-size: 15px; }
  .resume-link { font-size: 10.5px; padding: 5px 10px; }

  /* JS-enhanced disclosure menu replaces the scrollable row (the network
     bar's equivalent lives inside network-header.js). The button stays
     hidden without JS, so the row above remains the fallback. */
  nav.top.has-menu .local-menu-btn {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    background: var(--panel); color: var(--ink);
    border: 1px solid var(--line); border-radius: 4px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 7px 12px; cursor: pointer;
    min-height: 44px;
  }
  nav.top.has-menu .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 8px 10px 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
    overflow: visible;
    background: rgba(4, 7, 13, 0.98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
  }
  nav.top.has-menu.menu-open .nav-links { display: flex; }
  nav.top.has-menu .nav-links a {
    font-size: 12px; padding: 12px 10px; min-height: 44px;
    display: flex; align-items: center;
  }
  nav.top.has-menu .nav-links a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--amber); background: rgba(11, 18, 32, 0.7);
  }
}

/* ---------- evidence + operating components (index, about) ---------- */

/* evidence status table: proof-status ladder, measured before targets */
.ev-table { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ev-row {
  display: grid; grid-template-columns: 148px 1fr 200px; gap: 20px;
  padding: 16px 22px; align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.55), rgba(13, 21, 38, 0.35));
}
.ev-row:last-child { border-bottom: none; }
.ev-status {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  padding: 3px 9px; border: 1px solid; border-radius: 3px;
  justify-self: start; white-space: nowrap;
}
.ev-status.measured { color: var(--cyan); border-color: rgba(79, 216, 196, 0.55); background: rgba(79, 216, 196, 0.06); }
.ev-status.impl { color: var(--blue); border-color: rgba(110, 168, 255, 0.6); background: rgba(110, 168, 255, 0.06); }
.ev-status.shipped { color: var(--blue); border-color: rgba(110, 168, 255, 0.6); background: rgba(110, 168, 255, 0.06); }
.ev-status.target { color: var(--amber); border-color: rgba(255, 182, 72, 0.55); background: rgba(255, 182, 72, 0.06); }
.ev-status.proto { color: var(--muted); border-color: var(--line); border-style: dashed; }
.ev-claim { font-size: 15px; color: var(--muted); line-height: 1.6; }
.ev-claim b { color: var(--ink); font-weight: 650; }
.ev-proof {
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  justify-self: end; text-align: right; line-height: 1.9;
}
.ev-proof a {
  color: var(--muted); text-decoration: underline;
  text-decoration-color: rgba(255, 182, 72, 0.5); text-underline-offset: 3px;
}
.ev-proof a:hover { color: var(--amber); }

/* compact work-samples link row (replaces the break card grid) */
.samples-row { display: flex; flex-wrap: wrap; gap: 12px; }
.samples-row a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--body); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 14px; background: rgba(11, 18, 32, 0.6);
}
.samples-row a:hover { border-color: rgba(79, 216, 196, 0.6); color: var(--cyan); text-decoration: none; }

@media (max-width: 900px) {
  .impact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ev-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .ev-proof { justify-self: start; text-align: left; }
  .entry-grid, .work-cases { grid-template-columns: 1fr; }
  .read-row { margin: 0; padding: 12px 12px; }
}

/* contact form */
.contact-wrap { max-width: var(--maxw); }
.contact-hero {
  min-height: 232px;
  padding: 36px 0 40px;
  background-position: center 38%;
}
.contact-hero .hero-sub { max-width: 80ch; margin: 0; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) 280px;
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.contact-primary { min-width: 0; }
.contact-form {
  display: grid; gap: 18px;
  max-width: none; margin: 0; padding-top: 8px;
}
.contact-routes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; border: 0;
}
.contact-routes legend {
  grid-column: 1 / -1; margin-bottom: 2px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.route-card {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  min-height: 104px; cursor: pointer;
  border: 1px solid var(--control-line); border-radius: 5px;
  background: rgba(11, 18, 32, 0.72); padding: 18px;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.route-card:hover { border-color: var(--cyan); }
.route-card:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(79, 216, 196, 0.14);
}
.route-card:has(input:checked) {
  border-color: var(--cyan);
  background: var(--contact-selected-bg);
  box-shadow: inset 3px 0 0 var(--cyan);
}
.route-card:has(input:checked):focus-within {
  box-shadow: inset 3px 0 0 var(--cyan), 0 0 0 3px rgba(79, 216, 196, 0.14);
}
.route-card input { margin-top: 3px; accent-color: var(--cyan); }
.route-copy { min-width: 0; }
.route-index {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--cyan);
}
.route-card b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.route-card em {
  display: block; color: var(--muted); font-size: 13.5px; line-height: 1.55; font-style: normal;
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-form label:not(.route-card) {
  display: grid; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.contact-form input,
.contact-form textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--control-line); border-radius: 4px;
  background: rgba(5, 8, 15, 0.72); color: var(--ink);
  padding: 11px 12px; font: 16px/1.5 var(--sans);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: rgba(79, 216, 196, 0.72);
  box-shadow: 0 0 0 3px rgba(79, 216, 196, 0.12);
}
.contact-form.was-validated input:invalid,
.contact-form.was-validated textarea:invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(255, 93, 93, 0.12);
}
.hp-field {
  position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}
.contact-verification {
  display: grid; grid-template-columns: minmax(0, 220px) auto; gap: 14px;
  align-items: end; width: fit-content; max-width: 100%;
  border-left: 3px solid var(--cyan); padding-left: 14px;
}
.contact-verification label { min-width: 0; }
.captcha-question {
  color: var(--body); font-family: var(--sans); font-size: 14px;
  letter-spacing: 0; line-height: 1.45; text-transform: none;
}
.captcha-refresh {
  min-height: 44px; border: 1px solid var(--control-line); border-radius: 4px;
  background: transparent; color: var(--cyan); cursor: pointer; padding: 10px 14px;
  font: 700 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.captcha-refresh:hover:not(:disabled), .captcha-refresh:focus-visible {
  border-color: var(--cyan); background: rgba(79, 216, 196, 0.08);
}
.captcha-refresh:disabled { cursor: wait; opacity: 0.62; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.contact-submit {
  border: 0; border-radius: 3px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #10131a; background: var(--cyan);
  min-height: 44px; padding: 11px 18px; font-weight: 800;
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.contact-submit:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.contact-submit:disabled { cursor: wait; opacity: 0.62; transform: none; }
.contact-status {
  min-height: 1.4em; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5;
}
.contact-status[data-state="success"] { color: var(--cyan); }
.contact-status[data-state="error"] { color: #ff9a8a; }

.contact-trust {
  display: grid; gap: 0;
  border: 1px solid var(--control-line); border-radius: 6px;
  background: rgba(11, 18, 32, 0.72); padding: 22px;
}
.contact-trust-block { padding: 0 0 17px; margin: 0 0 17px; border-bottom: 1px solid var(--line-soft); }
.contact-trust-block > span {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--amber);
}
.contact-trust-block p { margin: 0; color: var(--body); font-size: 14.5px; line-height: 1.55; }
.contact-trust-links { display: grid; gap: 10px; }
.contact-trust-links a {
  display: inline-flex; align-items: center; width: fit-content;
  color: var(--cyan); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.04em;
}

@media (max-width: 959px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .contact-routes { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .contact-hero { min-height: 192px; padding: 28px 0 32px; }
  .contact-hero .hero-sub { max-width: 34ch; font-size: 16px; line-height: 1.5; }
  .contact-hero-focus { display: none; }
  .field-grid { grid-template-columns: 1fr; }
  .contact-verification { grid-template-columns: 1fr; width: auto; }
  .captcha-refresh { width: 100%; }
  .contact-actions { align-items: stretch; }
  .contact-submit { width: 100%; }
  .contact-status { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .route-card, .captcha-refresh, .contact-submit { transition: none; }
  .contact-submit:hover:not(:disabled) { transform: none; }
}

/* ---------- proof strip (hero evidence, directly under the hero) ---------- */
/* extra top breathing room so the hero and the strip read as two zones */
.proof-strip { padding-top: 72px; }
.proof-strip .hero-value { margin: 0; }
@media (max-width: 760px) {
  .proof-strip { padding-top: 52px; }
}

/* resume actions share the nav chip's amber-outline voice everywhere */
.ghost-btn.resume-accent {
  color: var(--amber);
  border-color: rgba(255, 182, 72, 0.5);
}
.ghost-btn.resume-accent:hover { border-color: var(--amber); color: var(--amber); }
.dl-icon { margin-right: 7px; vertical-align: -2px; }

/* LinkedIn buttons flex-align the badge so their height matches siblings
   and the badge centers optically against the uppercase label */
.li-btn { display: inline-flex; align-items: center; gap: 0.55em; }
.li-btn .li-mark {
  display: inline-flex; align-items: center; justify-content: center;
  overflow: visible; margin-left: 0; vertical-align: unset;
  /* em here is the badge's own reduced font-size: 0.76 x 12.5px x 1.38 = 13px */
  width: 1.38em; height: 1.38em; font-size: 0.76em; line-height: 1;
}

/* ---------- writing page: annotated engineering journal ---------- */
.writing-page {
  --writing-paper: #f6f2ea;
  --writing-surface: #fffcf7;
  --writing-ink: #17202a;
  --writing-text: #2d3742;
  --writing-muted: #5c6873;
  --writing-rule: #d6d0c4;
  --writing-accent: #8a3b12;
  --writing-link: #075e68;
  --writing-focus: #005fcc;
  --writing-dark: #111820;
  --writing-serif: Charter, "Iowan Old Style", Georgia, serif;
  --writing-sans: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --writing-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --maxw: 1200px;
  background: var(--writing-paper);
  color: var(--writing-text);
  font-family: var(--writing-serif);
}
.writing-page main { background: var(--writing-paper); }
.writing-page main a,
.writing-page .site-foot a { color: var(--writing-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.writing-page main a:hover,
.writing-page .site-foot a:hover { color: var(--writing-accent); }
.writing-page main a:focus-visible,
.writing-page main button:focus-visible,
.writing-page .archive-row:focus-visible {
  outline: 3px solid var(--writing-focus);
  outline-offset: 3px;
  border-radius: 0;
}
.writing-page ::selection { background: rgba(138, 59, 18, 0.16); }
.writing-page .skip-link {
  background: var(--writing-focus); color: #fff;
  font-family: var(--writing-sans); text-transform: none; letter-spacing: 0;
}

.writing-masthead {
  border-bottom: 1px solid var(--writing-rule);
  background: var(--writing-paper);
}
.writing-masthead__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 32px 64px;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 0.8fr);
  gap: 64px; align-items: end;
}
.writing-intro h1 {
  max-width: none; margin: 0;
  color: var(--writing-ink); font-family: var(--writing-serif);
  font-size: clamp(44px, 5.8vw, 68px); line-height: 0.98;
  font-weight: 700; letter-spacing: -0.045em;
}
.writing-intro h1::after {
  content: ""; display: block; width: 36px; height: 2px;
  margin-top: 28px; background: var(--writing-accent);
}
.writing-intro > p {
  max-width: 68ch; margin: 24px 0 0;
  color: var(--writing-text); font-size: 20px; line-height: 1.55;
}
.writing-credential {
  padding: 24px 0 0 40px; border-left: 1px solid var(--writing-rule);
  color: var(--writing-text);
}
.writing-credential p { margin: 0; font-size: 15px; line-height: 1.55; }
.writing-credential .writing-role {
  margin-bottom: 28px; color: var(--writing-ink);
  font-size: 17px; line-height: 1.42;
}
.writing-credential .writing-role::after {
  content: ""; display: block; width: 24px; height: 2px;
  margin-top: 18px; background: var(--writing-accent);
}

.editorial-series { background: var(--writing-paper); }
.editorial-series--working { border-top: 1px solid var(--writing-rule); }
.writing-frame { max-width: 1200px; margin: 0 auto; padding: 48px 32px 64px; }
.editorial-series--working .writing-frame { padding-top: 40px; }
.series-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px; align-items: end; margin-bottom: 16px;
}
.series-heading h2 {
  margin: 0; color: var(--writing-ink); font-family: var(--writing-serif);
  font-size: clamp(34px, 4vw, 48px); line-height: 1; font-weight: 700;
  letter-spacing: -0.035em;
}
.series-label, .series-state, .feature-label, .feature-index,
.feature-evidence, .archive-part, .archive-evidence, .archive-meta {
  font-family: var(--writing-mono); text-transform: uppercase;
  font-size: 13px; line-height: 1.45; letter-spacing: 0.065em;
}
.series-label { margin: 0 0 8px; color: var(--writing-accent); font-weight: 700; }
.series-state { margin: 0 0 3px; color: var(--writing-muted); white-space: nowrap; }
.series-progress { color: var(--writing-accent); font-weight: 700; }
.series-dek {
  max-width: 68ch; margin: 0 0 28px;
  color: var(--writing-muted); font-size: 17px; line-height: 1.6;
}

.editorial-feature {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 220px;
  gap: 32px; align-items: start; padding: 28px 16px 30px;
  border-top: 1px solid var(--writing-rule); border-bottom: 1px solid var(--writing-rule);
  background: var(--writing-surface);
}
.writing-page article.editorial-feature { max-width: none; margin: 0; }
.editorial-feature--thesis { border-top: 2px solid var(--writing-accent); }
.editorial-feature--ledger { margin-top: 0; border-bottom: 2px solid var(--writing-ink); }
.feature-index { display: grid; gap: 4px; color: var(--writing-accent); }
.feature-index span:first-child {
  color: var(--writing-ink); font-family: var(--writing-serif);
  font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums;
}
.feature-copy h3 {
  max-width: 30ch; margin: 4px 0 8px;
  color: var(--writing-ink); font-family: var(--writing-serif);
  font-size: clamp(25px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.025em;
}
.feature-copy h3 a, .archive-copy strong { color: var(--writing-link); }
.feature-copy > p:last-of-type {
  max-width: 68ch; margin: 0; color: var(--writing-text);
  font-size: 16px; line-height: 1.55;
}
.feature-label { margin: 0; color: var(--writing-accent); font-weight: 700; }
.feature-copy blockquote {
  max-width: 68ch; margin: 18px 0 0; padding: 0 0 0 16px;
  border-left: 2px solid var(--writing-rule); color: var(--writing-muted);
  font-size: 15px; line-height: 1.6;
}
.feature-evidence { display: grid; gap: 9px; color: var(--writing-muted); }
.evidence-label {
  display: inline-block; width: fit-content; color: var(--writing-accent);
  font-family: var(--writing-mono); font-size: 12px; line-height: 1.3;
  font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase;
}
.evidence-label--strong { padding: 5px 7px; color: #fff; background: var(--writing-dark); }

.archive-list { margin: 0; padding: 0; list-style: none; }
.archive-list li { border-bottom: 1px solid var(--writing-rule); }
.archive-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 160px 150px 24px;
  gap: 32px; align-items: center; min-height: 94px;
  padding: 18px 16px; color: var(--writing-text); text-decoration: none;
}
.archive-row:hover { background: rgba(255, 252, 247, 0.62); text-decoration: none; }
.archive-part { display: grid; gap: 5px; color: var(--writing-muted); }
.archive-number {
  color: var(--writing-ink); font-family: var(--writing-serif);
  font-size: 22px; line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.archive-copy strong {
  display: block; margin-bottom: 4px; font-family: var(--writing-serif);
  font-size: 19px; line-height: 1.25; font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.archive-copy > span:last-child {
  display: block; max-width: 68ch; color: var(--writing-muted);
  font-size: 15px; line-height: 1.5;
}
.archive-evidence { color: var(--writing-muted); }
.archive-meta { display: grid; gap: 4px; color: var(--writing-muted); text-align: right; }
.archive-meta > * { white-space: nowrap; }
.archive-arrow { color: var(--writing-ink); transition: transform 120ms ease, color 120ms ease; }
.archive-row:hover .archive-arrow { color: var(--writing-accent); transform: translateX(3px); }
.archive-list--working .archive-number,
.archive-list--working .evidence-label { color: var(--writing-link); }
.archive-part--collection .archive-number {
  font-family: var(--writing-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.065em; text-transform: uppercase;
}

.writing-page .site-foot {
  color: var(--writing-muted); background: var(--writing-paper);
  border-top: 1px solid var(--writing-rule);
}
.writing-page .foot-inner { padding: 28px 32px 36px; }
.writing-page .foot-id, .writing-page .foot-net {
  color: var(--writing-muted); font-family: var(--writing-mono); font-size: 12px;
}
.writing-page .foot-nav a, .writing-page .foot-net a { color: var(--writing-link); }
.writing-page .motion-toggle { display: none !important; }

@media (max-width: 1079px) {
  .writing-masthead__inner { grid-template-columns: 1fr; gap: 36px; padding-inline: 32px; }
  .writing-credential { max-width: 68ch; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--writing-rule); }
  .editorial-feature { grid-template-columns: 80px minmax(0, 1fr) 190px; gap: 24px; }
  .archive-row { grid-template-columns: 80px minmax(0, 1fr) 135px 140px 20px; gap: 24px; }
}
@media (max-width: 767px) {
  .writing-masthead__inner { padding: 52px 20px 44px; }
  .writing-intro > p { font-size: 18px; }
  .writing-frame { padding: 40px 20px 48px; }
  .series-heading { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .series-state { white-space: normal; }
  .editorial-feature {
    grid-template-columns: 60px minmax(0, 1fr); gap: 20px;
    padding: 24px 0 26px;
  }
  .feature-evidence { grid-column: 2; grid-template-columns: repeat(3, max-content); gap: 8px 14px; align-items: center; }
  .archive-row {
    grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 10px 16px;
    min-height: 0; padding: 20px 0;
  }
  .archive-part { align-self: start; }
  .archive-part > span:last-child { display: none; }
  .archive-copy { align-self: start; }
  .archive-evidence { grid-column: 2; }
  .archive-meta { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px 12px; text-align: left; }
  .archive-arrow { grid-column: 3; grid-row: 1 / span 3; }
  .writing-page .foot-inner { padding-inline: 20px; }
}
@media (max-width: 479px) {
  .writing-page { font-size: 17px; }
  .writing-masthead__inner { padding: 44px 16px 40px; }
  .writing-intro h1 { font-size: clamp(42px, 13vw, 56px); }
  .writing-intro > p { font-size: 17px; line-height: 1.65; }
  .writing-frame { padding: 36px 16px 44px; }
  .series-heading h2 { font-size: 36px; }
  .series-dek { font-size: 16px; }
  .editorial-feature { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .feature-index span:first-child { font-size: 22px; }
  .feature-evidence { grid-template-columns: 1fr; }
  .archive-row { grid-template-columns: 38px minmax(0, 1fr) 18px; gap-inline: 12px; }
  .archive-copy strong { font-size: 18px; }
  .writing-page .foot-inner { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .writing-page .archive-arrow { transition: none; }
}

#making-room-to-build {
  border-top: 2px solid var(--writing-accent);
}
#making-room-to-build .series-heading {
  grid-template-columns: minmax(0, 1fr) auto;
}
#making-room-to-build .archive-row--collection {
  grid-template-columns: minmax(120px, 0.65fr) minmax(0, 2.6fr) 150px 24px;
}
#making-room-to-build .archive-part--collection .archive-number {
  color: var(--writing-accent);
  font-family: var(--writing-mono);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  #making-room-to-build .series-heading { grid-template-columns: 1fr; }
  #making-room-to-build .archive-row--collection {
    grid-template-columns: minmax(0, 1fr) 18px;
  }
  #making-room-to-build .archive-part--collection,
  #making-room-to-build .archive-copy,
  #making-room-to-build .archive-meta { grid-column: 1; }
  #making-room-to-build .archive-part--collection { grid-row: 1; }
  #making-room-to-build .archive-copy { grid-row: 2; }
  #making-room-to-build .archive-meta { grid-row: 3; }
  #making-room-to-build .archive-arrow { grid-column: 2; grid-row: 1 / span 3; }
}

/* LinkedIn links carry the "in" mark instead of the external arrow */
.li-mark {
  /* inline-block + hidden overflow makes the box's bottom edge its baseline,
     so the icon bottom lines up with the bottom of the "LinkedIn" text */
  display: inline-block; overflow: hidden; vertical-align: baseline;
  width: 15px; height: 15px; line-height: 15px; text-align: center;
  margin-left: 7px; border-radius: 3px;
  background: var(--blue); color: var(--void);
  font-family: Arial, sans-serif; font-size: 10.5px;
  font-weight: 800; text-transform: none; letter-spacing: 0;
}

/* ---------- featured-proof case card ---------- */
.proof-card { max-width: none; }
.proof-card h3 {
  margin: 0 0 14px; color: var(--ink);
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; font-weight: 800;
}
.proof-card > p { max-width: 70ch; }
.claim-list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 12px;
}
.claim-list li {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px; align-items: baseline;
}
.claim-list li > span:last-child { color: var(--muted); font-size: 15px; line-height: 1.6; }
.proof-card .hero-actions { margin-top: 4px; }
@media (max-width: 760px) {
  .claim-list li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- background-motion control (WCAG 2.2.2 pause) ---------- */
.motion-toggle {
  margin-top: 6px; cursor: pointer;
  background: none; color: var(--faint);
  border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 10px;
}
.motion-toggle:hover { color: var(--muted); border-color: var(--faint); }
:root[data-motion="off"] .dg-flow,
:root[data-motion="off"] .dg-pulse { animation: none !important; }

/* ---------- dark-island scope: surfaces that stay dark in print/light ----------
   Diagrams and 3D scenes are authored against the near-black ground with
   low-alpha overlays; like code blocks, they keep their original dark
   backgrounds whatever the page ground is. */
.diagram, .scene3d-fig {
  --void: #05080f; --void-2: #070c16;
  --ink: #e9eef7; --body: #c3cede; --muted: #8b9cb5; --faint: #a8b3c6;
  --amber: #ffb648; --amber-dim: #c98a2e; --cyan: #4fd8c4;
  --blue: #6ea8ff; --red: #ff5d5d; --line: #1b2942; --panel: #0b1220;
}

/* ---------- print: recruiters forward PDFs; render light and quiet ---------- */
@media print {
  :root {
    --void: #ffffff; --void-2: #ffffff; --panel: #ffffff; --panel-2: #ffffff;
    --line: #dde2ec; --line-soft: #e7ebf3;
    --ink: #0f1a2e; --body: #2a3447; --muted: #5a6680; --faint: #7b8597;
    --amber: #a8461d; --amber-dim: #8a5a00;
    --cyan: #0e6e5c; --blue: #1d4ed8; --red: #a3321a;
  }
  body { background: #fff; padding-top: 0; }
  #stars, nav.top, .cc-network-nav, .skip-link, .motion-toggle,
  #c-hero3d, .scene3d-fig, #reader-root, .reader-block-control-slot,
  .hero-actions, .contact-form, .foot-nav, .foot-net { display: none !important; }
  .hero, .entry-hero, .hero.about, .subhero {
    background: #fff; min-height: 0; padding: 18px 0;
    border-bottom: 1px solid #dde2ec;
  }
  .hero::after { display: none; }
  .hero h1, .subhero h1 { color: #0f1a2e; }
  a { color: #1d4ed8; text-decoration: underline; }
  .card, .entry-card, .case-card, .impact-case, .read-row, .ev-row, .xp-row,
  .claim-list li { break-inside: avoid; }
  .card, .entry-card, .case-card, .pointer-card, .samples-row a, .route-card,
  .hero-outcomes li, .hero-proof li, .read-row { background: #fff; }
  .diagram {
    background: #0d1424; border-color: #dde2ec;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ---------- light scheme: match light-mode reading contexts ----------
   Heroes keep their dark identity treatment (scoped tokens below), the
   reading surfaces flip to a warm near-white ground. The network bar stays
   dark by design; it is the shared cross-site chrome. */
@media (prefers-color-scheme: light) {
  :root {
    --void: #f7f9fb; --void-2: #eef2f7; --panel: #ffffff; --panel-2: #f2f5fa;
    --line: #dde2ec; --line-soft: #e7ebf3;
    --ink: #0f1a2e; --body: #2a3447; --muted: #5a6680; --faint: #7b8597;
    --amber: #a8461d; --amber-dim: #8a5a00;
    --cyan: #0e6e5c; --blue: #1d4ed8; --focus: #0e6e5c; --red: #a3321a;
    --contact-selected-bg: rgba(14, 110, 92, 0.08);
  }
  #stars { display: none; }
  ::selection { background: rgba(168, 70, 29, 0.16); }
  nav.top {
    background: rgba(247, 249, 251, 0.9);
    border-bottom-color: var(--line);
  }
  nav.top.has-menu .nav-links { background: #ffffff; box-shadow: 0 18px 30px rgba(15, 26, 46, 0.12); }
  nav.top.has-menu .nav-links a[aria-current="page"] {
    background: #eef2f7;
    color: var(--ink);
  }
  .cc-network-nav {
    --ink: #e9eef7; --faint: #a8b3c6; --amber: #ffb648; --line: #1b2942;
  }
  /* heroes remain dark islands: their photos, scrims, chips, and buttons
     keep the identity treatment against the light page */
  .hero {
    --ink: #e9eef7; --body: #c3cede; --muted: #8b9cb5; --faint: #a8b3c6;
    --amber: #ffb648; --amber-dim: #c98a2e; --cyan: #4fd8c4;
    --blue: #6ea8ff; --line: #1b2942; --panel: #0b1220;
  }
  .cta-btn { color: #10131a; }
  section .cta-btn { background: var(--amber); color: #ffffff; }
  .hero .cta-btn { background: #ffb648; color: #10131a; }
  section .ghost-btn { background: #ffffff; }
  .hero .ghost-btn { background: rgba(5, 8, 15, 0.5); }
  .skip-link { background: #a8461d; color: #ffffff; }
  .card, .entry-card, .case-card, .pointer-card { background: #ffffff; }
  .samples-row a, .route-card, .contact-trust { background: #ffffff; }
  .hero-outcomes li { background: rgba(255, 255, 255, 0.75); }
  .read-row:hover { background: #eef2f7; }
  .read-row:hover b { color: var(--amber); }
  .contact-form input, .contact-form textarea { background: #ffffff; }
  .xp-row:hover { background: #ffffff; border-color: var(--line); }
  .xp-tech li {
    color: #0e6e5c; background: rgba(14, 110, 92, 0.07);
    border-color: rgba(14, 110, 92, 0.3);
  }
  .ev-status { border-color: currentColor; }
  article pre { background: #0d1424; border-color: var(--line); }
  article code { background: #eef2f7; border-color: var(--line); color: #2a3447; }
  article pre code { background: none; color: #d7dfeb; }
  article tbody tr:hover { background: rgba(168, 70, 29, 0.05); }
  .callout.delta { background: rgba(14, 110, 92, 0.05); }
}