/* Brandon Baker, personal site. Layout and motion layer.
   Colour, type, radius and spacing come from ds/jim-gluestack-tokens.css.
   One accent (red ink). No shadows, no blur, no gradient fills.
   Every scene rests in its finished state; motion is layered on top only
   when the visitor has not asked for reduced motion and scripts are running. */

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

:root {
  --ink: rgb(var(--foreground));
  --ink-1: rgb(var(--jim-fg-1));
  --ink-2: rgb(var(--jim-fg-2));
  --ink-3: rgb(var(--muted-foreground));
  --ink-4: rgb(var(--jim-fg-muted));
  --red: rgb(var(--jim-primary-text));
  --paper: rgb(var(--background));
  --tier-1: rgb(var(--card));
  --tier-2: rgb(var(--secondary));
  --tier-3: rgb(var(--jim-surface-3));
  --rule: rgb(var(--border));
  --rule-strong: rgb(var(--jim-border-strong));
  --rule-faint: rgb(var(--jim-border-faint));
  --pad: 20px;
  --band: 1200px;
  --ease: var(--ease-out-quint);
  --pen: cubic-bezier(0.3, 0, 0.25, 1);
}
@media (min-width: 600px) { :root { --pad: 32px; } }
@media (min-width: 1120px) { :root { --pad: 48px; } }

html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--tier-3); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip { position: absolute; inset-inline-start: var(--space-lg); top: -100px; z-index: 30; }
.skip:focus { top: var(--space-sm); }

