/* ── Hadley Soffe · Systems Archive Design System ───────────────────
   CANONICAL SOURCE OF TRUTH — edit here, never the deployed copy.
   Ref. HS-SYS-000 · v1.5 · cool-neutral palette · May 2026.
   v1.0 → portfolio (live). v1.1 adds app/data primitives.
   v1.2 consolidates all page-specific <style> blocks.
   v1.3 adds hedcut portrait intro-row. v1.4 adds callout component.
   v1.5 adds careers Role Ledger (FIG. 03) component.
   Docs: system.html · History: CHANGELOG.md
   ──────────────────────────────────────────────────────────────────── */

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* — neutrals — */
  --paper:       #f3f4f5;   /* page ground */
  --surface:     #ebedee;   /* raised panels, hover, alt sections */
  --ink:         #1a1b1e;   /* headings, primary text — 15.6:1 */
  --text:        #45474a;   /* body copy — 8.5:1 */
  --text-soft:   #84868a;   /* secondary / meta — large or ornament only */
  --faint:       #c6c8c9;   /* decoration only — never text */

  /* — line system (vary weight + value inversely) — */
  --rule-hair:   #dadcdd;   /* 1px     — precise hairline */
  --rule-thick:  #e7e9ea;   /* 2.5–3px — soft structural band */
  --rule-strong: #45474a;   /* 1.5–2px — emphatic: pull-quotes, active, focus */

  /* — route colors · transit-map vocabulary — */
  --route-ink:   #1a1b1e;
  --route-rust:  #c4422a;
  --route-blue:  #3a5a8c;
  --route-green: #3d7a4a;
  --accent:      var(--route-rust);

  /* — type — */
  --mono: 'Space Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
  --t-display: clamp(40px, 6vw, 68px);
  --t-h1:      clamp(34px, 5vw, 56px);
  --t-h2:      clamp(24px, 3vw, 36px);
  --t-h3:      20px;
  --t-body:    14px;
  --t-small:   13px;   /* content floor — never smaller */
  --t-meta:    10px;   /* mono labels */
  --t-micro:   8.5px;  /* mono ornament — ref tags, FIG captions */

  /* — spacing · 4px base — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px;  --s-10: 96px;

  /* — motion — */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-mid:  0.3s;
  --dur-slow: 0.5s;

  /* — layout — */
  --col:      760px;
  --breakout: 1180px;
  --pad-x:    52px;
  --pad-x-sm: 24px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Patent graph-paper background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, var(--faint) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }

/* ── ACCESSIBILITY ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rule-strong);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.col {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.breakout {
  max-width: var(--breakout);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

main {
  position: relative;
  z-index: 1;
}

/* Major section divider — the soft structural band */
.section-rule { border-bottom: 3px solid var(--rule-thick); }

/* ── HEADER ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(243, 244, 245, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-hair);
  padding: 13px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
  text-decoration: none;
}

.identity-name {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.identity-tagline {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Pill nav */
.pill-nav {
  display: flex;
  gap: 6px;
}

.pill-nav a {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 8px 14px;
  border: 1px solid var(--rule-hair);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.pill-nav a::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--faint);
  transition: background var(--dur-fast) var(--ease);
}

.pill-nav a:hover {
  color: var(--ink);
  border-color: var(--text-soft);
}

.pill-nav a.is-active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.pill-nav a.is-active::before {
  background: var(--paper);
}

/* Mono back-link / breadcrumb */
.back-link {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--dur-fast) var(--ease);
}

.back-link::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
}

.back-link:hover { color: var(--ink); }

/* Forward link — same as back-link but with dash on the right */
.forward-link {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color var(--dur-fast) var(--ease);
}

.forward-link::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
}

.forward-link:hover { color: var(--ink); }

/* Case-study breadcrumb (Home / Case Studies) */
.case-nav {
  display: flex;
  gap: var(--s-5);
  align-items: center;
}

.header-ref {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-soft);
  text-transform: uppercase;
}

/* ── PATENT CHROME ──────────────────────────────────────────────── */
.fig-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.fig-label::after {
  content: '';
  height: 1px;
  background: var(--rule-hair);
  flex: 0 0 60px;
}

.type-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--text-soft);
  text-transform: uppercase;
}

/* ── PLATE — bordered figure box with corner FIG notch ──────────── */
.plate {
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  padding: var(--s-6);
  position: relative;
}

.plate[data-fig]::before {
  content: attr(data-fig);
  position: absolute;
  top: -1px;
  right: var(--s-6);
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

/* Status-notch variant — same notch, accent label (or muted, see modifier) */
.plate[data-status]::before {
  content: attr(data-status);
  position: absolute;
  top: -1px;
  right: var(--s-6);
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.plate--muted[data-status]::before { color: var(--text-soft); }

/* Stub / placeholder card — a plate with reading-width body copy */
.stub-card {
  margin-top: var(--s-7);
  padding: 36px var(--s-6);
}

.stub-card p {
  font-size: var(--t-body);
  color: var(--text);
  line-height: 1.8;
  max-width: 580px;
}

.stub-card p + p { margin-top: var(--s-4); }

/* ── METADATA GRID (case study header) ──────────────────────────── */
.cs-meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0;
  border: 1px solid var(--rule-hair);
  width: fit-content;
}

.meta-item {
  padding: var(--s-3) 22px;
  border-right: 1px solid var(--rule-hair);
}

.meta-item:last-child { border-right: none; }

.meta-label {
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--text-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.meta-value {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink);
  letter-spacing: 0.06em;
}

/* ── DIAGRAM PLATE ──────────────────────────────────────────────── */
.diagram-plate {
  border: 1px solid var(--rule-hair);
  padding: var(--s-7) var(--s-6) var(--s-6);
  position: relative;
}

.diagram-plate[data-fig]::before {
  content: attr(data-fig);
  position: absolute;
  top: -1px;
  right: var(--s-6);
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.diagram-legend {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-hair);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-text {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  text-transform: uppercase;
}

/* ── OUTCOME GRID ──────────────────────────────────────────────── */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-hair);
  border: 1px solid var(--rule-hair);
  margin: var(--s-6) 0;
}

.outcome-item {
  background: var(--paper);
  padding: 28px var(--s-5) var(--s-5);
}

.outcome-num {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}

.outcome-unit {
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--text-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.outcome-desc {
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* ── PULL QUOTE ─────────────────────────────────────────────────── */
.pull-quote {
  margin: var(--s-6) 0;
  padding: var(--s-5) 28px;
  border-left: 2px solid var(--rule-strong);
}

.pull-quote p {
  font-size: 15px;
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.005em;
  margin-bottom: 0;
}

.pull-quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ── CALLOUT — utility-glyph message box · HS-SYS-008 ───────────── */
.callout {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  margin: var(--s-3) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--rule-hair);
  border-left: 2px solid var(--rule-strong);
}

.callout-glyph {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-top: 1px;
}

.callout-glyph svg { display: block; width: 100%; height: 100%; }

.callout-body { flex: 1; min-width: 0; }

.callout-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 5px;
}

.callout-body p {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--text);
}

/* Hadley's margin note — dashed rule echoes the glyph dash motif */
.callout--note { border-left: 2px dashed var(--rule-strong); }
.callout--note .callout-label { color: var(--ink); }

