/* ==========================================================================
   SEO Portfolio: shared stylesheet
   --------------------------------------------------------------------------
   ORGANISATION
   01. Design tokens
   02. Reset and base elements
   03. Typography
   04. Layout helpers
   05. Skip link and focus states
   06. Header and navigation
   07. Buttons and text links
   08. Hero
   09. Lists: focus, entries, related
   10. Cards (projects and case study)
   11. Tags and meta text
   12. Sections
   13. Prose (article body)
   14. Article header, table of contents, author box
   15. Tables
   16. Callouts
   17. Figures and images
   18. Breadcrumbs
   19. Contact page
   20. Error page
   21. Footer
   22. Responsive breakpoints
   23. Reduced motion and print

   The whole site is themed from section 01. Change the tokens there and every
   page follows: there are no per-page colour overrides anywhere.
   ========================================================================== */

/* 01. Design tokens ------------------------------------------------------- */
:root {
  /* Paper surfaces */
  --bg: #fbfaf7;
  --bg-alt: #f5f3ed;
  --surface: #ffffff;
  --border: #e0dcd1;
  --border-soft: #eae7de;

  /* Ink */
  --text: #1c1b18;
  --text-muted: #4f4c45;
  --text-dim: #6e6a61;

  /* One accent colour: deep green, used sparingly */
  --accent: #2c5f4a;
  --accent-strong: #1d4534;
  --accent-ink: #ffffff;
  --accent-soft: #e9efea;
  --accent-border: #cbdcd2;
  --link-underline: #a9c3b6;

  /* Warning callout (used by the case study) */
  --warn-bg: #fdf7e6;
  --warn-border: #efe2bf;
  --warn-left: #9a6a00;
  --warn-text: #7d5600;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas,
    "Liberation Mono", monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Layout */
  --container: 1080px;
  --container-narrow: 720px;
  --radius: 3px;
  --header-h: 68px;

  color-scheme: light;
}

/* Dark theme. Same warm, paper-like feel, inverted.
   Applied by the small inline script in each page's <head>. */
[data-theme="dark"] {
  --bg: #171614;
  --bg-alt: #1e1c19;
  --surface: #201e1b;
  --border: #37332c;
  --border-soft: #2a2721;

  --text: #edeae2;
  --text-muted: #b9b4a8;
  --text-dim: #9a9488;

  --accent: #8fc3ab;
  --accent-strong: #b4dcc9;
  --accent-ink: #10201a;
  --accent-soft: #22332b;
  --accent-border: #355045;
  --link-underline: #4f6e60;

  --warn-bg: #2a2418;
  --warn-border: #4a3d22;
  --warn-left: #c79a3a;
  --warn-text: #e0be74;

  color-scheme: dark;
}

/* 02. Reset and base elements --------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchor targets clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 0.18em;
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* 03. Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.3rem);
}

h2 {
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.9rem);
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.32rem);
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 1px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}

strong {
  font-weight: 650;
}

small {
  font-size: 0.875rem;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.1em 0.34em;
  color: var(--text);
  overflow-wrap: break-word;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.65;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  overflow-x: auto;
  margin: 0 0 var(--space-5);
  tab-size: 2;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

blockquote {
  margin: 0 0 var(--space-5);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 1.15rem;
}

blockquote p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  padding-left: 1.3rem;
}

li {
  margin-bottom: var(--space-2);
}

li::marker {
  color: var(--text-dim);
}

/* 04. Layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 05. Skip link and focus states ------------------------------------------ */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
  padding: 0.7rem 1.15rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: transform 140ms ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--accent-ink);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus {
  outline: none;
}

/* 06. Header and navigation ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

/* A slightly stronger rule once the page is scrolled. No blur, no shadow. */
.site-header.is-scrolled {
  border-bottom-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
}

.brand-sub {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Nav, theme toggle and mobile menu button share one row on the right. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* Theme toggle: a quiet bordered square, matching the mobile menu button. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  color: var(--text);
}

.theme-toggle:hover {
  border-color: var(--text-dim);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Show the moon in light mode and the sun in dark mode. */
.theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav li {
  margin: 0;
}

.primary-nav a {
  display: block;
  padding: 0.35rem 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.primary-nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.primary-nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Mobile menu button: hidden until the small breakpoint */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  color: var(--text);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 160ms ease, opacity 120ms ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: relative;
}

.nav-toggle-bars::before {
  top: -5px;
}

.nav-toggle-bars::after {
  top: 3.5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: -1.5px;
  transform: rotate(-45deg);
}

/* 07. Buttons and text links ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.66rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease,
    color 140ms ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--primary:hover {
  background: var(--accent-strong);
  color: var(--accent-ink);
}

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

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

.btn--small {
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
  padding-bottom: 1px;
}

.link-arrow::after {
  content: "\2192";
  transition: transform 140ms ease;
}

.link-arrow:hover {
  border-bottom-color: var(--accent-strong);
}

.link-arrow:hover::after {
  transform: translateX(2px);
}

/* 08. Hero ---------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--border-soft);
}

.hero h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}

/* The role line sits directly under the name, so the two read together. */
.hero-role {
  font-size: 1.02rem;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.hero-role .sep {
  color: var(--border);
  margin-inline: 0.5rem;
}

.hero .lead {
  margin-bottom: var(--space-6);
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.16rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 58ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-4);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

/* 09. Lists: focus, entries, related -------------------------------------- */
/* Four tiles used for "what I am working on". */
.focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.focus-list > div {
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.focus-list dt {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.focus-list dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Ruled rows used for projects and posts. Replaces the old card grid. */
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 2rem;
  align-items: baseline;
  margin: 0;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.entry h3 {
  font-size: 1.14rem;
  margin: 0 0 0.3rem;
}

.entry h3 a {
  color: var(--text);
  text-decoration: none;
}

.entry h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.entry p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 62ch;
}

.entry .entry-kicker {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}

.entry .entry-meta {
  color: var(--text-dim);
  font-size: 0.82rem;
  white-space: nowrap;
  text-align: right;
}

.related {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.related h2 {
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

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

.related-list li {
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.related-list a {
  font-weight: 600;
  text-decoration: none;
  display: block;
}

.related-list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.related-list span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* 10. Cards (projects and case study) ------------------------------------- */
.section-grid {
  display: grid;
  gap: var(--space-5);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 140ms ease;
}

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

.card h3 {
  font-size: 1.12rem;
  margin-bottom: var(--space-3);
}

.card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}

.card p:last-child {
  margin-bottom: 0;
}

/* Whole-card link overlay: the heading link is the real, descriptive anchor */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-link {
  text-decoration: none;
  color: inherit;
}

.card-link:focus-visible {
  outline: none;
}

.card:has(.card-link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.card-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: var(--text-dim);
}

.card--flat {
  background: var(--bg-alt);
  border-color: var(--border-soft);
}

/* Used for closing calls to action. Flat tint, no gradient. */
.card--accent {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.article-card h3 {
  font-size: 1.14rem;
}

.article-card .card-foot {
  border-top: 1px solid var(--border-soft);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}

.project-card {
  overflow: hidden;
}

.project-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}

.project-card .card-side {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-4);
}

/* 11. Tags and meta text -------------------------------------------------- */
.tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
}

a.tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0;
}

.meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.meta-sep {
  color: var(--border);
}

/* 12. Sections ------------------------------------------------------------ */
.section {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

.section--tight {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border-soft);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.section-head h2 {
  margin: 0 0 var(--space-2);
}

.section-head p {
  margin: 0;
  color: var(--text-muted);
  max-width: 60ch;
  font-size: 0.9688rem;
}

.section-head > div {
  min-width: 0;
}

.page-intro {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--border-soft);
}

.page-intro h1 {
  margin-bottom: var(--space-4);
}

.page-intro .lead {
  margin-bottom: 0;
}

/* Closing contact band on the homepage. */
.contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.contact-cta h2 {
  margin-bottom: var(--space-2);
}

.contact-cta p {
  margin: 0;
  color: var(--text-muted);
  max-width: 52ch;
}

/* 13. Prose (article body) ------------------------------------------------ */
.prose {
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose h4 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.prose p,
.prose ul,
.prose ol,
.prose table,
.prose pre,
.prose blockquote,
.prose figure {
  margin-bottom: var(--space-5);
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.prose li > ul,
.prose li > ol {
  margin-bottom: var(--space-2);
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose a {
  text-decoration: underline;
}

/* 14. Article header, TOC, author box ------------------------------------- */
.article-header {
  padding-block: clamp(2rem, 4vw, 3rem) var(--space-5);
}

.article-header h1 {
  max-width: 24ch;
  margin-bottom: var(--space-4);
}

.article-header .lead {
  margin-bottom: var(--space-5);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.article-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  font-size: 0.9rem;
}

.toc {
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}

.toc h2 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--space-3);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.toc li {
  margin: 0;
  counter-increment: toc;
}

.toc a {
  display: block;
  padding: 0.32rem 0 0.32rem 1.7rem;
  position: relative;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.855rem;
  line-height: 1.45;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}

.toc a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toc a[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
}

.toc a[aria-current="true"]::before {
  color: var(--accent);
}

.author-box {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.author-box img,
.author-box .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.author-box h2 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  margin: 0 0 var(--space-2);
}

.author-box p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.author-box .author-links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.85rem;
}

/* 15. Tables -------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-5);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9125rem;
  min-width: 32rem;
}

caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

th,
td {
  text-align: left;
  padding: 0.7rem var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

thead th {
  background: var(--bg-alt);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody th {
  font-weight: 600;
  color: var(--text);
}

/* Short comparison tables can fit a narrow screen instead of scrolling. */
@media (max-width: 560px) {
  table.table--compact {
    min-width: 0;
  }

  table.table--compact th,
  table.table--compact td {
    padding: 0.55rem 0.6rem;
    font-size: 0.85rem;
  }

  table.table--compact caption {
    padding: 0.55rem 0.6rem;
    font-size: 0.72rem;
  }

  /* Stacked metadata reads better without a dangling separator. */
  .meta-sep {
    display: none;
  }
}

/* 16. Callouts ------------------------------------------------------------ */
.callout {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-alt);
  font-size: 0.9688rem;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-title {
  display: block;
  font-weight: 650;
  color: var(--accent-strong);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.callout--warn {
  border-left-color: var(--warn-left);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.callout--warn .callout-title {
  color: var(--warn-text);
}

/* 17. Figures and images -------------------------------------------------- */
figure {
  margin: 0 0 var(--space-5);
}

figure img,
figure svg {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

figcaption {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.55;
}

figcaption span {
  display: block;
  margin-top: 0.2rem;
}

/* 18. Breadcrumbs --------------------------------------------------------- */
.breadcrumbs {
  padding-top: var(--space-4);
  font-size: 0.82rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-dim);
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--border);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
}

/* 19. Contact page -------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.contact-list li {
  margin: 0;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: border-color 140ms ease;
}

.contact-item:hover {
  border-color: var(--accent);
  color: var(--text);
}

.contact-item .contact-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.contact-item .contact-value {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.contact-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}

/* 20. Error page ---------------------------------------------------------- */
.error-page {
  display: grid;
  place-items: center;
  min-height: 56vh;
  text-align: center;
  padding-block: var(--space-8);
}

.error-code {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 11vw, 7rem);
  line-height: 1;
  color: var(--border);
  margin: 0 0 var(--space-4);
}

.error-page p {
  max-width: 50ch;
  margin-inline: auto;
  color: var(--text-muted);
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* 21. Footer -------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-alt);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: var(--space-3) 0 0;
  max-width: 44ch;
}

.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--space-3);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin: 0 0 var(--space-2);
}