.wrap { width: 100%; max-width: calc(var(--band) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

/* -- Top bar ---------------------------------------------------------------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-standard); }
.bar[data-scrolled="true"] { border-bottom-color: var(--rule); }
.bar-in { display: flex; align-items: center; gap: var(--space-xs); min-height: 64px; }
.brand { display: inline-flex; align-items: center; min-height: var(--tap-min); min-width: var(--tap-min); padding-inline: 2px; text-decoration: none; color: var(--ink); border-radius: var(--radius-sm); }
.brand:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.brand .sig { width: 58px; height: 30px; }
.nav { margin-inline-start: auto; display: flex; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-md);
  font-size: var(--fs-label-md); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: 0.01em;
  color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav a:hover { color: var(--ink); }
.nav a:focus-visible { box-shadow: inset 0 0 0 2px rgb(var(--ring)); outline: none; }
.nav a::after { content: ""; position: absolute; inset-inline: var(--space-md); bottom: 8px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease); }
.nav a[aria-current="true"] { color: var(--ink); }
.nav a[aria-current="true"]::after { transform: scaleX(1); }
.icon-square { width: var(--tap-min); min-height: var(--tap-min); padding: 0; flex: none; }
.icon-square::before { inset: -1px; }
.theme-toggle .Icon { width: 20px; height: 20px; }
[data-scheme="light"] .theme-toggle .i-sun, [data-scheme="dark"] .theme-toggle .i-moon { display: none; }
@media (max-width: 400px) { .nav a { padding: 0 9px; } .nav a::after { inset-inline: 9px; } .bar-in { gap: 0; } }
@media (max-width: 359.98px) { .nav a { padding: 0 6px; font-size: var(--fs-label-sm); } .nav a::after { inset-inline: 6px; } .brand .sig { width: 50px; height: 26px; } }
@media (min-width: 720px) { .bar-in { gap: var(--space-lg); } }

/* -- Signature -------------------------------------------------------------- */
.sig { display: block; fill: currentColor; overflow: visible; }

/* -- Hero ------------------------------------------------------------------- */
/* Split: name and intro on one side, the map on the other.
   The lockup reads "Brandon Baker" left to right. Everything in it is set in
   units of the first name (1em), which keeps v6's size: 40/253 of the stage
   width at every breakpoint.
   "Brandon": Bricolage 600, baseline 0.8em down. Measured from the type:
   ascent 0.93em, descent 0.27em, caps 0.67em, so with a line height of 1 the
   baseline sits 0.83em below the top of the line box, and the word runs
   3.48em wide.
   "Baker": one signature unit is 0.01375em (55% of its v6 scale). Its
   viewBox is 253 units wide (241 of ink plus a 6 unit paper edge each side),
   so the ink runs 3.31em wide, about the width of "Brandon", and 1.7em tall
   against 0.67em caps. Its ink starts 2.80em in and 0.39em above the first
   name's baseline. That lays the B's top loop across the bottom right of the
   final "n" while the arch of the "n" stays clear, and the rest of the name
   runs on to the right, ending inside the stage at 6.2em of 6.33em. The
   letters end on a signature line 2.12em down. */
.hero { display: grid; gap: clamp(48px, 7vw, 72px); padding-block: clamp(24px, 5vw, 72px) clamp(24px, 4vw, 48px); }
.hero-id { min-width: 0; }
.hero-stage { container-type: inline-size; max-width: 620px; }
.lockup {
  --u: 0.01375em; --base: 0.8em; --sx: 2.804em; --sy: -0.39em;
  position: relative; height: 2.2em; font-size: calc(40 * 100cqi / 253); line-height: 1;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
}
.first { position: absolute; left: 0; top: calc(var(--base) - 0.83em); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: var(--ink-3); }
/* The signature line. The paper-coloured edge of the ink cuts it where the
   letters cross, the same way it cuts the type. */
.lockup::after {
  content: ""; position: absolute; inset-inline: 0; top: calc(var(--base) + var(--sy) + 124 * var(--u)); height: 1px;
  background: var(--rule-strong); transform-origin: left;
}
.sig-hero {
  position: absolute; z-index: 1; left: calc(var(--sx) - 6 * var(--u)); top: calc(var(--base) + var(--sy) - 6 * var(--u));
  width: calc(253 * var(--u)); height: auto; aspect-ratio: 253 / 136; overflow: visible;
}
/* A thin edge of paper where ink crosses type or rule. */
.sig-hero .knock { fill: var(--paper); stroke: var(--paper); stroke-width: 3.16; stroke-linejoin: round; }
.sig-hero .ink { fill: var(--red); }
/* Mask channel, not a colour: white reveals the ink beneath. */
.pen { fill: none; stroke: white; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.01; stroke-dashoffset: 0; }
.write .sig-hero .written { mask: url(#sig-write); }
.write.signed .sig-hero .written { mask: none; }

.hero-text { margin-top: clamp(24px, 3vw, 36px); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 2px var(--space-lg);
  font-size: var(--fs-label-md); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: var(--ink-2);
}
.hero-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-inline-end: var(--space-lg); border-radius: 50%; background: var(--rule-strong); vertical-align: 0.2em; }
.hero-lede { margin-top: var(--space-md); max-width: 31ch; font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-1); text-wrap: pretty; }
.hero .map-fig { justify-self: center; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; }
  .hero .map-fig { justify-self: end; }
}

@keyframes write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .write .pen { stroke-dashoffset: 1; animation: write var(--t) var(--e, cubic-bezier(0.42, 0.04, 0.38, 1)) var(--d) both; }
  .write .lockup::after { animation: rule-in 900ms var(--ease) 80ms both; }
  .write .hero-text { animation: rise 520ms var(--ease) 260ms both; }
}

/* -- Sections --------------------------------------------------------------- */
.sec { padding-block: clamp(56px, 7vw, 104px); }
.sec > * { min-width: 0; }
.sec-head { border-top: 1px solid var(--ink); padding-top: var(--space-2xl); }
.sec-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.sec-intro { margin-top: var(--space-lg); max-width: 40ch; font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sub-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.5rem, 1.4vw + 1rem, 2.125rem); line-height: 1.1; letter-spacing: -0.02em; }
/* Intro sits under the title at every width (Baker, 2026-10-21: no stray text in a right column). */

/* -- What I do -------------------------------------------------------------- */
/* Focus areas. Same voice as v6 (Bricolage at display size, a light slash in
   front), but each area now gets its own line and what sits under it is set
   in body type, so the list reads top to bottom. Order and size follow
   Baker's emphasis: architecture first and largest, AI second, the rest
   smaller, with the equipment work last. */