/* ── BODY COPY ─────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

p {
  font-size: var(--t-body);
  color: var(--text);
  line-height: 1.85;
  letter-spacing: 0.01em;
}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn::after {
  content: '→';
  font-family: var(--mono);
  font-size: 12px;
}

.btn:hover { background: var(--text); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-hair);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--ink);
}

/* ── SOURCE / TOOL STRIP ────────────────────────────────────────── */
.source-strip {
  margin-top: var(--s-6);
  padding-top: 28px;
  border-top: 1px solid var(--rule-hair);
}

.source-strip-label {
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--text-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.source-logos {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  flex-wrap: wrap;
}

.source-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.62;
  transition: opacity var(--dur-fast) var(--ease);
  cursor: default;
}

.source-logo:hover { opacity: 1; }

.source-logo svg {
  width: 80px;
  height: 80px;
}

/* ── FOOTER ─────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
  padding: 22px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.footer-arc {
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
}

.footer-class {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
}

.footer-nav {
  display: flex;
  gap: var(--s-5);
}

.footer-nav a {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}

.footer-nav a:hover { color: var(--ink); }

/* ── MOBILE DRAWER + HAMBURGER ───────────────────────────────────── */
.nav-toggle { display:none; flex-direction:column; gap:4px; width:36px; height:36px;
  align-items:center; justify-content:center; background:transparent; cursor:pointer;
  border:1px solid var(--rule-hair); border-radius:7px; }
.nav-toggle span { display:block; width:16px; height:1.5px; background:var(--ink);
  transition:transform .25s var(--ease), opacity .25s var(--ease); }
html.nav-open .nav-toggle span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
html.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
html.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.nav-overlay { position:fixed; inset:0; z-index:300; background:rgba(26,27,30,.34);
  opacity:0; transition:opacity .3s var(--ease); }
html.nav-open .nav-overlay { opacity:1; }
.nav-drawer { position:fixed; top:0; right:0; bottom:0; z-index:320; width:min(80vw,300px);
  background:var(--paper); border-left:1px solid var(--rule-hair);
  display:flex; flex-direction:column; padding:20px;
  transform:translateX(100%); transition:transform .3s var(--ease); }
html.nav-open .nav-drawer { transform:translateX(0); }
.nav-drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nav-close { background:none; border:none; font-size:24px; line-height:1; color:var(--text-soft); cursor:pointer; padding:0 4px; }
.nav-drawer a { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-soft); padding:14px 6px; border-bottom:1px solid var(--rule-hair);
  transition:color var(--dur-fast) var(--ease); }
.nav-drawer a:hover,
.nav-drawer a.is-active { color:var(--ink); }
html.nav-open, html.nav-open body { overflow:hidden; }

/* ── CASE PAGER ──────────────────────────────────────────────────── */
.case-pager { display:flex; flex-wrap:wrap; gap:var(--s-5); justify-content:space-between;
  max-width:var(--breakout); margin:0 auto; padding:var(--s-6) var(--pad-x); border-top:1px solid var(--rule-hair); }
.case-pager a { font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-soft); transition:color var(--dur-fast) var(--ease); }
.case-pager a:hover { color:var(--ink); }

/* ── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes pulse      { 0%,100% { opacity: 1   } 50% { opacity: 0.18 } }
@keyframes pulse-slow { 0%,100% { opacity: 0.9 } 50% { opacity: 0.1  } }
.pulse      { animation: pulse      2.5s ease-in-out infinite; }
.pulse-slow { animation: pulse-slow 3.8s ease-in-out infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.fade-up { animation: fadeUp var(--dur-slow) var(--ease) both; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .site-header { padding-left: var(--pad-x-sm); padding-right: var(--pad-x-sm); }
  .site-footer {
    padding-left: var(--pad-x-sm);
    padding-right: var(--pad-x-sm);
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .col,
  .breakout    { padding-left: var(--pad-x-sm); padding-right: var(--pad-x-sm); }

  .pill-nav { display: none; }
  .nav-toggle { display: flex; }

  .cs-meta { grid-template-columns: repeat(2, auto); }
  .meta-item:nth-child(2) { border-right: none; }
  .meta-item:nth-child(3) { border-top: 1px solid var(--rule-hair); }

  .outcome-grid { grid-template-columns: 1fr; }
}

@media (min-width: 861px) {
  .nav-toggle, .nav-overlay, .nav-drawer { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.1 — APP / DATA PRIMITIVES
   Promoted from the HS-OB1 dashboard. Portfolio v1.0 was editorial /
   case-study oriented; v1.1 adds the vocabulary needed for data-dense
   surfaces — tables, plates, action buttons, dialogs. The editorial
   restraint of v1.0 carries over: ink for emphasis, route colors used
   sparingly for signal, mono uppercase for system-voice metadata.
   ═══════════════════════════════════════════════════════════════════ */

/* ── v1.1 TOKENS ────────────────────────────────────────────────── */
:root {
  --ease-fast: 180ms ease;   /* the workhorse hover/focus transition */
  --notch-offset: 32px;      /* where patent-plate notches sit from the right edge */
}

/* ── EDITORIAL HEADER ───────────────────────────────────────────────
   The page-opening pattern: ref kicker + display heading + reading-
   width subhead. Used at the top of every interior page.
   ────────────────────────────────────────────────────────────────── */
.editorial-header { display: block; }

.editorial-header .ref-tag,
.ref-tag {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--s-3);
}

.editorial-header h1,
.editorial-h1 {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-h1);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.editorial-header .subhead,
.editorial-subhead {
  margin-top: var(--s-3);
  font-size: var(--t-body);
  color: var(--text);
  line-height: 1.7;
  max-width: 60ch;
}

/* ── FIG DIVIDER ────────────────────────────────────────────────────
   Section break within a page: "FIG. XX ─────── TITLE" mono band.
   Pairs reference number + section name, separated by a hairline.
   ────────────────────────────────────────────────────────────────── */
.fig-divider {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.fig-divider__ref,
.fig-divider__title {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.fig-divider__rule {
  flex: 1;
  height: 1px;
  background: var(--rule-hair);
}

/* ── TYPE CHIP ──────────────────────────────────────────────────────
   The atom for type/status/metadata. Mono uppercase, hairline border,
   optional route-color dot. Editorial restraint: most chips are plain;
   route colors only earn their place on high-signal categories.
   ────────────────────────────────────────────────────────────────── */
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.type-chip__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--faint);
}

.type-chip--ink     .type-chip__dot { background: var(--route-ink);   }
.type-chip--rust    .type-chip__dot { background: var(--route-rust);  }
.type-chip--blue    .type-chip__dot { background: var(--route-blue);  }
.type-chip--green   .type-chip__dot { background: var(--route-green); }
.type-chip--neutral .type-chip__dot { background: var(--text-soft);   }

/* ── DATA PLATE ─────────────────────────────────────────────────────
   Bordered section for "a measured snapshot of something" — stats
   widgets, summary cards. Optional patent-plate notch via data-fig
   (faint) or data-status (accent). Internal subgrid uses hairline
   separation (gap: 1px on rule-hair bg) rather than borders, so
   panels read as one composition.
   ────────────────────────────────────────────────────────────────── */
.data-plate {
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  position: relative;
}

.data-plate[data-fig]::before,
.data-plate[data-status]::before {
  content: attr(data-fig);
  position: absolute;
  top: -1px;
  right: var(--notch-offset);
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.data-plate[data-status]::before {
  content: attr(data-status);
  color: var(--accent);
  letter-spacing: 0.18em;
}

.data-plate__subgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-hair);
}

