/* The home page, one story told down the page. It opens on one statement
   on paper under a plain site bar; the statement moves up to head the
   essay; two organizations then go two ways (story.js), the AI-native one
   comes first, and why it starts observable. The whole page is light: the
   close is a Paper panel in an ink frame and the footer sits under an ink
   rule. One accent, electric blue, always means the agent. A light serif
   carries the statements, a sans the essay and the bar, a mono the labels. Under reduced motion or without script
   the article is an ordinary column showing each figure finished. */

:root {
  --paper: #FFFFFF;           /* page */
  --sheet: #FFFFFF;
  --wash: #F3F1EE;            /* Paper: panels, figure grounds, retrofit side */
  --ink: #111111;             /* text, frames, the owner */
  --soft: #5C5955;            /* Graphite: labels, secondary text (7:1) */
  --charcoal: #3D3B39;
  --stone: #8A8580;           /* non-text only */
  --fill: #D6D2CD;            /* Fog: tracks */
  --line: #D6D2CD;

  /* The accent, electric blue, always means the agent: its dots and tasks,
     the timeline's fill, the mark and the one primary action. It changes
     here and nowhere else; the canvases read it back. */
  --blue-100: #E6EDFF; --blue-200: #B6CBFF; --blue-500: #2F6BFF;
  --blue-600: #2B5EDB; --blue-700: #2752BC; --blue-800: #203E88;
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-active: var(--blue-700);
  --accent-tint: var(--blue-200);
  --danger: #B42318;           /* errors */
  --accent-text: var(--blue-700);     /* blue text on white (6.6:1) */
  --on-accent: #FFFFFF;               /* text on the accent: 16px and up, 500 */
  --cat-1: #2F6BFF; --cat-2: #1E2A4A; --cat-3: #2A9D8F;
  --cat-4: #F2B441; --cat-5: #8FA9D8; --cat-6: #A39E98;

  --serif: "Roboto Serif", Georgia, serif;   /* headlines (300), captions, stats */
  --sans: "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, monospace;

  --radius: 0;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  --step-build: clamp(2rem, 1.2rem + 2.1vw, 3.25rem);
  --m: clamp(20px, 4vw, 64px);
  --gap: clamp(12px, 1.6vw, 24px);
  --bar: 68px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Type grows with the screen: the root size, which every rem step is built
   on, is the reader's own (16px by default) up to a laptop, then rises with
   the width to a quarter more on a large monitor, so the essay and the
   figures' captions keep their proportion to the page. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); font-size: clamp(100%, calc(50% + 0.6vw), 125%); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.5;
  /* Figures stand on the baseline at cap height, so a number set in a
     sentence or a stat lines up with the words round it. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p, h1, h2, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.skip {
  position: absolute; left: var(--m); top: -100px; z-index: 60;
  background: var(--ink); color: var(--paper); padding: 12px 16px; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; padding-inline: var(--m); }

/* --------------------------------------------------------------- the bar */

/* A plain white bar: the mark and name, and one small action. No blur, no
   transparency, so it never floats as a panel of its own. */
.site-bar {
  --cta: 38px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--bar); padding-inline: var(--m);
  display: flex; align-items: center; gap: 0;
  background: var(--paper); color: var(--ink);
}
.brand { display: flex; align-items: center; font-weight: 600; font-size: 1.0625rem; text-decoration: none; letter-spacing: -0.01em; }
/* The logo stands as tall as the actions beside it. It is laid out as the
   lockup (logo-lockup.svg: mark, gap and wordmark in proportion), sized by
   its width, so where a narrow bar has no room for it at that height it
   shrinks whole instead of pushing the actions off the screen. */
.brand { flex: 0 1 calc(var(--cta) * 808.34 / 166.25); min-width: 0; }
.mark { flex: none; width: 20.57%; height: auto; aspect-ratio: 1; fill: var(--accent); }
.wordmark { flex: none; width: 73.61%; height: auto; margin-left: 5.82%; aspect-ratio: 595 / 166.25; fill: currentColor; }
/* The one way into the argument from the bar, a quiet ink frame beside the
   blue action. */
.bar-link {
  margin-left: auto; display: inline-flex; align-items: center; min-height: var(--cta); padding: 0 14px;
  box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
.bar-link:hover { background: var(--wash); }
.bar-link + .bar-cta { margin-left: 10px; }
.bar-cta {
  margin-left: auto; display: inline-flex; align-items: center; min-height: var(--cta); padding: 0 16px; border-radius: 0;
  background: var(--accent); color: var(--on-accent); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out);
}
.bar-cta:hover { background: var(--accent-hover); }
.bar-cta:active { background: var(--accent-active); }

/* ------------------------------------------------------------------ type */

