/* The site's world: a playfield and graph paper (direction contract in
   .impeccable/surfaces/src-index-njk.md; DESIGN.md is written from the finished build).
   Every page loads this file. Change a token here and the whole site follows. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  /* Type scale (2026-10-12, cohesion audit: 13 H1 sizes and 3 weights became 2 sizes, one weight).
     Hub pages (/about/, /portfolio/, /writing/, /resume/) use --h1-hub; every other page --h1-page. */
  --h1-hub: clamp(2.5rem, 1.6rem + 4.4vw, 5.4rem);
  --h1-page: clamp(2.1rem, 1.5rem + 3vw, 4rem);
  --h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  /* Section spacing (2026-10-12): 11 values became two. */
  --section: clamp(40px, 5vw, 72px); /* 2026-10-12: was clamp(48px, 7vw, 96px); "spacing is awkwardly big section by section" */
  --section-tight: clamp(26px, 3.5vw, 44px);
  /* Grounds */
  --field: #14161c;        /* the playfield */
  --field-2: #1b1e26;      /* raised playfield surface */
  --field-line: #262a34;   /* well grid lines */
  --paper: #eef1f4;        /* graph-paper reading ground */
  --paper-line: #dde2e8;   /* graph lines */
  --sheet: #f8f9fb;        /* a sheet laid on the paper */
  /* Ink */
  --ink: #15171c;
  --ink-soft: #464c57;     /* secondary text on paper (7.6:1) */
  --bone: #f2f0ea;         /* text on the playfield */
  --bone-soft: #b4b8c1;    /* secondary text on the playfield (8.4:1) */
  /* The seven piece colors, the site's own (not the classic block game's set; see stack.js).
     Meaning rides on them: work is the I (teal), numbers are the O (amber), lessons are the Z (coral). */
  --piece-i: #3fb6a8;
  --piece-o: #f2b33d;
  --piece-t: #e9dcc0;
  --piece-s: #8fb04a;
  --piece-z: #e0563b;
  --piece-j: #6aa9d8;
  --piece-l: #c97b4a;
  --work: var(--piece-i);
  --work-ink: #146e64;     /* teal dark enough for text on paper */
  --number: var(--piece-o);
  --number-ink: #7d5c00;
  --lesson: var(--piece-z);
  --lesson-ink: #a8291f;
  /* The system's color grammar (2026-10-11, one meaning everywhere): color means the outcome a thing
     serves, the piece's shape means the step, amber means proof and nothing else.
     Get found = blue, get understood = green, get chosen = red. Steps are neutral. */
  --found: var(--piece-j);
  --found-ink: #24527a;
  --understood: var(--piece-s);
  --understood-ink: #3f5a12;
  --chosen: var(--piece-z);
  --chosen-ink: #a8291f;
  --proof: var(--piece-o);
  --step: #c9ced6;
  --sky: var(--piece-j);
  --moss: var(--piece-s);
  --sand: var(--piece-l);
  /* Type */
  --face: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --read: clamp(17px, calc(13px + 0.45vw), 23px);
  /* Space: one rhythm, a cell is the unit */
  --cell: 8px;
  --gutter: clamp(16px, 4vw, 64px);
  --measure: calc(var(--read) * 38); /* the reading column, about 68 characters of body text; one unit for headings and paragraphs so they share a left edge (2026-10-12, Hayden) */
  --max: 1320px; /* 2026-10-12: was 1760; grids that wide left section headings stranded far from their cards */
  --radius: 4px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--read)/1.6 var(--face);
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--number); color: var(--ink); }
:focus-visible { outline: 3px solid var(--number); outline-offset: 3px; border-radius: 2px; }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sprite { image-rendering: pixelated; }

/* Links look like links without hover. */
a { color: var(--work-ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }

/* Graph paper: the well's grid carried onto the reading ground. */
.paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: calc(var(--cell) * 4) calc(var(--cell) * 4);
}
.field { background: var(--field); color: var(--bone); }
.field a { color: var(--bone); }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Buttons: tactile blocks. Press sinks; no lift, no glow, no arrows. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--radius);
  font: 700 1rem/1 var(--face); font-stretch: 112%; letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.28);
  transition: background-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28); }