.data-plate__panel {
  background: var(--paper);
  padding: var(--s-6);
}

@media (max-width: 860px) {
  .data-plate__subgrid { grid-template-columns: 1fr; }
}

/* ── DATA TABLE ─────────────────────────────────────────────────────
   The table aesthetic for data-dense rows. Mono uppercase column
   headers, hairline row dividers, ink content text, hover tint.
   ────────────────────────────────────────────────────────────────── */
.data-table-wrap {
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  font-size: var(--t-body);
  border-collapse: collapse;
}

.data-table thead tr {
  border-bottom: 1px solid var(--rule-hair);
}

.data-table th {
  text-align: left;
  padding: var(--s-3) var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.data-table tbody tr {
  border-top: 1px solid var(--rule-hair);
  transition: background-color var(--ease-fast);
}

.data-table tbody tr:first-child { border-top: 0; }

.data-table tbody tr:hover {
  background: rgba(26, 27, 30, 0.045);
}

.data-table td {
  padding: var(--s-3) var(--s-5);
  color: var(--text);
}

.data-table .data-table__primary {
  color: var(--ink);
}

.data-table .data-table__meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ── FIELD ──────────────────────────────────────────────────────────
   Form input pattern: square border, ink-focus, mono uppercase label
   above. Inputs, selects, and textareas all wear the same shell.
   ────────────────────────────────────────────────────────────────── */
.field { display: block; }

.field__label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.field__input,
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  padding: 10px var(--s-4);
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color var(--ease-fast);
}

.field__input::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: var(--text-soft); }

.field__input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}

/* ── ACTION BUTTONS — square family ─────────────────────────────────
   v1.0's .btn family is the pill CTA used on portfolio surfaces
   (hero, case-study end). v1.1 adds the square family for app/data
   surfaces — denser, inline, route-color signalling for confirm /
   destructive. Naming: .action (base) + modifier.
   ────────────────────────────────────────────────────────────────── */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 8px var(--s-4);
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition:
    border-color var(--ease-fast),
    background-color var(--ease-fast),
    color var(--ease-fast);
  cursor: pointer;
}

.action:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Primary — ink filled. Use for the page's headline action. */
.action--ink {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.action--ink:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--paper);
}

/* Confirmatory — green outline, invert on hover. Use for approve / keep. */
.action--confirm {
  border-color: color-mix(in oklab, var(--route-green) 40%, transparent);
  color: var(--route-green);
}

.action--confirm:hover {
  background: var(--route-green);
  border-color: var(--route-green);
  color: var(--paper);
}

/* Destructive — rust outline, invert on hover. Use for delete / reject. */
.action--destructive {
  border-color: color-mix(in oklab, var(--route-rust) 40%, transparent);
  color: var(--route-rust);
}

.action--destructive:hover {
  background: var(--route-rust);
  border-color: var(--route-rust);
  color: var(--paper);
}

/* Ghost is the base style (.action with no modifier). Alias for clarity. */
.action--ghost { /* identical to base .action */ }

/* ── DIALOG PLATE ───────────────────────────────────────────────────
   Modal aesthetic: ink/35 backdrop, centered patent plate with
   "CONFIRM" notch, ghost cancel + destructive primary. Same plate
   language as the page sections, scaled for focus.
   ────────────────────────────────────────────────────────────────── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 27, 30, 0.35);
  z-index: 50;
}

.dialog-plate {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-hair);
  padding: var(--s-7);
  width: 100%;
  max-width: 440px;
  margin: 0 var(--s-4);
}

.dialog-plate[data-status]::before {
  content: attr(data-status);
  position: absolute;
  top: -1px;
  right: var(--notch-offset);
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.dialog-plate__title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-h2);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.dialog-plate__rule {
  height: 1px;
  background: var(--rule-hair);
  margin-bottom: var(--s-5);
}

.dialog-plate__body {
  font-size: var(--t-body);
  color: var(--text);
  line-height: 1.7;
  margin-bottom: var(--s-6);
}

.dialog-plate__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
}

/* ═══════════════════════════════════════════════════════════════════
   v1.2 — PAGE-SPECIFIC COMPONENTS
   Consolidated from inline <style> blocks across the portfolio site.
   Each section is labeled with the page(s) that use it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── CASE STUDY CHROME ──────────────────────────────────────────────
   Shared by: case-study-openbrain, case-study-this-build,
              case-study-chargezoom, career-artifact
   ─────────────────────────────────────────────────────────────────── */

/* Subway route map — sticky section-progress nav */
.route-wrap {
  position: sticky;
  top: 44px;
  z-index: 100;
  background: rgba(243, 244, 245, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-hair);
  padding: 0 var(--pad-x);
}
.route-inner { max-width: var(--col); margin: 0 auto; padding: 18px 0; position: relative; }
.route-track { display: flex; align-items: center; justify-content: space-between; position: relative; }
.route-track::before {
  content: ''; position: absolute; top: 6px; left: 6px; right: 6px;
  height: 1px; background: var(--rule-hair);
}
.route-progress-line {
  position: absolute; top: 6px; left: 6px; height: 1px;
  background: var(--rule-strong); width: 0%;
  transition: width 0.45s var(--ease);
}
.station {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  position: relative; z-index: 1; cursor: pointer;
}
.station-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--faint); background: var(--paper);
  transition: border-color var(--dur-mid) var(--ease),
              background var(--dur-mid) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.station.passed .station-dot { border-color: var(--ink); background: var(--ink); }
.station.active .station-dot { border-color: var(--ink); background: var(--ink); transform: scale(1.2); }
.station-label {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-soft); white-space: nowrap;
  transition: color var(--dur-mid) var(--ease);
}
.station.passed .station-label { color: var(--text-soft); }
.station.active .station-label { color: var(--ink); }

/* Case study header and sections */
.cs-header {
  padding: 72px 0 var(--s-8);
  border-bottom: 3px solid var(--rule-thick);
  animation: fadeUp var(--dur-slow) var(--ease) both;
}
.cs-title {
  font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.025em;
  line-height: 1.05; margin-bottom: 12px;
}
.cs-sub {
  font-size: var(--t-body); color: var(--text); letter-spacing: 0.01em;
  margin-bottom: var(--s-7);
}
.cs-section { padding: 72px 0; border-bottom: 3px solid var(--rule-thick); }
.cs-section:last-of-type { border-bottom: none; padding-bottom: 96px; }
.cs-section h2 {
  font-size: 24px; font-weight: 300; letter-spacing: -0.015em;
  line-height: 1.2; margin-bottom: var(--s-5);
}
.cs-section p {
  font-size: var(--t-body); color: var(--text); line-height: 1.85;
  margin-bottom: var(--s-4); letter-spacing: 0.01em;
}
.cs-section p:last-of-type { margin-bottom: 0; }
.cs-section ul { margin: 0 0 var(--s-4) var(--s-5); padding: 0; list-style: disc; }
.cs-section ul li { font-size: var(--t-body); color: var(--text); line-height: 1.85; margin-bottom: var(--s-2); letter-spacing: 0.01em; }
.cs-section ul li strong { color: var(--ink); font-weight: 500; }

/* Outcome plate — base; column count set per case study */
.outcome-plate { padding: var(--s-6); margin-top: var(--s-3); }

@media (max-width: 860px) {
  .route-wrap { padding-left: var(--pad-x-sm); padding-right: var(--pad-x-sm); }
}

