/*
  andrewbrooks.fyi: the Field Manual.
  Familjen Grotesk for text, Martian Mono for labels. Instrument grey, ink black.
  Red is reserved for warnings and the human step. Nothing else.
  Spacing scale (4px base): 4 8 12 16 24 32 48 64 96.
  Dark mode is its own panel, not an inversion: warm charcoal sheets, bone ink, a brighter red.
*/
:root {
  --bg: #dddcd7; --sheet: #e7e6e1; --paper: #f2f1ec; --paper-2: #f2f1ec;
  --ink: #0d0d0d; --ink-2: #45443f; --hair: #a9a79f; --hair-2: #c4c2bb;
  --red: #e1251b; --red-ink: #b3140c; --red-wash: rgba(225, 37, 27, .10); --on-red: #0d0d0d;
  --past: rgba(13, 13, 13, .06);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a19; --sheet: #222220; --paper: #2a2a27; --paper-2: #2a2a27;
    --ink: #e4e3de; --ink-2: #a9a8a2; --hair: #55544d; --hair-2: #3a3935;
    --red: #ff5747; --red-ink: #ff6d5e; --red-wash: rgba(255, 87, 71, .14); --on-red: #0d0d0d;
    --past: rgba(228, 227, 222, .06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1a19; --sheet: #222220; --paper: #2a2a27; --paper-2: #2a2a27;
  --ink: #e4e3de; --ink-2: #a9a8a2; --hair: #55544d; --hair-2: #3a3935;
  --red: #ff5747; --red-ink: #ff6d5e; --red-wash: rgba(255, 87, 71, .14); --on-red: #0d0d0d;
  --past: rgba(228, 227, 222, .06);
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  font-feature-settings: "kern" 1, "liga" 1; font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
@media (min-width: 960px) { body { font-size: 18px; } }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--ink); color: var(--bg); text-decoration: none;
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 12px 16px;
}
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lbl {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.4; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ===== Masthead and footer ===== */
.mast {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s5); padding: var(--s4) 0 var(--s3); border-bottom: 1px solid var(--ink);
}
.mast .lbl { color: var(--ink); }
.mast a { text-decoration: none; }
.mast a:hover { text-decoration: underline; }
.mast .mid { display: none; }
@media (min-width: 720px) { .mast .mid { display: inline; } }
.mast ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); }
.mast nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.theme {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 2px 6px 1px; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  min-width: 4.4em;
}
.theme:hover { background: var(--paper); }
@media (max-width: 380px) { .mast ul { gap: var(--s2) var(--s4); } }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--s3) var(--s5); border-top: 3px solid var(--ink); padding: var(--s3) 0 var(--s7);
}
.foot .lbl { color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot ul a { text-transform: none; letter-spacing: .03em; }
.foot ul li + li a { text-transform: uppercase; letter-spacing: .09em; }

/* ===== Cover sheet ===== */
.cover {
  position: relative; margin: var(--s6) 0 var(--s8);
  padding: var(--s5) var(--s4) var(--s7); border: 1.5px solid var(--ink); background: var(--sheet);
}
@media (min-width: 720px) { .cover { padding: var(--s6) var(--s7) var(--s7); margin-top: var(--s7); } }
.cover::before, .cover::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.cover::before { top: -9px; left: -9px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.cover::after { bottom: -9px; right: -9px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.cover-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
.cover-top .lbl { color: var(--ink); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.folio { position: absolute; right: var(--s4); bottom: var(--s3); }
@media (min-width: 720px) { .folio { right: var(--s7); bottom: var(--s4); } }

.ident { margin: var(--s7) 0 0; display: grid; gap: var(--s6); }
@media (min-width: 960px) { .ident { grid-template-columns: minmax(0, 1fr) 22rem; align-items: end; } }
.ident .lbl { display: block; margin-bottom: var(--s2); }
h1 { margin: 0; font-weight: 600; letter-spacing: -.045em; text-indent: -.04em; }
.h1-name { font-size: clamp(58px, 15.5vw, 176px); line-height: .84; letter-spacing: -.05em; }
/* Size the name by its own column (it sits beside the nameplate from 960px), so "Andrew" never breaks mid-word. Never larger than the 15.5vw rule. */
.ident > div:first-child { container-type: inline-size; min-width: 0; }
@supports (font-size: 1cqi) { .h1-name { font-size: clamp(48px, min(15.5vw, 30cqi), 176px); } }
.h1-page { font-size: clamp(42px, 10vw, 120px); line-height: .9; text-wrap: balance; }
.h1-long { font-size: clamp(38px, 8.4vw, 100px); line-height: .92; text-wrap: balance; }
.model { margin: var(--s4) 0 0; font-size: clamp(21px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -.015em; }
.model .lbl { margin-bottom: var(--s1); }
.title-block { margin: var(--s7) 0 0; }
.title-block > .lbl { display: block; margin-bottom: var(--s2); }

/* Nameplate, riveted */
.plate { position: relative; border: 1.5px solid var(--ink); background: var(--paper); padding: var(--s4) var(--s4) var(--s3); }
.plate::before, .plate::after { content: ""; position: absolute; top: 8px; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink); }
.plate::before { left: 8px; }
.plate::after { right: 8px; }
.plate dl { margin: var(--s2) 0 0; }
.plate dl div { display: flex; gap: var(--s2); align-items: baseline; padding: 4px 0; border-bottom: 1px dotted var(--hair); font-size: 14.5px; }
.plate dl div:last-child { border-bottom: 0; }
.plate dt { flex: none; width: 5rem; margin: 0; }
.plate dd { margin: 0; min-width: 0; }
.plate .ph { text-align: center; display: block; color: var(--ink); margin: 0; }

.desc, .opening { margin: var(--s7) 0 0; display: grid; gap: var(--s4); }
.opening { margin-top: var(--s6); }
@media (min-width: 960px) { .desc, .opening { grid-template-columns: 11rem minmax(0, 46rem); column-gap: var(--s6); } }
.desc > .lbl, .opening > .lbl { margin: 0; padding-top: 6px; }
.statement { margin: 0; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.27; letter-spacing: -.012em; font-weight: 500; max-width: 30em; }
.principle { margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--ink); display: grid; gap: var(--s1); max-width: 36em; }
.principle p { margin: 0; font-size: 18px; font-style: italic; }

.facts { margin: var(--s6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); border-top: 1px solid var(--ink); padding-top: var(--s3); }
.facts div { display: grid; gap: 2px; }
.facts dt { margin: 0; }
.facts dd { margin: 0; font-size: 16px; font-weight: 500; }

.contents { margin: var(--s6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); max-width: 46rem; }
.contents a { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--hair); text-decoration: none; }
.contents a:hover .t { text-decoration: underline; }
.contents .n { flex: none; width: 7.5rem; }
.contents .t { flex: 0 1 auto; font-weight: 500; }
.contents .dots { flex: 1 1 auto; min-width: 12px; border-bottom: 1px dotted var(--ink-2); transform: translateY(-4px); }
.contents .p { flex: none; }
@media (max-width: 480px) { .contents .n { width: 5.5rem; } .contents .dots, .contents .p { display: none; } }

/* ===== Sections ===== */
.sec { margin: 0 0 var(--s9); scroll-margin-top: var(--s4); }
.sec-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--s3);
  border-top: 3px solid var(--ink); padding-top: var(--s2); margin-bottom: var(--s6);
}
.sec-head .lbl { color: var(--ink); }
.sec-head h2 { margin: 0; font-weight: 600; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; line-height: 1.1; }
.row { display: grid; gap: var(--s3); margin-bottom: var(--s7); }
.row:last-child { margin-bottom: 0; }
.row > .m { padding-top: 4px; }
@media (min-width: 960px) {
  .row { grid-template-columns: 11rem minmax(0, 40rem) minmax(0, 1fr); column-gap: var(--s6); }
  .row.wide > .main { grid-column: 2 / 4; }
  .row > .m { position: sticky; top: var(--s5); align-self: start; }
}
.m .lbl { display: block; }
.m .lbl + .lbl { margin-top: var(--s1); }
.m .ref { color: var(--ink); }
.main > :first-child { margin-top: 0; }
.main p { margin: 0 0 var(--s4); max-width: 36em; }
.main > :last-child { margin-bottom: 0; }
.main h3 { margin: 0 0 var(--s5); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -.028em; font-weight: 600; max-width: 18em; text-wrap: balance; }
.lead { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.35; letter-spacing: -.008em; font-weight: 500; }
.side { font-size: 14px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: var(--s3); }
@media (min-width: 960px) { .side { margin-top: 0; } }
.side p { margin: 0 0 var(--s3); }
.side > .lbl:first-child { display: block; color: var(--ink); }

