/*
  One stylesheet for the whole site.
  Colors live in the variables up top. Dark mode just swaps them,
  so if you change the accent, change it in both places.

  The CSP only allows files from this site (no inline styles, no outside
  fonts), so every bit of styling lives here and the fonts sit in /fonts.
*/

/* ---------- fonts ---------- */
/* IBM Plex, self-hosted (SIL Open Font License, see /fonts/OFL.txt). Latin subset only. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- colors and type ---------- */

:root {
  --bg: #f5f6f4;          /* cool off-white page */
  --card: #ffffff;        /* cards and bands sit on this */
  --surface: #e9ecea;     /* code, diagram wells */
  --text: #15191d;
  --body: #3a434c;        /* paragraph text, a step softer than headings */
  --muted: #4f5963;       /* ~6.8:1 on --bg, fine for small text */
  --rule: #dadfe2;
  --rule-strong: #c5ccd1;
  --accent: #0a6464;      /* deep teal, the only color on the page */
  --accent-ink: #ffffff;  /* text on an accent fill */
  --accent-soft: #e1eeec;
  --accent-soft-ink: #0a5454;
  --ink: #15191d;         /* the dark band and featured post */
  --ink-text: #f5f6f4;
  --ink-muted: #c9d0d5;
  --ink-accent: #8fd3ca;
  --ink-rule: #5a646d;
  --warn-soft: #f7ebd9;   /* "In development" pills */
  --warn-ink: #7a4a00;
  --todo: #9a5b00;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --page: 75rem;          /* 1200px: header, footer, and wide pages */
  --measure: 44rem;       /* reading width for posts */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111417;
    --card: #181c20;
    --surface: #20262b;
    --text: #e8eaec;
    --body: #c3c9ce;
    --muted: #9aa3ac;
    --rule: #2a3036;
    --rule-strong: #3a424a;
    --accent: #6cc6bb;
    --accent-ink: #0b1f1d;
    --accent-soft: #1a2b2a;
    --accent-soft-ink: #8fd3ca;
    --ink: #1f2529;
    --ink-text: #e8eaec;
    --ink-muted: #b4bcc3;
    --ink-accent: #8fd3ca;
    --ink-rule: #4a545d;
    --warn-soft: #3a2a10;
    --warn-ink: #f0b35a;
    --todo: #f0b35a;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hidden until someone tabs to it. Keyboard users get to skip the nav. */
.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--text);
  color: var(--bg);
  padding: 0.4rem 0.8rem;
  z-index: 10;
}
.skip:focus { top: 0.75rem; }

/* ---------- header ---------- */

.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text);
  text-decoration: none;
}
/* The little teal square next to the name */
.site-name::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-family: var(--mono);
  font-size: 0.875rem;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 0.6rem 0.75rem;
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------- base type ---------- */

main { padding: 0 0 6rem; }
main.wrap { padding-top: 4rem; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; color: var(--text); }
h1 { font-size: 3rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1rem; }
h2 { font-size: 2rem; font-weight: 600; margin: 0 0 0.75rem; }
h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
h4 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.4rem; }

p, ul, ol, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin: 0.3rem 0; }

.lede { font-size: 1.25rem; color: var(--body); max-width: 46ch; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

/* Mono labels: section kickers, dates, tags */
.kicker {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 1rem;
}
.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface);
  padding: 0.08em 0.3em;
  border-radius: 4px;
}