/* ── CASE STUDY · OPEN BRAIN (HS-CS-001) ───────────────────────────
   Unique: system section padding, four-state scrollytelling (FIG. 03)
   ─────────────────────────────────────────────────────────────────── */

#system {
  padding: 72px 0;
  border-bottom: 3px solid var(--rule-thick);
}

#reach {
  padding: 72px 0;
  border-bottom: 3px solid var(--rule-thick);
}

/* Four-state scrollytelling figure */
.fig-fourstate {
  --ff-burgundy: #5A1E22;
  --ff-burgundy-light: #8B4A52;
}
.fig-fourstate .ff-scrolly {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: var(--s-3);
}
.fig-fourstate .ff-text-col section {
  min-height: 90vh;
  padding: 22vh 0 6vh;
  border-top: 1px solid var(--rule-hair);
  transition: opacity 400ms var(--ease);
  opacity: 0.4;
}
.fig-fourstate .ff-text-col section:first-child { border-top: none; padding-top: 6vh; }
.fig-fourstate .ff-text-col section:last-child  { padding-bottom: 22vh; }
.fig-fourstate .ff-state-tag {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ff-burgundy);
  margin-bottom: 10px;
}
.fig-fourstate .ff-state-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--ink);
}
.fig-fourstate .ff-state-callout {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px;
}
.fig-fourstate .ff-state-prose {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 14px;
}
.fig-fourstate .ff-state-point {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule-hair);
}
.fig-fourstate .ff-state-point strong { color: var(--ink); font-weight: 400; }
.fig-fourstate .ff-diagram-col {
  position: sticky;
  top: 120px;
  align-self: start;
}
.fig-fourstate .ff-fig-plate {
  position: relative;
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  padding: 44px 24px 24px;
}
.fig-fourstate .ff-fig-notch {
  position: absolute;
  top: 0; right: 24px;
  transform: translateY(-50%);
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.fig-fourstate .ff-caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-hair);
}
.fig-fourstate .ff-caption strong { color: var(--ink); font-weight: 400; }
.fig-fourstate .ff-caption .ff-state-label {
  display: inline-block;
  margin-left: 10px;
  color: var(--ff-burgundy);
  transition: opacity 300ms var(--ease);
}

/* SVG keyframes */
@keyframes ff-pulse      { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
@keyframes ff-pulse-slow { 0%,100% { opacity: 1 } 50% { opacity: 0.4  } }
.fig-fourstate .ff-pulse      { animation: ff-pulse      2.6s ease-in-out infinite }
.fig-fourstate .ff-pulse-slow { animation: ff-pulse-slow 3.8s ease-in-out infinite }

/* State toggling */
.fig-fourstate svg #tier-0-capture, .fig-fourstate svg #tier-0-rule,
.fig-fourstate svg #cap-to-src-flow, .fig-fourstate svg #tier-1-source,
.fig-fourstate svg #tier-1-rule, .fig-fourstate svg #src-to-def-flow,
.fig-fourstate svg #tier-2-definitions, .fig-fourstate svg #tier-2-rule,
.fig-fourstate svg #def-to-out-flow, .fig-fourstate svg #tier-3-surfaces,
.fig-fourstate svg #tier-3-artifacts, .fig-fourstate svg #tier-3-rule {
  transition: opacity 520ms var(--ease);
}
.fig-fourstate[data-active-state="1"] .ff-text-col section[data-state="1"],
.fig-fourstate[data-active-state="2"] .ff-text-col section[data-state="2"],
.fig-fourstate[data-active-state="3"] .ff-text-col section[data-state="3"],
.fig-fourstate[data-active-state="4"] .ff-text-col section[data-state="4"] { opacity: 1; }

.fig-fourstate[data-active-state="2"] svg #tier-0-capture,
.fig-fourstate[data-active-state="2"] svg #tier-0-rule,
.fig-fourstate[data-active-state="2"] svg #cap-to-src-flow,
.fig-fourstate[data-active-state="2"] svg #tier-3-surfaces,
.fig-fourstate[data-active-state="2"] svg #tier-3-artifacts,
.fig-fourstate[data-active-state="2"] svg #tier-3-rule,
.fig-fourstate[data-active-state="2"] svg #def-to-out-flow { opacity: 0.22; }

.fig-fourstate[data-active-state="3"] svg #tier-2-definitions,
.fig-fourstate[data-active-state="3"] svg #tier-2-rule,
.fig-fourstate[data-active-state="3"] svg #src-to-def-flow,
.fig-fourstate[data-active-state="3"] svg #tier-3-surfaces,
.fig-fourstate[data-active-state="3"] svg #tier-3-artifacts,
.fig-fourstate[data-active-state="3"] svg #tier-3-rule,
.fig-fourstate[data-active-state="3"] svg #def-to-out-flow { opacity: 0.22; }

.fig-fourstate[data-active-state="4"] svg #tier-0-capture,
.fig-fourstate[data-active-state="4"] svg #tier-0-rule,
.fig-fourstate[data-active-state="4"] svg #cap-to-src-flow { opacity: 0.22; }

@media (max-width: 880px) {
  .fig-fourstate .ff-scrolly { grid-template-columns: 1fr; gap: 0; }
  .fig-fourstate .ff-diagram-col {
    order: -1; position: sticky; top: 88px;
    max-height: 60vh; overflow-y: auto;
    background: var(--paper); z-index: 5;
    border-bottom: 1px solid var(--rule-hair); margin-bottom: 16px;
  }
  .fig-fourstate .ff-fig-plate { padding: 28px 12px 16px; border: none; }
  .fig-fourstate .ff-text-col section { min-height: auto; padding: 6vh 0 2vh; opacity: 1; }
  .fig-fourstate .ff-state-title   { font-size: 22px; }
  .fig-fourstate .ff-state-callout { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-fourstate .ff-scrolly { grid-template-columns: 1fr; gap: 24px; }
  .fig-fourstate .ff-diagram-col { position: static; }
  .fig-fourstate .ff-text-col section { opacity: 1; min-height: auto; padding: 16px 0; }
  .fig-fourstate svg #tier-0-capture, .fig-fourstate svg #tier-0-rule,
  .fig-fourstate svg #cap-to-src-flow, .fig-fourstate svg #tier-1-source,
  .fig-fourstate svg #tier-1-rule, .fig-fourstate svg #src-to-def-flow,
  .fig-fourstate svg #tier-2-definitions, .fig-fourstate svg #tier-2-rule,
  .fig-fourstate svg #def-to-out-flow, .fig-fourstate svg #tier-3-surfaces,
  .fig-fourstate svg #tier-3-artifacts, .fig-fourstate svg #tier-3-rule {
    transition: none; opacity: 1 !important;
  }
  .fig-fourstate .ff-pulse, .fig-fourstate .ff-pulse-slow { animation: none; }
}
@media (prefers-contrast: more) {
  .fig-fourstate[data-active-state="2"] svg #tier-0-capture,
  .fig-fourstate[data-active-state="2"] svg #tier-0-rule,
  .fig-fourstate[data-active-state="2"] svg #cap-to-src-flow,
  .fig-fourstate[data-active-state="2"] svg #tier-3-surfaces,
  .fig-fourstate[data-active-state="2"] svg #tier-3-artifacts,
  .fig-fourstate[data-active-state="2"] svg #tier-3-rule,
  .fig-fourstate[data-active-state="2"] svg #def-to-out-flow,
  .fig-fourstate[data-active-state="3"] svg #tier-2-definitions,
  .fig-fourstate[data-active-state="3"] svg #tier-2-rule,
  .fig-fourstate[data-active-state="3"] svg #src-to-def-flow,
  .fig-fourstate[data-active-state="3"] svg #tier-3-surfaces,
  .fig-fourstate[data-active-state="3"] svg #tier-3-artifacts,
  .fig-fourstate[data-active-state="3"] svg #tier-3-rule,
  .fig-fourstate[data-active-state="3"] svg #def-to-out-flow,
  .fig-fourstate[data-active-state="4"] svg #tier-0-capture,
  .fig-fourstate[data-active-state="4"] svg #tier-0-rule,
  .fig-fourstate[data-active-state="4"] svg #cap-to-src-flow { opacity: 0.55; }
  .fig-fourstate .ff-text-col section { opacity: 0.7; }
}