/* Capabilities */
.cap-item { padding-bottom: var(--s7); border-bottom: 1px solid var(--hair); }
.cap-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cap-item h3 { margin: 0 0 var(--s4); font-size: clamp(28px, 4vw, 44px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
.cap-item h3 a { text-decoration: none; }
.cap-item h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cap-item .side { border-top: 0; padding-top: 0; margin-top: var(--s5); }
@media (min-width: 960px) { .cap-item .side { margin-top: 0; } }
/* Instruments need room: under the text until the third column is at least 17.5rem wide. */
.cap-item .side-flow { max-width: 26rem; }
@media (min-width: 960px) and (max-width: 1279px) { .cap-item .side-flow { grid-column: 2; margin-top: var(--s5); } }
@media (min-width: 1280px) { .cap-item { grid-template-columns: 11rem minmax(0, 40rem) minmax(17.5rem, 1fr); } }
/* The crew room is the one big instrument: always under the engine text, wider. */
.cap-item .side-under { max-width: 30rem; }
@media (min-width: 960px) { .cap-item .side-under { grid-column: 2; margin-top: var(--s5); } }
.cap-item .side > .lbl:first-child { border-bottom: 1px solid var(--ink); padding-bottom: var(--s2); margin-bottom: var(--s2); }
.cap-big h3 { font-size: clamp(32px, 5.4vw, 60px); }

.go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); text-decoration: none; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.go:hover { background: var(--ink); color: var(--bg); }
.go.quiet { border-color: var(--hair); color: var(--ink); }
.go.quiet:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.go span[aria-hidden] { font-family: var(--sans); font-size: 15px; }

.procs { list-style: none; margin: 0; padding: 0; }
.procs a { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: var(--s2); align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); font-size: 15px; }
.procs a:hover .t { text-decoration: underline; }
.procs .ar { font-size: 14px; color: var(--ink-2); }
.procs .first a { font-weight: 600; }