.areas { margin-top: clamp(40px, 5vw, 72px); }
.area-list { margin-top: var(--space-xl); border-top: 1px solid var(--ink); }
.area { display: grid; gap: var(--space-lg); min-width: 0; padding-block: clamp(24px, 3.2vw, 44px); border-bottom: 1px solid var(--rule); }
.area > * { min-width: 0; }
.area-title {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}
/* The slash from v6, now leading each area instead of running between them. */
.area-title::before { content: "/\00a0" / ""; font-weight: var(--fw-regular); color: var(--rule-strong); }
.area-lead .area-title { font-size: clamp(1.875rem, 2.4vw + 1rem, 3rem); line-height: 1.05; letter-spacing: -0.025em; }
.area-second .area-title { font-size: clamp(1.625rem, 1.6vw + 1rem, 2.375rem); line-height: 1.08; letter-spacing: -0.022em; }
.area-items { display: grid; gap: var(--space-md); }
.area-items li {
  position: relative; padding-inline-start: 1.5em; max-width: 46ch;
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem); line-height: 1.45; color: var(--ink-1); text-wrap: pretty;
}
.area-items li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.75em; height: 1.5px; background: var(--ink-3); }
.area-small .area-items li { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--ink-2); }
/* One plain sentence under each title saying what he leads, then the list. */
.area-sum { max-width: 52ch; font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.area-items a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--ink-3); border-radius: 2px; }
.area-items a:hover { text-decoration-color: var(--ink); }
.area-items a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Baker, 2026-10-21: "Put / solutions architecture and the visual in two columns.
   AI, Identity, Integrations, connected fitness equipment are in 2 columns,
   collapsing on smaller screens." */
@media (min-width: 720px) {
  /* Architecture takes the full width; AI and the three smaller areas sit two to a row. */
  .area-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3xl); }
  .area-list > .area { align-content: start; }
  .area-list > .area-lead { grid-column: 1 / -1; }
  /* Two to a row, so the four share one title size and one text size and line up. */
  .area-second .area-title, .area-small .area-title { font-size: clamp(1.5rem, 1.2vw + 1rem, 2.125rem); line-height: 1.1; letter-spacing: -0.02em; }
  .area-small .area-items li { font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem); line-height: 1.45; color: var(--ink-1); }
}
@media (min-width: 960px) {
  /* Architecture: title across the top, then its list and the monolith-to-services
     visual side by side, both starting on the same line. */
  .area-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3xl); align-items: start; }
  .area-lead > .area-title { grid-column: 1 / -1; }
  /* Visual on the left, list on the right (Baker, 2026-10-21: "Switch copy and visual"). */
  .area-lead > .split { grid-column: 1; grid-row: 2; margin-top: 0; justify-self: start; }
  .area-lead > .area-items { grid-column: 2; grid-row: 2; }
}

/* Monolith to services: one block comes apart and the pieces settle on a
   shared platform. The finished state keeps the block's outline as a ghost. */
.split { width: 100%; max-width: 520px; margin-top: var(--space-md); }
.split-art { position: relative; padding-bottom: 30px; }
.split svg { display: block; width: 100%; height: auto; overflow: visible; }
.split .mono-edge { fill: none; stroke: var(--ink-4); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.split .mono-seam { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.split .split-arrow { fill: none; stroke: var(--ink-3); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1.01; stroke-dashoffset: 0; }
.split .tile { fill: var(--tier-2); stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.split .slab { fill: var(--ink); transform-box: fill-box; transform-origin: left center; }
.split-label {
  position: absolute; left: var(--x); bottom: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--fs-label-md); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: var(--ink-3);
}
.split-label-end { color: var(--ink); font-weight: var(--fw-semibold); }

/* Stack: four groups on one rule. */
.stack { margin-top: clamp(64px, 8vw, 112px); }
.stack-grid { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.stack-grid > div { border-top: 1px solid var(--ink); padding-top: var(--space-md); }
.stack-grid dt { font-size: var(--fs-label-md); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: var(--ink-3); }
.stack-grid dd { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: clamp(0.9375rem, 0.25vw + 0.85rem, 1.0625rem); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
@media (min-width: 900px) { .stack-grid { grid-template-columns: 1fr 1fr 1fr 1.6fr; column-gap: var(--space-2xl); } }

/* -- How I work ------------------------------------------------------------- */
.ways { display: grid; gap: clamp(80px, 10vw, 144px); margin-top: clamp(48px, 7vw, 96px); }
.way { display: grid; gap: var(--space-3xl); align-items: start; min-width: 0; }
.way > * { min-width: 0; }
.way-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.way-text p { margin-top: var(--space-lg); max-width: 38ch; font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.way-text p + p { margin-top: var(--space-md); }
@media (min-width: 900px) {
  .way-records { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); }
  .way-records .way-text { position: sticky; top: 96px; }
}

/* A decision record, as Baker lays one out: the header fields, then the
   same nine questions in the same order every time. No real record. */
.record { width: 100%; max-width: 680px; justify-self: end; }
.sheet { background: var(--tier-1); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: clamp(20px, 3vw, 36px); }
[data-scheme="dark"] .sheet { background: var(--tier-2); border-color: var(--ink-4); }
.sheet-kind { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.sheet-meta { margin-top: var(--space-lg); display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-md) var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--rule-strong); }
.sheet-meta dt { font-size: var(--fs-label-md); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: var(--ink-3); }
.sheet-meta dd { margin-top: 2px; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink-1); text-wrap: pretty; }
/* The parts run down a line like steps; each mark fills as the line passes. */
.parts { position: relative; margin-top: var(--space-md); }
.parts::before { content: ""; position: absolute; left: 5.25px; top: 22px; bottom: 22px; width: 1.5px; background: var(--rule-strong); transform-origin: top; }
.parts li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--space-md) 0 var(--space-md) 30px;
  border-bottom: 1px solid var(--rule-faint);
}
.parts li:last-child { border-bottom: 0; padding-bottom: 0; }
.parts li::before {
  content: ""; position: absolute; left: -3px; top: calc(var(--space-md) + 0.42em - 3px); width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--tier-1); background: var(--ink-3); background-clip: padding-box; box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