/* ── CASE STUDY · META BUILD (HS-CS-002) ───────────────────────────
   Unique: workflow plate, substrate plate, agent grid, outcome (4-col)
   ─────────────────────────────────────────────────────────────────── */

.workflow-plate { padding: var(--s-7) var(--s-6) var(--s-6); margin-top: var(--s-2); }
.workflow-stages {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  position: relative;
  margin-top: var(--s-6);
}
.workflow-stages::before {
  content: ''; position: absolute; top: 8px;
  left: 6%; right: 6%; height: 1px; background: var(--ink);
}
.wf-stage { position: relative; padding-top: var(--s-5); text-align: center; }
.wf-stage::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
}
.wf-stage.is-active::before { background: var(--ink); }
.wf-stage-num  { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--text-soft); text-transform: uppercase; margin-bottom: 4px; }
.wf-stage-name { font-size: 13px; color: var(--ink); font-weight: 400; letter-spacing: -0.005em; }

.substrate-plate { padding: var(--s-7) var(--s-6) var(--s-6); margin-top: var(--s-2); }
.substrate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-2);
}
.substrate-card {
  border: 1px solid var(--rule-hair);
  padding: var(--s-4);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.substrate-card-name { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); }
.substrate-card-body { font-size: 12px; color: var(--text); line-height: 1.55; flex: 1; }
.substrate-card-body code { font-family: var(--mono); font-size: 11px; background: var(--surface); padding: 1px 5px; border-radius: 2px; }
.substrate-card-link { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease); margin-top: auto; }
.substrate-card-link:hover { color: var(--ink); }

.agent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.agent-card { border: 1px solid var(--rule-hair); padding: var(--s-4); background: var(--paper); }
.agent-card-role { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; }
.agent-card-name { font-size: 14px; color: var(--ink); font-weight: 400; letter-spacing: -0.005em; margin-bottom: 6px; }
.agent-card-desc { font-size: 12px; color: var(--text); line-height: 1.55; }

.outcome-plate .data-plate__subgrid { grid-template-columns: repeat(3, 1fr); }
.outcome-plate--4col .data-plate__subgrid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 760px) {
  .workflow-stages { grid-template-columns: repeat(4, 1fr); row-gap: var(--s-5); }
  .workflow-stages::before { display: none; }
  .substrate-grid { grid-template-columns: 1fr; }
  .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .outcome-plate .data-plate__subgrid { grid-template-columns: 1fr; }
  .outcome-plate--4col .data-plate__subgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ── CASE STUDY · CHARGEZOOM AVA (HS-CS-003) ───────────────────────
   Unique: AVA pipeline plate, outcome (3-col)
   ─────────────────────────────────────────────────────────────────── */

.ava-plate { padding: var(--s-7) var(--s-6) var(--s-6); margin-top: var(--s-2); }
.ava-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: var(--s-6);
}
.ava-stages::before {
  content: ''; position: absolute; top: 8px;
  left: 6%; right: 6%; height: 1px; background: var(--ink);
}
.ava-stage { position: relative; padding: var(--s-5) var(--s-3) 0; text-align: center; }
.ava-stage::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--ink);
}
.ava-stage-num  { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--text-soft); text-transform: uppercase; margin-bottom: 4px; }
.ava-stage-name { font-size: 13px; color: var(--ink); font-weight: 400; letter-spacing: -0.005em; margin-bottom: 6px; }
.ava-stage-desc { font-size: 11px; color: var(--text); line-height: 1.5; }

@media (max-width: 760px) {
  .ava-stages { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
  .ava-stages::before { display: none; }
}

/* ── CAREER ARTIFACT DETAIL ─────────────────────────────────────────
   Unique: diagram figures, placeholder, PDF affordance, missing state
   ─────────────────────────────────────────────────────────────────── */

.artifact-figure {
  border: 1px solid var(--rule-hair);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  margin-top: var(--s-3);
}
.artifact-figure img { width: 100%; max-height: 720px; object-fit: contain; display: block; background: var(--paper); }
.artifact-figure-caption {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 12px var(--s-4);
  border-top: 1px solid var(--rule-hair);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}
.artifact-figure + .artifact-figure { margin-top: var(--s-5); }

.artifact-figure--placeholder {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 1px 1px, var(--faint) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
  display: grid;
  place-items: center;
}
.artifact-placeholder-text { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); text-align: center; line-height: 1.7; }
.artifact-placeholder-text small { display: block; font-size: 9px; color: var(--faint); letter-spacing: 0.22em; margin-top: 4px; }

.artifact-pdf-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }

.artifact-missing { padding: 80px 0; text-align: center; }
.artifact-missing h1 { font-size: var(--t-h2); font-weight: 300; margin-bottom: var(--s-4); }

/* ── HOMEPAGE ───────────────────────────────────────────────────────
   Unique to: index.html
   ─────────────────────────────────────────────────────────────────── */

