/* Njenga Kariuki: the site's one stylesheet (v2, D-042). One system: paper, ink, one warm gray; each work owns one color,
   used only where the reader touches it. Nine type sizes. One easing curve; 140 / 240 / 420 ms, and 640 ms for lines
   that draw. Everything on the page is shown, measured or dated. One light theme on purpose: the site's own skin. */
@font-face { font-family: "Chivo"; src: url("../fonts/chivo-300-600.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url("../fonts/chivo-mono-400-500.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo Fallback"; font-weight: 100 449; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.0%; ascent-override: 87.8%; descent-override: 23.4%; line-gap-override: 0%; }
@font-face { font-family: "Chivo Fallback"; font-weight: 450 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  size-adjust: 100.4%; ascent-override: 93.6%; descent-override: 24.9%; line-gap-override: 0%; }

/* One system. Paper, ink, one warm gray; each work owns one color, used only where the reader touches it.
   Nine type sizes. One easing curve; 140 / 240 / 420 ms, and 640 ms for lines that draw.
   Everything on the page is shown, measured or dated. One light theme on purpose: the site's own skin. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #0b0b0a;
  --ink-2: #46453f;
  --gray: #6b6a64;
  --line: #b4b2ab;
  --rule: #e5e3dd;
  --wash: #f4f3ef;
  --wash-2: #ebe9e3;
  --font: "Chivo", "Chivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f11: 12px; --f13: 13px; --f15: 15px; --f17: 17px; --f19: 19px; --f22: 22px; --f30: 30px;
  --f48: clamp(32px, 2.4vw + 14px, 48px);
  --f56: clamp(36px, 3vw + 13px, 56px);
  --out: cubic-bezier(.16, 1, .3, 1);
  --t1: 140ms; --t2: 240ms; --t3: 420ms; --t4: 640ms;
  --head: 56px;
  --r: 14px;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --c: var(--ink);
}
@media (min-width: 600px) { :root { --gut: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px)); } }
@media (min-width: 1000px) { :root { --gut: max(56px, env(safe-area-inset-left, 0px)); --gut-r: max(56px, env(safe-area-inset-right, 0px)); } }
@media (min-width: 1360px) { :root { --gut: max(80px, env(safe-area-inset-left, 0px)); --gut-r: max(80px, env(safe-area-inset-right, 0px)); } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-padding-top: calc(var(--head) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--f17); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums; -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--paper); }
.nw { white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lbl { font-family: var(--mono); font-size: var(--f11); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); font-weight: 400; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.skip { position: fixed; left: var(--gut); top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 90; padding: 10px 14px; background: var(--paper);
  border-radius: 8px; box-shadow: 0 0 0 1px var(--rule); transform: translateY(-160%); transition: transform var(--t2) var(--out); font-size: var(--f15); }
.skip:focus-visible { transform: none; }
.arr { flex: none; }

/* ---------------------------------------------------------------- header */
.hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); }
/* the bar's edge fades in once the page moves under it; in the bar, only the running line travels (D-053) */
.hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0;
  transition: opacity var(--t1) linear; }
.hd.edge::after { opacity: 1; }
.hd-in { display: flex; align-items: center; gap: 16px; height: var(--head); }
.hd-name { font-weight: 500; font-size: var(--f15); white-space: nowrap; opacity: 0; transform: translateY(6px);
  transition: opacity var(--t2) linear, transform var(--t3) var(--out); pointer-events: none; }
.hd.named .hd-name { opacity: 1; transform: none; pointer-events: auto; }
.crumb { display: none; align-items: center; gap: 8px; font-size: var(--f15); min-width: 0; }
.crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--gray); min-height: 44px; transition: color var(--t1) linear; }
.crumb a:hover { color: var(--ink); }
.crumb a svg { width: 14px; height: 14px; transition: transform var(--t2) var(--out); }
.crumb a:hover svg { transform: translateX(-3px); }
.crumb .sep { color: var(--line); }
.crumb b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-chapter .hd-name { display: none; }
.p-chapter .crumb { display: inline-flex; }
.p-chapter .hd-nav a[data-nav="work"] { display: none; }
/* the links set apart (v2.5, D-053): the warm gray, 32 px apart; the ink arrives with the running line; hover inks the word;
   pressing draws a lighter 2 px line under it, so it never reads as the place mark */
.hd-nav { position: relative; margin-left: auto; display: flex; gap: 32px; }
.hd-nav a, .hd-ct a { position: relative; display: inline-flex; align-items: center; height: 32px; font-size: var(--f15); letter-spacing: .003em; color: var(--gray); transition: color var(--t3) var(--out); }
.hd-nav a::before, .hd-ct a::before { content: ""; position: absolute; inset: -6px -14px; }
.hd-nav a::after, .hd-ct a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 1px; background: var(--ink); opacity: .45; transform: scaleX(0); }
@media (hover: hover) and (pointer: fine) { .hd-nav a:hover, .hd-ct a:hover { color: var(--ink); } }
.hd-nav a:active, .hd-ct a:active { color: var(--ink); transition: none; }
.hd-nav a:active::after, .hd-ct a:active::after { transform: scaleX(1); }
.hd-nav a.on, .hd-nav a[aria-current="page"] { color: var(--ink); }
.hd-nav a:focus-visible, .hd-ct a:focus-visible { outline-offset: 5px; border-radius: 3px; }
/* the running line: one ink line holds the reader's place, under the section on the home page and under About on About (site.js) */
.hd-line { position: absolute; left: 0; bottom: 6px; width: var(--w, 0px); height: 1.5px; border-radius: 2px; background: var(--ink); pointer-events: none;
  transform: translateX(var(--x, 0px)); clip-path: inset(0 100% 0 0); transition: transform var(--t3) var(--out), width var(--t3) var(--out), clip-path var(--t3) var(--out); }
.hd-line.on { clip-path: inset(0); }
.hd-line.jump { transition: none; }
/* LinkedIn, the one link that leaves the site, set apart by a rule at the nav's own spacing */
.hd-ct { position: relative; display: flex; margin-left: 16px; padding-left: 32px; }
.hd-ct::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--line); opacity: .6; }
.hd-ct a { gap: 5px; }
.hd-ct a::after { right: 16px; }
.hd-ct a .g { width: 11px; height: 11px; color: var(--gray); transition: color var(--t1) linear, transform var(--t2) var(--out); }
@media (hover: hover) and (pointer: fine) { .hd-ct a:hover .g { color: var(--ink); transform: translate(2px, -2px); } }
@media (max-width: 1359px) { .hd-nav { gap: 28px; } .hd-ct { margin-left: 12px; padding-left: 28px; } }
.hd-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--c); opacity: 0; transition: opacity var(--t2) linear; z-index: 1; }
.p-chapter .hd-progress { opacity: 1; }
@media (max-width: 760px) {
  .hd-ct { display: none; }
  .hd-nav { gap: 22px; }
  .hd-nav a::before { inset: -6px -11px; }
  .p-chapter .hd-nav { display: none; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding-top: clamp(20px, 2.6vw, 48px); }
.byline { font-size: var(--f17); font-weight: 500; }
.headline { margin-top: clamp(12px, 1.2vw, 18px); font-size: var(--f48); line-height: 1.05; letter-spacing: -0.028em; font-weight: 400; max-width: 22em; }
.lead { margin-top: clamp(14px, 1.3vw, 20px); max-width: 42em; font-size: var(--f19); line-height: 1.5; color: var(--ink-2); }
.lead a, .inl { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: text-decoration-color var(--t1) linear; cursor: pointer; }
.lead a:hover, .inl:hover { text-decoration-color: var(--ink); }
@media (max-width: 599px) { .lead { font-size: 15.5px; line-height: 1.48; } }
.lead a:focus-visible { outline: none; background: var(--wash-2); text-decoration-color: var(--ink); text-decoration-thickness: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- section heads */
.sec { padding-top: clamp(56px, 6vw, 112px); }
#work.sec { padding-top: clamp(36px, 3.4vw, 56px); }
/* the phone's first view: the first plate rises into it (P1, P9) */
@media (max-width: 599px) { .hero { padding-top: 12px; } #work.sec { padding-top: 26px; } #work .sec-head { margin-bottom: 16px; } }
.sec-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: clamp(18px, 1.8vw, 28px); }
.sec-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; transition: transform var(--t4) var(--out); }
.armed .sec-head::after { transform: scaleX(0); }
.sec-head h2 { font-size: var(--f22); letter-spacing: -0.012em; line-height: 1.2; }
.sec-head .meta { font-size: var(--f13); color: var(--gray); }

/* ---------------------------------------------------------------- work plates */
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 2.8vw, 48px) clamp(16px, 1.7vw, 28px); }
.pl { min-width: 0; }
.pl-a { display: block; border-radius: var(--r); }
.plate { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--field, #efeee9); isolation: isolate; }
.plate .v { position: absolute; inset: 0; opacity: 0; }
.plate .v.on { opacity: 1; }
.plate .v img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.0001); transition: transform var(--t4) var(--out); }
.plate .v.fit img { object-fit: contain; padding: var(--pad, 9%); }
.plate .v.fit.shadow img { filter: drop-shadow(0 14px 24px rgba(20,18,12,.22)); }
.pl-a:hover .plate .v img { transform: scale(1.02); }
.plate .skim { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--t2) linear; z-index: 2; }
.plate .skim i { flex: 1; height: 3px; border-radius: 2px; background: rgba(11,11,10,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.plate .skim i.on { background: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pl-a:hover .skim, .pl-a:focus-visible .skim { opacity: 1; } }
.pl-t { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; margin-top: 14px; align-items: baseline; }
.pl-n { font-size: var(--f17); font-weight: 500; letter-spacing: -0.008em; display: inline-flex; align-items: baseline; gap: 6px; }
.pl-n .arr { width: 13px; height: 13px; align-self: center; opacity: 0; transform: translateX(-4px); transition: opacity var(--t2) linear, transform var(--t2) var(--out); }
.pl-a:hover .pl-n .arr, .pl-a:focus-visible .pl-n .arr { opacity: 1; transform: none; color: var(--c2, var(--ink)); }
.pl-y { font-size: var(--f13); color: var(--gray); }
.pl-l { grid-column: 1 / -1; margin-top: 4px; font-size: var(--f15); line-height: 1.45; color: var(--ink-2); max-width: 34em; }
.pl-p { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--gray); display: flex; gap: 8px; align-items: baseline; }
.pl-p::before { content: none; }
.pl-a:active .plate { transform: scale(.98); background: #e6e5df; transition: transform 80ms var(--out), background 80ms linear; }
.pl-a:focus-visible { outline-offset: 6px; border-radius: 18px; }
.work-count { display: none; }
@media (max-width: 999px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .plates { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut-r)); padding-left: var(--gut); padding-right: var(--gut-r); scroll-padding-left: var(--gut);
    scrollbar-width: none; padding-bottom: 6px; }
  .plates::-webkit-scrollbar { display: none; }
  .pl { flex: 0 0 calc(100vw - 72px); scroll-snap-align: start; }
  .plates { scroll-padding-left: 36px; }
  .work-count { display: inline; font-size: var(--f13); color: var(--gray); }
  .work-count b { font-weight: 400; color: var(--ink); }
  #work .sec-head .meta { display: none; }
  .plates { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent); }
}
.pl { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--head) + 24px); }

/* ---------------------------------------------------------------- career: one instrument (the figures, the readout, the chart) */
.tl { position: relative; --lab: 340px; }
.tl-read { position: relative; height: 128px; margin-bottom: 14px; }
.rd { position: absolute; inset: 0; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: start; opacity: 0; visibility: hidden;
  transition: opacity var(--t1) linear, visibility 0s linear var(--t1); }
