/*
  reynolds.codes
  One stylesheet shared by the homepage, case studies and notes.

  1. Fonts          5. Layout primitives     9. How I work     13. Prose (notes, case studies)
  2. Tokens         6. Nav                  10. Experience     14. Motion
  3. Base           7. Hero                 11. Contact        15. Responsive
  4. Type           8. Work index           12. Footer         16. Print
*/

/* ── 1. Fonts: self-hosted, latin subset, variable ─────────────────────── */

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Metric-matched fallbacks, so the swap to web fonts doesn't shift layout */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia Italic'), local('Georgia');
  font-style: italic;
  size-adjust: 92%;
  ascent-override: 112%;
  descent-override: 36%;
  line-gap-override: 0%;
}

/* ── 2. Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Colour: architectural neutrals, one restrained accent */
  --bg: #F7F7F4;
  --surface: #EEEFEA;
  --border: #D9DDD6;
  --text: #202421;
  --text-2: #5C625C;
  --accent: #315B50;
  --accent-line: color-mix(in srgb, var(--accent) 35%, transparent);
  --selection: color-mix(in srgb, var(--accent) 16%, transparent);

  /* Type */
  --font-sans: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: 0.8125rem;                                        /* 13px metadata */
  --step-0: clamp(1rem, 0.948rem + 0.22vw, 1.125rem);          /* 16 → 18 body */
  --step-1: clamp(1.125rem, 1.021rem + 0.44vw, 1.375rem);      /* 18 → 22 intro */
  --step-2: clamp(1.375rem, 1.219rem + 0.66vw, 1.75rem);       /* 22 → 28 titles */
  --step-3: clamp(1.75rem, 1.438rem + 1.33vw, 2.5rem);         /* 28 → 40 sections */
  --step-4: clamp(2.375rem, 1.594rem + 3.33vw, 4.25rem);       /* 38 → 68 hero */

  /* Space: 4px base */
  --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;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --max: 70rem;                                                /* 1120px */
  --gutter: clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem);
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --nav-h: 3.75rem;
  --section-space: clamp(4rem, 2.5rem + 5.5vw, 7rem);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  color-scheme: light dark;
  interpolate-size: allow-keywords;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131513;
    --surface: #1B1E1C;
    --border: #2C302D;
    --text: #E5E7E2;
    --text-2: #9BA29C;
    --accent: #8FB8A8;
    --selection: color-mix(in srgb, var(--accent) 24%, transparent);
  }
}

/* ── 3. Base ───────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

ul,
ol {
  list-style: none;
}

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

img,
video {
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: var(--selection);
}

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

main:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  font-size: var(--step--1);
  color: var(--bg);
  background: var(--text);
  border-radius: 4px;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ── 4. Type ───────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-weight: 500;
  text-wrap: balance;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Inline link: quiet underline that firms up on hover */
.link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

.link:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* Arrow-led link (GitHub ↗, Read the case study →): underline draws from the left */
.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.arrow-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.arrow-link .icon {
  width: 0.8em;
  height: 0.8em;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .arrow-link:hover { color: var(--accent); }
  .arrow-link:hover::after { transform: scaleX(1); }
  .arrow-link:hover .icon { transform: translate(2px, -2px); }
  .arrow-link:hover .icon--right { transform: translateX(3px); }
}

.arrow-link:focus-visible::after {
  transform: scaleX(1);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
}

/* Small label used for Built / Led and Engineering / Management */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
}

.tag::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.tag--solid::before {
  background: currentColor;
}

/* ── 5. Layout primitives ──────────────────────────────────────────────── */

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* Section: a rail (cols 1–4) with number + heading, content in cols 5–12 */
.section {
  padding-top: var(--section-space);
}

.section-grid {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  row-gap: var(--space-6);
}

.section-head {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + var(--space-6));
}

.section-num {
  display: block;
  margin-bottom: var(--space-2);
}

