/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
:root {
  --ground: #eceff2;
  --band: #e3e7ec;
  --surface: #ffffff;
  --ink: #12181f;
  --ink-soft: #566470;
  --ink-faint: #8a949e;
  --rule: #d2d9e0;
  --rule-soft: #dfe4e9;
  --signal: #1f3fbf;
  --signal-deep: #16308f;

  /* Derived surfaces — kept as tokens so the dark theme is a token swap only. */
  --graticule: rgba(18, 24, 31, 0.045);
  --wash: rgba(18, 24, 31, 0.06);
  --code-bg: #12181f;
  --code-ink: #e8ecf1;
  --on-signal: #ffffff;

  --display: "Archivo", system-ui, sans-serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1080px;
  --gutter: 32px;
}

/* Dark theme. Declared twice on purpose: once for visitors who never touch the
   toggle (system preference), once for an explicit choice, which must win in
   both directions. Every colour above has its base value on bare :root, so
   nothing depends on a media query being matched. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0e1216;
    --band: #131920;
    --surface: #171e26;
    --ink: #e6ecf2;
    --ink-soft: #9dabb8;
    --ink-faint: #6f7d8a;
    --rule: #28323d;
    --rule-soft: #1f2831;
    --signal: #7f9cff;
    --signal-deep: #a6bcff;

    --graticule: rgba(230, 236, 242, 0.04);
    --wash: rgba(230, 236, 242, 0.08);
    --code-bg: #0a0e12;
    --code-ink: #dbe3ea;
    --on-signal: #0e1216;
  }
}

:root[data-theme="dark"] {
  --ground: #0e1216;
  --band: #131920;
  --surface: #171e26;
  --ink: #e6ecf2;
  --ink-soft: #9dabb8;
  --ink-faint: #6f7d8a;
  --rule: #28323d;
  --rule-soft: #1f2831;
  --signal: #7f9cff;
  --signal-deep: #a6bcff;

  --graticule: rgba(230, 236, 242, 0.04);
  --wash: rgba(230, 236, 242, 0.08);
  --code-bg: #0a0e12;
  --code-ink: #dbe3ea;
  --on-signal: #0e1216;
}

/* Suppress transitions during a theme switch so the page changes in one frame
   instead of every element easing independently. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
  transition: none !important;
}

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--ground);
  background-image:
    linear-gradient(to right, var(--graticule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graticule) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  font-optical-sizing: auto;
  color-scheme: light dark;
}

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-deep); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--surface);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 13px;
}

.wrap {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------------------------------------------------------------
   Shared type roles
   --------------------------------------------------------------- */
.eyebrow,
.section-mark,
.entry-tag,
.entry-meta,
.postrow-date,
.axis-label,
.figure-caption,
.colophon-line {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow {
  margin: 0 0 20px;
}

/* ---------------------------------------------------------------
   Masthead
   --------------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding: 28px var(--gutter) 26px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--ink);
}

.wordmark-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.wordmark-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.nav {
  display: flex;
  align-items: baseline;
  gap: 26px;
}

.nav a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--signal);
}

/* ---------------------------------------------------------------
   Theme toggle — injected by JS, so it never appears without a
   working handler behind it.
   --------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  align-self: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover { color: var(--signal); border-color: var(--signal); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 84px;
  padding-bottom: 84px;
}

.hero-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}

.hero-lede {
  margin: 0 0 30px;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 11px 20px;
  color: var(--on-signal);
  background: var(--signal);
  border: 1px solid var(--signal);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: var(--on-signal); }

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

/* ---------------------------------------------------------------
   Hero plot — the signature
   --------------------------------------------------------------- */
.hero-figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 22px 20px 18px;
}

.plot { display: block; width: 100%; height: auto; }

.plot .grid line { stroke: var(--rule-soft); stroke-width: 1; }
.plot .axis { stroke: var(--ink-faint); stroke-width: 1; }
.plot .setpoint { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 4; }
.plot .event { stroke: var(--rule); stroke-width: 1; }
.plot .axis-label { font-size: 10px; letter-spacing: 0.06em; fill: var(--ink-faint); text-transform: none; }
.plot .event-label { text-transform: uppercase; }

.plot .trace { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plot .trace-base { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plot .trace-main { stroke: var(--signal); stroke-width: 2.25; }

/* Only for visitors without JS. When the simulation is live it drives the
   draw itself, against a path whose length it actually knows. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.js) .plot .trace-main {
    stroke-dasharray: 560;
    stroke-dashoffset: 560;
    animation: draw 1.5s 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

.figure-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  line-height: 1.5;
}

.key { display: inline-flex; align-items: center; gap: 7px; }
.key::before {
  content: "";
  width: 16px;
  height: 0;
  border-top-width: 2px;
  border-top-style: solid;
}
.key-main::before { border-top-color: var(--signal); }
.key-base::before { border-top-color: var(--ink-faint); border-top-style: dashed; }

.figure-note {
  flex-basis: 100%;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------
   Simulation controls — revealed by JS once the sim is wired, so
   the figure never shows dead inputs.
   --------------------------------------------------------------- */
.sim-controls[hidden],
.sim-metrics[hidden] { display: none; }

.sim-controls {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  gap: 10px;
}

.sim-field {
  display: grid;
  grid-template-columns: 84px 1fr 100px;
  align-items: center;
  gap: 12px;
}

.sim-name,
.sim-read,
.sim-hint,
.sim-btn,
.sim-metrics {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.sim-name {
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sim-read {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Track and thumb have to be styled per-engine; there is no shorthand
   that lands on both WebKit and Gecko. */
.sim-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
}

.sim-range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--rule);
}
.sim-range::-moz-range-track {
  height: 2px;
  background: var(--rule);
}

.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5.5px;
  border: none;
  border-radius: 50%;
  background: var(--signal);
}
.sim-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: var(--signal);
}