.hero {
  padding: 80px 0 88px;
  border-bottom: 3px solid var(--rule-thick);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: var(--breakout);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.hero-type {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.2em;
  color: var(--text-soft); text-transform: uppercase;
  margin-bottom: 26px; display: flex; align-items: center; gap: 14px;
}
.hero-type::after { content: ''; flex: 0 0 60px; height: 1px; background: var(--rule-hair); }
.hero-title { font-size: var(--t-display); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 24px; }
.hero-word  { transition: opacity 0.45s ease; }
.hero-lead  { font-size: 15px; color: var(--text); line-height: 1.7; letter-spacing: 0.005em; max-width: 460px; margin-bottom: 36px; }
.intro-row  { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.intro-row .hero-lead { margin-bottom: 0; }
.intro-portrait { width: 64px; height: 64px; flex-shrink: 0; display: block; }
.hero-cta   { display: flex; gap: 12px; flex-wrap: wrap; }

.map-plate { padding: 28px 28px 22px; background: var(--surface); }
.map-plate[data-fig]::before { right: 28px; }
.map-caption {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-hair);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.map-caption-label,
.map-caption-desc {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-soft);
}
.map-caption-desc { letter-spacing: 0.12em; }

.career-arc {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}

.career-arc-station {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  text-decoration: none;
}

.career-arc-station:hover { opacity: 1; }

/* tooltip */
.career-arc-station::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 4px 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.career-arc-station:hover::after { opacity: 1; }

.featured {
  padding: 80px 0 88px;
  border-bottom: 3px solid var(--rule-thick);
}
.featured-head {
  max-width: var(--breakout); margin: 0 auto 48px; padding: 0 var(--pad-x);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.featured-head h2 { font-size: 26px; font-weight: 300; letter-spacing: -0.015em; }

.case-grid {
  max-width: var(--breakout); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule-hair); border-left: 1px solid var(--rule-hair);
}
.case-card {
  border-right: 1px solid var(--rule-hair); border-bottom: 1px solid var(--rule-hair);
  padding: 24px 24px 22px; display: flex; flex-direction: column;
  gap: 0; min-height: 340px;
  transition: background var(--dur-mid) var(--ease);
}
.case-card:hover { background: var(--surface); }
.case-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.case-card-meta { display: flex; flex-direction: column; gap: 6px; }
.case-card-num    { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-soft); text-transform: uppercase; }
.case-card-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); }
.case-card-status .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--faint); }
.case-card-status--published .dot { border-color: var(--ink); background: var(--ink); }
.case-card-status--in-progress .dot { border-color: var(--accent); background: var(--accent); }
.case-card-status--in-progress     { color: var(--accent); }
.case-card-status--planned   .dot  { border-color: var(--faint); background: transparent; }
.case-card-minimap {
  position: relative; border: 1px solid var(--rule-hair);
  padding: 10px 12px 8px; width: 110px; flex: 0 0 auto;
}
.case-card-minimap::before {
  content: 'FIG. 02'; position: absolute; top: -1px; right: 10px;
  background: var(--paper); padding: 0 8px;
  font-family: var(--mono); font-size: 6.5px; color: var(--faint);
  letter-spacing: 0.16em; text-transform: uppercase; transform: translateY(-50%);
}
.case-card-minimap svg { display: block; width: 100%; height: auto; }
.case-card-minimap-cap { font-family: var(--mono); font-size: 6px; letter-spacing: 0.16em; color: var(--text-soft); text-transform: uppercase; text-align: center; margin-top: 4px; }
.case-card-cat   { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; }
.case-card-title { font-size: var(--t-h3); font-weight: 300; letter-spacing: -0.012em; line-height: 1.15; color: var(--ink); margin-bottom: 10px; }
.case-card-desc  { font-size: var(--t-small); color: var(--text); line-height: 1.6; }
.case-card-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule-hair); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.case-card-stations { flex: 1; max-width: 180px; }
.case-card-stations svg { display: block; width: 100%; height: auto; }
.case-card-link { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); display: inline-flex; align-items: center; gap: 8px; transition: color var(--dur-fast) var(--ease); white-space: nowrap; }
.case-card-link::after { content: '→'; }
.case-card:hover .case-card-link { color: var(--ink); }
.case-card.is-stub     { opacity: 0.7; }
.case-card.is-stub .case-card-link { color: var(--text-soft); }

.notes { padding: 0 0 80px; }
.notes-inner { position: relative; max-width: var(--col); margin: 0 auto; padding: 0 var(--pad-x); min-height: 176px; }

/* ── MARGIN ANNOTATION ─ HS-SYS · figure-annotation treatment ───────
   A figure caption demoted to marginalia: a compact note set off the
   main reading axis, joined to the rule or figure it describes by a
   thin hooked leader with a terminal dot. Used on the homepage Design
   notes block and the careers FIG. 02 arc. */
.fig-anno__leader { position: absolute; display: block; overflow: visible; }
.fig-anno__note   { width: 236px; }
.fig-anno__kicker {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 9px;
}
.fig-anno__text {
  font-size: 12px; font-weight: 300; color: var(--text); line-height: 1.65;
}
.fig-anno__text em { font-style: normal; color: var(--ink); }

/* homepage — Design notes hangs off the Featured section rule */
.notes .fig-anno__leader { top: 0; right: 236px; }
.notes .fig-anno__note   { position: absolute; top: 46px; right: 0; }

/* careers — FIG. 02 caption points down into the arc rail */
.fig-anno--careers { position: relative; padding-top: 104px; }
.fig-anno--careers .arc-rail { margin-top: 0; }
.fig-anno--careers .fig-anno__leader { top: 0; right: 236px; }
.fig-anno--careers .fig-anno__note   { position: absolute; top: 0; right: 0; }

@media (max-width: 760px) {
  .notes-inner { min-height: 0; }
  .notes .fig-anno__note,
  .fig-anno--careers .fig-anno__note { position: static; width: auto; max-width: 100%; margin-top: var(--s-5); }
  .fig-anno__leader { display: none; }
  .fig-anno--careers { padding-top: var(--s-6); }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .case-grid  { grid-template-columns: 1fr; border-left: 0; border-top: 0; }
  .case-card  { border-left: 1px solid var(--rule-hair); border-top: 1px solid var(--rule-hair); }
}
@media (max-width: 600px) {
  .hero          { padding: 56px 0 64px; }
  .hero-title    { font-size: clamp(32px, 9vw, 44px); }
  .featured-head { padding: 0 var(--pad-x-sm); }
  .case-grid     { padding: 0 var(--pad-x-sm); }
}

/* ── SHARED INDEX STYLES ────────────────────────────────────────────
   Shared by: cases.html, careers.html
   ─────────────────────────────────────────────────────────────────── */

.index-wrap { padding: var(--s-9) 0 var(--s-10); }
.index-wrap .editorial-header { margin-bottom: var(--s-7); }
.index-wrap .editorial-header h1 {
  font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.025em;
  line-height: 1.05; margin: 14px 0 18px;
}
.index-title { font-size: var(--t-h3); font-weight: 300; letter-spacing: -0.012em; line-height: 1.25; color: var(--ink); }
.is-stub { opacity: 0.6; }

/* ── AI SYSTEMS INDEX ───────────────────────────────────────────────
   Unique to: cases.html — uses .cases-list on the <section>
   ─────────────────────────────────────────────────────────────────── */

.cases-list .index-row {
  display: grid;
  grid-template-columns: 100px 1fr 200px 120px;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule-hair);
  color: inherit;
  transition: padding-left var(--dur-fast) var(--ease);
}
.cases-list .index-row:last-of-type { border-bottom: 1px solid var(--rule-hair); }
.cases-list .index-row:hover { padding-left: var(--s-2); }
.index-num    { font-family: var(--mono); font-size: var(--t-meta); color: var(--text-soft); letter-spacing: 0.14em; text-transform: uppercase; }
.index-cat    { font-family: var(--mono); font-size: 8px; color: var(--text-soft); letter-spacing: 0.16em; text-transform: uppercase; }
.index-status { justify-self: end; }

@media (max-width: 720px) {
  .cases-list .index-row { grid-template-columns: 60px 1fr; gap: var(--s-4); }
  .index-cat, .index-status { display: none; }
}

/* ── CAREER DIAGRAMS INDEX ──────────────────────────────────────────
   Unique to: careers.html — uses .careers-list on the <section>
   ─────────────────────────────────────────────────────────────────── */

.careers-list .index-row {
  display: grid;
  grid-template-columns: 80px 1fr 120px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule-hair);
  color: inherit;
  text-decoration: none;
  transition: padding-left var(--dur-fast) var(--ease);
}
.careers-list .index-row:last-of-type { border-bottom: 1px solid var(--rule-hair); }
.careers-list .index-row:hover { padding-left: var(--s-2); }
.careers-list .index-row:hover .index-preview { filter: saturate(1.06); }