.section-title {
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.section-aside {
  margin-top: var(--space-4);
  max-width: 24ch;
}

.section-body {
  grid-column: 5 / -1;
  min-width: 0;
}

/* Wide sections let their content span all 12 columns under the head */
.section--wide .section-head {
  position: static;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
}

.section--wide .section-head > :first-child {
  grid-column: 1 / span 4;
}

.section--wide .section-aside {
  grid-column: 5 / -1;
  margin: 0;
  max-width: none;
}

.section--wide .section-body {
  grid-column: 1 / -1;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 34em;
}

/* ── 6. Nav ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-slow) ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.nav-name {
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

/* With JS, the name joins the nav once the hero's own name scrolls away.
   visibility (not just opacity) keeps the hidden link out of the tab order. */
.js .site-header:not(.is-scrolled) .nav-name {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current] {
  color: var(--text);
}

.nav-links a[aria-current]::after {
  transform: scaleX(1);
}

/* Back link on case studies and notes */
.nav-back .icon {
  width: 0.8em;
  height: 0.8em;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .nav-back:hover .icon { transform: translateX(-3px); }
}

/* ── 7. Hero ───────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(2rem, 0.5rem + 4vw, 3.5rem);
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  row-gap: 0;
}

/* The hero already ends with generous space; the first section doesn't add more */
.hero + .section {
  padding-top: 0;
}

.hero-meta {
  grid-column: 1 / -1;
}

.hero-name {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hero-role {
  color: var(--text-2);
}

.hero-title {
  grid-column: 1 / span 11;
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 13em;
}

.hero-intro {
  grid-column: 1 / span 8;
  margin-top: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 34em;
}

.hero-intro p + p {
  margin-top: 0.75em;
}

/* ── 8. Work index (signature interaction) ─────────────────────────────── */

.index-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: flex-end;
}

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

.index-row {
  position: relative;
  border-bottom: 1px solid var(--border);
}

.index-summary {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: var(--space-5);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  isolation: isolate;
}

.index-summary::-webkit-details-marker {
  display: none;
}

/* Hover surface: bleeds slightly past the column edges */
.index-summary::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--space-3));
  z-index: -1;
  background: var(--surface);
  border-radius: 6px;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}

/* The signature: a hairline that draws from the title to the arrow */
.index-summary::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: 0;
  left: calc((100% - 11 * var(--gap)) / 12 * 4 + 4 * var(--gap));
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.index-num {
  grid-column: 1 / span 1;
}

.index-org {
  grid-column: 2 / span 3;
  color: var(--text-2);
}

.index-main {
  grid-column: 5 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
}

.index-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.index-title {
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: transform var(--dur-base) var(--ease-out);
}

.index-outcome {
  flex: none;
  max-width: 16rem;
  text-align: right;
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--text-2);
}

.index-arrow,
.index-chevron {
  flex: none;
  align-self: center;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-2);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) ease;
}

/* Expanding rows use a disclosure chevron; the arrow is kept for rows that link to a case study */
.index-row[open] .index-chevron {
  transform: rotate(180deg);
}

.index-summary:focus-visible {
  outline-offset: 0;
  border-radius: 6px;
}

@media (hover: hover) {
  .index-summary:hover::before { opacity: 1; }
  .index-summary:hover::after { transform: scaleX(1); }
  .index-summary:hover .index-title { transform: translateX(2px); }
  .index-summary:hover .index-arrow { color: var(--accent); transform: translateX(3px); }
  .index-summary:hover .index-chevron { color: var(--accent); transform: translateY(2px); }
  .index-row[open] .index-summary:hover .index-chevron { transform: rotate(180deg) translateY(2px); }
}

.index-summary:focus-visible::after,
.index-row[open] .index-summary::after {
  transform: scaleX(1);
}

/* Expanding panel: height animates where supported, opens instantly elsewhere */
.index-row::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
}

.index-row[open]::details-content {
  block-size: auto;
}

.index-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--space-4) var(--space-6);
}

.index-panel > * {
  grid-column: 5 / span 7;
  max-width: 38em;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}

.index-row[open] .index-panel > * {
  opacity: 1;
  transform: none;
}

/* ── Featured project (used when an open-source project ships) ── */

.feature {
  margin-top: var(--space-7);
  row-gap: var(--space-6);
}

.feature-head {
  grid-column: 5 / -1;
}

.feature-eyebrow {
  margin-bottom: var(--space-3);
}