[data-scheme="dark"] .parts li::before { border-color: var(--tier-2); }
.part-name { font-size: var(--fs-body-lg); line-height: 1.45; font-weight: var(--fw-semibold); color: var(--ink); }
.part-q { font-size: var(--fs-body-md); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 600px) {
  .sheet-meta { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .parts li { grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: var(--space-xl); align-items: baseline; }
}

/* Mentoring and teaching: three plain paragraphs, one per kind of work. */
.teach { display: grid; gap: var(--space-xl); }
.teach p { max-width: 44ch; padding-top: var(--space-lg); border-top: 1px solid var(--rule); font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.375rem); line-height: 1.45; letter-spacing: -0.005em; color: var(--ink-1); text-wrap: pretty; }
.teach p:first-child { border-top-color: var(--ink); }

/* Time zones: one band per place, 24 hours wide and centred on now. */
.way-zones { align-items: start; }
.zones { min-width: 0; }
.zones-axis, .zone { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-lg); }
.zones-axis {
  grid-template-columns: 1fr auto 1fr; padding-bottom: var(--space-sm);
  font-size: var(--fs-label-sm); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: var(--ink-3);
}
.zones-axis span:last-child { text-align: end; }
.zones-now { color: var(--ink); font-weight: var(--fw-semibold); }
.zone-list { border-top: 1px solid var(--rule); }
.zone { align-items: center; row-gap: var(--space-sm); padding-block: var(--space-md); border-bottom: 1px solid var(--rule-faint); }
.zone-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); min-width: 0; }
.zone-name { font-size: var(--fs-body-lg); line-height: 1.35; font-weight: var(--fw-semibold); color: var(--ink); }
.zone-home .zone-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: var(--space-sm); border-radius: 50%; background: var(--red); vertical-align: 0.12em; }
.zone-sub { font-size: var(--fs-body-sm); line-height: 1.4; color: var(--ink-3); }
.zone-time { display: flex; align-items: baseline; gap: var(--space-sm); justify-content: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zone-time .clock { font-size: var(--fs-body-lg); line-height: 1.35; font-weight: var(--fw-medium); color: var(--ink); }
.zone-day { font-size: var(--fs-body-sm); line-height: 1.4; color: var(--ink-3); }
.zone-place { grid-column: 1; grid-row: 1; }
.zone-time { grid-column: 2; grid-row: 1; }
.zone-band {
  grid-column: 1 / -1; grid-row: 2; display: block; width: 100%; height: 34px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-xs);
}
.zones-key { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-xl); font-size: var(--fs-body-sm); line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }
.zones-legend { display: inline-flex; align-items: center; gap: var(--space-sm); }
@media (min-width: 800px) {
  .zones-axis, .zone { grid-template-columns: 11rem minmax(0, 1fr) 9.5rem; column-gap: var(--space-xl); }
  .zones-axis { grid-template-columns: 11rem 1fr auto 1fr 9.5rem; }
  .zones-axis::before, .zones-axis::after { content: ""; }
  .zone-band { grid-column: 2; grid-row: 1; height: 40px; }
  .zone-place { grid-column: 1; grid-row: 1; flex-direction: column; gap: 0; }
  .zone-time { grid-column: 3; grid-row: 1; flex-direction: column; align-items: end; gap: 0; }
}

/* Night, wherever it is shown: the same hatch on the map and the bands. */
.hatch { flex: none; width: 18px; height: 12px; border: 1px solid var(--rule); border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--ink-3) 0 1px, transparent 1px 4px); }

/* -- The map: the world from Ames ------------------------------------------ */
.map-fig { width: 100%; max-width: 520px; }
.map { position: relative; width: 100%; aspect-ratio: 1; }
.map > svg, .map > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .sea { fill: var(--paper); }
.map .rings circle { fill: none; stroke: var(--rule-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .land { fill: var(--tier-2); stroke: var(--rule-strong); stroke-width: 0.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .rim { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .spoke { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1.01; stroke-dashoffset: 0; }
.map .city { fill: var(--ink); stroke: var(--paper); stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.map .city-sm { stroke-width: 3; }
.map .home { fill: var(--red); stroke: var(--paper); stroke-width: 4; }
.map .home-ring { fill: none; stroke: var(--red); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; opacity: 0.55; }
.pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(12px, -50%);
  display: grid; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--paper);
  font-size: var(--fs-label-sm); line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: 0.01em; white-space: nowrap; color: var(--ink);
}
.pin-home { transform: translate(12px, 4px); }
.pin-above { transform: translate(-50%, calc(-100% - 12px)); }
.map-key { margin-top: var(--space-md); display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.map-key .hatch { transform: translateY(1px); }
@media (min-width: 600px) { .pin { font-size: var(--fs-label-md); } }

/* -- Writing ---------------------------------------------------------------- */
.writing { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: var(--space-3xl); }
.writing[hidden] { display: none; }
@media (min-width: 800px) { .writing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-4xl); } }
.shelf-title { font-size: var(--fs-heading-sm); line-height: 1.4; font-weight: var(--fw-semibold); padding-bottom: var(--space-md); border-bottom: 1px solid var(--ink); }
.entries > li { border-bottom: 1px solid var(--rule-faint); }
.row-link { display: grid; gap: var(--space-xs); min-height: var(--tap-min); padding-block: var(--space-lg); text-decoration: none; color: inherit; border-radius: var(--radius-xs); }
.row-link:hover .row-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.row-link:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.row-date { font-size: var(--fs-label-md); line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row-title { font-size: var(--fs-heading-sm); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--ink); text-wrap: pretty; }
.row-dek { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--ink-2); }

/* -- Footer ----------------------------------------------------------------- */
.foot-in { border-top: 1px solid var(--ink); padding-block: var(--space-3xl) calc(var(--space-4xl) * 1.5); display: grid; gap: var(--space-2xl); }
/* The signature signs the page off in the meta grey (fg-3, 6.10:1 light,
   6.81:1 dark), so the hero keeps the only red mark; the email sits under it
   in a full 48px row so the link is easy to hit on a phone. */
.foot-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); min-width: 0; }
.foot-id .sig { width: clamp(8.5rem, 4vw + 7rem, 11rem); height: auto; aspect-ratio: 241 / 124; color: var(--ink-3); }
.foot-mail {
  display: inline-flex; align-items: center; min-height: var(--tap-min); max-width: 100%;
  font-size: var(--fs-body-lg); line-height: 1.4; font-weight: var(--fw-medium); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--ink-3);
  border-radius: var(--radius-xs); overflow-wrap: anywhere;
}
.foot-mail:hover { text-decoration-color: var(--ink); }
.foot-mail:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-set { display: grid; gap: var(--space-sm); justify-items: start; }
.theme-label { font-size: var(--fs-label-md); line-height: 1.4; font-weight: var(--fw-medium); color: var(--ink-3); }
.theme-set .Button { min-width: 5.25rem; }
.theme-set .Button[aria-pressed="true"] { position: relative; z-index: 1; background: var(--tier-2); border-color: var(--ink); color: var(--ink); }
@media (min-width: 900px) { .foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; align-items: last baseline; column-gap: var(--space-4xl); } }

