@import url("tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap");

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--hairline-strong); text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--brass-600); color: var(--night-950); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Notched corners ----------
   Instead of rounding, corners are bitten out as concave quarter-circle arcs.
   A mask cuts the element; ::before strokes the border and the arcs in the same colour (--edge). */
@property --edge { syntax: "<color>"; inherits: true; initial-value: transparent; }

:where(.card, .toc, .next-island, .aside-note, .notched, .wordmark, .island, .family__summary, .family__panel, html[data-motion="full"] .filters) {
  --notch: var(--notch-sm);
  --notch-ring: calc(var(--notch) + 2px);
  /* One opaque layer minus four corner discs. Straight edges never depend on sub-pixel layer sizes. */
  --notch-cut: calc(var(--notch) + 1px);
  mask:
    linear-gradient(#000 0 0),
    radial-gradient(circle at 0 0, #000 var(--notch), #0000 calc(var(--notch) + 0.5px)) 0 0 / var(--notch-cut) var(--notch-cut) no-repeat,
    radial-gradient(circle at 100% 0, #000 var(--notch), #0000 calc(var(--notch) + 0.5px)) 100% 0 / var(--notch-cut) var(--notch-cut) no-repeat,
    radial-gradient(circle at 0 100%, #000 var(--notch), #0000 calc(var(--notch) + 0.5px)) 0 100% / var(--notch-cut) var(--notch-cut) no-repeat,
    radial-gradient(circle at 100% 100%, #000 var(--notch), #0000 calc(var(--notch) + 0.5px)) 100% 100% / var(--notch-cut) var(--notch-cut) no-repeat;
  mask-composite: subtract, add, add, add, add;
}
:where(.card, .toc, .next-island, .aside-note, .notched--lg, .family__panel) { --notch: var(--notch-lg); }
.notched { position: relative; border: 1px solid transparent; --edge: var(--hairline-strong); }
:where(.card, .toc, .next-island, .aside-note, .notched, .wordmark, .island, .family__summary, .family__panel, html[data-motion="full"] .filters)::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  border: 1px solid var(--edge);
  background:
    radial-gradient(circle at 0 0, #0000 var(--notch), var(--edge) var(--notch), var(--edge) calc(var(--notch) + 1px), #0000 calc(var(--notch) + 1px)) 0 0 / var(--notch-ring) var(--notch-ring) no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--notch), var(--edge) var(--notch), var(--edge) calc(var(--notch) + 1px), #0000 calc(var(--notch) + 1px)) 100% 0 / var(--notch-ring) var(--notch-ring) no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--notch), var(--edge) var(--notch), var(--edge) calc(var(--notch) + 1px), #0000 calc(var(--notch) + 1px)) 0 100% / var(--notch-ring) var(--notch-ring) no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--notch), var(--edge) var(--notch), var(--edge) calc(var(--notch) + 1px), #0000 calc(var(--notch) + 1px)) 100% 100% / var(--notch-ring) var(--notch-ring) no-repeat;
  background-origin: border-box;
  transition: --edge var(--speed) var(--ease);
}

.wrap { width: min(100% - 2 * var(--space-4), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-3); top: -4rem; background: var(--accent); color: var(--night-950); padding: var(--space-2) var(--space-3); z-index: 60; }
.skip-link:focus { top: var(--space-3); }

.eyebrow {
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Zones ----------
   Where islands live. An island only names its zone (data-zone); placement is defined here, once.

     top-left   header, left edge      top-right  header, right edge (bottom pill on phones)
     left       left gutter, 70rem up  (in flow below that)
     right      right gutter, 70rem up (bottom pill below that); data-anchor="middle" centres it vertically

   Floating zones act only in dynamic mode, and only on islands that carry data-dock.
   One island per zone is visible at a time: triggers are mutually exclusive on any given page. */
.site-header [data-zone="top-left"] { grid-column: 1; justify-self: start; }
.site-header [data-zone="top-center"] { grid-column: 2; justify-self: center; }
.site-header [data-zone="top-right"] { grid-column: 3; justify-self: end; }

html[data-motion="full"] { --zone-lift: 0px; }
@media (max-width: 40rem) {
  html[data-motion="full"] { --zone-lift: calc(var(--island-h) + var(--space-3)); } /* the nav owns the very bottom */
}

/* Gutter presentation (left, right) */
@media (min-width: 70rem) {
  html[data-motion="full"] :is([data-zone="left"], [data-zone="right"])[data-dock] {
    position: fixed; z-index: 35; margin: 0; width: var(--zone-w); top: var(--zone-top);
    border: 1px solid transparent; --edge: var(--hairline-strong);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  }
  html[data-motion="full"] [data-zone="left"][data-dock] { left: var(--zone-edge); --zone-away: translateX(-0.75rem); }
  html[data-motion="full"] [data-zone="right"][data-dock] { right: var(--zone-edge); --zone-away: translateX(0.75rem); }
  html[data-motion="full"] [data-zone][data-dock][data-anchor="middle"] { top: 0; bottom: 0; margin-block: auto; height: fit-content; }
  html[data-motion="full"] :is([data-zone="left"], [data-zone="right"])[data-dock="away"] { opacity: 0; visibility: hidden; transform: var(--zone-away); }
}

/* Compact presentation: right becomes a bottom pill; left stays in flow */
@media (max-width: 69.99rem) {
  html[data-motion="full"] [data-zone="right"][data-dock] {
    position: fixed; z-index: 35; margin: 0 auto; left: 0; right: 0; top: auto; width: fit-content;
    max-width: calc(100vw - 2 * var(--space-3));
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom) + var(--zone-lift));
    border: 1px solid transparent; --edge: var(--hairline-strong);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  }
  html[data-motion="full"] [data-zone="right"][data-dock="away"] { opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
}

/* The header carries three islands; below 52rem the nav drops its context label to make room.
   (.island .island__context is more specific than the base rule further down, which would otherwise win.) */
@media (max-width: 52rem) { .island .island__context { display: none; } }

/* Header zones */
@media (max-width: 40rem) {
  html[data-motion="full"] [data-zone="top-right"] {
    position: fixed; margin: 0 auto; left: 0; right: 0; width: fit-content; max-width: calc(100vw - 2 * var(--space-3));
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    --edge: var(--hairline-strong); padding: var(--space-1);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  html[data-motion="full"] { scroll-padding-bottom: 6rem; }
  html[data-motion="full"] body { padding-bottom: 5rem; }
}
/* ---------- Header ----------
   Baseline: a static header (no JS, or motion reduced).
   Enhancement: html[data-motion="full"] turns the wordmark and nav into
   floating "islands" that respond to scroll (state set in js/main.js). */
.site-header { border-bottom: 1px solid var(--hairline); }
.site-header .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  padding-block: var(--space-3);
}

.wordmark {
  display: inline-flex; align-items: center;
  height: var(--island-h);
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.35rem; letter-spacing: 0.32em; text-transform: uppercase;
  text-decoration: none;
  position: relative; border: 1px solid transparent; --edge: transparent;
}
.wordmark:focus-visible { outline-offset: -4px; }
.wordmark__rest { display: inline-grid; grid-template-columns: 1fr; }
.wordmark__rest > span { overflow: hidden; min-width: 0; }

.island { position: relative; display: flex; align-items: center; border: 1px solid transparent; --edge: transparent; }
.island__context { display: grid; grid-template-columns: 0fr; visibility: hidden; margin: 0; }
.island__context > span {
  overflow: hidden; min-width: 0; max-width: min(18rem, 46vw);
  white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent);
  padding: var(--space-2) var(--space-3) var(--space-2) 0; margin-left: var(--space-3); margin-right: var(--space-2);
  border-right: 1px solid var(--hairline-strong);
}
.island ul { list-style: none; display: flex; gap: var(--space-1); margin: 0; padding: 0; }
.island li a {
  display: block; padding: var(--space-2) var(--space-3);
  font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-soft);
  text-decoration: none; transition: color var(--speed), background var(--speed);
}
.island li a:hover { color: var(--text); }
.island li a:focus-visible { outline-offset: -3px; }
.island li a[aria-current] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Dynamic mode */
html[data-motion="full"] { scroll-padding-top: calc(var(--header-h) + var(--space-3)); }
html[data-motion="full"] .site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  border-bottom: 0; pointer-events: none;
}
html[data-motion="full"] .site-header .wrap > * { pointer-events: auto; }
html[data-motion="full"] main { padding-top: var(--header-h); }

html[data-motion="full"] .wordmark,
html[data-motion="full"] .island,
html[data-motion="full"] .wordmark__rest,
html[data-motion="full"] .island__context {
  transition:
    background var(--speed) var(--ease), border-color var(--speed) var(--ease),
    padding var(--speed) var(--ease), letter-spacing var(--speed) var(--ease),
    grid-template-columns var(--speed) var(--ease), visibility var(--speed);
}
html[data-motion="full"][data-scrolled] .wordmark {
  min-width: var(--island-h); justify-content: center; letter-spacing: 0;
  --edge: var(--hairline-strong);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-motion="full"][data-scrolled] .wordmark__rest { grid-template-columns: 0fr; }
html[data-motion="full"][data-scrolled] .island {
  padding: var(--space-1);
  --edge: var(--hairline-strong);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-motion="full"][data-scrolled][data-context-open] .island__context { grid-template-columns: 1fr; visibility: visible; }

@supports not (backdrop-filter: blur(1px)) {
  html[data-motion="full"][data-scrolled] .wordmark,
  html[data-motion="full"][data-scrolled] .island,
  html[data-motion="full"] [data-zone][data-dock] { background: var(--bg); }
}

/* ---------- Family island ----------
   Lists every member of the Feathermode family and marks the current one. A <details>, so it works with no
   JavaScript; js/main.js only adds close-on-outside-click and Escape. Zone: top-center (top right on phones). */
.family { position: relative; --family-w: min(21rem, calc(100vw - 2 * var(--space-3))); }
.family__summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--island-h); padding: 0 var(--space-3); cursor: pointer;
  font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-soft);
  position: relative; border: 1px solid transparent; --edge: transparent;
  transition: color var(--speed), background var(--speed) var(--ease);
}
.family__summary::-webkit-details-marker { display: none; }
.family__summary:hover, .family[open] > .family__summary { color: var(--text); }
.family__summary:focus-visible { outline-offset: -3px; }
.family__chevron { width: 0.4rem; height: 0.4rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--speed) var(--ease); }
.family[open] .family__chevron { transform: rotate(225deg) translateY(-2px); }
html[data-motion="full"][data-scrolled] .family__summary {
  --edge: var(--hairline-strong);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.family__panel {
  position: absolute; z-index: 45; top: calc(100% + var(--space-2)); left: 50%; margin-left: calc(var(--family-w) / -2); width: var(--family-w);
  padding: var(--space-2); background: var(--surface); border: 1px solid transparent; --edge: var(--hairline-strong);
}
.family__title { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); padding: var(--space-2) var(--space-3); margin: 0; }
.family__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.family__item { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); color: var(--text-soft); text-decoration: none; }
a.family__item:hover, a.family__item:focus-visible { background: var(--surface-hover); color: var(--text); }
a.family__item:focus-visible { outline-offset: -3px; }
.family__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--text); }
.family__meta { font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.family__item[aria-current] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.family__item[aria-current] .family__meta { color: var(--accent); }
.family__item--soon .family__name { color: var(--text-soft); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; display: grid; align-content: center; min-height: min(80svh, 48rem); padding-block: var(--space-7) var(--space-6); text-align: center; }
.hero__arcade {
  position: absolute; inset: auto 0 0 0; height: 70%; width: 100%; z-index: 0;
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.01em;
  max-width: 16ch; margin: var(--space-3) auto var(--space-4);
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p.lede { max-width: 38rem; margin-inline: auto; color: var(--text-soft); font-size: var(--step-1); }

/* ---------- Index ---------- */
.index { padding: var(--space-5) var(--gutter) var(--section-space); }
.index__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  border-top: 1px solid var(--hairline-strong); padding-top: var(--space-4); margin-bottom: var(--space-5);
}
.index__head h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
.filters-slot { flex: 1 1 20rem; display: flex; justify-content: flex-end; align-items: center; }
.filters { display: flex; align-items: center; }
.filters__group { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.filters button {
  font: inherit; font-size: var(--step--1); letter-spacing: 0.04em; white-space: nowrap;
  background: none; border: 0; border-bottom: 1px solid transparent;
  color: var(--text-muted); padding: var(--space-1) 0; cursor: pointer;
  transition: color var(--speed), border-color var(--speed), background var(--speed);
}
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }
/* The count is a live region for everyone; it is only shown visually while docked. */
.filters__count {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
}

/* Filters island: placement comes from its zone (see Zones). Only its internals live here. */
html[data-motion="full"] .filters-slot { display: contents; }
html[data-motion="full"] .filters { align-items: stretch; }
html[data-motion="full"] .filters button { text-align: left; padding: var(--space-2) var(--space-3); border-bottom-color: transparent; }
html[data-motion="full"] .filters button[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
html[data-motion="full"] .filters button:focus-visible { outline-offset: -3px; }
@media (min-width: 70rem) {
  /* Gutter: a vertical list under a count */
  html[data-motion="full"] .filters { flex-direction: column; padding: var(--space-2); }
  html[data-motion="full"] .filters__group { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  html[data-motion="full"] .filters__count {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; order: -1;
    margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--hairline-strong);
    font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent);
  }
}
@media (max-width: 69.99rem) {
  /* Bottom pill: one row, scrolling sideways if needed; the count stays for screen readers only */
  html[data-motion="full"] .filters { flex-direction: row; padding: var(--space-1); }
  html[data-motion="full"] .filters__group { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  html[data-motion="full"] .filters__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; margin: 0; padding: 0; }
}

/* ---------- Cards ---------- */
.card-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.card-grid > li[hidden] { display: none; }
@media (min-width: 52rem) {
  .card-grid > .card-grid__featured { grid-column: 1 / -1; }
}
@media (min-width: 72rem) or ((min-width: 52rem) and (max-width: 69.99rem)) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
.card {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid transparent; --edge: var(--hairline);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.card:hover, .card:focus-within { --edge: var(--accent); background: var(--surface-hover); }
.card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: 0; margin: 0; }
.card__tags li { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.card__index { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-muted); font-variant-numeric: lining-nums; }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.12; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.card__excerpt { color: var(--text-soft); flex: 1; max-width: 46ch; }
.card__meta { display: flex; gap: var(--space-3); font-size: var(--step--1); color: var(--text-muted); }
.card__meta > * + *::before { content: "·"; margin-right: var(--space-3); }

.card-grid__featured .card { padding: var(--space-6) var(--space-5); }
.card-grid__featured .card__title { font-size: var(--step-3); max-width: 20ch; }
.card-grid__featured .card__excerpt { font-size: var(--step-1); }

/* ---------- About ---------- */
.about {
  background: linear-gradient(var(--hairline), var(--hairline)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px; /* rule aligned to the content column */
  padding: var(--section-space) var(--gutter); display: grid; align-content: start; gap: var(--space-4); }
html[data-motion="full"] .about { min-height: 80svh; }
@media (min-width: 52rem) { .about { grid-template-columns: 1fr 2fr; } }
.about h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
.about p { color: var(--text-soft); font-size: var(--step-1); max-width: 40rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding-block: var(--space-5); color: var(--text-muted); font-size: var(--step--1); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.site-footer p { margin: 0; }
.motion-toggle {
  font: inherit; color: var(--text-muted); background: none; cursor: pointer;
  border: 1px solid var(--hairline-strong); border-radius: 0; padding: var(--space-1) var(--space-3);
}
.motion-toggle:hover { color: var(--text); border-color: var(--accent); }
.motion-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* ---------- Article ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 50;
  background: var(--accent);
  transform-origin: left; transform: scaleX(var(--progress, 0));
}
.article { padding-block: var(--space-6) var(--section-space); }
.article__header { max-width: 48rem; margin: 0 auto var(--space-6); text-align: center; }
.article__header .eyebrow { display: block; margin-bottom: var(--space-4); }
.article__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.article__dek { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--text-soft); margin-bottom: var(--space-4); }
.article__byline {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: var(--step--1); color: var(--text-muted);
  border-top: 1px solid var(--hairline); padding-top: var(--space-3);
}
.article__body { max-width: var(--measure); margin-inline: auto; font-family: var(--font-text); font-size: 1.22rem; line-height: 1.7; color: var(--text-soft); }
.article__body p { margin-bottom: var(--space-4); }
.article__body strong { color: var(--text); font-weight: 500; }
.article__body h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.1; color: var(--text); margin: var(--section-space) 0 var(--space-3); }
.article__body ul, .article__body ol { padding-left: 1.3em; margin: 0 0 var(--space-4); }
.article__body li { margin-bottom: var(--space-2); }
.article__body li::marker { color: var(--accent); }
.article__body blockquote {
  margin: var(--space-5) calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4);
  border-left: 1px solid var(--accent);
  font-family: var(--font-display); font-style: italic; font-size: var(--step-3); line-height: 1.2; color: var(--text);
}
.article__body blockquote p { margin: 0; }
.article__body blockquote footer { font-family: var(--font-ui); font-style: normal; font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-3); }
.article__body code { font-family: var(--font-mono); font-size: 0.8em; background: var(--night-800); padding: 0.1em 0.4em; border-radius: var(--radius); }
.article__body pre { overflow-x: auto; background: var(--night-900); border: 1px solid var(--hairline); padding: var(--space-4); margin: 0 0 var(--space-4); }
.article__body pre code { background: none; padding: 0; font-size: 0.82rem; line-height: 1.6; color: var(--text-soft); }
.aside-note { margin: var(--space-5) 0; padding: var(--space-4); position: relative; border: 1px solid transparent; --edge: var(--hairline-strong); font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.6; }
.aside-note strong { display: block; font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1); }
.article__footer { max-width: var(--measure); margin: var(--space-6) auto 0; border-top: 1px solid var(--hairline); padding-top: var(--space-4); font-size: var(--step--1); }
.article__footer a { color: var(--text-soft); text-decoration: none; }
.article__footer a:hover { color: var(--accent); }

