/* The wordmark's face, self-hosted Anybody (wordmark.js injects it too). The headline is Syne since 2026-10-31. */
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%;
  font-display: block; src: url('assets/fonts/anybody-variable-latin.woff2') format('woff2');
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--void); color: var(--fg1);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  min-height: 100vh; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; clip: auto; z-index: 10000; background: var(--navy-mid); padding: 10px 14px; border: 1px solid var(--border-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(1280px, calc(100vw - 32px)); margin: 0 auto; }

/* The header and the footer are the site's shared ones (components/site-header.js, site-footer.js; 2026-10-31). */

/* shared bits */
.eyebrow {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg3);
}
.sec { padding: clamp(72px, 11vh, 128px) 0 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 5vh, 56px); }
.sec-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 0.98; margin-top: 14px;
}
.sec-lede { color: var(--fg2); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; max-width: 58ch; }

/* RECEIPT: real numbers */
.receipt {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.receipt-cell { padding: clamp(18px, 2.4vw, 30px); border-right: 1px solid var(--border); background: var(--surface); }
.receipt-cell:last-child { border-right: 0; }
.receipt-num {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(34px, 4vw, 58px); line-height: 1; color: var(--fg1);
}
.receipt-label { margin-top: 10px; color: var(--fg2); font-size: 14px; line-height: 1.45; }
.receipt-row + .receipt-row { margin-top: 12px; }
.receipt-cap { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.receipt-models { margin-top: 12px; display: grid; gap: 8px; }
.model { display: grid; grid-template-columns: 120px minmax(0, 1fr) 52px; gap: 12px; align-items: center; font-size: 14px; color: var(--fg2); }
.model b { font-weight: 500; color: var(--fg1); }
.model-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.model-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.model-bar.is-codex span { background: var(--lavender); }
.model-n { font-family: var(--font-code); font-size: 12px; text-align: right; color: var(--fg3); }
.receipt-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; margin-top: 1px; background: var(--border); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 4px 4px; overflow: hidden; }
.receipt-foot > div { background: var(--surface); padding: clamp(18px, 2.4vw, 30px); }

.receipt-unit { font-size: 0.42em; letter-spacing: 0; margin-left: 0.25em; color: var(--fg2); font-weight: 600; }
.receipt-cell--streak .receipt-num { color: var(--fg-accent); }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 4px; width: max-content; max-width: 100%; }
.heat i, .heat-key i { display: block; width: clamp(10px, 1.25vw, 16px); aspect-ratio: 1; border-radius: 3px; background: var(--border); }
/* The squares grow with their column (up to 14 week columns, 13 gaps), capped so the grid
   balances the split beside it. Browsers without container units keep the line above. */
.receipt-foot > div:first-child { container-type: inline-size; }
.heat i { width: clamp(10px, calc((100cqi - 52px) / 14), 22px); }
.heat i.is-pad { background: transparent; }
.heat i[data-l="1"], .heat-key i[data-l="1"] { background: color-mix(in srgb, var(--accent) 28%, var(--navy-mid)); }
.heat i[data-l="2"], .heat-key i[data-l="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--navy-mid)); }
.heat i[data-l="3"], .heat-key i[data-l="3"] { background: color-mix(in srgb, var(--accent) 74%, var(--navy-mid)); }
.heat i[data-l="4"], .heat-key i[data-l="4"] { background: var(--accent); }
.heat i.is-streak, .heat-streak-key i { box-shadow: inset 0 -2px 0 var(--lavender); }
.heat i.is-busiest { outline: 1.5px solid var(--fg1); outline-offset: 1px; }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.heat-legend[hidden] { display: none; }
.heat-key { display: inline-flex; gap: 3px; }
.heat-key i { width: 10px; }
.heat-streak-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.heat-streak-key i { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--border); }
.site-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.site-counts dt { font-size: 13px; color: var(--fg2); }
.site-counts dd { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--fg1); margin-top: 4px; }
@media (max-width: 560px) { .site-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* STEPS */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.step { padding: 24px clamp(14px, 1.6vw, 22px) 0 0; border-right: 1px solid var(--border); padding-left: clamp(14px, 1.6vw, 22px); }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; }
.step-n { font-family: var(--font-code); font-size: 12px; color: var(--fg-accent); letter-spacing: 0.1em; }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -0.01em; margin: 12px 0 10px; line-height: 1.15; }
.step p { color: var(--fg2); font-size: 15px; line-height: 1.55; }
.step code { font-family: var(--font-code); font-size: 12.5px; color: var(--fg3); word-break: break-word; }
.step a { color: var(--fg-accent); border-bottom: 1px solid currentColor; transition: color .2s; }
.step a:hover { color: var(--fg1); }
.step a code { color: inherit; }
.step--lead h3 { color: var(--fg-accent); }

/* BUILDS */
.builds { display: grid; gap: clamp(56px, 9vh, 104px); }
.build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: 28px; border-top: 1px solid var(--border); }
.build:nth-child(even) .build-media { order: -1; }
/* The screenshots always get the wide track. Flipping only the order handed builds 02 and 04 the
   narrow one, and the Driftwood pair shrank to 250px a shot. */