.intro-title {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------- the article */

/* The story reads as one article, in order, with the same type throughout.
   Live on a wide screen (story.js) it moves in screens; the rules for that
   are under .is-live. Scaled up, the claim can run past the page's edge,
   and clipping it there keeps a phone from zooming out to fit it. */
.story { position: relative; overflow-x: clip; padding: 0 var(--m) clamp(96px, 14svh, 160px); }
.story p { font-family: var(--sans); font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.5; letter-spacing: -0.005em; }
.story p + p { margin-top: 0.75em; }
.story p b { font-weight: 600; }
.story h2 { margin-bottom: 0.45em; font-family: var(--serif); font-size: var(--step-build); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }

/* The essay: the claim in a left rail, the argument beside it, and the next
   heading waiting at the foot. */
.intro-stage {
  position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start;
  padding-top: calc(var(--bar) + clamp(24px, 4svh, 48px));
}
.story-rail { grid-column: 1 / span 3; }
.intro-title { font-size: var(--step-build); line-height: 0.95; transform-origin: 0 0; }
.intro-title .line { display: block; white-space: nowrap; }
.intro-screen { grid-column: 4 / -1; }
/* Its own layer above the cue at the foot of the screen, so an open citation
   card (which lives inside the essay) is never painted under it. */
.intro-essay { position: relative; z-index: 2; padding-top: 0.3em; max-width: 36em; }
.intro-essay p { font-size: clamp(1.125rem, 0.95rem + 0.45vw, 1.3125rem); }
/* What we build, said in the claim's own voice: Roboto Serif Light, a
   touch larger, in ink. No colour, rule or fill, so it never reads as a
   link or a button. */
.story .intro-claim { font-family: var(--serif); font-weight: 300; font-size: 1.12em; letter-spacing: -0.01em; color: var(--ink); text-decoration: underline 3px var(--accent); text-underline-offset: 0.2em; text-decoration-skip-ink: none; }
/* A source mark stays on the line with the word it follows. */
.keep { white-space: nowrap; }
.keep .cite-pop { white-space: normal; }
/* The next heading waits at the foot of the essay's screen, as a way on;
   read in order the heading itself follows, so there it is not shown. */
.intro-next {
  display: none; justify-items: center; gap: 12px; text-decoration: none;
  font-family: var(--serif); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1;
}
.intro-next svg { width: 22px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
@media (prefers-reduced-motion: no-preference) { .intro-next svg { animation: cue-jump 1.6s var(--ease-out) infinite; } }
.story .cue { display: none; }

/* Live, the claim fills the first screen and the essay has the second to
   itself, centred under the bar, the next heading at its foot. The claim is
   held in the rail across both (story.js scales it down into place as the
   first screen scrolls away); from the essay a scroll down glides on to the
   two organizations, and a scroll up from there glides back. */
.intro.is-live .intro-stage { padding-top: 0; }
.intro.is-live .story-rail { grid-row: 1 / span 2; align-self: stretch; padding-top: calc(var(--bar) + clamp(24px, 4svh, 48px)); }
.intro.is-live .intro-title { position: sticky; top: calc(var(--bar) + clamp(24px, 4svh, 48px)); }
.intro.is-live .intro-screen {
  grid-row: 2; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--bar) 0 clamp(120px, 18svh, 180px);
}
.intro.is-live .intro-stage::before { content: ""; grid-column: 1 / -1; grid-row: 1; height: 100svh; }
.intro.is-live .intro-essay { transform-origin: 0 50%; }
.intro.is-live .intro-next { display: grid; position: absolute; left: 0; right: 0; bottom: clamp(24px, 4svh, 44px); }
.intro.is-live .cue { display: grid; top: calc(100svh - 64px - clamp(20px, 4svh, 40px)); bottom: auto; }

/* The way down: an arrow that nudges, and nudges harder once the visitor
   has sat on the first screen for a while without scrolling. */
.cue {
  position: absolute; left: 50%; bottom: clamp(20px, 4svh, 40px);
  width: 48px; height: 64px; margin-left: -24px;
  display: grid; place-items: center;
  color: var(--ink);
  transition: opacity 300ms ease;
}
.cue svg { width: 22px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.cue.is-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .cue svg { animation: cue-nudge 2.4s var(--ease-out) infinite; }
  .cue.is-idle svg { animation: cue-jump 1.2s var(--ease-out) infinite; }
}
@keyframes cue-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(6px); } }
@keyframes cue-jump { 0%, 100% { transform: none; } 40% { transform: translateY(14px); } 60% { transform: translateY(4px); } }

.scene-pl { --hold: 3; }
.pl-open {
  background: var(--paper); color: var(--ink);
  padding: clamp(96px, 14svh, 160px) var(--m);
}
/* Live, the year fills its held stage, centred under the bar. */
.scene.is-live .pl-open {
  position: absolute; inset: 0;
  padding-block: var(--bar) 0;
  display: flex; align-items: center;
}
.pl-fit { width: 100%; max-width: 1180px; margin-inline: auto; transform-origin: 50% 50%; }

/* ------------------------------------------------- the two organizations */

/* The two organizations under what each is, then their three steps, then
   why AI-native first. At rest, and on a phone, these are in order: the
   heading, each diagram under its sentence, the steps, the focus. */
.roads { margin-top: clamp(64px, 11svh, 128px); }
.roads-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.roads-head h2 { margin: 0; }
.roads-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); row-gap: 12px; max-width: 1000px; margin: clamp(20px, 3svh, 36px) auto 0; }
/* Each road's words and drawing sit on the pair's two rows, so the drawings
   start level however long either text runs. */