/* ---------- Article islands: contents and next essay ----------
   Static: ordinary in-flow blocks. Dynamic: placed by their zone (see Zones); only internals live here. */
.toc, .next-island {
  max-width: var(--measure); margin: 0 auto var(--space-6); padding: var(--space-4);
  position: relative; border: 1px solid transparent; --edge: var(--hairline);
}
.toc__title, .next-island__label { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }
.toc__meter { display: none; }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list a { display: block; padding: var(--space-1) 0; color: var(--text-soft); text-decoration: none; transition: color var(--speed), background var(--speed); }
.toc__list a:hover, .toc__list a[aria-current] { color: var(--accent); }
.next-island { margin-top: var(--space-6); }
.next-island:hover, .next-island:focus-within { --edge: var(--accent); }
.next-island__link { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; color: var(--text); text-decoration: none; display: block; }
.next-island__link::after { content: " →"; color: var(--accent); }
.next-island__link::before { content: ""; position: absolute; inset: 0; } /* whole island is the link */

html[data-motion="full"] .article__header { display: grid; align-content: center; min-height: min(62svh, 36rem); margin-bottom: var(--space-5); }

@media (min-width: 70rem) {
  html[data-motion="full"] .next-island { padding: var(--space-3) var(--space-4); }
  html[data-motion="full"] .next-island__link { font-size: var(--step-1); }
  html[data-motion="full"] .toc { padding: var(--space-2); }
  html[data-motion="full"] .toc__title { padding: var(--space-1) var(--space-3) 0; margin: 0; }
  html[data-motion="full"] .toc__meter { display: block; height: 1px; margin: var(--space-2) var(--space-3); background: var(--hairline-strong); position: relative; }
  html[data-motion="full"] .toc__meter::after { content: ""; position: absolute; inset: -0.5px 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--progress, 0)); }
  html[data-motion="full"] .toc__list a { padding: var(--space-2) var(--space-3); font-size: var(--step--1); line-height: 1.35; }
  html[data-motion="full"] .toc__list a[aria-current] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  html[data-motion="full"] .toc__list a:focus-visible { outline-offset: -3px; }
}
@media (max-width: 69.99rem) {
  html[data-motion="full"] .next-island { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
  html[data-motion="full"] .next-island__label { margin: 0; white-space: nowrap; }
  html[data-motion="full"] .next-island__link { font-size: var(--step-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 40rem) {
  html:not([data-motion="full"]) .site-header .wrap { grid-template-columns: 1fr; gap: var(--space-3); }
  html:not([data-motion="full"]) .site-header [data-zone] { grid-column: 1; justify-self: start; }
  .hero { padding-block: var(--space-6) var(--space-5); }
  .card, .card-grid__featured .card { padding: var(--space-4); }
  .article__body blockquote { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] * { transition: none !important; }


/* ---------- Home: project rows ---------- */
.more { font-size: var(--step--1); color: var(--text-soft); text-decoration: none; letter-spacing: 0.04em; }
.more:hover { color: var(--accent); }
.project-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.project-row {
  position: relative; display: grid; gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-3); border-bottom: 1px solid var(--hairline);
  transition: background var(--speed) var(--ease);
}
@media (min-width: 52rem) { .project-row { grid-template-columns: 1fr auto; align-items: center; } }
.project-row:hover, .project-row:focus-within { background: var(--surface-hover); }
.project-row__name { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.05; margin-bottom: var(--space-1); }
.project-row__name a { text-decoration: none; transition: color var(--speed); }
.project-row__name a::after { content: ""; position: absolute; inset: 0; } /* whole row is the link */
.project-row:hover .project-row__name a, .project-row:focus-within .project-row__name a { color: var(--accent); }
.project-row__blurb { color: var(--text-soft); max-width: 46ch; }
.project-row__meta { display: grid; gap: var(--space-1); font-size: var(--step--1); color: var(--text-muted); }
@media (min-width: 52rem) { .project-row__meta { text-align: right; justify-items: end; } }
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-soft); }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--stone-500); }
.status[data-status="prototype"] { color: var(--accent); }
.status[data-status="prototype"]::before { background: var(--accent); }
.status[data-status="research"]::before { background: var(--cream-300); }
.status-demo { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Pages: shared frame for projects & design system ---------- */
.page { width: min(100% - 2 * var(--space-4), var(--measure-wide)); margin-inline: auto; padding-bottom: var(--section-space); }
@media (min-width: 70rem) {
  /* keep clear of the gutter zones */
  .page { width: min(var(--measure-wide), 100% - 2 * (var(--zone-w) + var(--space-5))); }
}

/* ---------- Projects page ---------- */
.project { padding-block: var(--section-space); border-top: 1px solid var(--hairline); }
html[data-motion="full"] .project { min-height: 70svh; }
.project .eyebrow { margin-bottom: var(--space-3); }
.project h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1; margin-bottom: var(--space-4); text-wrap: balance; }