/* Whole records or config blocks in posts. Scrolls sideways on phones instead of wrapping. */
pre {
  background: var(--surface);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.button:hover { filter: brightness(1.08); }
.button.secondary { background: transparent; color: var(--text); border-color: var(--rule-strong); }
.button.secondary:hover { border-color: var(--text); filter: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------- page sections ---------- */

.page-intro { padding: 5rem 0 3rem; }
.page-intro h1 { max-width: 22ch; }
.page-intro .lede { margin-bottom: 0; }

.section { padding-top: 5.5rem; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.section-head h2 { margin: 0; font-size: 1.75rem; }
.section-head a { font-family: var(--mono); font-size: 0.875rem; }

/* Full-width white band, used for the numbers strip */
.band { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ---------- home hero ---------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3rem;
  padding: 6rem 0 4.5rem;
}
.hero-main { flex: 999 1 34rem; min-width: 0; }
.hero-main h1 { font-size: 3.5rem; line-height: 1.08; max-width: 16ch; margin: 0; }
.hero-side { flex: 1 1 20rem; min-width: 0; color: var(--body); }
.hero-side p { margin: 0; }

/* ---------- numbers strip ---------- */

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.stats li { margin: 0; padding: 2rem 1.5rem 2rem 0; }
.stats .num {
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--accent);
}
.stats .what { display: block; font-size: 0.95rem; color: var(--muted); margin-top: 0.25rem; }
.stats-note { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin: 0; padding-bottom: 1.25rem; }

/* ---------- cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.75rem;
}
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}
.card-grid > li { margin: 0; }

/* Home highlights */
.highlight { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; }
.highlight .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.highlight h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.highlight p { margin: 0; color: var(--body); font-size: 1rem; flex-grow: 1; }
.highlight .more { font-weight: 500; font-size: 0.95rem; }

/* Status pills */
.status {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}
.status.progress { background: var(--warn-soft); color: var(--warn-ink); }

/* Tech tags */
.tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.tags li {
  margin: 0;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--body);
}

/* ---------- "What I work on" grid ---------- */

.domains {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  border-top: 1px solid var(--rule);
}
.domains > div { padding: 1.5rem 2rem 1.5rem 0; border-bottom: 1px solid var(--rule); }
.domains dt {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.domains dd { margin: 0; color: var(--body); font-size: 1rem; }
.domains .quiet dt { color: var(--muted); }

/* ---------- post lists (Home and Writing) ---------- */

.post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.post-list li { margin: 0; border-bottom: 1px solid var(--rule); }
.post-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 2rem;
  padding: 1.15rem 0;
  color: var(--text);
  text-decoration: none;
}
.post-list a:hover .title { color: var(--accent); }
.post-list time {
  flex: 0 0 7.5rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.post-list .title { flex: 1 1 25rem; font-size: 1.125rem; font-weight: 500; }

/* The fuller version on the Writing page: description and topic under each title */
.post-list.detailed a { padding: 1.5rem 0; }
.post-list.detailed .text { flex: 1 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
/* flex: none, or the row rule above (flex-basis 25rem) turns into a 25rem height in this column */
.post-list.detailed .title { flex: none; font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.post-list.detailed .desc { font-size: 0.95rem; color: var(--muted); }
.topic {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--body);
}

/* Newest post on the Writing page */
.featured {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--ink);
  color: var(--ink-text);
  border-radius: 12px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  text-decoration: none;
}
.featured .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-muted); }
.featured .meta .latest { color: var(--ink-accent); }
.featured .meta .topic { color: var(--ink-muted); border-color: var(--ink-rule); }
.featured .title { font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; color: var(--ink-text); }
.featured .desc { color: var(--ink-muted); max-width: 70ch; }
.featured .go { color: var(--ink-accent); font-weight: 500; }
.featured:hover .title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* ---------- dark call-to-action band ---------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  background: var(--ink);
  color: var(--ink-text);
  border-radius: 12px;
  padding: 3rem;
}
.cta h2 { flex: 1 1 26rem; min-width: 0; margin: 0; font-size: 1.75rem; color: var(--ink-text); }
.cta .button { background: var(--ink-text); color: var(--ink); border-color: var(--ink-text); }

/* ---------- Work: side menu + content ---------- */