.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
}

.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* 22. Responsive breakpoints ---------------------------------------------- */
@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On small screens the TOC moves above the article body */
  .article-aside {
    position: static;
    order: -1;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  :root {
    --header-h: 62px;
  }

  body {
    font-size: 1rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-tools {
    gap: 0.5rem;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: none;
    padding: var(--space-3) clamp(1.15rem, 4vw, 2.5rem) var(--space-4);
  }

  .primary-nav.is-open {
    display: block;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav a {
    padding: 0.7rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-soft);
  }

  .primary-nav li:last-child a {
    border-bottom: 0;
  }

  .grid-2,
  .grid-3,
  .focus-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-head {
    align-items: flex-start;
  }

  .article-header h1 {
    max-width: none;
  }

  .entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .entry .entry-meta {
    text-align: left;
    white-space: normal;
  }

  .contact-cta {
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 520px) {
  .btn-row {
    align-items: stretch;
  }

  .btn-row .btn {
    width: 100%;
  }

  .author-box {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 23. Reduced motion and print -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .article-aside,
  .skip-link,
  .btn-row,
  .related {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #111111;
    font-size: 11pt;
  }

  h1,
  h2,
  h3,
  h4,
  strong,
  a {
    color: #111111;
  }

  .prose a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
  }

  .callout,
  .table-wrap,
  .author-box,
  .card {
    background: #ffffff;
    border-color: #cccccc;
  }
}