@media (min-width: 801px) { .build:nth-child(even) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.build-idx { font-family: var(--font-code); font-size: 12px; color: var(--fg3); letter-spacing: 0.14em; }
.build h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.03em; line-height: 1; margin: 12px 0 16px; }
.build-what { font-size: 17px; line-height: 1.55; color: var(--fg1); max-width: 46ch; }
.build-facts { margin-top: 22px; display: grid; gap: 0; border-top: 1px solid var(--border); }
.fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.5; }
.fact dt { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); padding-top: 3px; }
.fact dd { color: var(--fg2); }
.build-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; font-family: var(--font-ui); font-size: 14px; color: var(--fg-accent); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.build-link:hover { color: var(--fg1); }
.build-private { margin-top: 22px; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
/* What a build does that's worth a second look, numbered like the "never" list. */
.build-feats { list-style: none; margin-top: 22px; border-top: 1px solid var(--border); counter-reset: feat; }
.build-feats li { position: relative; padding: 14px 0 14px 36px; border-bottom: 1px solid var(--border); }
.build-feats li::before { counter-increment: feat; content: '0' counter(feat); position: absolute; left: 0; top: 17px; font-family: var(--font-code); font-size: 12px; color: var(--fg-accent); }
.build-feats h4 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--fg1); }
.build-feats p { margin-top: 6px; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.build-feats + .build-facts { margin-top: 0; border-top: 0; }

/* Before sits above after, like the stacked builds: side by side each shot got half a column, too
   small to read the hand-drawn flows or either Driftwood screen. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pair-arrow { font-family: var(--font-code); color: var(--fg3); font-size: 18px; line-height: 1; justify-self: center; }
.shot { margin: 0; }
.shot-frame { background: var(--navy-mid); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.shot-frame img { width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg3); }
.shot--phone .shot-frame { max-width: 220px; margin: 0 auto; border-radius: 18px; }
.shot--phone figcaption { text-align: center; }
.shots-stack { display: grid; gap: 14px; }

/* Enlarge: the script turns each frame into a button that opens the shot in a dialog. */
.shot-zoom { position: relative; display: block; width: 100%; padding: 0; font: inherit; color: inherit; cursor: zoom-in; transition: border-color .2s; }
.shot-zoom:hover { border-color: var(--border-strong); }
.shot-zoom-hint {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 4px; color: var(--fg1);
  background: color-mix(in srgb, var(--void) 80%, transparent); border: 1px solid var(--border-strong);
  opacity: 0; transition: opacity .2s;
}
.shot-zoom:hover .shot-zoom-hint, .shot-zoom:focus-visible .shot-zoom-hint { opacity: 1; }
@media (hover: none) { .shot-zoom-hint { opacity: .9; } }
.zoom {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: 72px clamp(16px, 4vw, 48px) clamp(16px, 4vh, 40px);
  background: color-mix(in srgb, var(--void) 94%, transparent); color: var(--fg1);
}
.zoom[open] { display: grid; place-items: center; }
.zoom::backdrop { background: transparent; }
.zoom-fig { display: grid; justify-items: center; gap: 12px; max-width: 100%; }
.zoom-pan { max-width: 100%; }
.zoom-fig img {
  width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 150px);
  background: var(--navy-mid); border: 1px solid var(--border-strong); border-radius: 6px; cursor: zoom-out;
}
.zoom-fig figcaption { text-align: center; }
.zoom-close {
  position: fixed; top: 14px; right: 16px;
  font-family: var(--font-code); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg1); background: transparent; border: 1px solid var(--border-strong);
  border-radius: 2px; padding: 0 16px; min-height: 44px; cursor: pointer;
}
.zoom-close:hover { border-color: var(--accent); color: var(--fg-accent); }
/* Phones: fitting a landscape shot to the screen width is no bigger than the page already shows it,
   so it opens at its own size (capped by the screen height) and pans sideways. */
@media (max-width: 700px) {
  .zoom { padding-inline: 0; }
  .zoom-fig { width: 100%; }
  .zoom-pan { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .zoom-fig img { max-width: none; margin-inline: auto; }
  .zoom-fig figcaption { padding-inline: 16px; }
}
.zoom[open] .zoom-fig { animation: zoom-in .32s cubic-bezier(.16,1,.3,1); }
@keyframes zoom-in { from { opacity: 0; transform: scale(.97); } }
html:has(.zoom[open]) { overflow: hidden; }

/* SETUP + LIMITS */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.ledger { list-style: none; border-top: 1px solid var(--border); }
.ledger li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.5; }
.ledger .k { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); padding-top: 3px; }
.ledger .v { color: var(--fg2); }
.ledger .v a { color: var(--fg-accent); border-bottom: 1px solid currentColor; }
.never { list-style: none; border-top: 1px solid var(--border); counter-reset: never; }
.never li { padding: 16px 0 16px 44px; border-bottom: 1px solid var(--border); position: relative; font-size: 17px; line-height: 1.45; color: var(--fg1); }
.never li::before { counter-increment: never; content: '0' counter(never); position: absolute; left: 0; top: 19px; font-family: var(--font-code); font-size: 12px; color: var(--fg-accent); }
.never li span { display: block; margin-top: 4px; font-size: 14px; color: var(--fg2); }

/* FOOTER */