/* =============================================================================
   Motion. Each scene plays once, when it comes into view. Without scripts, or
   with reduced motion, everything above is already the finished state.
   ============================================================================= */
@keyframes tile-split {
  0% { transform: translate(var(--dx), var(--dy)); }
  24% { transform: translate(var(--dx), var(--dy)) scale(0.86); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The map: the lines leave Ames, then the places land. --lead holds the
     map back while the signature is still being written. */
  .js [data-scene="world"] .spoke { stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease) calc(var(--lead, 200ms) + var(--i, 0) * 240ms); }
  .js [data-scene="world"] .city { scale: 0.4; opacity: 0; transition: scale 360ms var(--ease) calc(var(--lead, 200ms) + 700ms + var(--i, 0) * 240ms), opacity 200ms var(--ease-standard) calc(var(--lead, 200ms) + 700ms + var(--i, 0) * 240ms); }
  .js [data-scene="world"] .home-ring { scale: 0.5; opacity: 0; transition: scale 900ms var(--ease) 120ms, opacity 900ms var(--ease-standard) 120ms; }
  .js [data-scene="world"] .pin:not(.pin-home) { opacity: 0; transition: opacity 300ms var(--ease-standard) calc(var(--lead, 200ms) + 900ms + var(--i, 0) * 240ms); }
  .js [data-scene="world"].is-on .spoke { stroke-dashoffset: 0; }
  .js [data-scene="world"].is-on .city { scale: 1; opacity: 1; }
  .js [data-scene="world"].is-on .home-ring { scale: 1; opacity: 0.55; }
  .js [data-scene="world"].is-on .pin { opacity: 1; }

  /* Monolith to services: the block holds together, its seams open, and the
     pieces move across one after another onto the platform. */
  .js [data-scene="split"] .tile { transform: translate(var(--dx), var(--dy)); }
  .js [data-scene="split"].is-on .tile { animation: tile-split 1100ms var(--ease) calc(240ms + var(--i) * 60ms) both; }
  .js [data-scene="split"] .split-arrow { stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--ease) 420ms; }
  .js [data-scene="split"] .slab { transform: scaleX(0); transition: transform 640ms var(--ease) 1000ms; }
  .js [data-scene="split"] .split-label { opacity: 0; transition: opacity 320ms var(--ease-standard) var(--at, 200ms); }
  .js [data-scene="split"] .split-label-end { --at: 1400ms; }
  .js [data-scene="split"].is-on .split-arrow { stroke-dashoffset: 0; }
  .js [data-scene="split"].is-on .slab { transform: none; }
  .js [data-scene="split"].is-on .split-label { opacity: 1; }

  /* Decision record: the line runs down the parts and each mark fills as it
     passes, in the order the record is written. */
  .js [data-scene="record"] .parts::before { transform: scaleY(0); transition: transform 1300ms cubic-bezier(0.45, 0, 0.3, 1) 260ms; }
  .js [data-scene="record"] .parts li::before { background: var(--tier-1); scale: 0.7; transition: background-color 200ms var(--ease-standard) calc(300ms + var(--i) * 140ms), scale 260ms var(--ease) calc(300ms + var(--i) * 140ms); }
  .js[data-scheme="dark"] [data-scene="record"] .parts li::before { background: var(--tier-2); }
  .js [data-scene="record"] .parts li > span { opacity: 0.32; transition: opacity 320ms var(--ease-standard) calc(260ms + var(--i) * 140ms); }
  .js [data-scene="record"].is-on .parts::before { transform: none; }
  .js [data-scene="record"].is-on .parts li::before { background: var(--ink-3); scale: 1; }
  .js [data-scene="record"].is-on .parts li > span { opacity: 1; }

  /* Time zones: each band opens out from now. */
  .js [data-scene="zones"] .zone-band { clip-path: inset(0 50% 0 50%); transition: clip-path 760ms var(--ease) calc(160ms + var(--i) * 90ms); }
  .js [data-scene="zones"].is-on .zone-band { clip-path: inset(0 0 0 0); }
}