/* Warning: red is for this and the human step */
.warn {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start;
  border-top: 2px solid var(--red); border-bottom: 1px solid var(--red);
  padding: var(--s3) 0; margin: 0 0 var(--s5); max-width: 36em;
}
.warn.stack { grid-template-columns: 1fr; gap: var(--s2); }
.warn.stack .warn-tag { justify-self: start; }
.warn-tag {
  display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: var(--on-red);
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px 5px; margin-top: 2px;
}
.warn-tag svg { width: 11px; height: 11px; display: block; }
.warn p { margin: 0 !important; font-weight: 500; color: var(--ink); }
.warn p + p { margin-top: var(--s2) !important; }
.warn.big p { font-size: clamp(18px, 2vw, 21px); line-height: 1.35; }
.side .warn p { font-size: 15px; }

/* Spec tables and measures */
.spec { margin: 0; border-top: 1px solid var(--ink); }
.spec div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.spec dt { margin: 0; }
.spec dd { margin: 0; color: var(--ink); font: 500 15px/1.3 var(--mono); letter-spacing: -.01em; text-align: right; }
.spec.small div { grid-template-columns: 6.5rem 1fr; padding: 6px 0; border-bottom-style: dotted; }
.spec.small { border-top: 0; }
.spec.small dd { font: 400 15px/1.45 var(--sans); text-align: left; letter-spacing: 0; }
.spec.small dt { padding-top: 3px; }
.spec-big dd { font-size: clamp(16px, 2vw, 20px); }
.spec-note { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400; }
.measure { margin: var(--s4) 0 0; display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: center; }
.measure .a, .measure .b { font: 500 13px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.measure .rule { position: relative; height: 9px; border-left: 1px solid var(--ink); }
.measure .rule::before { content: ""; position: absolute; left: 0; right: 2px; top: 4px; border-top: 1px solid var(--ink); }
.measure .rule::after { content: ""; position: absolute; right: 0; top: 0; border: 4.5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }

/* Operating principles */
.think { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: n; }
.think li { counter-increment: n; }
.think a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--hair); text-decoration: none; }
.think a::before { content: "3." counter(n); font: 500 10.5px/1 var(--mono); letter-spacing: .09em; color: var(--ink-2); }
.think .h { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.22; letter-spacing: -.015em; font-weight: 500; }
.think a:hover .h { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.think .r { white-space: nowrap; }
@media (max-width: 600px) { .think a { grid-template-columns: 2.6rem minmax(0, 1fr); } .think .r { grid-column: 2; } }

/* Records: label column plus value */
.record { margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.record > div { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 600px) { .record > div { grid-template-columns: 9rem 1fr; gap: var(--s4); } }
.record dt { padding-top: 4px; margin: 0; }
.record dd { margin: 0; }
.record dt.lbl { padding-top: 5px; }
.record.cred > div { grid-template-columns: 1fr; }
@media (min-width: 720px) { .record.cred > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.record.cred dt { font-weight: 600; padding-top: 0; }
.record.cred dd { color: var(--ink-2); font-size: 16px; }

/* Contact block */
.service { display: grid; gap: var(--s5); }
.service .big { font-size: clamp(26px, 6.4vw, 56px); line-height: 1; letter-spacing: -.03em; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 6px; word-break: break-word; }
.service .lbl { display: block; margin-bottom: var(--s2); }
.copy-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.copy {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin: 0;
  border: 1.5px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--bg); cursor: pointer;
  font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.copy:hover { background: var(--ink-2); border-color: var(--ink-2); }
.copy[data-state="copied"] { background: transparent; color: var(--ink); }
.copy-status { min-height: 1.4em; }

/* Prose pages (privacy, Donna) */
.prose p, .prose li { max-width: 38em; }
.prose ul { margin: 0 0 var(--s4); padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.prose ul li { padding: var(--s2) 0 var(--s2) var(--s5); border-bottom: 1px dotted var(--hair); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 1.05em; width: 8px; height: 1px; background: var(--ink); }
.clause { margin: 0 0 var(--s5); padding-top: var(--s3); border-top: 1px solid var(--hair); }
.clause:first-child { border-top: 1px solid var(--ink); }
.clause h3 { margin: 0 0 var(--s2) !important; font-size: 19px !important; letter-spacing: -.01em !important; line-height: 1.25 !important; display: flex; gap: var(--s3); align-items: baseline; }
.clause h3 .lbl { flex: none; width: 2.6rem; }
.clause p { margin: 0 !important; }
@media (min-width: 720px) { .clause p { padding-left: calc(2.6rem + var(--s3)); } }
.verbatim { border-left: 2px solid var(--ink); padding-left: var(--s3); }
@media (min-width: 720px) { .clause p.verbatim { margin-left: calc(2.6rem + var(--s3)) !important; padding-left: var(--s3); } }
.links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.links a { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--hair); text-decoration: none; }
.links a:hover .t { text-decoration: underline; }
.links .t { font-weight: 500; overflow-wrap: anywhere; }

/* ===== Pixel crew: service history ===== */
.crew-list { list-style: none; margin: 0; padding: 0; }
.crew-fig { display: flex; align-items: flex-end; }
.crew-fig svg { display: block; max-width: 100%; height: auto; image-rendering: pixelated; shape-rendering: crispEdges; }
.crew-slot {
  display: grid; place-items: center; width: 48px; height: 48px; border: 1px dashed var(--ink-2); background: var(--paper);
  padding: 2px; overflow: hidden; text-align: center;
}
.crew-slot span { font: 500 6.5px/1.15 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.crew-cap { display: grid; gap: 1px; min-width: 0; }
.crew-n { color: var(--ink); }
.crew-title { font-weight: 600; font-size: 15px; line-height: 1.22; letter-spacing: -.005em; }
.crew-years { color: var(--ink); }
.crew-emp { font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }

/* Small strip (home): a row of figures standing on one rule, oldest to newest */
.crew-small { border-top: 1px solid var(--ink); }
.crew-small .crew-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s3); align-items: end; padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.crew-small .crew-fig { border-bottom: 1.5px solid var(--ink); justify-content: center; min-height: 52px; }
@media (min-width: 880px) {
  .crew-small { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 0; }
  .crew-small .crew-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: var(--s3); align-items: start; padding: 0 var(--s3) 0 0; border-bottom: 0; }
  .crew-small .crew-fig { justify-content: flex-start; min-height: 80px; margin-right: calc(-1 * var(--s3)); padding-left: 0; }
  .crew-small .crew-cap { padding-right: var(--s2); }
  .crew-small .crew-title { font-size: 14.5px; }
}
.crew-more { margin-top: var(--s5); }

/* Large (about): grouped by employer, with highlights */
.crew-group { margin: 0 0 var(--s7); border-top: 1px solid var(--ink); padding-top: var(--s3); }
.crew-group:last-child { margin-bottom: 0; }
.crew-group-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: baseline; margin-bottom: var(--s5); }
.crew-group-h h3 { margin: 0 !important; font-size: clamp(24px, 3vw, 32px) !important; }
.crew-group-h .lbl { color: var(--ink); }
.crew-group-h p { grid-column: 1 / -1; margin: 0 !important; color: var(--ink-2); font-size: 15.5px; }
.crew-large { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .crew-large { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.crew-large .crew-item { display: grid; grid-template-rows: auto 1fr; gap: var(--s3); align-content: start; }
.crew-large .crew-fig { min-height: 104px; border-bottom: 1.5px solid var(--ink); padding: var(--s2) 0 0; justify-content: center; background: var(--sheet); }
.crew-large .crew-slot { width: 96px; height: 96px; border-bottom: 0; }
.crew-large .crew-slot span { font-size: 8.5px; }
.crew-hl { margin-top: var(--s5); }
.crew-hl > .lbl { display: block; color: var(--ink); padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); }
.crew-hl ul { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.crew-hl li { counter-increment: h; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--hair); font-size: 16px; max-width: 46em; }
.crew-hl li::before { content: counter(h, lower-alpha) "."; font: 500 10.5px/2 var(--mono); letter-spacing: .09em; color: var(--ink); }

/* Skills */
.skills { display: grid; gap: var(--s5); }
@media (min-width: 720px) { .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skills h3 { margin: 0 0 var(--s2) !important; font-size: 19px !important; letter-spacing: -.01em !important; display: flex; gap: var(--s2); align-items: baseline; padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); }
.skills ul { list-style: none; margin: 0; padding: 0; }
.skills li { padding: 6px 0; border-bottom: 1px dotted var(--hair); font-size: 15.5px; }

.note { display: inline-flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; border-top: 1px solid var(--ink); padding-top: var(--s2); margin: var(--s5) 0 0 !important; font-size: 15px; }
.note .lbl { color: var(--ink); }

/* 404 */
.err { font-family: var(--mono); font-weight: 300; font-size: clamp(88px, 26vw, 240px); line-height: .85; letter-spacing: -.07em; margin: var(--s5) 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* Instrument 3.1: the migration line (home, capability 3.1; behavior in /assets/flow.js) */
.flow { border: 1px solid var(--ink); padding: 14px 14px 16px; }
.flow-top { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.flow-modes { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0 8px; border: 1px solid var(--ink); }
.flow-mode { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 9px 6px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.flow-mode + .flow-mode { border-left: 1px solid var(--ink); }
.flow-mode[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.flow-mode:focus-visible, .flow-run:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.flow-svg { display: block; width: 100%; height: auto; margin: 4px 0 6px; }
.flow-svg .fx-lbl { font: 500 7px/1 var(--mono); letter-spacing: .08em; fill: color-mix(in srgb, var(--ink) 70%, transparent); }
.flow-svg .fx-tag { font-size: 9px; font-weight: 600; fill: var(--ink); }
.flow-svg .fx-red-t { fill: var(--red); }
.flow-svg .fx-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.flow-svg .fx-ink { fill: var(--ink); }
.flow-svg .fx-dim { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.flow-svg .fx-ghost { fill: none; stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-dasharray: 3 3; }
.flow-svg .fx-red { fill: var(--red); }
.flow-svg .fx-cloud { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.flow-svg .fx-box { fill: var(--ink); }
.flow-svg .fx-bad { fill: var(--red); }
.flow-svg .fx-fixed { fill: var(--ink); stroke: var(--red); stroke-width: 1; }
.flow-read { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--ink); }
.flow-read div { padding: 8px 0 6px; }
.flow-read div + div { padding-left: 10px; border-left: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.flow-read dd { margin: 4px 0 0; font: 600 22px/1 var(--mono); font-variant-numeric: tabular-nums; }
.flow-read .flow-load { font-size: 15px; line-height: 22px; }
.flow[data-mode="after"] .flow-bin { color: var(--red); }
.flow-key { list-style: none; margin: 6px 0 12px; padding: 0; border-top: 1px solid var(--ink); }
.flow-key li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); font-size: 13.5px; line-height: 1.4; }
.flow-key b { font: 600 12px/1.6 var(--mono); }
.flow-key strong { font-weight: 700; }
.flow .fk-after { display: none; }
.flow[data-mode="after"] .fk-before { display: none; }
.flow[data-mode="after"] .fk-after { display: inline; }
.flow-run { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; width: 100%; }
.flow-run:hover { background: var(--ink); color: var(--bg); }
.flow-run:disabled { opacity: .5; cursor: default; }
.flow-note { font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 68%, transparent); margin: 10px 0 0; }
.flow-svg .fx-dim2 { fill: color-mix(in srgb, var(--ink) 55%, transparent); }
.flow-svg .fx-node { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.flow-svg .fx-small { font-size: 5.5px; letter-spacing: .04em; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font: 500 11px/1.4 var(--mono); color: color-mix(in srgb, var(--ink) 75%, transparent); }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { width: 8px; height: 8px; display: inline-block; }
.flow-legend .lg-ok { background: var(--ink); }
.flow-legend .lg-bad { background: var(--red); }
.flow-legend .lg-fixed { background: var(--ink); box-shadow: 0 0 0 1.5px var(--red); }
.flow-run { margin-top: 12px; }

/* ===== Instruments 3.2 to 3.6 (home, capability side panels; behavior in /assets/w-*.js) =====
   One frame for all five, the same language as the migration line: bordered, mono readouts, an honest note. */
.inst { border: 1px solid var(--ink); padding: 14px 14px 16px; color: var(--ink); }
.inst-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.inst-top .lbl { color: var(--ink); }
.inst-top .inst-tag { color: var(--ink-2); }
.inst-svg { display: block; width: 100%; height: auto; margin: 10px 0 6px; overflow: visible; }
.inst-svg text { font: 500 8px/1 var(--mono); letter-spacing: .06em; fill: color-mix(in srgb, var(--ink) 72%, transparent); }
.inst-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 12px 0 4px; border: 1px solid var(--ink); }
.inst-seg button { font: 500 10.5px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 9px 4px; min-height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.inst-seg button + button { border-left: 1px solid var(--ink); }
.inst-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.inst-seg button:hover:not([aria-pressed="true"]) { background: var(--past); }
.inst button:focus-visible, .inst [tabindex]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.inst-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.inst-read.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inst-read div { padding: 8px 0 6px; min-width: 0; }
.inst-read div + div { padding-left: 10px; border-left: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.inst-read dd { margin: 4px 0 0; font: 600 20px/1.1 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.inst-read dd small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.inst-btn { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; min-height: 44px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; width: 100%; margin-top: 12px; }
.inst-btn:hover:not(:disabled), .inst-btn.is-hot { background: var(--ink); color: var(--bg); }
.inst-btn:disabled { opacity: .5; cursor: default; }
.inst-note { font-size: 12.5px !important; line-height: 1.45; color: color-mix(in srgb, var(--ink) 68%, transparent); margin: 10px 0 0 !important; }
.inst-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px !important; font: 500 11px/1.4 var(--mono); color: color-mix(in srgb, var(--ink) 75%, transparent); }
.inst-legend span { display: inline-flex; align-items: center; gap: 6px; }
.inst-legend i { width: 9px; height: 9px; display: inline-block; }

/* 3.2 The crew at work */
.cr-stage { position: relative; margin: 10px 0 6px; }
.cr-stage .inst-svg { margin: 0; }
.cr-svg text { font: 500 2.6px/1 var(--mono); letter-spacing: .04em; fill: color-mix(in srgb, var(--ink) 55%, transparent); }
.cr-svg .cr-name { font-weight: 700; fill: var(--ink); }
.cr-svg .cr-st.on { fill: var(--ink); }
.cr-svg .cr-human { fill: var(--red); }
.cr-svg .cr-st.cr-human.on { fill: var(--red); }
.cr-svg .cr-glyph { font-size: 5px; font-weight: 700; fill: var(--ink); }
.cr-svg .cr-k { fill: var(--ink); }
.cr-svg .cr-g { fill: var(--ink-2); }
.cr-svg .cr-w { fill: var(--paper-2); }
.cr-svg .cr-r { fill: var(--red); }
.cr-svg .cr-wire { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.cr-svg .cr-sel { fill: none; stroke: var(--red); stroke-width: .6; }
.cr-hit { position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.cr-hit:focus-visible { outline: 2px solid var(--red); outline-offset: 0; }
.cr-log { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--ink); min-height: 5.6em; }
.cr-log li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 6px; font-size: 13.5px; line-height: 1.4; color: var(--ink); padding: 2px 0; }
.cr-log li + li { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.cr-log .lbl { padding-top: 2px; }
.cr-card { margin-top: 8px; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent); min-height: 3em; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.cr-card p { margin: 0 0 4px !important; }
.cr-card p:last-child { margin-bottom: 0 !important; }
.cr-card .cr-hint { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.cr-who { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.cr-limit .lbl { color: var(--ink); margin-right: 6px; }

/* 3.3 The door */
.door-svg .ds-tag { font-weight: 600; fill: var(--ink); }
.door-svg .ds-red { fill: var(--red); }
.door-svg .ds-ink { fill: var(--ink); }
.door-svg .ds-dim { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.door-svg .ds-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.door-svg .ds-ghost { fill: none; stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-dasharray: 3 3; }
.door-svg .ds-red-f { fill: var(--red); }
.door-svg .ds-card { fill: var(--ink); }
.door-svg .ds-ext { fill: var(--bg); stroke: var(--red); stroke-width: 1.5; }
.door-svg .ds-stamp-t { font-size: 7px; font-weight: 600; fill: var(--bg); }
.door .inst-read dd { font-size: 12px; line-height: 1.25; overflow-wrap: normal; letter-spacing: -.02em; }
.door.is-ext .door-core { color: var(--red); }

/* 3.4 Risk gauge */
.gauge-svg .gs-arc { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.gauge-svg .gs-band { fill: none; stroke: var(--red); stroke-width: 5; }
.gauge-svg .gs-tick { stroke: var(--ink); stroke-width: 1.5; }
.gauge-svg .gs-tick.gs-red { stroke: var(--red); }
.gauge-svg .gs-red-t { fill: var(--red); font-weight: 600; }
.gauge-svg .gs-on { fill: var(--ink); font-weight: 600; }
.gauge-svg .gs-num { font-size: 7px; }
.gauge-svg .gs-ink { fill: var(--ink); }
.gauge-svg .gs-hub { fill: var(--bg); }
.g-sws { list-style: none; margin: 4px 0 12px; padding: 0; border-top: 1px solid var(--ink); }
.g-sw { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; width: 100%; min-height: 44px; padding: 7px 0; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); background: transparent; color: var(--ink); font: 400 13.5px/1.35 var(--sans); text-align: left; cursor: pointer; }
.g-sw:hover span { text-decoration: underline; }
.g-lamp { width: 26px; height: 14px; border: 1.5px solid var(--ink); position: relative; display: block; }
.g-lamp::after { content: ""; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; background: color-mix(in srgb, var(--ink) 35%, transparent); transition: left .18s var(--ease), background .18s; }
.g-sw[aria-pressed="true"] .g-lamp { background: var(--ink); }
.g-sw[aria-pressed="true"] .g-lamp::after { left: 14px; background: var(--bg); }
.gauge .g-read { font-size: 13px; line-height: 1.3; }
.gauge.is-renewed .g-read { font-weight: 700; }

/* 3.5 The link */
.link-svg .ls-tag { font-weight: 600; fill: var(--ink); }
.link-svg .ls-ink { fill: var(--ink); }
.link-svg .ls-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.link-svg .ls-gap { fill: transparent; }
.link-svg .ls-ray { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; transition: opacity .25s; }
.link-svg .ls-ray.ls-off { opacity: 0; }
.link-svg .ls-rec { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.link-svg .ls-rec.ls-src { stroke-width: 3; }
.link-svg .ls-rec.ls-miss { fill: var(--red-wash); stroke: var(--red); }
.link-svg .ls-cat { fill: var(--ink); }
.link-svg .ls-cat.ls-none { fill: transparent; }
.link-svg .ls-cat.ls-patch { stroke: var(--red); stroke-width: 1.5; }
.inst-legend .lg-rec { border: 1.5px solid var(--ink); }
.inst-legend .lg-cat { background: var(--ink); width: 7px; height: 7px; }
.inst-legend .lg-miss { background: var(--red-wash); border: 1.5px solid var(--red); }
.lk-tiers { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--ink); }
.lk-tiers li { display: grid; grid-template-columns: 12px 3.6rem 1fr; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); font-size: 13.5px; line-height: 1.35; color: color-mix(in srgb, var(--ink) 55%, transparent); transition: color .2s; }
.lk-tiers li.on { color: var(--ink); }
.lk-tiers .lbl { color: inherit; }
.lk-lamp { width: 10px; height: 10px; border: 1.5px solid currentColor; display: block; align-self: center; }
.lk-tiers li.on .lk-lamp { background: var(--ink); border-color: var(--ink); }
.link.has-miss .lk-miss { color: var(--red); }

/* Home: the line between the day job and the work on my own time */
.cap-group { border-top: 3px solid var(--ink); padding-top: var(--s4); margin-bottom: var(--s6); }
.cap-group .main p { font-size: clamp(18px, 2vw, 21px); line-height: 1.4; font-weight: 500; max-width: 34em; }

/* Resume (/resume/): readable on screen, clean on paper */
.rs-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; }
.rs-role { margin: 10px 0 0; font-size: clamp(17px, 2vw, 20px); font-weight: 600; }
.rs-sum { margin: 0; max-width: 46em; font-size: 17px; line-height: 1.5; }
.rs-print { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; min-height: 36px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.rs-print:hover { background: var(--ink); color: var(--bg); }
.rs .m .lbl { display: block; }
.rs-what { margin: 0 0 var(--s4) !important; font-style: italic; color: var(--ink-2); }
.rs h3 { margin: var(--s5) 0 2px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.rs .main > h3:first-of-type, .rs .rs-what + h3 { margin-top: 0; }
.rs h3 span { font-weight: 400; color: var(--ink-2); }
.rs-when { margin: 0 0 var(--s2) !important; }
.rs-list { margin: 0; padding-left: 1.1em; max-width: 46em; }
.rs-list li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.45; }
.rs-co { padding-bottom: var(--s5); border-bottom: 1px solid var(--hair); }
@media print {
  :root { --bg: #fff; --ink: #000; --ink-2: #333; --hair: #bbb; }
  body { background: #fff !important; color: #000; font-size: 10.5pt; }
  .mast, .foot, .rs-noprint, .folio, .skip { display: none !important; }
  .cover { margin: 0 !important; padding: 0 0 8pt !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .cover::before, .cover::after { display: none !important; }
  .cover-top, .title-block > .lbl, .opening > .lbl, .sec-head > .lbl[aria-hidden] { display: none !important; }
  .h1-page { font-size: 26pt !important; line-height: 1 !important; margin: 0 !important; }
  .rs-contact { margin-top: 4pt !important; font-size: 8.5pt !important; }
  .rs-role { font-size: 11pt !important; margin-top: 4pt !important; }
  .opening { margin-top: 6pt !important; padding: 0 !important; display: block !important; border: 0 !important; }
  .rs-sum { font-size: 10pt !important; line-height: 1.4 !important; }
  .sec-head { margin-bottom: 6pt !important; padding-top: 2pt !important; border-top-width: 1.5pt !important; }
  .sec-head h2 { font-size: 13pt !important; }
  .rs-co { padding-bottom: 4pt !important; }
  .rs-what { margin-bottom: 4pt !important; font-size: 9.5pt; }
  .record > div { padding: 3pt 0 !important; font-size: 9.5pt; }
  @page { margin: 14mm 14mm; }
  .sec { margin: 0 !important; padding: 8pt 0 0 !important; }
  .row { display: grid !important; grid-template-columns: 9rem minmax(0, 1fr) !important; column-gap: 14pt !important; margin-bottom: 8pt !important; }
  .row > .m { position: static !important; }
  .rs-list li { font-size: 10pt; margin-bottom: 3pt; }
  .rs h3 { font-size: 11pt; margin-top: 8pt; }
  a { color: #000; text-decoration: none; }
  .rs-co { break-inside: auto; }
  .rs h3, .rs-when { break-after: avoid; }
}