.with-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3rem;
  padding-top: 4rem;
}
.toc { flex: 1 1 12.5rem; min-width: 0; font-family: var(--mono); font-size: 0.875rem; }
.toc .label { color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: 0.4rem 0.75rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.toc a:hover { background: var(--accent-soft); color: var(--accent-soft-ink); }
.toc .sub a { padding-left: 1.5rem; color: var(--muted); }
.content { flex: 999 1 35rem; min-width: 0; display: flex; flex-direction: column; gap: 2rem; }

.work-section { display: flex; flex-direction: column; gap: 1.5rem; }
.work-section + .work-section { padding-top: 3rem; border-top: 1px solid var(--rule); }
.work-section > h2 { margin: 0; }
.work-section > p { margin: 0; color: var(--body); max-width: 68ch; }
.work-section h3.sub { margin: 1rem 0 0; font-size: 1.25rem; }

/* A case study: header, then its sections side by side */
.case {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.case-head {
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.case-head h3 { margin: 0; font-size: 1.6rem; line-height: 1.25; }
.case-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.case-body {
  padding: 1.75rem 2rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
  gap: 2rem;
}
.case-block h4 { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; }
.case-block p, .case-block ul { color: var(--body); font-size: 1rem; margin: 0 0 0.5rem; }
.case-block li { margin: 0.35rem 0; }
.case-block strong { color: var(--text); }
.case-block.wide { grid-column: 1 / -1; }
.case-block.outcome { align-self: start; background: var(--accent-soft); border-radius: 10px; padding: 1.25rem 1.5rem; }
.case-block.outcome h4 { color: var(--accent-soft-ink); }
.case-block.outcome p { color: var(--text); }

/* Side projects: smaller cards in a grid */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 1rem; }
.project {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.project h3 { margin: 0; font-size: 1.2rem; }
.project p { margin: 0; color: var(--body); font-size: 0.95rem; }
.project .status-line { margin: 0; }
.project .links { margin-top: auto; padding-top: 0.25rem; font-weight: 500; font-size: 0.95rem; }

/* Toolbox and "More client projects" */
.toolbox {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  column-gap: 2rem;
  border-top: 1px solid var(--rule);
}
.toolbox li { margin: 0; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; color: var(--body); }
.toolbox strong { color: var(--text); }

.compact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.compact li {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.25rem;
  font-size: 0.95rem;
  color: var(--body);
}
.compact strong { display: block; color: var(--text); font-size: 1rem; margin-bottom: 0.25rem; }

/* "Earlier" and CV experience: a line down the left */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); display: flex; flex-direction: column; gap: 2.25rem; }
.timeline > li { margin: 0; padding-left: 1.75rem; }
.timeline .role { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1.5rem; }
.timeline .role h3 { margin: 0; font-size: 1.3rem; }
.timeline .when { margin: 0; font-family: var(--mono); font-size: 0.875rem; color: var(--muted); }
.timeline .where { margin: 0.15rem 0 0.85rem; color: var(--muted); }
.timeline ul { color: var(--body); font-size: 1rem; }

/* ---------- diagram ---------- */

figure.diagram {
  margin: 0;
  padding: 1.5rem 1rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
figure.diagram svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
figure.diagram figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin-top: 0.75rem; text-align: center; }

/* SVG styling lives here so it follows dark mode automatically */
.dg-box { fill: var(--card); stroke: var(--rule-strong); stroke-width: 1.5; }
.dg-box.key { fill: var(--accent-soft); stroke: var(--accent); }
.dg-title { fill: var(--text); font: 600 15px var(--sans); }
.dg-sub { fill: var(--muted); font: 13px var(--sans); }
.dg-line { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.dg-head { fill: var(--muted); }
.dg-label { fill: var(--accent); font: 12px var(--mono); }

/* ---------- CV ---------- */

.cv-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; }
.cv-intro > div { flex: 999 1 34rem; min-width: 0; }
.cv-intro h1 { margin: 0; }
.cv-intro .lede { margin: 0.75rem 0 0; }

.two-col { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem; }
.two-col > .main-col { flex: 999 1 35rem; min-width: 0; display: flex; flex-direction: column; gap: 3.5rem; }
.two-col > .side-col { flex: 1 1 19rem; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }

.card h2.label { font-size: 0.8rem; margin-bottom: 1rem; }
.card > p:last-child, .card > ul:last-child { margin-bottom: 0; }
.summary p { color: var(--body); }

.pointer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.pointer > div { flex: 1 1 22rem; min-width: 0; }
.pointer h2 { font-size: 1.3rem; margin: 0 0 0.35rem; }
.pointer p { margin: 0; color: var(--body); }

.certs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.certs li { margin: 0; display: flex; gap: 0.75rem; align-items: baseline; }
.certs abbr, .certs .code { flex: 0 0 4.75rem; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; text-decoration: none; color: var(--text); }
.certs .name { font-size: 0.95rem; color: var(--body); }

.stack { margin: 0; }
.stack div + div { margin-top: 1.1rem; }
.stack dt { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
.stack dd { margin: 0; font-size: 0.875rem; color: var(--body); }

.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem; color: var(--body); }
.side-list li { margin: 0; }
.side-list strong { color: var(--text); }

/* ---------- posts ---------- */
/* Posts keep a comfortable reading width inside the wider page */

main.wrap > article,
main.wrap > article ~ p { max-width: var(--measure); }
main.wrap > article h1 { font-size: 2.5rem; line-height: 1.15; }
main.wrap > article h2 { font-size: 1.5rem; margin: 2.75rem 0 0.75rem; }
main.wrap > article h3 { font-size: 1.15rem; }
main.wrap > article p,
main.wrap > article li { color: var(--body); }
main.wrap > article strong { color: var(--text); }

.post-meta { font-family: var(--mono); font-size: 0.875rem; color: var(--muted); margin: -0.25rem 0 2rem; }

/* ---------- CV download ---------- */

.download { white-space: nowrap; }

/* ---------- TODO markers ---------- */
/* Loud on purpose. If you can see one of these, the page isn't done yet. */
.todo {
  color: var(--todo);
  border: 1px dashed currentColor;
  border-radius: 3px;
  padding: 0 0.3em;
  font-size: 0.9em;
}

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--rule); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.site-footer li { margin: 0; }
.site-footer p { margin: 0; }