.road { margin: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; min-width: 0; }
/* Each side under its name, then what it is. */
.story .road-say { font-size: clamp(1.1875rem, 1rem + 0.55vw, 1.5rem); line-height: 1.38; min-height: 4.2em; }
.story .road-say b { display: block; margin-bottom: 0.2em; }
.org { display: block; width: 100%; height: auto; aspect-ratio: 360 / 278; background: var(--wash); border-radius: 0; }
.road-n .org { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.story .fig-tag { justify-self: center; width: fit-content; margin: 4px 0 0; padding: 6px 10px; border: 1.5px solid currentColor; font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.observe-fig .fig-tag { margin: 0; }
/* Fig. 1's tag sits centred under the two drawings, and leaves with the
   retailer at the focus. */
/* Under each drawing, which road it is; it stays as the text above fades. */
.story .road-tag { margin: 0; text-align: center; font: 600 0.9375rem/1.3 var(--sans); color: var(--ink); }
.roads-pair > .fig-tag { grid-column: 1 / -1; margin-top: 2px; transition: opacity 400ms ease; }
.roads.is-focus .roads-pair > .fig-tag { opacity: 0; }
.roads-time { display: none; }
.roads-hold { display: none; }
/* The run (the phone dock and the steps) is not a box of its own on a wide screen. */
.roads-run { display: contents; }
.roads-dock { display: none; }
.roads-flow { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.roads-steps { grid-column: 1 / span 4; }
.roads-step { padding-block: clamp(40px, 8svh, 80px); }
#focus { scroll-margin-top: calc(var(--bar) + 24px); }
/* Each road's name heads its own paragraph of the step, on a line of its own. */
.roads-step b { display: block; }
.story .step-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; color: var(--soft); margin-bottom: 0.4em; }
/* What we build, the claim the two roads lead to and where "Our approach"
   lands: the statement large in the serif's semibold cut, with nothing
   round it, so it is read before the drawing beside it; the passage under
   it says where we start. */
.story .focus-lead {
  color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: calc(var(--step-lead) * 1.25);
  line-height: 1.16; letter-spacing: -0.02em; text-wrap: balance;
}
.story .focus-em { font-weight: inherit; }
.roads-focus { grid-column: 1 / span 6; padding-block: clamp(48px, 9svh, 112px) clamp(24px, 3svh, 36px); }
.focus-copy { padding-top: 24px; }
.story .observe-part h3 { margin-bottom: 0.6em; font-family: var(--serif); font-size: var(--step-lead); font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
/* Live, the focus starts most of a screen below the last step, so it never
   shows while that step is still being read; one gesture glides across
   the gap (story.js). It fills the rest of its screen under the bar, with
   the arrow to "How it works" at its foot, where the essay's way on is on
   the screen before; one gesture on glides to that heading. */
/* Its screen is one block in the middle of the page, between the bar and
   the arrow's room, which it keeps at both ends: on the left the AI-native
   company, moved from the timeline at the size it had there into the slot
   kept for it (story.js sizes it, --focus-fig-w, and draws nothing in it),
   with its key; on the right the statement over the passage. */
.roads.is-live .roads-focus {
  --room: calc(56px + 2 * clamp(24px, 4svh, 44px));
  grid-column: 1 / -1; margin-top: 80svh; min-height: calc(100svh - var(--bar) - 24px); padding-block: var(--room);
  display: grid; grid-template-columns: auto minmax(0, 38rem); grid-template-areas: "fig lead" "fig copy";
  column-gap: clamp(40px, 4vw, 72px); align-content: center; justify-content: center;
}
.roads.is-live .focus-fig { display: block; grid-area: fig; align-self: center; width: var(--focus-fig-w, 24rem); }
.roads.is-live .focus-fig .org { visibility: hidden; }
.roads.is-live .focus-lead { grid-area: lead; align-self: end; font-weight: 500; font-size: clamp(1.75rem, 1.05rem + 1.5vw, 2.75rem); }
.roads.is-live .focus-copy { grid-area: copy; align-self: start; padding-top: clamp(20px, 3svh, 32px); }
.story .roads.is-live .focus-copy p { font-size: clamp(1.25rem, 0.95rem + 0.75vw, 1.75rem); line-height: 1.45; }
.focus-fig { display: none; margin: 0; }
.focus-fig .org { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.story .focus-fig .road-tag { margin-top: 12px; }
.story .focus-fig .roads-key { justify-content: center; gap: 6px 18px; margin-top: 14px; font-size: 0.75rem; }
.roads.is-live .observe-next { position: absolute; left: 50%; bottom: clamp(24px, 4svh, 44px); margin: 0; translate: -50% 0; }

/* ------------------------------------------------------------ the harness */

/* The article goes on down the left; beside it a box holds while it is
   read, running a year of a business: tasks on a plane, the autonomy
   boundary over them, and the ontology building beneath (story.js). The box
   is a figure beside the text, not a screen of its own: it keeps to a
   reading size however wide the window. Its heading arrives where "Two
   ways to get there" does, and the box is as tall as fits under it with
   its tag and key, so the heading and the whole box are one screen. */
.observe {
  --head-top: clamp(16px, 3svh, 36px);
  --head-gap: clamp(20px, 3svh, 36px);
  --fig-h: calc(100svh - var(--bar) - var(--head-top) - 1.05 * var(--step-build) - var(--head-gap) - 112px);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; padding-block: 0 clamp(96px, 16svh, 180px);
}
/* An arrow leads down to it, as the intro's does to "Two ways to get there". */
.observe-next { grid-column: 1 / -1; justify-self: center; display: grid; padding: 8px; margin-top: clamp(24px, 4svh, 48px); color: inherit; }
.observe-next svg { width: 22px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
@media (prefers-reduced-motion: no-preference) { .observe-next svg { animation: cue-jump 1.6s var(--ease-out) infinite; } }
/* Its heading sits over both columns, centred like "Two ways to get there". */
.observe-head { grid-column: 1 / -1; grid-row: 1; padding-top: clamp(24px, 4svh, 48px); margin-bottom: var(--head-gap); }
.roads.is-live + .observe .observe-head { padding-top: 0; }
.observe-copy { grid-column: 1 / span 5; grid-row: 2; }
.observe-part + .observe-part { margin-top: clamp(56px, 12svh, 140px); }
/* The way on to the stores, framed in ink as "Our approach" is in the
   bar, its arrow leaning on when pointed at. */
.story p.observe-cta { margin-top: 24px; }
.observe-cta a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font: 500 1rem/1 var(--sans); text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
.observe-cta a:hover { background: var(--wash); }
.observe-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: transform 200ms var(--ease-out); }
.observe-cta a:hover svg, .observe-cta a:focus-visible svg { transform: translateX(4px); }
/* The box fills its columns, as wide as that height lets a 5:4 figure be,
   so on a large monitor it grows with the page rather than stopping at a
   laptop's size. */
.observe-fig { grid-column: 6 / -1; grid-row: 2; width: min(100%, calc(var(--fig-h) * 1.25)); margin: 0; justify-self: end; }
/* Under the box, the key on the left and Fig. 2's tag at the right edge,
   on one row and centred on each other. */
.observe-fig { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "box box" "key tag"; align-items: center; column-gap: 20px; row-gap: 12px; }
.observe-fig canvas { grid-area: box; }
.observe-fig .fig-tag { grid-area: tag; justify-self: end; }
.observe-fig .observe-key { grid-area: key; margin-top: 0; }
.js .observe-fig { position: sticky; top: calc(var(--bar) + clamp(16px, 4svh, 40px)); }
.observe-fig canvas { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; max-height: var(--fig-h); border-radius: 0; background: #F9F8F6; }
.observe-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.observe-key span::before { content: ""; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.ok-task::before { width: 8px; height: 8px; background: var(--accent); }
.ok-scope::before { width: 16px; height: 10px; border: 2px solid var(--ink); box-sizing: border-box; }
.ok-rise::before { width: 4px; height: 13px; background: var(--ink); }
.ok-ctx::before { width: 16px; height: 10px; border: 1px solid var(--ink); background: var(--wash); box-sizing: border-box; }

/* Live: the heading and the pair fill a held stage. As the steps come up
   the left, story.js shrinks the pair to the right and the timeline comes
   in under it; once the focus is read both drawings leave, and the focus
   has its own of the AI-native company as it ends up. */
.roads.is-live { margin-top: 0; }
.roads.is-live .roads-stage { position: sticky; top: 0; height: 100svh; overflow: clip; padding-top: calc(var(--bar) + clamp(16px, 3svh, 36px)); }
.roads.is-live .roads-head, .roads.is-live .road-say, .roads.is-live .roads-time { transition: opacity 400ms ease; }
.roads.is-live .roads-pair { transform-origin: 0 0; }
.roads.is-live .road { transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
/* The timeline under the pair: the step being read named large, over a
   track that fills in ink to it, each step a ring that fills when reached. */
.roads.is-live .roads-time { position: absolute; display: grid; gap: 14px; opacity: 0; }
.time-now { font-variant-numeric: lining-nums tabular-nums; font-family: var(--serif); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.time-spine { position: relative; height: 34px; }
.time-spine::before, .time-fill { content: ""; position: absolute; left: 0; top: 6px; height: 2px; border-radius: 0; }
.time-spine::before { right: 0; background: var(--fill); }
.time-fill { width: 0; background: var(--accent); }
.time-spine span { position: absolute; top: 20px; font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); white-space: nowrap; transition: color 300ms ease; }
.time-spine span::before { content: ""; position: absolute; top: -20px; box-sizing: border-box; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transition: background-color 300ms ease, border-color 300ms ease; }
.time-spine span:nth-of-type(1) { left: 0; }
.time-spine span:nth-of-type(1)::before { left: 0; }
.time-spine span:nth-of-type(2) { left: 50%; transform: translateX(-50%); }
.time-spine span:nth-of-type(2)::before { left: 50%; margin-left: -7.5px; }
.time-spine span:nth-of-type(3) { right: 0; }
.time-spine span:nth-of-type(3)::before { right: 0; }
.time-spine span.is-on { color: var(--ink); }
.time-spine span.is-on::before { background: var(--accent); border-color: var(--ink); }
/* The text runs up over the stage from its top; overlapping from this side
   keeps the stage inside its section, so it leaves when the section ends. */
.roads.is-live .roads-flow { position: relative; z-index: 1; margin-top: -100svh; }
.roads.is-live .roads-hold { display: block; height: 100svh; grid-column: 1 / -1; }
.roads.is-live .roads-step { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; transition: opacity 400ms ease; }
.roads.is-live .roads-step:not(.is-on) { opacity: 0.3; }
.roads.is-focus .road-r { opacity: 0; transform: translateY(-24px); }
/* The AI-native drawing moves to the focus on its own (story.js); the name
   under it stays behind, and the focus names it again under its slot, over
   the key. */
.roads.is-live .road-n .road-tag { transition: opacity 300ms ease; }
.roads.is-focus .road-n .road-tag { opacity: 0; }

/* Fig. 1's marks, in viewBox units. A function run by people is a ring; by
   an agent the owner still signs for, a blue ring round a blue dot; by an
   agent alone, a solid blue dot. The dots move, so their state
   changes ease rather than snap. */
.f-dot circle { transition: fill 300ms ease, stroke 300ms ease, r 300ms ease; }
.f-dot { transition: transform 500ms var(--ease-out), opacity 300ms ease; }
.f-dot.is-off { opacity: 0; }
.f-dot.is-own circle:first-child { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.f-dot.is-own circle + circle { fill: none; }
.f-dot.is-ask circle:first-child { fill: var(--paper); stroke: var(--accent); stroke-width: 1.6; }
.f-dot.is-ask circle + circle { fill: var(--accent); }
.f-dot.is-run circle:first-child { fill: var(--accent); stroke: var(--accent); stroke-width: 1.6; }
.f-dot.is-run circle + circle { fill: var(--accent); }
.f-k { font: 400 9px var(--mono); letter-spacing: 0.08em; fill: var(--soft); }
.f-ink { fill: var(--ink); }
.f-n { font: 300 28px var(--serif); font-variant-numeric: lining-nums tabular-nums; fill: var(--ink); }
.f-rule { stroke: var(--ink); stroke-width: 1; }
.f-track { fill: var(--fill); }
.f-ask { fill: var(--accent-tint); }
.f-run { fill: var(--accent); }
.f-ctx { fill: var(--ink); fill-opacity: 0.8; }
/* An autonomy envelope: the frame round functions agents run alone. */
.f-link { stroke: var(--ink); stroke-width: 1.5; transition: opacity 400ms ease; }
.f-env { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: miter; transition: opacity 400ms ease; }
/* The key heads the drawings and is set large enough to read first. */
.story .roads-key { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 4px; font: 400 0.875rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.roads-key span { display: inline-flex; align-items: center; gap: 9px; }
.roads-key span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.rk-own::before { border: 1.5px solid var(--ink); }
.rk-ask::before { border: 2px solid var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2.5px var(--paper); }
.rk-run::before { background: var(--accent); }
.roads-key .rk-env::before { width: 18px; height: 18px; border-radius: 0; border: 1.5px solid var(--ink); padding: 3.5px; background: var(--accent); background-clip: content-box; }
/* The same key goes with the drawings wherever they show: under the
   drawings and their tag when the two are first side by side, in the
   timeline over the steps, and under the focus's drawing; on
   a phone it sits under the docked drawings instead. Each copy shows only
   where its drawings do. It comes last in the pair, so the tag that stays
   with the drawings over the steps is not left apart from them as it goes. */
.roads-pair > .key-pair { grid-column: 1 / -1; justify-content: center; margin-top: 4px; }
.roads.is-live .key-pair { transition: opacity 400ms ease; }
.story .key-dock { display: none; }

/* ------------------------------------------------------------------ close */

/* The story ends on a black panel in an ink frame, inside the page's
   margins: who we run today, and who we are looking for, in white. Inside
   the frame a sparse grid of squares, like tasks, is faintly alive in white
   and light blue, brighter near the pointer (gridfield.js). It is drawn only
   with script; without it the panel is plain black. */
.ending { position: relative; overflow: clip; margin: 0 var(--m) clamp(64px, 10svh, 120px); background: #000; border: 2px solid var(--ink); }
.ending > section { position: relative; z-index: 1; }
.close-field { display: none; }
.js .close-field.is-on { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.close { color: #fff; padding-block: clamp(64px, 12svh, 140px); }
.close-copy { max-width: 46rem; }
.close-lead { font-family: var(--sans); font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
.close-title { margin-top: 0.6em; font-family: var(--serif); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; text-wrap: pretty; }
.close-copy .waitlist { margin-top: clamp(32px, 5svh, 56px); }
.waitlist { margin-top: clamp(32px, 5svh, 56px); }
.waitlist {
  display: flex; width: fit-content; align-items: center; min-height: 60px; padding: 0 30px; border-radius: 0; font-size: 1.25rem;
  background: var(--accent); color: var(--on-accent); font-weight: 500; text-decoration: none;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.waitlist:hover { background: var(--accent-hover); }
.waitlist:active { background: var(--accent-active); }

/* ---------------------------------------------------------------- landing */
/* The home page: the claim, large, and the way onto the waitlist, on one
   screen with the footer under it. */
.landing-page { display: flex; flex-direction: column; min-height: 100svh; }
.landing { display: flex; flex: 1; padding-top: var(--bar); }
.landing-inner { display: flex; flex-direction: column; justify-content: flex-end; padding-block: clamp(32px, 8svh, 96px); }
.landing-title {
  margin: 0; font-family: var(--serif); font-weight: 300; letter-spacing: -0.03em; line-height: 0.95;
  font-size: clamp(3.5rem, 1.5rem + 9vw, 10rem);
}
.landing-title .line { display: block; }
.landing .landing-cta { margin-top: clamp(28px, 5svh, 56px); }
@media (max-width: 480px) { .landing .landing-cta { width: 100%; justify-content: center; } }

/* /start: the same screen, its action a text to the agent. The number and
   the SMS disclosure sit under it as one caption: the disclosure has to stay
   under any number that invites a text, and it has to stay readable, but it
   is fine print. */
.start-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.start-fine { max-width: 46rem; margin: 20px 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--soft); text-wrap: balance; }
.start-fine a { color: inherit; text-decoration: underline 1px var(--line); text-underline-offset: 0.2em; }
.start-fine a:hover { color: var(--ink); text-decoration-color: currentColor; }
.start-fine .start-num { color: var(--ink); font-weight: 500; white-space: nowrap; }
/* The QR dialog is the waitlist's box (.wl) with the code in place of the
   form: square, ink on white with its quiet zone kept, sized to scan from a
   phone held at arm's length. */
.qr { width: min(440px, calc(100% - 32px)); }
.qr-frame { width: min(240px, 100%); margin: 24px 0 20px; padding: 16px; box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.qr-code { display: block; width: 100%; height: auto; }
.qr-num { font-weight: 500; color: var(--ink); white-space: nowrap; }

/* ---------------------------------------------------------------- waitlist */
/* The waitlist opens over the page: what we're doing, then an email. */
.wl {
  width: min(560px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 0; border: 0;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 24px 64px rgba(17, 17, 17, 0.18);
}
.wl::backdrop { background: rgba(17, 17, 17, 0.45); }
html.wl-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .wl[open] { animation: wl-in 220ms var(--ease-out); }
  .wl[open]::backdrop { animation: wl-fade 220ms ease; }
}
@keyframes wl-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes wl-fade { from { opacity: 0; } }
.wl-box { position: relative; padding: clamp(28px, 5vw, 44px); }
.wl-x {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.wl-x:hover { background: var(--wash); }
.wl-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wl-title { margin: 0 40px 0.5em 0; font-family: var(--serif); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; }
.wl-title:focus { outline: none; }
.wl-about p, p.wl-about { margin: 0 0 0.75em; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.wl-form { margin-top: 24px; }
.wl-label { display: block; margin-bottom: 8px; font: 400 0.8125rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.wl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wl-input {
  flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 14px; border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); color: var(--ink); font: 400 1.0625rem var(--sans);
}
.wl-input::placeholder { color: #8A8682; }
.wl-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.wl-submit {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border: 0; border-radius: 0;
  background: var(--accent); color: var(--on-accent); font: 500 1rem var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease;
}
.wl-submit:hover { background: var(--accent-hover); }
.wl-submit:active { background: var(--accent-active); }
.wl-submit:focus-visible, .wl-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-submit[disabled] { opacity: 0.6; cursor: progress; }
.wl-error { min-height: 1.4em; margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--danger); }
.wl-fine { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--soft); }
.wl-fine a { color: inherit; text-underline-offset: 0.15em; }
.wl-done .wl-submit, .wl-blocked .wl-submit { margin-top: 12px; }
.wl-who { font-weight: 600; word-break: break-all; }
/* The field only bots fill in. */
.wl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .wl-submit { flex: 1 1 100%; } }

/* ---------------------------------------------------------------- footer */

/* White under a 2px ink rule, its words set as labels. */
.foot { background: var(--paper); color: var(--ink); padding: 0 var(--m) 40px; }
.foot .wrap { padding-inline: 0; }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px; border-top: 2px solid var(--ink); padding-top: 28px; }
.foot-note { max-width: 36ch; font: 400 12px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 12px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.foot-links a { white-space: nowrap; text-decoration: none; color: var(--soft); transition: color 180ms var(--ease-out); }
.foot-links a:hover { color: var(--ink); }

/* ----------------------------------------------------------------- phone */

@media (max-width: 860px) {
  :root { --bar: 60px; }
  /* Two actions and the name fit a phone's bar when both are tight. */
  .brand { margin-right: 12px; }
  .site-bar { --cta: 34px; }
  .bar-link, .bar-cta { padding: 0 10px; font-size: 0.8125rem; white-space: nowrap; }
  .bar-link + .bar-cta { margin-left: 6px; }
  /* On a phone the article is in order: the claim alone and large on the
     first screen with the arrow under it, then the essay, then each
     diagram at the width of the screen under its sentence. */
  .story-rail, .intro-screen { grid-column: 1 / -1; }
  .story-rail {
    min-height: calc(100svh - var(--bar) - clamp(24px, 4svh, 48px));
    display: flex; align-items: flex-end; padding-bottom: clamp(112px, 18svh, 160px);
  }
  .intro-title { font-size: clamp(3rem, 14.5vw, 5.5rem); }
  .story .cue { display: grid; top: calc(100svh - 64px - clamp(20px, 4svh, 40px)); bottom: auto; }
  .intro-essay { margin-top: 0; }
  /* The essay is a screen of its own, so "Two ways to get there" starts
     below it rather than peeking under the last paragraph; a swipe that
     ends near a screen's top settles on it (the claim, the essay, the two
     ways), and the arrow slides there. */
  .intro-screen { min-height: calc(100svh - var(--bar)); display: flex; flex-direction: column; padding-block: 24px; }
  .intro-essay { margin-block: auto; }
  .intro-next { display: grid; justify-items: center; gap: 6px; margin-top: 28px; font-size: 1.5rem; }
  html { scroll-snap-type: y proximity; }
  .intro, .intro-screen, .roads { scroll-snap-align: start; }
  /* Past the two ways each part is a stop too: every step and the focus
     settle just under the dock (its height set by story.js), and "How it
     works" and the close under the bar. */
  .roads-step .step-n, .focus-lead { scroll-snap-align: start; scroll-margin-top: calc(var(--dock-h, 0px) + 16px); }
  .observe-head, .ending { scroll-snap-align: start; scroll-margin-top: 16px; }
  /* With script the page turns as slides instead (story.js), which glides
     there itself: snapping or smooth scrolling here would fight each frame.
     story.js spaces the slides, so the parts lose the space they keep
     between themselves here, and a block too tall for a screen has its
     type scaled by --fit. */
  html.slides { scroll-snap-type: none; scroll-behavior: auto; overscroll-behavior-y: none; }
  html.slides .intro-screen { display: block; min-height: 0; }
  html.slides .intro-essay { margin-block: 0; }
  html.slides .roads.is-dock .roads-dock { margin-bottom: 16px; }
  html.slides .roads-step, html.slides .roads-focus { padding-block: 0; }
  html.slides .focus-copy { padding-top: 24px; }
  html.slides .observe-next, html.slides .intro-next { display: none; }
  html.slides .story .road-say { min-height: 0; font-size: calc(1.1875rem * var(--fit, 1)); }
  /* Only the descriptions show here, so each road is a plain block rather
     than three grid rows whose empty two still keep their gaps. */
  html.slides .roads.is-dock .road { display: block; }
  html.slides .roads.is-dock .road + .road { margin-top: 16px; }
  html.slides .roads.is-dock .roads-dock { margin-top: 16px; }
  /* The drawings under the two ways are Fig. 1 here, docked; its tag would
     only push them off the screen they share with the text. */
  html.slides .roads-pair > .fig-tag { display: none; }
  html.slides .ending { margin-bottom: 24px; }
  html.slides .close { padding-block: 40px; }
  html.slides .story :is(.intro-essay, .roads-step, .focus-copy, .observe-part) p:not(.step-n) { font-size: calc(1.1875rem * var(--fit, 1)); }
  html.slides .story .observe-part h3 { font-size: calc(var(--step-lead) * var(--fit, 1)); }
  html.slides .story .focus-lead { font-size: calc(var(--step-lead) * 1.25 * var(--fit, 1)); }
  .story p { font-size: 1.1875rem; }
  .roads-pair { grid-template-columns: 1fr; row-gap: 12px; }
  .road + .road { margin-top: 20px; }
  .roads-steps, .roads-focus, .observe-copy, .observe-fig { grid-column: 1 / -1; }
  .observe { --fig-h: calc(100svh - var(--bar) - 7rem); }
  .observe-fig { grid-row: auto; }
  .js .observe-fig { position: static; margin-top: 24px; }
  /* Narrow, the box is taller than wide, so the ontology's entities have
     the height to sit apart. */
  .observe-fig canvas { aspect-ratio: 4 / 5; max-height: none; }
  /* Too narrow for the key and the tag side by side: the tag goes under
     the key, still at the right edge. */
  .observe-fig { grid-template-columns: minmax(0, 1fr); grid-template-areas: "box" "key" "tag"; }

  /* Docked: the two drawings and the timeline stick under the bar while
     the steps scroll past, then the AI-native drawing alone through the
     focus, and leave with the focus's last line. Sticky, so it moves with
     the page's own scroll rather than a frame behind it. The drawings above
     give way to it. */
  .roads.is-dock .roads-pair .org, .roads.is-dock .road-tag, .roads.is-dock .key-pair { display: none; }
  /* Docked, the key sits under the two drawings, small enough to leave the
     screen to the step being read. */
  .story .roads.is-dock .key-dock { display: flex; gap: 4px 14px; margin: 8px 0 0; font-size: 0.6875rem; letter-spacing: 0.04em; }
  .roads.is-dock .key-dock span { gap: 6px; }
  .roads.is-dock .key-dock span::before { width: 11px; height: 11px; }
  .roads.is-dock .key-dock .rk-ask::before { box-shadow: inset 0 0 0 2px var(--paper); }
  .roads.is-dock .key-dock .rk-env::before { width: 14px; height: 14px; padding: 2.5px; }
  .roads.is-dock .roads-run { display: block; grid-column: 1 / -1; }
  .roads.is-dock .roads-dock {
    display: block; position: sticky; top: var(--bar); z-index: 30; margin: 24px calc(-1 * var(--m)) 0;
    padding: 10px var(--m) 12px; background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .dock-pair .org { will-change: transform, opacity; }
  .dock-spine { overflow: hidden; }
  /* The two drawings side by side, each under its road's name, so the
     dock (with its track) leaves most of the screen to the step being
     read: each swipe through the steps turns a good part of one. */
  .dock-pair {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px; row-gap: 6px; align-items: end;
  }
  .dock-pair > :nth-child(1) { grid-area: 1 / 1; }
  .dock-pair > :nth-child(2) { grid-area: 2 / 1; }
  .dock-pair > :nth-child(3) { grid-area: 1 / 2; }
  .dock-pair > :nth-child(4) { grid-area: 2 / 2; }
  /* At the focus the AI-native drawing fills the pair and its name comes in
     under it (story.js places it). */
  .dock-pair { position: relative; }
  .dock-pair > .dock-name { position: absolute; left: 50%; top: 100%; translate: -50% 0; opacity: 0; white-space: nowrap; font: 600 0.8125rem/1.3 var(--sans); color: var(--ink); }
  .dock-pair .org {
    width: 100%; height: auto; max-height: 24svh; justify-self: center;
    aspect-ratio: 360 / 278; border-radius: 0; transform-origin: 50% 50%;
  }
  .dock-tag { font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
  /* Tall enough for its labels at any text size; story.js reads the height
     back when it folds the track away. */
  .dock-spine { height: calc(19px + 1.3 * 0.75rem); margin-top: 10px; }
  .dock-spine span { font-size: 0.75rem; line-height: 1.3; top: 18px; }
  .dock-spine span::before { width: 12px; height: 12px; top: -17px; border-width: 2px; }
  .dock-spine span:nth-of-type(2)::before { margin-left: -6px; }
  .roads.is-dock .roads-step { transition: opacity 300ms ease; }
  .roads.is-dock .roads-step:not(.is-on) { opacity: 0.35; }
}

/* ------------------------------------------------------------ citations */

/* A source in the text: a small numbered mark that opens a card with the
   source, a short summary and a link out (home.js). The card sits under the
   mark and is nudged back inside the page if it would run off an edge. */
.cite { position: relative; display: inline; }
.cite-mark {
  display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; margin-left: 0.2em; padding: 0 0.3em;
  border: 1px solid var(--ink); border-radius: 0; background: var(--sheet); color: var(--ink);
  font: 500 0.6em/1 var(--mono); vertical-align: 0.55em; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.cite-mark:hover, .cite-mark[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cite-pop {
  position: absolute; z-index: 30; top: calc(100% + 10px); left: 50%;
  transform: translateX(calc(-50% + var(--cite-shift, 0px)));
  display: grid; gap: 8px; width: min(400px, calc(100vw - 2 * var(--m)));
  padding: 18px 20px; border: 1.5px solid var(--ink); border-radius: 0; background: var(--sheet); color: var(--ink);
  font: 400 0.9375rem/1.5 var(--sans); letter-spacing: 0; text-align: left;
}
.cite-pop[hidden] { display: none; }
.cite-pop.is-up { top: auto; bottom: calc(100% + 10px); }
@media (prefers-reduced-motion: no-preference) { .cite-pop:not([hidden]) { animation: cite-in 160ms var(--ease-out); } }
@keyframes cite-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.cite-src { font: 400 12px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.cite-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; }
.cite-sum { color: var(--soft); }
/* A note of our own leads its card, in the text's own voice; the source
   behind it waits under "Read more", closed each time the card opens. */
.cite-note { font-family: var(--serif); font-size: 1.0625rem; font-weight: 300; line-height: 1.4; }
.cite-more {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 400 12px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}
.cite-more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 160ms ease; }
.cite-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.cite-more-body { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.cite-more-body[hidden] { display: none; }
.cite-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cite-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (max-width: 400px) {
  /* The whole logo and both actions on the narrowest phones: each a little
     smaller (the logo by shrinking into what is left) rather than the
     wordmark dropped. */
  .brand { margin-right: 8px; }
  .site-bar { --cta: 32px; }
  .bar-link, .bar-cta { padding: 0 8px; font-size: 0.75rem; }
  .bar-link + .bar-cta { margin-left: 4px; }
}
@media (max-width: 350px) {
  .bar-link, .bar-cta { padding: 0 6px; font-size: 0.6875rem; }
}