.project p { font-family: var(--font-text); font-size: 1.15rem; color: var(--text-soft); margin-bottom: var(--space-3); max-width: var(--measure); }
.project .project__blurb { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--text); }
.project .eyebrow { font-family: var(--font-ui); }
.facts { margin: var(--space-5) 0 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.facts > div { display: grid; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 40rem) { .facts > div { grid-template-columns: 9rem 1fr; } }
.facts dt { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); align-self: center; }
.facts dd { margin: 0; color: var(--text-soft); }
.facts a { color: var(--text); }

/* ---------- Design system page ---------- */
.doc__section { padding-block: var(--section-space) 0; }
html[data-motion="full"] .doc__section { min-height: 60svh; }
.doc h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1; margin-bottom: var(--space-3); border-top: 1px solid var(--hairline-strong); padding-top: var(--space-5); }
.doc h3 { font-size: var(--step--1); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin: var(--space-6) 0 var(--space-3); }
.doc__section p { font-family: var(--font-text); font-size: 1.1rem; color: var(--text-soft); }
.doc__section .doc__lede { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--text); max-width: 40rem; margin-bottom: var(--space-4); }
.doc code { font-family: var(--font-mono); font-size: 0.82em; color: var(--text); }
.doc pre { overflow-x: auto; background: var(--night-900); border: 1px solid var(--hairline); padding: var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.doc pre code { font-size: 0.8rem; line-height: 1.6; color: var(--text-soft); }
.doc ul, .doc ol { margin: 0; padding: 0; }

.principles { list-style: none; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: var(--space-5) !important; }
.principle { padding: var(--space-4); background: var(--surface); }
.principle__n { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); display: block; }
.principle h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); letter-spacing: 0; text-transform: none; color: var(--text); margin: var(--space-2) 0; }
.doc__section .principle p { font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.6; }