/* LinkedIn embed. The iframe comes with a fixed width, so let it shrink on phones. */
.embed-linkedin {
  display: block;
  width: 100%;
  max-width: 504px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
}

/* ---------- phones ---------- */

@media (max-width: 40rem) {
  .wrap { padding: 0 1rem; }
  h1, .page-intro h1 { font-size: 2.25rem; }
  .hero { padding: 3.5rem 0 3rem; gap: 2rem; }
  .hero-main h1 { font-size: 2.4rem; }
  .page-intro { padding: 3rem 0 2rem; }
  .section { padding-top: 3.5rem; }
  main.wrap { padding-top: 2.5rem; }
  main.wrap > article h1 { font-size: 2rem; }
  .case-head, .case-body { padding-left: 1.25rem; padding-right: 1.25rem; }
  .cta, .featured { padding: 2rem 1.5rem; }
  .featured .title { font-size: 1.5rem; }
  .domains > div { padding-right: 0; }
  /* Two numbers per row on phones instead of four tall rows */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li { padding: 1.5rem 1rem 1.5rem 0; }
  .stats .num { font-size: 2rem; }
}

/* "Earlier" on the Work page: a short title and a line of detail per entry */
.timeline > li > h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.timeline > li > p { margin: 0; color: var(--body); font-size: 1rem; }

/* CV education card: tight lines, the dates in mono */
.education p { margin: 0; color: var(--body); font-size: 0.95rem; }
.education .degree { color: var(--text); font-size: 1rem; }
.education .when { margin-top: 0.4rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }