/* The Agentic Service Designer — editorial archive system
   An archive of an emerging design practice, not a traditional UX portfolio. */

/* ---------- tokens ---------- */
:root {
  /* The site type scale: eight named steps. Every font-size on a site page is one of these
     or a clamp() for a display heading; a pixel size fails the lint. */
  --t-1: 12px;
  --t-2: 13px;
  --t-3: 14px;
  --t-4: 15.5px;
  --t-5: 17px;
  --t-6: 20px;
  --t-7: 26px;
  --t-8: 34px;

  --sans: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --paper: #ffffff;
  --paper-tint: #fafaf8;
  --ink: #111110;
  --ink-soft: #555555;
  --muted: #6e6e69;

  --line: #cfcfca;
  --line-strong: #bbbbb6;
  --label-line: #c9c9c4;

  --dark: #171817;
  --dark-ink: #f8f8f5;

  --lavender: #e8defa;
  --sage: #e8eee5;
  --butter: #fff2bb;
  --blue: #e9f1f7;
  --rose: #f9e9e4;

  --radius-card: 5px;
  --radius-small: 4px;

  --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.045);

  --fast: 140ms;
  --default: 220ms;
  --slow: 400ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --pad-d: 40px;
  --pad-t: 24px;
  --pad-m: 16px;

  --inv: #ffffff; /* inverted text on filled diagram shapes */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  font: 400 14px/1.5 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--lavender); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-weight: 600; color: var(--ink); }
code, kbd, pre { font-family: var(--mono); }