.btn--primary, .field .btn--primary { background: var(--number); color: var(--ink); }
.btn--quiet, .field .btn--quiet { background: var(--field-2); color: var(--bone); box-shadow: inset 0 0 0 2px #3a3f4b, inset 0 -4px 0 rgba(0, 0, 0, 0.3); }
.paper .btn--quiet, .sheet .btn--quiet { background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 2px #c3cad3, inset 0 -4px 0 rgba(0, 0, 0, 0.08); }
@media (hover: hover) {
  .btn--primary:hover { background: #ffc251; }
  .btn--quiet:hover { background: #242833; }
  .paper .btn--quiet:hover, .sheet .btn--quiet:hover { background: #ffffff; }
}

/* Header: the playfield's top edge. Plain links without JS; with JS (html.js, set by early.js in the
   head before first paint, so the phone header never jumps) the labels become buttons and the sheet. */
.site-header { position: relative; z-index: 40; background: var(--field); color: var(--bone); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; min-height: 64px; padding-block: 6px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bone); text-decoration: none; font: 800 1.15rem/1 var(--face); font-stretch: 118%; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark .sprite { width: 26px; height: auto; }
.header-bella { display: none; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav ul { margin: 0; padding: 0; list-style: none; }
.nav-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.nav-link, .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--bone-soft); text-decoration: none; font: 600 0.95rem/1 var(--face); border-radius: var(--radius); cursor: pointer; }
.nav-link[aria-current], .nav-toggle.is-here { color: var(--bone); box-shadow: inset 0 -3px 0 var(--number); border-radius: 0; }
.nav-resume { margin-left: 6px; padding: 0 14px; background: var(--number); color: var(--ink); font-weight: 700; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
.nav-resume[aria-current] { color: var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 0 0 2px var(--bone); border-radius: var(--radius); }
@media (hover: hover) {
  .nav-link:hover, .nav-toggle:hover { color: var(--bone); background: var(--field-2); }
  .nav-resume:hover { background: #ffc251; color: var(--ink); }
}
.nav-link:focus-visible, .nav-toggle:focus-visible, .nav-menu:focus-visible, .nav-list a:focus-visible { outline: 3px solid var(--number); outline-offset: 2px; }
/* One piece per tab (Hayden, 2026-10-12: "two pieces for each tab is too much"): the tab's own piece turns when its panel opens. */
@media (prefers-reduced-motion: no-preference) { .nav-toggle .nav-piece { transition: transform var(--m-quick, .15s) steps(2, end); } }
.nav-toggle[aria-expanded="true"] .nav-piece { transform: rotate(180deg); }
.nav-start, .nav-panel, .nav-toggle, .nav-menu { display: none; }
.js .nav-toggle { display: inline-flex; }
.js .nav-menu { display: inline-block; }
.nav-menu { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: var(--radius); background: var(--field-2); color: var(--bone); font: 700 0.95rem/1 var(--face); box-shadow: inset 0 0 0 2px #3a3f4b; cursor: pointer; }
.nav-menu-close, .nav-menu[aria-expanded="true"] .nav-menu-open { display: none; }
.nav-menu[aria-expanded="true"] .nav-menu-close { display: inline; }

/* Panel contents, shared by the desktop panel and the phone sheet. */
.nav-col-head, .nav-start-label { margin: 0 0 8px; color: var(--bone-soft); font-size: 0.85rem; font-weight: 700; }
.nav-col ul { display: grid; gap: 2px; }
.nav-col a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: var(--radius); color: var(--bone); text-decoration: none; }
.nav-col a strong { display: block; font-weight: 700; }
.nav-col a .nav-text span { display: block; margin-top: 2px; color: var(--bone-soft); font-size: 0.88rem; }
.nav-sprite { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--field); border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.4); }
.nav-sprite .sprite { width: 28px; height: auto; }
/* The current page is a locked row; hover shows the ghost of where you'd land. */
.nav-col a.is-here { background: rgba(242, 179, 61, 0.14); box-shadow: inset 0 0 0 2px rgba(242, 179, 61, 0.55); }
@media (hover: hover) { .nav-col a:hover { background: var(--field); } }
.nav-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 14px; border-top: 1px solid var(--field-line); }
.nav-hub { display: inline-flex; align-items: center; min-height: 44px; color: var(--number); font-weight: 700; }
.nav-motto { margin: 0; color: var(--bone-soft); font-size: 0.9rem; }

/* Desktop, enhanced: labels open one full-width panel under the bar. */
@media (min-width: 900px) {
  .js .nav-menu { display: none; }
  .js .nav-item:not(.nav-item--primary) > .nav-link { display: none; }
  .js .nav-item.is-open > .nav-panel { display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--field-2); border-top: 1px solid var(--field-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
  .nav-panel-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 40px; max-width: var(--max, 1200px); margin-inline: auto; padding: 24px clamp(16px, 4vw, 48px) 20px; }
  .nav-panel-foot { grid-column: 1 / -1; }
}

/* Phone, enhanced: Work, Resume and Menu in the bar; Menu opens a sheet with everything. */
@media (max-width: 899px) {
  .site-header .wrap { flex-wrap: nowrap; gap: 8px; }
  .header-bella { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #3fb6a8; box-shadow: inset 0 0 0 2px #192c2a; }
  .header-bella .sprite { width: 38px; height: auto; }
  .header-bella:focus-visible { outline: 3px solid var(--number); outline-offset: 2px; }
  html.menu-locked .header-bella { visibility: hidden; }
  .wordmark { font-size: 1rem; gap: 8px; }
  .wordmark .sprite { width: 22px; }
  html:not(.js) .site-nav { width: 100%; }
  html:not(.js) .site-nav .nav-top { justify-content: space-between; flex-wrap: wrap; }
  html:not(.js) .site-header .wrap { flex-wrap: wrap; }
  .js .nav-toggle { display: none; }
  .js .nav-item:not(.nav-item--primary) { display: none; }
  .js .nav-menu { order: 2; }
  .js .nav-top { flex-wrap: nowrap; }
  .js .nav-link { padding: 0 8px; }
  .js .nav-resume { margin-left: 2px; padding: 0 10px; }
  /* Anchor the sheet to the sticky header. A fixed descendant of a sticky header can detach
     when mobile Safari changes its viewport while scrolled mid-page. */
  .js .site-nav.is-sheet .nav-list { position: absolute; inset: 100% 0 auto; height: calc(100dvh - 69px); overflow-y: auto; overscroll-behavior: contain; background: var(--field); padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--field-line); }
  .js .site-nav.is-sheet .nav-start { display: block; margin-bottom: 20px; }
  .nav-start ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nav-start a { display: grid; gap: 4px; align-content: start; min-height: 88px; padding: 12px; background: var(--field-2); border-top: 5px solid var(--tile); border-radius: 3px; color: var(--bone); text-decoration: none; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35); }
  .nav-start a span { color: var(--bone-soft); font-size: 0.88rem; line-height: 1.35; }
  .js .site-nav.is-sheet .nav-top { flex-direction: column; align-items: stretch; gap: 18px; }
  .js .site-nav.is-sheet .nav-item { display: block !important; }
  .js .site-nav.is-sheet .nav-item > .nav-link { font-size: 1.1rem; color: var(--bone); padding: 0; }
  .js .site-nav.is-sheet .nav-item--primary > .nav-link { padding: 0 16px; justify-content: center; }
  .js .site-nav.is-sheet .nav-panel { display: block; margin-top: 6px; }
  .js .site-nav.is-sheet .nav-col { margin-bottom: 12px; scroll-margin-top: 8px; }
  .js .site-nav.is-sheet .nav-col a .nav-text span { display: none; }
  .js .site-nav.is-sheet .nav-col-head { margin-top: 6px; }
}
@media (max-width: 359px) { .wordmark { font-size: 0.9rem; } .wordmark .sprite { display: none; } .js .nav-resume, .nav-menu { padding: 0 9px; } }
.menu-locked { overflow: hidden; }

/* Footer: settled pieces at the bottom of the well. */
.site-footer { background: var(--field); color: var(--bone-soft); padding-block: 40px 28px; }
.site-footer .wrap { display: grid; gap: 28px; }
.footer-motto { margin: 6px 0 0; color: var(--bone-soft); font-size: 0.95rem; }
.footer-sites h2, .footer-home h2 { margin: 0 0 8px; color: var(--bone); font-size: 1rem; font-weight: 700; }
.footer-sites ul, .footer-links ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone-soft); text-decoration-color: #4a505c; }
@media (hover: hover) { .site-footer a:hover { color: var(--bone); } }
.footer-home { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-home p { margin: 0; color: var(--bone); }
.footer-home .sprite { width: 48px; height: auto; }
.footer-trip .sprite:last-child { width: 30px; }
.footer-trip { display: flex; align-items: center; gap: 10px; }
.footer-trip .trip-line { width: 56px; height: 4px; background: repeating-linear-gradient(90deg, var(--bone-soft) 0 8px, transparent 8px 12px); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid var(--field-line); padding-top: 16px; font-size: 0.9rem; }

/* Neutral page body for pages not yet rebuilt in this world (stubs). */
.page-plain main { max-width: var(--max); margin-inline: auto; padding: 32px var(--gutter) 56px; }
.page-plain main h1 { font: 800 var(--h1-page)/1.04 var(--face); font-stretch: 112%; letter-spacing: -0.025em; margin: 8px 0 16px; }
.page-plain nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 44px; }
.page-plain nav[aria-label="Related"] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.page-plain nav a, .page-plain [data-next-step] { display: inline-flex; align-items: center; min-height: 44px; }

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

/* Bella naps at the bottom of every page; a tap wakes her (menu.js). */
.footer-bella { display: inline-grid; place-items: end center; min-width: 64px; min-height: 48px; padding: 4px; border: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.footer-bella .sprite { width: 56px; height: auto; }
.footer-bella .fb-sit, .footer-bella.is-awake .fb-rest { display: none; }
.footer-bella.is-awake .fb-sit { display: block; }
.footer-bella:focus-visible { outline: 3px solid var(--number); outline-offset: 2px; }
.footer-bella-says { flex-basis: 100%; min-height: 1.4em; margin: 0; color: var(--bone-soft); font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) { .footer-bella.is-awake .fb-sit { animation: fb-pop var(--m-lock) steps(3, end); } @keyframes fb-pop { from { transform: translateY(8px); } 70% { transform: translateY(-2px); } } }

/* Photo frame: every photo of Hayden sits in a block, a piece-colored border with a hard offset
   shadow in a second piece color, the way the share cards and the well draw blocks. */
.pframe { position: relative; margin: 0; }
.pframe-img { position: relative; padding: 8px; background: var(--frame); box-shadow: 12px 12px 0 var(--frame-shadow), inset 0 -5px 0 rgba(0, 0, 0, 0.18); }
.pframe[data-egg="bella"] .pframe-img { overflow: hidden; }
.pframe-img img { display: block; width: 100%; height: auto; object-fit: cover; object-position: var(--focus); }
.pframe figcaption { margin-top: 18px; font-size: 0.9rem; color: var(--ink-soft); }
/* The eggs: hidden until the button is pressed; the button sits on the frame's corner like a tag. */
.pframe-egg { position: absolute; right: -6px; top: -14px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius);
  background: var(--field); color: var(--bone); font: 700 0.85rem/1 var(--face); cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.4); }