.feature-title {
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.feature-summary {
  margin-top: var(--space-4);
}

.feature-head .link-row {
  margin-top: var(--space-3);
}

.feature-media {
  grid-column: 1 / -1;
}

.feature-media img,
.feature-media video,
.figure img,
.figure video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.feature-media figcaption,
.figure figcaption {
  margin-top: var(--space-3);
}

.feature .spec {
  grid-column: 5 / -1;
}

/* Spec list: label / value rows, used by features and case studies */
.spec {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 3fr;
  border-top: 1px solid var(--border);
}

.spec dt,
.spec dd {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.spec dt {
  padding-top: calc(var(--space-3) + 0.2em);
}

.spec dd {
  color: var(--text-2);
}

/* ── 9. How I work ─────────────────────────────────────────────────────── */

.themes {
  counter-reset: theme;
}

.theme {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border);
}

.theme:first-child {
  border-top: 0;
  padding-top: 0;
}

.theme-title {
  grid-column: 1 / span 3;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.theme-title::before {
  counter-increment: theme;
  content: counter(theme, lower-alpha) '.';
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0;
  color: var(--text-2);
}

.theme-text {
  grid-column: 4 / -1;
  padding-top: calc(var(--step--1) * 1.5 + var(--space-2));
  color: var(--text-2);
}

.coda {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-2);
}

.coda .meta {
  flex: none;
  color: var(--accent);
}

/* ── 10. Experience ────────────────────────────────────────────────────── */

.experience .lead {
  margin-bottom: var(--space-7);
}

.org + .org {
  margin-top: var(--space-7);
}

.org-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.org-name {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Roles in an organisation hang off a single line, so promotion reads as progression */
.roles {
  position: relative;
}

.role {
  position: relative;
  padding: var(--space-5) 0 0 var(--space-6);
}

.roles::before {
  content: '';
  position: absolute;
  left: 3px;
  top: var(--space-5);
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.role::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + 0.55em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--text-2);
}

.role:first-child::before {
  background: var(--text-2);
}

.role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.role-title {
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.role-dates {
  margin-left: auto;
}

.role-points {
  margin-top: var(--space-3);
  color: var(--text-2);
  max-width: 40em;
}

.role-points li {
  position: relative;
  padding-left: var(--space-5);
}

.role-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.625rem;
  height: 1px;
  background: var(--border);
}

.role-points li + li {
  margin-top: var(--space-2);
}

/* ── Notes list (enabled when the first note is published) ── */

.list {
  border-top: 1px solid var(--border);
}

.list-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.list-row .meta {
  flex: none;
  width: 6.5rem;
}

.list-title {
  flex: 1;
  font-size: var(--step-1);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.list-row .icon {
  flex: none;
  align-self: center;
  width: 1rem;
  height: 1rem;
  color: var(--text-2);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) ease;
}

@media (hover: hover) {
  .list-row:hover { color: var(--accent); }
  .list-row:hover .icon { color: var(--accent); transform: translateX(3px); }
}

/* ── 11. Contact ───────────────────────────────────────────────────────── */

.contact {
  padding-bottom: var(--section-space);
}

.contact-email {
  position: relative;
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) ease;
}

.contact-email::before,
.contact-email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 1px;
  background: var(--border);
}

.contact-email::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
  .contact-email:hover { color: var(--accent); }
  .contact-email:hover::after { transform: scaleX(1); }
}

.contact-email:focus-visible::after {
  transform: scaleX(1);
}

.contact .link-row {
  margin-top: var(--space-5);
}

/* ── 12. Footer ────────────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5) var(--space-7);
  border-top: 1px solid var(--border);
}

.site-footer .serif {
  color: var(--text-2);
}

/* ── 13. Prose: case studies and notes ─────────────────────────────────── */

.article-head {
  padding-top: clamp(2.5rem, 1rem + 5vw, 5rem);
  padding-bottom: var(--space-7);
  row-gap: var(--space-5);
}

.article-head > * {
  grid-column: 1 / -1;
}

.article-eyebrow {
  grid-column: 1 / span 4;
}

.article-title {
  grid-column: 1 / span 10;
  font-size: clamp(2.125rem, 1.5rem + 2.66vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.article-summary {
  grid-column: 5 / -1;
}

.article-figure {
  margin-bottom: var(--space-7);
}

.article-body {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  row-gap: var(--space-6);
}

.article-aside {
  grid-column: 1 / span 3;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + var(--space-6));
}

.article-aside .spec {
  grid-template-columns: 1fr;
  border-top: 0;
}

.article-aside .spec dt {
  padding: 0;
  border: 0;
}

.article-aside .spec dd {
  padding: var(--space-1) 0 var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--step--1);
  line-height: 1.5;
}

.prose {
  grid-column: 5 / span 7;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1rem + 0.27vw, 1.1875rem);
  line-height: 1.65;
}

.prose > * + * {
  margin-top: 1.1em;
}

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

.prose h2,
.prose h3 {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.prose h2 {
  margin-top: 2.2em;
  font-size: var(--step-2);
}

.prose h3 {
  margin-top: 1.8em;
  font-size: var(--step-1);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 0.6em;
}

.prose a {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

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

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--text-2);
}

.prose blockquote {
  padding-left: var(--space-5);
  border-left: 1px solid var(--accent);
  font-style: italic;
  color: var(--text-2);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.3em;
  background: var(--surface);
  border-radius: 3px;
}