.zone-map {
  --edge: var(--hairline-strong);
  display: grid; gap: var(--space-2); padding: var(--space-4); margin: 0 0 var(--space-4);
  grid-template: "tl tc tr" auto "gl main gr" minmax(11rem, 1fr) "bl bc br" auto / 7.5rem 1fr 7.5rem;
  background: var(--surface);
}
.zone { min-width: 0; padding: var(--space-2) var(--space-3); display: grid; align-content: center; gap: 2px; font-size: var(--step--2); color: var(--text-muted); background: var(--bg); --edge: var(--accent); }
.zone b { font-weight: 500; color: var(--accent); letter-spacing: 0.04em; font-size: var(--step--1); }
@media (max-width: 40rem) {
  .zone-map { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr) minmax(0, 5.5rem); padding: var(--space-3); }
  .zone { padding: var(--space-2); }
}
.zone--tl { grid-area: tl; justify-self: start; } .zone--tc { grid-area: tc; justify-self: center; } .zone--tr { grid-area: tr; justify-self: end; }
.zone--gl { grid-area: gl; align-self: start; } .zone--gr { grid-area: gr; align-self: start; gap: var(--space-2); }
.zone--bc { grid-area: bc; justify-self: center; }
.zone--main { grid-area: main; display: grid; align-content: center; gap: var(--space-2); background: none; padding: 0 var(--space-3); }
.zone--main span { text-transform: uppercase; letter-spacing: var(--track-caps); }
.zone--main i { display: block; height: 6px; background: var(--hairline-strong); }
.zone--main i:nth-of-type(2) { width: 82%; } .zone--main i:nth-of-type(3) { width: 64%; }