.rd.on { opacity: 1; visibility: visible; transition: opacity var(--t1) linear, visibility 0s; }
.rd-l { padding-right: 28px; min-width: 0; }
.rd-l .lbl { display: block; }
.rd-l .hint { margin-top: 8px; font-size: var(--f13); line-height: 1.45; color: var(--gray); max-width: 22em; }
.rd-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.fig { display: grid; align-content: start; gap: 8px; padding: 10px 12px; margin: -10px -12px; border-radius: 12px; transition: background var(--t1) linear; min-width: 0; }
.fig:hover, .fig.on { background: var(--wash); }
.fig .n { font-size: var(--f30); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; display: flex; align-items: center; gap: 8px; }
.fig .n .arr { width: 13px; height: 13px; opacity: 0; transform: translate(-3px, 3px); transition: opacity var(--t2) linear, transform var(--t2) var(--out); }
.fig:hover .n .arr, .fig:focus-visible .n .arr, .fig.on .n .arr { opacity: 1; transform: none; }
.fig .l { font-size: var(--f13); line-height: 1.38; color: var(--gray); }
.rd-row .rd-l .y { font-family: var(--mono); font-size: var(--f13); color: var(--gray); display: flex; align-items: center; gap: 8px; }
.rd-row .rd-l .y::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c2, var(--ink)); }
.rd-row .rd-l .nm { margin-top: 6px; font-size: var(--f22); line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; }
.rd-row .rd-l .ti { display: block; margin-top: 4px; font-size: var(--f13); line-height: 1.35; color: var(--gray); }
.rd-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; min-width: 0; }
.rd-row .rd-l a.nm { display: inline-flex; align-items: center; gap: 8px; }
.rd-row .rd-l a.nm .arr { width: 14px; height: 14px; transition: transform var(--t2) var(--out); }
.rd-row .rd-l a.nm:hover .arr { transform: translateX(3px); }
.rd-r .lbl { display: block; margin-bottom: 6px; }
.rd-r p { font-size: var(--f15); line-height: 1.5; color: var(--ink-2); }
.rd-r .res p { color: var(--ink); }
.rd-go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f15); font-weight: 500; padding: 8px 12px; margin-top: -8px; border-radius: 8px; white-space: nowrap; transition: background var(--t1) linear; }
.rd-go:hover { background: var(--wash); }
.rd-go svg { width: 12px; height: 12px; }

.tl-axis { display: grid; grid-template-columns: var(--lab) 1fr; height: 26px; position: relative; border-top: 1px solid var(--rule); }
.tl-ticks { position: relative; }
.tl-ticks span { position: absolute; top: 7px; transform: translateX(-50%); font-family: var(--mono); font-size: var(--f11); color: var(--gray); }
.tl-body { position: relative; }
.tl-grid { position: absolute; top: 0; bottom: 0; left: var(--lab); right: 0; pointer-events: none; }
.tl-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); opacity: .6; }
.tl-row { display: grid; grid-template-columns: var(--lab) 1fr; min-height: 58px; align-items: center; position: relative; }
.tl-lab { display: block; padding: 8px 16px 8px 0; min-width: 0; border-radius: 8px; transition: opacity var(--t2) linear; }
.tl-lab > b { display: block; font-weight: 500; font-size: var(--f15); line-height: 1.3; }
.tl-lab > span { display: block; font-size: var(--f13); line-height: 1.35; color: var(--gray); }
.tl-track { position: relative; height: 58px; }
.tl-bar { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--ink); transform-origin: left center;
  transition: background var(--t2) linear, opacity var(--t2) linear; }
.tl-row.now .tl-bar { background: linear-gradient(90deg, var(--ink) 60%, rgba(11,11,10,.08)); }
.tl-ev { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink);
  transition: background var(--t2) linear, box-shadow var(--t2) linear, opacity var(--t2) linear; }
.tl-note { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: var(--f11); color: var(--ink-2); white-space: nowrap; transition: opacity var(--t2) linear; }
.tl.active .tl-row:not(.on) .tl-lab, .tl.active .tl-row:not(.on) .tl-note { opacity: .35; }
.tl.active .tl-row:not(.on) .tl-bar, .tl.active .tl-row:not(.on) .tl-ev { opacity: .35; }
.tl-row.on .tl-bar { background: var(--c2, var(--ink)); }
.tl-row.on .tl-ev { background: var(--c2, var(--ink)); box-shadow: inset 0 0 0 2px var(--c2, var(--ink)); }
.tl-row.on .tl-note { color: var(--ink); }
.tl-rec .tl-track { height: 44px; }
.tl-rec .tl-lab > b { font-weight: 400; color: var(--ink-2); }
.tl-tick { position: absolute; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 1px; background: var(--ink); transition: background var(--t2) linear, opacity var(--t2) linear; }
.tl-tick.paper { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
.tl-tick.on { background: var(--c2, var(--ink)); }
.tl.active .tl-rec:not(.on) .tl-tick:not(.on) { opacity: .35; }
.tl-scrub { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); pointer-events: none; opacity: 0; transition: opacity var(--t1) linear; z-index: 3; }
.tl-scrub span { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: var(--f11); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.tl.scrubbing .tl-scrub { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .tl.armed .tl-bar { transform: scaleX(0); }
  .js .tl.armed .tl-ev, .js .tl.armed .tl-note, .js .tl.armed .tl-tick { opacity: 0; }
  .tl.drawn .tl-bar { animation: grow 300ms var(--out) both; animation-delay: calc(var(--i) * 40ms); }
  .tl.drawn .tl-ev, .tl.drawn .tl-tick { animation: fade var(--t2) linear both; animation-delay: calc(var(--i) * 40ms + 200ms); }
  .tl.drawn .tl-note { animation: fade var(--t2) linear both; animation-delay: calc(var(--i) * 40ms + 260ms); }
}
@keyframes grow { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }

/* the phone: the figures as a grid, then the same career as a rail; the year rides the top */
.tlp { display: none; position: relative; }
.tlp-axis { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--head)); z-index: 3; height: 30px; background: var(--paper); border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.tlp-axis span { position: absolute; top: 9px; font-family: var(--mono); font-size: var(--f11); color: var(--gray); }
.tlp-axis span:not(:first-child) { transform: translateX(-50%); }
.tlp-axis i { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--line); }
.tlp li { position: relative; padding: 16px 0 18px; border-bottom: 1px solid var(--rule); transition: opacity var(--t2) linear; }
.tlp.active li:not(.lit) { opacity: .4; }
.tlp a.rl { display: block; min-height: 44px; }
.tlp b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--f17); line-height: 1.3; }
.tlp b .arr { width: 12px; height: 12px; opacity: .5; }
.tlp .t { display: block; font-size: var(--f13); color: var(--gray); line-height: 1.35; }
.tlp .mt { position: relative; height: 18px; margin-top: 4px; }
.tlp .mt .bar { position: absolute; top: 6px; height: 6px; border-radius: 3px; background: var(--ink); transition: background var(--t2) linear; }
.tlp .mt .mev { position: absolute; top: 3.5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); transition: background var(--t2) linear, box-shadow var(--t2) linear; }
.tlp li.on .mt .bar, .tlp li.lit .mt .bar { background: var(--c2, var(--ink)); }
.tlp li.on .mt .mev, .tlp li.lit .mt .mev { background: var(--c2, var(--ink)); box-shadow: inset 0 0 0 2px var(--c2, var(--ink)); }
.tlp .note { margin-top: 8px; font-family: var(--mono); font-size: var(--f13); color: var(--ink); }
.tlp .ran { margin-top: 6px; font-size: var(--f15); line-height: 1.45; color: var(--ink-2); }
.tlp .rec { margin-top: 14px; font-size: var(--f15); color: var(--ink-2); }
@media (max-width: 899px) { .tl { display: none; } .tlp { display: block; } }