.sim-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--wash); }
.sim-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--wash); }

.sim-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 4px 0 0;
}

.sim-btn {
  padding: 7px 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sim-btn:hover { color: var(--signal); border-color: var(--signal); }

.sim-hint {
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.02em;
}

.sim-metrics {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sim-metrics-caption {
  text-align: left;
  padding-bottom: 8px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sim-metrics th,
.sim-metrics td {
  padding: 7px 0;
  text-align: right;
  font-weight: 400;
  border-bottom: 1px solid var(--rule-soft);
}

.sim-metrics thead th {
  color: var(--ink-faint);
  text-transform: uppercase;
}

.sim-metrics tbody tr:last-child th,
.sim-metrics tbody tr:last-child td { border-bottom: none; }

.sim-who {
  text-align: left;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.02em;
  padding-left: 23px;
  position: relative;
}

.sim-who::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  border-top-width: 2px;
  border-top-style: solid;
}
.sim-who-main::before { border-top-color: var(--signal); }
.sim-who-base::before { border-top-color: var(--ink-faint); border-top-style: dashed; }

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.band {
  background: var(--band);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band-end { border-bottom: none; }

.section {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 40px;
  padding-top: 84px;
  padding-bottom: 84px;
}

/* Used as a <p> on the home page and as the section <h2> on the CV, so the
   weight and size are pinned rather than left to the heading defaults. */
.section-mark {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
}

.section-body { min-width: 0; }

.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.section-intro {
  margin: 0 0 44px;
  color: var(--ink-soft);
  max-width: 40em;
}

/* ---------------------------------------------------------------
   Research entries
   --------------------------------------------------------------- */
.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry {
  border-left: 2px solid var(--rule);
  padding-left: 26px;
  padding-bottom: 38px;
  margin-bottom: 38px;
  border-bottom: 1px solid var(--rule);
  transition: border-left-color 0.18s ease, padding-left 0.18s ease;
}
.entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.entry:hover { border-left-color: var(--signal); padding-left: 32px; }

.entry-tag { margin: 0 0 10px; }

.entry-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 12px;
}

.entry-body {
  margin: 0 0 14px;
  color: var(--ink-soft);
  max-width: 42em;
}

.entry-meta { margin: 0; }

/* The tag/body/meta are spans inside <summary> so the whole card can be the
   toggle while the markup stays valid — they need block layout back. */
.entry-tag,
.entry-body,
.entry-meta { display: block; }

.entry > details { border: 0; }

.entry-summary {
  display: block;
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 34px;
}
.entry-summary::-webkit-details-marker { display: none; }
.entry-summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }

.entry-summary::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.entry:hover .entry-summary::after { border-color: var(--signal); }

/* Keyed off [open] rather than the JS class so the affordance is still
   correct for a visitor with no JavaScript. */
details[open] .entry-summary::after { transform: rotate(-135deg); }

.entry.is-open { border-left-color: var(--signal); }

.entry-cue {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--signal);
}
.entry-cue::before { content: "Read more"; }
details[open] .entry-cue { color: var(--ink-faint); }
details[open] .entry-cue::before { content: "Close"; }

/* Height is animated by JS; overflow has to be clipped for that to read. */
.entry-detail { overflow: hidden; }

.entry-detail-inner {
  padding-top: 22px;
  margin-top: 20px;
  border-top: 1px solid var(--rule);
  max-width: 42em;
}

.entry-detail-inner p {
  margin: 0 0 1.1em;
  color: var(--ink-soft);
  font-size: 17px;
}
.entry-detail-inner p:last-child { margin-bottom: 0; }