.pframe-egg:focus-visible { outline: 3px solid var(--number); outline-offset: 2px; }
.egg-hat, .egg-run, .egg-pop { position: absolute; pointer-events: none; opacity: 0; }
.egg-hat { transform: translate(-50%, -260%); }
.egg-hat .sprite, .egg-run .sprite, .egg-pop .sprite { width: 100%; height: auto; }
.pframe.is-egg .egg-hat { opacity: 1; transform: translate(-50%, -78%); }
/* Runs and pops move by transform only. The run is 34% of the frame wide, so 397% of itself
   carries it from 30% before the frame's left edge to 5% past its right edge. */
.egg-run { bottom: 12px; left: -30%; width: 34%; }
.pframe.is-egg .egg-run { opacity: 1; transform: translateX(397%); }
.egg-pop { right: 14px; bottom: 14px; width: 28%; transform: translateY(160%); }
.pframe.is-egg .egg-pop { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .egg-hat { transition: transform var(--m-lock) steps(3, end), opacity .1s; }
  .egg-run { transition: transform 1.6s steps(24, end), opacity .1s; }
  .egg-pop { transition: transform var(--m-lock) steps(3, end), opacity .1s; }
}

/* Block motion, site-wide (menu.js). A clear-line is a settled row with one gap: on scroll a piece
   drops into the gap, the row flashes and clears, and the reader moves on. Without JS, or with reduced
   motion, it's a full, still row. Words never move (motion.css). */
.clear-line { display: flex; gap: 3px; height: 12px; margin: 2.4em 0 0; }
.clear-line i { flex: 1; border-radius: 1px; transform-origin: 50% 100%; }
.clear-line i:nth-child(7n + 1) { background: var(--piece-i); } .clear-line i:nth-child(7n + 2) { background: var(--piece-o); }
.clear-line i:nth-child(7n + 3) { background: var(--piece-t); } .clear-line i:nth-child(7n + 4) { background: var(--piece-s); }
.clear-line i:nth-child(7n + 5) { background: var(--piece-z); } .clear-line i:nth-child(7n + 6) { background: var(--piece-j); }
.clear-line i:nth-child(7n + 7) { background: var(--piece-l); }
.field .clear-line.is-cleared i { background: var(--field-line); }
@media (prefers-reduced-motion: no-preference) {
  .clear-line.is-armed i:nth-child(7) { transform: translateY(-72px); opacity: 0; }
  .clear-line.is-cleared i:nth-child(7) { transform: none; opacity: 1; transition: transform var(--m-lock) steps(3, end), opacity 1ms; }
  .clear-line.is-cleared i { animation: line-clear calc(var(--m-flash) + var(--m-clear)) steps(4, end) var(--m-lock) forwards; }
  @keyframes line-clear { 30% { background: #fff; transform: none; } 100% { background: #c3cad3; transform: scaleY(.25); } }
}
.clear-line--head { margin: 0 0 22px; grid-column: 1 / -1; }

/* Reading progress: a row of blocks along the top edge that fills as you read (menu.js sets --p).
   Only long pages get .has-progress. transform-only, so it never triggers layout. */
.progress { position: fixed; inset: 0 0 auto 0; height: 5px; z-index: 60; pointer-events: none; display: none; }
.has-progress .progress { display: block; }
.progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--piece-i) 0 14.28%, var(--piece-o) 0 28.56%, var(--piece-z) 0 42.84%, var(--piece-j) 0 57.12%, var(--piece-s) 0 71.4%, var(--piece-l) 0 85.68%, var(--piece-t) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 24px); mask: repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 24px); }