.prose pre {
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.prose hr {
  height: 1px;
  border: 0;
  background: var(--border);
  margin-block: 2.5em;
}

.prose .figure {
  margin-block: 2em;
}

.prose .figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-2);
}

.article-foot {
  padding-block: var(--space-7) var(--section-space);
}

.article-foot > * {
  grid-column: 5 / -1;
}

/* ── 14. Motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: pure CSS, so it never waits on JS */
  .hero > * {
    animation: rise var(--dur-slow) var(--ease-out) both;
  }

  .hero-title { animation-delay: 60ms; }
  .hero-intro { animation-delay: 120ms; }

  /* Sections below the fold fade up once as they arrive. site.js only adds
     .is-pending to sections that start off-screen, so content never depends on JS. */
  .reveal {
    transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-out);
  }

  .reveal.is-pending {
    opacity: 0;
    transform: translateY(12px);
  }

  /* Cross-document navigation between home, case studies and notes */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

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

/* ── 15. Responsive ────────────────────────────────────────────────────── */

@media (max-width: 56.25rem) {
  .grid,
  .hero-meta,
  .section--wide .section-head,
  .index-summary,
  .index-panel,
  .theme {
    display: block;
  }

  .section-head,
  .article-aside {
    position: static;
  }

  .section-body,
  .section--wide .section-aside {
    margin-top: var(--space-5);
  }

  .section-aside {
    max-width: none;
  }

  .index-legend {
    justify-content: flex-start;
  }

  /* Hero: one natural column */
  .hero-intro {
    margin-top: var(--space-6);
  }

  /* Work index: number + org above, title, then tag and outcome */
  .index-summary {
    position: relative;
    padding-right: var(--space-6);
  }

  .index-summary::after {
    left: 0;
  }

  .index-num,
  .index-org {
    display: inline;
  }

  .index-num::after {
    content: ' ·';
  }

  .index-main {
    display: block;
    margin-top: var(--space-2);
  }

  .index-titles {
    gap: var(--space-2);
  }

  .index-outcome {
    display: block;
    max-width: none;
    margin-top: var(--space-1);
    text-align: left;
    font-size: var(--step-0);
  }

  .index-arrow,
  .index-chevron {
    position: absolute;
    right: 0;
    top: var(--space-5);
    margin-top: 0.15rem;
  }

  .theme-text {
    padding-top: var(--space-3);
  }

  .coda {
    display: block;
  }

  .coda .meta {
    display: block;
    margin-bottom: var(--space-2);
  }

  .feature > * + * {
    margin-top: var(--space-6);
  }

  .article-head > * + * {
    margin-top: var(--space-5);
  }

  .article-aside {
    margin-bottom: var(--space-6);
  }

  .article-aside .spec {
    grid-template-columns: minmax(6rem, 1fr) 2fr;
    border-top: 1px solid var(--border);
  }

  .article-aside .spec dt,
  .article-aside .spec dd {
    padding: var(--space-3) 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
  }

  .article-foot > * + * {
    margin-top: var(--space-4);
  }
}

@media (max-width: 40rem) {
  .nav-optional {
    display: none;
  }

  .role {
    padding-left: var(--space-5);
  }

  .role-points li {
    padding-left: var(--space-4);
  }

  .role-dates {
    margin-left: 0;
    flex-basis: 100%;
  }

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

  .spec dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .list-row {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
  }

  .list-row .meta {
    width: auto;
    flex-basis: 100%;
  }
}

/* ── 16. Print ─────────────────────────────────────────────────────────── */

@media print {
  :root {
    --bg: #fff;
    --text: #000;
    --text-2: #333;
    --border: #ccc;
    --accent: #000;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .site-header,
  .skip-link,
  .index-arrow,
  .index-chevron {
    display: none;
  }

  .container {
    width: 100%;
  }

  .reveal.is-pending {
    opacity: 1;
    transform: none;
  }

  .hero {
    padding: 0 0 1.5rem;
  }

  .hero-title {
    font-size: 26pt;
  }

  .section {
    padding-top: 1.25rem;
  }

  .section-head {
    position: static;
  }

  .index-row::details-content {
    block-size: auto;
    content-visibility: visible;
  }

  .index-panel > * {
    opacity: 1;
    transform: none;
  }

  .index-summary,
  .role,
  .theme {
    break-inside: avoid;
  }

  .contact-email::after {
    content: none;
  }

  a {
    text-decoration: none;
  }
}