/* Sargo How lab kit: the site's own tokens (src/styles/base.css @ cdfe920), reset, header, the ◆ stop,
   and the site's scroll scheme (.rr parts with --ra/--rb in svh of a [data-rr] section's travel). */
@font-face { font-family: 'Hanken Grotesk'; src: url('../kit/fonts/hanken-grotesk.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../kit/fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: optional; }
@font-face { font-family: 'Space Mono'; src: url('../kit/fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: optional; }
:root {
  --canvas: #FFFFFF; --paper: #FAF7F2; --ghost: #F2EEE8; --hair: #E7E2DA;
  --ink: #17140F; --sec: #4A453E; --muted: #6F6A62;
  --terra: #B04A26; --gold: #E8B341; --teal: #177A71; --green: #1F7A4D; --brand: #FF6C36;
  --night: #16130F; --night-paper: #24201B; --night-hair: #3A352E; --night-ink: #F6F4F0; --night-muted: #A9A39A;
  --r-pill: 100px; --r-tile: 24px;
  --display: 'Hanken Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif; --body: var(--display);
  --mono: 'Space Mono', ui-monospace, monospace;
  --e-out: cubic-bezier(.22, 1, .36, 1); --e-inout: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(16px, 4.2vw, 64px); --header-h: 60px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 760; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
svg { display: block; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-inline: var(--gutter); }
.eyebrow { font: 700 13px/1.3 var(--mono); letter-spacing: .02em; color: var(--muted); }
.tag { display: inline-block; margin-left: .5em; padding: 1px 6px; border: 1px solid var(--hair); border-radius: 6px; font: 400 11px/1.4 var(--mono); color: var(--muted); vertical-align: 1px; }
.nw { white-space: nowrap; }
/* the ◆ full stop (the logo's rounded square, quarter-turned) */
.stop { display: inline-block; position: relative; width: .23em; height: .23em; margin-left: .06em; vertical-align: baseline; color: var(--stop-c, var(--brand)); }
.stop::before { content: ""; position: absolute; inset: 14.6%; background: currentColor; border-radius: 20%; transform: rotate(45deg); }
/* a free ◆ (the travelling dot) */
.gem { width: 14px; height: 14px; color: var(--brand); }
.gem::before { content: ""; position: absolute; inset: 14.6%; background: currentColor; border-radius: 20%; transform: rotate(45deg); }
/* header mock (fixed, as on the site) */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: 10px; padding-inline: var(--gutter); background: rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(23,20,15,.08); }
.hd__logo { font: 760 21px/1 var(--display); letter-spacing: -.04em; display: flex; align-items: baseline; }
.hd__logo .stop { --stop-c: var(--brand); }
.hd__app { margin-left: auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 1em; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 13px var(--body); }
.hd__menu { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid currentColor; font: 600 13px var(--body); }
.hd__prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: 0 50%; background: var(--brand); transform: scaleX(0); }
.sda .hd__prog { animation: kit-prog linear both; animation-timeline: scroll(root block); }
@keyframes kit-prog { to { transform: scaleX(1); } }
.lab-note { position: fixed; left: 0; bottom: 0; z-index: 60; padding: 2px 8px 3px; border-radius: 0 8px 0 0; background: #3B322A; color: #fff; opacity: .85; font: 9.5px/1.3 var(--mono); pointer-events: none; }

/* ── the scroll scheme (identical to the site's story.css §5 B20) ──
   A `.rr` part runs over [--ra, --rb] svh of its [data-rr] section's travel: 0 = the section's top edge at the
   top of the screen. With scroll-driven animations: a view timeline on the section, exit-crossing ranges.
   Without: the same keyframes paused and seeked by --p (svh), written by kit.js once per scroll event. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
.mo [data-rr] .rr { animation-timing-function: linear; animation-fill-mode: both; }
.mo.sda [data-rr] { view-timeline: var(--tl) block; }
.mo.sda [data-rr] .rr { animation-timeline: var(--tl); animation-range: exit-crossing calc(var(--ra) * 1svh) exit-crossing calc(var(--rb) * 1svh); }
.mo:not(.sda) [data-rr] .rr { animation-duration: calc((var(--rb) - var(--ra)) * 1s); animation-delay: calc((var(--ra) - var(--p, -999)) * 1s); animation-play-state: paused; }
/* each [data-rr] section names its own timeline: style="--tl: --how" (the kit sets it from data-rr) */

/* ── context: the end of the network (previous scene), simplified ── */
.s-net { position: relative; height: 200svh; isolation: isolate; }
.net__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.net__top { position: absolute; left: 0; right: 0; top: 0; padding-top: calc(var(--header-h) + 2svh); }
.net__h { font: 760 34px/34px var(--display); letter-spacing: -.04em; max-width: 12ch; }
.net__m { margin-top: 10px; font: 500 15px/1.4 var(--body); color: var(--sec); max-width: 32ch; }
.net__fig { position: absolute; left: 0; right: 0; top: 38svh; height: 44svh; }
.net__fig svg { width: 100%; height: 100%; }
.net__you { position: absolute; left: 50%; top: 60svh; margin: -7px 0 0 -7px; }
/* ── context: the next scene's headline (in flow), where How hands the ◆ on ── */
.s-merch { position: relative; padding: 14svh 0 18svh; }
.merch__h { margin-top: 10px; font: 760 34px/34px var(--display); letter-spacing: -.04em; max-width: 11ch; }
.merch__m { margin-top: 10px; font: 500 15px/1.4 var(--body); color: var(--sec); max-width: 34ch; }
.merch__row { display: flex; gap: 12px; margin-top: 28px; overflow: hidden; padding-inline: var(--gutter); }
.offer { flex: none; width: 150px; padding: 14px; border: 1.5px solid var(--ink); border-radius: 18px; }
.offer b { display: block; font: 700 12px/1.3 var(--mono); color: var(--muted); }
.offer span { display: block; margin-top: 6px; font: 300 30px/1 var(--display); letter-spacing: -.03em; }
.offer small { display: block; margin-top: 6px; font: 400 11px/1.3 var(--mono); color: var(--muted); }
.offer--you { border-style: dashed; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── the lock (kit/lock.html) ── */
.lk { position: relative; width: var(--lk, 150px); aspect-ratio: 61.64 / 83.82; }
.lk__l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lk__shkw { position: absolute; inset: 0; }
.lk__shk path { fill: none; stroke: var(--brand); stroke-width: 3.4; stroke-linecap: round; }
.lk__shk--g path { stroke: var(--green); }
.lk__shk--g { opacity: 0; }
.lk__open path { fill: #fff; stroke: var(--brand); stroke-width: 3.4; }
.lk__shut > path:first-child { fill: var(--brand); stroke: var(--brand); stroke-width: 3.4; }
.lk__rel > path:first-child { fill: var(--green); stroke: var(--green); stroke-width: 3.4; }
.lk__shut, .lk__rel { opacity: 0; }
/* the shackle is drawn LOCKED (legs in the body); open lifts it by --lk-lift (9 gem units) */
.lk { --lk-lift: calc(var(--lk, 150px) * 9 / 61.64); }