/* ---------- header ---------- */
.site-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  padding: 0 var(--pad-d);
  border-bottom: 1px solid var(--line);
  gap: 24px;
  flex-wrap: wrap;
}
.brand-title {
  font-size: var(--t-6);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.brand-title .reg {
  font-size: var(--t-1);
  vertical-align: super;
  color: var(--muted);
  margin-left: 1px;
  letter-spacing: 0;
}
.brand-sub {
  font-size: var(--t-2);
  color: var(--ink-soft);
  margin-top: 4px;
}
.main-nav { display: flex; align-items: center; gap: 42px; }
.main-nav a {
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--ink-soft);
  padding-bottom: 8px;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a.on { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- filter bar ---------- */
.filterbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--pad-d);
  min-height: 48px;
  max-width: 1180px;
  margin: 0 auto;
}
.filter-links { display: flex; flex-wrap: wrap; }
.filter-links a {
  font-size: var(--t-2);
  color: var(--ink-soft);
  padding: 14px 0 10px;
  margin-right: 34px;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.filter-links a:hover { color: var(--ink); }
.filter-links a.on { color: var(--ink); border-bottom-color: var(--ink); }
.filter-actions { display: flex; align-items: center; gap: 14px; }
.search {
  font: 400 13px/1 var(--sans);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 8px 11px;
  width: 200px;
  transition: border-color var(--fast) var(--ease);
}
.search::placeholder { color: var(--muted); }
.search:focus { border-color: var(--line-strong); outline: none; }
.btn-outline {
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.btn-outline:hover { border-color: var(--line-strong); }
.btn-outline.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-panel {
  display: none;
  padding: 14px var(--pad-d);
  border-bottom: 1px solid var(--line);
  gap: 8px 26px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.filter-panel.open { display: flex; }
.filter-panel .plabel {
  font-family: var(--mono);
  font-size: var(--t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.toggle-track {
  font: 400 12.5px/1 var(--sans);
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.toggle-track:hover { border-color: var(--line-strong); color: var(--ink); }
.toggle-track.on { border-color: var(--ink); color: var(--ink); background: var(--ink); color: var(--paper); }
.toggle-track.on:hover { color: var(--paper); }
.count-line {
  font-family: var(--mono);
  font-size: var(--t-1);
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- portfolio grid ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 14px var(--pad-d) 96px;
  max-width: 1180px;
  margin: 0 auto;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 16px;
  text-align: left;
  transition: transform var(--default) var(--ease), border-color var(--default) var(--ease), box-shadow var(--default) var(--ease);
  animation: rise 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 18ms);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}

/* dark anchor cards */
.card.dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--dark-ink);
}
.card.dark:hover { border-color: #3a3b38; }
.card.dark .card-title a { color: var(--dark-ink); }
.card.dark .card-desc { color: #a9a9a3; }
.card.dark .card-cta { color: var(--dark-ink); }
.card.dark .category-label { border-color: #555; color: #eee; }
.card.dark .card-graphic { border-color: rgba(255, 255, 255, 0.16); }
.card.dark .mini { color: #e8e8e4; }
.card.dark .mini .inv { fill: var(--dark); }

/* card anatomy: label → title → desc → action → space → graphic */
.category-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 7px;
  border: 1px solid var(--label-line);
  border-radius: var(--radius-small);
  font-family: var(--mono);
  font-size: var(--t-1);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
}
.category-label.label-work {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.card.dark .category-label.label-work {
  background: var(--dark-ink);
  border-color: var(--dark-ink);
  color: var(--dark);
}
.card-title {
  margin: 12px 0 6px;
  font-size: var(--t-6);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.card-title a {
  color: var(--ink);
  transition: opacity var(--fast) var(--ease);
}
.card-title a:hover { opacity: 0.62; }
.card-desc {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-cta {
  margin: 12px 0 0;
  padding-top: 12px;
  margin-top: auto;
  font-size: var(--t-1);
  font-weight: 500;
  color: var(--ink);
  transition: opacity var(--fast) var(--ease);
}
.card-cta:hover { opacity: 0.62; }
.card-top { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
.card-graphic {
  margin-top: 16px;
  aspect-ratio: 16 / 7;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper-tint);
  overflow: hidden;
}
.card-graphic.g-lavender { background: var(--lavender); }
.card-graphic.g-sage { background: var(--sage); }
.card-graphic.g-butter { background: var(--butter); }
.card-graphic.g-blue { background: var(--blue); }
.card-graphic.g-rose { background: var(--rose); }
.card-graphic.g-dark { background: #222320; }

/* ---------- mini diagram language ---------- */
.mini {
  width: 100%;
  height: 100%;
  display: block;
  color: #333;
}
.card:hover .mini line[stroke-dasharray] {
  animation: dashflow 1.4s linear infinite;
}
@keyframes dashflow {
  to { stroke-dashoffset: -12; }
}

/* ---------- generic sections ---------- */
.page-hero { padding: 96px var(--pad-d) 48px; max-width: 1180px; margin: 0 auto; }
.page-hero > * { animation: none; }
.page-hero > *:nth-child(2) { animation-delay: 0.08s; }
.page-hero > *:nth-child(3) { animation-delay: 0.16s; }
.page-hero .kicker {
  font-family: var(--mono);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin: 0 0 26px;
}
.page-hero h1 {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 22px;
  max-width: 20ch;
}
.page-hero .lede {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
}
.statstrip {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  padding: 0 var(--pad-d) 8px;
  max-width: 1180px;
  margin: 0 auto;
}
.statstrip .stat b {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-6);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.statstrip .stat span {
  font-family: var(--mono);
  font-size: var(--t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sec { padding: 48px var(--pad-d); border-top: 1px solid var(--line); }
.sec > .fig { margin-left: auto; margin-right: auto; }
.sec-head { margin: 0 auto 26px; max-width: 1180px; }
.sec-head .kicker {
  font-family: var(--mono);
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}
.sec-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 8px;
}
.sec-head p { color: var(--ink-soft); margin: 0; max-width: 680px; font-size: var(--t-3); line-height: 1.55; }

/* role / tool / template cards */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
}
.tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  transition: border-color var(--default) var(--ease), transform var(--default) var(--ease);
}
.tile:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.tile .num {
  font-family: var(--mono);
  font-size: var(--t-1);
  color: var(--muted);
  letter-spacing: 0.06em;
}
.tile h3 { margin: 8px 0 6px; font-size: var(--t-4); letter-spacing: -0.015em; }
.tile p { margin: 0; color: var(--ink-soft); font-size: var(--t-2); line-height: 1.5; }
.tile .tag {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--t-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--label-line);
  border-radius: var(--radius-small);
  padding: 3px 6px;
}
.tile.dark { background: var(--dark); border-color: var(--dark); }
.tile.dark h3 { color: var(--dark-ink); }
.tile.dark p { color: #a9a9a3; }

/* chip cloud */
.cloud { display: flex; flex-wrap: wrap; gap: 7px; max-width: 1180px; margin: 0 auto; }
.cloud .tk {
  font-family: var(--mono);
  font-size: var(--t-1);
  line-height: 1;
  color: var(--ink-soft);
  border: 1px solid var(--label-line);
  border-radius: var(--radius-small);
  padding: 5px 8px;
  white-space: nowrap;
}
.cloud .tk b { font-weight: 500; color: var(--ink); }
.cloud .tk.lit { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* two-column editorial text */
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.columns p { color: var(--ink-soft); font-size: var(--t-3); line-height: 1.6; margin: 0 0 14px; }
.columns h3 { font-size: var(--t-4); margin: 0 0 8px; }

/* mermaid container */
.mermaid {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
  background: var(--paper);
  margin: 0 0 24px;
  text-align: center;
  overflow-x: visible;
}
.mermaid svg { max-width: 100%; height: auto; }

/* ---------- article pages ---------- */
.art-hero { padding: 44px var(--pad-d) 0; max-width: 880px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.art-meta .sep { color: var(--line-strong); }
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--t-1);
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--radius-small);
  border: 1px solid var(--label-line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.art-hero h1 {
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 16px 0 8px;
}
.art .deck { color: var(--ink-soft); font-size: var(--t-4); line-height: 1.55; margin: 0; }

.art-body {
  max-width: 880px;
  margin: 0 auto 48px;
  padding: 0 var(--pad-d);
  font-size: var(--t-4);
  line-height: 1.65;
  color: #23231f;
}
.art-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: var(--t-2);
}
.art-body th, .art-body td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.art-body th { background: var(--paper-tint); font-weight: 600; }
pre {
  background: var(--dark);
  color: var(--dark-ink);
  padding: 16px 18px;
  border-radius: var(--radius-card);
  overflow-x: auto;
  font-size: var(--t-2);
  line-height: 1.5;
  margin: 0 0 20px;
}
pre code { background: none; padding: 0; color: inherit; }
:not(pre) > code {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 1.5px 6px;
  border-radius: var(--radius-small);
  font-size: 0.86em;
}
.toc {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  margin: 0 0 24px;
  font-size: var(--t-2);
}
.toc b {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
/* ---------- CV page ---------- */
.cv { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-d) 72px; }
.cv h2 {
  font-size: var(--t-4);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 40px 0 16px;
  font-weight: 600;
}
.cv .cv-item { display: grid; grid-template-columns: 150px 1fr; gap: 18px; margin-bottom: 16px; }
.cv .cv-item .when { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.cv .cv-item h3 { margin: 0 0 4px; font-size: var(--t-4); }
.cv .cv-item p { margin: 0; color: var(--ink-soft); font-size: var(--t-2); line-height: 1.55; }
.cv ul { margin: 0; padding-left: 18px; }
.cv li { margin-bottom: 7px; font-size: var(--t-2); color: #33322e; line-height: 1.55; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 26px var(--pad-d) 48px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--t-1);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.footer a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--ink); }

/* =============================================================
   ARTICLE SYSTEM — semantic sections, figures, tables, rail
   ============================================================= */
.art { position: relative; }
.art-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; }
.art-progress-bar { height: 100%; width: 0; background: var(--ink); transition: width 80ms linear; }

.art-article .art-hero { padding: 0; max-width: none; width: 100%; }
.art-article .art-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.art-article .art-meta-item { display: inline-flex; align-items: center; gap: 10px; }
.art-article .art-hero h1 { font-size: clamp(32px, 4vw, 58px); letter-spacing: -0.04em; line-height: 1.04; margin: 18px 0 10px; font-weight: 600; max-width: none; text-wrap: balance; }
.art-article .deck { color: var(--ink-soft); font-size: var(--t-4); line-height: 1.55; margin: 0; max-width: 68ch; }
.art-article .art-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 18px 0 0; }
.art-article .art-stats span { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.art-article .art-stats b { display: block; font-size: var(--t-5); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px; }

.author-block { margin: 22px 0 4px; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.author-id { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 34px; height: 34px; border: 1px solid var(--ink); border-radius: var(--radius-small); display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.04em; color: var(--ink); background: var(--paper-tint); flex: none; }
.author-id b { display: block; font-size: var(--t-3); font-weight: 600; }
.author-id span { display: block; font-size: var(--t-1); color: var(--muted); }
.author-note { margin: 0; border-left: 2px solid var(--ink); padding-left: 12px; font-size: var(--t-3); line-height: 1.55; color: #3c3c38; }

/* reading layout: rail column + fluid measure; figures never leave the body column */
.art-article .art-layout { display: grid; grid-template-columns: minmax(236px, 260px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-d); min-width: 0; align-items: start; }
.art-article .art-layout--hero { padding-top: 44px; }
.art-article .art-layout--hero .art-hero { grid-column: 1 / -1; }
.art-article .art-layout--body { padding-top: 28px; }
.art-article .art-rail,
.art-article .art-rail-spacer { min-width: 0; }
.art-article .art-rail { align-self: start; position: sticky; top: 24px; max-height: calc(100vh - 120px); overflow-y: auto; width: 100%; }
.art-article .art-body { max-width: 70ch; width: 100%; min-width: 0; font-size: var(--t-5); line-height: 1.65; color: #23231f; }
.art-body > .art-sec { margin-bottom: 44px; }
.art-body h2 { font-size: var(--t-7); letter-spacing: -0.02em; margin: 0 0 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.art-body h3 { font-size: var(--t-5); margin: 30px 0 10px; }
.art-body h4 { font-size: var(--t-4); margin: 24px 0 8px; }
.art-body p, .art-body ul, .art-body ol { margin: 0 0 16px; }
.art-body li { margin: 0 0 6px; }
.art-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.art-body a:hover { text-decoration-color: var(--ink); }
.art-body blockquote { margin: 0 0 16px; padding: 10px 16px; border-left: 2px solid var(--ink); color: var(--ink-soft); }
.art-body hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
.art-body img { max-width: 100%; border-radius: var(--radius-card); border: 1px solid var(--line); }

/* section kickers */
.sec-kicker { display: block; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 34px 0 8px; }
.art-body .art-sec { border-top: 1px solid var(--line); padding-top: 0; }
.art-body .art-sec:first-child { border-top: 0; }
.art-body .art-sec .sec-kicker { margin-top: 26px; }
.art-body > .art-sec:first-child .sec-kicker { margin-top: 0; }
.art-sec.sec-0 { background: var(--paper-tint); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px 20px; }
.art-sec.sec-0 h2 { font-size: var(--t-4); margin-bottom: 10px; }
.art-sec.sec-0 p, .art-sec.sec-0 li { font-size: var(--t-3); color: var(--ink-soft); }
.art-sec.sec-0 .sec-kicker { margin-top: 0; }

/* toc in rail */
.art-article .toc { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 2px 0 2px 18px; margin: 0; font-size: var(--t-2); }
.art-article .toc b { display: block; margin-bottom: 10px; color: var(--muted); font-family: var(--mono); font-size: var(--t-1); text-transform: uppercase; letter-spacing: 0.1em; }
.art-article .toc ol { margin: 0; padding: 0; list-style: none; }
.art-article .toc li { margin: 0 0 9px; }
.art-article .toc a { color: var(--muted); display: block; line-height: 1.45; transition: color var(--fast) var(--ease); text-wrap: pretty; }
.art-article .toc a:hover { color: var(--ink); text-decoration: none; }
.art-article .toc a.active { color: var(--ink); font-weight: 500; }

/* docs rail nav — sibling of .toc, never .toc itself: scrollspy resolves .toc hrefs as in-page selectors, and page links would throw */
.docs-nav { border-left: 1px solid var(--line); padding: 2px 0 2px 16px; margin: 0 0 22px; font-size: var(--t-1); }
.docs-nav > b, .docs-nav-sec { display: block; margin: 0 0 8px; color: var(--muted); font-family: var(--mono); font-size: var(--t-1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }
.docs-nav-sec { margin-top: 14px; font-size: var(--t-1); }
.docs-nav ol { margin: 0; padding: 0; list-style: none; }
.docs-nav li { margin: 0 0 7px; }
.docs-nav a { color: var(--muted); display: block; line-height: 1.35; transition: color var(--fast) var(--ease); }
.docs-nav a:hover { color: var(--ink); text-decoration: none; }
.docs-nav a.on { color: var(--ink); font-weight: 500; }

/* docs section tabs — top strip separating the manual's parts; the rail below stays scoped to the current section */

/* =============================================================
   FIGURES — the designed-artifact system
   ============================================================= */
.fig { margin: 26px 0 30px; width: min(100%, 1180px); }
.art-body .fig { width: 100%; margin-left: 0; transform: none; }
.fig figcaption { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 10px; }
.fignum { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.figcap { font-size: var(--t-2); font-style: italic; color: var(--ink-soft); }
.figsrc { font-size: var(--t-1); color: var(--muted); }
.fgsvg { width: 100%; height: auto; display: block; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.fgsvg.lane, .fgsvg.flow, .fgsvg.xy, .fgsvg.pie, .fgsvg.quad { padding: 0; }
.fgsvg text { paint-order: stroke; }
.fig-fallback { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); padding: 14px; background: var(--paper-tint); }
.fig-pre { font-family: var(--mono); font-size: var(--t-1); color: var(--muted); background: none; padding: 0; margin: 0; white-space: pre-wrap; }
.fig-empty { font-family: var(--mono); font-size: var(--t-1); color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-card); padding: 16px; }

/* gantt + timeline (HTML figures) */
.fig-gantt, .fig-timeline { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 20px 22px; }
.gantt { font-size: var(--t-2); }
.gantt-head, .gantt-row { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: center; padding: 5px 0; }
.gantt-head { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.gantt-head .gantt-taskcol, .gantt-track > span { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gantt-head .gantt-track { display: flex; justify-content: space-between; }
.gantt-section { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-top: 12px; padding: 3px 0; border-top: 1px solid var(--line); }
.gantt-taskcol { font-weight: 500; color: #33322e; overflow-wrap: break-word; line-height: 1.3; }
.gantt-track { position: relative; height: 20px; }
.gantt-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; }
.gantt-bar.done { background: var(--ink); }
.gantt-bar.active { background: #5E7F5A; }
.gantt-bar.crit { background: transparent; border: 1px solid #B08A00; }
.gantt-bar.future { background: #EDEDEA; }
.tl { font-size: var(--t-2); }
.tl-section { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 14px 0 8px; }
.tl-item { display: grid; grid-template-columns: 110px 1fr; gap: 16px; border-left: 1px solid var(--line); margin-left: 4px; padding: 4px 0 10px 14px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: -3.5px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.tl-period { font-family: var(--mono); font-size: var(--t-1); color: var(--ink-soft); padding-top: 1px; }
.tl-events { display: flex; flex-direction: column; gap: 3px; color: #33322e; }

/* =============================================================
   CALL OUTS + CODE CHROME
   ============================================================= */
.callout { margin: 20px 0; padding: 14px 18px; border-left: 2px solid var(--line-strong); background: var(--paper-tint); border-radius: 0 var(--radius-small) var(--radius-small) 0; font-size: var(--t-3); }
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin: 0; }
.callout-note { border-left-color: var(--line-strong); }
.callout-warn { border-left-color: #8a6a00; background: #FCF9EF; }
.codeblock { margin: 20px 0; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.codebar { display: flex; align-items: center; height: 30px; padding: 0 12px; background: var(--paper-tint); border-bottom: 1px solid var(--line); }
.codebar span { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.codeblock pre { background: var(--dark); color: var(--dark-ink); padding: 14px 16px; border-radius: 0; overflow-x: auto; font-size: var(--t-2); line-height: 1.5; margin: 0; }

/* =============================================================
   ARTICLE FOOT + NAVIGATION
   ============================================================= */
.cross-links { display: flex; justify-content: center; gap: 10px; margin: 48px auto 14px; max-width: 980px; padding: 0 var(--pad-d); }
.cross-links .xlink { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; flex: 1; max-width: 46%; display: flex; flex-direction: column; gap: 4px; transition: border-color var(--default) var(--ease), transform var(--default) var(--ease); }
.cross-links .xlink:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.cross-links .xlink.empty { opacity: 0.35; pointer-events: none; }
.cross-links .lbl { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cross-links .ttl { font-weight: 600; color: var(--ink); font-size: var(--t-3); margin-top: 4px; }
.cross-links .rt { font-family: var(--mono); font-size: var(--t-1); color: var(--muted); }
.art-foot { font-size: var(--t-1); color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin: 18px auto 0; max-width: 980px; padding-left: var(--pad-d); padding-right: var(--pad-d); }
.art-foot a { font-weight: 500; text-decoration: underline; }
.backtop { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: none; font: 500 12px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-small); padding: 9px 13px; cursor: pointer; box-shadow: var(--shadow-hover); }
.backtop.show { display: block; }
.backtop:hover { border-color: var(--ink); }

/* =============================================================
   HOME — minor improvements
   ============================================================= */
.search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-wrap .search { padding-right: 30px; }
.search-clear { position: absolute; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; background: transparent; border: 0; color: var(--muted); font-size: var(--t-4); cursor: pointer; border-radius: 50%; line-height: 1; }
.search-clear:hover { color: var(--ink); background: var(--paper-tint); }
.empty-state { text-align: center; padding: 60px var(--pad-d) 90px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-state[hidden] { display: none; }
.empty-title { font-size: var(--t-5); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.empty-sub { color: var(--muted); font-size: var(--t-2); margin: 0 0 14px; }
/* whole-card click: stretched link */
.card { position: relative; }
.card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-title a:focus-visible { outline: none; }
.card:has(.card-title a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.card-cta { position: relative; z-index: 1; }
.card .card-cta:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
/* standardised focus ring */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.search:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }

/* =============================================================
   ABOUT PAGE — portrait stage
   ============================================================= */
.about-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr); gap: 56px; padding: 96px var(--pad-d) 48px; align-items: center; max-width: 1180px; margin: 0 auto; }
.about-intro h1 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -0.015em; font-weight: 700; margin: 0 0 22px; }
.about-intro .lede { color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; max-width: 62ch; margin: 0 0 14px; }
.portrait-stage { position: relative; border: 1px solid #2b2c2a; border-radius: var(--radius-card); background: #000; aspect-ratio: 4 / 5; overflow: hidden; }
.portrait-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.portrait-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.08em; color: #9a9b95; background: rgba(0,0,0,0.45); padding: 3px 8px; border-radius: 4px; pointer-events: none; width: fit-content; margin: 0 auto; }
.about-stats { padding: 0 var(--pad-d) 8px; max-width: 1180px; margin: 0 auto; }

/* =============================================================
   HOME — editorial showcase (hero, capabilities, platform, proof)
   Bold display weights on the site's sans stack; no webfonts.
   ============================================================= */
.hero { padding: 96px var(--pad-d) 56px; max-width: 1180px; margin: 0 auto; position: relative; }
.hero > *:not(.particles-container) { position: relative; z-index: 1; }
.particles-container { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.particles-container canvas { display: block; width: 100%; height: 100%; }
.hero-kicker { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; }
.hero-title { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 26px; max-width: 16ch; }
.hero-title em { font-style: italic; font-weight: 600; }
.hero-desc { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; margin: 0 0 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 30px; }
.btn-ink { display: inline-block; background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: var(--radius-card); font-weight: 600; font-size: var(--t-3); transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn-ink:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); text-decoration: none; }
.btn-ghost { display: inline-block; border: 1px solid var(--line-strong); color: var(--ink); padding: 12px 22px; border-radius: var(--radius-card); font-weight: 600; font-size: var(--t-3); transition: border-color var(--fast) var(--ease); }
.btn-ghost:hover { border-color: var(--ink); text-decoration: none; }
/* a ghost button may carry a mark: the LinkedIn and GitHub links lost their brand fill (C5) and their icons must stay 18px */
.btn-ghost svg { width: 18px; height: 18px; fill: currentColor; flex: none; vertical-align: -4px; margin-right: 8px; }

/* Social buttons carry their own brand, because a reader scans for the two marks
   rather than reading two words in a meta line. Official colours, both of which
   clear 4.5:1 against white text: LinkedIn #0A66C2 at 5.69, GitHub #181717 at
   17.9. The mark is the letterform only, not the containing tile, so it does not
   read as a white square sitting inside a coloured button. */
.btn-brand { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: var(--radius-card); font-weight: 600; font-size: var(--t-3); color: #fff; border: 1px solid transparent; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease); }
.btn-brand svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn-brand:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-linkedin { background: #0a66c2; }
.btn-linkedin:hover { background: #08529b; }
.btn-github { background: #181717; }
.btn-github:hover { background: #000; }
@media (prefers-reduced-motion: reduce) { .btn-brand:hover { transform: none; } }
.btn-text { font-size: var(--t-3); color: var(--muted); padding: 12px 6px; }
.btn-text:hover { color: var(--ink); }
.hero .hero-meta { font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.hero .hero-meta b { color: var(--ink); font-weight: 600; }
.hero .hero-contact { display: flex; flex-wrap: wrap; gap: 18px; font-size: var(--t-2); margin-top: 0; }
.hero .hero-contact a { font-size: var(--t-2); font-weight: 500; color: var(--muted); border: 0; padding-bottom: 2px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.hero .hero-contact a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* staggered load reveal (killed globally under prefers-reduced-motion) */
.rv { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* band scaffolding */
.band-head { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-d); }
.band-head .kicker { display: block; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.band-head h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.01em; margin: 0 0 12px; }
.band-head p { color: var(--ink-soft); max-width: 62ch; font-size: var(--t-4); line-height: 1.6; margin: 0; }

/* capabilities */
.cap-band { padding: 72px 0 64px; border-top: 1px solid var(--line); }
.cap-grid { max-width: 1180px; margin: 36px auto 0; padding: 0 var(--pad-d); display: grid; grid-template-columns: repeat(6, 1fr); }
.cap { border-left: 1px solid var(--line); padding: 4px 18px 0; }
.cap:first-child { border-left: 0; padding-left: 0; }
.cap-num { font-family: var(--mono); font-size: var(--t-1); color: var(--muted); letter-spacing: 0.1em; }
.cap h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-6); margin: 8px 0; }
.cap p { font-size: var(--t-2); line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* platform — dark inversion */
.plat-band { background: var(--dark); color: var(--dark-ink); padding: 76px 0 84px; }
.plat-band .band-head h2 { color: var(--dark-ink); }
.plat-band .band-head p { color: #b8b9b2; }
.plat-grid { max-width: 1180px; margin: 36px auto 0; padding: 0 var(--pad-d); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plat { display: block; border: 1px solid #2c2d2b; border-radius: var(--radius-card); padding: 18px 18px 20px; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.plat:hover { border-color: #4a4b48; background: #1d1e1c; text-decoration: none; transform: translateY(-2px); }
.plat-tag { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: #9a9b95; border: 1px solid #3a3b38; border-radius: 999px; padding: 3px 8px; }
.plat h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-6); margin: 12px 0 8px; color: var(--dark-ink); }
.plat p { font-size: var(--t-1); line-height: 1.55; color: #b8b9b2; margin: 0; }
.plat-fig { max-width: 1180px; margin: 40px auto 0; padding: 0 var(--pad-d); }
.plat-fig img { width: 100%; border: 1px solid #2c2d2b; border-radius: var(--radius-card); display: block; }
.plat-fig figcaption { display: flex; gap: 10px; margin-top: 10px; align-items: baseline; flex-wrap: wrap; }
.plat-fig .fignum { color: #9a9b95; }
.plat-fig .figcap { color: #b8b9b2; }
.plat-fig .figcap a { color: var(--dark-ink); text-decoration: underline; text-underline-offset: 3px; }

/* proof */
.proof-band { padding: 72px 0 80px; }
.proof-grid { max-width: 1180px; margin: 32px auto 0; padding: 0 var(--pad-d); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.proof-feature { display: block; background: var(--dark); color: var(--dark-ink); border-radius: var(--radius-card); padding: 26px 26px 28px; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.proof-feature:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); text-decoration: none; }
.proof-feature .kicker { display: block; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: #9a9b95; }
.proof-feature h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-7); line-height: 1.15; margin: 12px 0; color: var(--dark-ink); }
.proof-feature p { color: #b8b9b2; font-size: var(--t-3); line-height: 1.6; margin: 0 0 16px; }
.proof-feature .card-cta { color: var(--dark-ink); font-size: var(--t-2); font-weight: 600; }
.proof { display: block; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.proof:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); text-decoration: none; transform: translateY(-2px); }
.proof h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-6); margin: 0 0 8px; }
.proof p { font-size: var(--t-2); color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; }

/* archive intro */
.archive-head { padding: 8px 0 24px; }


/* ---------- course page metric tiles ---------- */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 24px 0 0;
}
.metrics-row > div {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-tint);
  padding: 14px 16px;
}
.metrics-row dt {
  font-family: var(--mono);
  font-size: var(--t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.metrics-row dd { margin: 0; font-size: var(--t-5); font-weight: 600; color: var(--ink); }
.metrics-row dd.status-available { color: #3f6b3a; }

/* ---------- work band ---------- */
.work-band { padding: 72px 0 12px; }
.work-band .band-head p.work-lede { max-width: none; }
.work-band .portfolio-grid { padding-bottom: 24px; }

/* =============================================================
   RESPONSIVE — consolidated breakpoints (rule order preserves the
   original cascade within each width)
   ============================================================= */
@media (max-width: 1280px) {
  .art-article .art-layout { grid-template-columns: minmax(220px, 236px) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columns { grid-template-columns: 1fr; gap: 24px; }
  .art-article .art-layout { grid-template-columns: 1fr; padding: 0 var(--pad-d); }
  .art-article .art-layout--hero { padding-top: 32px; }
  .art-article .art-layout--body { padding-top: 24px; }
  .art-article .art-rail,
  .art-article .art-rail-spacer { display: none; }
  .art-article .art-body .fig { width: 100%; max-width: 100%; min-width: 0; margin-left: 0; transform: none; }
  .about-hero { grid-template-columns: 1fr; gap: 28px; }
  .portrait-stage { max-width: 460px; }
  .gantt-head, .gantt-row { grid-template-columns: 130px 1fr; }
  .cap-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 0; }
  .cap:nth-child(4) { border-left: 0; padding-left: 0; }
  .plat-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --pad-d: var(--pad-t); }
  .site-head { height: auto; padding: 16px var(--pad-d); align-items: flex-start; }
  .main-nav { gap: 24px; width: 100%; padding-top: 10px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .filterbar { padding: 8px var(--pad-d); }
  .filter-links a { margin-right: 20px; }
  .search { width: 130px; }
  .statstrip { gap: 24px; }
  .cross-links { flex-direction: column; }
  .cv .cv-item { grid-template-columns: 1fr; gap: 4px; }
  .art-article .art-hero h1 { max-width: none; }
  .art-article .art-body { font-size: var(--t-4); }
  .art-article .art-stats { gap: 16px; }
  .cross-links .xlink { max-width: none; }
  .art-body table { display: block; overflow-x: visible; }
  .filter-actions { width: 100%; justify-content: space-between; }
  .hero { padding: 64px var(--pad-d) 40px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cap:nth-child(4) { border-left: 1px solid var(--line); padding-left: 18px; }
  .cap:first-child { border-left: 0; padding-left: 0; }
  .plat-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ---------- v6: lead case feature and card hierarchy ---------- */
.hero { padding: 72px var(--pad-d) 36px; }
.hero-title { font-size: clamp(38px, 4.6vw, 62px); max-width: 18ch; letter-spacing: -0.02em; margin-bottom: 22px; }
.hero-kicker, .hero .hero-meta { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: var(--t-3); }
.hero-desc { margin-bottom: 24px; }
.feature { padding: 8px var(--pad-d) 0; max-width: 1180px; margin: 0 auto; }
.feature-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--dark); color: var(--dark-ink); border-radius: var(--radius-card); overflow: hidden; }
.feature-text { padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 14px; }
.feature-label { margin: 0; font-size: var(--t-2); color: #b9b9b2; }
.feature-text h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em; color: var(--dark-ink); font-weight: 600; }
.feature-text h2 a { color: inherit; }
.feature-text h2 a:hover { opacity: .8; }
.feature-finding { margin: 0; font-size: var(--t-4); line-height: 1.55; color: #e6e6e1; }
.feature-facts { margin: 4px 0 0; display: grid; gap: 9px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; }
.feature-facts div { display: grid; grid-template-columns: 78px 1fr; gap: 12px; font-size: var(--t-2); line-height: 1.45; }
.feature-facts dt { color: #b9b9b2; margin: 0; }
.feature-facts dd { margin: 0; color: #e6e6e1; }
.feature-text .btn-ink { align-self: flex-start; background: var(--dark-ink); color: var(--dark); border-color: var(--dark-ink); margin-top: 8px; }
.feature-text .btn-ink:hover { opacity: .88; }
.feature-fig { display: block; position: relative; min-height: 380px; background: #fff; border-left: 1px solid rgba(255,255,255,.12); }
.feature-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; display: block; }
.feature-fig:focus-visible { outline: 2px solid var(--dark-ink); outline-offset: -4px; }
.feature-caption { margin: 10px 0 0; font-size: var(--t-1); color: var(--muted); max-width: 1180px; }
.support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 18px; padding-bottom: 56px; }
.card { animation: none; }
.card .status-line { color: var(--muted); font-family: var(--sans); font-size: var(--t-1); margin: 10px 0 0; }
.card.dark .status-line { color: #b9b9b2; }
.category-label { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: var(--t-1); padding: 4px 8px; }
.band-head .kicker, .sec-head .kicker, .page-hero .kicker { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: var(--t-2); color: var(--ink-soft); }
.work-list .support-grid { padding-top: 14px; padding-bottom: 8px; }
@media (max-width: 900px) {
  .feature-inner { grid-template-columns: 1fr; }
  .feature-fig { min-height: 240px; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .support-grid { grid-template-columns: 1fr; }
}
.support-grid .card-desc { display: block; -webkit-line-clamp: unset; overflow: visible; }


/* ---------- v7: link affordance, feature image, tiles ---------- */
.art-body a:not(.card-cta), .sec p a, .sec-head p a, .work-lede a, .status-line a, .lede a, .cv-wrap a, .review-note a, .about-intro a, .feature-caption a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.art-body a:not(.card-cta):hover, .sec p a:hover, .sec-head p a:hover, .work-lede a:hover, .lede a:hover, .cv-wrap a:hover, .about-intro a:hover { text-decoration-color: var(--ink); }
.feature-fig { background: #f4f3ee; min-height: 0; }
.feature-fig img { position: static; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
@media (max-width: 900px) { .feature-fig { aspect-ratio: 16 / 10; border-top: 1px solid rgba(255,255,255,.12); } .feature-fig img { object-fit: cover; object-position: 0 0; } }
:root { --line: #bdbdb7; --label-line: #b7b7b1; }
.tile { display: flex; flex-direction: column; }
.tile .card-cta { margin-top: auto; padding-top: 12px; }
.columns h3 { font-size: var(--t-5); }

/* v8: landmarks, library void, portrait frame */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 50; }
.skip-link:focus { left: 8px; top: 8px; }
body { min-height: 100vh; position: relative; padding-bottom: 72px; }
footer.footer { position: absolute; left: 0; right: 0; bottom: 0; }
/* On a phone the footer wraps to about three lines, taller than the 72px the body
   reserves for it, so it sat over the last line of the page. Let it follow the content. */
@media (max-width: 640px) { body { padding-bottom: 0; } footer.footer { position: static; } }
.portrait-stage { background: var(--paper-tint); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.portrait-fallback { object-fit: cover; }

/* =============================================================
   v10 · WIDE MEASURE, NO BLEED UNDER THE RAIL
   The contents rail is sticky, so anything that slid underneath it
   collided with it on scroll. Figures no longer bleed left; instead
   the reading container is wider and the rail is narrower, so an
   artefact fills the body column at close to its native size and
   nothing ever overlaps the rail.
   ============================================================= */
.art-article .art-layout { max-width: 1320px; }
.art-article .art-layout--body { grid-template-columns: 208px minmax(0, 1fr); gap: 56px; }
.art-article .art-rail {
  position: sticky; top: 24px; align-self: start; z-index: 3;
  background: var(--paper); max-height: calc(100vh - 120px); overflow-y: auto;
  padding-right: 8px;
}
.art-article .art-body { max-width: none; }
.art-article .art-body > .art-sec > p,
.art-article .art-body > .art-sec > ul,
.art-article .art-body > .art-sec > ol,
.art-article .art-body > .art-sec > h3,
.art-article .art-body > .art-sec > h4,
.art-article .art-body > .art-sec > blockquote,
.art-article .art-body > .art-sec > .key-insight,
.art-article .art-body > .art-sec > .trail,
.art-article .art-body > .brief,
.art-article .art-body > .cross-links { max-width: 72ch; }

/* an artefact fills the body column; it never reaches back under the rail */
.art-article .art-body .fig-wide,
.art-article .art-body .fig-bleed,
.art-article .art-body .tbl-bleed {
  width: 100%; max-width: 100%; margin-left: 0; position: relative; z-index: 1;
}
.art-article .art-body .fig-wide > a,
.art-article .art-body .fig-wide img,
.art-article .art-body .fig-wide svg { display: block; width: 100%; height: auto; }
.art-article .art-body .fig-wide figcaption { max-width: 72ch; }

/* blueprint tables fit the column: cells wrap, the lane column stays put */
.art-body .blueprint { font-size: var(--t-1); table-layout: fixed; }
.art-body .blueprint th:first-child,
.art-body .blueprint tr.lane td:first-child { width: 128px; white-space: normal; position: sticky; left: 0; z-index: 2; }
.art-body .blueprint th:first-child { z-index: 3; }
.art-body .blueprint summary { overflow-wrap: anywhere; }
.art-body table.plain { table-layout: auto; }

@media (max-width: 1180px) {
  .art-article .art-layout--body { grid-template-columns: 196px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1024px) {
  .art-article .art-layout--body { grid-template-columns: 1fr; }
  .art-article .art-rail { position: static; }
}

/* phones: the grid tables become stacked cards rather than a sideways scroll */
@media (max-width: 720px) {
  .art-body table.plain, .art-body table.blueprint { display: block; overflow-x: visible; border: 0; table-layout: auto; }
  .art-body table.plain tbody, .art-body table.blueprint tbody { display: block; }
  .art-body table.plain > tbody > tr:first-child,
  .art-body table.blueprint > tbody > tr:first-child { display: none; }
  .art-body table.plain > tbody > tr, .art-body table.blueprint > tbody > tr {
    display: block; border: 1px solid var(--line); border-radius: var(--radius-card);
    margin: 0 0 12px; background: var(--paper); overflow: hidden;
  }
  .art-body table.plain td, .art-body table.blueprint td { display: block; border: 0; border-top: 1px solid var(--line); padding: 10px 12px; width: auto; }
  .art-body table.plain > tbody > tr > td:first-child,
  .art-body table.blueprint > tbody > tr > td:first-child {
    border-top: 0; background: var(--paper-tint); font-weight: 600; white-space: normal; position: static; width: auto;
  }
  .art-body table td[data-label]::before {
    content: attr(data-label); display: block; font-family: var(--mono); font-size: var(--t-1);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
  }
  .art-body table > tbody > tr > td:first-child[data-label]::before { content: none; }
}

/* v9: the feature panel carries the concept at its own ratio, never cropped */
.feature-fig { background: #f4f3ee; min-height: 0; display: block; position: static; }
.feature-fig img { position: static; display: block; width: 100%; height: auto; object-fit: initial; object-position: initial; }
@media (max-width: 900px) { .feature-fig { aspect-ratio: auto; } .feature-fig img { object-fit: initial; object-position: initial; } }

/* =============================================================
   v11 · SCROLL-DRIVEN ARTEFACT ANNOTATIONS
   Pins sit on the artefact; a card opens beside the pin as the
   figure crosses the viewport. The same notes are always present
   as a numbered list, so nothing depends on script or hover.
   ============================================================= */
.annot .annot-stage { position: relative; display: block; }
.annot .annot-stage img, .annot .annot-stage svg { display: block; width: 100%; height: auto; }

.annot-pin {
  position: absolute; transform: translate(-50%, -100%); margin-top: -10px;
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: var(--t-1); font-weight: 600; line-height: 26px; padding: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 2px 8px rgba(17,17,16,.35);
  transition: transform 140ms ease, background 140ms ease;
}
.annot-pin::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 10px;
  background: var(--ink); transform: translateX(-50%); box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.annot-pin:hover, .annot-pin.is-open { background: #9b3427; transform: translate(-50%, -100%) scale(1.08); }
.annot-pin.is-open::after { background: #9b3427; }

.annot-pop {
  position: absolute; z-index: 4; width: min(300px, 62%); transform: translate(18px, -50%);
  background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-card);
  padding: 12px 14px; box-shadow: 0 14px 34px -14px rgba(17,17,16,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms;
}
.annot-pop.left { transform: translate(calc(-100% - 18px), -50%); }
.annot-pop.is-open { opacity: 1; visibility: visible; }
.annot-pop .annot-kind, .annot-note .annot-kind {
  display: block; font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.annot-pop b, .annot-note b { display: block; font-size: var(--t-3); line-height: 1.3; margin-bottom: 4px; }
.annot-pop p, .annot-note p { margin: 0 0 6px; font-size: var(--t-2); line-height: 1.5; color: #3c3c38; }
.annot-pop a, .annot-note a { font-size: var(--t-1); }

.annot-list {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 26px;
  border-top: 1px solid var(--line);
}
.annot-note {
  display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.annot-note > .n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-1); font-weight: 600; margin-top: 1px;
}
.annot-note.is-open > .n { background: #9b3427; }
.annot-note.is-open b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #9b3427; }

@media (max-width: 860px) {
  .annot-pop { display: none; }
  .annot-pin { width: 21px; height: 21px; font-size: var(--t-1); line-height: 21px; }
  .annot-list { grid-template-columns: 1fr; }
}
@media print { .annot-pop, .annot-pin { display: none; } }

/* =============================================================
   v12 · ANIMATIONS THAT PLAY ONCE
   An artefact settles into place the first time it is seen, and a
   sequence plays through once and then rests on the frame that
   carries the meaning. Nothing loops and nothing is tied to the
   scroll wheel. Without script everything is simply visible.
   ============================================================= */
.reveal { opacity: 1; }
.seq { position: relative; }
.seq .seq-stage { position: relative; }
.seq .seq-frame { display: block; width: 100%; height: auto; }
.seq .seq-frame + .seq-frame { position: absolute; inset: 0; }
.seq-steps { list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 30px;
  border-top: 1px solid var(--line); }
.seq-steps li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-2); line-height: 1.6; color: #3c3c38; }
.seq-steps li b { display: block; font-size: var(--t-3); color: var(--ink); letter-spacing: -.01em; margin-bottom: 5px; }
.seq-steps li .c { display: block; font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal, .js .seq { opacity: 0; transform: translateY(14px); transition: opacity 560ms cubic-bezier(.22,.7,.2,1), transform 560ms cubic-bezier(.22,.7,.2,1); }
  .js .reveal.is-in, .js .seq.is-in { opacity: 1; transform: none; }
  .js .seq .seq-frame { opacity: 0; transition: opacity 420ms cubic-bezier(.22,.7,.2,1); }
  .js .seq .seq-frame:first-child { opacity: 1; }
  .js .seq .seq-frame.is-on { opacity: 1; }
  .js .seq .seq-frame:first-child:not(.is-on) { opacity: 0; }
  .js .seq-steps li { opacity: .42; transition: opacity 420ms cubic-bezier(.22,.7,.2,1); }
  .js .seq-steps li.is-on, .js .seq.has-played .seq-steps li { opacity: 1; }
}

/* no script: the sequence rests on its final frame and every note is legible */
html:not(.js) .seq .seq-frame { display: none; }
html:not(.js) .seq .seq-frame:last-child { display: block; position: static; }