.states { list-style: none; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.states li { padding: var(--space-3) var(--space-4); }
.states code { color: var(--accent); }
.doc__section .states p { font-family: var(--font-ui); font-size: var(--step--1); margin-top: var(--space-1); }

.table-wrap { overflow-x: auto; margin-bottom: var(--space-3); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.doc th, .doc td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--text-soft); }
.doc thead th { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.doc tbody th { font-weight: 500; color: var(--text); white-space: nowrap; }
.rules { list-style: none; }
.rules li { padding: var(--space-3) 0 var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); position: relative; color: var(--text-soft); }
.rules li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 0.5rem; height: 1px; background: var(--accent); }

.swatches { list-style: none; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.swatch { display: grid; gap: var(--space-1); font-size: var(--step--1); }
.swatch__chip { height: 4rem; background: var(--c); border: 1px solid var(--hairline-strong); }
.swatch__value, .tokens span, .scale span:last-child, .space-bars span:last-child, .notch-demo span { color: var(--text-muted); font-size: var(--step--2); overflow-wrap: anywhere; }
.faces { list-style: none; display: grid; gap: var(--space-4); }
.doc__section .faces__sample { font-size: var(--step-3); line-height: 1.1; color: var(--text); }
.doc__section .faces li p:last-child { font-family: var(--font-ui); font-size: var(--step--1); color: var(--text-muted); }
.scale { list-style: none; border-top: 1px solid var(--hairline); }
.scale li { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.scale__sample { font-family: var(--font-display); color: var(--text); line-height: 1.1; }
.scale li:nth-child(n+5) .scale__sample { font-family: var(--font-ui); }
.space-bars { list-style: none; display: grid; gap: var(--space-2); }
.space-bars li { display: grid; grid-template-columns: 6rem auto 1fr; align-items: center; gap: var(--space-3); }
.space-bars__bar { display: block; height: 0.75rem; background: var(--accent); }
.notch-demo { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.notch-demo > div { display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-4); background: var(--surface); }
.tokens { list-style: none; border-top: 1px solid var(--hairline); }
.tokens li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.demo-quote { margin: 0; padding: var(--space-2) var(--space-4); border-left: 1px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: var(--step-3); line-height: 1.2; }
.doc__section .demo-quote p { font-family: var(--font-display); font-size: inherit; color: var(--text); }

/* Phones: the nav island sits at the bottom (or the stage dock does), so the family dropdown moves to the top right */
@media (max-width: 40rem) {
  html[data-motion="full"] .site-header [data-zone="top-center"] { grid-column: 3; justify-self: end; }
  html[data-motion="full"] .family__panel { left: auto; right: 0; margin-left: 0; }
}