/* ---------------------------------------------------------------- how I lead */
.prin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: clamp(24px, 3vw, 56px); }
.pr { min-width: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.pr-fig { position: relative; height: 168px; border-radius: 12px; background: var(--wash); padding: 18px 18px 14px; margin-top: 18px; overflow: hidden; }
.pr-fig svg { width: 100%; height: 100%; overflow: visible; }
.pr h3 { font-size: var(--f19); line-height: 1.3; letter-spacing: -0.01em; }
.pr p { margin-top: 10px; font-size: var(--f15); line-height: 1.55; color: var(--ink-2); align-self: start; }
.pr .proof { margin-top: 14px; color: var(--ink); align-self: start; }
.pr .proof a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: text-decoration-color var(--t1) linear; }
.pr .proof a:hover { text-decoration-color: var(--ink); }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(28px, 3vw, 44px); font-weight: 500; font-size: var(--f15); min-height: 44px; }
.more svg { width: 13px; height: 13px; transition: transform var(--t2) var(--out); }
.more:hover svg { transform: translateX(3px); }
.fig-t { font-family: var(--font); font-size: 11.5px; fill: var(--gray); }
.fig-v { font-family: var(--font); font-size: 13px; fill: var(--ink); }
.fig-n { font-family: var(--mono); font-size: 14px; fill: var(--ink); }
.fig-n.was { fill: var(--gray); }
.fig-a { font-family: var(--mono); font-size: 11.5px; fill: var(--gray); }
@media (max-width: 899px) { .prin { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 48px; } .pr { grid-row: auto; grid-template-rows: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .js .armed .dot-m { transform: translateX(var(--from, 0)); }
  .dot-m { transition: transform var(--t4) var(--out); transition-delay: var(--dd, 0ms); }
  .js .armed .slope-l { stroke-dashoffset: var(--len); }
  .slope-l { transition: stroke-dashoffset var(--t4) var(--out) 120ms; }
  .js .armed .bar-g { transform: scaleY(0); }
  .bar-g { transform-origin: bottom; transform-box: fill-box; transition: transform var(--t4) var(--out); transition-delay: var(--dd, 0ms); }
}


/* ---------------------------------------------------------------- chapter */
.ch-head { padding-top: clamp(24px, 2.6vw, 44px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px clamp(24px, 4vw, 80px); align-items: end; }
.ch-meta { grid-column: 1 / -1; font-size: var(--f13); color: var(--gray); display: flex; gap: 10px; align-items: center; }
.ch-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ch-h1 { font-size: var(--f56); line-height: 1.02; letter-spacing: -0.032em; font-weight: 400; }
.ch-what { font-size: var(--f19); line-height: 1.45; color: var(--ink-2); max-width: 30em; padding-bottom: .3em; }
.ch-hero { margin-top: clamp(20px, 2.2vw, 36px); }
.ch-plate { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #1a1916; }
.ch-plate video, .ch-plate img { width: 100%; height: 100%; object-fit: cover; }
.ch-plate .film { position: absolute; inset: 0; opacity: 0; }
.ch-plate .film.on { opacity: 1; }
.ch-plate .pp { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background var(--t1) linear, transform var(--t1) var(--out); }
.ch-plate .pp:hover { background: rgba(11,11,10,.85); }
.ch-plate .pp:active { transform: scale(.94); }
.ch-plate .pp:focus-visible { outline-color: #fff; }
.ch-plate .pp svg { width: 14px; height: 14px; }
.facts { margin-top: clamp(24px, 2.4vw, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; border-top: 1px solid var(--ink); padding-top: 14px; }
.facts dd { margin-top: 6px; font-size: var(--f15); line-height: 1.5; color: var(--ink); max-width: 24em; }
.blk { margin-top: clamp(64px, 7vw, 120px); }
.blk-h { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-bottom: clamp(20px, 2vw, 32px); }
.blk-h h2 { font-size: var(--f22); letter-spacing: -0.012em; line-height: 1.2; }
.dec ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: d; }
.dec li { min-width: 0; counter-increment: d; }
.dec li::before { content: "0" counter(d); display: block; font-family: var(--mono); font-size: var(--f11); letter-spacing: .06em; color: var(--gray); margin-bottom: 10px; }
.dec h3 { font-size: var(--f17); line-height: 1.35; }
.dec p { margin-top: 8px; font-size: var(--f15); line-height: 1.55; color: var(--ink-2); }
.scale7 { margin-top: 14px; width: 100%; max-width: 340px; height: auto; }

.story { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); }
.steps { padding-bottom: 12vh; }
.step { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 96px; opacity: .75; transition: opacity var(--t2) linear; }
.step:first-child { padding-top: 24px; min-height: 92vh; }
.step.on { opacity: 1; }
.step .k { font-family: var(--mono); font-size: var(--f11); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); transition: color var(--t2) linear; }
.step.on .k { color: var(--c); }
.step h3 { margin-top: 10px; font-size: var(--f30); letter-spacing: -0.02em; line-height: 1.15; font-weight: 400; }
.step p { margin-top: 12px; font-size: var(--f17); line-height: 1.6; color: var(--ink-2); }
.ev { margin-top: 22px; }
.ev img { border-radius: 10px; background: var(--wash); width: 100%; height: auto; }
.ev.tall img { width: auto; max-height: 340px; box-shadow: 0 0 0 1px var(--rule); }
.ev figcaption { margin-top: 8px; font-size: var(--f13); line-height: 1.45; color: var(--gray); }
.stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--head) + 6vh); height: min(580px, 70vh); align-self: start; border-radius: 18px; background: var(--wash); overflow: hidden; display: flex; flex-direction: column; padding: 12px 12px 0; }
.stage svg { width: 100%; flex: 1; min-height: 0; }
.stage .cap { flex: none; padding: 8px 6px 12px; font-size: var(--f13); color: var(--gray); }
.stage.mini { display: none; }
.stage.static .pin { pointer-events: none; }
.list { transition: opacity var(--t3) linear, transform var(--t3) var(--out); transform-origin: 310px 200px; transform-box: view-box; }
.stage:not([data-s="0"]) .list { opacity: 0; transform: scale(.96); pointer-events: none; }
.list rect.row { fill: var(--paper); stroke: var(--rule); }
.list text { font-family: var(--font); font-size: 13px; fill: var(--ink); }
.list text.s { font-size: 11.5px; fill: var(--gray); }
.room .w { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: var(--L); stroke-dashoffset: var(--L); transition: stroke-dashoffset var(--t4) var(--out); }
.room text { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; fill: var(--gray); opacity: 0; transition: opacity var(--t2) linear 300ms; }
.room .fur { fill: #e3e1da; opacity: 0; transition: opacity var(--t3) linear 300ms; }
.room { transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform var(--t3) var(--out), opacity var(--t2) linear; transition-delay: var(--rd, 0ms); }
.stage[data-s="0"] .room { opacity: 0; }
.stage[data-s="1"] .r-living .w, .stage[data-s="2"] .room .w, .stage[data-s="3"] .room .w, .stage[data-s="4"] .room .w { stroke-dashoffset: 0; }
.stage[data-s="1"] .r-living text, .stage[data-s="1"] .r-living .fur,
.stage[data-s="2"] .room text, .stage[data-s="2"] .room .fur,
.stage[data-s="3"] .room text, .stage[data-s="3"] .room .fur,
.stage[data-s="4"] .room text, .stage[data-s="4"] .room .fur { opacity: 1; }
.stage:not([data-s="0"]):not([data-s="1"]) .room { --dx: 0px !important; --dy: 0px !important; }
.scanline { opacity: 0; transition: opacity var(--t2) linear; }
.stage[data-s="1"] .scanline { opacity: 1; animation: sweep 2400ms var(--out) 3 alternate forwards; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(270px); } }
.pin { cursor: pointer; }
.pin .hit { fill: transparent; }
.pin .fr { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; }
.pin:focus-visible { outline: none; }
.pin:focus-visible .fr { opacity: 1; }
.pin .pg { opacity: 0; transform: translateY(-16px); transition: opacity var(--t2) linear, transform var(--t3) var(--out); transition-delay: var(--pd, 0ms); }
.stage[data-s="3"] .pin .pg, .stage[data-s="4"] .pin .pg { opacity: 1; transform: none; }
.stage[data-s="0"] .pin, .stage[data-s="1"] .pin, .stage[data-s="2"] .pin { pointer-events: none; }
.pin circle.b { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill var(--t2) linear; }
.pin .ic { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t2) linear; }
.pin:hover circle.b { stroke: var(--c); stroke-width: 3; }
.pin .pg { transform-box: fill-box; transform-origin: center; }
.stage[data-s="3"] .pin:active .pg, .stage[data-s="4"] .pin:active .pg { transform: scale(.9); transition-duration: var(--t1); transition-delay: 0ms; }
.pin.on[data-k="lamp"] circle.b, .pin.on[data-k="bed"] circle.b { fill: #ffd25a; }
.pin.on[data-k="plug"] circle.b { fill: var(--ink); }
.pin.on[data-k="plug"] .ic { stroke: var(--paper); }
.pin.on[data-k="echo"] circle.b, .pin.on[data-k="thermo"] circle.b { fill: #d6ecf8; }
.pin .waves { opacity: 0; transition: opacity var(--t2) linear; }
.pin.on .waves { opacity: 1; }
.glow { opacity: 0; transition: opacity var(--t3) var(--out); pointer-events: none; }
.glow.on { opacity: 1; }
.ring { fill: none; stroke: var(--c); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.stage.hinting .ring { animation: pulse 900ms var(--out) 2 both; }
@keyframes pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.tap { font-family: var(--font); font-size: 13px; font-weight: 500; fill: var(--ink); opacity: 0; transition: opacity var(--t2) linear; pointer-events: none; }
.stage.hinting .tap { opacity: 1; }
.ctl { opacity: 0; transition: opacity var(--t1) linear; pointer-events: none; }
.ctl.on { opacity: 1; }
.ctl .card { transition: transform var(--t2) var(--out); }
.ctl rect { fill: var(--ink); }
.ctl text { font-family: var(--font); font-size: 13px; fill: #fff; }
.ctl text.st { fill: #ffd25a; }

.setup { display: grid; gap: 0; }
.st-row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.st-l b { display: block; font-size: var(--f15); font-weight: 500; }
.st-l span { display: block; font-size: var(--f13); color: var(--gray); line-height: 1.4; }
.st-tr { position: relative; height: 28px; }
.st-tr i { position: absolute; left: 0; top: 5px; height: 18px; border-radius: 4px; background: var(--ink); transform-origin: left; transition: transform var(--t4) var(--out); transition-delay: var(--dd, 0ms); }
.st-tr i.under { background: linear-gradient(90deg, var(--ink) 0 80%, transparent 80%), repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 7px); }
.js .armed .st-tr i { transform: scaleX(0); }
.st-tr em { position: absolute; top: 5px; line-height: 18px; font-style: normal; font-family: var(--mono); font-size: var(--f13); color: var(--ink); white-space: nowrap; }
.st-tr em.in { color: #fff; transform: translateX(-100%); }
.st-ax { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; padding-top: 8px; }
.st-ax .ax { position: relative; height: 18px; }
.st-ax .ax span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: var(--f11); color: var(--gray); }
.st-ax .ax span:first-child { transform: none; }
.st-ax .ax span:last-child { transform: translateX(-100%); }

.launch { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 80px); align-items: center; }
.launch figure img, .after figure img { width: 100%; height: auto; border-radius: 14px; }
.launch figcaption, .after figcaption { margin-top: 8px; font-size: var(--f13); color: var(--gray); }
.lfig.tall img { width: auto; max-width: 100%; max-height: 520px; }
.launch blockquote { font-size: var(--f30); line-height: 1.2; letter-spacing: -0.02em; }
.launch cite { display: block; margin-top: 12px; font-style: normal; font-size: var(--f13); color: var(--gray); }
.launch .f, .after .f { margin-top: 18px; font-size: var(--f15); line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.after { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 80px); align-items: center; }
.after .f:first-child { margin-top: 0; }
.src { margin-top: clamp(48px, 5vw, 80px); font-size: var(--f13); }
.src a { color: var(--gray); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.src a:hover { color: var(--ink); }
.next { margin-top: 20px; }
.next a { display: grid; grid-template-columns: minmax(0, 1fr) 172px; gap: 24px; align-items: stretch; min-height: 96px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.next a > div:first-child { align-self: center; padding: 14px 0; }
.next .nm { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--f22); letter-spacing: -0.012em; line-height: 1.2; font-weight: 500; }
.next .nm svg { width: 16px; height: 16px; transition: transform var(--t2) var(--out); }
.next a:hover .nm svg { transform: translateX(4px); }
.next .np { width: 172px; height: 96px; overflow: hidden; background: #efeee9; display: grid; place-items: center; }
.next .np img { height: 80%; width: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); transition: transform var(--t3) var(--out); }
.next a:hover .np img { transform: translateY(-2px); }
@media (max-width: 899px) {
  .ch-head, .launch, .after { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .facts > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .dec ol { grid-template-columns: 1fr; gap: 28px; }
  .story { grid-template-columns: 1fr; gap: 0; }
  .story > .stage { display: none; }
  .stage.mini { display: block; position: relative; top: auto; height: auto; padding: 8px; margin: 0 0 22px; border-radius: 14px; align-self: stretch; }
  .stage.mini svg { height: auto; }
  .list text { font-size: 17px; } .list text.s { font-size: 14px; }
  .room text { font-size: 15px; letter-spacing: .04em; }
  .tap { font-size: 18px; }
  .ctl .cin { transform: scale(1.4); }
  .step, .step:first-child { min-height: 0; padding: 40px 0 0; opacity: 1; }
  .steps { padding-bottom: 0; }
  .step h3 { font-size: 26px; }
  .ev.tall img { max-height: 300px; }
  .st-row, .st-ax { grid-template-columns: 1fr; gap: 8px; }
  .st-ax > div:first-child { display: none; }
  .ch-plate { aspect-ratio: 4 / 3; border-radius: 14px; }
  .next a { grid-template-columns: minmax(0, 1fr) 112px; }
  .next .np { width: 112px; height: 96px; }
}

/* page travel: the plate becomes the chapter (C7); the page around it crossfades, no delay */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 80ms linear both vt-out; }
::view-transition-new(root) { animation: 160ms linear 180ms both vt-in; }
::view-transition-group(*) { animation-duration: 420ms; animation-delay: 60ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.plate, .ch-plate, .next .np { view-transition-class: plate; }
::view-transition-old(*.plate) { animation: none; opacity: 0; }
::view-transition-new(*.plate) { animation: none; }
.hd { view-transition-name: hd; }
::view-transition-group(root) { animation-duration: 0s; }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* reduced motion: nothing travels; state changes fade in 160 ms; the scan line holds still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 160ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .plate .v img, .pl-a:hover .plate .v img { transform: none !important; }
  .pin .pg, .room, .list, .hd-name { transform: none !important; }
  .hd-line { transition: opacity 80ms linear !important; }
  .hd-line.out { opacity: 0; }
  .p-chapter .crumb .sep, .p-chapter .crumb b { transform: none !important; }
  .ctl .card { transition: none !important; }
  .stage[data-s="1"] .scanline { animation: none !important; transform: translateX(110px); }
  .stage.hinting .ring { animation: none !important; opacity: 0; }
  .plate, .ch-plate, .next .np { view-transition-name: none !important; }
  ::view-transition-old(root) { animation: 150ms linear both vt-out !important; }
  ::view-transition-new(root) { animation: 150ms linear both vt-in !important; }
}

/* ---------------------------------------------------------------- the M-PESA stage: one chain of work, its time as work and waiting */
.chain .lane-t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--gray); }
.chain .cb { transition: opacity var(--t2) linear; }
.chain .cb-r { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.chain .cb-t { font-family: var(--font); font-size: 12px; fill: var(--ink); }
.chain .ai { opacity: 0; transition: opacity var(--t2) linear; }
.chain .ai rect { fill: var(--c); }
.chain .ai text { font-family: var(--mono); font-size: 10px; font-weight: 500; fill: #fff; }
.chain .cb.on-ai .ai { opacity: 1; }
.chain .ok { opacity: 0; transition: opacity var(--t2) linear; }
.chain .ok circle { fill: var(--c); }
.chain .ok path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stage[data-s="3"] .chain .cb[data-check] .ok, .stage[data-s="4"] .chain .cb[data-check] .ok { opacity: 1; }
.stage[data-s="3"] .chain .cb:not([data-check]) { opacity: .32; }
.chain .cl { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 3; transition: stroke var(--t2) linear; }
.chain .cl.joined { stroke-dasharray: none; }
.chain .cl.joined { stroke: var(--ink); }
.chain .segs rect { transform-box: view-box; transform-origin: 0 0; transition: transform var(--t3) var(--out); }
.chain .tw { fill: var(--ink); }
.chain .tq { fill: #d9d7cf; }
.chain .end { transition: transform var(--t3) var(--out); }
.chain .end line { stroke: var(--ink); stroke-width: 1.5; }
.chain .end text, .chain .lg, .chain .legend text { font-family: var(--mono); font-size: 11.5px; fill: var(--gray); }
.chain .note { font-family: var(--font); font-size: 15px; fill: var(--ink); opacity: 0; transition: opacity var(--t2) linear; }
.stage[data-s="0"] .chain .note[data-n="0"] { opacity: 1; }
.stage[data-s="1"] .chain .note[data-n="1"] { opacity: 1; }
.stage[data-s="2"] .chain .note[data-n="2"] { opacity: 1; }
.stage[data-s="3"] .chain .note[data-n="3"] { opacity: 1; }
.stage[data-s="4"] .chain .note[data-n="4"] { opacity: 1; }

.chain .mkts { opacity: 0; transition: opacity var(--t2) linear; }
.stage[data-s="4"] .chain .mkts { opacity: 1; }
.chain .mk circle { fill: var(--c); }
.chain .mk text { font-family: var(--font); font-size: 13px; fill: var(--ink); }
@media (max-width: 899px) { .chain .cb-t { font-size: 13px; } .chain .mk text { font-size: 15px; } .chain .lane-t { font-size: 13px; } .chain .note { font-size: 17px; } }
/* the phone's copy, drawn near its displayed size: type at reading sizes */
.chain.chain-p .lane-t { font-size: 11px; }
.chain.chain-p .cb-t { font-size: 13px; }
.chain.chain-p .note { font-size: 15px; }
.chain.chain-p .mk text { font-size: 14px; }
.chain.chain-p .end text, .chain.chain-p .lg, .chain.chain-p .legend text { font-size: 11px; }

/* ================================================================ v2 additions: the multi-page site (D-042) */

/* the shell on every page: the name joins the bar on the home page once the hero's name scrolls away; elsewhere it is there */
.p-home .hd-name, .p-credits .hd-name, .p-404 .hd-name { opacity: 1; transform: none; pointer-events: auto; }
.p-chapter .hd-name { display: none; }
.p-chapter .crumb { display: inline-flex; }
.p-chapter .hd-nav a[data-nav="work"] { display: none; }
.p-chapter .hd-progress { opacity: 1; }
/* a page's title joins the bar once its heading has scrolled under it, so no title shows twice: a chapter's name beside "Work",
   and on About the name; it rises with the heading's last 28 px under the bar (site.js sets --rh from 0 to 1) */
.p-chapter .crumb .sep, .p-chapter .crumb b, .p-about .hd-name { opacity: var(--rh, 0); transform: translateY(calc((1 - var(--rh, 0)) * 10px)); transition: none; }
@media (max-width: 760px) { .p-chapter .hd-nav { display: none; } .crumb b { max-width: 52vw; } }
@media (max-width: 420px) { .hd-nav a[data-nav="lead"] { display: none; } }

/* the chart language, drawn by figs.py: a dot on a labeled scale; a dot that moves from before to after */
.f-ax { stroke: var(--ink); stroke-width: 1; }
.f-yt { stroke: var(--line); stroke-width: 1; }
.f-lead { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.dates-svg.list .f-yt, .dates-r.list .f-yt { stroke: var(--rule); }
.dot-o { fill: var(--paper); stroke: var(--gray); stroke-width: 2; }
.dot-m { fill: var(--ink); }
.ch .dot-m, .dot-m.c { fill: var(--ink); }
.slope-l { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ch .slope-l { stroke: var(--ink); }
.f-range { stroke: var(--line); stroke-width: 2; }
.f-ref { stroke: var(--gray); stroke-width: 1; stroke-dasharray: 3 3; }
.f-step { fill: var(--ink); }
.f-band { fill: var(--ink); opacity: .1; }
.fig-t.b { fill: var(--ink); font-weight: 500; }
.fig-n.now { font-weight: 500; }
.scale-svg, .dates-svg { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; margin-top: 16px; }
.dates-svg .fig-t { font-size: 11.5px; }

/* the home page: the lead's door and the work's span */
#work .sec-head .meta { display: none; }
.pl-p a, .pl-p span { color: inherit; }
.tl-rec-k { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: var(--f11); color: var(--gray); }
.tl-rec-k i { display: inline-block; width: 2px; height: 10px; background: var(--ink); margin-left: 10px; }
.tl-rec-k i.pp { width: 7px; height: 7px; border-radius: 50%; }
.rd-r .nil { color: var(--gray); }
.tlp .ran, .tlp .res { margin-top: 8px; font-size: var(--f15); line-height: 1.45; color: var(--ink-2); }
.tlp .res { color: var(--ink); }
.tlp .ran .lbl, .tlp .res .lbl { display: block; margin-bottom: 2px; }
.tlp .rec a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }

/* ---------------------------------------------------------------- the chapter: one frame for every chapter */
.ch-plate.views { background: var(--field, #efeee9); }
.ch-plate.views .v { position: absolute; inset: 0; opacity: 0; }
.ch-plate.views .v.on { opacity: 1; }
.ch-plate.views .v img { width: 100%; height: 100%; object-fit: cover; }
.ch-plate.views .v.fit img { object-fit: contain; padding: 5% 8%; }
.ch-plate.views .v.fit.shadow img { filter: drop-shadow(0 18px 30px rgba(20,18,12,.18)); }
.plate .v.fit.bleed img, .ch-plate.views .v.fit.bleed img { padding: 0; filter: none; object-fit: contain; object-position: center bottom; }
.ch-plate .poster { position: absolute; inset: 0; }
.ch-fig { margin: 0; }
.ch-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: var(--f13); color: var(--gray); min-height: 32px; }
.ch-pager { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.ch-pager button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background var(--t1) linear; }
.ch-pager button:hover { background: var(--wash); }
.ch-pager button:active { background: var(--wash-2); }
.ch-pager button[data-next] svg { transform: scaleX(-1); }
.ch-pager button svg { width: 14px; height: 14px; }
.ch-pager .count { min-width: 3.4em; text-align: center; font-size: var(--f13); color: var(--ink); }
.ch-open { margin-top: clamp(28px, 3vw, 44px); max-width: 38em; font-size: var(--f22); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink); }
.facts dd a, .ch-open a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.d-fig { margin-top: 4px; }
.dec .scale-svg, .dec .dates-svg { margin-top: 18px; }
.dec .pr-svg { width: 100%; max-width: 340px; height: auto; margin-top: 16px; overflow: visible; }

/* the story without a stage: one readable column, each step with its evidence under the text */
.story.solo { grid-template-columns: minmax(0, 1fr); }
.story.solo .step { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 0 clamp(28px, 5vw, 96px); align-items: start; }
.story.solo .st-ev { min-width: 0; padding-top: 30px; }
.story.solo .st-ev > :first-child { margin-top: 0; }
.story.solo .st-ev .ev { max-width: 720px; }
@media (max-width: 899px) { .story.solo .step { grid-template-columns: minmax(0, 1fr); } .story.solo .st-ev { padding-top: 0; } .story.solo .st-ev > :first-child { margin-top: 22px; } }
.story.solo .step { min-height: 0; padding-top: 0; opacity: 1; padding-bottom: clamp(40px, 4.5vw, 64px); }
.story.solo .step:last-child { padding-bottom: 0; }
.story.solo .steps { padding-bottom: 0; }
.story.solo .step h3 { font-size: var(--f30); }
.step a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.st-lead { margin-top: 12px; font-size: var(--f17); line-height: 1.6; color: var(--ink); }
.ev { max-width: 640px; }
.ev.line img { background: #fff; box-shadow: 0 0 0 1px var(--rule); padding: 10px; }
.ev.tall img { width: auto; max-height: 420px; max-width: 100%; }
.ev.sq img { width: auto; max-width: 100%; max-height: 460px; }
@media (max-width: 899px) { .ev.sq img { max-height: 360px; } }
.step .lst { margin-top: 12px; display: grid; gap: 6px; font-size: var(--f15); color: var(--ink-2); }
.step .lst li { padding-left: 18px; position: relative; }
.step .lst li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 1.5px; background: var(--gray); }
.q { margin-top: 18px; padding-left: 16px; border-left: 2px solid var(--line); font-size: var(--f19); line-height: 1.45; }

/* drawers: detail a reader may want, closed by default */
.drawer { margin-top: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.drawer summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer;
  font-size: var(--f15); font-weight: 500; transition: color var(--t1) linear; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary .chev { width: 16px; height: 16px; flex: none; transition: transform var(--t2) var(--out); }
.drawer[open] summary .chev { transform: rotate(180deg); }
.drawer summary:hover { color: var(--c); }
.drawer-in { padding: 4px 0 18px; }
.drawer-in p { margin-top: 10px; font-size: var(--f15); line-height: 1.55; color: var(--ink-2); }
.drawer-in p:first-child { margin-top: 0; }
.tbl { overflow-x: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
.tbl table { border-collapse: collapse; width: 100%; font-size: var(--f13); line-height: 1.45; font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; font-weight: 500; font-size: var(--f13); padding-bottom: 8px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--rule); }
.tbl th { font-family: var(--mono); font-weight: 400; font-size: var(--f11); letter-spacing: .04em; text-transform: uppercase; color: var(--gray); }

/* modules inside the story: the product working, with the site's tokens */
.step .module { margin: 26px 0 0; padding: 18px 18px 14px; border-radius: 16px; background: var(--wash); }
.step .module .m-head { max-width: none; }
.step .module .m-title { font-size: var(--f17); font-weight: 500; letter-spacing: -0.006em; }
.step .module .m-claim { margin-top: 4px; font-size: var(--f15); color: var(--ink-2); }
.step .module .m-tag { display: none; }
.step .module .m-data { margin-top: 12px; }
.m-data summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: var(--f13); color: var(--gray); }
.m-data summary::-webkit-details-marker { display: none; }
.m-data summary .chev { width: 14px; height: 14px; transition: transform var(--t2) var(--out); }
.m-data[open] summary .chev { transform: rotate(180deg); }
.m-rest { display: grid; place-items: center; min-height: inherit; color: var(--gray); font-size: var(--f13); }

/* readings: the chapter's number drawn against its comparison (C5) */
.reading .blk-h .lbl { margin-left: auto; }
.rd-fig { max-width: 560px; }
.read-svg { display: block; width: 100%; height: auto; overflow: visible; }
.read-svg.narrow { max-width: 460px; }
.r-note { margin-top: 14px; font-size: var(--f13); color: var(--gray); max-width: 44em; }
.funnel { display: grid; gap: 0; }
.fn-row { display: grid; grid-template-columns: 140px 300px minmax(0, 1fr); gap: 24px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.fn-n { font-family: var(--font); font-size: var(--f22); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fn-l { font-size: var(--f15); color: var(--ink-2); }
.fn-row.main .fn-n, .fn-row.main .fn-l { color: var(--ink); font-weight: 500; }
.fn-tr { position: relative; height: 18px; }
.fn-tr i { position: absolute; left: 0; top: 0; height: 18px; border-radius: 4px; background: var(--line); transform-origin: left; transition: transform var(--t4) var(--out); transition-delay: var(--dd, 0ms); }
.fn-row.main .fn-tr i { background: var(--ink); }
.js .armed .fn-tr i { transform: scaleX(0); }
.fn-ax { display: grid; grid-template-columns: 140px 300px minmax(0, 1fr); gap: 24px; padding-top: 8px; }
.fn-ax .ax { position: relative; height: 20px; border-top: 1px solid var(--line); }
.fn-ax .ax span { position: absolute; top: 6px; transform: translateX(-50%); font-family: var(--mono); font-size: var(--f11); color: var(--gray); }
.fn-ax .ax span:first-child { transform: none; }
.fn-ax .ax span:last-child { transform: translateX(-100%); }
@media (max-width: 899px) {
  .fn-ax { grid-template-columns: 1fr; gap: 0; } .fn-ax > span:not(.ax) { display: none; }
  .fn-row { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; }
  .fn-tr { grid-column: 1 / -1; }
  .fn-n { font-size: var(--f19); }
}

/* launch and what came next, with or without a picture */
.launch.nofig, .after.nofig { grid-template-columns: minmax(0, 1fr); }
.launch.nofig > div, .after.nofig > div { max-width: 40em; }
.launch.nofig .f, .after.nofig .f { max-width: none; font-size: var(--f17); line-height: 1.6; }
.lfig { margin: 0; }
.lfig img { width: 100%; height: auto; border-radius: 14px; }
.lfig.line img { background: #fff; box-shadow: 0 0 0 1px var(--rule); padding: 12px; }
.lfig figcaption { margin-top: 8px; font-size: var(--f13); color: var(--gray); }
.launch .f a, .after .f a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.next .ny { margin-top: 4px; font-size: var(--f13); color: var(--gray); }
.next .np img { width: auto; height: 80%; object-fit: contain; }
.next a:hover .nm { color: var(--c2, var(--ink)); }

/* ---------------------------------------------------------------- About */
.ab-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 5vw, 96px); align-items: end; padding-top: clamp(24px, 3vw, 56px); }
.ab-h1 { margin-top: 10px; font-size: var(--f56); line-height: 1.02; letter-spacing: -0.032em; font-weight: 400; }
.ab-intro { margin-top: clamp(18px, 2vw, 28px); max-width: 38em; }
.ab-intro p { font-size: var(--f19); line-height: 1.55; color: var(--ink-2); }
.ab-intro p:first-child { color: var(--ink); font-size: var(--f22); line-height: 1.45; letter-spacing: -0.008em; }
.ab-intro p + p { margin-top: 14px; }
.about-nav { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.about-nav a { font-size: var(--f15); padding: 8px 12px; border-radius: 999px; background: var(--wash); color: var(--ink); transition: background var(--t1) linear; }
.about-nav a:hover { background: var(--wash-2); }
.portrait { margin: 0; align-self: end; }
.portrait img { width: 100%; height: auto; max-width: 380px; margin-left: auto; border-radius: 18px; }
@media (max-width: 899px) { .ab-top { grid-template-columns: 1fr; } .portrait { order: -1; max-width: 220px; } .portrait img { margin: 0; } }
/* About's view toggle is the module kit's segmented control (the capture coach's), with the kit's values in scope */
#how-i-work { --radius: 8px; --hit: 44px; --focus: 2px solid var(--ink); --plate: #efeee9; --plate-2: #e5e3dd; --track: #6b6a64; }
@media (max-width: 599px) { #how-i-work .sec-head { flex-wrap: wrap; } #how-i-work .seg { order: 3; flex-basis: 100%; } #how-i-work .seg > button { white-space: nowrap; } }
.hw-lead { max-width: 40em; font-size: var(--f19); line-height: 1.5; color: var(--ink); margin-bottom: clamp(24px, 2.4vw, 36px); }
.hw-group + .hw-group { margin-top: clamp(32px, 3vw, 48px); }
.hw-group h3 { margin-bottom: 8px; }
.hw { border-top: 1px solid var(--rule); }
.hw-i { border-bottom: 1px solid var(--rule); }
.hw-i summary { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; align-items: start; padding: 14px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; transition: background var(--t1) linear; }
.hw-i summary:hover { background: var(--wash); }
.hw-i summary:active { background: var(--wash-2); }
.hw-i summary::-webkit-details-marker { display: none; }
.hw-n { font-size: var(--f13); color: var(--gray); padding-top: 3px; }
.hw-t b { display: block; font-weight: 500; font-size: var(--f17); line-height: 1.35; }
.hw-t span { display: block; margin-top: 2px; font-size: var(--f15); line-height: 1.5; color: var(--ink-2); }
.hw-i summary .chev { width: 16px; height: 16px; margin-top: 4px; transition: transform var(--t2) var(--out); color: var(--gray); }
.hw-i details[open] summary .chev { transform: rotate(180deg); }
.hw-i summary:hover .hw-t b { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.hw-b { padding: 0 32px 18px 56px; max-width: 52em; }
.hw-b p { font-size: var(--f15); line-height: 1.6; color: var(--ink-2); }
.hw-b p + p { margin-top: 8px; }
.hw-u { margin-top: 12px; display: grid; gap: 6px; }
.hw-u li { font-size: var(--f15); line-height: 1.5; color: var(--ink-2); }
.hw-u a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
@media (max-width: 599px) { .hw-i summary { grid-template-columns: 32px minmax(0, 1fr) 18px; } .hw-b { padding-left: 44px; padding-right: 0; } }
.mx-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mx { border-collapse: collapse; width: 100%; min-width: 760px; font-size: var(--f13); }
.mx th, .mx td { border-bottom: 1px solid var(--rule); padding: 10px 8px; text-align: center; vertical-align: middle; }
.mx tbody th { text-align: left; font-weight: 400; font-size: var(--f15); color: var(--ink); padding-left: 0; min-width: 260px; }
.mx tbody th .mono { color: var(--gray); font-size: var(--f13); margin-right: 8px; }
.mx thead th { vertical-align: bottom; height: 132px; padding-bottom: 12px; }
.mx thead th a { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 500; font-size: var(--f13); white-space: nowrap; }
.mx thead th a:hover { color: var(--c2); }
.mx td i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c2, var(--ink)); }
.mx tbody tr:hover th, .mx tbody tr:hover td { background: var(--wash); }
.rc-axis { position: relative; height: 34px; margin-bottom: 10px; border-bottom: 1px solid var(--rule); }
.rc-axis .ax-y { position: absolute; bottom: 6px; transform: translateX(-50%); font-family: var(--mono); font-size: var(--f11); color: var(--gray); }
.rc-axis .ax-m { position: absolute; bottom: -7px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.rc-axis .ax-m.paper { width: 8px; height: 8px; bottom: -4px; margin-left: -4px; border-radius: 50%; }
.rcl { display: grid; }
.rc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.rc-b { max-width: 46em; }
.rc-y { font-size: var(--f13); color: var(--gray); padding-top: 2px; }
.rc-th { width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--rule); display: grid; place-items: center; }
.rc-th.none { background: var(--wash); box-shadow: none; }
.rc-num { display: grid; justify-items: center; gap: 2px; font-size: 12px; line-height: 1.2; color: var(--ink); }
.rc-num small { font-size: 10px; letter-spacing: .08em; color: var(--gray); }
.rc-th img { width: 100%; height: 100%; object-fit: contain; }
.rc-b { display: grid; gap: 4px; min-width: 0; }
.rc-t { font-size: var(--f17); font-weight: 500; line-height: 1.35; }
.rc-t a { display: inline-flex; align-items: baseline; gap: 6px; }
.rc-t a:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.rc-t svg { width: 11px; height: 11px; flex: none; }
.rc-l { font-size: var(--f15); line-height: 1.5; color: var(--ink-2); max-width: 46em; }
.builds .rc { grid-template-columns: 64px minmax(0, 1fr); }
@media (max-width: 599px) { .rc { grid-template-columns: 1fr; gap: 6px; } .rc-y { display: none; } .builds .rc { grid-template-columns: 1fr; } }
.sec-lead { max-width: 40em; font-size: var(--f17); line-height: 1.55; color: var(--ink-2); margin-bottom: 18px; }
.edu { display: grid; border-top: 1px solid var(--rule); }
.edu li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.edu .y { font-size: var(--f13); color: var(--gray); padding-top: 3px; }
.edu b { display: block; font-weight: 500; font-size: var(--f17); }
.edu span span { display: block; font-size: var(--f15); color: var(--ink-2); }

/* ---------------------------------------------------------------- Sources and credits, and the 404 */
.page-top { padding-top: clamp(24px, 3vw, 56px); }
.page-top h1 { font-size: var(--f56); line-height: 1.02; letter-spacing: -0.032em; font-weight: 400; }
.page-lead { margin-top: 16px; max-width: 40em; font-size: var(--f19); line-height: 1.5; color: var(--ink-2); }
.credits-ch { padding-top: clamp(40px, 4vw, 64px); }
.credits-ch h2 { font-size: var(--f22); letter-spacing: -0.012em; padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-bottom: 16px; }
.credits-ch h2 a:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.cr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); }
.cr-cols h3 { margin-bottom: 8px; }
.cr-src h3, .cr-pics h3 { font-family: var(--mono); font-size: var(--f11); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); font-weight: 400; }
.src-list { display: grid; gap: 8px; counter-reset: s; }
.src-list li { font-size: var(--f15); line-height: 1.45; }
.src-list a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.src-list a:hover { text-decoration-color: var(--ink); }
.src-list .pub, .credit .w { display: block; font-size: var(--f13); color: var(--gray); }
.cr-pics ul { display: grid; gap: 10px; }
.credit { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
.credit .th { width: 72px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--wash); display: block; }
.credit .th img { width: 100%; height: 100%; object-fit: cover; }
.credit .c { display: block; font-size: var(--f15); line-height: 1.4; }
.credit .w a { text-decoration: underline; text-decoration-color: var(--line); }
@media (max-width: 899px) { .cr-cols { grid-template-columns: 1fr; } }
.nf { padding-top: clamp(48px, 8vw, 140px); min-height: 50vh; }
.nf .lead a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .22em; }

/* forced colors and print floors */
@media (forced-colors: active) { .plate, .ch-plate, .stage, .pr-fig { forced-color-adjust: none; } }
@media print { .hd, .next, .stage, .skip { display: none !important; } .step { min-height: 0 !important; opacity: 1 !important; } }

/* ================================================================ the module kit (F1): the interactives share one look */
/* Module kit: the shared look of every interactive module (F1: modules define no state rules of their own).
   Merged into site.css at build time; kept as its own file so module harnesses can load it alone. */
.module {
  --ink-2: #46453f; --track: #6b6a64; --rule: #e5e3dd; --plate: #efeee9; --plate-2: #e5e3dd;
  --data-claim: #0b0b0a; --data-1: var(--c, #2a78d6); --data-2: #b5832a; --data-ref: #6b6a64; --data-grid: #e5e3dd;
  --t-1: 140ms; --t-2: 240ms; --t-3: 420ms; --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 8px; --hit: 44px; --focus: 2px solid var(--ink);
}

/* the module block (the build renders this frame; scripts fill .m-stage only) */
.m-head { max-width: 40em; }
.m-title { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; }
.m-claim { margin-top: 6px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.m-tag { display: inline-block; margin-top: 10px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.m-stage { position: relative; margin-top: 24px; min-height: var(--h, 360px); }
@media (max-width: 599px) { .m-stage { min-height: var(--hp, var(--h, 360px)); } }
.m-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-stage svg text { font-family: var(--font); font-size: 13px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.m-stage svg .t-ink { fill: var(--ink); }
.m-stage svg .t-strong { fill: var(--ink); font-weight: 600; }
.m-stage svg .t-big { font-size: 22px; fill: var(--ink); font-weight: 500; }

/* data marks (color.md): one claim series in ink, comparison series in the two accents, reference in gray */
.d-claim { fill: var(--data-claim); stroke: var(--data-claim); }
.d1 { fill: var(--data-1); stroke: var(--data-1); }
.d2 { fill: var(--data-2); stroke: var(--data-2); }
.d-ref { fill: var(--data-ref); stroke: var(--data-ref); }
.d-grid { fill: none; stroke: var(--data-grid); stroke-width: 1; }
.d-axis { fill: none; stroke: var(--track); stroke-width: 1; }
.d-light { fill: var(--plate); stroke: none; }
.no-fill { fill: none !important; }
.no-stroke { stroke: none !important; }

/* the one control row */
.m-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
@media (max-width: 599px) { .m-controls { display: block; } .m-controls > * { width: 100%; } }

/* segmented control: a radiogroup of buttons */
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: calc(var(--radius) + 2px); background: var(--paper); }
@media (max-width: 599px) { .seg { display: flex; } .seg > button { flex: 1 1 0; } }
.seg > button { min-height: 36px; padding: 0 14px; border-radius: var(--radius); font: inherit; font-size: 0.9375rem; color: var(--ink); background: transparent;
  border: 0; cursor: pointer; transition: background-color var(--t-1) linear, color var(--t-1) linear; white-space: nowrap; }
@media (max-width: 599px) { .seg > button { min-height: var(--hit); padding: 0 8px; white-space: normal; line-height: 1.2; } }
@media (hover: hover) and (pointer: fine) { .seg > button:hover { background: var(--plate); } }
.seg > button:active { background: var(--plate-2); transition: none; }
.seg > button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.seg > button[aria-checked="true"]:active { background: #2b2b29; }
.seg > button:focus-visible { outline: var(--focus); outline-offset: 2px; }
.seg > button[aria-disabled="true"] { color: var(--track); cursor: default; }

/* one button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 1px solid var(--ink);
  border-radius: var(--radius); font: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--paper); cursor: pointer;
  transition: background-color var(--t-1) linear, color var(--t-1) linear; }
@media (max-width: 599px) { .btn { min-height: var(--hit); } }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--plate); } }
.btn:active { background: var(--ink); color: var(--paper); transition: none; }
.btn:focus-visible { outline: var(--focus); outline-offset: 2px; }
.btn[aria-disabled="true"], .btn:disabled { color: var(--track); border-color: var(--rule); background: var(--paper); cursor: default; }

/* one slider */
.range { -webkit-appearance: none; appearance: none; width: min(100%, 420px); height: var(--hit); background: transparent; margin: 0; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 2px; background: var(--rule); border-radius: 2px; }
.range::-moz-range-track { height: 2px; background: var(--rule); border-radius: 2px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.range:focus-visible { outline: var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--plate), 0 0 0 5px var(--ink); } }

/* the readout: one line that says what the reader is looking at */
.m-read { margin-top: 14px; min-height: 1.5em; font-size: 1rem; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-read b, .m-read strong { font-weight: 600; }

/* motion: one character; reduced motion gets a complete still path */
.m-stage .anim { transition: transform var(--t-2) var(--ease), opacity var(--t-1) linear, width var(--t-2) var(--ease), x var(--t-2) var(--ease), y var(--t-2) var(--ease); }
@media (prefers-reduced-motion: reduce) { .m-stage *, .m-stage .anim { transition: none !important; animation: none !important; } }

/* ============================================================ v2.1, the surgical pass (5 November 2026) */
/* drawings: the site's own diagrams in story steps and heroes, drawn on a 380-unit-wide grid so that
   type reads at about 1.2x on a laptop column and 0.94x on a phone */
.dw { display: block; width: 100%; height: auto; font-family: var(--font); overflow: visible; }
.dw text { fill: var(--ink); font-size: 14px; font-family: var(--font); }
.dw .m { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; fill: var(--gray); }
.dw .s { font-size: 12.5px; fill: var(--gray); }
.dw .b { font-weight: 500; }
.dw .n { font-family: var(--mono); font-size: 13px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.dw .w { fill: #fff; }
.dw .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.dw .boxl { fill: var(--paper); stroke: var(--line); stroke-width: 1.2; }
.dw .soft { fill: var(--wash-2); }
.dw .mat { fill: var(--wash); }
.dw .ln { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dw .lk { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dw .dash { stroke-dasharray: 3 4; }
.dw .ink { fill: var(--ink); }
.dw .acc { fill: var(--c); }
.dw .acs { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dw .off { opacity: .32; }
.ev.dwf { max-width: 460px; padding: 18px 18px 14px; border-radius: 14px; background: var(--wash); }
.ev.dwf figcaption { margin-top: 12px; }
@media (max-width: 899px) { .ev.dwf { max-width: none; padding: 14px 12px 12px; } }

/* ---------- one link grammar (item 1, 2): no underlined words at rest; a link on its own line ends in one glyph;
   on hover the text darkens, a hairline draws in from the left and the glyph moves toward where it goes */
.g { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t2) var(--out), color var(--t1) linear; }
.xl, .pk { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; }
.xl > span, .pk > span, .xl { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; }
.pk > span { transition: background-size var(--t2) var(--out); }
.xl { background-size: 0 0; }
.xl .g, .pk .arr, .pk .g { color: var(--gray); }
@media (hover: hover) and (pointer: fine) {
  .pk:hover > span { background-size: 100% 1px; }
  .xl:hover, .pk:hover { color: var(--ink); }
  .xl:hover .g, .pk:hover .arr { color: var(--ink); }
  .xl:hover .g-next, .pk:hover .arr { transform: translateX(3px); }
  .xl:hover .g-out { transform: translate(2px, -2px); }
}
.xl:active, .pk:active { opacity: .6; transition: none; }
.ch-pager button:active { background: #dcd9d1; color: var(--ink); transition: none; }
/* How I lead: the product stands on its own line above the proof */
.pr .proof .pk { display: flex; width: max-content; max-width: 100%; margin-bottom: 4px; font-weight: 500; font-size: var(--f15); min-height: 28px; }
.pr .proof .pk .arr { width: 12px; height: 12px; opacity: 1; transform: none; transition: transform var(--t2) var(--out), color var(--t1) linear; }
/* a chapter's sources, the 404's way home */
.src .xl, .nf-home .xl { font-size: var(--f13); color: var(--ink-2); min-height: 32px; text-decoration: none; }
.src a, .src .xl { text-decoration: none; }
.src .xl .g, .nf-home .xl .g { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) { .src .xl:hover, .nf-home .xl:hover { color: var(--ink); } }
.nf-home { margin-top: 18px; }
.nf-home .xl { font-size: var(--f17); color: var(--ink); }
/* Sources: a reference list, so the rows carry no underline; it draws in on hover */
.src-list a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--t2) var(--out); }
@media (hover: hover) and (pointer: fine) { .src-list a:hover { background-size: 100% 1px; } }
/* About: the chips go lower on the page; patents and papers leave the site */
.about-nav a { display: inline-flex; align-items: center; gap: 7px; }
.about-nav a .g { width: 11px; height: 11px; color: var(--gray); }
@media (hover: hover) and (pointer: fine) { .about-nav a:hover .g { color: var(--ink); transform: translateY(2px); } }
.about-nav a:active { background: #dcd9d1; transition: none; }
.rc-t a { display: inline; text-decoration: none; }
.rc-t a .g { display: inline-block; width: 11px; height: 11px; margin-left: 6px; vertical-align: 0; color: var(--gray); }
@media (hover: hover) and (pointer: fine) { .rc-t a:hover .g { color: var(--ink); transform: translate(2px, -2px); } .rc-t a:hover { color: var(--ink); } }
.sec-head .xl.meta { font-size: var(--f13); color: var(--ink-2); gap: 6px; }
.sec-head .xl.meta .g { width: 11px; height: 11px; }


/* ---------- the hero (item 4): the headline's lines broken by sense on a laptop */
@media (min-width: 1000px) { .headline .hl-l { display: block; } }
@media (max-width: 599px) { .headline { font-size: 29px; line-height: 1.1; letter-spacing: -0.024em; } }

/* ---------- finish (item 8) */
.sec { --pt: clamp(56px, 6vw, 112px); padding-top: var(--pt); scroll-margin-top: calc(8px - var(--pt)); }
#work.sec { --pt: clamp(36px, 3.4vw, 56px); }
@media (max-width: 599px) { #work.sec { --pt: 26px; } }
.ch-head { align-items: start; }
.ch-head .ch-what { padding-top: calc(var(--f56) * .62 - .6em); }
@media (min-width: 600px) { .pl-l { min-height: calc(2em * 1.45); text-wrap: pretty; } }
.next a { grid-template-columns: minmax(0, 1fr) 160px; min-height: 140px; align-items: center; }
.next .np { width: 160px; height: 120px; border-radius: 10px; background: var(--wash); margin: 10px 0; }
.next .np img { height: auto; width: auto; max-height: 76%; max-width: 78%; filter: drop-shadow(0 10px 18px rgba(20,18,12,.22)); }
.next .np.drawn { padding: 8px; }
.next .np.drawn .dw { width: 100%; height: 100%; }
@media (max-width: 899px) { .next a { grid-template-columns: minmax(0, 1fr) 120px; min-height: 120px; } .next .np { width: 120px; height: 90px; } }
.tl-tick { margin-top: -12px; }
.tl-tick.paper { margin-top: 2px; }
.rc-axis .ax-m { bottom: -2px; }
.rc-axis .ax-m.paper { bottom: -9px; }
.tl-scrub span { top: -44px; }
.ch-plate.views .v { transition: opacity var(--t2) linear; }
.hw-list:not([hidden]), .hw-mx:not([hidden]) { animation: fade var(--t2) linear both; }
@keyframes rise { from { opacity: 0; transform: translateY(-4px); } }
.drawer[open] .drawer-in, details[open] > .hw-b { animation: rise var(--t2) var(--out) both; }
.p-about .byline, .p-404 .byline { display: none; }
.step.on .k { color: color-mix(in srgb, var(--c) 78%, #000); }
.stage[data-stage="chain"] { height: auto; }
.stage[data-stage="chain"] svg { flex: none; height: auto; }
.edu { border-top: 0; }
@media (prefers-reduced-motion: reduce) { .ch-plate.views .v, .hw-list, .hw-mx, .drawer-in, .hw-b { transition: none !important; animation: none !important; } }

/* ---------- a drawn hero and the film stage (items 5, 7) */
.ch-plate.drawn { display: grid; place-items: center; background: var(--wash); padding: clamp(20px, 4vw, 64px) clamp(16px, 6vw, 96px); }
.ch-plate.drawn .dw { width: 100%; max-width: 980px; height: 100%; }
.film-stage { padding: 12px; }
.film-stage .fs-mat { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px; }
.film-stage .fs-box { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--fw) / var(--fh); border-radius: 16px; overflow: hidden;
  background: var(--paper); box-shadow: 0 18px 36px -20px rgba(20,18,12,.35); }
.film-stage .fs-box img, .film-stage .fs-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-stage .fs-v { opacity: 0; transition: opacity var(--t2) linear; }
.film-stage .fs-v.on { opacity: 1; }
.film-stage .fs-rail { flex: none; display: flex; gap: 6px; padding: 12px 8px 2px; }
.film-stage .fs-rail i { flex: 1; height: 3px; border-radius: 2px; background: var(--wash-2); overflow: hidden; }
.film-stage .fs-rail b { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 2px; }
.film-stage .fs-rail i.done b { width: 100%; background: var(--line); }
.film-stage .fs-rail i.on b { background: var(--c); }
.film-stage .fs-end { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 14px 14px 12px; border-radius: 12px; background: var(--paper);
  box-shadow: 0 10px 28px -12px rgba(20,18,12,.4); opacity: 0; transform: translateY(8px); transition: opacity var(--t2) linear, transform var(--t3) var(--out); }
.film-stage.at-end .fs-end { opacity: 1; transform: none; }
.fs-end .big { font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.fs-end .big small { font-size: var(--f15); letter-spacing: 0; color: var(--ink-2); }
.fs-end .bar { display: block; margin-top: 10px; height: 6px; border-radius: 3px; background: var(--wash-2); overflow: hidden; }
.fs-end .bar i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 3px; transition: width var(--t4) var(--out) 120ms; }
.film-stage.at-end .fs-end .bar i { width: var(--w); }
.fs-end .t { margin-top: 8px; font-size: var(--f13); line-height: 1.4; color: var(--ink-2); }
@media (max-width: 899px) {
  .stage.mini.film-stage { display: flex; flex-direction: column; height: auto; padding: 10px; margin: 0 0 22px; }
  .stage.mini.film-stage .fs-mat { height: 46vh; max-height: 440px; flex: none; }
  .stage.mini.film-stage .cap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .film-stage .fs-end, .fs-end .bar i { transition: none !important; } }

/* ---------- v2.1, second block: the film rail, About's readings and phone matrix, a chapter's patents */
.film-stage .fs-rail.go { cursor: pointer; padding-top: 16px; padding-bottom: 6px; }
.hw-b.has-fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 18px 40px; align-items: start; max-width: none; }
.hw-tx { max-width: 52em; min-width: 0; }
.hw-fig { margin-top: 2px; }
.hw-fig.dwf { padding: 16px 16px 12px; border-radius: 12px; background: var(--wash); }
@media (max-width: 899px) { .hw-b.has-fig { grid-template-columns: minmax(0, 1fr); } .hw-fig { max-width: 420px; } }
.hw-u .pk { display: inline; font-weight: 500; }
.hw-u .pk > span { transition: background-size var(--t2) var(--out); }
.hw-u .pk .arr { display: inline-block; width: 11px; height: 11px; margin: 0 2px 0 5px; vertical-align: -1px; color: var(--gray); transition: transform var(--t2) var(--out), color var(--t1) linear; }
@media (hover: hover) and (pointer: fine) { .hw-u .pk:hover > span { background-size: 100% 1px; } .hw-u .pk:hover .arr { color: var(--ink); transform: translateX(3px); } }
.mx-list { display: none; }
@media (max-width: 759px) {
  .hw-mx .mx-wrap { display: none; }
  .mx-list { display: block; border-top: 1px solid var(--rule); }
  .mx-list li { padding: 14px 0 12px; border-bottom: 1px solid var(--rule); }
  .mx-t { display: grid; grid-template-columns: 32px minmax(0, 1fr); font-size: var(--f15); line-height: 1.4; color: var(--ink); }
  .mx-t .mono { font-size: var(--f13); color: var(--gray); padding-top: 1px; }
  .mx-p { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0 32px; }
  .mx-p a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font-size: var(--f13); color: var(--ink-2); }
  .mx-p a i { width: 9px; height: 9px; border-radius: 50%; background: var(--c2, var(--ink)); flex: none; }
}
.rd-rec .rcl { margin-top: 8px; }
/* fixes from the first look at the build */
.pr .proof a.pk, .hw-u a.pk { text-decoration: none; }
.ch-plate.drawn { aspect-ratio: auto; padding: clamp(36px, 5vw, 76px) clamp(16px, 7vw, 120px); }
.ch-plate.drawn .dw { height: auto; }
.story.solo .st-ev .ev.dwf { max-width: 500px; }
@media (max-width: 899px) { .story.solo .st-ev .ev.dwf { max-width: none; } }
.hw-b.has-fig { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
@media (max-width: 899px) { .hw-b.has-fig { grid-template-columns: minmax(0, 1fr); } }
.ch-plate.drawn .dw-narrow { display: none; }
@media (max-width: 599px) { .ch-plate.drawn .dw-wide { display: none; } .ch-plate.drawn .dw-narrow { display: block; } .ch-plate.drawn { padding: 22px 16px 18px; } }
/* the film's end: a card over the foot of the film, wider than a portrait film so its reading has room */
.film-stage .fs-mat { position: relative; }
.film-stage .fs-end { left: 50%; right: auto; bottom: 18px; width: min(290px, calc(100% - 28px)); transform: translate(-50%, 8px); }
.film-stage.at-end .fs-end { transform: translate(-50%, 0); }
.fs-end .big small { margin-left: 4px; white-space: nowrap; }
@media (max-width: 899px) { .film-stage .fs-end { bottom: 12px; padding: 12px 12px 10px; } .fs-end .big { font-size: 26px; } }

/* ---------------------------------------------------------------- v2.2 (6 November 2026) */
/* My approach: the section's lead, and its two links */
.pr-lead { max-width: 38em; font-size: var(--f19); line-height: 1.5; color: var(--ink); margin: 0 0 clamp(26px, 2.6vw, 40px); }
.mores { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: clamp(28px, 3vw, 44px); }
.mores .more { margin-top: 0; }
/* About's builds: the walkthrough */
.rc-a { display: block; margin-top: 4px; }
.rc-a .xl { font-size: var(--f15); font-weight: 500; color: var(--ink); min-height: 36px; gap: 8px; }
.rc-a .rc-len { font-weight: 400; font-size: var(--f13); color: var(--gray); }
.rc-a .xl .g { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) { .rc-a .xl:hover { color: var(--ink); } }
/* ---------------------------------------------------------------- the Prime Now stage: the store platform, shelf to app (v2.2) */
.stage[data-stage="pipeline"] { height: auto; }
.stage[data-stage="pipeline"] svg { flex: none; height: auto; }
.pipe { overflow: visible; }
.pipe text { font-family: var(--font); }
.pipe .lane-t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--gray); }
.pipe .p-link { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke var(--t2) linear; }
.pipe.pipe-p .p-link { stroke-dasharray: 2 2.5; }
.pipe .p-link.on { stroke: var(--ink); stroke-dasharray: none; }
.pipe .p-link.live { stroke: var(--c); stroke-width: 2; }
.pipe .stn .sc { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; transition: stroke var(--t2) linear, fill var(--t2) linear; }
.pipe .stn .sl { font-size: 12px; fill: var(--gray); transition: fill var(--t2) linear; }
.pipe .stn .g-l { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t2) linear; }
.pipe .stn .g-f { fill: var(--line); transition: fill var(--t2) linear; }
.pipe .stn .g-d { stroke-dasharray: 2 2.4; }
.pipe .stn.on .sc { stroke: var(--ink); stroke-dasharray: none; }
.pipe .stn.on .sl { fill: var(--ink); }
.pipe .stn.on .g-l { stroke: var(--ink); }
.pipe .stn.on .g-f { fill: var(--ink); }
.pipe .stn.cur .sc { stroke: var(--c); stroke-width: 2; fill: #fff; }
.pipe .stn.cur .sl { font-weight: 500; }
.pipe .stn.cur .g-d { stroke: var(--c); }
.pipe .cd { font-family: var(--mono); font-size: 11px; fill: var(--gray); opacity: 0; transition: opacity var(--t2) linear; }
.pipe .cd[data-c="4"] { fill: var(--c); font-weight: 500; }
.stage[data-s="0"] .pipe .cd[data-c="0"], .stage[data-s="1"] .pipe .cd[data-c="1"], .stage[data-s="2"] .pipe .cd[data-c="2"],
.stage[data-s="3"] .pipe .cd[data-c="3"], .stage[data-s="4"] .pipe .cd[data-c="4"] { opacity: 1; }
.pipe .pd { opacity: 0; transform: translateY(8px); transition: opacity var(--t2) linear, transform var(--t3) var(--out); }
.stage[data-s="0"] .pipe .pd[data-p="0"], .stage[data-s="1"] .pipe .pd[data-p="1"], .stage[data-s="2"] .pipe .pd[data-p="2"],
.stage[data-s="3"] .pipe .pd[data-p="3"], .stage[data-s="4"] .pipe .pd[data-p="4"] { opacity: 1; transform: none; }
.pipe .d-box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.pipe .d-boxl { fill: var(--paper); stroke: var(--line); stroke-width: 1.2; }
.pipe .d-ln { fill: none; stroke: var(--line); stroke-width: 1.5; }
.pipe .d-good { fill: var(--wash-2); stroke: var(--ink-2); stroke-width: 1; }
.pipe .d-row { fill: var(--wash); }
.pipe .d-row.on { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.pipe .d-q { font-family: var(--mono); font-size: 12px; fill: var(--gray); dominant-baseline: middle; }
.pipe .d-m { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--gray); }
.pipe .d-b { font-size: 14px; font-weight: 500; fill: var(--ink); }
.pipe .d-s { font-size: 12.5px; fill: var(--gray); }
.pipe .d-t { font-size: 13px; fill: var(--ink); }
.pipe .d-gap { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.pipe .d-x { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; }
.pipe .d-ink { fill: var(--ink); }
.pipe .d-cell { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1; }
.pipe .d-flow { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pipe .d-acc { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pipe .d-file { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.pipe .d-soft { fill: var(--wash-2); }
.pipe .d-new { fill: #fff; stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pipe .d-now { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.pipe .d-sold { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pipe .d-ahead { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pipe .d-tick { stroke: var(--line); stroke-width: 1; }
.pipe .d-dot { fill: var(--c); }
.pipe .d-ok circle { fill: var(--c); }
.pipe .d-ok path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pipe .note { font-size: 15px; fill: var(--ink); opacity: 0; transition: opacity var(--t2) linear; }
.stage[data-s="0"] .pipe .note[data-n="0"], .stage[data-s="1"] .pipe .note[data-n="1"], .stage[data-s="2"] .pipe .note[data-n="2"],
.stage[data-s="3"] .pipe .note[data-n="3"], .stage[data-s="4"] .pipe .note[data-n="4"] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stage[data-s="4"] .pipe .d-up { animation: pipe-up 520ms var(--out) both; animation-delay: calc(var(--k) * 90ms + 160ms); }
  .stage[data-s="4"] .pipe .d-ok { animation: fade var(--t2) linear both; animation-delay: 820ms; }
}
@keyframes pipe-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pipe.pipe-p .stn .sl { font-size: 11px; }
.pipe.pipe-p .note { font-size: 15px; }
.pipe.pipe-p .d-t { font-size: 12px; }
.pipe.pipe-p .d-b { font-size: 13px; }
.pipe.pipe-p .d-s { font-size: 11.5px; }
.pipe.pipe-p .d-m, .pipe.pipe-p .lane-t { font-size: 10.5px; }
.dw .lis { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.4; }
/* Halo Tone's plane: the other quarters' words, faint, where the dot would sit (v2.2) */
.m-stage svg .t-ghost { font-size: 15px; fill: var(--line); opacity: 0; transition: opacity var(--t2) linear; }
.m-stage svg .t-ghost.on { opacity: 1; }
/* Bio Discovery's launch campaign: a funnel drawn as magnified stages (v2.2) */
.zf { display: block; width: 100%; max-width: 760px; height: auto; overflow: visible; }
.zf .zf-bar { fill: var(--wash-2); }
.zf .zf-on { fill: var(--ink-2); }
.zf .zf-main { fill: var(--c); }
.zf .zf-w { fill: var(--wash-2); fill-opacity: .7; stroke: #a3a19a; stroke-width: 1; }
.zf .zf-n { font-family: var(--font); font-size: 19px; letter-spacing: -0.01em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.zf .zf-l { font-family: var(--font); font-size: 13.5px; fill: var(--gray); }
.zf .zf-x { font-family: var(--mono); font-size: 11.5px; fill: var(--gray); }
.zf .zf-b { fill: none; stroke: var(--c); stroke-width: 1.5; }
.zf .zf-r { fill: var(--c); font-weight: 500; }
.zf .zf-rl { font-family: var(--font); font-size: 15px; fill: var(--ink); font-weight: 500; }
@media (max-width: 599px) { .zf .zf-n { font-size: 20px; } .zf .zf-l { font-size: 16px; } .zf .zf-x { font-size: 14px; } .zf .zf-rl { font-size: 18px; } }
/* M-PESA's stage: once the chain is redesigned, its old length stays as a dashed outline, so the shorter wait reads
   against the one it replaced (v2.2) */
.chain .ghost { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--t2) linear; }
.chain .ghost-t { font-family: var(--mono); font-size: 11.5px; fill: var(--gray); opacity: 0; transition: opacity var(--t2) linear; }
.chain.chain-p .ghost-t { font-size: 11px; }
.stage[data-s="2"] .chain .ghost, .stage[data-s="3"] .chain .ghost, .stage[data-s="4"] .chain .ghost,
.stage[data-s="2"] .chain .ghost-t, .stage[data-s="3"] .chain .ghost-t, .stage[data-s="4"] .chain .ghost-t { opacity: 1; }
/* a reading of figures that do not share a scale: each its own number (v2.2) */
.stats { display: flex; flex-wrap: wrap; gap: 20px clamp(40px, 7vw, 120px); padding: 6px 0 4px; }
.stt-l { display: block; font-family: var(--mono); font-size: var(--f13); letter-spacing: .04em; text-transform: uppercase; color: var(--gray); }
.stt-v { display: block; margin-top: 8px; font-size: clamp(34px, 3.6vw, 48px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* About's record: the key to its marks (v2.2) */
.rc-key { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 18px; }
.rc-key i { display: inline-block; background: var(--ink); }
.rc-key i.kp { width: 2px; height: 10px; border-radius: 1px; }
.rc-key i.kd { width: 7px; height: 7px; border-radius: 50%; margin-left: 12px; }
@media (max-width: 599px) { .rc-key { display: none; } }
/* the career on a phone: each bar sits on a faint track of the whole span (v2.2) */
.tlp .mt::before { content: ""; position: absolute; left: 0; right: 0; top: 8.5px; height: 1px; background: var(--rule); }
/* a reading drawn in the site's line (v2.2) */
.rd-fig.rd-draw { max-width: 760px; }
.rd-draw .dw { max-width: 760px; }
.rd-draw .dw-n { display: none; }
@media (max-width: 599px) { .rd-draw .dw-wide { display: none; } .rd-draw .dw-n { display: block; } }
/* Alexa Shopping's hero: a voice order on an Echo Dot, legible at any width (v2.2) */
.dw.ex .ex-ring { fill: #19b5e6; }
.dw.ex .ex-top { fill: #262626; }
.dw.ex .ex-btn { fill: #3d3d3d; }
.dw.ex .ex-mic { fill: #555; }
.dw.ex .ex-k { font-family: var(--mono); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; fill: var(--gray); }
.dw.ex .ex-q { font-size: 38px; font-weight: 500; letter-spacing: -0.01em; fill: var(--ink); }
.dw.ex .ex-a { font-size: 34px; fill: var(--ink); }
.dw.ex .ex-kp { font-size: 13px; }
.dw.ex .ex-q.ex-p { font-size: 25px; }
.dw.ex .ex-a.ex-p { font-size: 23px; }
.rc-key i.ke { width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }

/* v2.3: each role's result is a label on its bar, in the type the site uses for values, not a mono note floating beside it */
.tl-note { top: calc(50% - 9px); transform: translateY(-100%); font-family: var(--font); font-size: var(--f13); line-height: 1.2;
  color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tl-row.on .tl-note { color: var(--ink); }

/* v2.3: Halo Body's body model (today) and its outline at the slider's floor */
.dw .bodf { stroke-width: 1.3; }
.dw .bodl { stroke-width: 1.6; }

/* v2.3: Map View's Control card: no floating hint once a device is shown switched; the card's switch */
.stage.hinting .tap { opacity: 0; }
.ctl rect.tgt { fill: #4a4944; transition: fill var(--t2) linear; }
.ctl .tg.on rect.tgt { fill: #ffd25a; }
.ctl .tgk { fill: #fff; transition: transform var(--t2) var(--out); }
.ctl .tg.on .tgk { transform: translateX(12px); }

/* ---------- Contact (6 November 2026): the end paper. The page is a sheet that lifts off a warm end paper at its end:
   main carries the paper and a rounded lower edge with one soft shadow; the footer holds still beneath it (sticky), so
   the last scroll reveals it. No script and no scroll handling. The address leads in quiet type with a copy control;
   the profiles and the site's three pages share its row, each under one of the page's three columns on a laptop. */
:root { --end: #efede7; --end-2: #e4e1d9; --end-3: #d8d5cc; --lift: clamp(18px, 2vw, 28px); }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; position: relative; z-index: 1; background: var(--paper); padding-bottom: clamp(56px, 6vw, 112px);
  border-radius: 0 0 var(--lift) var(--lift); box-shadow: 0 1px 0 rgba(20, 18, 12, .05), 0 22px 44px -24px rgba(20, 18, 12, .28); }
.ft { --gray: #5f5e58; position: sticky; bottom: 0; z-index: 0; margin-top: calc(-1 * var(--lift)); background: var(--end); color: var(--ink);
  padding-top: calc(var(--lift) + clamp(36px, 3.2vw, 48px)); padding-bottom: calc(clamp(36px, 3.2vw, 48px) + env(safe-area-inset-bottom, 0px)); }
.ft-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 56px); align-items: baseline; }
.ft-mail { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--f22); letter-spacing: -0.012em; line-height: 1.25; }
.mailto { position: relative; display: inline-block; min-width: 0; color: var(--ink); text-decoration: none; }
.mailto .mt { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - .04em);
  background-size: 0% 1px; transition: background-size var(--t2) var(--out); }
@media (hover: hover) and (pointer: fine) { .mailto:hover .mt { background-size: 100% 1px; } }
.mailto:active { opacity: .6; transition: none; }
/* the copy shows what it copied: the site's own selection (ink ground, paper type) sweeps across the address and lifts */
.mailto::after { content: attr(data-t); position: absolute; inset: 0 -.08em; padding: 0 .08em; background: var(--ink); color: var(--paper);
  clip-path: inset(0 100% 0 0); pointer-events: none; }
.ft-mail.sw .mailto::after { clip-path: inset(0 0 0 0); transition: clip-path 420ms cubic-bezier(.3, .7, .2, 1); }
.ft-mail.sw.out .mailto::after { clip-path: inset(0 0 0 100%); transition: clip-path 320ms cubic-bezier(.6, 0, .4, 1); }
.cpi { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--gray); cursor: pointer;
  transition: background var(--t1) linear, color var(--t1) linear, transform var(--t1) var(--out); }
@media (hover: hover) and (pointer: fine) { .cpi:hover { background: var(--end-2); color: var(--ink); } }
.cpi:active { background: var(--end-3); color: var(--ink); transform: scale(.94); transition: none; }
.cpi:focus-visible { outline-offset: 1px; border-radius: 50%; }
.cpi .g { grid-area: 1 / 1; width: 16px; height: 16px; stroke-width: 1.35; transition: opacity var(--t1) linear, transform var(--t2) var(--out); }
.cpi .g-check { opacity: 0; transform: scale(.4); stroke-width: 1.7; }
.cpi.done { background: var(--ink); color: var(--paper); pointer-events: none; }
.cpi.done .g-copy { opacity: 0; transform: scale(.4); }
.cpi.done .g-check { opacity: 1; transform: none; }
.ft-prof { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: var(--f15); }
.ft-prof .xl { min-height: 44px; color: var(--ink-2); }
.ft-prof .xl .g { width: 11px; height: 11px; color: var(--gray); }
@media (hover: hover) and (pointer: fine) { .ft-prof .xl:hover, .ft-prof .xl:hover .g { color: var(--ink); } }
.ft-nav { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: var(--f13); }
.ft-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gray); transition: color var(--t1) linear; }
@media (hover: hover) and (pointer: fine) { .ft-nav a:hover { color: var(--ink); } }
.ft-nav a:active { opacity: .6; transition: none; }
@media (max-width: 1199px) {
  .ft-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mail mail" "prof nav"; row-gap: 6px; }
  .ft-mail { grid-area: mail; } .ft-prof { grid-area: prof; } .ft-nav { grid-area: nav; justify-self: end; }
}
@media (max-width: 599px) {
  .ft-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mail" "prof" "nav"; row-gap: 2px; }
  .ft-mail { font-size: 19px; }
  .ft-nav { margin-top: 6px; justify-self: start; }
}
@media (max-width: 359px) { .ft-mail { font-size: 17px; letter-spacing: -0.008em; } }
@media (prefers-reduced-motion: reduce) { .ft-mail.sw .mailto::after, .ft-mail.sw.out .mailto::after { transition: none; } }
@media (forced-colors: active) { main { border-bottom: 1px solid CanvasText; } }
@media print {
  body { display: block; } main { box-shadow: none; border-radius: 0; padding-bottom: 0; }
  .ft { position: static; margin: 0; padding: 16px 0 0; background: none; } .cpi, .ft-nav, .ft-prof .g { display: none; }
}