/* Back to top: a T-piece pointing up. Appears after a screen and a half; on tap it flies up first. */
.to-top { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 55; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 52px; min-height: 52px; padding: 7px 8px 5px; border-radius: 4px; background: var(--field); color: var(--bone); text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 0 0 2px #3a3f4b; font: 800 .7rem/1 var(--face); letter-spacing: .02em;
  opacity: 0; transform: translateY(16px); pointer-events: none; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top-piece { display: grid; grid-template-columns: repeat(3, 8px); grid-template-rows: repeat(2, 8px); gap: 1px; }
.to-top-piece i { background: var(--piece-o); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.to-top-piece i:first-child { grid-column: 2; grid-row: 1; }
.to-top-piece i:nth-child(2) { grid-column: 1; grid-row: 2; } .to-top-piece i:nth-child(3) { grid-column: 2; grid-row: 2; } .to-top-piece i:nth-child(4) { grid-column: 3; grid-row: 2; }
.to-top:focus-visible { outline: 3px solid var(--number); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .to-top.is-launching .to-top-piece { animation: piece-launch .45s var(--ease-in) forwards; }
  @keyframes piece-launch { to { transform: translateY(-120vh); } }
}
@media print { .progress, .to-top { display: none !important; } }

@media print { .li-wrap, .li-strip { display: none !important; } }
.qr-li { padding-block: 8px 0; }

/* Receipt: a real dashboard screenshot on a paper slip, pinned with a block. */
.receipt { position: relative; margin: 26px 0; padding: 12px 12px 14px; background: #fff; color: #15171c; border-radius: 3px;
  box-shadow: 10px 10px 0 var(--piece-s), 0 1px 0 var(--paper-line); max-width: 920px; }
.receipt img { display: block; width: 100%; height: auto; border: 1px solid #e3e7ec; border-radius: 2px; }
.receipt-tag { margin: 0 0 10px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: #15171c; color: #f2f0ea; font: 800 .8rem/1.4 var(--face); border-radius: 2px; }
.receipt-tag span { color: var(--piece-s); }
.receipt figcaption { margin-top: 10px; font-size: .88rem; line-height: 1.5; color: #464c57; }
.receipt .receipt-tag + figcaption { margin: 0 0 10px; }
.receipt figcaption strong { color: #15171c; }
.receipt-open { display: block; }
.receipt-open-label { display: inline-flex; align-items: center; min-height: 44px; color: var(--work-ink); font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.receipt-open:focus-visible { outline: 3px solid var(--piece-s); outline-offset: 3px; }
/* A receipt keeps its own colors on every page, whatever the page's figcaption or text rules say. */
body .receipt .receipt-tag { color: #f2f0ea; background: #15171c; }
body .receipt figcaption { color: #464c57; }
body .receipt figcaption strong { color: #15171c; }

/* Quick jump dialog. */
.jump-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(70vh, 560px); padding: 0; border: 0; border-radius: 4px; background: var(--field); color: var(--bone);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 2px #3a3f4b; }
.jump-dialog::backdrop { background: rgba(10, 11, 14, .6); }
.jump-form { display: grid; gap: 10px; padding: 16px; }
.jump-label { font-weight: 800; color: var(--number); }
.jump-form input { min-height: 48px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--field-2); color: var(--bone); font: 600 1.05rem var(--face); box-shadow: inset 0 0 0 2px #3a3f4b; }
.jump-form input:focus { outline: 3px solid var(--number); outline-offset: 1px; }
.jump-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.jump-list a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--bone); text-decoration: none; border-radius: 3px; }
.jump-list a:focus-visible { background: var(--field-2); outline: 2px solid var(--number); outline-offset: -2px; }
.jump-list li.is-first a { background: var(--field-2); }
@media (hover: hover) { .jump-list a:hover { background: var(--field-2); } }
.jump-hint { margin: 0; color: var(--bone-soft); font-size: .85rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.jump-close { min-height: 44px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--field-2); color: var(--bone); font: 700 .85rem var(--face); cursor: pointer; }

.nav-kbd { margin: 0; color: var(--bone-soft); font-size: .85rem; }
.nav-kbd kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 3px; background: var(--field); box-shadow: inset 0 -2px 0 rgba(0,0,0,.4), inset 0 0 0 1px #3a3f4b; color: var(--bone); font: 700 .8rem var(--face); text-align: center; }
@media (max-width: 899px) { .nav-kbd { display: none; } }

/* Break-it fixes (2026-10-11). */
.clear-line, .clear-line i { pointer-events: none; }
.to-top { visibility: hidden; transition: opacity var(--m-out) var(--ease-in), transform var(--m-out) var(--ease-in), visibility 0s linear var(--m-out); }
.to-top.is-shown { visibility: visible; transition: opacity var(--m-in) var(--ease-out), transform var(--m-in) var(--ease-out), visibility 0s; }
html:not(.js) .pframe-egg, html:not(.js) .footer-bella-says { display: none; }
html:not(.js) .footer-bella { pointer-events: none; }
@media (hover: hover) {
  details > summary:hover { filter: brightness(1.08); text-decoration: underline; text-underline-offset: .2em; }
  [role="tab"][aria-selected="false"]:hover { filter: brightness(1.15); text-decoration: underline; text-underline-offset: .2em; }
}
/* Print: the page's words only. No menu, footer, eggs, share row or LinkedIn card; dark sections print as ink on paper. */
@media print {
  .site-header, .site-footer, .pframe-egg, .post-share, .post-toc, .li-card, .to-top, .progress, .jump-dialog, .clear-line, .footer-bella, .nav-lucky { display: none !important; }
  body, .field, main { background: #fff !important; color: #000 !important; }
  .field * { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}
.jump-none { padding: 10px; color: var(--bone-soft); }

/* Header v2 (2026-10-11, Hayden: "the header isn't exciting enough, there's no linkedin button").
   Sticky, with his role under his name, a LinkedIn button, and a settled row of blocks as its bottom
   edge that fills with color as you read (the reading progress). */
.site-header { position: sticky; top: 0; }
.wordmark { gap: 12px; }
.wordmark .sprite { width: 30px; }
.wm-text { display: grid; gap: 2px; }
.wm-name { font-size: 1.15rem; }
.wm-role { color: var(--number); font: 700 .74rem/1 var(--face); letter-spacing: .02em; font-stretch: 100%; }
.header-edge { position: relative; height: 5px; background: repeating-linear-gradient(90deg, var(--piece-i) 0 40px, var(--piece-o) 40px 80px, var(--piece-z) 80px 120px, var(--piece-j) 120px 160px, var(--piece-s) 160px 200px, var(--piece-l) 200px 240px, var(--piece-t) 240px 280px); }
.header-edge::after { content: ""; position: absolute; inset: 0; background: rgba(20, 22, 28, .62); }
.header-edge .progress { display: block; position: absolute; inset: 0; z-index: 1; height: auto; }
.header-edge .progress i { height: 100%; -webkit-mask: none; mask: none; background: repeating-linear-gradient(90deg, var(--piece-i) 0 40px, var(--piece-o) 40px 80px, var(--piece-z) 80px 120px, var(--piece-j) 120px 160px, var(--piece-s) 160px 200px, var(--piece-l) 200px 240px, var(--piece-t) 240px 280px); }
/* Scaling the multicolor gradient compressed and changed its stripes on every scroll frame.
   The palette stays in the edge; a solid fill moves across it without color flutter. */
.header-edge .progress i { background: var(--number); }
.nav-item--li { order: 9; } .nav-item--primary { order: 10; }
.nav-li-btn { gap: 0; padding: 0 12px; margin-left: 4px; color: var(--bone); background: var(--field-2); box-shadow: inset 0 0 0 2px #3a3f4b; border-radius: var(--radius); }
.nav-li-btn .li-mark { margin-right: 8px; }
@media (hover: hover) { .nav-li-btn:hover { background: #242833; } }
@media (max-width: 899px) { .js .nav-item--li { display: none; } .js .site-nav.is-sheet .nav-item--li { display: block !important; } .wm-role { font-size: .68rem; } }
@media (max-width: 359px) { .wm-role { display: none; } }

/* Menu panels: a feature card fills the space beside the links. */
.nav-feature a { display: grid; gap: 6px; height: 100%; padding: 18px; background: var(--field); color: var(--bone); text-decoration: none; border-radius: 3px;
  border-top: 5px solid var(--number); box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); }
.nav-feature--post a { border-top-color: var(--piece-j); } .nav-feature--linkedin a { border-top-color: #0a66c2; } .nav-feature--photo a { border-top-color: var(--piece-i); }
.nf-label { display: inline-flex; align-items: center; color: var(--bone-soft); font-size: .8rem; font-weight: 800; }
.nf-big { color: var(--number); font-size: 2.6rem; line-height: 1; font-weight: 800; }
.nf-title { font-size: 1.1rem; line-height: 1.3; }
.nf-quote { font-size: 1.02rem; line-height: 1.45; font-weight: 600; }
.nf-text { color: var(--bone-soft); line-height: 1.45; font-size: .92rem; }
.nf-src { color: var(--bone-soft); font-size: .78rem; }
.nf-photo { grid-template-columns: 72px 1fr; align-items: center; gap: 14px !important; }
.nf-photo img { width: 72px; height: 96px; object-fit: cover; object-position: 50% 25%; border-radius: 2px; box-shadow: 4px 4px 0 var(--piece-o); }
@media (hover: hover) { .nav-feature a:hover { background: #20232c; } }
@media (max-width: 899px) { .js .site-nav.is-sheet .nav-feature { display: none; } }

/* Footer v2 (Hayden: "the footer sucks"). Who he is, the work, how he works, his sites with their
   mascots, and LinkedIn, on a settled stack. */
.site-footer { padding-block: 0 28px; }
.footer-edge { line-height: 0; overflow: hidden; }
.footer-edge .sprite { width: 100%; height: auto; min-height: 18px; display: block; }
.footer-grid { display: grid; gap: 32px 40px; padding-block: 40px 28px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; } }
.footer-name { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bone) !important; text-decoration: none; font: 800 1.3rem/1 var(--face); font-stretch: 112%; }
.footer-name .sprite { width: 30px; height: auto; }
.footer-me .footer-motto { margin: 10px 0 18px; color: var(--bone); font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
.footer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.footer-actions .btn--primary { color: var(--ink) !important; }
.footer-actions .btn--quiet { color: var(--bone) !important; }
.footer-me .footer-home { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; color: var(--bone-soft); }
.footer-col h2 { margin: 0 0 8px; color: var(--bone); font-size: .95rem; font-weight: 800; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-col a { text-decoration: none; }
@media (hover: hover) { .footer-col a:hover { text-decoration: underline; text-underline-offset: .2em; } }
.footer-sites ul { display: grid; gap: 0; }
.fs-mascot { display: inline-grid; place-items: center; width: 26px; margin-right: 10px; }
.fs-mascot .sprite { width: 22px; height: auto; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--field-line); }
.footer-base .footer-links ul { display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; margin: 0; padding: 0; }
.footer-base .footer-links a { font-size: .9rem; }
.footer-base .footer-bella-says { flex-basis: 100%; }
@media (min-width: 900px) {
  .js .nav-item--li > .nav-link { display: inline-flex; }
  .nav-panel-inner { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)) minmax(260px, 340px); }
  .nav-panel-foot { grid-column: 1 / -1; }
}
.nav-feature { align-self: start; }
.nav-feature a { align-content: start; height: auto; }
.li-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; flex: none; background: #0a66c2; color: #fff; border-radius: 3px; font: 800 .8rem/1 var(--face); }
@media (min-width: 900px) {
  .js .nav-item.nav-item--li > .nav-link { display: inline-flex; }
  .nav-panel-inner { grid-template-columns: repeat(var(--cols, 2), minmax(0, 440px)) minmax(260px, 340px); justify-content: start; }
}

/* Phone header (Codex comparison #4): LinkedIn one tap away on every page; Menu as a compact block
   icon so name, LinkedIn, Resume and Menu fit at 390. Text stays in the buttons for screen readers. */
@media (max-width: 899px) {
  .js .nav-item.nav-item--li { display: block; }
  .js .nav-item--li .nav-li-btn { width: 44px; min-width: 44px; padding: 0; justify-content: center; margin: 0; }
  .js .nav-item--li .nav-li-btn .li-mark { margin: 0; }
  .js .nav-item--li .nav-li-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .js .site-nav.is-sheet .nav-item--li .nav-li-btn { width: auto; padding: 0 12px; }
  .js .site-nav.is-sheet .nav-item--li .nav-li-text { position: static; width: auto; height: auto; clip-path: none; }
  .js .nav-menu { width: 44px; padding: 0; font-size: 0; position: relative; }
  .js .nav-menu::before { content: ""; position: absolute; left: 13px; top: 14px; width: 18px; height: 4px; background: var(--bone);
    box-shadow: 0 6px 0 var(--number), 0 12px 0 var(--bone); }
  .js .nav-menu[aria-expanded="true"]::before { background: var(--number); box-shadow: 0 6px 0 var(--number), 0 12px 0 var(--number); }
  .site-header .wrap { gap: 6px; }
  .js .nav-top { gap: 6px; }
}
@media (max-width: 899px) {
  .wordmark { gap: 8px; }
  .wordmark .sprite { width: 22px; }
  .wm-name { font-size: .98rem; }
  .js .nav-resume { padding: 0 10px; font-size: .9rem; }
}
/* 2026-10-12: at 381 to 430 the name ran 11px into the LinkedIn button ("Hayden Schuste"). */
@media (max-width: 430px) { .wordmark { gap: 6px; } .wordmark .sprite { width: 18px; } .wm-name { font-size: .84rem; } .wm-role { font-size: .62rem; } .site-header .wrap { gap: 4px; } }
@media (max-width: 380px) { .wordmark .sprite { display: none; } .wm-name { font-size: .92rem; } .wm-role { font-size: .62rem; } }
@media (max-width: 345px) { .js .nav-item.nav-item--li { display: none; } .js .site-nav.is-sheet .nav-item.nav-item--li { display: block !important; } }

/* Screen-reader-only text. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Piece chips remain for compact links inside the full-time-work cards. */
.sys-tags { margin: 20px 0 0; }
.sys-tags-label { margin: 0 0 8px; font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
.field .sys-tags-label, .sys-tags--dark .sys-tags-label { color: var(--bone-soft); }
.sys-tags ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sys-tag { --tile: var(--found); --tile-ink: #0d2236; } .sys-tag--understood { --tile: var(--understood); --tile-ink: #1d2a0a; } .sys-tag--chosen { --tile: var(--chosen); --tile-ink: #2c0a04; }
.sys-tag > a, .sys-tag > span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px; background: var(--tile); color: var(--tile-ink);
  font-size: .85rem; font-weight: 800; line-height: 1.2; text-decoration: none; border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); }
.sys-tag > a { min-height: 44px; }
@media (hover: hover) { .sys-tag > a:hover { filter: brightness(1.08); text-decoration: underline; } }
.sys-tag i { width: 10px; height: 10px; background: rgba(20, 22, 28, .75); border-radius: 1px; }

.sys-band { padding-block: var(--section-tight); border-top: 4px solid #2a2e38; }
.sys-band-grid { display: grid; gap: 18px 48px; align-items: start; }
@media (min-width: 900px) { .sys-band-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } }
@media (min-width: 1200px) { .sys-band-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }
.sys-band-title { margin: 0 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--bone); }
.sys-band-line { margin: 0; color: var(--bone-soft); line-height: 1.6; }
.sys-band-more { margin: 14px 0 0; }
.sys-band-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--number); font-weight: 800; }

/* One small map, shared by every page mapped to the fifteen-piece system. Each active cell is a
   phone-size link; the dim cells show the whole shape without pretending to be clickable. */
.sys-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sys-mini-stage { --mini-color: var(--found); --mini-ink: #0d2236; min-width: 0; }
.sys-mini-stage--understood { --mini-color: var(--understood); --mini-ink: #1d2a0a; }
.sys-mini-stage--chosen { --mini-color: var(--chosen); --mini-ink: #2c0a04; }
.sys-mini-heading { display: flex; align-items: end; min-height: 32px; margin: 0 0 8px; color: var(--mini-color); font-size: .76rem; font-weight: 850; line-height: 1.15; }
.sys-mini-stage ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sys-mini-piece { position: relative; display: flex; align-items: center; min-height: 44px; padding: 5px 7px; border-radius: 2px; font-size: .72rem; font-weight: 800; line-height: 1.12; overflow-wrap: anywhere; }
.sys-mini-piece.is-lit { background: var(--mini-color); color: var(--mini-ink); text-decoration: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
@media (hover: hover) { .sys-mini-piece.is-lit:hover { text-decoration: underline; } }
.sys-mini-piece.is-lit:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }
.sys-mini-piece.is-dim { background: var(--field-2); color: var(--bone-soft); box-shadow: inset 0 0 0 1px #30343e; }
.sys-mini-studs { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 2px; }
.sys-mini-studs i { width: 5px; height: 5px; background: var(--proof); border: 1px solid var(--mini-ink); }
.sys-mini-caption { margin: 10px 0 0; color: var(--bone-soft); font-size: .8rem; }

/* Small phones (2026-10-11 audit at 320 and 360): nothing may push the page sideways. Long labels
   wrap, grid and flex children may shrink, wide tables scroll inside themselves. */
h1, h2 { overflow-wrap: break-word; hyphens: manual; }
.sys-tags li { min-width: 0; max-width: 100%; }
.sys-tag > a, .sys-tag > span { max-width: 100%; white-space: normal; }
main table { max-width: 100%; }
@media (max-width: 360px) {
  .wrap > *, [class*="-grid"] > * { min-width: 0; }
  .post-body table, .ent-table { display: block; overflow-x: auto; }
}
@media (max-width: 360px) {
  [class*="-switch"] ul { flex-wrap: wrap; }
  [class*="-switch"] a { padding-inline: 8px; }
  .ent-tiles a { font-size: .78rem; padding-inline: 4px; overflow-wrap: anywhere; }
  .motto-piece { margin-left: 0 !important; margin-right: 0 !important; }
  .post-answer table { display: block; overflow-x: auto; }
}
a > span { min-width: 0; }

/* Keep going: the next click follows the idea. Each link names the piece it shares with this page. */
.sys-keep { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sys-keep-item { --tile: var(--found); display: grid; gap: 2px; padding: 10px 14px; background: var(--field-2); border-radius: 3px; box-shadow: inset 4px 0 0 var(--tile); }
.sys-keep-item--understood { --tile: var(--understood); } .sys-keep-item--chosen { --tile: var(--chosen); }
.sys-keep-item a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); font-weight: 800; }
.sys-keep-item span { color: var(--bone-soft); font-size: .88rem; margin-top: -6px; }
.sys-keep-label { margin-top: 18px; }

/* Section head (2026-10-12), shared: at desktop the heading sits left and its lede right, so a long
   lede keeps a readable line and the row stays full instead of hugging the left. Used on the homepage
   moat and "What I do" sections; reuse it rather than writing a page-specific head. */
@media (min-width: 1000px) {
  .sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 5vw, 96px); align-items: end; margin-bottom: calc(var(--u, 8px) * 4); }
  .sec-head h2 { margin-bottom: 0; }
  .sec-head > p { max-width: none; margin: 0; }
}
/* Headings break long words instead of spilling on the smallest phones. */
@media (max-width: 359px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }
/* Heatmap figure (partials/heatmap.njk): the capture beside what it showed. */
.heatmap { display: grid; gap: 16px 32px; margin: 32px 0; align-items: start; }
@media (min-width: 900px) { .heatmap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.heatmap-img { max-height: 640px; overflow: hidden; border: 2px solid var(--field-line); border-radius: var(--radius, 4px); background: #0e1014; }
.heatmap-img img { display: block; width: 100%; height: auto; }
.heatmap-open-label { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; background: var(--field); color: var(--bone); font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.heatmap figcaption p { margin: 0 0 10px; }
.heatmap-k { font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
.heatmap-h { font-size: 1.25rem; font-weight: 850; line-height: 1.25; }
.heatmap-n strong { color: var(--number-ink); font-variant-numeric: tabular-nums; }
.field .heatmap-n strong { color: var(--number); }
.heatmap-f { line-height: 1.6; }
.heatmap-note { font-size: .88rem; line-height: 1.5; }
.heatmap-src { font-size: .8rem; color: var(--ink-soft); }
.field .heatmap-k, .field .heatmap-src { color: var(--bone-soft); }

/* LinkedIn crossover (2026-10-12): the whole card is the link to the post; following is its own link. */
.li-wrap { margin: 28px 0; max-width: var(--measure); }
.li-card { display: grid; gap: 6px; padding: 16px 18px; background: #fff; color: #1b1e26; border: 2px solid #1b1e26; border-radius: 6px; box-shadow: 6px 6px 0 #0a66c2; text-decoration: none; }
.li-card-meta { display: flex; align-items: center; gap: 8px; color: #47505f; font-size: .85rem; font-weight: 700; }
.li-card-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; background: #0a66c2; color: #fff; border-radius: 3px; font: 800 .8rem/1 var(--face); }
.li-card-topic { font-size: 1.1rem; font-weight: 850; line-height: 1.25; }
.li-card-line { font-size: 1.02rem; line-height: 1.5; color: #1b1e26; }
.li-card-why { color: #47505f; font-size: .92rem; line-height: 1.5; }
.li-card-cta { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; color: #0a66c2; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
@media (hover: hover) { .li-card:hover { background: #f3f8fd; } }
.li-card:focus-visible { outline: 3px solid #0a66c2; outline-offset: 3px; }
.li-follow { margin: 10px 0 0; font-size: .95rem; }
.li-follow a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: inherit; }
.li-strip { margin: 28px 0 0; }
.li-strip-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; }
.li-strip-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 12px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.li-strip-list li { scroll-snap-align: start; }
.li-strip-list a { display: grid; align-content: start; gap: 4px; height: 100%; padding: 12px 14px; background: #fff; color: #1b1e26; border: 2px solid #1b1e26; border-radius: 6px; text-decoration: none; }
.li-strip-list time { color: #47505f; font-size: .8rem; font-weight: 700; }
.li-strip-list strong { font-size: .98rem; line-height: 1.3; }
.li-strip-list span { color: #47505f; font-size: .88rem; line-height: 1.45; }
@media (hover: hover) { .li-strip-list a:hover { background: #f3f8fd; } }
/* The LinkedIn card and strip are always white paper, whatever ground they sit on. */
body .li-wrap .li-card .li-card-topic, body .li-wrap .li-card .li-card-line, body .li-strip .li-strip-list strong { color: #1b1e26; }
body .li-wrap .li-card .li-card-meta, body .li-wrap .li-card .li-card-why, body .li-strip .li-strip-list time, body .li-strip .li-strip-list span { color: #47505f; }
body .li-wrap .li-card .li-card-cta { color: #0a66c2; }
/* Progress report (partials/progress-report.njk). Engines are neutral, not outcome colors; up and down are words and signs. */
.rp { margin: 0; }
.rp-take { max-width: 62ch; font-size: 1.1rem; line-height: 1.55; }
.rp-take strong { color: var(--number-ink); font-variant-numeric: tabular-nums; }
.field .rp-take strong { color: var(--number); }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.rp-tile { display: grid; gap: 4px; padding: 14px 16px; background: var(--sheet, #fff); color: #1b1e26; border: 1px solid var(--paper-line, #d0d6de); border-top: 4px solid var(--step); border-radius: 4px; }
.rp-tile--up { border-top-color: var(--number); }
.rp-k { font-size: .85rem; font-weight: 800; color: #47505f; }
.rp-tile strong { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.05; color: #1b1e26; }
.rp-n { font-size: .88rem; color: #47505f; }
.rp-chart { margin: 8px 0 0; }
.rp-chart ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 8px; height: 200px; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid currentColor; }
.rp-chart li { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; }
.rp-total { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-bar { display: flex; flex-direction: column-reverse; justify-content: flex-start; align-self: end; height: 100%; }
.rp-bar i { display: block; width: 100%; }
.rp-g { background: var(--step); } .rp-b { background: #6b7282; }
.field .rp-g { background: #c9ced6; } .field .rp-b { background: #6b7282; }
.rp-m { padding-top: 4px; font-size: .8rem; font-weight: 700; }
.rp-chart figcaption { margin-top: 10px; font-size: .82rem; line-height: 1.5; }
.rp-key { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font-weight: 800; }
.rp-key::before { content: ""; width: 12px; height: 12px; }
.rp-key--g::before { background: var(--step); } .rp-key--b::before { background: #6b7282; }
.rp-table-wrap { margin-top: 22px; overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.rp-table caption { text-align: left; font-weight: 800; padding-bottom: 8px; }
.rp-table th, .rp-table td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--paper-line, #d0d6de); white-space: nowrap; }
.rp-table thead th { font-size: .8rem; color: var(--ink-soft); }
.rp-table td:last-child { white-space: normal; min-width: 12em; }
.rp-table a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.rp-note { margin-top: 10px; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .rp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rp-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--paper-line, #d0d6de); }
  .rp-table th, .rp-table td { padding: 0; border: 0; white-space: normal; min-width: 0; }
  .rp-table th[scope="row"] { grid-column: 1 / -1; }
  .rp-table td::before { content: attr(data-l) ": "; color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
  .rp-table td:last-child { grid-column: 1 / -1; min-width: 0; }
}

/* The menu is the playfield (2026-10-12, Hayden: "triple down on the block game theme for our menu").
   Every section is a piece in its own color, the panels and the phone sheet sit on the game's grid, the
   featured item is the NEXT box, and the footer is the HUD with the live high score. Pieces move when
   the menu opens; words never do. */
.nav-piece { display: inline-grid; grid-template-columns: repeat(4, 5px); grid-template-rows: repeat(2, 5px); gap: 1px; flex: none; }
.nav-piece i { background: var(--pc, var(--piece-t)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
.nav-piece--t { --pc: var(--piece-t); } .nav-piece--l { --pc: var(--piece-l); } .nav-piece--j { --pc: var(--piece-j); }
.nav-piece--s { --pc: var(--piece-s); } .nav-piece--z { --pc: var(--piece-z); } .nav-piece--o { --pc: var(--piece-o); } .nav-piece--i { --pc: var(--piece-i); }
.nav-piece--t i:nth-child(1) { grid-area: 1 / 1; } .nav-piece--t i:nth-child(2) { grid-area: 1 / 2; } .nav-piece--t i:nth-child(3) { grid-area: 1 / 3; } .nav-piece--t i:nth-child(4) { grid-area: 2 / 2; }
.nav-piece--l i:nth-child(1) { grid-area: 1 / 3; } .nav-piece--l i:nth-child(2) { grid-area: 2 / 1; } .nav-piece--l i:nth-child(3) { grid-area: 2 / 2; } .nav-piece--l i:nth-child(4) { grid-area: 2 / 3; }
.nav-piece--j i:nth-child(1) { grid-area: 1 / 1; } .nav-piece--j i:nth-child(2) { grid-area: 2 / 1; } .nav-piece--j i:nth-child(3) { grid-area: 2 / 2; } .nav-piece--j i:nth-child(4) { grid-area: 2 / 3; }
.nav-piece--s i:nth-child(1) { grid-area: 1 / 2; } .nav-piece--s i:nth-child(2) { grid-area: 1 / 3; } .nav-piece--s i:nth-child(3) { grid-area: 2 / 1; } .nav-piece--s i:nth-child(4) { grid-area: 2 / 2; }
.nav-piece--o i:nth-child(1) { grid-area: 1 / 1; } .nav-piece--o i:nth-child(2) { grid-area: 1 / 2; } .nav-piece--o i:nth-child(3) { grid-area: 2 / 1; } .nav-piece--o i:nth-child(4) { grid-area: 2 / 2; }
.nav-link .nav-piece, .nav-toggle .nav-piece { margin-right: 2px; }

/* The menu button is a T piece that turns a quarter when the menu opens. */
.nav-menu-piece { display: none; }
@media (max-width: 899px) {
  .js .nav-menu::before { content: none; }
  .js .nav-menu-piece { display: grid; grid-template-columns: repeat(3, 7px); grid-template-rows: repeat(2, 7px); gap: 2px; position: absolute; inset: 0; margin: auto; width: 25px; height: 16px; }
  .js .nav-menu-piece i { background: var(--number); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
  .js .nav-menu-piece i:nth-child(1) { grid-area: 1 / 1; } .js .nav-menu-piece i:nth-child(2) { grid-area: 1 / 2; background: var(--bone); } .js .nav-menu-piece i:nth-child(3) { grid-area: 1 / 3; } .js .nav-menu-piece i:nth-child(4) { grid-area: 2 / 2; }
  .js .nav-menu[aria-expanded="true"] .nav-menu-piece { transform: rotate(90deg); }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) { .js .nav-menu-piece { transition: transform var(--m-step, 120ms) steps(2, end); } }

/* The playfield: the panels and the phone sheet sit on the game's grid. */
.js .nav-item.is-open > .nav-panel, .js .site-nav.is-sheet .nav-list {
  background-color: var(--field-2);
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.js .site-nav.is-sheet .nav-list { background-color: var(--field); }
.nav-col a { border-left: 4px solid transparent; }
.nav-col a.is-here { border-left-color: var(--number); }
.js .site-nav.is-sheet .nav-item > .nav-link { gap: 10px; padding-block: 6px; border-bottom: 2px solid #2a2e38; }
.js .site-nav.is-sheet .nav-item > .nav-link .nav-piece { grid-template-columns: repeat(4, 7px); grid-template-rows: repeat(2, 7px); }

/* Pieces drop into place, one after another, when a panel or the sheet opens. */
@media (prefers-reduced-motion: no-preference) {
  .js .nav-item.is-open .nav-col .nav-sprite, .js .site-nav.is-sheet .nav-piece, .js .site-nav.is-sheet .nav-sprite { animation: lock-drop var(--m-lock, 240ms) steps(4, end) both; }
  .js .site-nav.is-sheet .nav-item:nth-child(3) .nav-piece { animation-delay: 60ms; } .js .site-nav.is-sheet .nav-item:nth-child(4) .nav-piece { animation-delay: 120ms; }
  .js .site-nav.is-sheet .nav-item:nth-child(5) .nav-piece { animation-delay: 180ms; } .js .site-nav.is-sheet .nav-item:nth-child(6) .nav-piece { animation-delay: 240ms; }
  .js .nav-item.is-open .nav-col li:nth-child(2) .nav-sprite { animation-delay: 60ms; } .js .nav-item.is-open .nav-col li:nth-child(3) .nav-sprite { animation-delay: 120ms; }
  .js .nav-item.is-open .nav-col li:nth-child(4) .nav-sprite { animation-delay: 180ms; } .js .nav-item.is-open .nav-col li:nth-child(5) .nav-sprite { animation-delay: 240ms; }
  .js .nav-item.is-open .nav-col li:nth-child(6) .nav-sprite { animation-delay: 300ms; }
}

/* NEXT: the featured item is the game's preview box. */
.nav-feature { position: relative; }
.nav-next { margin: 0 0 6px; font: 400 .85rem/1 "DotGothic16", ui-monospace, monospace; letter-spacing: .08em; color: var(--bone-soft); }
/* HUD: the live high score, linking to the board. */
.nav-hud { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--bone-soft); font-size: .9rem; text-decoration: none; }
.nav-hud-k { padding: 3px 7px; background: var(--piece-o); color: #0e1014; font: 400 .78rem/1.2 "DotGothic16", ui-monospace, monospace; border-radius: 2px; }
.nav-hud strong { color: var(--number); }
@media (hover: hover) { .nav-hud:hover { color: var(--bone); } }
.nav-piece--i i:nth-child(1) { grid-area: 1 / 1; } .nav-piece--i i:nth-child(2) { grid-area: 1 / 2; } .nav-piece--i i:nth-child(3) { grid-area: 1 / 3; } .nav-piece--i i:nth-child(4) { grid-area: 1 / 4; }
.nav-piece--z i:nth-child(1) { grid-area: 1 / 1; } .nav-piece--z i:nth-child(2) { grid-area: 1 / 2; } .nav-piece--z i:nth-child(3) { grid-area: 2 / 2; } .nav-piece--z i:nth-child(4) { grid-area: 2 / 3; }
.nav-start a .nav-piece { justify-self: end; margin-bottom: -4px; grid-template-columns: repeat(4, 6px); grid-template-rows: repeat(2, 6px); }
@media (max-width: 899px) { .js .site-nav.is-sheet .nav-item > .nav-link { display: flex; width: 100%; } }
/* On a phone, reveal one section at a time. All the same links remain in the HTML, and the
   section hub is the first link inside its disclosure. */
@media (max-width: 899px) {
  .js .site-nav.is-sheet .nav-top { gap: 0; }
  .js .site-nav.is-sheet .nav-item { border-top: 1px solid var(--field-line); }
  .js .site-nav.is-sheet .nav-item--panel > .nav-link { display: none; }
  .js .site-nav.is-sheet .nav-item > .nav-toggle { display: flex; width: 100%; min-height: 54px; padding: 0 6px; color: var(--bone); font-size: 1.08rem; font-weight: 800; }
  .js .site-nav.is-sheet .nav-item > .nav-toggle::after { content: "+"; margin-left: auto; color: var(--number); font-size: 1.45rem; line-height: 1; }
  .js .site-nav.is-sheet .nav-item.is-open > .nav-toggle::after { content: "-"; }
  .js .site-nav.is-sheet .nav-panel { display: none; margin: 0 0 12px; }
  .js .site-nav.is-sheet .nav-item.is-open > .nav-panel { display: block; }
  .js .site-nav.is-sheet .nav-hub-row { min-height: 48px; }
}

/* Phone card stacks (2026-10-12). First these grids ran 1,300 to 3,600px tall (Hayden: widget heights "WAY too big"),
   then they became sideways rails, and he hates the sideways scroll ("i hate the scroll on linked in and some other
   elements"). Now: one column, compact cards, nothing hidden off to the side. */
@media (max-width: 640px) {
  .moat-grid, .cap-grid, .sys-row, .hs-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; }
  :is(.moat-grid, .cap-grid, .sys-row, .hs-grid) > li > :is(a, div, article) { padding: 14px 16px !important; min-height: 0 !important; }
  .sys-row li:last-child { grid-column: auto !important; }
}
/* The full-time job page's per-client work list folds behind one disclosure. */
.ent-more { margin-top: 18px; }
.ent-more > summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; background: var(--sheet, #fff); border: 2px solid var(--ink, #15171c); border-radius: 6px; font-weight: 800; cursor: pointer; }
.ent-more[open] > summary { margin-bottom: 12px; }
.af-goal { max-width: min(100%, calc(480px + 14vw)); line-height: 1.55; } .af .rp-chart ol { height: 160px; }

/* Bella runs the header (Hayden, 2026-10-12: "make bella part of the menu as well, like running across the
   screen, in a way that doesn't mess up user experience and flow"). Once per page, the first time a menu
   opens, she dashes along the header's bottom edge; menu.js steps her four running frames. Nothing for
   reduced motion, nothing to click, gone in under two seconds. */
.nav-runner { position: absolute; left: 0; bottom: -6px; z-index: 2; width: 58px; height: 36px; pointer-events: none; visibility: hidden; }
.nav-runner .nr-f { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; }
.nav-runner[data-f="0"] .nr-f:nth-child(1), .nav-runner[data-f="1"] .nr-f:nth-child(2),
.nav-runner[data-f="2"] .nr-f:nth-child(3), .nav-runner[data-f="3"] .nr-f:nth-child(4) { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .nav-runner.is-running { visibility: visible; animation: nr-dash 5.5s linear 1 both; } /* slower again (Hayden, 2026-10-12: "bella is still running too fast") */
  @keyframes nr-dash { from { transform: translateX(-60px); } to { transform: translateX(calc(100vw + 60px)); } }
}
@media (max-width: 899px) { .nav-runner { display: none; } }

/* LinkedIn, calmer (Hayden, 2026-10-12: "i hate the scroll on linked in", and the follow line "can be designed way
   better"): the post card and its follow line form one white card with a thin LinkedIn-blue top edge instead of a
   hard offset shadow; the strip is a grid of the newest three, no sideways scroll; the follow line is a footer row. */
body .li-wrap { max-width: var(--measure); background: #fff; border: 1px solid #d5d9e0; border-top: 4px solid #0a66c2; border-radius: 8px; overflow: hidden; }
body .li-wrap .li-card { border: 0; border-radius: 0; box-shadow: none; padding: 18px 20px 14px; }
body .li-wrap .li-card .li-card-cta { min-height: 44px; }
body :is(.li-wrap, .li-strip) .li-follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 6px 20px; background: #f3f6f9; border-top: 1px solid #e3e7ec; color: #47505f; font-size: .9rem; }
body :is(.li-wrap, .li-strip) .li-follow a { color: #0a66c2; text-decoration: underline; text-underline-offset: .2em; }
body .li-strip .li-follow { margin-top: 12px; border: 1px solid #e3e7ec; border-radius: 6px; }
body .li-strip-list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); overflow: visible; scroll-snap-type: none; padding: 0; }
body .li-strip-list a { border: 1px solid #d5d9e0; border-top: 3px solid #0a66c2; border-radius: 6px; }

/* The full-time job's color (Hayden, 2026-10-12: "make the optimal section orange and green mixed together", a nod
   to Optimal joining OneMagnify). One band, used only where the full-time job is the subject: the homepage section,
   the current role on the resume and the full-time job page's hero. */
:root { --ft-orange: #ef7d2d; --ft-green: #4fae6a; --ft-band: linear-gradient(90deg, var(--ft-orange), var(--ft-green)); }
.h-do { position: relative; }
.h-do::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--ft-band); }
.h-do .h-kicker { color: #b4531a; }
.cv-role--now { border-top: 0 !important; position: relative; overflow: hidden; }
.cv-role--now::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--ft-band); }
.ent-hero { position: relative; }
.ent-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: var(--ft-band); }
@media print { .h-do::before, .cv-role--now::before, .ent-hero::after { display: none; } }
/* Phone footer (Hayden, 2026-10-12: "simplify the footer for mobile"): it ran about 1,800px. Work and The system sit
   side by side, the sites list runs in two columns, and links keep 44px tap rows with less air between them. */
@media (max-width: 640px) {
  .site-footer .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .site-footer .footer-grid > :not(.footer-col) { grid-column: 1 / -1; }
  .site-footer .footer-sites { grid-column: 1 / -1; }
  .site-footer .footer-sites ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .site-footer .footer-col h2 { margin-bottom: 4px; }
  .site-footer .footer-col li a { min-height: 44px; display: flex; align-items: center; font-size: .92rem; }
  .site-footer .footer-col li { margin: 0; }
}
/* Jumps to a section land below the sticky header (Hayden, 2026-10-12: "the 'in this post' might not go to the right
   sections"; measured: headings landed 53px under the header at 390 and 67px at 1440). */
:is(h2, h3, h4, section, article, li, div)[id] { scroll-margin-top: 92px; }
@media (min-width: 900px) { :is(h2, h3, h4, section, article, li, div)[id] { scroll-margin-top: 106px; } }
/* The tagline, given presence (Hayden, 2026-10-12: "my catch phrase ... should be better represented in key areas of the
   site, like the menu and footer"), with the three outcomes in their colors. */
.motto-o { font-weight: 800; }
.motto-o--found { color: var(--found, #6aa9d8); }
.motto-o--understood { color: var(--understood, #8fb04a); }
.motto-o--chosen { color: var(--chosen, #e0563b); }
.nav-motto { color: var(--bone) !important; font-size: 1rem !important; line-height: 1.45; }
.nav-sheet-motto { display: none; }
.js .site-nav.is-sheet .nav-sheet-motto { display: block; margin: 0 0 16px; color: var(--bone); font: 700 1.1rem/1.4 var(--face); }
.site-footer .footer-motto { color: var(--bone) !important; font-size: 1.1rem; line-height: 1.45; }