.index-preview {
  width: 80px; height: 56px; flex-shrink: 0;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid var(--rule-hair);
  overflow: hidden;
  transition: filter var(--dur-fast) var(--ease);
}
.index-preview--paypal      { background-image: url('assets/diagrams/paypal-dispute-flow-simple.png'); background-position: 18% 30%; background-size: 420% auto; }
.index-preview--matchfactor { background-image: url('assets/diagrams/nav-matchfactor.png'); background-position: 39% 43%; background-size: 420% auto; }
.index-preview--alerts      { background-image: url('assets/diagrams/nav-alerts.png'); background-position: 78% 30%; background-size: 550% auto; }
.index-preview--story-map   { background-image: url('assets/diagrams/user-story-mapping-thumb.jpg'); background-position: 83% 22%; background-size: 320% auto; }
.index-preview--placeholder {
  background-image: radial-gradient(circle at 1px 1px, var(--faint) 1px, transparent 1px);
  background-size: 14px 14px; background-color: var(--paper);
  display: grid; place-items: center;
}
.index-placeholder-label { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.18em; color: var(--faint); text-transform: uppercase; text-align: center; line-height: 1.5; }

.index-prov { margin-top: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.index-year { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); text-align: right; white-space: nowrap; }

.index-mark { display: flex; justify-content: flex-end; margin-bottom: var(--s-2); }
.index-mark svg { width: 32px; height: 32px; display: block; }

.arc-rail { margin-top: var(--s-9); padding: var(--s-6) 0; border-top: 3px solid var(--rule-thick); border-bottom: 3px solid var(--rule-thick); }
.arc-rail .stations {
  display: grid; grid-template-columns: repeat(6, 1fr);
  align-items: start; gap: 0; position: relative;
  margin: var(--s-5) 0 var(--s-2);
}
.arc-rail .stations::before {
  content: ''; position: absolute; top: 16px; left: 6%; right: 6%;
  height: 1px; background: var(--rule-hair);
}
.arc-station { position: relative; text-align: center; }
.arc-station-mark { display: flex; justify-content: center; align-items: center; margin-bottom: var(--s-3); }
.arc-station-mark svg { width: 32px; height: 32px; display: block; background: var(--paper); }
.arc-station-mark svg text { display: none; }
.arc-station--active .arc-station-mark { display: inline-flex; margin: 0 auto var(--s-3); padding: 6px; border: 1.5px solid var(--ink); background: var(--paper); }
.arc-station--active .arc-station-mark svg { width: 48px; height: 48px; }
.arc-station--active .arc-station-name { font-weight: 500; }
.arc-station-year { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--text-soft); text-transform: uppercase; margin-bottom: 4px; }
.arc-station-name { font-size: var(--t-small); color: var(--ink); font-weight: 400; letter-spacing: -0.005em; }

@media (max-width: 720px) {
  .cr-index-row { grid-template-columns: 80px 1fr; }
  .cr-index-year { display: none; }
}
@media (max-width: 480px) {
  .cr-index-row { grid-template-columns: 1fr; }
  .cr-index-preview { display: none; }
}
@media (max-width: 760px) {
  .arc-rail .stations { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); }
  .arc-rail .stations::before { display: none; }
}

/* ── CAREERS PAGE — LONG-ARC NARRATIVE + ROLE LEDGER ────────────────
   Unique to: careers.html — W1.5 · FIG. 03 six-card role ledger
   ─────────────────────────────────────────────────────────────────── */

.long-arc {
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  max-width: 580px;
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  margin-bottom: var(--s-7);
}

/* Overlay link pattern for index rows that also carry a role up-link */
.careers-list .index-row { position: relative; }

.cr-artifact-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cr-role-ref {
  display: block;
  margin-top: var(--s-2);
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition: color var(--dur-fast) var(--ease);
}
.cr-role-ref:hover { color: var(--ink); }

/* Role Ledger (FIG. 03) */
.role-card {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: var(--s-6);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--rule-hair);
  position: relative;
}
.role-card:last-of-type { border-bottom: 1px solid var(--rule-hair); }

.role-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 7px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.role-card__mark svg { width: 48px; height: 48px; display: block; }

.role-card__dates {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: var(--s-3);
}

.role-card__index {
  position: absolute;
  top: var(--s-7);
  right: 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  color: var(--faint);
}

.role-card__company {
  font-size: var(--t-h3);
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.2;
}

.role-card__title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--ink);
  margin-top: var(--s-2);
  line-height: 1.5;
  max-width: 560px;
}
.role-card__title .arrow { color: var(--faint); margin: 0 5px; }

.role-card__context {
  font-size: var(--t-small);
  color: var(--text-soft);
  margin-top: var(--s-3);
  max-width: 540px;
  line-height: 1.55;
}

.role-card__impact { list-style: none; margin-top: var(--s-4); }
.role-card__impact li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text);
  max-width: 560px;
  margin-bottom: var(--s-2);
}
.role-card__impact li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

.role-card__links {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}

.role-card__link {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-hair);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease);
}
.role-card__link .lbl { color: var(--faint); }
.role-card__link:hover { border-color: var(--ink); }

@media (max-width: 640px) {
  .role-card { grid-template-columns: 1fr; gap: var(--s-4); }
  .role-card__index { position: static; display: block; margin-bottom: var(--s-2); }
  .long-arc { font-size: 17px; }
}

/* ── ARTWORK GALLERY ────────────────────────────────────────────────
   Unique to: artwork.html
   ─────────────────────────────────────────────────────────────────── */

.gallery-wrap { padding: var(--s-9) 0 var(--s-10); }
.gallery-wrap .editorial-header { margin-bottom: var(--s-7); }
.gallery-wrap .editorial-header h1 {
  font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.025em;
  line-height: 1.05; margin: 14px 0 18px;
}

.catalog-plate { margin: var(--s-7) 0 var(--s-8); }

.plate-grid {
  max-width: var(--breakout); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
}
.plate { padding: 18px 18px 16px; }
.plate[data-fig]::before { right: 18px; font-size: 7.5px; padding: 0 10px; }

.plate-num { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; }

.plate-img-wrap {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule-hair);
  display: flex; align-items: center; justify-content: center;
}
.plate-img-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--faint) 0, var(--faint) 8px, transparent 8px),
    linear-gradient(to bottom, var(--faint) 0, var(--faint) 8px, transparent 8px),
    linear-gradient(to left,   var(--faint) 0, var(--faint) 8px, transparent 8px),
    linear-gradient(to top,    var(--faint) 0, var(--faint) 8px, transparent 8px);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top left, top left, bottom right, bottom right;
  background-repeat: no-repeat; opacity: 0.6;
}
.plate-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.35s var(--ease); }
a.plate-link:hover .plate-img-wrap img { transform: scale(1.03); }