/* RESPONSIVE */
@media (max-width: 1000px) {
  .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .step { border-right: 0; padding-left: 0; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .step--lead { grid-column: 1 / -1; }
  .receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-cell:nth-child(2) { border-right: 0; }
  .receipt-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 800px) {
  .sec-head, .wa-hero-lede, .build, .two, .receipt-foot { grid-template-columns: minmax(0, 1fr); }
  .build:nth-child(even) .build-media { order: 0; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .receipt { grid-template-columns: minmax(0, 1fr); }
  .receipt-cell { border-right: 0; border-bottom: 1px solid var(--border); }
  .receipt-cell:last-child { border-bottom: 0; }
  .fact, .ledger li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .model { grid-template-columns: 96px minmax(0, 1fr) 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom[open] .zoom-fig { animation: none; }
}
@media print {
  .shot-zoom-hint { display: none; }
}

/* With AI: a product walkthrough with a visible account of Lucy's contribution. */
html { scroll-padding-top: 96px; }
.wrap { width: min(1280px, calc(100% - 64px)); }
[hidden] { display: none !important; }
.wa-hero { padding-top: clamp(120px, 14vh, 156px); }
.wa-opening { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: 26px; }
.wa-title { font-family: 'Anybody', var(--font-display); font-size: clamp(42px, 5.4vw, 78px); font-weight: 560; font-variation-settings: 'wdth' 85; line-height: 1.08; letter-spacing: -0.04em; }
.wa-title > span { display: block; }
.wa-title > span:nth-child(2) { color: var(--fg-accent); }
.wa-title .wa-word { display: inline-block; white-space: nowrap; }
.wa-title .wa-letter { display: inline-block; text-align: center; font-variation-settings: 'wdth' 85, 'wght' 560; }
.wa-title .wa-letter { transition: font-variation-settings 100ms linear; }
@media (prefers-reduced-motion: reduce) {
  .wa-title .wa-letter { transition: none; }
  .wa-title .wa-letter { font-variation-settings: 'wdth' 85, 'wght' 560 !important; }
}
.wa-intro p { color: var(--fg1); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
.wa-intro p + p { color: var(--fg2); font-size: 15px; margin-top: 14px; }
.wa-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; min-height: 48px; background: var(--fg-accent); color: var(--void); font-family: var(--font-ui); font-size: 14px; font-weight: 600; margin-top: 26px; border-radius: 4px; }
.wa-cta:hover { background: var(--fg1); }
.wa-text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--fg2); font-size: 14px; margin-top: 6px; }
.wa-text-link:hover { color: var(--fg1); }
.wa-ownership { display: grid; grid-template-columns: 1.3fr 1fr 1.5fr; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); margin-top: 44px; padding: 20px 0; gap: 32px; }
.wa-ownership dt { font-family: var(--font-code); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.wa-ownership dd { font-size: 14px; line-height: 1.5; color: var(--fg2); margin-top: 7px; }
.sec { padding-top: clamp(72px, 9vw, 120px); }
.sec-title { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; text-wrap: balance; }
.sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 36px; }
.today-feature { padding-top: 68px; }
.tour { border-top: 1px solid var(--border-strong); padding-top: 24px; }
.tour.is-enhanced { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 2.3fr); gap: 28px; align-items: start; }
.tour-nav { display: grid; gap: 0; }
.tour-tab { display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; gap: 12px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 22px 14px 22px 0; color: var(--fg2); cursor: pointer; font: inherit; min-height: 88px; }
.tour-tab:first-child { border-top: 1px solid var(--border); }
.tour-number { font-family: var(--font-code); font-size: 11px; padding-top: 4px; }
.tour-tab strong { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 17px; line-height: 1.25; }
.tour-tab small { display: block; font-size: 13px; line-height: 1.5; margin-top: 7px; }
.tour-arrow { opacity: 0; }
.tour-tab[aria-selected="true"] { color: var(--fg1); border-bottom-color: var(--fg-accent); }
.tour-tab[aria-selected="true"] .tour-number, .tour-tab[aria-selected="true"] .tour-arrow { color: var(--fg-accent); }
.tour-tab[aria-selected="true"] .tour-arrow { opacity: 1; }
.tour-tab:hover { color: var(--fg1); background: var(--surface); }
.tour-note { font-family: var(--font-code); font-size: 10px; letter-spacing: .07em; line-height: 1.8; color: var(--fg3); margin-top: 24px; }
.tour-panel + .tour-panel { margin-top: 40px; }
.is-enhanced .tour-panel { margin-top: 0; }
.tour .shot-frame { border-radius: 6px; padding: 8px; background: var(--navy-mid); }
.tour .shot-frame img { border-radius: 2px; }
.shot figcaption { line-height: 1.6; font-size: 10px; }
.tour-explanation { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: 28px; padding-top: 22px; }
.tour-explanation h3 { font-family: var(--font-ui); font-size: 17px; line-height: 1.4; font-weight: 600; }
.tour-explanation p { font-size: 15px; color: var(--fg2); line-height: 1.6; max-width: 60ch; }
.today-foot { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); padding: 24px 0; font-size: 13px; line-height: 1.6; color: var(--fg2); }
.today-foot a { flex-shrink: 0; color: var(--fg-accent); text-decoration: underline; text-underline-offset: 4px; }
.decision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding: 32px 0; border-top: 1px solid var(--border); }
.decision:last-child { border-bottom: 1px solid var(--border); }
.decision-title h3 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; max-width: 20ch; margin-top: 16px; text-wrap: balance; }
.decision-evidence { display: grid; gap: 20px; }
.decision-evidence div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; }
.decision-evidence dt { font-family: var(--font-code); font-size: 10px; line-height: 1.7; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); padding-top: 3px; }
.decision-evidence dd { font-size: 15px; line-height: 1.6; color: var(--fg2); }
.decision-evidence a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 4px; }
.builds { gap: 72px; }
.build-link + .build-link { margin-left: 18px; }
.build:nth-child(even) .build-media { order: 0; }
.pair { grid-template-columns: minmax(0, 1fr); }
.build-media { max-width: 100%; }
.step p { font-size: 14px; }
.steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.step h3 { font-size: 20px; }
.step a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }
.usage-section { padding-top: 72px; }
.usage-details { border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); }
.usage-details summary { cursor: pointer; padding: 24px 0; font-family: var(--font-ui); font-size: 20px; font-weight: 600; }
.usage-details summary span { font-family: var(--font-code); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg3); margin-left: 24px; }
.usage-content { padding: 24px 0 36px; }
.receipt-cell { min-width: 0; }
.receipt-label { max-width: 27ch; }
.receipt-cell--streak { background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
/* the room above the shared footer, as the old footer's margin left it */
#main { padding-bottom: 72px; }
:focus-visible { outline-color: var(--fg-accent); }

@media (max-width: 1100px) {
  .wa-opening { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; }
  .wa-title { font-size: clamp(42px, 5.8vw, 64px); }
  .tour.is-enhanced { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
  .tour-explanation { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step--lead { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 40px); }
  .wa-opening { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wa-title { font-size: clamp(36px, 7.3vw, 64px); }
  .wa-intro { max-width: 58ch; }
  .wa-intro .wa-cta { display: inline-flex; margin-right: 20px; }
  .wa-ownership { gap: 20px; grid-template-columns: 1fr 1fr; }
  .wa-ownership div:last-child { grid-column: 1 / -1; }
  .sec-head, .decision { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tour.is-enhanced { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tour-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour-tab { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 10px; min-height: 104px; border-top: 1px solid var(--border); }
  .tour-tab strong { font-size: 14px; }
  .tour-tab small, .tour-arrow, .tour-note { display: none; }
  .tour-tab[aria-selected="true"] { background: var(--surface); }
  .tour-explanation { gap: 8px; }
  .decision-title h3 { max-width: 26ch; }
  .today-foot { flex-direction: column; gap: 10px; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .wa-hero { padding-top: 112px; }
  .wa-title { font-size: clamp(30px, 7.7vw, 42px); letter-spacing: -.035em; }
  .wa-intro p { font-size: 17px; }
  .wa-intro .wa-cta { display: flex; margin-right: 0; }
  .wa-ownership { margin-top: 26px; padding: 18px 0; gap: 18px; }
  .wa-ownership dd { font-size: 13px; }
  .today-feature { padding-top: 56px; }
  .sec { padding-top: 64px; }
  .sec-head { margin-bottom: 24px; }
  .sec-title { font-size: 34px; }
  .tour { padding-top: 16px; }
  .tour .shot-frame { padding: 3px; }
  .decision { padding: 26px 0; }
  .decision-evidence div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { padding-top: 20px; padding-bottom: 20px; }
  .receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-cell { padding: 18px 13px; border-bottom: 0; }
  .receipt-cell:nth-child(odd) { border-right: 1px solid var(--border); }
  .receipt-cell:nth-child(even) { border-right: 0; }
  .receipt-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .receipt-num { font-size: 29px; }
  .receipt-label { font-size: 13px; }
  .usage-details summary { font-size: 18px; }
  .usage-details summary span { display: block; margin: 10px 0 0 19px; }
  #main { padding-bottom: 48px; }
}
@media (max-width: 360px) {
  .tour-tab { padding-inline: 7px; }
  .model { grid-template-columns: 86px minmax(0, 1fr) 42px; gap: 7px; font-size: 12px; }
}
/* A quieter reading path: summaries first, supporting material on request. */
body { --wa-muted: color-mix(in srgb, var(--fg1) 76%, var(--void)); }
.wrap { width: min(1120px, calc(100% - 80px)); }
.wa-opening { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.wa-title { font-size: clamp(42px, 4.45vw, 64px); line-height: 1.14; }
.wa-intro p { max-width: 38ch; line-height: 1.7; }
.wa-intro p + p { font-size: 16px; color: var(--wa-muted); margin-top: 18px; }
.wa-text-link { color: var(--wa-muted); }
.sec { padding-top: 112px; }
.sec-head { gap: 40px; margin-bottom: 40px; align-items: start; }
.sec-title { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.14; max-width: 22ch; }
.sec-lede { font-size: 17px; line-height: 1.75; color: var(--wa-muted); max-width: 48ch; padding-top: 22px; }
.tour { padding-top: 0; border-top: 0; }
.tour.is-enhanced { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.tour-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tour-tab, .tour-tab:first-child { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; min-height: 64px; padding: 16px 8px; border-top: 0; border-bottom: 2px solid var(--border); }
.tour-tab strong { font-size: 17px; line-height: 1.4; }
.tour-tab[aria-selected="true"] { background: transparent; border-bottom-color: var(--fg-accent); color: var(--fg-accent); }
.tour-number { padding-top: 3px; }
.tour-arrow { display: none; }
.tour-explanation { display: block; max-width: 62ch; padding-top: 20px; }
.tour-explanation p { font-size: 17px; line-height: 1.75; color: var(--wa-muted); }
.tour-explanation h3 { margin-bottom: 12px; }
.is-enhanced .tour-explanation h3 { display: none; }
.shot figcaption { font-family: var(--font-body); font-size: 13px; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--wa-muted); }
.today-foot { font-size: 14px; color: var(--wa-muted); border-bottom: 0; padding-top: 24px; padding-bottom: 0; }
.today-foot a { min-height: 44px; display: inline-flex; align-items: center; }
.decisions .sec-head, [aria-labelledby="builds-title"] > .sec-head, [aria-labelledby="how-title"] > .sec-head { display: block; }
.decision { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; padding: 36px 0; }
.decision-title h3 { font-size: clamp(25px, 2.3vw, 32px); line-height: 1.25; margin-top: 14px; }
.decision-copy p { font-size: 17px; line-height: 1.75; color: var(--wa-muted); max-width: 52ch; }
.decision-copy a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-size: 15px; color: var(--fg-accent); text-decoration: underline; text-underline-offset: 4px; }
.builds { gap: 64px; }
.build, .build:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 64px; row-gap: 24px; padding-top: 36px; }
.build h3 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; }
.build-what { font-size: 17px; line-height: 1.75; }
.build-proof { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--wa-muted); max-width: 48ch; }
.build-link { min-height: 44px; margin-top: 16px; font-size: 15px; border-bottom: 0; text-decoration: underline; text-underline-offset: 5px; }
.build-details { grid-column: 1 / -1; }
.build-details summary, .reading-details summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-size: 16px; line-height: 1.5; color: var(--fg-accent); }
.build-details-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px 64px; padding: 20px 0 12px; }
.build-details .build-facts { margin-top: 0; border: 0; }
.build-details .fact { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 0 24px; border: 0; }
.fact dd { font-size: 16px; line-height: 1.75; color: var(--wa-muted); }
.shot--phone .shot-frame { max-width: 180px; }
.steps { grid-template-columns: minmax(0, 1fr); }
.step, .step:first-child { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px; border-right: 0; border-bottom: 1px solid var(--border); padding: 24px 0; }
.step h3 { margin: 0; font-size: 20px; line-height: 1.4; }
.step p { font-size: 16px; line-height: 1.75; color: var(--wa-muted); max-width: 52ch; }
.step-n { padding-top: 4px; }
.reading-details { border-top: 1px solid var(--border-strong); }
.reading-details > summary, .usage-details > summary { padding: 22px 0; font-size: 18px; font-weight: 500; color: var(--fg1); }
.reading-details-content { padding: 24px 0 40px; }
.reading-details .sec-title { font-size: 30px; }
.reading-details .ledger li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ledger .v, .never li span { font-size: 16px; line-height: 1.7; color: var(--wa-muted); }
.usage-section { padding-top: 0; }
.usage-content .sec-lede { padding-top: 0; }
main [id] { scroll-margin-top: 96px; }
@media (max-width: 1000px) {
  .wa-opening { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .wa-title { font-size: clamp(36px, 7vw, 64px); }
  .wa-intro { max-width: 52ch; }
  .wa-intro p { max-width: none; }
  .wa-intro .wa-cta { display: inline-flex; margin-right: 20px; min-width: 220px; }
  .build, .build:nth-child(even), .build-details-content { column-gap: 40px; }
  .decision { gap: 40px; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 48px); }
  .wa-hero { padding-top: 112px; }
  .sec { padding-top: 80px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 28px; }
  .sec-lede { padding-top: 0; }
  .tour.is-enhanced { gap: 20px; }
  .tour-nav { gap: 10px; }
  .tour-tab, .tour-tab:first-child { min-height: 60px; gap: 6px; padding: 12px 4px; grid-template-columns: minmax(0, 1fr); }
  .tour-tab strong { font-size: 15px; }
  .tour-number { display: none; }
  .tour .shot-frame { padding: 3px; }
  .today-foot { gap: 8px; }
  .decision { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 30px 0; }
  .decision-copy a { margin-top: 8px; }
  .build, .build:nth-child(even), .build-details-content { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .builds { gap: 48px; }
  .build-details-content { padding-top: 16px; }
  .build-details summary { color: var(--wa-muted); }
  .step, .step:first-child { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 16px; }
  .step p { grid-column: 2; }
  .reading-details-content .two { gap: 48px; }
  .usage-section { padding-top: 0; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 40px); }
  .wa-title { font-size: clamp(30px, 8vw, 42px); line-height: 1.16; }
  .wa-opening { margin-top: 24px; gap: 18px; }
  .wa-intro p, .wa-intro p + p { font-size: 16px; line-height: 1.75; }
  .wa-intro .wa-cta { display: flex; margin: 24px 0 0; }
  .wa-text-link { margin-top: 8px; }
  .sec-title { font-size: 32px; line-height: 1.15; }
  .sec-lede, .tour-explanation p, .decision-copy p, .build-what { font-size: 16px; }
  .tour-explanation { padding-top: 16px; }
  .tour-nav { gap: 6px; }
  .tour-tab strong { font-size: 14px; }
  .build-link + .build-link { margin-left: 16px; }
}

@media print {
  .tour-nav, .wa-cta, .wa-text-link, .wa-motion { display: none !important; }
  .wa-title .wa-letter { font-variation-settings: 'wdth' 85, 'wght' 560 !important; }
  .tour.is-enhanced { display: block; }
  .tour-panel[hidden] { display: block !important; margin-top: 32px; }
  .wa-hero { padding-top: 0; }
}

/* ── How it changed: three dated stages, each with one verbatim proof ──
   Same rhythm as the steps (mono marker, thin dividers). A dot on the top rule marks each
   stage; the current one is filled. */
.shift { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.shift-stage { position: relative; padding: 28px clamp(18px, 2.4vw, 36px) 4px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.shift-stage:first-child { padding-left: 0; }
.shift-stage:last-child { border-right: 0; padding-right: 0; }
.shift-stage::before { content: ''; position: absolute; top: -5px; left: clamp(18px, 2.4vw, 36px); width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg3); }
.shift-stage:first-child::before { left: 0; }
.shift-stage--now::before { background: var(--fg-accent); border-color: var(--fg-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg-accent) 22%, transparent); }
.shift-when { font-family: var(--font-code); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-accent); }
.shift-stage h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -.01em; line-height: 1.15; margin: 12px 0 10px; }
.shift-stage > p:not(.shift-when):not(.shift-proof) { color: var(--fg2); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.shift-proof { margin: auto 0 0; padding: 18px 0 0 14px; border-left: 2px solid var(--border-strong); font-size: 14.5px; line-height: 1.55; color: var(--fg1); }
.shift-stage--now .shift-proof { border-left-color: var(--fg-accent); }
.shift-src { display: block; margin-bottom: 6px; font-family: var(--font-code); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
@media (max-width: 800px) {
  .shift { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--border); margin-left: 4px; }
  .shift-stage, .shift-stage:first-child, .shift-stage:last-child { padding: 0 0 32px 24px; border-right: 0; }
  .shift-stage::before, .shift-stage:first-child::before { top: 4px; left: -5px; }
  .shift-proof { margin-top: 16px; }
}

/* Project evidence replaces the AI-consumption receipt. */
.outcomes-section .sec-head { display: block; }
.outcome-field { border-top: 1px solid var(--border-strong); padding-top: 28px; }
.outcome-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.outcome-heading h3, .outcome-check h3 { font: 600 24px/1.3 var(--font-display); letter-spacing: -.02em; }
.outcomes-section a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg-accent); font: 15px/1.5 var(--font-body); text-decoration: underline; text-underline-offset: 4px; }
.outcome-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin: 28px 0 24px; }
.outcome-metrics > div { display: flex; flex-direction: column; gap: 12px; }
.outcome-metrics dt { font-size: 16px; line-height: 1.6; color: var(--fg1); max-width: 30ch; }
.outcome-metrics dd { order: -1; margin: 0; font: 600 clamp(46px, 5vw, 64px)/1 var(--font-display); letter-spacing: -.045em; color: var(--fg1); }
.outcome-context { max-width: 80ch; color: var(--wa-muted); font: 15px/1.75 var(--font-body); }
.outcome-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 36px; }
.outcome-check { border-top: 1px solid var(--border); padding-top: 28px; }
.outcome-number { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin: 18px 0; font: 600 36px/1.2 var(--font-display); letter-spacing: -.03em; }
.outcome-number span { font: 15px/1.5 var(--font-body); letter-spacing: 0; color: var(--fg1); }
.outcome-check > p:not(.outcome-number) { font: 16px/1.75 var(--font-body); color: var(--wa-muted); max-width: 48ch; }
.outcome-check a { margin-top: 16px; }
.outcome-date { margin-top: 28px; color: var(--wa-muted); font: 13px/1.7 var(--font-body); }
@media (max-width: 650px) {
  .outcome-heading { display: block; }
  .outcome-heading a { margin-top: 8px; }
  .outcome-metrics { gap: 24px; }
  .outcome-metrics dt { font-size: 14px; }
  .outcome-checks { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ── Capabilities first (2026-10-09) ──
   How I work is four verbs (Design, Constrain, Evaluate, Ship) in the existing row layout,
   Evaluate carrying the most proof and lit as the lead; each build states one architecture
   decision; tool names live only in the dated setup list. */
.build-why { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--border-strong); font-size: 14.5px; line-height: 1.6; color: var(--fg2); }
.build-why span { display: block; margin-bottom: 4px; font-family: var(--font-code); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
.tools-note { margin-top: 12px; font-size: 14px; color: var(--fg3); }
/* The home page's With AI tiles link to each build here (#today, #build-agent, #build-habitabull,
   #build-driftwood); the fixed nav must not cover the heading they land on. */
#today, .build[id] { scroll-margin-top: 88px; }

/* ── The bench (2026-10-24, look test A "the workshop") ───────────────────────────────────────────────────────
   His workbench as a pixel room in the hero's palette, drawn by components/workshop-bench.js on a 720 x 260
   canvas; every overlay is placed in those room pixels (--c is a station's x). Dark in both themes, like About.
   Phones (<= 760px) zoom to a 260-wide window of the room and slide it (--pan) to the chosen station. */
.ws { padding-top: clamp(40px, 6vh, 72px); display: grid; gap: 18px; }
.ws-room { position: relative; aspect-ratio: 720 / 260; max-width: 100%; overflow: hidden; border: 1px solid #1e2033; border-radius: 6px; background: #090b1e; }
.ws-pan { position: absolute; inset: 0; transform: translateX(var(--pan, 0%)); transition: transform .45s steps(6, end); }
.ws-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ws-him { position: absolute; width: calc(106 / 720 * 100%); height: auto; top: calc(88 / 260 * 100%); left: calc(var(--x, 47) / 720 * 100%); image-rendering: pixelated; pointer-events: none; transition: left .5s steps(7, end); }
.ws-him.hop { animation: ws-hop .5s steps(6, end); }
@keyframes ws-hop { 0%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(-14%); } }
.ws-sign, .ws-counter, .ws-stamp { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-family: 'Press Start 2P', var(--font-code), monospace; white-space: nowrap; }
.ws-sign { left: calc(273 / 720 * 100%); top: calc(37 / 260 * 100%); color: #ced6fc; font-size: clamp(5px, .85vw, 9px); }
.ws-counter { left: calc(446 / 720 * 100%); top: calc(50 / 260 * 100%); color: #66a3ff; font-size: clamp(6px, 1.05vw, 11px); text-shadow: 0 0 4px #3f659e; }
.ws-stamp { left: calc(619 / 720 * 100%); top: calc(61 / 260 * 100%); transform: translate(-50%, -50%) rotate(-9deg); padding: .25em .4em; border: 2px solid #c29eff; color: #c29eff; font-size: clamp(5px, .9vw, 9px); opacity: .35; }
.ws-stamp.thump { opacity: 1; animation: ws-thump .35s steps(4, end); }
@keyframes ws-thump { from { transform: translate(-50%, -50%) rotate(-9deg) scale(1.8); } to { transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }
.ws-stations { position: absolute; inset: 0; }
.ws-station { position: absolute; top: calc(18 / 260 * 100%); height: calc(220 / 260 * 100%); width: calc(150 / 720 * 100%); left: calc((var(--c) - 75) / 720 * 100%); padding: 0; border: 0; background: transparent; cursor: pointer; }
.ws-station:hover { background: rgba(236, 240, 255, .05); }
.ws-station:focus-visible { outline: 2px solid #b8d6ff; outline-offset: -3px; }
.ws-tag { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding-bottom: .4em; color: #5c649e; font: clamp(6px, 1vw, 10px)/1 'Press Start 2P', var(--font-code), monospace; text-transform: uppercase; white-space: nowrap; }
.ws-station[aria-selected=true] .ws-tag { color: #ecf0ff; text-shadow: 0 0 6px #66a3ff; }
.ws-step { display: none; }
/* The card: About's pixel window, typed; dark in both themes */
.ws-card { color: #ecf0ff; }
/* Scroll walks the bench (workshop-bench.js, .ws-track.is-walk; Lucy, 2026-10-25): the bench holds under the nav while
   the scroll chooses its station. Every station's card shares one cell, the hidden ones invisible but holding their
   height, so the bench never changes size; the room scales down (--ws-room-max) when that is what it takes to fit. */
.ws-track.is-walk { position: relative; }
.ws-track.is-walk > .ws { position: sticky; }
.ws-track.is-walk .ws-room { width: min(100%, calc(var(--ws-room-max, 100000px) * 720 / 260)); }
/* the walk measures the bench as it fits it, so the room's size never transitions: styles.css's reduced-motion rule gives
   everything a 0.01 ms transition, which left the measure reading the old size and the fit chasing its own tail */
.ws-track .ws-room { transition: none !important; }
.ws-track.is-walk .ws-card { display: grid; }
.ws-track.is-walk .ws-card > .ws-panel { grid-area: 1 / 1; margin: 0; }
.ws-track.is-walk .ws-card > .ws-panel[hidden] { display: grid !important; visibility: hidden; }   /* over the page's [hidden] rule */
.ws-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 24px 26px; background: repeating-linear-gradient(180deg, #0e122e 0 3px, #0b0f27 3px 6px); box-shadow: inset 3px 3px #2f3352, inset -3px -3px #05060f;
  clip-path: polygon(0 9px, 3px 9px, 3px 3px, 9px 3px, 9px 0, calc(100% - 9px) 0, calc(100% - 9px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 9px, 100% 9px, 100% calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) 100%, 9px 100%, 9px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 9px), 0 calc(100% - 9px)); }
.ws-panel + .ws-panel { margin-top: 12px; }
.ws-name { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.ws-num { color: #66a3ff; font: 12px/1 'Press Start 2P', var(--font-code), monospace; }
.ws-verb { color: #ecf0ff; font: 18px/1 'Press Start 2P', var(--font-code), monospace; text-transform: uppercase; text-shadow: 0 0 8px #3f659e; }
.ws-line { min-height: 4.8em; margin: 0; max-width: 46ch; color: #ced6fc; font-size: 18px; line-height: 1.6; }
.is-live .ws-line::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -.12em; background: #66a3ff; animation: ws-blink .84s steps(1, end) infinite; }
@keyframes ws-blink { 50% { opacity: 0; } }
.ws-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font: 12px/1.6 var(--font-code); letter-spacing: .04em; }
.ws-links a { display: inline-flex; align-items: center; min-height: 32px; color: #a4cbff; }
.ws-proof { display: grid; gap: 14px; align-content: start; padding-left: 22px; border-left: 3px solid #1e2033; }
.ws-proof h3 { margin: 0; color: #aebfdb; font: 700 11px/1.3 var(--font-code); letter-spacing: .14em; text-transform: uppercase; }
.ws-proof p { margin: 0; color: #ced6fc; font-size: 15px; line-height: 1.55; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ws-chips li { padding: 5px 8px; background: #142133; box-shadow: inset 2px 2px #213452; color: #ced6fc; font-size: 12.5px; line-height: 1.3; }
.ws-figs { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 0; }
.ws-figs dt { color: #ecf0ff; font: 18px/1.15 'Press Start 2P', var(--font-code), monospace; }
.ws-figs dd { margin: 6px 0 0; max-width: 18ch; color: #aebfdb; font-size: 13px; line-height: 1.4; }
.ws-proof .ws-fine { color: #8c98bd; font-size: 12.5px; }
/* Five builds and the tools line */
.ws-builds { display: grid; gap: 18px; padding-top: clamp(48px, 7vh, 80px); }
.ws-build-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ws-build.ws-build-creature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(100px, 180px) minmax(0, 1fr); gap: 24px; align-items: center; }
.ws-build-creature img { width: 100%; height: auto; image-rendering: pixelated; }
.ws-creature { display: block; position: relative; cursor: ew-resize; touch-action: pan-y; }
.ws-creature:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 4px; }
.ws-creature canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; visibility: hidden; }
.ws-creature.is-looping img { visibility: hidden; }
.ws-creature.is-looping canvas { visibility: visible; }
@media (max-width: 480px) { .ws-build.ws-build-creature { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; } }
.ws-build { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--border, #1e2033); border-radius: 6px; }
.ws-kicker { margin: 0; color: var(--fg-accent, #66a3ff); font: 8px/1.2 'Press Start 2P', var(--font-code), monospace; text-transform: uppercase; }
.ws-build h3 { margin: 0; color: var(--fg1); font: 700 19px/1.15 var(--font-display); }
.ws-build p:not(.ws-kicker) { margin: 0; color: var(--fg2); font-size: 14px; line-height: 1.5; }
.ws-build a { display: inline-flex; align-items: center; min-height: 32px; color: var(--fg-accent); font: 12px/1.6 var(--font-code); letter-spacing: .04em; }
.ws-tools { margin: 6px 0 0; max-width: 92ch; color: var(--fg2); font-size: 14px; line-height: 1.6; }
.ws-tools b { color: var(--fg1); font-weight: 600; }
/* The long version: the page as it was, folded */
.long-version { margin-top: clamp(40px, 6vh, 72px); border-top: 1px solid var(--border, #1e2033); }
.long-version > summary { list-style: none; cursor: pointer; }
.long-version > summary::-webkit-details-marker { display: none; }
.long-version > summary > .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 22px 0; color: var(--fg1); font: 700 clamp(20px, 2.2vw, 28px)/1.15 var(--font-display); }
.long-version > summary > .wrap::before { content: "+"; color: var(--fg-accent); font-family: var(--font-code); }
.long-version[open] > summary > .wrap::before { content: "–"; }
.long-version > summary small { color: var(--fg2); font: 400 14px/1.5 var(--font-body); }
.long-version > summary:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: -2px; }
@media (max-width: 860px) {
  .ws-panel { grid-template-columns: minmax(0, 1fr); }
  .ws-proof { padding: 16px 0 0; border-left: 0; border-top: 3px solid #1e2033; }
  .ws-build-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* zoom to a 260 x 260 window of the room; workshop-bench.js slides --pan to the chosen station */
  .ws-room { aspect-ratio: 1 / 1; }
  .ws-pan { inset: 0 auto 0 0; width: calc(720 / 260 * 100%); }
  .ws-sign { font-size: 9px; } .ws-counter { font-size: 12px; } .ws-stamp { font-size: 9px; } .ws-tag { font-size: 9px; }
  .ws-step { display: grid; place-items: center; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: rgba(9, 11, 30, .72); box-shadow: inset 2px 2px #2f3352, inset -2px -2px #05060f; color: #ecf0ff; font: 22px/1 var(--font-code); cursor: pointer; }
  .ws-prev { left: 8px; } .ws-next { right: 8px; }
  .ws-line { font-size: 16px; }
}
@media (max-width: 480px) { .ws-build-row { grid-template-columns: minmax(0, 1fr); } .ws-panel { padding: 18px; } }
/* Phones walk the bench too (workshop-bench.js .ws-track.is-story; Lucy, 2026-11-01: "force users to scroll through this
   before going down"): the room holds under the header on the page's own night, the four cards scroll up under it in
   order, the one it is on lit and the others quieter, and only that one keeps the typing cursor. */
.ws-track.is-story .ws-stick { position: sticky; z-index: 3; margin: 0 -4px; padding: 8px 4px 12px; background: var(--void); }
.ws-track.is-story .ws-stick .ws-room { width: min(100%, 38svh); margin-inline: auto; }   /* the cards keep most of the screen */
.ws-track.is-story .ws-card { display: grid; gap: 14px; margin-top: 6px; }
.ws-track.is-story .ws-card > .ws-panel + .ws-panel { margin-top: 0; }
.ws-track.is-story .ws-panel { transition: opacity .2s steps(3, end); }
.ws-track.is-story .ws-panel:not(.is-active) { opacity: .5; }
.ws-track.is-story .ws-panel:not(.is-active) .ws-line::after { display: none; }
@media (prefers-reduced-motion: reduce) { .ws-track.is-story .ws-panel { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ws-pan, .ws-him, .ws-him.hop, .ws-stamp.thump { transition: none; animation: none; } .is-live .ws-line::after { animation: none; } }

/* ── One of each (Lucy, 2026-10-31: her answers to the Design Consistency review). Declared last so it outranks the
   passes above. The tokens and classes live in colors_and_type.css; DESIGN.md, "Components", says when to use which. ── */
/* the page title: Syne, like every page's. A three-line statement, so it is sized to its column rather than to the
   88px title token. */
.wa-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.3vw, 62px); line-height: 1.08; letter-spacing: -0.03em; font-variation-settings: normal; }
@media (max-width: 760px) { .wa-title { font-size: clamp(30px, 7.6vw, 44px); } }
/* labels: the one label style */
.eyebrow, .build-idx, .step-n, .ws-proof h3, .shot figcaption, .decision-evidence dt, .shift-src, .build-why span, .usage-details summary span { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg3); }
.step-n { padding-top: 4px; }
.ws-kicker { margin: 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg3); }
/* his pixel window keeps its frame; its words are the site's: the number a label, the verb a card heading */
.ws-num { font: var(--type-label); letter-spacing: var(--track-label); color: var(--fg3); text-shadow: none; }
.ws-verb { font: var(--type-h3); letter-spacing: -0.01em; text-transform: none; color: var(--fg1); text-shadow: none; }
.ws-figs dt { font: 700 24px/1.1 var(--font-display); color: var(--fg1); }
/* the solid button: notched, signal blue */
.wa-cta { display: inline-flex; justify-content: flex-start; align-items: center; gap: 12px; min-height: 50px; padding: 0 20px; border: 0; border-radius: 0;
  background: var(--accent); color: var(--accent-on); font: var(--type-btn); letter-spacing: 0; clip-path: var(--notch); }
.wa-cta:hover { background: var(--blue-200); color: var(--accent-on); }
.wa-cta:focus-visible { outline: 3px solid var(--accent-on); outline-offset: -7px; }
/* small links: spaced caps */
.wa-text-link, .build-link, .ws-build a, .ws-links a, .decision-copy a, .outcome-heading a, .outcomes-section a, .today-foot a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0;
  font: var(--type-link); letter-spacing: var(--track-link); text-transform: uppercase; color: var(--fg-accent);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.wa-text-link:hover, .build-link:hover, .ws-build a:hover, .ws-links a:hover, .decision-copy a:hover, .outcome-heading a:hover, .outcomes-section a:hover, .today-foot a:hover,
.wa-text-link:focus-visible, .build-link:focus-visible, .ws-build a:focus-visible, .ws-links a:focus-visible, .decision-copy a:focus-visible, .outcome-heading a:focus-visible, .outcomes-section a:focus-visible, .today-foot a:focus-visible {
  color: var(--fg-accent); text-decoration-color: currentColor; }
.ws-links { font: var(--type-link); gap: 0 22px; }
/* a link inside a sentence: one underline, no second rule under it */
.step a, .ledger .v a, .decision-evidence a { color: var(--fg-accent); border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.step a:hover, .ledger .v a:hover, .decision-evidence a:hover { color: var(--fg1); }
/* tags: a plain line with dots, no boxes */
.ws-chips { gap: 0; }
.ws-chips li { padding: 0; background: none; box-shadow: none; color: #ced6fc; font: var(--type-tag); }
.ws-chips li + li::before { content: "\00b7"; margin: 0 .55em; color: var(--fg3); }
/* headings: section headings at the one size; card headings in two sizes */
.sec-title, .reading-details .sec-title { font: var(--type-h2); letter-spacing: -0.01em; max-width: 22ch; }
.build h3, .decision-title h3, .shift-stage h3, .outcome-heading h3, .outcome-check h3 { font: var(--type-h3); letter-spacing: -0.01em; }
.ws-build h3, .step h3, .tour-explanation h3 { font: var(--type-h3-sm); letter-spacing: 0; }
/* folds: the one "+ Read more" toggle (the case studies'); the long version keeps its name, with the same box */
.build-details summary, .reading-details > summary, .usage-details > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none;
  font: 400 13px/1.25 var(--font-code); letter-spacing: 0; color: var(--fg-accent); }
.build-details summary::-webkit-details-marker, .reading-details > summary::-webkit-details-marker, .usage-details > summary::-webkit-details-marker { display: none; }
.build-details summary::before, .reading-details > summary::before, .usage-details > summary::before, .long-version > summary > .wrap::before {
  content: ""; flex: none; align-self: center; width: 22px; height: 22px; background: var(--rm-plus); clip-path: var(--notch); }
.build-details[open] summary::before, .reading-details[open] > summary::before, .usage-details[open] > summary::before, .long-version[open] > summary > .wrap::before { content: ""; background: var(--rm-minus); }
.build-details summary:hover, .reading-details > summary:hover, .usage-details > summary:hover { color: var(--fg1); }
.long-version > summary > .wrap { align-items: center; }

/* ── Design's examples (Lucy, 2026-10-31: "add example of build plan in figma and etc") ────────────────────────────
   Under the station's line, in the order it names them: the hand-drawn flows, the FigJam flow, a build plan. Three
   whole pictures at one height, each as wide as its shape: they grow by their aspect ratio (--r) from a 2px basis (the
   frame's two borders), so every picture is k px tall, k = (row - gaps - borders) / the ratios' sum (--ex-sum). The row
   is capped so k stays at or under --ex-k (150px; at the page's width it comes to about 143).
   While the bench walks, every card takes the tallest one's height and the room gives way (workshop-bench.js fit()),
   and this card is now the tallest. So there k is also held by the screen's height, 0.94 x 100vh - 660px: that leaves
   the room about 220px on a short laptop window (it stops walking under 200), and on a 900px screen k is the full
   width's. Phones: one a row, the full width. */
.ws-ex { --ex-sum: 7.1967; --ex-k: 150px; grid-column: 1 / -1; grid-row: 2; display: flex; gap: 16px; align-items: flex-start; margin-top: -12px; width: min(100%, calc(var(--ex-k) * var(--ex-sum) + 38px)); }
.ws-track.is-walk .ws-ex { --ex-k: clamp(64px, calc(94vh - 660px), 150px); }
.ws-ex-item { flex: var(--r) 1 2px; min-width: 0; }
.ws-ex .shot-frame { border-radius: 4px; }
.ws-ex figcaption { margin-top: 8px; }
/* the build plan's caption is its source, the small link. Inline, so a narrow tile wraps it with the arrow on the last
   word, and its padding makes the 44px touch target without moving the line. */
.ws-ex .link-caps { display: inline; padding-block: 14px; }
@media (max-width: 760px) {
  .ws-ex { flex-direction: column; gap: 18px; width: 100%; margin-top: 0; }
  .ws-ex-item { flex: none; width: 100%; }
}
/* the enlarge cue sits in the top corner here, where the FigJam board and the plan's page are empty (bottom right, it
   covered the flow's last box on a phone) */
.ws-ex .shot-zoom-hint { top: 6px; right: 6px; bottom: auto; width: 26px; height: 26px; }