.entry-spec {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 6px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.entry-spec dt {
  color: var(--ink-faint);
  text-transform: uppercase;
}
.entry-spec dd {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   Reveal on scroll — the class is only added by JS, and only when
   the visitor has not asked for reduced motion.
   --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.55s ease var(--reveal-delay, 0ms),
    transform 0.55s cubic-bezier(0.22, 0.68, 0.32, 1) var(--reveal-delay, 0ms);
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* .entry already owns a transition; re-state it here or the reveal rule
   replaces it and the hover shift becomes instant. */
.entry.reveal {
  transition:
    opacity 0.55s ease var(--reveal-delay, 0ms),
    transform 0.55s cubic-bezier(0.22, 0.68, 0.32, 1) var(--reveal-delay, 0ms),
    border-left-color 0.18s ease,
    padding-left 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------
   Post list
   --------------------------------------------------------------- */
.postlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.postrow { border-bottom: 1px solid var(--rule); }

.postrow > a {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  text-decoration: none;
  color: var(--ink);
}

.postrow > a:hover .postrow-title { color: var(--signal); }

.postrow-date { display: block; }

.postrow-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.postrow-summary {
  margin: -8px 0 20px;
  padding-left: 168px;
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 52em;
}

.more { margin: 34px 0 0; font-family: var(--mono); font-size: 13px; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Prose pages
   --------------------------------------------------------------- */
.prose-page {
  padding-top: 76px;
  padding-bottom: 90px;
  max-width: 760px;
}

.prose-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.13;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.prose-lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 40px;
}

.prose { font-size: 19px; line-height: 1.72; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.35em; }

.prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 2.2em 0 0.6em;
}

.prose h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  margin: 1.9em 0 0.5em;
}

.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }

.prose blockquote {
  margin: 1.6em 0;
  padding-left: 22px;
  border-left: 2px solid var(--signal);
  color: var(--ink-soft);
  font-style: italic;
}

.prose code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--wash);
  padding: 2px 5px;
}

.prose pre {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 1.5em;
}
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

.prose img { display: block; border: 1px solid var(--rule); }

.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: 16px; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 9px 10px; text-align: left; }
.prose th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }

.back { margin-top: 58px; padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; }
.back a { text-decoration: none; }
.back a:hover { text-decoration: underline; }

.section-lead { padding-top: 76px; }

/* ---------------------------------------------------------------
   CV
   --------------------------------------------------------------- */
.cv-head {
  padding-top: 76px;
  padding-bottom: 70px;
  max-width: 860px;
  margin-left: 0;
}

.cv-strap {
  font-family: var(--display);
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.cv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 30px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
}
.cv-contact a { text-decoration: none; }
.cv-contact a:hover { text-decoration: underline; }

.cv-profile {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  max-width: 44em;
}

.cv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cv-item {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--rule);
}
.cv-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Date sits on the title's baseline on wide screens and drops above the title
   on narrow ones — hence the flex row rather than a grid column. */
.cv-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap-reverse;
  margin-bottom: 4px;
}

.cv-role {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

.cv-mode { color: var(--ink-faint); font-weight: 400; }

.cv-when {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.cv-where {
  margin: 0 0 12px;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
}

.cv-points {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 44em;
}

.cv-points li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--ink-soft);
}
.cv-points li:last-child { margin-bottom: 0; }

.cv-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 8px;
  height: 1px;
  background: var(--signal);
}

.cv-points-flat li { margin-bottom: 12px; }

.cv-skills {
  margin: 0;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 14px 28px;
  max-width: 48em;
}

.cv-skills dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}

.cv-skills dd {
  margin: 0;
  font-size: 17px;
  color: var(--ink-soft);
}

.cv-foot {
  margin: 40px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
}
.cv-foot a { text-decoration: none; }
.cv-foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Practice — condensed experience on the home page
   --------------------------------------------------------------- */
.practice {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.practice-row {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

.practice-when {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.practice-what { margin: 0; min-width: 0; }

.practice-role {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 5px;
}

.practice-org { color: var(--ink-faint); font-weight: 400; }

.practice-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 46em;
}

/* ---------------------------------------------------------------
   Colophon
   --------------------------------------------------------------- */
.colophon {
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.colophon-inner {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding: 34px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.colophon-line { margin: 0; }
.colophon-links { display: flex; gap: 20px; }
.colophon-links a { color: var(--ink-soft); text-decoration: none; }
.colophon-links a:hover { color: var(--signal); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 62px;
    padding-bottom: 62px;
  }
  .section-mark { display: inline-block; margin-top: 0; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .masthead { padding-top: 20px; padding-bottom: 18px; }
  .nav { gap: 18px; }
  .postrow > a { grid-template-columns: 1fr; gap: 6px; padding: 17px 0; }
  .postrow-summary { padding-left: 0; margin-top: -6px; }
  .entry { padding-left: 18px; }
  .entry:hover { padding-left: 22px; }
  .prose-lede { font-size: 19px; }
  .prose { font-size: 18px; }

  /* Rows are explicit: with auto-placement the full-width slider pushes the
     readout onto a third row, away from the label it belongs to. */
  .sim-field { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .sim-name { grid-column: 1; grid-row: 1; }
  .sim-read { grid-column: 2; grid-row: 1; }
  .sim-range { grid-column: 1 / -1; grid-row: 2; }
  .sim-metrics { font-size: 11px; }
  .sim-who { padding-left: 0; }
  .sim-who::before { display: none; }
  .entry-spec { grid-template-columns: 1fr; gap: 2px; }
  .entry-spec dd { margin-bottom: 8px; }

  .cv-head { padding-top: 52px; padding-bottom: 50px; }
  .cv-skills { grid-template-columns: 1fr; gap: 4px; }
  .cv-skills dd { margin-bottom: 14px; }
  .cv-skills dd:last-child { margin-bottom: 0; }
  .practice-row { grid-template-columns: 1fr; gap: 6px; }
}