.plate-caption { margin-top: 14px; padding-top: var(--s-3); border-top: 1px solid var(--rule-hair); display: flex; flex-direction: column; gap: 8px; }
.plate-title   { font-size: 17px; font-weight: 300; letter-spacing: -0.012em; line-height: 1.2; color: var(--ink); }
.plate-medium  { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.plate-tags    { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.gallery-wrap .fig-divider { max-width: var(--breakout); margin: var(--s-9) auto var(--s-6); padding: 0 var(--pad-x); }
.gallery-wrap .fig-divider + .plate-grid { margin-top: 0; }

a.plate-link { display: block; text-decoration: none; color: inherit; }

.gallery-foot { max-width: var(--breakout); margin: var(--s-9) auto 0; padding: 0 var(--pad-x); }
.gallery-foot-card { border: 1px dashed var(--rule-hair); padding: 28px var(--s-6); position: relative; }
.gallery-foot-card::before {
  content: 'In progress'; position: absolute; top: -1px; right: var(--s-6);
  background: var(--paper); padding: 0 12px;
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase;
  transform: translateY(-50%);
}
.gallery-foot-card p { font-size: var(--t-small); color: var(--text); max-width: 580px; line-height: 1.7; }

@media (max-width: 960px) { .plate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .plate-grid { grid-template-columns: 1fr; padding: 0 var(--pad-x-sm); }
  .gallery-foot,
  .gallery-wrap .fig-divider { padding: 0 var(--pad-x-sm); }
}

/* ── DESIGN SYSTEM PAGE ─────────────────────────────────────────────
   Unique to: system.html
   ─────────────────────────────────────────────────────────────────── */

.sys-hero { padding: 72px 0 var(--s-8); border-bottom: 3px solid var(--rule-thick); }
.sys-hero h1 { font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; margin: 14px 0 18px; }
.sys-hero p  { max-width: 560px; }

.sys-section { padding: 64px 0; border-bottom: 3px solid var(--rule-thick); }
.sys-section:last-of-type { border-bottom: none; }
.sys-section h2 { font-size: var(--t-h2); font-weight: 300; letter-spacing: -0.018em; line-height: 1.18; margin-bottom: 10px; }
.sys-lead { font-size: var(--t-small); color: var(--text); max-width: 580px; margin-bottom: var(--s-6); }
.sub-label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); margin: var(--s-6) 0 var(--s-3); }

.swatch-set { border: 1px solid var(--rule-hair); }
.swatch { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--rule-hair); }
.swatch:last-child { border-bottom: none; }
.swatch-chip { width: 96px; flex-shrink: 0; border-right: 1px solid var(--rule-hair); }
.swatch-body { padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.swatch-name { font-family: var(--mono); font-size: var(--t-small); color: var(--ink); }
.swatch-hex  { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-soft); letter-spacing: 0.06em; }
.swatch-role { font-size: 12px; color: var(--text); flex-basis: 100%; line-height: 1.5; }

.line-row { display: flex; align-items: center; gap: var(--s-4); padding: 15px 0; border-bottom: 1px solid var(--rule-hair); }
.line-row:last-child { border-bottom: none; }
.line-sample { width: 160px; flex-shrink: 0; }
.line-name   { font-family: var(--mono); font-size: var(--t-small); color: var(--ink); }
.line-spec   { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-soft); margin-top: 3px; }
.line-role   { font-size: 12px; color: var(--text); margin-top: 4px; line-height: 1.5; }

.scale-row { display: flex; align-items: baseline; gap: var(--s-5); padding: 13px 0; border-bottom: 1px solid var(--rule-hair); }
.scale-row:last-child { border-bottom: none; }
.scale-token  { font-family: var(--mono); font-size: var(--t-meta); color: var(--text-soft); width: 116px; flex-shrink: 0; letter-spacing: 0.04em; }
.scale-sample { color: var(--ink); font-weight: 300; letter-spacing: -0.01em; }
.scale-note   { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-soft); margin-left: auto; }
.space-bar    { height: 14px; background: var(--rule-strong); }

.demo     { border: 1px solid var(--rule-hair); background: var(--surface); padding: var(--s-6); margin-top: var(--s-3); }
.demo-row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }

.principle { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-4); padding: 22px 0; border-bottom: 1px solid var(--rule-hair); }
.principle:last-child  { border-bottom: none; }
.principle-num { font-family: var(--mono); font-size: var(--t-meta); color: var(--faint); padding-top: 3px; }
.principle h3  { font-size: 16px; font-weight: 400; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.principle p   { font-size: var(--t-small); }

/* Glyph sheet (HS-SYS-003) — burgundy palette scoped to .glyph-sheet */
.glyph-sheet {
  --g-paper: #F7F5F2; --g-ink: #5A1E22; --g-ink2: #8B4A52; --g-rule: #D9C3C5;
  background: var(--g-paper); border: 1px solid var(--g-rule); margin-top: var(--s-3);
}
.glyph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--g-rule); }
.glyph-cell { background: var(--g-paper); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 14px 20px; transition: background 0.2s var(--ease); }
.glyph-cell:hover { background: #EFE4E5; }
.glyph-cell svg { display: block; }
.glyph-meta { text-align: center; }
.glyph-name { font-size: 9px; letter-spacing: 0.14em; color: var(--g-ink); text-transform: uppercase; margin-bottom: 4px; font-family: var(--mono); }
.glyph-ref  { font-size: 7.5px; letter-spacing: 0.16em; color: var(--g-ink2); font-family: var(--mono); }
.glyph-sheet-foot { padding: 16px 20px; border-top: 1px solid var(--g-rule); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--g-ink2); text-transform: uppercase; line-height: 1.8; }

@media (max-width: 720px) { .glyph-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .swatch-chip { width: 64px; }
  .scale-token { width: 92px; }
  .line-sample { width: 110px; }
}

/* ── GLYPH SHEET CHROME ──────────────────────────────────────────── */
.glyph-sheet-body { padding: 52px; }

/* ── PAINTING PLATE LAYOUT ───────────────────────────────────────── */
.plate-wrap {
  max-width: var(--breakout);
  margin: 0 auto;
  padding: var(--s-9) var(--pad-x) var(--s-10);
}

.plate-body {
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: var(--s-6);
  align-items: start;
  margin-bottom: var(--s-7);
}

.main-img-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule-hair);
  overflow: hidden;
}

.main-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--faint) 0, var(--faint) 10px, transparent 10px),
    linear-gradient(to bottom, var(--faint) 0, var(--faint) 10px, transparent 10px),
    linear-gradient(to left,   var(--faint) 0, var(--faint) 10px, transparent 10px),
    linear-gradient(to top,    var(--faint) 0, var(--faint) 10px, transparent 10px);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top left, top left, bottom right, bottom right;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.main-img-wrap img { width: 100%; display: block; }

.spec-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-2);
}

.spec-band {
  border-top: 1px solid var(--rule-hair);
  padding-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}

.spec-key {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.spec-val {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--ink);
  text-align: right;
}

.what-this-is {
  border-top: 1px solid var(--rule-hair);
  padding-top: var(--s-3);
}

.what-body {
  font-size: var(--t-small);
  color: var(--text);
  line-height: 1.75;
}

.iteration-section {
  border-top: 1px solid var(--rule-hair);
  padding-top: var(--s-5);
  margin-bottom: var(--s-8);
}

.iteration-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.iteration-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-hair);
}

.station-rail {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.station-rail::before {
  content: '';
  position: absolute;
  top: 138px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-hair);
  pointer-events: none;
  z-index: 0;
}

.station-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.station-thumb {
  width: min(100%, 160px);
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--rule-hair);
  background: var(--surface);
}

.station-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.station-connector {
  width: 1px;
  height: 14px;
  background: var(--rule-hair);
  flex-shrink: 0;
}

.station-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  background: var(--paper);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.station-num {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--text-soft);
  line-height: 12px;
  margin-top: 5px;
}

.provenance {
  border-top: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
  padding: var(--s-2) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}

.provenance span {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

@media (max-width: 900px) {
  .plate-body { grid-template-columns: 1fr; }
  .spec-col { padding-top: 0; }
}

@media (max-width: 600px) {
  .plate-wrap { padding: var(--s-7) var(--pad-x-sm) var(--s-9); }
  .glyph-sheet-body { padding: 28px; }
}