/* ==========================================================================
   site.css · johnjayasankar.com

   Porcelain and evergreen. A warm light ground with a faint dot grid,
   near-black ink, deep forest for weight, mint for what settled, amber for the
   human gate. Each system is told as a story: schematic interface windows on
   dotted stages, built from the same tokens as the page around them.

   tokens · base · type · controls · header · hero · showcase · stories · bays ·
   sections · home · labs · work · case · approach · about · 404 · footer ·
   overlays · motion · responsive · print
   ========================================================================== */

@font-face { font-family: "Inter"; src: url(/assets/fonts/inter-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- tokens --------------------------------------------------------------- */
:root {
  --ground: #f8f6f1;
  --ground-2: #f1efe9;
  --paper: #ffffff;
  --ink: #0f1712;
  --ink-2: #48524c;          /* 7.3:1 on the ground */
  --ink-3: #5f6862;          /* 5.2:1 on the ground, 4.9:1 on the mist */
  --tone: #6f7f75;           /* the quiet half of a heading: large text only */
  --line: rgba(28, 51, 38, .09);
  --line-2: rgba(28, 51, 38, .16);
  --forest: #1c3326;
  --forest-2: #1f6b4a;
  --forest-3: #13241b;
  --night: #0a140f;
  --on-dark: #f0f7f3;
  --on-dark-2: rgba(240, 247, 243, .74);
  --on-dark-3: rgba(240, 247, 243, .6);
  --mint: #a7f3d0;
  --mint-2: #6ee7b7;
  --mint-3: #34d399;
  --amber: #f4aa5c;
  --sky: #8abef0;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sh-1: 0 1px 2px rgba(28, 51, 38, .05);
  --sh-2: 0 1px 2px rgba(28, 51, 38, .05), 0 14px 32px -14px rgba(28, 51, 38, .22);
  --sh-3: 0 1px 2px rgba(28, 51, 38, .05), 0 18px 40px -20px rgba(28, 51, 38, .2), 0 44px 84px -44px rgba(28, 51, 38, .28);
  --ease: cubic-bezier(.32, .72, 0, 1);
  --wide: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --hdr: 72px;
  --sect: clamp(84px, 10vw, 140px);
  --inset: clamp(8px, 1.1vw, 16px);
  --dots: radial-gradient(circle at 1px 1px, rgba(240, 247, 243, .075) 1px, transparent 1.3px);
  --orb: radial-gradient(circle at 34% 28%, #f2fff8 0 7%, #bdf6da 18%, #34d399 40%, #1c6b4a 64%, #0f2a1d 100%);
  /* The glass already read its tint from a variable with a white fallback.
     Naming it here is what lets one line at the top of the dark section turn
     every pane on the site over, instead of forty rules each being told. */
  /* the facet chips: a dark ink on a tinted ground in daylight, the light
     end of the same hue at night, because the tint goes dark with the page */
  /* forest-2 fills thirty-four surfaces and inks seventeen more. A fill and
     an ink want opposite things when the page turns over, so they are two
     tokens now: this one is the ink, and --on-mint is the ink for the
     mint-tinted rungs, which composite light in daylight and mid-dark at
     night. */
  --accent-ink: #1f6b4a;
  --on-mint: #2f4d3e;
  /* how much mint a washed panel carries. Four tenths reads as a tint on
     paper; over a near-black page the same four tenths composites to a
     mid green that its own dark ink cannot be read on. */
  --mint-wash: .4;
  --chip-forest: #17593c;
  --chip-amber: #6b4410;
  --chip-sky: #1d4e78;
  --gl-rgb: 255, 255, 255;
  /* a shade off the first, for the panes that were sitting on their own
     near-white literal: the showcase, the segmented control, a case's side
     card, an embed bar and a stat */
  --gl-rgb-2: 248, 246, 241;
  --gl-tint: .55;
  --gl-rim: 255, 255, 255;
  /* the pale wash under the showcase, which was the one near-white literal
     large enough to light the whole page back up */
  --veil: rgba(252, 251, 248, .94);
}
/* the control: a moon on a light page, a sun on a dark one. Both faces ship in
   the markup so the button is legible before any script runs; this only picks
   which one is shown. */
.kbtn--theme { padding: 0 11px; }
.kbtn--theme .ico--sun { display: none; }
:root[data-theme="dark"] .kbtn--theme .ico--moon { display: none; }
:root[data-theme="dark"] .kbtn--theme .ico--sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kbtn--theme .ico--moon { display: none; }
  :root:not([data-theme="light"]) .kbtn--theme .ico--sun { display: block; }
}

/* ---- dark ----------------------------------------------------------------
   The palette already had a dark half: the hero band, the footer and every
   schematic are drawn on --night and --forest with --on-dark over them, and
   they have been since the site shipped. This section points the page tokens
   at that half rather than inventing a second palette.

   One inversion is not a token swap. In daylight a dark band is the loud thing
   on a pale page; at night a dark band on a dark page is nothing at all. So
   the bands lift instead: --forest and --night become a shade *above* the
   ground rather than below it, which keeps the figure-ground relationship the
   layout was composed around.

   `data-theme` wins over the media query so the toggle can disagree with the
   system, and the media query is written so it only applies when nothing has
   been chosen. */
:root[data-theme="dark"] {
  --ground: #080f0c;
  --ground-2: #0c1611;
  --paper: #111d17;
  --ink: #eef5f1;
  --ink-2: rgba(238, 245, 241, .84);
  --ink-3: rgba(238, 245, 241, .78);
  --accent-ink: #5fd6a0;
  --on-mint: #0b1711;
  --mint-wash: .82;
  --chip-forest: #6ee7b7;
  --chip-amber: #f4aa5c;
  --chip-sky: #8abef0;
  --tone: rgba(167, 243, 208, .52);
  --line: rgba(167, 243, 208, .13);
  --line-2: rgba(167, 243, 208, .22);
  /* the bands, lifted off the ground instead of sunk into it */
  --forest: #16271e;
  --forest-2: #277854;
  --forest-3: #101c16;
  --night: #0b1510;
  /* a shadow on a dark ground is a darker dark, which is nothing; depth comes
     from the lifted surface and its edge instead */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -14px rgba(0, 0, 0, .6);
  --sh-3: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .55), 0 44px 84px -44px rgba(0, 0, 0, .7);
  --dots: radial-gradient(circle at 1px 1px, rgba(167, 243, 208, .09) 1px, transparent 1.3px);
  /* see the note beside --gl-rgb: this is the whole glass system turning over */
  --gl-rgb: 17, 29, 23;
  --gl-rgb-2: 22, 36, 29;
  --gl-tint: .62;
  --gl-rim: 190, 240, 215;
  --veil: rgba(14, 24, 19, .94);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #080f0c;
    --ground-2: #0c1611;
    --paper: #111d17;
    --ink: #eef5f1;
    --ink-2: rgba(238, 245, 241, .84);
    --ink-3: rgba(238, 245, 241, .78);
    --accent-ink: #5fd6a0;
    --on-mint: #0b1711;
    --mint-wash: .82;
    --chip-forest: #6ee7b7;
    --chip-amber: #f4aa5c;
    --chip-sky: #8abef0;
    --tone: rgba(167, 243, 208, .52);
    --line: rgba(167, 243, 208, .13);
    --line-2: rgba(167, 243, 208, .22);
    --forest: #16271e;
    --forest-2: #277854;
    --forest-3: #101c16;
    --night: #0b1510;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -14px rgba(0, 0, 0, .6);
    --sh-3: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .55), 0 44px 84px -44px rgba(0, 0, 0, .7);
    --dots: radial-gradient(circle at 1px 1px, rgba(167, 243, 208, .09) 1px, transparent 1.3px);
      /* see the note beside --gl-rgb: this is the whole glass system turning over */
    --gl-rgb: 17, 29, 23;
    --gl-rgb-2: 22, 36, 29;
    --gl-tint: .62;
    --gl-rim: 190, 240, 215;
    --veil: rgba(14, 24, 19, .94);
    color-scheme: dark;
  }
}



/* ---- base ------------------------------------------------------------------ */

/* ---- the schematics are daylight islands ---------------------------------
   A story is a drawing of a product's own interface, and those interfaces are
   light. When the page turned over, the panel correctly stayed white and every
   token inside it correctly turned over with the page, which put near-white
   ink on a white screen: invisible, and invisible in the one place on this site
   worth looking at.

   So a story carries the daylight palette with it, whatever the page is doing.
   In light this declares the values the page already has and changes nothing;
   in dark it is the difference between a lit screen and a blank one. It is
   written as the whole set rather than the four tokens that happened to be
   failing, because the next schematic to be drawn will reach for a fifth.

   `color-scheme: light` is here so a form control or a scrollbar drawn inside
   a schematic is drawn the way the schematic is, not the way the page is. */
.story {
  --ink: #0f1712;
  --ink-2: #48524c;
  --ink-3: #5f6862;
  --tone: #6f7f75;
  --line: rgba(28, 51, 38, .09);
  --line-2: rgba(28, 51, 38, .16);
  --paper: #ffffff;
  --ground: #f8f6f1;
  --ground-2: #f1efe9;
  --forest: #1c3326;
  --forest-2: #1f6b4a;
  --forest-3: #13241b;
  --night: #0a140f;
  --accent-ink: #1f6b4a;
  --on-mint: #2f4d3e;
  --mint-wash: .4;
  --chip-forest: #17593c;
  --chip-amber: #6b4410;
  --chip-sky: #1d4e78;
  --gl-rgb: 255, 255, 255;
  --gl-rgb-2: 248, 246, 241;
  --gl-rim: 255, 255, 255;
  --gl-tint: .55;
  --veil: rgba(252, 251, 248, .94);
  --sh-1: 0 1px 2px rgba(28, 51, 38, .05);
  --sh-2: 0 1px 2px rgba(28, 51, 38, .05), 0 14px 32px -14px rgba(28, 51, 38, .22);
  --sh-3: 0 1px 2px rgba(28, 51, 38, .05), 0 18px 40px -20px rgba(28, 51, 38, .2), 0 44px 84px -44px rgba(28, 51, 38, .28);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; scroll-padding-top: 110px; scrollbar-color: rgba(28, 51, 38, .32) transparent; scrollbar-gutter: stable; }
body {
  margin: 0; min-width: 320px; background-color: var(--ground); color: var(--ink);
  background-image: radial-gradient(circle at 1px 1px, rgba(28, 51, 38, .06) 1px, transparent 1.2px); background-size: 24px 24px;
  font: 400 16px/1.6 var(--sans); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
/* a <picture> is only a wrapper: the <img> stays the element the layout sees */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
code { font-family: var(--mono); }
/* running text never ends a paragraph on a lone word */
p { text-wrap: pretty; }
/* A deep link should land somewhere obvious. The scroll-padding above already
   stops the target hiding under the header; this says which thing was asked
   for, once, and then gets out of the way. Anchors are how a case study gets
   shared: someone sends the beat, not the page. */
:target { animation: landed 2.4s var(--ease) both; }
@keyframes landed {
  0%   { background-color: rgba(52, 211, 153, .16); }
  70%  { background-color: rgba(52, 211, 153, .16); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { :target { animation: none; } }

/* The caret in a search field belongs to the site, not to the browser. */
input, textarea { caret-color: var(--accent-ink); }

::selection { background: rgba(110, 231, 183, .5); color: var(--ink); }
:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 3px; border-radius: 8px; }
.seg__btn:focus-visible, .beatbar__nav a:focus-visible { outline-offset: -3px; }
.labsband :focus-visible, .ftr :focus-visible, .contact__l :focus-visible, .inst :focus-visible { outline-color: var(--mint-2); }
[hidden] { display: none !important; }
main { display: block; padding-top: var(--hdr); }
main:focus, [data-locus]:focus, [data-beat]:focus { outline: none; }
body.is-locked { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--forest-3); color: var(--on-dark); font: 500 14px/1 var(--sans); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- type ------------------------------------------------------------------ */
.h1 { font: 400 clamp(42px, 5.8vw, 78px)/1.01 var(--sans); letter-spacing: -.047em; color: var(--ink); text-wrap: balance; }
.h2 { font: 400 clamp(32px, 4.1vw, 54px)/1.05 var(--sans); letter-spacing: -.042em; color: var(--ink); text-wrap: balance; }
.tone { color: var(--tone); }
.nowrap { white-space: nowrap; }
.mask { font-family: var(--mono); font-size: .9em; letter-spacing: -.02em; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(28, 51, 38, .35); cursor: help; }
/* the quieter clause of a page title starts its own line, so the color change never lands mid-line */
.h1 .tone { display: block; }
/* an inline arrow, not an inline block: it stays glued to the no-break space before it, and "0→1" never splits */
.to { display: inline; padding: 0 .1em; font-style: normal; opacity: .5; }
.slabel { display: inline-flex; align-items: baseline; gap: 9px; margin-bottom: 20px; font: 500 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.slabel__n { font: 500 12.5px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.slabel__t { position: relative; padding-bottom: 9px; }
.slabel__t::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; clip-path: inset(0 0 0 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 3Q2.5 .6 5 3T10 3' fill='none' stroke='%2334d399' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x 0 0 / 10px 6px;
  transition: clip-path 1.2s var(--ease) .2s;
}
.slabel--dark { color: var(--on-dark); }
.slabel--dark .slabel__n { color: var(--on-dark-3); }
.slabel--dark .slabel__t::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 3Q2.5 .6 5 3T10 3' fill='none' stroke='%236ee7b7' stroke-width='1.4'/%3E%3C/svg%3E"); }
.hint { font: 400 12.5px/1.5 var(--mono); letter-spacing: 0; color: var(--ink-3); }
/* inline shortcut hints stay out of a first visit; they show once someone has used the keyboard */
.hint--prov { max-width: 62ch; margin-inline: auto; text-align: center; }
.hint[data-kbd] { display: none; }
html.keys-on .hint[data-kbd], .phead--nf .hint[data-kbd] { display: block; }
.sep { margin: 0 10px; color: var(--ink-3); }

/* ---- controls -------------------------------------------------------------- */
.ico { flex: none; transition: transform .35s var(--ease); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.actions--center { justify-content: center; }

.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; white-space: nowrap;
  font: 500 15px/1 var(--sans); letter-spacing: -.012em; -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s, translate .6s cubic-bezier(.2, .9, .3, 1.3);
}
.btn:hover .ico--arrow { transform: translateX(3px); }
.btn:hover .ico--ext { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn--primary {
  color: #fff; background: linear-gradient(180deg, #2c5a42 0%, #1a3a2a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(15, 23, 18, .25), 0 10px 24px -12px rgba(19, 36, 27, .65);
}
/* a rim of light travels the edge of every primary action */
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; opacity: .6;
  background: conic-gradient(from var(--ang), transparent 0 60%, rgba(167, 243, 208, .95) 76%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rim 5.5s linear infinite; transition: opacity .4s;
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(15, 23, 18, .25), 0 18px 34px -14px rgba(19, 36, 27, .75); }
.btn--primary:hover::before { opacity: 1; }
.btn--primary.is-away::before { animation-play-state: paused; }
.btn--ghost { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(28, 51, 38, .06); }
.btn--ghost:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(28, 51, 38, .28), 0 10px 22px -12px rgba(28, 51, 38, .32); }
.btn--mint { color: var(--forest-3); background: linear-gradient(180deg, #c2f8de 0%, #82ecc2 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 12px 28px -14px rgba(110, 231, 183, .6); }
.btn--mint:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 16px 32px -12px rgba(110, 231, 183, .75); }
.btn--night { color: var(--on-dark); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.btn--night:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }

/* every figure on the page sits on the same numeral width */
.wmetric > b, .lrow__m b, .bay__big b, .casechip__m b, .beatbar__idx, .stat__k, .slabel__n { font-variant-numeric: tabular-nums; }
.tlink { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1.3 var(--sans); letter-spacing: -.012em; color: var(--accent-ink); }
.tlink > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.tlink:hover > span { background-size: 100% 1px; }
.tlink:hover .ico--arrow { transform: translateX(3px); }
.tlink:hover .ico--ext { transform: translate(2px, -2px); }
.tlink--quiet { color: var(--ink-2); }
.tbtn { display: inline-flex; align-items: center; gap: .45em; height: 32px; padding: 0 12px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: var(--ink-2); background: rgba(var(--gl-rgb), .75); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, background-color .2s, box-shadow .2s; }
.tbtn:hover { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.idchip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .03em; color: var(--ink-2); background: rgba(28, 51, 38, .05); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 12px; border-radius: 999px; font: 500 13px/1.2 var(--sans); color: var(--ink-2); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

.badge { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(var(--gl-rgb), .88); box-shadow: 0 0 0 1px var(--line), var(--sh-1); font: 500 13.5px/1 var(--sans); color: var(--ink); }
.badge__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-3); }
.badge__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(52, 211, 153, .6); animation: ping 2.6s var(--ease) infinite; }
.badge__clock { padding-left: 10px; border-left: 1px solid var(--line-2); font: 500 12px/1 var(--mono); color: var(--ink-3); }

.mail { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 44px; padding: 0 4px 0 16px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.mail__addr { overflow: hidden; text-overflow: ellipsis; font: 500 13.5px/1.45 var(--mono); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.mail__copy { flex: none; height: 34px; padding: 0 13px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: var(--accent-ink); background: rgba(52, 211, 153, .14); transition: background-color .2s, color .2s; }
.mail__copy:hover { background: rgba(52, 211, 153, .24); }
.mail__copy.is-done { color: #fff; background: var(--forest-2); }

.continue { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; height: 32px; margin-top: 18px; padding: 0 12px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: var(--ink-2); background: rgba(var(--gl-rgb), .75); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.continue__k { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.continue__l { overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.continue__w { color: var(--ink-3); }

/* The scroll progress bar, driven by the scroll itself where the browser can.
   Same trade as the hero drift above: off the main thread, and the script stops
   writing a transform on every frame. The JS path stays for browsers without
   scroll-driven animations, and unlike the hero this one is not gated on
   reduced motion: it is a position indicator, not motion for its own sake, and
   a progress bar that refuses to show progress is just wrong. */
@supports (animation-timeline: scroll()) {
  .progress > i {
    animation: scroll-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; pointer-events: none; filter: drop-shadow(0 0 6px rgba(52, 211, 153, .5)); }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint-3), var(--forest-2)); transform: scaleX(0); transform-origin: 0 50%; }

/* ---- header ------------------------------------------------------------------ */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 0 var(--gutter); pointer-events: none; }
.hdr__bar {
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: 20px;
  max-width: var(--wide); height: var(--hdr); margin: 0 auto; padding: 0; border-radius: 0;
  background-color: rgba(255, 255, 255, 0); box-shadow: 0 0 0 1px rgba(28, 51, 38, 0);
  transition: max-width .55s var(--ease), height .55s var(--ease), margin-top .55s var(--ease), padding .55s var(--ease), border-radius .55s var(--ease), background-color .45s, box-shadow .45s;
}
.hdr.is-float .hdr__bar, .hdr.is-menu .hdr__bar {
  max-width: 980px; height: 56px; margin-top: 12px; padding: 0 8px 0 16px; border-radius: 999px;
  background-color: rgba(var(--gl-rgb), .8); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -20px rgba(28, 51, 38, .35);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
}
.hdr.is-float .hdr__resume { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 600 15.5px/1 var(--sans); letter-spacing: -.022em; color: var(--ink); }
.brand--light { color: var(--on-dark); }
.orb { position: relative; flex: none; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: var(--orb); box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .28), 0 3px 8px -3px rgba(15, 42, 29, .55); }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--ang), transparent 0 68%, rgba(255, 255, 255, .6) 80%, transparent 92%); mix-blend-mode: soft-light; animation: rim 9s linear 3; }

.hdr__nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav__link { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); transition: color .2s, background-color .2s; }
.nav__link:hover { color: var(--ink); background: rgba(28, 51, 38, .05); }
.nav__link[aria-current] { color: var(--ink); background: rgba(28, 51, 38, .065); }
.nav__item { display: flex; align-items: center; border-radius: 999px; transition: background-color .2s; }
.nav__item .nav__link { padding-right: 4px; }
.nav__item .nav__link:hover, .nav__item .nav__link[aria-current] { background: none; }
.nav__item:hover, .nav__item.is-open, .nav__item:has(.nav__link[aria-current]) { background: rgba(28, 51, 38, .06); }
.nav__more { display: inline-grid; place-items: center; width: 26px; height: 36px; border-radius: 0 999px 999px 0; color: var(--ink-3); }
.nav__more:hover { color: var(--ink); }
.nav__item.is-open .nav__more .ico { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5; width: min(1000px, calc(100vw - 2 * var(--gutter)));
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.985); transform-origin: 50% 0;
  transition: opacity .22s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .22s var(--ease), transform .5s var(--ease), visibility 0s; }
.mega__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, .96fr); gap: 6px; padding: 10px; border-radius: 26px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 34px 80px -34px rgba(28, 51, 38, .5); }
.mega__lead { position: relative; display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding: 18px 14px; border-radius: 18px; background: var(--ground-2); }
.mega__col { display: flex; flex-direction: column; gap: 2px; padding: 18px 6px 12px; }
.mega__h { margin-bottom: 10px; padding: 0 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mega__lead .mega__h { padding: 0 8px; }
.mega__big { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 9px 8px; border-radius: 12px; font: 450 19px/1.1 var(--sans); letter-spacing: -.028em; color: var(--ink); transition: background-color .2s; }
.mega__big small { font: 400 12.5px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink-3); }
.mega__big:hover { background: rgba(var(--gl-rgb), .85); }
.mega__link { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 12px; transition: background-color .2s; }
.mega__link:hover { background: var(--ground-2); }
.mega__name { font: 500 14.5px/1.2 var(--sans); letter-spacing: -.014em; color: var(--ink); }
.mega__m { font: 400 12.5px/1.3 var(--sans); color: var(--ink-3); }

.hdr__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.kbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 7px 0 11px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--gl-rgb), .7); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, background-color .2s, box-shadow .2s; }
.kbtn:hover { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.kbtn__k { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 7px; font: 500 11.5px/1 var(--mono); color: var(--ink-3); background: rgba(28, 51, 38, .06); }
.menu { display: none; position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--gl-rgb), .8); box-shadow: inset 0 0 0 1px var(--line); }
.menu i { position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease); }
.menu i:first-of-type { top: 16px; }
.menu i:last-of-type { top: 23px; }
.menu[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
.drawer { position: absolute; top: calc(100% + 4px); left: var(--gutter); right: var(--gutter); pointer-events: auto; padding: 10px; border-radius: 26px; background: rgba(var(--gl-rgb), .98); box-shadow: 0 0 0 1px var(--line), 0 34px 70px -30px rgba(28, 51, 38, .5); animation: rise .5s var(--ease) both; }
.hdr.is-menu .drawer { top: calc(56px + 20px); }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 14px; font: 450 22px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.drawer__link:hover { background: var(--ground-2); }
.drawer__link[aria-current] { color: var(--accent-ink); }
.drawer__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding: 12px 4px 4px; border-top: 1px solid var(--line); }

/* ---- stripes: stepped mint bands that settle into forest ---------------------- */
.stripes { display: flex; flex-direction: column; overflow: hidden; }
.stripes i { display: block; height: 22px; transform-origin: 50% 100%; }
.stripes i:nth-child(1) { background: #c6f6df; }
.stripes i:nth-child(2) { background: #93edc6; }
.stripes i:nth-child(3) { background: #45d49c; }
.stripes i:nth-child(4) { background: #25533d; }
/* the footer's bands unfold when it arrives, the way the hero's do when the page opens */
.stripes--ftr i { transition: transform .8s var(--ease); }
.stripes--ftr i:nth-child(2) { transition-delay: .06s; }
.stripes--ftr i:nth-child(3) { transition-delay: .12s; }
.stripes--ftr i:nth-child(4) { transition-delay: .18s; }
.stripes--ftr.is-folded i { transform: scaleY(0); }
.ftr__word.is-sunk { opacity: 0; transform: translateY(42%); }

/* ---- hero -------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-top: clamp(36px, 5.5vw, 76px); }
/* The hero's light and its stage drift slower than the page, which reads as
   depth. Where the browser can run an animation against the scroll position
   itself, it does, and the whole effect moves to the compositor: no scroll
   listener, no per-frame custom-property write, and no style recalculation of
   the 3300 elements .hero contains. The script checks the same feature and
   stands down when this is in charge, so the two never both drive it.

   Gated on reduced motion explicitly. The blanket rule near the end of this
   file clamps animation-duration, which a scroll-driven animation does not
   have: its timeline is the scroll, not the clock, so that rule would not
   have stopped it.

   Measured with tools/scroll-perf.mjs, nine interleaved rounds at 2x CPU
   throttle: style recalculation 933ms to 814ms and frames over 33ms during a
   full-page scroll 70 to 52, neither range overlapping. An earlier attempt at
   the same saving declared --pz with `inherits: false`, which stopped the write
   reaching the subtree and also stopped it reaching these two pseudo-elements,
   the only things that read it. The parallax quietly died and the numbers
   improved, which is why this one was checked by reading the transform. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero::before {
      animation: hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 900px;
    }
    .hero__stage::before {
      animation: hero-stage-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 900px;
    }
  }
}
@keyframes hero-drift { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 34px); } }
@keyframes hero-stage-drift { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -220px; width: min(1200px, 100%); height: 880px; transform: translate(-50%, var(--pz, 0px)); pointer-events: none; background: radial-gradient(closest-side, rgba(110, 231, 183, .24), rgba(110, 231, 183, 0) 72%); }
.hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__badge { animation: rise .8s var(--ease) both; }
.hero__h1 { margin-top: 26px; font: 400 clamp(40px, 5.7vw, 78px)/1 var(--sans); letter-spacing: -.05em; color: var(--ink); }
.hero__line { display: block; animation: rise-text .92s var(--ease) .05s both; }
.hero__line.tone { animation-delay: .12s; }
.hero__line { text-wrap: balance; }
.hero__lede { max-width: 54ch; margin-top: 26px; font: 400 clamp(17px, 1.4vw, 20px)/1.55 var(--sans); letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; animation: rise-text .92s var(--ease) .2s both; }
.hero__actions { justify-content: center; margin-top: 32px; animation: rise .92s var(--ease) .28s both; }
.hero__career { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 22px; font: 500 13px/1.3 var(--sans); color: var(--ink-3); animation: rise .92s var(--ease) .34s both; }
.hero__career li { display: inline-flex; align-items: center; gap: 16px; }
.hero__career li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.hero__stage { position: relative; isolation: isolate; margin-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero__stage > .stripes { position: absolute; z-index: -1; left: var(--inset); right: var(--inset); top: 290px; border-radius: 36px 36px 0 0; }
.hero__stage > .stripes i { animation: grow .8s var(--ease) both; }
.hero__stage > .stripes i:nth-child(2) { animation-delay: .06s; }
.hero__stage > .stripes i:nth-child(3) { animation-delay: .12s; }
.hero__stage > .stripes i:nth-child(4) { animation-delay: .18s; }
.hero__stage::before { content: ""; position: absolute; z-index: -2; left: var(--inset); right: var(--inset); top: 378px; bottom: 0; transform: translateY(var(--pz2, 0px)); border-radius: 0 0 36px 36px; background: var(--forest-3); background-image: radial-gradient(70% 50% at 50% 100%, rgba(52, 211, 153, .14), transparent 70%), var(--dots); background-size: auto, 24px 24px; }
.hero__show { animation: rise 1s var(--ease) .4s both; }

.proof { margin-top: clamp(36px, 4.5vw, 56px); }
.proof__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.proof__item a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px 22px 20px; border-radius: 22px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: background-color .3s, box-shadow .3s, transform .45s var(--ease); }
.proof__item a:hover { background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px rgba(167, 243, 208, .3); transform: translateY(-3px); }
.proof__v { font: 400 clamp(30px, 3.2vw, 44px)/1 var(--sans); letter-spacing: -.045em; color: var(--on-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.proof__k { font: 400 14px/1.4 var(--sans); color: var(--on-dark-2); }

/* ---- showcase --------------------------------------------------------------- */
.show { position: relative; padding: 8px; border-radius: 34px; background: var(--veil); box-shadow: 0 0 0 1px rgba(28, 51, 38, .08), 0 50px 100px -48px rgba(15, 42, 29, .6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.show__bar { display: flex; justify-content: center; padding: 6px 6px 12px; }
.seg { position: relative; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; border-radius: 999px; background: rgba(28, 51, 38, .06); box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg__ind { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 2px rgba(28, 51, 38, .1), 0 6px 14px -8px rgba(28, 51, 38, .35); pointer-events: none; }
.seg.is-ready .seg__ind { transition: transform .55s var(--ease), width .55s var(--ease); }
.seg__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px; font: 500 14.5px/1 var(--sans); letter-spacing: -.012em; color: var(--ink-3); white-space: nowrap; transition: color .3s; }
.seg__btn:hover, .seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"] { color: var(--ink); }
.show__fill { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(28, 51, 38, .08); opacity: 0; transition: opacity .3s; }
.show__fill i { display: block; height: 100%; background: var(--mint-3); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.show:not(.is-manual) .show__tab[aria-selected="true"] .show__fill { opacity: 1; }
.show__panel { animation: panel .7s var(--ease) both; }
.show__ts { display: none; }
.show__more { display: flex; justify-content: flex-end; padding: 12px 14px 4px; }

/* ---- stories and bays --------------------------------------------------- */
.story {
  --s-bg: #fbfaf7; --s-dot: rgba(28, 51, 38, .11); --s-glow: rgba(110, 231, 183, .34); --s-gx: 96%; --s-gy: 104%;
  --s-line: rgba(28, 51, 38, .085); --s-soft: #f3f1ec; --s-skel: #ebe8e1;
  --s-mint: #dbf6e8; --s-mint-t: #13603e; --s-amber: #fdebd3; --s-amber-t: #8a4a0b; --s-sky: #e2edfa; --s-sky-t: #1d4e84;
  position: relative; display: grid; overflow: hidden; overflow: clip; container-type: inline-size; isolation: isolate;
  aspect-ratio: 16 / 10; border-radius: 20px; color: var(--ink); background-color: var(--s-bg);
  background-image: radial-gradient(circle at 1px 1px, var(--s-dot) 1px, transparent 1.3px);
  background-size: 18px 18px;
  box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .07);
}
.story--markets { --s-glow: rgba(138, 190, 240, .36); --s-gx: 100%; --s-gy: -6%; }
.story--labs { --s-glow: rgba(250, 196, 150, .36); --s-gx: -2%; --s-gy: -4%; }
.s-in {
  position: relative; display: grid; place-items: center; min-width: 0; padding: 3.4em 2.6em 1.6em;
  font: 400 clamp(11.5px, 2.3cqw, 16.5px)/1.35 var(--sans); letter-spacing: -.006em; color: var(--ink);
}
.s-frame { display: grid; justify-items: center; width: 100%; }

/* the window */
.s-win {
  position: relative; width: min(100%, 33em); border-radius: 1.1em; background: #fff;
  box-shadow: 0 0 0 1px var(--s-line), 0 .08em .16em rgba(28, 51, 38, .05), 0 1.5em 3em -1.5em rgba(15, 42, 29, .3);
}
.s-win--wide { width: min(100%, 38em); }
.s-bar { display: flex; align-items: center; gap: .65em; min-width: 0; padding: .72em .8em .72em .72em; border-bottom: 1px solid var(--s-line); }
.s-app { display: grid; flex: none; place-items: center; width: 2.05em; height: 2.05em; border-radius: .62em; color: #fff; background: var(--forest-2); box-shadow: inset 0 -.15em .35em rgba(0, 0, 0, .2); }
.s-app .s-ico { width: 1.12em; height: 1.12em; }
.s-ttl { display: grid; gap: .1em; min-width: 0; }
.s-ttl b { overflow: hidden; font-weight: 500; font-size: .95em; letter-spacing: -.014em; white-space: nowrap; text-overflow: ellipsis; }
.s-ttl small { overflow: hidden; font-size: .72em; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.s-bar > .s-swap { flex: none; margin-left: auto; justify-items: end; }
.s-body { padding: 0 .8em; }
.s-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; align-items: center; gap: .6em; min-height: 2.9em; padding: .4em 0; border-top: 1px solid var(--s-line); }
.s-row:first-child { border-top: 0; }
.s-cell { display: flex; align-items: center; min-width: 0; }
.s-k { font: 500 .62em/1.1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.s-foot { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .8em; border-top: 1px solid var(--s-line); border-radius: 0 0 1.1em 1.1em; background: #fcfbf8; }

/* swaps and entrances */
.s-swap { display: grid; align-items: center; min-width: 0; }
.s-swap > * { grid-area: 1 / 1; }
.s-swap--end { justify-items: end; }
.s-fx { transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; transition-delay: calc(160ms + var(--d, 0) * 70ms); }
.s-fx:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(.35em); transition: opacity .18s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
/* a state that is not showing stops moving */
.s-fx:not(.is-on), .s-fx:not(.is-on) * { animation-play-state: paused; }

/* chips, buttons, skeletons, status */
.s-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .32em; min-width: 0; }
.s-chip {
  display: inline-flex; align-items: center; gap: .36em; height: 1.9em; padding: 0 .72em; border-radius: 99em;
  font-weight: 500; font-size: .74em; line-height: 1; letter-spacing: -.004em; white-space: nowrap; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--s-line);
}
.s-chip .s-ico { width: 1.18em; height: 1.18em; margin-left: -.18em; }
.s-chip--soft { background: var(--s-soft); box-shadow: none; }
.s-chip--mint { color: var(--s-mint-t); background: var(--s-mint); box-shadow: none; }
.s-chip--amber { color: var(--s-amber-t); background: var(--s-amber); box-shadow: none; }
.s-chip--sky { color: var(--s-sky-t); background: var(--s-sky); box-shadow: none; }
.s-chip--ink { color: #fff; background: var(--forest-3); box-shadow: 0 .6em 1.2em -.7em rgba(15, 42, 29, .55); }
.s-chip--dash { outline: 1px dashed rgba(29, 78, 132, .55); outline-offset: -1px; }
.s-btn { display: inline-flex; align-items: center; height: 1.9em; padding: 0 .8em; border-radius: 99em; font-weight: 500; font-size: .72em; line-height: 1; color: #fff; background: var(--forest-3); white-space: nowrap; }
.s-skels { display: flex; align-items: center; gap: .4em; min-width: 0; }
.s-skel { display: block; flex: none; width: var(--w, 4em); max-width: 100%; height: .52em; border-radius: .3em; background: var(--s-skel); }
.s-skel--ink { background: #d8ddd9; }
.s-skel--sky { background: #c6daf1; }
/* The shimmer sweeps a pseudo-element across rather than sliding a background.
   background-position repaints the element on every frame and there are eleven
   of these running for as long as the page is open; transform is composited and
   costs this thread nothing. The base colour is left alone so the --ink and
   --sky skeleton variants keep theirs. */
.s-busy { position: relative; overflow: hidden; }
.s-busy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 20%, #f9f7f3 50%, transparent 80%); transform: translateX(-100%); animation: s-shimmer 1.7s linear infinite; will-change: transform; }
@keyframes s-shimmer { to { transform: translateX(100%); } }
.s-swap--st { justify-items: end; }
.s-st { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; }
.s-st .s-ico { width: .95em; height: .95em; }
.s-st--idle { color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--s-line); }
.s-st--busy { background: var(--s-sky); }
.s-st--wait { color: var(--s-amber-t); background: var(--s-amber); }
.s-st--done { color: #fff; background: var(--forest-2); }
.s-spin { width: .78em; height: .78em; border-radius: 50%; border: 1.5px solid rgba(29, 78, 132, .22); border-top-color: var(--s-sky-t); animation: s-rot .9s linear infinite; }
@keyframes s-rot { to { transform: rotate(360deg); } }
.s-track { position: relative; height: .55em; overflow: hidden; border-radius: 1em; background: var(--s-soft); box-shadow: inset 0 0 0 1px var(--s-line); }
.s-track--wide { width: 100%; }
.s-var { display: block; }
.story[data-step="0"] .s-var { --v: var(--v0); }
.story[data-step="1"] .s-var { --v: var(--v1); }
.story[data-step="2"] .s-var { --v: var(--v2); }
.story[data-step="3"] .s-var { --v: var(--v3); }
.story[data-step="4"] .s-var { --v: var(--v4); }
.s-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v, 1) * 100%); border-radius: inherit; background: var(--ink-3); transition: width 1.2s var(--ease), background-color .6s; }
.s-fill--soft { background: #c3cbc6; }
.s-fill--mint { background: var(--mint-3); }
.story--setup-agent[data-step="1"] .s-fill, .story--incident-agent[data-step="1"] .s-fill, .story--margin-simulator[data-step="2"] .s-cmp .s-fill {
  position: absolute; overflow: hidden; background: #b9c4bd;
}
.story--setup-agent[data-step="1"] .s-fill::after, .story--incident-agent[data-step="1"] .s-fill::after, .story--margin-simulator[data-step="2"] .s-cmp .s-fill::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 20%, #e5ebe7 50%, transparent 80%); transform: translateX(-100%); animation: s-shimmer 1.7s linear infinite; will-change: transform;
}
.story--setup-agent[data-step="2"] .s-fill, .story--incident-agent[data-step="2"] .s-fill { background: var(--mint-3); }
.s-val { font-weight: 500; font-size: .92em; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-val--quiet { font-weight: 400; font-size: .76em; color: var(--ink-3); }
.s-val--mint { color: var(--s-mint-t); }
.s-quiet { font-size: .74em; color: var(--ink-3); white-space: nowrap; }
.s-line2 { font-weight: 500; font-size: .84em; letter-spacing: -.012em; white-space: nowrap; }
.s-big { font-weight: 400; font-size: 1.7em; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }

/* floating notes and metrics, pinned to the window's corners */
.s-float { position: absolute; z-index: 2; }
.s-float--tr { right: -1.8em; bottom: calc(100% - .45em); }
.s-float--bl { bottom: -1.1em; left: -1.8em; }
.s-float--br { right: -2em; bottom: -1.3em; }
.s-note { display: flex; align-items: center; gap: .6em; padding: .55em .95em .55em .55em; border-radius: .95em; white-space: nowrap; background: #fff; box-shadow: 0 0 0 1px var(--s-line), 0 1.1em 2.2em -1.1em rgba(15, 42, 29, .34); }
.s-note b { display: block; font-weight: 500; font-size: .84em; letter-spacing: -.012em; }
.s-note small { display: block; margin-top: .12em; font-size: .7em; color: var(--ink-3); }
.s-tile { display: grid; flex: none; place-items: center; width: 2.1em; height: 2.1em; border-radius: .65em; color: var(--ink-2); background: var(--s-soft); }
.s-tile .s-ico { width: 1.1em; height: 1.1em; }
.s-tile--amber { color: var(--s-amber-t); background: var(--s-amber); }
.s-tile--mint { color: var(--s-mint-t); background: var(--s-mint); }
.s-tile--sky { color: var(--s-sky-t); background: var(--s-sky); }
.s-metric { display: flex; align-items: center; gap: .6em; padding: .55em .95em .55em .8em; border-radius: .95em; background: #fff; box-shadow: 0 0 0 1px var(--s-line), 0 1.1em 2.2em -1.1em rgba(15, 42, 29, .34); }
.s-metric b { font-weight: 400; font-size: 1.7em; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.s-metric small { max-width: 9em; font-size: .7em; line-height: 1.25; color: var(--ink-3); }

/* shared network drawing */
.s-net { display: block; width: 100%; height: auto; overflow: visible; }
.s-net .bi { stroke: rgba(28, 51, 38, .3); stroke-width: .42; transition: opacity .9s var(--ease); }
.s-net .sp { stroke: var(--mint-3); stroke-width: .75; stroke-dasharray: 1.6 1.8; opacity: 0; transition: opacity .7s var(--ease); }
.s-net .env { fill: rgba(138, 190, 240, .14); stroke: #6d9fd6; stroke-width: .35; stroke-dasharray: 1 1.1; opacity: 0; transition: opacity .7s var(--ease); }
.s-net .n { fill: #fff; stroke: var(--ink-3); stroke-width: .6; }
.s-net .hub { fill: var(--accent-ink); }
.s-net .hub-ring { fill: rgba(52, 211, 153, .16); stroke: none; opacity: 0; transition: opacity .7s; }
@keyframes s-flow { to { stroke-dashoffset: -6.8; } }
.story--cross-currency[data-step="1"] .s-net .sp { opacity: 1; animation: s-flow 1.1s linear infinite; }
.story--cross-currency:not([data-step="0"]) .s-net .hub-ring, .story--hero[data-step="2"] .s-net .hub-ring { opacity: 1; }
.story--cross-currency[data-step="2"] .s-net .sp, .story--cross-currency[data-step="3"] .s-net .sp, .story--hero[data-step="2"] .s-net .sp { opacity: .85; stroke-dasharray: none; }
.story--cross-currency[data-step="2"] .s-net .bi, .story--cross-currency[data-step="3"] .s-net .bi, .story--hero[data-step="2"] .s-net .bi { opacity: .14; }
.story--cross-currency[data-step="3"] .s-net .env { opacity: 1; }

/* home showcase: three lanes */
.s-lanes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .4em; padding: .95em 0 1em; }
.s-lane { display: flex; flex-direction: column; gap: .5em; min-width: 0; padding: .75em .7em .8em; border-radius: .85em; background: var(--s-soft); transition: background-color .5s, box-shadow .5s, transform .6s var(--ease); }
.s-lane.is-on { background: #fff; box-shadow: 0 0 0 1.5px var(--mint-3), 0 .9em 1.8em -1em rgba(15, 42, 29, .3); transform: translateY(-.2em); }
.s-mini { display: grid; gap: .12em; padding: .45em .55em .5em; border-radius: .6em; background: #fff; box-shadow: inset 0 0 0 1px var(--s-line); }
.s-mini span { font-size: .68em; color: var(--ink-3); }
.s-mini b { font-weight: 500; font-size: .95em; letter-spacing: -.024em; white-space: nowrap; }
.s-mini small { font-size: .62em; color: var(--ink-3); }
.s-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.s-lane__note { margin-top: auto; font-size: .64em; line-height: 1.3; color: var(--ink-3); }
.s-flow { display: grid; place-items: center; align-self: center; width: 1.55em; height: 1.55em; border-radius: 50%; color: var(--ink-3); background: #fff; box-shadow: 0 0 0 1px var(--s-line); }
.s-flow .s-ico { width: .85em; height: .85em; }
.s-lane--net .s-net { align-self: center; max-width: 6.2em; }
.s-lane__foot { display: grid; justify-items: center; gap: .15em; margin-top: auto; }
.s-lane__foot .s-swap { justify-items: center; }
.s-lane__big { font-weight: 400; font-size: 1.3em; line-height: 1; letter-spacing: -.045em; }
.s-lane__foot small { font-size: .62em; color: var(--ink-3); }
.s-lane__foot .s-fx { display: grid; justify-items: center; gap: .15em; }

/* Cross-currency compression */
.s-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 1em; padding: .8em 0 .9em; }
.s-netbox { display: grid; justify-items: center; gap: .5em; }
.s-netbox .s-net { max-width: 13em; }
.s-legend { display: flex; gap: .9em; font-size: .66em; color: var(--ink-3); white-space: nowrap; }
.s-legend span { display: inline-flex; align-items: center; gap: .4em; }
.s-lg { width: .7em; height: .7em; border-radius: 50%; }
.s-lg--n { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.s-lg--hub { background: var(--forest-2); }
.s-stats { display: grid; }
.s-stat { display: grid; gap: .35em; padding: .55em 0; border-top: 1px solid var(--s-line); }
.s-stat:first-child { border-top: 0; }
.s-stat .s-swap { justify-items: start; min-height: 1.9em; }

/* valuation */
.s-vrow { display: grid; grid-template-columns: 3em minmax(0, 1fr) minmax(0, 1fr) 6.6em 1.45em; align-items: center; gap: .7em; min-height: 2.3em; border-top: 1px solid var(--s-line); }
.s-vrow--head { min-height: 2.3em; border-top: 0; }
.s-band { position: relative; height: 1.1em; }
.s-band::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(28, 51, 38, .14); }
.s-band__ok { position: absolute; top: .18em; bottom: .18em; left: 30%; width: 40%; border-radius: .3em; background: var(--s-mint); }
.s-band > .s-fx { position: absolute; inset: 0; }
.s-dot { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: .62em; height: .62em; margin: -.31em 0 0 -.31em; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 .18em #fff; }
.s-dot--amber { background: #de8a2e; }
.s-dot--mint { background: var(--forest-2); }
.s-foot--time { grid-template-columns: 5.4em minmax(0, 1fr); padding-bottom: 1.1em; }
.s-timeline { position: relative; height: 2.1em; }
.s-timeline::before { content: ""; position: absolute; top: .5em; right: 0; left: 0; height: 2px; border-radius: 2px; background: rgba(28, 51, 38, .1); }
.s-tl__check { position: absolute; top: .22em; left: 16%; width: .62em; height: .62em; margin-left: -.31em; border-radius: 50%; background: var(--forest-2); box-shadow: 0 0 0 .22em rgba(31, 107, 74, .16); }
.s-tl__gap { position: absolute; top: .48em; right: 34%; left: 18%; height: 3px; background: repeating-linear-gradient(90deg, var(--mint-3) 0 .4em, transparent .4em .7em); }
.s-tl__live { position: absolute; top: .22em; right: 0; left: 68%; height: .6em; border-radius: .3em; background: rgba(28, 51, 38, .13); }
.s-tl__lab { position: absolute; top: 1.15em; font-size: .64em; color: var(--ink-3); white-space: nowrap; }
.s-tl__lab--a { left: 16%; transform: translateX(-25%); }
.s-tl__lab--g { left: 42%; font-weight: 500; color: var(--s-mint-t); transform: translateX(-50%); }
.s-tl__lab--b { right: 0; }

/* FX forward and NDF compression */
.s-srcs { display: flex; align-items: center; gap: .3em; min-width: 0; }
.s-src { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .6em; font: 500 .7em/1 var(--mono); color: var(--ink-3); background: var(--s-soft); }
.s-src--ok { color: #fff; background: var(--forest-2); }
.s-src .s-ico { width: 1.25em; height: 1.25em; }
.s-srcs .s-quiet { margin-left: .5em; }

/* platform */
.s-plat { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .8em; padding: .95em 0 1em; }
.s-systems { display: grid; justify-items: center; gap: .38em; }
.s-sys { display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: .62em; color: var(--s-mint-t); background: var(--s-mint); animation: s-bob 3.4s var(--ease) infinite; animation-delay: calc(var(--d) * .3s); }
.s-sys .s-ico { width: 1.05em; height: 1.05em; }
@keyframes s-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.16em); } }
.s-layers { display: grid; gap: .34em; }
.s-layer { display: grid; grid-template-columns: 1.95em minmax(0, 1fr) auto; align-items: center; gap: .65em; padding: .42em .6em .42em .45em; border-radius: .75em; background: var(--s-soft); transition: background-color .5s, box-shadow .5s, transform .6s var(--ease); }
.s-layer.is-on { background: #fff; box-shadow: 0 0 0 1.5px var(--mint-3), 0 .8em 1.6em -1em rgba(15, 42, 29, .3); transform: translateX(.2em); }
.s-layer__n { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .7em; font: 500 .7em/1 var(--mono); color: var(--ink-3); background: #fff; box-shadow: inset 0 0 0 1px var(--s-line); }
.s-layer__t { display: grid; gap: .16em; min-width: 0; }
.s-layer__t b { overflow: hidden; font-weight: 500; font-size: .84em; letter-spacing: -.012em; white-space: nowrap; text-overflow: ellipsis; }

/* segmented control inside a window */
.s-seg { position: relative; display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: .2em; border-radius: 99em; background: var(--s-soft); box-shadow: inset 0 0 0 1px var(--s-line); }
.s-seg__b { position: relative; z-index: 1; padding: .5em .85em; font-weight: 500; font-size: .72em; line-height: 1; text-align: center; white-space: nowrap; color: var(--ink-2); }
.s-seg__ind { position: absolute; top: .2em; bottom: .2em; left: .2em; width: calc((100% - .4em) / 3); border-radius: 99em; background: #fff; box-shadow: 0 1px 2px rgba(28, 51, 38, .1), 0 .3em .8em -.3em rgba(28, 51, 38, .3); transform: translateX(calc(var(--v, 0) * 100%)); transition: transform .6s var(--ease); }
.story--margin-simulator[data-step="2"] .s-seg__ind { animation: s-venues 3.3s var(--ease) infinite; }
.story--margin-simulator[data-step="3"] .s-seg__ind { opacity: 0; }
@keyframes s-venues { 0%, 26% { transform: translateX(0); } 34%, 60% { transform: translateX(100%); } 68%, 94% { transform: translateX(200%); } 100% { transform: translateX(0); } }
.s-cmp { display: grid; gap: .5em; padding: .8em 0 .95em; border-top: 1px solid var(--s-line); }
.s-cmp__row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 5.8em; align-items: center; gap: .6em; }

/* RideLens */
.s-quotes { position: relative; display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: .45em; padding: .55em 0 .85em; border-top: 1px solid var(--s-line); }
.s-ranks { display: grid; grid-template-rows: repeat(4, 2.55em); }
.s-ranks i { display: grid; place-items: center; height: 2.25em; font: 500 .68em/1 var(--mono); font-style: normal; color: var(--ink-3); }
.s-qlist { position: relative; height: 10.2em; }
.s-q { position: absolute; top: 0; right: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: .9em; height: 2.25em; padding: 0 .75em; border-radius: .6em; background: #fff; box-shadow: 0 0 0 1px var(--s-line); transform: translateY(calc(var(--v, 0) * 2.55em)); transition: transform .85s var(--ease), box-shadow .5s, opacity .5s; }
.s-q.is-on { box-shadow: 0 0 0 1.5px var(--mint-3), 0 .8em 1.6em -1em rgba(15, 42, 29, .3); }
.s-q__t { display: grid; gap: .08em; min-width: 0; }
.s-q__t b { font-weight: 500; font-size: .8em; }
.s-q__t small { overflow: hidden; font-size: .62em; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.s-q__viz { position: relative; height: .75em; }
.s-q__viz::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(28, 51, 38, .1); }
.s-q__viz i { position: absolute; top: 0; bottom: 0; border-radius: 1em; }
.s-q--solid .s-q__viz i { left: 40%; width: 8%; background: var(--forest-2); }
.s-q--range .s-q__viz i { left: 22%; width: 44%; background: var(--s-mint); box-shadow: inset .22em 0 0 var(--mint-3), inset -.22em 0 0 var(--mint-3); }
.s-q--dash .s-q__viz i { left: 34%; width: 30%; background: transparent; outline: 1.5px dashed #6d9fd6; outline-offset: -1.5px; }
.s-q--gone { opacity: .5; }
.s-q--gone .s-q__t b { text-decoration: line-through; }
.s-q--gone .s-q__viz i { left: 8%; width: 20%; background: var(--s-skel); }
.story--ridelens[data-step="0"] .s-q { opacity: 0; }
.s-qskel { position: absolute; top: .55em; right: 0; left: 1.95em; }
.s-qwait { display: grid; grid-template-rows: repeat(4, 2.55em); }
.s-qwait .s-skels { height: 2.25em; padding: 0 .75em; border-radius: .6em; background: #fff; box-shadow: 0 0 0 1px var(--s-line); }

/* RailDrop */
.s-views { display: grid; }
.s-views > * { grid-area: 1 / 1; }
.s-trip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9em; padding: .85em 0 .7em; }
.s-stn b { display: block; font: 500 1.3em/1 var(--mono); letter-spacing: .05em; }
.s-stn small { display: block; margin-top: .3em; font-size: .68em; color: var(--ink-3); white-space: nowrap; }
.s-stn--r { text-align: right; }
.s-route { position: relative; height: 1em; }
.s-rail { position: absolute; top: 50%; right: .3em; left: .3em; height: 1px; background: linear-gradient(90deg, var(--ink-3) 50%, transparent 50%) 0 0 / .5em 1px; opacity: .55; }
.s-rail::before, .s-rail::after { content: ""; position: absolute; top: -.25em; width: .5em; height: .5em; border-radius: 50%; }
.s-rail::before { left: -.3em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.s-rail::after { right: -.3em; background: #8c2f39; }
.s-runner { position: absolute; top: 50%; left: .3em; width: .55em; height: .55em; margin: -.275em 0 0 -.275em; border-radius: 50%; background: var(--forest-2); box-shadow: 0 0 0 .28em rgba(31, 107, 74, .16); opacity: 0; }
.story--raildrop[data-step="1"] .s-runner { opacity: 1; animation: s-ride 2.6s var(--ease) infinite; }
@keyframes s-ride { 0% { left: .3em; } 70%, 100% { left: calc(100% - .3em); } }
.s-view .s-row { grid-template-columns: 4.6em minmax(0, 1fr) auto; }
.s-boardhead { display: flex; justify-content: space-between; gap: 1em; padding: .8em 0 .55em; font-size: .72em; font-weight: 500; color: var(--s-mint-t); }
.s-boardhead span:first-child { color: var(--ink-3); }
.s-board { display: grid; padding-bottom: .5em; }
.s-trow { display: grid; grid-template-columns: 3.7em minmax(0, 1fr) auto; align-items: center; gap: .7em; margin: 0 -.5em; padding: .42em .5em; border-radius: .6em; transition: background-color .7s var(--ease); }
.s-time { display: grid; place-items: center; height: 2.05em; border-radius: .45em; font: 500 .8em/1 var(--mono); letter-spacing: .02em; color: var(--ink); background: var(--s-soft); }
.s-tname { display: grid; gap: .12em; min-width: 0; }
.s-tname b { overflow: hidden; font-weight: 500; font-size: .84em; letter-spacing: -.012em; white-space: nowrap; text-overflow: ellipsis; }
.s-tname small { font-size: .68em; color: var(--ink-3); }
.s-price { display: grid; justify-items: end; gap: .22em; }
.s-price b { font-weight: 500; font-size: .92em; line-height: 1; font-variant-numeric: tabular-nums; }
.s-price small { font: 500 .55em/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.s-price--save small { color: var(--s-mint-t); }
.story--raildrop[data-step="3"] .s-trow--best { background: var(--s-mint); }
.story--raildrop[data-step="3"] .s-trow--best .s-time { background: #fff; }

/* Daylight */
.s-daylight { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 1.1em; padding: .9em 0 1em; }
.s-chartbox { position: relative; padding: .3em .1em; }
.s-chart { display: block; width: 100%; height: auto; overflow: visible; }
.s-chart__grid { fill: none; stroke: rgba(28, 51, 38, .16); stroke-width: .8; stroke-dasharray: 1 3; }
.s-chart__area { fill: rgba(244, 170, 92, .16); }
.s-chart__line { fill: none; stroke: #d9822b; stroke-width: 1.8; stroke-linejoin: round; }
.s-chart__pt { fill: #fff; stroke: #d9822b; stroke-width: 1.4; }
.s-chart__now { stroke: rgba(31, 107, 74, .55); stroke-width: .9; opacity: 0; }
.story--daylight[data-step="0"] .s-chart__now { opacity: 1; animation: s-now 6s linear infinite; }
@keyframes s-now { from { transform: translateX(0); } to { transform: translateX(200px); } }
.s-chart__t { font: 500 6px/1 var(--mono); fill: #95561a; }
.s-chart__x { font: 500 5.4px/1 var(--mono); fill: #5f6862; }
.s-panes { align-self: stretch; }
.s-pane { display: flex; flex-direction: column; justify-content: center; gap: .6em; min-width: 0; padding: .85em .9em; border-radius: .85em; background: var(--s-soft); }
.s-steps4 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .4em .8em; }
.s-steps4 b { font-weight: 500; font-size: .92em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s-steps4 small { font: 500 .62em/1 var(--mono); color: var(--ink-3); }
.s-ladder { display: grid; gap: .2em; }
.s-rung { display: grid; grid-template-columns: 1.3em minmax(0, 1fr) auto; align-items: center; gap: .5em; min-height: 1.72em; padding: 0 .3em 0 .4em; border-radius: .5em; font-size: .78em; color: var(--ink-3); }
.s-rung i { font: 500 .8em/1 var(--mono); font-style: normal; }
.s-rung--win { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--s-line); }
.s-rung .s-chip { height: 1.65em; font-size: .86em; }
.s-quote { font-size: .92em; line-height: 1.45; letter-spacing: -.014em; color: var(--ink); }
.s-read { display: flex; flex-wrap: wrap; gap: .3em; }
.s-chartcap { display: none; justify-items: start; margin-top: .7em; }

/* ---- story detail: a pointer, typing, figures that run, depth and arrival ---- */
.s-frame { isolation: isolate; transition: transform .9s var(--ease); }
.story { transition: background-position .9s var(--ease); }
.story.is-tilt .s-frame { transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 6px), 0); transition-duration: .5s; }
.story.is-tilt { background-position: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -6px); transition-duration: .5s; }
.s-win::before, .s-win::after { content: ""; position: absolute; z-index: -1; right: 1.6em; bottom: -.5em; left: 1.6em; height: 2em; border-radius: 0 0 1em 1em; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px var(--s-line); }
.s-win::after { right: 3.2em; bottom: -.95em; left: 3.2em; background: rgba(255, 255, 255, .42); }
.s-bar { position: relative; overflow: hidden; border-radius: 1.1em 1.1em 0 0; }
.s-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(110, 231, 183, .24), transparent); }
.story.is-tick .s-bar::after { animation: s-sweep 1s var(--ease) both; }
@keyframes s-sweep { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(350%); } }
.story.is-wait .s-bar, .story.is-wait .s-body > *, .story.is-wait .s-foot { opacity: 0; }
.story.is-boot .s-bar, .story.is-boot .s-body > *, .story.is-boot .s-foot { animation: s-boot .65s var(--ease) both; }
.story.is-boot .s-bar { animation-delay: .08s; }
.story.is-boot .s-body > :nth-child(1) { animation-delay: .16s; }
.story.is-boot .s-body > :nth-child(2) { animation-delay: .23s; }
.story.is-boot .s-body > :nth-child(3) { animation-delay: .3s; }
.story.is-boot .s-body > :nth-child(4) { animation-delay: .37s; }
.story.is-boot .s-body > :nth-child(5) { animation-delay: .44s; }
.story.is-boot .s-body > :nth-child(n+6) { animation-delay: .51s; }
.story.is-boot .s-foot { animation-delay: .56s; }
@keyframes s-boot { from { opacity: 0; translate: 0 .6em; } }
.story.is-away *, .story.is-away *::before, .story.is-away *::after { animation-play-state: paused !important; }
.s-float.is-on { animation: s-float-in .7s var(--ease) both; animation-delay: .3s; }
@keyframes s-float-in { from { scale: .94; } }
.s-st--done .s-ico path { stroke-dasharray: 13; stroke-dashoffset: 0; }
.s-st--done.is-on .s-ico path { animation: s-draw .5s var(--ease) both; animation-delay: calc(.32s + var(--d, 0) * 70ms); }
@keyframes s-draw { from { stroke-dashoffset: 13; } }
.s-st--wait.is-on, .s-st--done.is-on, .s-bar .s-chip.is-on .s-ico { animation: s-pop .55s var(--ease) both; animation-delay: calc(.22s + var(--d, 0) * 70ms); }
@keyframes s-pop { 0% { scale: .55; } 60% { scale: 1.1; } 100% { scale: 1; } }
.s-press { position: relative; }
:is(.s-row, .s-layer, .s-lane):has(.s-press.is-on) { z-index: 3; }
.s-ptr { position: absolute; top: 58%; left: 62%; z-index: 3; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; }
.s-cursor { display: block; flex: none; width: 1.55em; height: 1.55em; filter: drop-shadow(0 .12em .2em rgba(15, 42, 29, .35)); }
.s-ptr__tag { margin: 1.2em 0 0 -.3em; padding: .34em .6em .36em; border-radius: .2em .55em .55em .55em; font: 600 .8em/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; color: #fff; background: var(--forest-2); box-shadow: 0 .35em .7em -.35em rgba(15, 42, 29, .45); }
.s-ptr__tag--amber { background: #9a5a1a; }
.s-ptr__tag--sky { background: #2f6aa8; }
.s-press.is-on { animation: s-press 2.4s var(--ease) both; animation-delay: var(--cd, 1.2s); }
.s-press.is-on .s-ptr { animation: s-cursor 2.4s var(--ease) both; animation-delay: var(--cd, 1.2s); }
.s-press::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.s-press.is-on::after { animation: s-ripple 2.4s ease-out both; animation-delay: var(--cd, 1.2s); }
@keyframes s-cursor { 0% { opacity: 0; transform: translate(2.6em, 2em); } 22% { opacity: 1; } 46% { transform: translate(0, 0); } 53% { transform: translate(0, 0) scale(.82); } 61% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(.3em, .4em); } }
@keyframes s-press { 0%, 49% { scale: 1; } 55% { scale: .92; } 64%, 100% { scale: 1; } }
@keyframes s-ripple { 0%, 50% { opacity: 0; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 54% { opacity: 1; } 88%, 100% { opacity: 0; box-shadow: 0 0 0 .8em rgba(52, 211, 153, 0); } }
.s-type { display: inline-block; white-space: nowrap; vertical-align: bottom; }
.s-type.is-on { animation: s-type calc(var(--n) * 70ms + 140ms) steps(var(--n), end) both; animation-delay: var(--td, .3s); }
@keyframes s-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2px 0 0); } }
.s-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--forest-2); opacity: 0; }
.s-type.is-on + .s-caret { animation: s-caret .5s steps(1) 5 both; animation-delay: var(--td, .3s); }
@keyframes s-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@property --s-n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.s-count { --s-n: var(--s-to); font-weight: inherit; font-variant-numeric: tabular-nums; counter-reset: s-n var(--s-n); }
.s-count::before { content: attr(data-pre) counter(s-n) attr(data-post); }
.s-fx.is-on .s-count { animation: s-count 1.3s cubic-bezier(.16, .8, .24, 1) both; animation-delay: calc(.3s + var(--d, 0) * 70ms); }
@keyframes s-count { from { --s-n: var(--s-from); } }
.s-pulse .s-ico { transform-origin: 50% 25%; animation: s-ring 1.3s ease-in-out infinite; }
@keyframes s-ring { 0%, 60%, 100% { rotate: 0deg; } 15% { rotate: 16deg; } 30% { rotate: -13deg; } 45% { rotate: 7deg; } }
.s-chip--struck { color: var(--ink-3); }
.s-chip--struck span { text-decoration: line-through; text-decoration-color: rgba(28, 51, 38, .45); }
.s-spinico .s-ico { animation: s-rot 2.6s linear infinite; }
.s-fx.is-on .s-slide { animation: s-slide .8s var(--ease) both; animation-delay: .22s; }
@keyframes s-slide { from { opacity: 0; translate: 2.2em 0; } }
.s-kbd { display: inline-flex; align-items: center; gap: .22em; }
.s-kbd kbd { display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .38em; border-radius: .42em; font: 500 .66em/1 var(--sans); color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--s-line), 0 1px 0 var(--s-line); }
.s-flow { position: relative; }
.s-packet { position: absolute; top: 50%; left: 50%; width: .5em; height: .5em; margin: -.25em 0 0 -.25em; border-radius: 50%; background: var(--mint-3); box-shadow: 0 0 0 .2em rgba(52, 211, 153, .2); opacity: 0; pointer-events: none; }
.s-packet.is-on { animation: s-packet 1.5s var(--ease) .25s 2 both; }
@keyframes s-packet { 0% { opacity: 0; transform: translateX(-2.4em) scale(.6); } 25%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(2.4em) scale(1); } }
.s-mini__bar { position: relative; display: block; height: .3em; margin: .28em 0 .12em; overflow: hidden; border-radius: 1em; background: var(--s-soft); }
.s-mini__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--r) * 100%); min-width: .3em; border-radius: inherit; background: var(--mint-3); }
.s-lane.is-on .s-mini__fill { animation: s-shrink 1.6s var(--ease) .5s both; }
.s-lane.is-on .s-mini + .s-mini .s-mini__fill { animation-delay: .75s; }
@keyframes s-shrink { from { width: 100%; background: #c3cbc6; } }
.s-net .scan { fill: none; stroke: var(--mint-3); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 12 132.5; opacity: 0; transform-origin: 50px 50px; transition: opacity .5s; }
.story--cross-currency[data-step="1"] .s-net .scan { opacity: .9; animation: s-rot 1.8s linear infinite; }

/* ---- story detail, final pass ------------------------------------------------ */
.story::before { content: ""; position: absolute; inset: -12%; z-index: -1; pointer-events: none; background: radial-gradient(62% 72% at var(--s-gx) var(--s-gy), var(--s-glow), transparent 70%); animation: s-drift 16s ease-in-out infinite alternate; }
@keyframes s-drift { 0% { transform: translate3d(-3%, 2%, 0) scale(1); } 100% { transform: translate3d(3%, -2%, 0) scale(1.06); } }
.story.is-away::before { animation-play-state: paused; }
.story::after { content: "Paused"; position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; height: 22px; padding: 0 9px 0 23px; border-radius: 99px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: linear-gradient(#48524c, #48524c) 10px 50% / 2px 8px no-repeat, linear-gradient(#48524c, #48524c) 14px 50% / 2px 8px no-repeat, rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--s-line), 0 6px 14px -8px rgba(15, 42, 29, .35); opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .25s, transform .4s var(--ease); }
.story.is-paused::after { opacity: 1; transform: none; transition-delay: .45s; }
.s-prog { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 4px; pointer-events: none; }
.s-prog i { position: relative; width: 16px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(28, 51, 38, .13); }
.s-prog b { position: absolute; inset: 0; border-radius: inherit; background: var(--forest-2); transform: scaleX(0); transform-origin: 0 50%; }
.s-row { position: relative; isolation: isolate; }
.s-row__hold, .s-sweep::before { position: absolute; top: .22em; right: -.5em; bottom: .22em; left: -.5em; z-index: -1; border-radius: .55em; pointer-events: none; opacity: 0; }
.s-row__hold { background: rgba(253, 235, 211, .72); box-shadow: inset 2px 0 0 #e7a55f; transition: opacity .5s var(--ease); }
.s-row__hold.is-on { opacity: 1; transition-delay: .2s; }
.s-sweep::before { content: ""; background: linear-gradient(90deg, rgba(138, 190, 240, .3), rgba(138, 190, 240, .07)); box-shadow: inset 2px 0 0 #6d9fd6; }
.s-sweep.is-on::before { animation: s-rowsweep 1.5s var(--ease) both; animation-delay: var(--fd, 0s); }
@keyframes s-rowsweep { 0% { opacity: 0; } 18%, 55% { opacity: 1; } 100% { opacity: 0; } }
.s-packet-m { display: flex; align-items: center; gap: .55em; min-width: 0; }
.s-track--mini { flex: none; width: 6em; height: .5em; }
.s-grow { position: absolute; top: 0; bottom: 0; left: 0; width: 78%; border-radius: inherit; background: #8abef0; }
.s-fx.is-on .s-grow { animation: s-growx 2.4s var(--ease) .5s both; }
@keyframes s-growx { from { width: 0; } }
.s-redux { display: grid; gap: .34em; width: 14em; max-width: 100%; }
.s-redux__r { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 2.7em; align-items: center; gap: .45em; }
.s-redux__k { font: 500 .58em/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.s-redux__bar { display: block; width: var(--w); height: .46em; border-radius: 1em; background: #c3cbc6; }
.s-redux__bar--mint { background: var(--mint-3); }
.s-fx.is-on .s-redux__bar { animation: s-growx 1.1s var(--ease) .45s both; }
.s-fx.is-on .s-redux__bar--mint { animation-delay: .8s; }
.s-redux__v { font-weight: 500; font-size: .8em; letter-spacing: -.02em; white-space: nowrap; }
.story--platform:not([data-step="4"]) .s-layers::before { animation: s-spine 1.1s linear infinite; }
@keyframes s-spine { to { background-position: 0 .56em; } }
.story--idea.is-wait .s-frame { opacity: 0; }
.story--idea.is-boot .s-frame { animation: s-boot .8s var(--ease) .1s both; }
.wrow__phases [data-phase] { transition: color .4s; }
.wrow__phases .is-cur { color: var(--accent-ink); }
.wrow__arr { opacity: .55; }

/* ---- story detail, per story ------------------------------------------------ */
.s-vrow { margin: 0 -.45em; padding: 0 .45em; border-radius: .5em; transition: background-color .6s var(--ease); }
.s-vrow--bad.is-on { background: rgba(253, 235, 211, .72); }
.s-dot { left: calc(var(--v, .5) * 100%); transition: left 1s var(--ease), background-color .5s, opacity .45s; }
.story--valuation[data-step="0"] .s-dot { opacity: 0; }
.story--valuation[data-step="1"] .s-dot--bad { background: #de8a2e; }
.story--valuation[data-step="2"] .s-dot { background: var(--forest-2); }
.story--valuation[data-step="2"] .s-tl__gap { animation: s-grow 1s var(--ease) .35s both; }
.story--valuation[data-step="2"] .s-tl__check { animation: s-beat 1.1s var(--ease) .25s 2; }
@keyframes s-grow { from { clip-path: inset(0 100% 0 0); } }
@keyframes s-beat { 0% { box-shadow: 0 0 0 0 rgba(31, 107, 74, .38); } 100% { box-shadow: 0 0 0 .55em rgba(31, 107, 74, 0); } }
.s-layers { position: relative; }
.s-layers::before { content: ""; position: absolute; top: 1.4em; bottom: 1.4em; left: 1.43em; width: 1px; background: repeating-linear-gradient(rgba(28, 51, 38, .22) 0 .3em, transparent .3em .56em); }
.s-layer { position: relative; grid-template-columns: 1.95em minmax(0, 1fr) auto 1.45em; }
.s-layer > .s-swap--st { grid-column: 4; }
.s-layer__act { display: flex; grid-column: 3; }
.s-layer__n { transition: color .5s, background-color .5s, box-shadow .5s; }
.s-layer__n.is-on { color: var(--s-mint-t); background: var(--s-mint); box-shadow: none; }
.s-layer.is-on .s-layer__n { color: #fff; background: var(--forest-2); box-shadow: none; }
.s-sys { position: relative; }
.s-sys__ok { position: absolute; top: -.32em; right: -.32em; display: grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 50%; color: #fff; background: var(--forest-2); box-shadow: 0 0 0 .15em #fff; opacity: 0; scale: .4; transition: opacity .3s, scale .55s var(--ease); transition-delay: calc(.35s + var(--d, 0) * 90ms); }
.s-sys__ok .s-ico { width: .72em; height: .72em; }
.s-sys__ok.is-on { opacity: 1; scale: 1; }
.s-gap { position: absolute; top: 0; bottom: 0; left: 60%; width: 26%; background: repeating-linear-gradient(135deg, rgba(31, 107, 74, .34) 0 .16em, transparent .16em .42em); opacity: 0; transition: opacity .6s var(--ease); }
.s-gap.is-on { opacity: 1; transition-delay: 1s; }
.s-fields { display: flex; align-items: center; gap: .4em; min-width: 0; }
.s-field { display: inline-flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 .75em; border-radius: .6em; font-size: .78em; white-space: nowrap; background: var(--s-soft); }
.s-field__k { font: 500 .74em/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.s-field .s-type { font-weight: 500; line-height: 1.2; color: var(--ink); }
.s-field__to { display: grid; color: var(--ink-3); }
.s-field__to .s-ico { width: .85em; height: .85em; }
.s-scan.is-on { animation: s-scanchip 2.4s var(--ease) infinite; animation-delay: calc(var(--d, 0) * .5s); }
@keyframes s-scanchip { 0%, 44%, 100% { color: var(--ink-2); background: var(--s-soft); } 12%, 30% { color: var(--s-sky-t); background: var(--s-sky); } }
.s-board.is-on .s-trow { animation: s-focus 2.6s var(--ease) both; }
.s-board.is-on .s-trow:nth-child(1) { animation-delay: .1s; }
.s-board.is-on .s-trow:nth-child(2) { animation-delay: .6s; }
.s-board.is-on .s-trow:nth-child(3) { animation-delay: 1.1s; }
.s-board.is-on .s-trow:nth-child(4) { animation-delay: 1.6s; }
@keyframes s-focus { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(52, 211, 153, 0); } 6%, 20% { box-shadow: inset 0 0 0 1.5px var(--mint-3); } 28% { box-shadow: inset 0 0 0 0 rgba(52, 211, 153, 0); } }
.s-boardfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; padding: .15em 0 .75em; font-size: .72em; color: var(--ink-3); }
.s-boardfoot .s-kbd kbd { font-size: .86em; }
.story--raildrop[data-step="3"] .s-trow--best .s-price { animation: s-pop .6s var(--ease) .45s both; }
.s-disp { position: absolute; top: .15em; right: .25em; z-index: 1; display: block; width: 4.8em; height: 3.1em; overflow: hidden; border-radius: .45em; background: #fbfbf8; box-shadow: 0 0 0 1px var(--s-line), 0 .55em 1.1em -.6em rgba(15, 42, 29, .35); transition: background-color .8s var(--ease); }
.s-disp::after { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 18, .22); opacity: 0; transition: opacity .8s var(--ease); }
.s-disp__bar { position: absolute; top: 0; right: 0; left: 0; height: .6em; background: rgba(28, 51, 38, .08); }
.s-disp__badge { position: absolute; right: .3em; bottom: .3em; z-index: 1; display: grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; color: #fff; background: var(--forest-2); opacity: 0; scale: .5; transition: opacity .3s .45s, scale .55s var(--ease) .45s; }
.s-disp__badge .s-ico { width: .72em; height: .72em; }
.story--daylight[data-step="0"] .s-disp { animation: s-warm 6s linear infinite; }
.story--daylight:not([data-step="0"]) .s-disp::after { opacity: 1; }
.story--daylight[data-step="3"] .s-disp__badge { opacity: 1; scale: 1; }
@keyframes s-warm { 0%, 54% { background-color: #fbfbf8; } 58.5%, 75% { background-color: #fde2c2; } 79%, 92% { background-color: #fbca97; } 96%, 100% { background-color: #f9b57a; } }
.story--daylight[data-step="0"] .s-steps4 b { animation: 6s linear infinite; }
.story--daylight[data-step="0"] .s-steps4 .s-t1 { animation-name: s-t1; }
.story--daylight[data-step="0"] .s-steps4 .s-t2 { animation-name: s-t2; }
.story--daylight[data-step="0"] .s-steps4 .s-t3 { animation-name: s-t3; }
.story--daylight[data-step="0"] .s-steps4 .s-t4 { animation-name: s-t4; }
@keyframes s-t1 { 0%, 58% { color: #b4641d; } 58.5%, 100% { color: var(--ink); } }
@keyframes s-t2 { 0%, 58% { color: var(--ink); } 58.5%, 78.5% { color: #b4641d; } 79%, 100% { color: var(--ink); } }
@keyframes s-t3 { 0%, 78.5% { color: var(--ink); } 79%, 95.5% { color: #b4641d; } 96%, 100% { color: var(--ink); } }
@keyframes s-t4 { 0%, 95.5% { color: var(--ink); } 96%, 100% { color: #b4641d; } }
.s-fx.is-on .s-rung { animation: s-rungscan .55s var(--ease) backwards; animation-delay: calc(.35s + var(--i, 0) * 140ms); }
@keyframes s-rungscan { 0% { background-color: rgba(255, 255, 255, 0); } 45% { background-color: rgba(138, 190, 240, .32); } 100% { background-color: rgba(255, 255, 255, 0); } }
.s-hl { color: inherit; background: linear-gradient(transparent 58%, rgba(52, 211, 153, .38) 58%) no-repeat 0 0 / 100% 100%; }
.s-fx.is-on .s-hl { animation: s-mark .8s var(--ease) both; animation-delay: .55s; }
.s-fx.is-on .s-hl--2 { animation-delay: 1.35s; }
@keyframes s-mark { from { background-size: 0% 100%; } }
.s-read { align-items: center; }
.s-read__to { display: grid; color: var(--ink-3); }
.s-read__to .s-ico { width: .8em; height: .8em; }

/* Gridiron: the slate, a drive drawn only from reported spots, named sources, a scoring play */
.gr-slate { display: grid; padding: .85em 0 .95em; }
.gr-slate__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 0 .75em; }
.gr-live { display: inline-flex; align-items: center; gap: .5em; font: 500 .66em/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.gr-live b { margin-left: .1em; font: 400 2.5em/1 var(--sans); letter-spacing: -.05em; color: var(--ink); }
/* The pulse rides a pseudo-element on scale and opacity. Growing a box-shadow
   restyles and repaints the dot every frame; the halo it leaves behind is the
   same shape and the compositor draws it alone. */
.gr-dot { position: relative; display: block; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--mint-3); box-shadow: 0 0 0 .2em rgba(52, 211, 153, .2); }
.gr-dot::after { content: ''; position: absolute; inset: -.16em; border-radius: 50%; background: rgba(52, 211, 153, .24); animation: gr-live 2.2s ease-in-out infinite; will-change: transform, opacity; }
.s-chip .gr-dot { width: .6em; height: .6em; margin-left: -.1em; }
@keyframes gr-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(2.1); opacity: 0; } }
.gr-games { display: grid; gap: .2em; }
.gr-g { position: relative; display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto auto; align-items: center; gap: .75em; min-height: 2.65em; margin: 0 -.5em; padding: .3em .5em; border-radius: .7em; }
.gr-g__clock { display: grid; place-items: center; height: 2.15em; border-radius: .5em; font: 500 .72em/1 var(--mono); letter-spacing: .02em; white-space: nowrap; color: var(--ink); background: var(--s-soft); }
.gr-g__t { display: grid; gap: .16em; min-width: 0; }
.gr-g__t b { overflow: hidden; font-weight: 500; font-size: .84em; letter-spacing: -.012em; white-space: nowrap; text-overflow: ellipsis; }
.gr-g__t small { overflow: hidden; font-size: .66em; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.gr-g__t small i { margin-right: .55em; font: 500 .9em/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--s-sky-t); }
.gr-g__sc { display: flex; align-items: center; gap: .55em; font: 500 .84em/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.gr-g__sc i { width: 1px; height: 1.05em; background: rgba(28, 51, 38, .16); }
.gr-g--pick { z-index: 1; background: #fff; box-shadow: 0 0 0 1.5px var(--mint-3), 0 .8em 1.6em -1em rgba(15, 42, 29, .3); }
.gr-g--pick .gr-g__clock { color: #fff; background: var(--forest-2); }
.s-fx.is-on .gr-g { animation: s-boot .6s var(--ease) calc(.15s + var(--i, 0) * 90ms) backwards; }
.gr-pitch { position: relative; margin: .75em 0 .3em; overflow: hidden; border-radius: .9em; background: radial-gradient(110% 130% at 50% -10%, #2a5341 0%, #173427 48%, #0e2018 100%); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .16), 0 .7em 1.5em -1em rgba(15, 42, 29, .6); }
.gr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gr-slab { fill: #08130d; }
.gr-turf { fill: #1d4533; stroke: rgba(167, 243, 208, .6); stroke-width: .9; stroke-linejoin: round; }
.gr-mow { fill: rgba(209, 250, 229, .04); }
.gr-ez { fill: rgba(110, 231, 183, .09); }
.gr-ezt { font: 600 5.4px/1 var(--mono); letter-spacing: .14em; fill: rgba(209, 250, 229, .55); transition: fill .6s; }
.gr-yl { fill: none; stroke: rgba(209, 250, 229, .2); stroke-width: .5; }
.gr-yl--10 { stroke: rgba(209, 250, 229, .36); stroke-width: .7; }
.gr-gl { fill: none; stroke: rgba(209, 250, 229, .7); stroke-width: 1; }
.gr-num { font: 500 5px/1 var(--mono); fill: rgba(209, 250, 229, .5); }
.gr-rz, .gr-td { opacity: 0; transition: opacity .6s var(--ease); }
.gr-rz { fill: rgba(244, 170, 92, .2); }
.gr-td { fill: #6ee7b7; }
.gr-rz.is-on { opacity: 1; }
.gr-td.is-on { opacity: .3; }
.gr-hop { fill: none; stroke: #6ee7b7; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; transition: opacity .6s var(--ease); }
.gr-hop--run { stroke: #a7f3d0; stroke-width: 1.4; }
.gr-spot { fill: #d1fae5; transition: opacity .6s var(--ease); }
.gr-los, .gr-ltg { fill: none; opacity: 0; transition: opacity .5s var(--ease); }
.gr-los { stroke: #8abef0; stroke-width: 1.5; }
.gr-ltg { stroke: #f4aa5c; stroke-width: 1.6; }
.gr-los.is-on, .gr-ltg.is-on, .gr-hop--td.is-on { opacity: 1; }
.gr-hop--td { opacity: 0; }
.gr-ballg { transition: transform .9s var(--ease); }
.gr-ball { fill: #fbfaf7; }
.gr-lace { fill: none; stroke: #13241b; stroke-width: .45; stroke-linecap: round; }
.gr-halo { fill: none; stroke: #6ee7b7; stroke-width: .7; opacity: 0; transform-box: fill-box; transform-origin: center; }
.story--gridiron:not([data-step="1"]) :is(.gr-hop:not(.gr-hop--td), .gr-spot) { opacity: .45; }
.story--gridiron[data-step="1"] .gr-hop { animation: gr-draw .5s cubic-bezier(.45, 0, .25, 1) calc(.35s + var(--i, 0) * .19s) backwards; }
.story--gridiron[data-step="1"] .gr-spot { animation: i-fade .25s ease calc(.75s + var(--i, 0) * .19s) backwards; }
@keyframes gr-draw { from { stroke-dashoffset: 1; } }
.story--gridiron[data-step="1"] .gr-ballg { animation: gr-ball .6s var(--ease) 1.95s backwards; }
@keyframes gr-ball { from { opacity: 0; transform: translateY(-4px); } }
.story--gridiron[data-step="1"] :is(.gr-los, .gr-ltg) { animation: i-fade .6s var(--ease) 2.15s backwards; }
.story--gridiron[data-step="1"] .gr-rz { animation: i-fade .8s var(--ease) 2.3s backwards; }
.story--gridiron:is([data-step="1"], [data-step="2"]) .gr-halo { animation: gr-halo 1.9s ease-out 2.2s infinite; }
@keyframes gr-halo { 0% { opacity: .85; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.story--gridiron[data-step="3"] .gr-hop--td { animation: gr-draw .6s cubic-bezier(.45, 0, .25, 1) .4s backwards; }
.story--gridiron[data-step="3"] .gr-ballg { transform: translateX(var(--tx)); transition-delay: .4s; }
.story--gridiron[data-step="3"] .gr-td { animation: gr-td 1.8s ease-out .85s backwards; }
@keyframes gr-td { 0% { opacity: 0; } 25% { opacity: .8; } 100% { opacity: .3; } }
.story--gridiron[data-step="3"] .gr-ezt--lac { fill: #fff; }
.gr-bug { position: absolute; top: .55em; left: .6em; display: flex; align-items: center; gap: .5em; padding: .28em .32em .28em .62em; border-radius: .7em; white-space: nowrap; color: #f0f7f3; background: rgba(8, 18, 13, .6); box-shadow: inset 0 0 0 1px rgba(167, 243, 208, .16), 0 .5em 1em -.6em rgba(0, 0, 0, .5); }
.gr-bug__tm { display: inline-flex; align-items: center; gap: .38em; font: 500 .64em/1 var(--mono); letter-spacing: .09em; color: rgba(240, 247, 243, .8); }
.gr-bug__tm:last-child { padding-right: .35em; }
.gr-poss { display: block; width: .5em; height: .5em; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 .6em rgba(110, 231, 183, .9); }
.gr-bug__sc { min-width: .75em; font: 500 1.02em/1 var(--mono); text-align: center; font-variant-numeric: tabular-nums; }
.gr-bug__clock { padding: .26em .55em .3em; border-radius: .48em; text-align: center; background: rgba(240, 247, 243, .09); }
.gr-bug__clock .s-swap { justify-items: center; }
.gr-bug__clock b { display: block; font: 500 .64em/1.15 var(--mono); letter-spacing: .04em; }
.gr-bug__clock small { display: block; margin-top: .22em; font: 500 .54em/1 var(--mono); letter-spacing: .02em; color: rgba(240, 247, 243, .66); }
.gr-note { position: absolute; top: 1.05em; right: .85em; font: 500 .54em/1 var(--mono); letter-spacing: .04em; color: rgba(209, 250, 229, .56); }
.gr-src { display: inline-flex; align-items: center; gap: .55em; height: 1.9em; padding: 0 .75em; border-radius: 99em; font-size: .74em; line-height: 1; white-space: nowrap; background: var(--s-soft); }
.gr-src i { font: 500 .78em/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gr-src b { font-weight: 500; letter-spacing: -.004em; font-variant-numeric: tabular-nums; color: var(--ink); }
.gr-fill { display: flex; width: 100%; }
.gr-wp { display: flex; align-items: center; gap: .6em; width: 100%; min-width: 0; }
.gr-wp__tm { flex: none; font: 500 .6em/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.gr-wp__track { position: relative; display: block; flex: 1; min-width: 3em; height: .56em; overflow: hidden; border-radius: 1em; background: #d8ddd9; }
.gr-wp__lac { position: absolute; top: 0; right: 0; bottom: 0; width: calc((1 - var(--v, .5)) * 100%); border-radius: inherit; background: var(--forest-2); box-shadow: -.14em 0 0 #fff; transition: width 1.2s var(--ease); }
.gr-wp__v { flex: none; justify-items: end; min-width: 4.3em; }
.gr-wp__v b { font-weight: 500; font-size: .84em; letter-spacing: -.012em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
@container (max-width: 640px) {
  .gr-note { display: none; }
}
@container (max-width: 560px) {
  .gr-bug__clock small { display: none; }
}
@container (max-width: 430px) {
  .gr-g { grid-template-columns: 4em minmax(0, 1fr) auto auto; gap: .55em; }
  .gr-g:nth-child(4), .gr-slate__head .s-quiet, .gr-g__t small i, .gr-wp__tm { display: none; }
  .gr-pitch { margin-top: .55em; }
}

/* ---- ideas: writing covers and principle drawings ------------------------------ */
.story--idea .s-in { padding: 2.9em 1.4em 1.5em; font-size: clamp(9px, 3.05cqw, 14px); }
.story--note .s-in { font-size: clamp(9px, 3.3cqw, 15px); }
.story--tenet .s-in { padding: 1.3em 1.4em; }
.i-label { position: absolute; top: 1.45em; left: 1.7em; font: 500 .66em/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.i-box { position: relative; flex: none; }
.i-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.i-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.i-path { stroke: rgba(28, 51, 38, .2); stroke-width: 1.3; }
.i-path--dash { stroke-dasharray: 3 3.2; }
.i-run { stroke: var(--mint-3); stroke-width: 3; stroke-dasharray: 9 110; stroke-dashoffset: 9; opacity: 0; }
.i-run.is-on { animation: i-run 1.1s cubic-bezier(.45, 0, .2, 1) var(--rd, 0s) both; }
.i-run--amber { stroke: #e7a55f; }
@keyframes i-run { 0% { stroke-dashoffset: 9; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.i-lit { stroke: var(--accent-ink); stroke-width: 1.6; stroke-dasharray: 100 100; stroke-dashoffset: 0; opacity: 0; transition: opacity .3s; }
.i-lit.is-on { opacity: 1; animation: i-lit .9s var(--ease) var(--rd, 0s) both; }
.i-lit--dash { stroke-dasharray: 3 3.2; }
.i-lit--dash.is-on { animation-name: i-fade; }
@keyframes i-lit { from { stroke-dashoffset: 100; } }
@keyframes i-fade { from { opacity: 0; } }
.i-card { border-radius: .8em; background: var(--paper); box-shadow: 0 0 0 1px var(--s-line), 0 .7em 1.5em -1em rgba(15, 42, 29, .3); }
.i-box > .i-card, .i-pin, .i-router, .i-node, .i-bar, .i-num2, .i-agent, .i-ev, .i-seg, .i-seglab, .i-cp, .i-token, .i-live { position: absolute; }
.i-cap { margin-top: 1em; }
.i-pin--c { transform: translateX(-50%); }
.i-pin--c .s-swap { justify-items: center; }
/* writing 01 */
.i-action { display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 0 .95em; }
.i-action .s-swap { justify-items: start; }
.i-action__t { font-weight: 500; font-size: 1.02em; letter-spacing: -.02em; white-space: nowrap; }
.i-meter { display: flex; gap: .22em; }
.i-meter__b { width: 1.35em; height: .34em; border-radius: 1em; background: var(--s-soft); transition: background-color .5s var(--ease); }
.i-meter__b.is-on { background: var(--forest-2); transition-delay: .15s; }
.i-router { display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--forest-2); box-shadow: 0 0 0 .3em rgba(52, 211, 153, .18), 0 .5em 1em -.5em rgba(15, 42, 29, .5); }
.i-router .s-ico { width: 1.15em; height: 1.15em; }
.i-tier { display: flex; align-items: center; gap: .5em; padding: 0 .55em 0 .8em; opacity: .6; transition: opacity .5s, box-shadow .5s, transform .6s var(--ease); }
.i-tier.is-on { opacity: 1; box-shadow: 0 0 0 1.5px var(--mint-3), 0 .8em 1.6em -1em rgba(15, 42, 29, .32); transform: translateX(.25em); transition-delay: .95s; }
.i-tier__n { font-weight: 500; font-size: .82em; letter-spacing: -.012em; white-space: nowrap; }
.i-tier__c { margin-left: auto; font: 500 .7em/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.i-tier__ok { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; color: #fff; background: var(--forest-2); }
.i-tier__ok .s-ico { width: .85em; height: .85em; }
/* writing 02 */
.i-scope { width: 25em; padding: .85em 1em 1.15em; }
.i-head { display: flex; align-items: center; justify-content: space-between; gap: .8em; min-height: 1.9em; }
.i-track { position: relative; display: block; height: 1.6em; margin: 1em .7em 0; }
.i-track::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: .34em; margin-top: -.17em; border-radius: 1em; background: var(--s-soft); box-shadow: inset 0 0 0 1px var(--s-line); }
.i-fill { position: absolute; top: 50%; left: 0; width: calc(var(--v) * 20%); height: .34em; margin-top: -.17em; border-radius: 1em; background: var(--mint-3); transition: width 1s var(--ease); }
.i-notch { position: absolute; top: 50%; width: .5em; height: .5em; margin: -.25em 0 0 -.25em; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(28, 51, 38, .28); }
.i-knob, .i-lock { position: absolute; top: 50%; left: calc(var(--v) * 20%); border-radius: 50%; transition: left 1s var(--ease); }
.i-knob { width: 1.25em; height: 1.25em; margin: -.625em 0 0 -.625em; background: var(--forest-2); box-shadow: 0 0 0 .28em rgba(52, 211, 153, .28), 0 .3em .6em -.2em rgba(15, 42, 29, .5); }
.i-lock { display: grid; place-items: center; width: 1.45em; height: 1.45em; margin: -.725em 0 0 -.725em; color: var(--s-amber-t); background: var(--s-amber); box-shadow: 0 0 0 .2em #fff; transition-delay: .15s; }
.i-lock .s-ico { width: .85em; height: .85em; }
.i-nums { position: relative; display: block; height: 1em; margin: .5em .7em 0; }
.i-num { position: absolute; top: 0; transform: translateX(-50%); font: 500 .58em/1 var(--mono); color: var(--ink-3); }
.story--note-autonomy[data-step="0"] :is(.i-fill, .i-knob, .i-lock) { transition: none; }
.i-conds { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; margin-top: 1em; }
.i-cond { color: var(--s-mint-t); background: var(--s-mint); box-shadow: none; animation: .55s var(--ease) both; animation-delay: calc(.6s + var(--i) * .8s); }
.story--note-autonomy[data-step="0"] .i-cond { animation-name: i-earn0; }
.story--note-autonomy[data-step="1"] .i-cond { animation-name: i-earn1; }
.story--note-autonomy[data-step="2"] .i-cond { animation-name: i-earn2; }
@keyframes i-earn0 { from { color: var(--ink-3); background: #fff; box-shadow: inset 0 0 0 1px var(--s-line); } }
@keyframes i-earn1 { from { color: var(--ink-3); background: #fff; box-shadow: inset 0 0 0 1px var(--s-line); } }
@keyframes i-earn2 { from { color: var(--ink-3); background: #fff; box-shadow: inset 0 0 0 1px var(--s-line); } }
/* writing 03 */
.i-stack { display: grid; justify-items: center; gap: .8em; }
.i-model { display: flex; align-items: center; gap: .55em; transition: transform .7s var(--ease); }
.i-model.is-on { transform: translateY(-.3em); transition-delay: .35s; }
.i-model__b { display: flex; align-items: center; gap: .5em; height: 2.5em; padding: 0 1.1em 0 .85em; border-radius: .75em; color: #fff; background: var(--forest-3); box-shadow: 0 .8em 1.6em -.9em rgba(15, 42, 29, .6); transition: box-shadow .7s var(--ease); }
.i-model.is-on .i-model__b { box-shadow: 0 0 0 .3em rgba(52, 211, 153, .35), 0 1.1em 2em -1em rgba(15, 42, 29, .6); }
.i-model__b .s-ico { width: 1.05em; height: 1.05em; color: var(--mint-2); }
.i-model__b b { font-weight: 500; font-size: .9em; letter-spacing: -.012em; }
.i-model .s-swap { justify-items: start; }
.i-slabs { position: relative; display: grid; gap: .35em; width: 21em; }
.i-slab { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) 1.45em; align-items: center; gap: .5em; height: 2.3em; padding: 0 .6em 0 .8em; border-radius: .7em; background: var(--paper); box-shadow: 0 0 0 1px var(--s-line), 0 .4em .9em -.7em rgba(15, 42, 29, .3); }
.i-slab b { font-weight: 500; font-size: .84em; letter-spacing: -.012em; }
.i-ring { grid-area: 1 / 1; width: 1.45em; height: 1.45em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .16); }
.i-scan { position: absolute; right: -.7em; left: -.7em; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mint-3), transparent); box-shadow: 0 0 .8em rgba(52, 211, 153, .6); opacity: 0; pointer-events: none; }
.i-scan--lo.is-on { animation: i-scan-lo 1.9s var(--ease) .15s both; }
.i-scan--hi.is-on { animation: i-scan-hi 1.9s var(--ease) .15s both; }
@keyframes i-scan-lo { 0% { top: 100%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 50%; opacity: 0; } }
@keyframes i-scan-hi { 0% { top: 50%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }
/* principle 01 */
.i-node { display: flex; align-items: center; justify-content: center; border-radius: .65em; color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--s-line), 0 .5em 1.1em -.8em rgba(15, 42, 29, .35); transition: color .5s, background-color .5s, border-color .5s; }
.i-node > span:first-child { font-size: .8em; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.i-node--ex { color: var(--ink-2); background: rgba(255, 255, 255, .7); border: 1px dashed rgba(28, 51, 38, .34); box-shadow: none; }
.i-node--ex.is-on { color: var(--s-amber-t); background: var(--s-amber); border-color: #e7a55f; transition-delay: .9s; }
.i-node__ok { position: absolute; top: -.5em; right: -.5em; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; color: #fff; background: var(--forest-2); box-shadow: 0 0 0 .16em #fff; }
.i-node__ok .s-ico { width: .78em; height: .78em; }
/* principle 02 */
.i-bar { border-radius: .55em .55em .3em .3em; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .16); transition: background-color .7s var(--ease), box-shadow .7s; }
.i-bar--base, .i-bar.is-on { background: linear-gradient(180deg, rgba(52, 211, 153, .9), rgba(31, 107, 74, .92)); box-shadow: 0 .6em 1.2em -.8em rgba(15, 42, 29, .45); }
.i-bar.is-on { transition-delay: .15s; }
.i-bar:has(> .i-bar__lock.is-on) { background: rgba(253, 235, 211, .6); box-shadow: inset 0 0 0 1px #e7a55f; }
.i-bar__lock { position: absolute; top: .45em; left: 50%; display: grid; place-items: center; width: 1.35em; height: 1.35em; margin-left: -.675em; border-radius: 50%; color: var(--s-amber-t); background: var(--paper); box-shadow: 0 0 0 1px #e7a55f; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .5s var(--ease); }
.i-bar__lock.is-on { opacity: 1; transform: none; transition-delay: .45s; }
.i-bar__lock .s-ico { width: .8em; height: .8em; }
.i-num2 { text-align: center; }
.i-num2 span, .i-seglab span { font: 500 .64em/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.i-agent { left: calc(var(--v) * 3.45em + 1.35em); top: calc(7.1em - var(--v) * 1.25em); width: 0; height: 0; transition: left .9s var(--ease), top .9s var(--ease); }
.i-agent__dot { position: absolute; top: -.55em; left: -.55em; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--forest-3); box-shadow: 0 0 0 .26em rgba(52, 211, 153, .38); animation: .9s var(--ease) both; }
.i-agent__name { position: absolute; bottom: 1.05em; left: 0; justify-items: center; transform: translateX(-50%); }
.story--p-ladder[data-step="0"] .i-agent { transition: none; }
.story--p-ladder[data-step="0"] .i-agent__dot { animation-name: i-hop0; }
.story--p-ladder[data-step="1"] .i-agent__dot { animation-name: i-hop1; }
.story--p-ladder[data-step="2"] .i-agent__dot { animation-name: i-hop2; }
@keyframes i-hop0 { 45% { transform: translateY(-.9em); } }
@keyframes i-hop1 { 45% { transform: translateY(-.9em); } }
@keyframes i-hop2 { 45% { transform: translateY(-.9em); } }
.i-ev { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8em; }
.i-ev__t { height: .5em; }
.i-ev__f { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: inherit; background: var(--mint-3); transform-origin: 0 50%; opacity: 0; }
.i-ev__f.is-on { opacity: 1; animation: i-evfill 3.3s cubic-bezier(.3, .2, .2, 1) .3s both; }
@keyframes i-evfill { from { transform: scaleX(0); } }
/* principle 03 */
.i-seg { border-radius: 1em; background: rgba(28, 51, 38, .16); transform: scaleX(.975); }
.i-seg--live { background: rgba(52, 211, 153, .3); }
.i-seg--cleanup { background: repeating-linear-gradient(90deg, rgba(28, 51, 38, .2) 0 .5em, transparent .5em .9em); }
.i-live { border-radius: 1em; background: var(--mint-3); box-shadow: 0 0 1em rgba(52, 211, 153, .5); opacity: 0; transform: scaleX(.3); transform-origin: 0 50%; transition: opacity .5s, transform 1s var(--ease); }
.i-live.is-on { opacity: 1; transform: none; transition-delay: .45s; }
.i-seglab { text-align: center; }
.story--p-reliability[data-step="2"] .i-seglab--live span { color: var(--s-mint-t); }
.story--p-reliability[data-step="2"] .i-seglab--cleanup span { text-decoration: line-through; }
.i-cp { display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); background: var(--paper); box-shadow: 0 0 0 1px var(--s-line), 0 .4em .9em -.6em rgba(15, 42, 29, .35); transition: color .5s, background-color .5s, box-shadow .5s; }
.i-cp .s-ico { width: 1.1em; height: 1.1em; }
.i-cp.is-on { color: #fff; background: var(--forest-2); box-shadow: 0 0 0 .26em rgba(52, 211, 153, .24); transition-delay: var(--cd, 1.3s); }
.i-cp__l { position: absolute; bottom: calc(100% + .65em); left: 50%; transform: translateX(-50%); font: 500 .68em/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--ink-3); }
.i-token { border-radius: 50%; background: #e7a55f; box-shadow: 0 0 0 .22em rgba(231, 165, 95, .25); opacity: 0; }
.i-token.is-on { animation: i-token 1.6s cubic-bezier(.4, 0, .2, 1) .15s both; }
@keyframes i-token { 0% { opacity: 0; transform: translateX(0); } 12%, 70% { opacity: 1; } 72% { transform: translateX(var(--x)); } 100% { opacity: 0; transform: translateX(var(--x)) scale(1.9); } }

/* medium stages keep the window and drop what floats around it */
@container (max-width: 640px) {
  .s-in { padding: 1.1em 1.3em; }
  .s-float--tr, .s-float--bl { display: none; }
  .s-float--br { right: -.5em; bottom: -1.2em; }
  .s-win::after { display: none; }
  .s-win::before { right: 1.2em; bottom: -.42em; left: 1.2em; }
}
@container (max-width: 560px) {
  .s-chart__x, .s-layer__act, .s-boardfoot { display: none; }
}
/* small stages: the essential window only */
@container (max-width: 430px) {
  .s-in { padding: .75em; font-size: 11px; }
  .s-float { display: none; }
  .s-ttl small { display: none; }
  .s-row, .s-foot, .s-cmp__row { grid-template-columns: 4.6em minmax(0, 1fr) auto; }
  .s-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .s-legend, .s-flow, .s-lane__note, .s-systems, .s-plat > .s-flow, .s-panes { display: none; }
  .s-hide-sm, .s-win::before, .s-kbd, .s-field__to, .s-ptr__tag { display: none; }
  .s-chartcap { display: grid; margin-top: .35em; }
  .s-chartbox { padding: 0; }
  .s-daylight { padding: .55em 0 .7em; }
  .s-chart__x { display: inline; }
  .s-plat, .s-daylight { grid-template-columns: minmax(0, 1fr); }
  .s-vrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.4em 1.45em; }
  .s-vrow > :first-child { display: none; }
  .s-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story--raildrop .s-view .s-row:last-child, .story--incident-agent .s-row:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story::before, .story *, .story *::before, .story *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

.bay { position: relative; min-width: 0; }
.tele { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .05em; color: var(--ink-3); white-space: nowrap; }
.tele__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-3); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
.bay.is-held .tele__dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(244, 170, 92, .22); }
.bay.is-static .tele__dot { background: var(--ink-3); box-shadow: none; }

.bay--steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 330px); gap: 8px; padding: 8px; border-radius: 28px; background: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .05); }
.bay__main { display: flex; flex-direction: column; min-width: 0; }
.bay--steps .story { aspect-ratio: 16 / 9; }
.bay__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 12px 14px 14px; }
.bay__t { font: 500 11.5px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.bay__s { margin-top: 6px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.bay__big { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.bay__big b { font: 400 28px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
.bay__big span { margin-top: 6px; font: 400 12.5px/1.25 var(--sans); color: var(--ink-3); }
.bay__foot { padding: 12px 14px 4px; font: 400 11.5px/1.5 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.bay__side { display: flex; flex-direction: column; min-width: 0; padding: 14px 6px 8px; }
.bay__side-h { display: flex; justify-content: space-between; gap: 8px; padding: 0 8px 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bay__keys { letter-spacing: .03em; text-transform: none; }
.bay__steps { display: flex; flex-direction: column; gap: 4px; }
.step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; width: 100%; overflow: hidden; padding: 12px 12px 15px; border-radius: 16px; text-align: left; transition: background-color .3s, box-shadow .3s; }
.step:hover { background: rgba(var(--gl-rgb), .6); }
.step[aria-pressed="true"] { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px rgba(28, 51, 38, .4); }
.step__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 500 11px/1 var(--mono); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .3s, color .3s; }
.step[aria-pressed="true"] .step__n { color: #fff; background: var(--forest-2); box-shadow: none; }
.step__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; }
.step__l { font: 500 15px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.step__det { font: 400 11.5px/1.3 var(--mono); color: var(--ink-3); }
.step__t { display: none; margin-top: 2px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.step[aria-pressed="true"] .step__t { display: block; }
.step__prog { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(28, 51, 38, .07); opacity: 0; }
.step[aria-pressed="true"] .step__prog { opacity: 1; }
.step__prog i, .ptab__prog i { display: block; height: 100%; background: var(--mint-3); transform: scaleX(0); transform-origin: 0 50%; }
.bay__read { margin-top: auto; padding: 16px 8px 4px; font: 400 12.5px/1.5 var(--sans); color: var(--ink-3); }
.bay__read-k { display: block; margin-bottom: 5px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bay__status { display: flex; align-items: center; gap: 12px; padding: 12px 8px 2px; }
.rail { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(28, 51, 38, .1); }
.rail__tick { position: absolute; top: -3px; width: 1px; height: 8px; background: rgba(28, 51, 38, .3); }
.rail__play { position: absolute; left: 0; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--forest-2); box-shadow: 0 0 0 3px rgba(31, 107, 74, .16); }

.bay--compact { display: flex; flex-direction: column; gap: 10px; }
.bay__ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bay__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ptab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; overflow: hidden; padding: 0 12px 0 6px; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--ink-3); background: rgba(var(--gl-rgb), .6); box-shadow: inset 0 0 0 1px var(--line); transition: color .25s, background-color .25s, box-shadow .25s; }
.ptab:hover { color: var(--ink); background: var(--paper); }
.ptab[aria-pressed="true"] { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 14px -10px rgba(28, 51, 38, .4); }
.ptab__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 500 10.5px/1 var(--mono); background: rgba(28, 51, 38, .06); transition: background-color .25s, color .25s; }
.ptab[aria-pressed="true"] .ptab__n { color: #fff; background: var(--forest-2); }
.ptab__prog { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; }
.ptab[aria-pressed="true"] .ptab__prog { opacity: 1; }
.bay__cap { display: flex; flex-direction: column; gap: 5px; min-height: 3.6em; }
.bay__note { font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.bay--compact .bay__foot { padding: 0; font-size: 11px; }
/* on a phone the phase tabs keep to one row: the current phase shows its name, the others their number */
@media (max-width: 560px) {
  .bay__tabs { flex-wrap: nowrap; gap: 5px; }
  .ptab { gap: 0; padding: 0 6px; }
  .ptab__l { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .5s var(--ease), padding .5s var(--ease), opacity .3s; }
  .ptab[aria-pressed="true"] { padding-right: 12px; }
  .ptab[aria-pressed="true"] .ptab__l { max-width: 14em; padding-left: 7px; opacity: 1; }
}

/* ---- sections ----------------------------------------------------------------- */
.sect { position: relative; padding: var(--sect) 0; }
.sect--tight { padding: clamp(36px, 5vw, 64px) 0; }
.sect--flush { padding-top: 0; }
.shead { max-width: 840px; margin-bottom: clamp(40px, 5vw, 64px); }
.shead--center { display: flex; flex-direction: column; align-items: center; margin-left: auto; margin-right: auto; text-align: center; }
.shead__lede { max-width: 54ch; margin-top: 20px; font: 400 clamp(17px, 1.3vw, 19px)/1.55 var(--sans); letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; }
.shead--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 40px; max-width: none; }
.shead__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.shead__aside .shead__lede { margin-top: 0; }
.shead .actions { margin-top: 28px; }
.shead--dark .h2 { color: #fff; }
.shead--dark .tone { color: rgba(167, 243, 208, .7); }
.shead--dark .shead__lede { color: var(--on-dark-2); }

/* ---- home ------------------------------------------------------------------------ */
.mq { padding: clamp(52px, 6.5vw, 84px) 0 clamp(8px, 2vw, 24px); }
.mq__head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; text-align: center; }
.mq__label { font: 500 14px/1.3 var(--sans); color: var(--ink-2); }
.mq__note { font: 400 12.5px/1.4 var(--sans); color: var(--ink-3); }
.mq__view { display: flex; overflow: hidden; contain: paint; padding: 6px 0 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq__track { display: flex; flex: none; gap: 12px; padding-right: 12px; animation: marquee 52s linear infinite; }
.mq__view:hover .mq__track { animation-play-state: paused; }
.mq__item { display: flex; align-items: center; justify-content: center; flex: none; height: 58px; padding: 0 28px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--gl-rgb), .92); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.mq__item--text { gap: 10px; padding: 0 24px; font: 500 15px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); white-space: nowrap; }
.mq__ico { flex: none; width: 17px; height: 17px; color: var(--accent-ink); }
.mark { display: block; flex: none; max-width: 100%; width: calc(var(--h) * var(--ar)); height: var(--h); background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fcard { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 12px; border-radius: 34px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.fcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), var(--sh-3); }
.fcard__copy { display: flex; flex-direction: column; padding: 22px 22px 2px; }
.fcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 12.5px/1.2 var(--sans); color: var(--ink-3); }
.fcard__kind { color: var(--ink-2); }
.fcard__h { margin-top: 16px; font: 450 clamp(23px, 2.1vw, 29px)/1.13 var(--sans); letter-spacing: -.032em; text-wrap: balance; }
.fcard__h a:hover { color: var(--accent-ink); }
.fcard__p { max-width: 58ch; margin-top: 12px; font: 400 16px/1.55 var(--sans); color: var(--ink-2); }
.fcard__go { margin-top: 20px; }
.fcard .bay__ctl, .fcard .bay__cap { padding: 0 8px; }
.fcard .bay__cap { padding-bottom: 8px; }
.fcard--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 12px; }
.fcard--wide .fcard__copy { padding: 28px 16px 28px 28px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 8px; margin-top: 22px; }
.stat { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 14px 14px 13px; border-radius: 16px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.stat__v { overflow: hidden; margin: -.14em 0; padding: .14em 0; font: 400 clamp(21px, 1.9vw, 27px)/1 var(--sans); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.stat__k { font: 400 12.5px/1.35 var(--sans); color: var(--ink-3); text-wrap: balance; }

.ledger { margin-top: 16px; padding: 12px; border-radius: 34px; background: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .05); }
.ledger__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 18px 18px 16px; }
.ledger__k { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ledger__h { margin-top: 10px; font: 450 22px/1.2 var(--sans); letter-spacing: -.026em; }
.lrows { display: flex; flex-direction: column; gap: 4px; }
.lrow { display: grid; grid-template-columns: 96px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr) 20px; align-items: center; gap: 16px; min-height: 64px; padding: 10px 18px; border-radius: 20px; background: rgba(var(--gl-rgb), .55); transition: background-color .3s, box-shadow .3s; }
.lrow:hover { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 12px 26px -18px rgba(28, 51, 38, .4); }
.lrow__id { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.lrow__name { font: 500 16.5px/1.2 var(--sans); letter-spacing: -.02em; }
.lrow__kind, .lrow__m { font: 400 14px/1.3 var(--sans); color: var(--ink-3); }
.lrow__m b { margin-right: 4px; font-weight: 500; color: var(--ink); }
.lrow__go { color: var(--ink-3); transition: transform .35s var(--ease), color .2s; }
.lrow:hover .lrow__go { color: var(--ink); transform: translateX(4px); }

.labsband { padding: 0 var(--inset); }
.labsband__card { position: relative; overflow: hidden; padding: var(--sect) 0; border-radius: 38px; color: var(--on-dark); background: var(--forest-3); background-image: radial-gradient(80% 55% at 18% 0%, rgba(110, 231, 183, .17), transparent 62%), radial-gradient(60% 50% at 92% 100%, rgba(52, 211, 153, .12), transparent 62%), var(--dots); background-size: auto, auto, 24px 24px; }
.labgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.labcard { display: flex; flex-direction: column; padding: 10px; border-radius: 30px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: background-color .4s, box-shadow .4s, transform .5s var(--ease); }
.labcard:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(167, 243, 208, .3); }
.labcard__screen { display: block; }
.labcard .story { aspect-ratio: 16 / 11; border-radius: 22px; }
/* four products sit in two pairs; on wide screens each card lays its story beside its words */
.labgrid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1025px) {
  .labgrid--pairs .labcard { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); align-items: stretch; }
  .labgrid--pairs .labcard .story { height: 100%; min-height: 270px; aspect-ratio: auto; }
  .labgrid--pairs .labcard__body { padding: 14px 8px 8px 16px; }
  .labgrid--pairs .labcard__links { column-gap: 14px; }
}
.labcard__body { display: flex; flex: 1; flex-direction: column; padding: 18px 12px 12px; }
.labcard__k { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); }
.labcard__h { margin-top: 12px; font: 450 30px/1.05 var(--sans); letter-spacing: -.038em; color: #fff; }
.labcard__h a:hover { color: var(--mint); }
.labcard__tag { margin-top: 8px; font: 500 15px/1.35 var(--sans); letter-spacing: -.012em; color: var(--mint-2); }
.labcard__p { margin-top: 10px; font: 400 15px/1.55 var(--sans); color: var(--on-dark-2); }
.labcard__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 18px; }
.labsband .tlink { color: var(--on-dark); }
.labsband .tlink--quiet { color: var(--on-dark-2); }

.tenets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tenet { display: flex; flex-direction: column; padding: 12px; border-radius: 30px; background: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .05); transition: background-color .4s, box-shadow .4s; }
.tenet:hover { background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
.tenet__art { display: block; aspect-ratio: 16 / 10; border-radius: 22px; }
.tenet__art > .story { height: 100%; aspect-ratio: auto; border-radius: inherit; transition: box-shadow .4s; }
.tenet:hover .tenet__art > .story { box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .12); }
.tenet__n { padding: 18px 14px 0; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.tenet__t { padding: 10px 14px 0; font: 450 21px/1.2 var(--sans); letter-spacing: -.026em; }
.tenet__b { padding: 10px 14px 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.tenet__rel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: auto; padding: 18px 14px 10px; font: 400 13px/1 var(--sans); color: var(--ink-3); }
.tenet__rel > span:first-child { margin-right: 12px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tenet__rel .tlink { font-size: 14px; }

.ncards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ncard__a { display: flex; flex-direction: column; height: 100%; }
.ncard__cover { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 26px; transition: transform .7s var(--ease), box-shadow .4s; }
.ncard__cover > .story { height: 100%; aspect-ratio: auto; border-radius: inherit; }
.ncard__a:hover .ncard__cover { transform: scale(.985); }
.ncard__body { display: flex; flex: 1; flex-direction: column; padding: 18px 8px 4px; }
.ncard__tag { font: 500 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.ncard__t { margin-top: 10px; font: 450 21px/1.25 var(--sans); letter-spacing: -.026em; color: var(--ink); text-wrap: balance; }
.ncard__d { margin-top: 8px; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.ncard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font: 500 14px/1 var(--sans); color: var(--accent-ink); }
.ncard__a:hover .ncard__go .ico { transform: translateX(3px); }
.ncards--page .ncard__t { font-size: clamp(22px, 2vw, 26px); }

.contact__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 38px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-3); }
.contact__l { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; overflow: hidden; padding: clamp(28px, 4vw, 56px); color: var(--on-dark); background: var(--forest-3); background-image: var(--dots); background-size: 22px 22px; }
.contact__l .slabel { align-self: flex-start; }
.contact__h { position: relative; z-index: 1; max-width: none; font: 400 clamp(34px, 3.2vw, 46px)/1.02 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.contact__orb { position: absolute; right: -130px; top: -150px; width: 340px; height: 340px; border-radius: 50%; background: var(--orb); opacity: .7; filter: blur(2px); animation: drift 16s ease-in-out infinite alternate; }
.contact__r { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 4vw, 56px); }
.contact__k { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.contact__p { font: 400 18px/1.55 var(--sans); letter-spacing: -.012em; color: var(--ink-2); }

/* ---- page heads ------------------------------------------------------------------ */
.phead { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(52px, 7.5vw, 100px) 0 clamp(44px, 6vw, 76px); }
.phead::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -200px; width: min(1000px, 100%); height: 640px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(110, 231, 183, .17), transparent 72%); }
.phead .h1 { max-width: 18ch; }
.phead--writing .h1 { max-width: none; }
.phead__lede { max-width: 56ch; margin-top: 22px; font: 400 clamp(17px, 1.35vw, 20px)/1.55 var(--sans); letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; }
.phead .actions { margin-top: 30px; }
.phead--center .phead__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.phead--center .h1 { max-width: 20ch; }
.phead__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 36px; }
.work__locus { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.facet__n { margin-left: 2px; font: 500 10.5px/1 var(--mono); color: var(--ink-3); }

/* ---- labs ------------------------------------------------------------------------ */
.labindex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 920px; margin-top: 44px; text-align: left; }
.labindex__a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.labindex__a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); }
.labindex__n { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.labindex__name { font: 500 18px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.labindex__tag { font: 400 13.5px/1.35 var(--sans); color: var(--ink-3); }
.labindex--four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1080px; }
@media (max-width: 1024px) {
  .labindex--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.labfeat { padding: clamp(44px, 6vw, 80px) 0; scroll-margin-top: 90px; }
.labfeat + .labfeat .labfeat__grid { padding-top: clamp(44px, 6vw, 80px); border-top: 1px solid var(--line); border-image: linear-gradient(90deg, transparent, var(--line) 7%, var(--line) 93%, transparent) 1; }
.labfeat__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.labfeat--rev .labfeat__copy { order: 2; }
.labfeat--rev .labfeat__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.labfeat__k { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.labfeat__n { color: var(--ink); }
.labfeat__h { margin-top: 14px; font: 400 clamp(40px, 4.6vw, 64px)/1 var(--sans); letter-spacing: -.048em; }
.labfeat__tag { margin-top: 12px; font: 450 clamp(19px, 1.6vw, 22px)/1.3 var(--sans); letter-spacing: -.02em; color: var(--accent-ink); }
.labfeat__blurb { margin-top: 14px; font: 400 17px/1.6 var(--sans); color: var(--ink-2); }
.labfeat .ticks { margin-top: 22px; }
.labfeat .ticks li { font-size: 15.5px; }
.labfeat .actions { margin-top: 26px; }
.labfeat__bay .bay--compact { padding: 10px; border-radius: 32px; background: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .05); }
.labfeat__bay .bay__ctl, .labfeat__bay .bay__cap { padding: 0 6px; }
.labfeat__bay .bay__cap { padding-bottom: 6px; }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rules--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rules--four .rule__h { font-size: clamp(24px, 2.1vw, 30px); }
@media (max-width: 1180px) {
  .rules--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rule { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 400px; overflow: hidden; padding: 28px; border-radius: 30px; color: var(--forest-3); background: #aaf0cf; box-shadow: inset 0 0 0 1px rgba(38, 74, 54, .1), 0 30px 64px -34px rgba(28, 51, 38, .4); }
.rule::before { content: attr(data-words); position: absolute; z-index: -1; top: 16px; left: -12%; right: -12%; font: 500 56px/1.02 var(--sans); letter-spacing: -.045em; word-spacing: .12em; color: rgba(19, 36, 27, .075); }
.rule__k { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(19, 36, 27, .78); }
.rule__h { font: 400 clamp(28px, 2.7vw, 36px)/1.05 var(--sans); letter-spacing: -.042em; color: var(--forest-3); }
.rule__p { font: 400 15.5px/1.55 var(--sans); color: rgba(19, 36, 27, .84); }
@media (min-width: 901px) { .rule__p { min-height: calc(1.55em * 5); } }
.visit { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; overflow: hidden; padding: clamp(28px, 4.5vw, 64px); border-radius: 38px; color: var(--on-dark); background: var(--forest-3); background-image: var(--dots); background-size: 22px 22px; box-shadow: var(--sh-3); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.visit:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(28, 51, 38, .05), 0 40px 80px -30px rgba(28, 51, 38, .45); }
.visit__orb { position: absolute; z-index: -1; right: 18%; top: -70%; width: 460px; height: 460px; border-radius: 50%; background: var(--orb); opacity: .5; filter: blur(10px); transition: transform 1.4s var(--ease); }
.visit:hover .visit__orb { transform: translate(-24px, 24px) scale(1.06); }
.visit__copy { display: flex; flex-direction: column; gap: 12px; }
.visit__k { font: 500 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--mint-2); }
.visit__h { font: 400 clamp(34px, 4vw, 56px)/1.02 var(--sans); letter-spacing: -.045em; color: #fff; }
.visit__p { max-width: 50ch; font: 400 17px/1.55 var(--sans); color: var(--on-dark-2); }
.visit:hover .visit__go .ico--ext { transform: translate(2px, -2px); }

/* ---- work ------------------------------------------------------------------------- */
.wrows { display: flex; flex-direction: column; gap: 16px; }
.wrow { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 12px; padding: 12px; border-radius: 34px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.wrow:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), var(--sh-3); }
.wrow.is-out { display: none; }
.wrow__main { display: flex; flex-direction: column; padding: 22px 16px 18px 20px; }
.wrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fchip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 12px/1 var(--sans); color: var(--chip-forest); background: rgba(52, 211, 153, .15); }
.fchip--markets { color: var(--chip-amber); background: rgba(244, 170, 92, .2); }
.fchip--independent { color: var(--chip-sky); background: rgba(138, 190, 240, .24); }
.wrow__org { font: 400 13px/1.2 var(--sans); color: var(--ink-3); }
.wrow__title { margin-top: 16px; font: 450 clamp(22px, 2vw, 28px)/1.15 var(--sans); letter-spacing: -.032em; color: var(--ink); text-wrap: balance; }
.wrow__role { margin-top: 8px; font: 500 13.5px/1.3 var(--sans); color: var(--ink-3); }
.wrow__lede { max-width: 54ch; margin-top: 12px; font: 400 15.5px/1.55 var(--sans); color: var(--ink-2); }
.wrow__metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wmetric { display: inline-flex; align-items: baseline; gap: 8px; min-height: 36px; padding: 9px 12px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.wmetric > b { font: 500 16px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.wmetric > i { font: normal 400 12.5px/1.3 var(--sans); color: var(--ink-3); }
.wrow__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font: 500 14px/1 var(--sans); color: var(--accent-ink); }
.wrow__main:hover .wrow__go .ico, .wrow.is-locus .wrow__go .ico { transform: translateX(4px); }
.wrow__aside { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wrow__story { display: flex; flex: 1; min-height: 250px; }
.wrow__story .story { flex: 1; aspect-ratio: auto; border-radius: 24px; }
.wrow__phases { padding: 0 8px; font: 500 11.5px/1.4 var(--mono); color: var(--ink-3); }
.wrow__live { padding: 0 8px 6px; font-size: 14px; }
.rows__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.notes__foot { margin-top: 18px; }
.rows__foot .notes__foot { margin-top: 0; }
.rows__foot .tbtn { margin-left: auto; }

/* ---- case --------------------------------------------------------------------------- */
.casehead { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(36px, 5vw, 60px) 0 clamp(32px, 4vw, 48px); }
.casehead::before { content: ""; position: absolute; z-index: -1; left: 30%; top: -220px; width: min(900px, 100%); height: 620px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(110, 231, 183, .16), transparent 72%); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--ink-3); }
.crumb a { color: var(--ink-2); transition: color .2s; }
.crumb a:hover, .crumb [aria-current] { color: var(--ink); }
.casehead__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: end; gap: clamp(32px, 5vw, 72px); margin-top: 30px; }
.casehead__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 13px/1.2 var(--sans); color: var(--ink-2); }
.casehead__read { color: var(--ink-3); }
.casehead__h { margin-top: 20px; font: 400 clamp(36px, 3.9vw, 56px)/1.03 var(--sans); letter-spacing: -.046em; text-wrap: balance; }
.casehead__lede { max-width: 54ch; margin-top: 20px; font: 400 clamp(17px, 1.35vw, 20px)/1.55 var(--sans); letter-spacing: -.012em; color: var(--ink-2); }
.casehead__meta { margin-top: 22px; }
.casehead .actions { margin-top: 26px; }
.casehead__metrics { display: flex; flex-direction: column; gap: 8px; }
.cmetric { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 18px 20px; border-radius: 22px; text-align: left; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.cmetric:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); }
.cmetric > b { font: 400 34px/1 var(--sans); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmetric > span { font: 400 13.5px/1.3 var(--sans); color: var(--ink-3); }
.casebay { padding-bottom: 12px; }
.beatbar { position: sticky; top: 76px; z-index: 40; display: flex; justify-content: center; margin-top: 28px; padding: 0 var(--gutter); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
/* past the end of the case, the bar gets out of the way of the next-case card and the page links */
.beatbar.is-past { opacity: 0; transform: translateY(-8px); }
.beatbar.is-past .beatbar__in { pointer-events: none; }
/* on wide screens the side card already lists every section, so the bar keeps only its name and progress */
@media (min-width: 1025px) { .beatbar .beatbar__nav { display: none; } .beatbar .beatbar__in { max-width: 560px; } }
.beatbar__in { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 980px; height: 50px; overflow: hidden; padding: 0 6px 0 18px; border-radius: 999px; pointer-events: auto; background: rgba(var(--gl-rgb), .82); box-shadow: 0 0 0 1px var(--line), 0 16px 36px -20px rgba(28, 51, 38, .36); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.beatbar__id { display: flex; flex: none; align-items: center; gap: 10px; font: 500 13px/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.beatbar__id b { font-weight: 600; color: var(--ink); }
.beatbar__idx { font: 500 11px/1 var(--mono); }
.beatbar__nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.beatbar__nav::-webkit-scrollbar { display: none; }
/* when the beats do not fit, the edges fade instead of cutting a label in half */
.beatbar__nav { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.beatbar__nav.is-scroll-l { --fl: 32px; }
.beatbar__nav.is-scroll-r { --fr: 40px; }
.beatbar__nav a { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--ink-3); white-space: nowrap; transition: color .2s, background-color .2s; }
.beatbar__nav a span { font: 500 10px/1 var(--mono); opacity: .75; }
.beatbar__nav a:hover { color: var(--ink); background: rgba(28, 51, 38, .05); }
.beatbar__nav a[aria-current] { color: #fff; background: var(--forest-2); }
.beatprog { position: absolute; left: 20px; right: 20px; bottom: 0; display: flex; gap: 3px; height: 2px; }
.beatprog i { flex: 1; background: rgba(28, 51, 38, .08); transition: background-color .3s; }
.beatprog i.is-done { background: rgba(52, 211, 153, .55); }
.beatprog i.is-on { background: var(--mint-3); }
.casebody { padding: clamp(40px, 5vw, 64px) 0 var(--sect); }
.casebody__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: clamp(32px, 5.5vw, 80px); }
.caseside { position: sticky; top: 142px; }
.caseside__card { padding: 18px; border-radius: 24px; background: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .05); }
.facts { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
.facts dt { font: 500 10px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { font: 400 13.5px/1.45 var(--sans); color: var(--ink); }
.facts .tlink { font-size: 13.5px; }
.caseside__h { margin: 16px 0 8px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.toc { display: flex; flex-direction: column; gap: 1px; max-height: max(160px, calc(100vh - 470px)); overflow-y: auto; }
.toc a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font: 400 13.5px/1.25 var(--sans); color: var(--ink-2); transition: background-color .2s, color .2s, box-shadow .2s; }
.toc a span { font: 500 10px/1 var(--mono); color: var(--ink-3); }
.toc a:hover { color: var(--ink); background: rgba(var(--gl-rgb), .75); }
.toc a[aria-current] { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.caseside__tools { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 14px; }
.caseside__tools [data-beat-name] { display: inline-block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.casearticle { min-width: 0; max-width: 800px; }
/* a rule fades out at both ends rather than stopping dead against the page */
.beat { padding: 38px 0 46px; border-top: 1px solid var(--line); border-image: linear-gradient(90deg, transparent, var(--line) 9%, var(--line) 91%, transparent) 1; scroll-margin-top: 150px; }
.beat:first-child { padding-top: 0; border-top: 0; border-image: none; }
.beat__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.beat__n { flex: none; font: 500 12px/1 var(--mono); color: var(--ink-3); transition: color .3s; }
.beat.is-on .beat__n { color: var(--accent-ink); }
.beat__h { font: 450 clamp(24px, 2.2vw, 30px)/1.15 var(--sans); letter-spacing: -.032em; color: var(--ink); }
.beat__p { max-width: 56ch; font: 400 clamp(17px, 1.3vw, 19px)/1.65 var(--sans); letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; }
.beat__note { margin-top: 14px; padding: 14px 18px; border-radius: 16px; font: 400 15px/1.55 var(--sans); color: var(--ink-2); background: var(--ground-2); box-shadow: inset 3px 0 0 var(--mint-3); }
.ticks { display: flex; flex-direction: column; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .22em; width: 20px; height: 20px; border-radius: 50%; background: rgba(52, 211, 153, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.5l4.4-4.9' fill='none' stroke='%231f6b4a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ticks--sm { gap: 8px; }
.ticks--sm li { padding-left: 28px; font-size: 15px; }
.ticks--sm li::before { top: .18em; width: 18px; height: 18px; background-size: 10px; }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.flow__step { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 18px; border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.flow__step + .flow__step::before { content: ""; position: absolute; top: 50%; left: -10px; width: 10px; height: 1px; background: var(--line-2); }
.flow__k { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.flow__k i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; color: var(--ink-2); background: var(--ground-2); }
.flow__step:last-child .flow__k i { color: #fff; background: var(--forest-2); }
.flow__step strong { font: 500 17px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.flow__step p { font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.gridl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gridl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gridl li { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.gridl b { font: 500 16.5px/1.3 var(--sans); letter-spacing: -.018em; color: var(--ink); }
.gridl p { font: 400 14.5px/1.55 var(--sans); color: var(--ink-2); }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.specs div { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; box-shadow: inset 0 -1px 0 var(--line), inset -1px 0 0 var(--line); }
.specs dt { font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.specs dd { font: 500 15.5px/1.35 var(--sans); letter-spacing: -.012em; color: var(--ink); }
.beat--role .chips { margin-top: 18px; }
.beat__cta { margin-top: 22px; }
.embed { margin-top: 22px; overflow: hidden; border-radius: 24px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-3); }
.embed__bar { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; background: var(--ground-2); box-shadow: inset 0 -1px 0 var(--line); }
.embed__dots { display: flex; gap: 6px; }
.embed__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(28, 51, 38, .15); }
.embed__url { display: flex; flex: 1; align-items: center; justify-content: center; max-width: 360px; height: 28px; margin: 0 auto; overflow: hidden; padding: 0 12px; border-radius: 9px; font: 400 12.5px/1 var(--mono); color: var(--ink-3); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.embed__live { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); color: var(--accent-ink); }
.embed__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-3); box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
.embed__frame { position: relative; height: min(720px, 78vh); background: #0b0f14; }
.embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__still { position: absolute; inset: 0; z-index: 1; display: block; transition: opacity .32s ease; }
.embed__still img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.embed.is-live .embed__still { opacity: 0; pointer-events: none; }
.embed__cap { padding: 12px 16px; font: 400 12.5px/1.5 var(--sans); color: var(--ink-3); box-shadow: inset 0 1px 0 var(--line); }
.closeout { display: flex; flex-direction: column; gap: 18px; margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--line); }
.nextcard { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; padding: 10px; border-radius: 30px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.nextcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), var(--sh-3); }
.nextcard__copy { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.nextcard small { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nextcard strong { font: 450 28px/1.1 var(--sans); letter-spacing: -.036em; color: var(--ink); }
.nextcard em { font: normal 400 14px/1.35 var(--sans); color: var(--ink-3); }
.nextcard em b { font-weight: 500; color: var(--ink); }
.nextcard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font: 500 14px/1 var(--sans); color: var(--accent-ink); }
.nextcard:hover .nextcard__go .ico { transform: translateX(4px); }
.nextcard__img { overflow: hidden; border-radius: 22px; background: var(--ground-2); box-shadow: 0 0 0 1px var(--line); }
.nextcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.nextcard:hover .nextcard__img img { transform: scale(1.05); }
.closeout__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.also__k { margin-right: 12px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.also .tlink { font-size: 14px; }
.casenav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.casenav__a { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 20px; background: var(--ground-2); transition: background-color .3s, box-shadow .3s; }
.casenav__a:hover { background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.casenav__a--next { align-items: flex-end; text-align: right; }
.casenav small { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.casenav strong { font: 500 16px/1.2 var(--sans); letter-spacing: -.016em; }
.casearticle > .hint { margin-top: 18px; }

/* ---- approach ------------------------------------------------------------------------ */
.layers__note { margin-top: 14px; font: 500 12.5px/1.4 var(--mono); text-align: center; color: var(--ink-3); }
/* the ladder runs the full width under its heading, so every rung has room for its words */
.ladder__vis { padding: clamp(18px, 2.2vw, 28px); border-radius: 34px; background: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .05); }
.ladder__locus { padding: 2px 4px 0; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.rungs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 10px; min-height: 340px; margin-top: 20px; }
.rung { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; width: 100%; min-height: calc(136px + var(--i) * 40px); overflow: hidden; padding: 16px 14px; border-radius: 18px; text-align: left; background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: background-color .35s, box-shadow .35s, transform .35s var(--ease); }
.rung:hover { transform: translateY(-3px); }
.rung__bar { display: none; }
.rung small { font: 500 10.5px/1.2 var(--mono); color: var(--ink-3); }
.rung b { font: 500 clamp(13.5px, 1.15vw, 15.5px)/1.2 var(--sans); letter-spacing: -.016em; color: var(--ink); }
.rung__d { font: 400 clamp(12px, 1vw, 13px)/1.42 var(--sans); color: var(--ink-3); text-wrap: pretty; }
.rung.is-below { background: rgba(167, 243, 208, var(--mint-wash)); box-shadow: 0 0 0 1px rgba(52, 211, 153, .28); }
.rung.is-below .rung__d, .rung.is-below small, .rung.is-below b { color: var(--on-mint); }
.rung[aria-pressed="true"] { background: var(--forest-2); box-shadow: 0 18px 32px -16px rgba(19, 36, 27, .6); }
.rung[aria-pressed="true"] small, .rung[aria-pressed="true"] b, .rung[aria-pressed="true"] .rung__d { color: var(--on-dark); }
.ladder__read { margin-top: 20px; padding: 0 4px; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.ladder__read b { font-weight: 600; color: var(--ink); }

/* ---- about ----------------------------------------------------------------------------- */
.phead--about { padding-bottom: clamp(24px, 4vw, 48px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; gap: clamp(32px, 6vw, 88px); }
.about__copy .h1 { max-width: none; font-size: clamp(42px, 4.2vw, 60px); }
@media (min-width: 641px) { .about__role { white-space: nowrap; } }
.about__bio { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.about__bio p { font: 400 clamp(17px, 1.3vw, 19px)/1.6 var(--sans); letter-spacing: -.012em; color: var(--ink-2); }
.about__copy .actions { margin-top: 28px; }
.about__copy .mail { margin-top: 14px; }
.about__media { display: flex; flex-direction: column; gap: 10px; }
.portrait { overflow: hidden; border-radius: 34px; background: var(--ground-2); box-shadow: 0 0 0 1px var(--line), var(--sh-3); }
.portrait img { width: 100%; height: auto; filter: grayscale(1) contrast(1.04); transition: transform 1.2s var(--ease); }
.portrait:hover img { transform: scale(1.02); }
.edu { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 24px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.edu__logo { display: grid; flex: none; place-items: center; width: 124px; height: 68px; padding: 10px 14px; border-radius: 16px; color: var(--ink); background: var(--ground-2); }
.edu__school { font: 500 16px/1.25 var(--sans); letter-spacing: -.016em; }
.edu__deg { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.edu__note { margin-top: 2px; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.expgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.exp { display: flex; flex-direction: column; padding: 28px; border-radius: 34px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.exp__brand { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -14px -14px 0; padding: 14px 18px 14px 14px; border-radius: 20px; color: var(--on-dark); background-color: var(--forest-3); background-image: radial-gradient(70% 120% at 0% 0%, rgba(110, 231, 183, .16), transparent 62%), var(--dots); background-size: auto, 22px 22px; }
.exp__tile { display: flex; align-items: center; justify-content: center; min-width: 264px; min-height: 86px; padding: 18px 26px; border-radius: 14px; color: var(--ink); background: rgba(var(--gl-rgb), .97); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .55); }
.exp__when { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-align: right; text-transform: uppercase; color: var(--on-dark-3); }
.exp__when span:first-child { color: var(--on-dark); }
.exp__co { margin-top: 22px; font: 450 28px/1.1 var(--sans); letter-spacing: -.036em; }
.exp__parent { margin-top: 6px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.exp__roles { display: flex; flex-direction: column; gap: 20px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.role__t { font: 500 16px/1.3 var(--sans); letter-spacing: -.016em; }
.role__d { margin: 5px 0 12px; font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
.exp__cases { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.exp__k { margin-bottom: 10px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.exp__cases ul { display: flex; flex-wrap: wrap; gap: 8px; }
.casechip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 36px; padding: 6px 13px; border-radius: 18px; font: 500 13px/1.2 var(--sans); background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s, box-shadow .25s; }
.casechip:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.casechip__m { font-weight: 400; color: var(--ink-3); }
.casechip__n, .casechip__m { white-space: nowrap; }
.casechip__m b { font-weight: 500; color: var(--ink); }
.about__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.expcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1025px) { .expcol .earlier__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel { display: flex; flex-direction: column; padding: 26px; border-radius: 32px; background: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(28, 51, 38, .05); }
.panel__k { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.panel__h { margin-top: 10px; font: 450 24px/1.15 var(--sans); letter-spacing: -.03em; }
.panel__p { margin-top: 10px; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.panel__more { margin-top: auto; padding-top: 20px; }
.earlier__list, .alabs__list { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.early { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 18px; background: var(--paper); transition: box-shadow .3s; }
.early:hover { box-shadow: 0 0 0 1px var(--line-2); }
.early__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; color: var(--ink); }
.early__co { font: 500 14.5px/1.2 var(--sans); letter-spacing: -.012em; }
.early__role { font: 400 12.5px/1.35 var(--sans); color: var(--ink-3); }
.early__when { font: 500 10.5px/1 var(--mono); color: var(--ink-3); }
.alab { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; background: var(--paper); transition: box-shadow .3s; }
.alab:hover { box-shadow: 0 0 0 1px var(--line-2); }
.alab__k { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.alab__name { font: 500 16px/1.2 var(--sans); letter-spacing: -.016em; }
.alab__tag { font: 400 13px/1.3 var(--sans); color: var(--accent-ink); }
.skills__cols { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.skills__g h3 { margin-bottom: 8px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.skills__g .chips { gap: 6px; }
.skills__g .chips li { min-height: 28px; padding: 4px 10px; font-size: 12.5px; }
.inst { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4.5vw, 60px); border-radius: 38px; color: var(--on-dark); background: var(--forest-3); background-image: var(--dots); background-size: 22px 22px; }
.inst__h { font: 400 clamp(28px, 3.1vw, 42px)/1.06 var(--sans); letter-spacing: -.04em; color: #fff; }
.inst__p { margin-top: 16px; font: 400 16px/1.6 var(--sans); color: var(--on-dark-2); }
.inst__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inst__item { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 92px; padding: 16px 18px; border-radius: 20px; color: var(--ink); background: rgba(var(--gl-rgb), .96); }
.inst__name { font: 400 12px/1.3 var(--sans); color: var(--ink-3); }
dl.inst__grid .inst__item { justify-content: flex-start; gap: 6px; }
.inst__term { font: 500 17px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
dd.inst__name { margin: 0; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 640px) { dl.inst__grid { grid-template-columns: minmax(0, 1fr); } dl.inst__grid .inst__item { min-height: 0; } }

/* ---- 404 --------------------------------------------------------------------------------- */
.nf__path { display: flex; align-items: center; gap: 10px; margin-top: 24px; font: 500 13px/1 var(--sans); color: var(--ink-3); }
.nf__path code { padding: 7px 10px; border-radius: 9px; font: 500 13px/1 var(--mono); color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.nf__recent { margin-top: 18px; }
.nf__k { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nf__recent ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nf__recent a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; font: 500 13px/1 var(--sans); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.phead--nf .hint { margin-top: 18px; }

/* ---- footer ------------------------------------------------------------------------------ */
.ftr { padding: clamp(24px, 3vw, 40px) var(--inset) var(--inset); }
.ftr__card { position: relative; overflow: hidden; border-radius: 38px; color: var(--on-dark); background: var(--forest-3); background-image: var(--dots); background-size: 24px 24px; }
.ftr__in { max-width: calc(var(--wide) + var(--gutter) * 2); margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--gutter) 22px; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.ftr__role { margin-top: 14px; font: 400 14px/1.4 var(--sans); color: var(--on-dark-3); }
.ftr__quote { max-width: 26ch; margin-top: 18px; font: 400 22px/1.3 var(--sans); letter-spacing: -.026em; color: var(--on-dark); }
.ftr__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ftr__col { display: flex; flex-direction: column; gap: 11px; }
.ftr__h { margin-bottom: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.ftr__col a { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font: 400 14.5px/1.3 var(--sans); color: rgba(240, 247, 243, .88); transition: color .2s; }
.ftr__col a:hover { color: var(--mint); }
.ftr__word { margin-top: calc(clamp(36px, 6vw, 84px) - .2em); margin-bottom: -.2em; padding: .2em 0; font: 500 clamp(56px, 14.6vw, 204px)/.82 var(--sans); letter-spacing: -.062em; text-align: center; white-space: nowrap; color: transparent; background: linear-gradient(180deg, rgba(240, 247, 243, .34) 16%, rgba(240, 247, 243, .02) 77%); -webkit-background-clip: text; background-clip: text; user-select: none; }
.ftr__word span { background: linear-gradient(180deg, rgba(110, 231, 183, .85), rgba(110, 231, 183, .08) 90%); -webkit-background-clip: text; background-clip: text; }
/* the big word catches a light that follows the pointer across the footer */
@property --wl { syntax: "<number>"; inherits: false; initial-value: 0; }
.ftr__word { background-image: radial-gradient(clamp(150px, 20vw, 300px) circle at var(--wx, 50%) var(--wy, 50%), rgba(196, 250, 226, calc(var(--wl) * .8)), rgba(196, 250, 226, 0) 70%), linear-gradient(180deg, rgba(240, 247, 243, .34) 16%, rgba(240, 247, 243, .02) 77%); transition: --wl .8s var(--ease), opacity 1s var(--ease) .15s, transform 1.4s var(--ease) .1s; }
.ftr__word.is-lit { --wl: 1; }
.ftr__legal { flex: 1 0 100%; font: 400 12px/1.55 var(--sans); color: var(--on-dark-3); }
.ftr__legal a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 2px; }
.legal { gap: 26px; max-width: 820px; padding: clamp(24px, 4vw, 44px); }
.legal__h { font: 450 20px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.legal__part p { margin-top: 10px; max-width: 60ch; font: 400 16px/1.65 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(240, 247, 243, .1); border-image: linear-gradient(90deg, transparent, rgba(240, 247, 243, .14) 6%, rgba(240, 247, 243, .14) 94%, transparent) 1; font: 400 12.5px/1.4 var(--sans); color: var(--on-dark-3); }
.ftr__clock { margin-left: 8px; font-family: var(--mono); }

/* ---- overlays ----------------------------------------------------------------------------- */
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: rgba(var(--gl-rgb), .92); box-shadow: 0 0 0 1px var(--line), var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .45s var(--ease), visibility 0s; }
.totop:hover .ico { transform: translateY(-2px); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px; font: 500 14px/1.2 var(--sans); color: var(--on-dark); background: var(--forest-3); box-shadow: 0 18px 44px -18px rgba(15, 23, 18, .6); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity .3s, transform .5s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.gchip { position: fixed; left: 20px; bottom: 20px; z-index: 45; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 40px); padding: 7px 7px 7px 16px; border-radius: 999px; font: 400 13px/1.3 var(--sans); color: var(--ink-2); background: rgba(var(--gl-rgb), .96); box-shadow: 0 0 0 1px var(--line), var(--sh-2); animation: rise .6s var(--ease) both; }
.gchip b { padding: 3px 6px; border-radius: 6px; font: 500 11.5px/1 var(--mono); color: var(--ink); background: var(--ground-2); }
.gchip button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: #fff; background: var(--forest-2); }
.cmdk { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-start; justify-content: center; padding: max(11vh, 48px) 16px 16px; }
.cmdk__scrim { position: absolute; inset: 0; background: rgba(15, 23, 18, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s; }
.cmdk__panel { position: relative; display: flex; flex-direction: column; width: min(660px, 100%); max-height: min(600px, 78vh); overflow: hidden; border-radius: 26px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 44px 110px -34px rgba(15, 23, 18, .6); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s, transform .4s var(--ease); }
.cmdk.is-in .cmdk__scrim { opacity: 1; }
.cmdk.is-in .cmdk__panel { opacity: 1; transform: none; }
.cmdk__bar { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; box-shadow: inset 0 -1px 0 var(--line); }
.cmdk__glyph { display: grid; place-items: center; color: var(--ink-3); }
.cmdk__input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; font: 400 17px/1 var(--sans); letter-spacing: -.012em; color: var(--ink); background: transparent; }
.cmdk__input::placeholder { color: var(--ink-3); }
.cmdk__bar:focus-within { box-shadow: inset 0 -2px 0 var(--forest-2); }
.cmdk__esc { height: 28px; padding: 0 10px; border-radius: 8px; font: 500 11px/1 var(--mono); color: var(--ink-3); background: var(--ground-2); }
.cmdk__list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.cmdk__group { padding: 12px 10px 6px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmdk__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.cmdk__item > span:first-child { min-width: 0; }
.cmdk__item[aria-selected="true"] { background: var(--ground-2); box-shadow: inset 3px 0 0 var(--forest-2); }
.cmdk__label { display: block; overflow: hidden; font: 500 14.5px/1.3 var(--sans); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.cmdk__sub { display: block; margin-top: 2px; overflow: hidden; font: 400 12.5px/1.35 var(--sans); color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.cmdk__hint { flex: none; font: 500 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.cmdk__empty { padding: 20px 12px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.cmdk__foot { display: flex; gap: 18px; padding: 10px 18px; font: 400 12px/1 var(--sans); color: var(--ink-3); box-shadow: inset 0 1px 0 var(--line); }
.cmdk__foot kbd { margin-right: 2px; padding: 3px 5px; border-radius: 5px; font: 500 10.5px/1 var(--mono); color: var(--ink-2); background: var(--ground-2); }

/* ---- small motion: nav highlight and pointer light ------------------------------ */
.hdr__nav .nav__link, .hdr__nav .nav__more { position: relative; z-index: 1; }
.nav__hl { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 36px; border-radius: 999px; background: rgba(28, 51, 38, .065); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; }
.hdr__nav.is-hl .nav__hl { opacity: 1; }
.hdr__nav.has-hl .nav__link:not([aria-current]):hover, .hdr__nav.has-hl .nav__item:not(:has(.nav__link[aria-current])):hover, .hdr__nav.is-hl .nav__item.is-open:not(:has(.nav__link[aria-current])) { background: none; }
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(110, 231, 183, .11), transparent 45%); }
[data-spot].is-spot::before { opacity: 1; }
/* in page heads the dot grid lights up around the pointer; the lit dots land exactly on the page's own grid */
.gridlight { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); }
.is-gridlit > .gridlight { opacity: 1; }
.gridlight i { position: absolute; left: 0; top: 0; width: 440px; height: 440px; margin: -220px 0 0 -220px; transform: translate3d(var(--gl-x, -999px), var(--gl-y, -999px), 0); background-image: radial-gradient(circle at 1px 1px, rgba(31, 107, 74, .55) 1.1px, transparent 1.6px); background-size: 24px 24px; background-position: var(--gl-bx, 0) var(--gl-by, 0); -webkit-mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .5) 52%, transparent); mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .5) 52%, transparent); will-change: transform; }
/* ---- signature light and motion -------------------------------------------------- */
/* cards catch the light at their edge: a thin ring that follows the pointer */
.edge { position: relative; }
.edge::after {
  content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(var(--edge-r, 340px) circle at var(--ex, 50%) var(--ey, 50%), var(--edge-c, rgba(52, 211, 153, .9)), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s var(--ease);
}
.edge.is-edge::after { opacity: 1; }
/* and a soft light on the card itself, behind its content, like the dark panels have */
.edge:not(.rule):not(.ncard__cover) { isolation: isolate; }
.edge:not(.rule):not(.ncard__cover)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(520px circle at var(--ex, 50%) var(--ey, 50%), var(--edge-w, rgba(110, 231, 183, .1)), transparent 45%); opacity: 0; transition: opacity .6s var(--ease); }
.edge.is-edge::before { opacity: 1; }
.labcard.edge, .proof__item > a.edge { --edge-c: rgba(167, 243, 208, .95); --edge-w: rgba(110, 231, 183, .09); }
.rule.edge { --edge-c: rgba(31, 107, 74, .5); }

/* the ledger and the case chips carry a preview of the case beside the pointer */
.peek { position: fixed; left: 0; top: 0; z-index: 70; width: 288px; padding: 6px; border-radius: 22px; background: rgba(var(--gl-rgb), .96); box-shadow: 0 0 0 1px var(--line), 0 34px 70px -28px rgba(15, 42, 29, .5); pointer-events: none; opacity: 0; scale: .8; transform-origin: 0 50%; transition: opacity .3s var(--ease), scale .5s var(--ease); will-change: transform; }
.peek.is-flip { transform-origin: 100% 50%; }
.peek.is-on { opacity: 1; scale: 1; }
.peek img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--ground-2); }

/* wide screens: the page's sections on a quiet rail, a click from any of them */
.srail { position: fixed; right: 18px; top: 50%; z-index: 44; display: flex; flex-direction: column; gap: 2px; padding: 7px 5px; border-radius: 999px; background: rgba(var(--gl-rgb), .72); box-shadow: 0 0 0 1px var(--line), 0 16px 36px -20px rgba(28, 51, 38, .4); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); opacity: 0; visibility: hidden; transform: translate(14px, -50%); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.srail.is-on { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; }
.srail__a { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.srail__a i { width: 6px; height: 6px; border-radius: 50%; background: rgba(28, 51, 38, .24); transition: background-color .3s, transform .45s var(--ease), box-shadow .45s var(--ease); }
.srail__a:hover i { background: rgba(28, 51, 38, .55); }
.srail__a[aria-current="true"] i { background: var(--forest-2); transform: scale(1.4); box-shadow: 0 0 0 4px rgba(52, 211, 153, .22); }
.srail__a span { position: absolute; right: calc(100% + 12px); top: 50%; padding: 7px 11px; border-radius: 999px; font: 500 12.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; color: var(--on-dark); background: var(--forest-3); box-shadow: 0 0 0 1px rgba(167, 243, 208, .24), 0 12px 26px -14px rgba(15, 23, 18, .7); opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .2s, transform .35s var(--ease); }
.srail__a:hover span, .srail__a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.srail__a:focus-visible { outline-offset: 1px; }
@media (max-width: 1379px) { .srail { display: none; } }

/* case pages: one plate glides to the current section in the contents list */
.toc { position: relative; }
.toc a { position: relative; z-index: 1; }
.toc__ind { position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 0; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); pointer-events: none; opacity: 0; }
.toc__ind::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--mint-3); }
.toc.has-ind .toc__ind { opacity: 1; }
.toc.has-ind.is-set .toc__ind { transition: transform .5s var(--ease), height .5s var(--ease); }
.toc.has-ind a[aria-current] { background: none; box-shadow: none; }

/* the back-to-top button fills its ring as the page is read */
.totop__ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.totop__ring circle { fill: none; stroke: var(--mint-3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .15s linear; }

/* The ring around the back-to-top button is the same scroll progress the bar at
   the top of the page shows, drawn round a circle. Same trade as that bar: where
   the browser can run an animation against the scroll position itself it does,
   and the script stops writing stroke-dashoffset on every frame. The transition
   goes with it, because a scroll-driven animation is already continuous and a
   150ms ease on top of it only adds lag. */
@supports (animation-timeline: scroll()) {
  .totop__ring circle {
    transition: none;
    animation: totop-ring linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes totop-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* once, as the hero settles, a band of light runs along its quieter line */
.hero__line.tone { position: relative; }
.hero__sheen {
  position: absolute; inset: 0; color: #21b37a; text-wrap: balance; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(105deg, transparent 44%, #000 50%, transparent 56%); mask-image: linear-gradient(105deg, transparent 44%, #000 50%, transparent 56%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.hero__sheen.is-go { animation: sheen 1.7s cubic-bezier(.3, .1, .3, 1) both; }
@keyframes sheen { from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; } }
.mega__card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding: 8px 8px 10px; border-radius: 14px; transition: background-color .2s; }
.mega__card img { width: 100%; height: auto; margin-bottom: 7px; border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgba(15, 42, 29, .6); }
.mega__card-t { font: 450 16px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.mega__card small { font: 400 12px/1.3 var(--sans); color: var(--ink-3); }
.mega__card:hover { background: rgba(var(--gl-rgb), .85); }

/* ---- before and after ------------------------------------------------------------ */
.ba__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.ba__copy .tlink { margin-top: 22px; }
.ba { padding: 12px; border-radius: 34px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-3); }
.ba__bar { display: flex; justify-content: center; padding: 8px 8px 14px; }
.ba__rows { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 24px; background-color: var(--ground); background-image: radial-gradient(circle at 1px 1px, rgba(28, 51, 38, .12) 1px, transparent 1.3px); background-size: 18px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.ba__row { display: grid; grid-template-columns: 34px minmax(0, .85fr) minmax(0, 1.3fr) 18px; align-items: center; gap: 14px; min-height: 68px; padding: 10px 16px 10px 12px; border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(28, 51, 38, .05); transition: background-color .6s var(--ease), box-shadow .6s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s; }
.ba[data-state="after"] .ba__row { background: #b8f2d8; box-shadow: 0 0 0 1px rgba(38, 74, 54, .12), 0 12px 24px -18px rgba(28, 51, 38, .5); }
.ba__row:hover { transform: translateX(3px); }
.ba__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 500 11px/1 var(--mono); color: var(--ink-3); background: var(--ground-2); transition: background-color .6s, color .6s; }
.ba[data-state="after"] .ba__n { color: #fff; background: var(--forest-2); }
.ba__what b { display: block; font: 500 15px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.ba__what small { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--sans); color: var(--ink-3); transition: color .6s; }
.ba[data-state="after"] .ba__what small { color: #2a4637; }
.ba__val { display: grid; }
.ba__v { grid-area: 1 / 1; align-self: center; font: 500 14.5px/1.35 var(--sans); letter-spacing: -.012em; transition: opacity .5s var(--ease), transform .7s var(--ease), filter .5s; transition-delay: calc(var(--i, 0) * 70ms); }
.ba__v--before { color: var(--ink-2); }
.ba__v--after { color: var(--forest-3); }
.ba[data-state="after"] .ba__v--before, .ba[data-state="before"] .ba__v--after { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.ba__go { color: var(--ink-3); transition: transform .35s var(--ease), color .2s; }
.ba__row:hover .ba__go { color: var(--ink); transform: translateX(3px); }
.ba__foot { padding: 12px 14px 4px; font: 400 12.5px/1.4 var(--sans); text-align: center; color: var(--ink-3); }
.ba.is-instant, .ba.is-instant * { transition: none !important; }

/* ---- keyboard locus ------------------------------------------------------------------------ */
.is-locus:is(.fcard, .wrow, .labcard, .exp, .panel), .is-target:is(.fcard, .wrow, .labcard, .exp, .panel) { box-shadow: 0 0 0 2px var(--mint-3), var(--sh-2); }
.labcard.is-locus { box-shadow: inset 0 0 0 2px var(--mint-2); }
.ncard.is-locus .ncard__cover, .labfeat.is-locus .labfeat__bay .bay, .tenet.is-locus { box-shadow: 0 0 0 2px var(--mint-3); }
.beat.is-locus .beat__h, .beat.is-target .beat__h { color: var(--accent-ink); }

/* ---- motion ---------------------------------------------------------------------------------- */
@keyframes rim { to { --ang: 360deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* the hero text is on screen from the first paint, so it counts as the page's main content; it only comes into focus */
@keyframes rise-text { from { opacity: .12; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes panel { from { opacity: 0; transform: translateY(10px); } }
@keyframes ping { 0% { transform: scale(.55); opacity: 1; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes drift { to { transform: translate(-34px, -26px) scale(1.06); } }

/* blocks rise into place the first time they arrive (site.js adds .reveal-on);
   once arrived, .is-done hands transitions back to the block's own hover */
.reveal-on [data-reveal]:not(.is-done) { transition: opacity .62s var(--ease), transform .72s var(--ease), filter .62s var(--ease); transition-delay: calc(var(--rd, 0) * 70ms); }
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); filter: blur(3px); }
.reveal-on [data-reveal]:not(.is-in) .slabel__t::after { clip-path: inset(0 100% 0 0); }
/* a heading arrives one word after another: craft, rather than motion for its own sake */
.wd { display: inline-block; }
.reveal-on .wds .wd { transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--wd, 0) * 30ms); }
.reveal-on [data-reveal]:not(.is-in) .wds .wd { opacity: .06; transform: translateY(.34em); }
/* a heading already on screen plays on load, the way the hero does, and starts visible so it still counts as the page's main content */
.wds--load .wd { animation: wdrise .7s var(--ease) both; animation-delay: calc(var(--wd, 0) * 24ms); }
@keyframes wdrise { from { opacity: .12; transform: translateY(.34em); } }

@view-transition { navigation: auto; }
/* between pages the header holds still while the new page rises over the old one */
.hdr__bar { view-transition-name: jj-hdr; }
::view-transition-group(jj-hdr) { z-index: 3; animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) .08s both; }
/* a case's diagram carries across from the card that opened it */
@media (min-width: 1025px) { .casebay .story { view-transition-name: jj-art; } }
::view-transition-group(jj-art) { z-index: 2; animation-duration: .6s; animation-timing-function: var(--ease); }
::view-transition-old(jj-art), ::view-transition-new(jj-art) { animation-duration: .6s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---- responsive ------------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .hdr__resume { display: none; }
  .lrow { grid-template-columns: 84px minmax(0, 1.2fr) minmax(0, 1fr) 20px; }
  .lrow__kind { display: none; }
  .ftr__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftr__id { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .bay--steps { grid-template-columns: minmax(0, 1fr); }
  .bay__side { padding: 6px 4px 6px; }
  .bay__read { display: none; }
  .casehead__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .casehead__metrics { flex-direction: row; }
  .cmetric { flex: 1; }
  .casebody__grid { grid-template-columns: minmax(0, 1fr); }
  .caseside { position: static; }
  .caseside .toc, .caseside__h { display: none; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; padding-bottom: 0; }
  .casearticle { max-width: none; }
  .labgrid { grid-template-columns: minmax(0, 1fr); }
  .labcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .labcard .story { height: 100%; min-height: 240px; aspect-ratio: auto; }
  .about__more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .skills { grid-column: 1 / -1; }
  .wrow__story { min-height: 220px; }
}
@media (max-width: 900px) {
  :root { --hdr: 64px; }
  .hdr__nav, .hdr__resume { display: none; }
  .menu { display: block; }
  .hdr__bar { gap: 12px; }
  .hdr__tools { margin-left: auto; }
  .hdr.is-float .hdr__bar, .hdr.is-menu .hdr__bar { max-width: none; height: 54px; margin-top: 8px; padding: 0 7px 0 14px; }
  .beatbar { top: 70px; }
  .fgrid, .expgrid, .tenets, .ncards, .rules { grid-template-columns: minmax(0, 1fr); }
  .fcard--wide { grid-template-columns: minmax(0, 1fr); }
  .fcard--wide .fcard__copy { padding: 22px 22px 2px; }
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shead--split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .contact__card, .inst, .visit, .labfeat__grid, .about__grid, .wrow { grid-template-columns: minmax(0, 1fr); }
  .labfeat--rev .labfeat__copy { order: 0; }
  .labfeat--rev .labfeat__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__l { min-height: 300px; }
  .about__media { max-width: 520px; }
  .rule { min-height: 300px; }
  .ncard__cover { aspect-ratio: 16 / 10; }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lrow { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; padding: 14px 16px; }
  .lrow__id { grid-column: 1; }
  .lrow__name { grid-column: 1; }
  .lrow__m { grid-column: 1; }
  .lrow__go { grid-column: 2; grid-row: 1 / span 3; }
  .ledger__head { flex-direction: column; align-items: flex-start; }
  .labcard { grid-template-columns: minmax(0, 1fr); }
  .labcard .story { height: auto; min-height: auto; aspect-ratio: 16 / 11; }
  .about__more { grid-template-columns: minmax(0, 1fr); }
  .gridl, .gridl--3, .flow, .specs { grid-template-columns: minmax(0, 1fr); }
  .flow__step + .flow__step::before { top: -10px; left: 50%; width: 1px; height: 10px; }
  .labindex { grid-template-columns: minmax(0, 1fr); }
  .nextcard { grid-template-columns: minmax(0, 1fr); }
  .nextcard__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .hdr__cta { display: none; }
  .hero__h1 { margin-top: 20px; }
  .hero__stage > .stripes { top: 220px; border-radius: 26px 26px 0 0; }
  .hero__stage::before { top: 308px; border-radius: 0 0 26px 26px; }
  .show { padding: 6px; border-radius: 26px; }
  .bay--steps { padding: 6px; border-radius: 22px; }
  .bay__head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 8px 12px; }
  .bay__big { align-items: flex-start; text-align: left; }
  .story { border-radius: 16px; aspect-ratio: 4 / 3.4; }
  .bay__keys { display: none; }
  .proof__grid { gap: 8px; }
  .proof__item a { padding: 16px; border-radius: 18px; }
  .stats { grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 6px; }
  .stat { padding: 11px 10px; }
  .stat__v { font-size: 19px; }
  .fcard, .wrow, .exp, .panel, .labcard { border-radius: 26px; }
  .fcard__copy, .wrow__main { padding: 16px 12px 2px; }
  .casehead__metrics { flex-direction: column; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .beatbar { top: 68px; padding: 0 12px; }
  .beatbar__id span { display: none; }
  .embed__frame { height: 72vh; }
  .embed__url { display: none; }
  .mq__item { height: 50px; padding: 0 20px; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 18px; }
  .ftr__base { flex-direction: column; }
  .ftr, .labsband { padding-left: 6px; padding-right: 6px; }
  .labsband__card, .ftr__card { border-radius: 28px; }
  .mail__addr { font-size: 12.5px; }
  .gchip { display: none !important; }
}
@media (max-width: 480px) {
  .kbtn__k { display: none; }
  .seg__btn { height: 34px; padding: 0 11px; font-size: 13.5px; }
  .facet__n { display: none; }
  .btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .proof__v { font-size: 24px; }
  .rule { padding: 22px; }
}
@media (hover: none) {
  .fcard:hover, .wrow:hover, .labcard:hover, .cmetric:hover, .nextcard:hover, .visit:hover, .labindex__a:hover, .rung:hover { transform: none; }
}
@media (hover: none) and (pointer: coarse) {
  .hint[data-kbd], .bay__keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .mq__track { animation: none !important; }
  .mq__view { overflow-x: auto; }
  @view-transition { navigation: none; }
}

@media (max-width: 900px) {
  .ba__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .exp__brand { flex-direction: column; align-items: stretch; gap: 12px; }
  .exp__tile { min-width: 0; min-height: 76px; }
  .exp__when { flex-direction: row; justify-content: space-between; text-align: left; }
  .ba { padding: 8px; border-radius: 26px; }
  .ba__rows { padding: 6px; border-radius: 20px; }
  .ba__row { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 6px 12px; padding: 12px; }
  .ba__n { grid-row: 1 / span 2; width: 30px; height: 30px; }
  .ba__what, .ba__val { grid-column: 2; }
  .ba__go { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---- final pass: every label has room --------------------------------------------------- */
@media (max-width: 900px) {
  .rungs { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; min-height: 0; margin-top: 16px; }
  .rung { display: grid; grid-template-columns: 30px 120px minmax(0, 1fr); align-items: baseline; column-gap: 14px; row-gap: 4px; min-height: 0; padding: 15px 18px 17px; border-radius: 16px; }
  .rung:hover { transform: none; }
  .rung b { font-size: 15px; }
  .rung__d { font-size: 13.5px; }
  /* a rung's reach, drawn along its foot */
  .rung__bar { position: absolute; left: 0; bottom: 0; display: block; width: calc((var(--i) + 1) * 100% / 6); height: 3px; border-radius: 0 3px 3px 0; background: rgba(28, 51, 38, .1); }
  .rung.is-below .rung__bar { background: rgba(52, 211, 153, .6); }
  .rung[aria-pressed="true"] .rung__bar { background: var(--mint-2); }
}
@media (max-width: 520px) {
  .rung { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px 16px; }
  .rung__d { grid-column: 2; }
}
@media (max-width: 640px) {
  .beatbar__nav.is-scroll-l { --fl: 16px; }
  .beatbar__nav.is-scroll-r { --fr: 20px; }
}
/* on a phone the bar is all beats: the page title is already just above it */
@media (max-width: 480px) {
  .beatbar__in { padding-left: 6px; }
  .beatbar__id { display: none; }
  .beatbar__nav { margin-left: 0; }
}
/* the smallest stages: a window title wraps rather than trailing off */
.s-lane .s-skels { flex-wrap: wrap; row-gap: .35em; }
/* a figure in a stat column never outgrows the column */
.s-stat .s-swap > .s-fx { min-width: 0; max-width: 100%; }
@container (max-width: 340px) {
  .s-redux__r { grid-template-columns: minmax(0, 1fr) 2.7em; row-gap: .12em; }
  .s-redux__k { grid-column: 1 / -1; }
}
/* a 320px phone's cards: tighter tiles, wrapped layer names, a smaller principle drawing */
@container (max-width: 300px) {
  .story--tenet .s-in { padding: 1em .8em; font-size: 8.5px; }
  .s-mini { padding: .42em .38em .46em; }
  .s-mini b { font-size: .84em; letter-spacing: -.035em; }
  .s-q { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: .6em; }
  .s-q__t small { font-size: .58em; letter-spacing: -.01em; }
  .s-layer__t b { line-height: 1.2; white-space: normal; }
}
@container (max-width: 380px) {
  .s-lane .s-chip { height: auto; min-height: 1.9em; padding: .38em .62em; border-radius: .75em; line-height: 1.2; white-space: normal; }
}
@container (max-width: 320px) {
  .s-ttl b { overflow: visible; line-height: 1.15; white-space: normal; text-overflow: clip; }
  .s-lane .s-quiet { line-height: 1.25; white-space: normal; }
}
@media (max-width: 400px) {
  .contact__r { padding: 26px 18px; }
  .mail { padding-left: 14px; }
  .mail__addr { font-size: 12px; letter-spacing: -.025em; }
  .mail__copy { padding: 0 11px; }
}
@media (max-width: 359px) {
  .show__tl--long { display: none; }
  .show__ts { display: inline; }
  .seg__btn { padding: 0 10px; }
}
@media (max-width: 380px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 13px; }
  .stat__v { flex: none; }
  .stat__k { min-width: 0; text-align: right; }
}

/* ---- liquid glass ---------------------------------------------------------------- */
/* One material, three tints. Chromium bends the page through an SVG lens at the rim
   (.gl-on); every other browser keeps frosted glass. Both get the same rim of light,
   and a highlight that follows the pointer. */
/* no position or transition here: these surfaces are positioned and animated by their own rules */
.gl {
  background-color: rgba(var(--gl-rgb, 255, 255, 255), var(--gl-tint, .55));
  -webkit-backdrop-filter: var(--gl-fx, var(--gl-blur, blur(16px) saturate(1.8)));
  backdrop-filter: var(--gl-fx, var(--gl-blur, blur(16px) saturate(1.8)));
  box-shadow: inset 1.8px 1.8px 0 -.7px rgba(var(--gl-rim), 1), inset -1.4px -1.8px 0 -.7px rgba(var(--gl-rim), .62),
              inset 0 0 0 1px rgba(var(--gl-rim), .42), inset 0 0 26px rgba(var(--gl-rim), .14),
              0 0 0 .5px rgba(28, 51, 38, .07), var(--gl-drop, 0 14px 34px -16px rgba(15, 42, 29, .42));
}
/* the light the glass carries: one sheen across the face, one that follows the pointer */
.gl--spec { background-image: radial-gradient(240px circle at var(--gx, 50%) var(--gy, -10%), rgba(255, 255, 255, .5), transparent 62%), linear-gradient(118deg, rgba(255, 255, 255, .3) 0 15%, rgba(255, 255, 255, .06) 34%, rgba(255, 255, 255, 0) 54%); }
.gl--clear { --gl-tint: .3; --gl-blur: blur(5px) saturate(1.7); }
.gl--dark {
  background-color: rgba(11, 26, 19, var(--gl-tint, .44));
  box-shadow: inset 1.8px 1.8px 0 -.7px rgba(255, 255, 255, .5), inset -1.4px -1.8px 0 -.7px rgba(255, 255, 255, .18),
              inset 0 0 0 1px rgba(167, 243, 208, .22), inset 0 0 26px rgba(167, 243, 208, .07),
              var(--gl-drop, 0 18px 40px -18px rgba(0, 0, 0, .55));
}
.gl--dark.gl--spec { background-image: radial-gradient(260px circle at var(--gx, 50%) var(--gy, -10%), rgba(167, 243, 208, .22), transparent 62%), linear-gradient(118deg, rgba(255, 255, 255, .12) 0 15%, rgba(255, 255, 255, .02) 36%, rgba(255, 255, 255, 0) 54%); }
/* the lens takes over from the plain blur; it is set last so it wins over the tints above */
.gl-on { --gl-fx: var(--lg); }

/* floating chrome */
.hdr.is-float .hdr__bar.gl, .hdr.is-menu .hdr__bar.gl { --gl-tint: .46; --gl-drop: 0 20px 44px -22px rgba(15, 42, 29, .45); }
.hdr__bar.gl { background-color: rgba(var(--gl-rgb), 0); box-shadow: none; }
.hdr.is-float .hdr__bar.gl, .hdr.is-menu .hdr__bar.gl { background-color: rgba(var(--gl-rgb), .46); }
/* over the dark bands the bar takes the dark tint, and its rim quietens with it */
.hdr.is-float .hdr__bar.gl.gl--dark, .hdr.is-menu .hdr__bar.gl.gl--dark {
  --gl-tint: .54; background-color: rgba(11, 26, 19, .54);
  box-shadow: inset 1.6px 1.6px 0 -.6px rgba(255, 255, 255, .36), inset -1.2px -1.6px 0 -.6px rgba(255, 255, 255, .12),
              inset 0 0 0 1px rgba(167, 243, 208, .16), inset 0 0 22px rgba(167, 243, 208, .05), 0 20px 44px -22px rgba(0, 0, 0, .55);
}
.beatbar__in.gl { --gl-tint: .5; --gl-drop: 0 16px 36px -18px rgba(28, 51, 38, .4); }
.srail.gl { --gl-tint: .3; --gl-drop: 0 16px 36px -20px rgba(15, 42, 29, .45); }
.totop.gl { --gl-tint: .36; --gl-drop: 0 14px 30px -14px rgba(15, 42, 29, .45); }
.gchip.gl { --gl-tint: .54; }
.peek.gl { --gl-tint: .24; padding: 10px; }
.toast.gl { --gl-tint: .5; }
.drawer.gl, .mega.gl, .cmdk__panel.gl { --gl-tint: .64; --gl-drop: 0 44px 110px -34px rgba(15, 23, 18, .55); }
.seg.gl { --gl-rgb: var(--gl-rgb-2); --gl-tint: .4; --gl-drop: none; box-shadow: inset 1.4px 1.4px 0 -.6px rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(28, 51, 38, .1), inset 0 0 16px rgba(255, 255, 255, .1); }
.seg.gl .seg__ind { background: rgba(var(--gl-rgb), .92); box-shadow: inset 1px 1px 0 -.4px rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(28, 51, 38, .12), 0 8px 18px -10px rgba(28, 51, 38, .4); }
.kbtn.gl { --gl-tint: .4; --gl-drop: none; }
.kbtn.gl:hover { --gl-tint: .72; }
.btn--ghost.gl { --gl-tint: .52; --gl-drop: 0 1px 2px rgba(28, 51, 38, .06);
  box-shadow: inset 1.4px 1.4px 0 -.6px rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(28, 51, 38, .16), inset 0 0 14px rgba(255, 255, 255, .12), 0 1px 2px rgba(28, 51, 38, .06); }
.btn--ghost.gl:hover { --gl-tint: .8; box-shadow: inset 1.6px 1.6px 0 -.6px rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(28, 51, 38, .26), inset 0 0 14px rgba(255, 255, 255, .14), 0 10px 22px -12px rgba(28, 51, 38, .34); }
.btn.gl:active { --gl-tint: .7; }

/* surfaces that sit on the dark bands and on the dotted panels */
.labcard.gl { --gl-tint: .07; --gl-drop: 0 20px 44px -26px rgba(0, 0, 0, .6); }
.labcard.gl:hover { --gl-tint: .14; }
.proof__item > a.gl { --gl-tint: .07; --gl-drop: none; }
.proof__item > a.gl:hover { --gl-tint: .17; }
.inst__item.gl { --gl-tint: .7; --gl-drop: 0 10px 24px -16px rgba(0, 0, 0, .5); }
.labindex__a.gl { --gl-tint: .56; --gl-drop: 0 10px 24px -16px rgba(28, 51, 38, .3); }
.visit.gl { --gl-tint: .24; }

/* chrome over the dark bands takes the dark tint, and its labels follow */
.hdr .brand, .hdr .nav__link, .hdr .nav__more, .hdr .kbtn, .hdr .kbtn__k, .hdr .menu i { transition: color .35s, background-color .35s, box-shadow .35s; }
.hdr.is-float.is-over-dark .brand { color: #fff; }
.hdr.is-float.is-over-dark .nav__link, .hdr.is-float.is-over-dark .nav__more { color: rgba(240, 247, 243, .76); }
.hdr.is-float.is-over-dark .nav__link:hover, .hdr.is-float.is-over-dark .nav__link[aria-current] { color: #fff; }
.hdr.is-float.is-over-dark .nav__item:hover, .hdr.is-float.is-over-dark .nav__item:has(.nav__link[aria-current]), .hdr.is-float.is-over-dark .nav__hl { background: rgba(255, 255, 255, .12); }
.hdr.is-float.is-over-dark .kbtn.gl { --gl-tint: .1; color: rgba(240, 247, 243, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.hdr.is-float.is-over-dark .kbtn__k { color: rgba(240, 247, 243, .72); background: rgba(255, 255, 255, .12); }
.hdr.is-float.is-over-dark .hdr__cta { color: var(--forest-3); background: linear-gradient(180deg, #c2f8de 0%, #82ecc2 100%); }
.hdr.is-float.is-over-dark .menu { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.hdr.is-float.is-over-dark .menu i { background: var(--on-dark); }
.srail.gl.gl--dark, .totop.gl.gl--dark { --gl-tint: .34; }
.totop.gl.gl--dark { color: var(--on-dark); }
.srail.gl.gl--dark .srail__a i { background: rgba(240, 247, 243, .4); }
.srail.gl.gl--dark .srail__a[aria-current="true"] i { background: var(--mint-2); box-shadow: 0 0 0 4px rgba(110, 231, 183, .2); }

/* anyone who asks for less transparency gets plain surfaces */
@media (prefers-reduced-transparency: reduce) {
  .gl, .gl--flat { background-color: rgba(255, 255, 255, .97) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-image: none !important; }
  .gl--dark { background-color: rgba(14, 30, 22, .97) !important; }
  .gl--mint { background-color: rgba(163, 240, 203, .97) !important; }
}

/* ---- more glass: flat pills, mint glass, and the pressed state ------------------- */
/* flat glass: the tint and the rim without asking the compositor for a backdrop.
   It is what the small, numerous, moving pieces wear. */
.gl--flat {
  background-color: rgba(var(--gl-rgb, 255, 255, 255), var(--gl-tint, .68));
  box-shadow: inset 1.6px 1.6px 0 -.7px rgba(255, 255, 255, 1), inset -1.2px -1.4px 0 -.6px rgba(255, 255, 255, .6),
              inset 0 0 0 1px rgba(28, 51, 38, .1), inset 0 0 18px rgba(255, 255, 255, .16),
              var(--gl-drop, 0 6px 16px -10px rgba(28, 51, 38, .3));
}
.gl--mint {
  background-color: rgba(163, 240, 203, var(--gl-tint, .62));
  box-shadow: inset 1.6px 1.6px 0 -.6px rgba(255, 255, 255, .9), inset -1.2px -1.6px 0 -.6px rgba(255, 255, 255, .4),
              inset 0 0 0 1px rgba(31, 107, 74, .16), inset 0 0 22px rgba(255, 255, 255, .16),
              var(--gl-drop, 0 14px 34px -18px rgba(28, 51, 38, .35));
}
/* a glass control presses in: the bevel flattens, the tint drops */
.gl.btn:active, .gl--flat.btn:active, .kbtn.gl:active, .menu.gl:active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 2px 6px rgba(15, 42, 29, .16); }

/* the hero's showcase becomes a slab of glass over its dark stage */
/* the showcase keeps the paper tone of the page, so glass over the dark stage stays warm */
.show.gl { --gl-rgb: var(--gl-rgb-2); --gl-tint: .87; --gl-drop: 0 50px 100px -48px rgba(15, 42, 29, .6); }
.badge.gl { --gl-tint: .5; }
.caseside__card.gl { --gl-rgb: var(--gl-rgb-2); --gl-tint: .6; }
.nextcard.gl { --gl-tint: .7; --gl-drop: 0 18px 40px -22px rgba(28, 51, 38, .35); }
.embed__bar.gl { --gl-rgb: var(--gl-rgb-2); --gl-tint: .5; --gl-drop: none; }
.labfeat__bay .bay--compact.gl { --gl-rgb: var(--gl-rgb-2); --gl-tint: .5; --gl-drop: none; }
.rule.gl--mint { --gl-tint: .56; }
.menu.gl { --gl-tint: .44; }
.seg .seg__ind.gl { --gl-tint: .52; --gl-drop: 0 1px 2px rgba(28, 51, 38, .12), 0 8px 18px -10px rgba(28, 51, 38, .4); }
/* the small pieces */
.mq__item.gl--flat { --gl-tint: .58; --gl-drop: 0 8px 20px -12px rgba(28, 51, 38, .3); }
.chips li.gl--flat, .casechip.gl--flat { --gl-tint: .62; --gl-drop: none; }
.stat.gl--flat { --gl-rgb: var(--gl-rgb-2); --gl-tint: .62; --gl-drop: none; }
.gl--flat.casechip:hover { --gl-tint: .92; }

/* ---- glass in motion ------------------------------------------------------------- */
/* the droplet stretches as it slides between tabs, the way a drop of liquid would */
.seg .seg__ind { transition: transform .42s var(--ease), width .42s var(--ease), scale .42s var(--ease); }
.seg.is-sliding .seg__ind { scale: 1.07 .94; }
/* the rail dot takes over with a small pop */
@keyframes railpop { 0% { transform: scale(1.4); } 45% { transform: scale(1.85); } 100% { transform: scale(1.4); } }
.srail__a.is-pop i { animation: railpop .5s var(--ease); }
/* the pills lift as the pointer crosses them */
.mq__item.gl--flat { transition: background-color .3s, box-shadow .3s, transform .4s var(--ease); }
.mq__item.gl--flat:hover { --gl-tint: .82; transform: translateY(-2px); }
.casechip.gl--flat, .chips li.gl--flat { transition: background-color .3s, box-shadow .3s; }
/* glass sinks under a press */
.gl.btn:active, .gl--flat.btn:active, .kbtn.gl:active, .menu.gl:active, .srail__a:active { transform: translateY(.5px) scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .seg.is-sliding .seg__ind { scale: 1 1; }
  .srail__a.is-pop i { animation: none; }
}

/* ---- print ------------------------------------------------------------------------------------- */
/* A case study is a thing people take into a room. On paper it should read as a
   document: ink on white, the diagram intact, no menus, and every outside link
   saying where it goes. */
@media print {
  @page { margin: 16mm; }
  /* Paper has one palette. The dark tokens sit on :root[data-theme="dark"],
     outside any media query, so a reader who pressed the toggle would carry a
     near-white ink onto white paper. Chrome resolves prefers-color-scheme as
     light for the print render, so the media-query half needs nothing; the
     :not() arm is here for a browser that does not. */
  :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --ground: #f8f6f1; --ground-2: #f1efe9; --paper: #ffffff;
    --ink: #0f1712; --ink-2: #48524c; --ink-3: #5f6862; --tone: #6f7f75;
    --line: rgba(28, 51, 38, .09); --line-2: rgba(28, 51, 38, .16);
    --forest: #1c3326; --forest-2: #1f6b4a; --forest-3: #13241b; --night: #0a140f;
    --accent-ink: #1f6b4a; --on-mint: #2f4d3e; --mint-wash: .4;
    --chip-forest: #17593c; --chip-amber: #6b4410; --chip-sky: #1d4e78;
    --gl-rgb: 255, 255, 255; --gl-rgb-2: 248, 246, 241; --gl-tint: .55; --gl-rim: 255, 255, 255;
    --veil: rgba(252, 251, 248, .94);
    --sh-1: 0 1px 2px rgba(28, 51, 38, .05);
    --sh-2: 0 1px 2px rgba(28, 51, 38, .05), 0 14px 32px -14px rgba(28, 51, 38, .22);
    --sh-3: 0 1px 2px rgba(28, 51, 38, .05), 0 18px 40px -20px rgba(28, 51, 38, .2), 0 44px 84px -44px rgba(28, 51, 38, .28);
    color-scheme: light;
  }
  .hdr, .progress, .totop, .toast, .gchip, .cmdk, .beatbar, .mq, .show__bar, .stripes, .contact__orb, .ftr__word, .gridlight, .srail, .peek,
  .skip, .seg, .hint, .ftr__grid, .ftr__cta, .labsband, .mobbar,
  .tbtn, .caseside__tools, .casehead .actions, .bay__keys, .tele, .bay__read, .nextcard, .closeout { display: none !important; }
  main { padding-top: 0; }
  body { background: #fff; }
  /* nothing on paper is waiting to arrive */
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .wd { opacity: 1 !important; transform: none !important; animation: none !important; }
  .slabel__t::after { clip-path: none !important; }
  /* glass is a screen material: on paper it is a hairline */
  .gl, .gl--flat, .gl--dark, .gl--mint, .gl--spec {
    background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 0 0 1px #d9e0db !important;
  }
  /* the dark panels print as ink on paper, not as a block of toner */
  :root { --on-dark: #16281f; --on-dark-2: #3c5147; --on-dark-3: #5a6b62; }
  .ftr__card, .contact__l, .labsband__card, .inst, .bay--dark {
    background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px #d9e0db !important;
  }
  .hero::before, .hero__stage::before, .rule::before, .labfeat__words, .words { display: none !important; }
  /* the card no longer holds space for a watermark it is not printing */
  .rule { min-height: 0 !important; }
  .story, .fcard, .wrow, .beat, .gridl li, .bay, .caseside__card { break-inside: avoid; }
  .beat__h, .h1, .h2, .h3 { break-after: avoid; }
  /* a printed link should say where it goes */
  a[href^="http"]:not([href*="johnjayasankar.com"])::after {
    content: " (" attr(href) ")"; font: 400 .72em/1.3 var(--mono); color: #5a6b62; word-break: break-all;
  }
}

/* ---- forced colours --------------------------------------------------------------------------- */
/* When the system replaces every colour, box-shadow rims vanish and cards run together.
   Give them a real border, and let the diagrams keep the colours they were drawn with. */
@media (forced-colors: active) {
  /* a translucent surface has nothing to be translucent against once the system picks the colours */
  .gl, .gl--flat, .gl--dark, .gl--mint, .gl--spec { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: Canvas !important; }
  .hdr__bar, .cmdk__panel, .peek, .drawer, .mega, .totop, .srail, .toast { background: Canvas !important; }
  .fcard, .wrow, .labcard, .labindex__a, .nextcard, .caseside__card, .stat, .casechip, .chips li, .mq__item,
  .hdr__bar, .cmdk__panel, .peek, .seg, .seg__ind, .embed, .ba, .contact__card, .visit, .rule, .totop, .kbtn, .menu, .btn { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
  .progress i { background: Highlight; }
  .story, .gr, .i-cp { forced-color-adjust: none; }
}

/* ---- more contrast ---------------------------------------------------------------------------- */
/* Someone who asks the system for more contrast gets darker ink, firmer lines,
   and glass that sits closer to solid. */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #333d37;
    --ink-3: #414a45;
    --tone: #4e5b53;
    --line: rgba(28, 51, 38, .2);
    --line-2: rgba(28, 51, 38, .34);
    --on-dark-2: rgba(240, 247, 243, .9);
    --on-dark-3: rgba(240, 247, 243, .82);
  }
  .gl { --gl-tint: .88; }
  .gl--flat { --gl-tint: .94; }
  .gl--dark { --gl-tint: .88; }
}

/* ---- elevation, 2026-10-01 ------------------------------------------------
   Each of these was rendered against the version before it, looked at, and put
   to three independent judges before it landed. */

/* The specular sheen was a white wash with its own literal, so on a dark page
   a ghost button and the hero badge came back as silver slabs: the loudest,
   heaviest objects on the first screen, louder than the primary call to
   action. One knob now sets how much sheen the glass carries, and it comes
   most of the way down at night. */
.gl--spec {
  background-image:
    radial-gradient(240px circle at var(--gx, 50%) var(--gy, -10%), rgba(var(--gl-rim), var(--gl-spec, .5)), transparent 62%),
    linear-gradient(118deg, rgba(var(--gl-rim), calc(var(--gl-spec, .5) * .6)) 0 15%,
                    rgba(var(--gl-rim), calc(var(--gl-spec, .5) * .12)) 34%, rgba(var(--gl-rim), 0) 54%);
}
.btn--ghost.gl {
  box-shadow: inset 1.4px 1.4px 0 -.6px rgba(var(--gl-rim), var(--gl-bevel, .95)), inset 0 0 0 1px var(--line-2),
              inset 0 0 14px rgba(var(--gl-rim), calc(var(--gl-bevel, .95) * .13)), var(--sh-1);
}
.btn--ghost.gl:hover {
  box-shadow: inset 1.6px 1.6px 0 -.6px rgba(var(--gl-rim), var(--gl-bevel, .95)), inset 0 0 0 1px var(--line-2),
              inset 0 0 14px rgba(var(--gl-rim), calc(var(--gl-bevel, .95) * .15)), var(--sh-2);
}
:root[data-theme="dark"] { --gl-spec: .2; --gl-bevel: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gl-spec: .2; --gl-bevel: .3; } }

/* The schematic in the showcase was sitting inside a stage far wider than it,
   with air on both sides doing nothing. Scoped to the showcase so the twelve
   case pages and /approach keep the size they were composed at. */
.show__panel .bay--steps .s-in { font-size: clamp(11.5px, 2.3cqw, 17.5px); }
.show__panel .bay--steps .s-win { width: min(100%, 41em); }

/* Three stat tiles of equal weight say the three numbers matter equally. The
   first one is the case's headline figure; the other two qualify it. */
.fcard .stats--card > .stat { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.fcard .stats--card > .stat:first-child { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); }
.fcard .stats--card > .stat:first-child .stat__v { color: var(--accent-ink); }
.fcard .stats--card > .stat:first-child .stat__k { color: var(--ink-2); }

/* Before and after: the lit row carried a mint that was mixed for paper, and
   its ink was the page's, which turned over with the page and left dark green
   type on a mint tile reading as a smudge. Both come from tokens now. */
.ba[data-state="after"] .ba__row {
  background: color-mix(in srgb, var(--mint) 78%, var(--on-dark));
  box-shadow: 0 0 0 1px rgba(38, 74, 54, .12), 0 12px 24px -18px rgba(28, 51, 38, .5);
}
.ba[data-state="after"] .ba__what b, .ba[data-state="after"] .ba__go { color: var(--forest-3); }
.ba[data-state="after"] .ba__what small { color: color-mix(in srgb, var(--forest-3) 72%, var(--mint)); }
.ba[data-state="after"] .ba__n { color: var(--mint); background: var(--forest-3); }

/* The Work index: one of these rows is the first thing a reader sees, and all
   of them were the same size. The lead row is given its own scale through a
   single custom property rather than a second set of rules. */
.wrow { --lead: 0; }
.wrows > .wrow:not(.is-out) { --lead: 1; }
.wrows > .wrow:not(.is-out) ~ .wrow:not(.is-out) { --lead: 0; }
.wrows > .wrow {
  padding: calc(12px + var(--lead) * 6px);
  border-radius: calc(34px + var(--lead) * 8px);
  background: linear-gradient(170deg, rgba(var(--gl-rgb-2), calc(var(--lead) * .7)) 0%, transparent 52%), var(--paper);
}
.wrows > .wrow .wrow__title { font-size: calc(clamp(22px, 2vw, 28px) + var(--lead) * 13px); letter-spacing: calc(-.032em - var(--lead) * .01em); }
.wrows > .wrow .wrow__lede { font-size: calc(15.5px + var(--lead) * 1.5px); max-width: calc(54ch - var(--lead) * 4ch); }
.wrows > .wrow .wrow__story { min-height: calc(250px + var(--lead) * 96px); }

/* and its metrics, which were three boxes inside a box; a figure band on one
   base rule reads as a measurement rather than as more furniture */
.wrow__metrics { gap: 10px clamp(18px, 2.2vw, 30px); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.wmetric { flex-direction: column; align-items: flex-start; gap: 3px; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.wmetric > b { font: 450 clamp(20px, 1.7vw, 23px)/1.1 var(--sans); letter-spacing: -.03em; }
.wmetric > i { font-size: 12px; line-height: 1.35; }
.wrow__go { margin-top: 0; padding-top: 18px; }

/* the internal serial is for me; the employer is for the reader */
.wrow__meta { gap: 8px 12px; }
.wrow .idchip { order: 3; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 10.5px; letter-spacing: .08em; color: var(--ink-3); }
.wrow__org { font-weight: 450; color: var(--ink-2); }

/* About: the first paragraph is the one anybody reads */
.about__bio { gap: 18px; }
.about__bio > p:first-child { font: 400 clamp(19px, 1.52vw, 22px)/1.5 var(--sans); letter-spacing: -.018em; color: var(--ink); text-wrap: pretty; }
.about__bio > p:first-child + p { margin-top: 2px; }

/* and its selected cases, which were pills of varying width on three ragged
   rows; on a shared rule they line up as a ledger */
.exp__cases ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 20px; }
.casechip, .casechip.gl--flat {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
  gap: 5px; min-height: 0; padding: 14px 0 16px; border-radius: 0;
  background: none; background-color: transparent; box-shadow: inset 0 1px 0 var(--line); transition: box-shadow .25s;
}
.casechip:hover, .casechip.gl--flat:hover { background-color: transparent; box-shadow: inset 0 1px 0 var(--line-2); }
.casechip:hover .casechip__n { color: var(--accent-ink); }

/* a still embed should keep the picture's shape rather than a fixed height */
.embed:not(.is-live) .embed__frame { height: auto; aspect-ratio: 16 / 10; }
.embed__frame { background: var(--ground-2); }

@media (max-width: 700px) {
  .wrow__metrics { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; align-items: baseline; }
  .wmetric { display: contents; }
  .wmetric > i { font-size: 13px; }
}

/* ---- evidence ----------------------------------------------------------------------------- */
/* The claims ledger, in public. A row is a figure and everything the ledger
   knows about it, so the figure leads and the method sits beside it rather
   than under it: at a glance the page reads as a column of numbers, and a
   reader who stops on one gets the whole record without a click. */
.evband { max-width: 860px; }
.evlist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.evrow {
  display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 10px 36px;
  padding: 20px 22px; border-radius: 22px;
  background: rgba(var(--gl-rgb), .55); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, box-shadow .3s;
}
.evrow:hover { background: rgba(var(--gl-rgb), .78); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1); }
/* A figure elsewhere on the site links to its record here. Landing on a row
   has to be unmistakable, because the reader arrived asking about one number. */
/* The shared :target flash ends at transparent with fill-mode both, which is
   right for a line of prose and wrong for a card: the row someone was sent to
   would be the only one on the page with no surface under it. The flash is
   kept, and lands on the row's own material instead of on nothing. */
.evrow:target { animation: landed-row 2.4s var(--ease) both; box-shadow: inset 0 0 0 1px var(--accent-ink), var(--sh-2); scroll-margin-top: 108px; }
@keyframes landed-row {
  0%, 70% { background-color: rgba(52, 211, 153, .16); }
  100%    { background-color: rgba(var(--gl-rgb), .92); }
}
@media (prefers-reduced-motion: reduce) { .evrow:target { animation: none; background: rgba(var(--gl-rgb), .92); } }
.evrow__head { display: flex; flex-direction: column; gap: 6px; }
.evrow__v {
  font: 400 clamp(26px, 2.3vw, 34px)/1 var(--sans); letter-spacing: -.042em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.evrow__a { font: 400 14px/1.4 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.evrow__when { margin-top: 2px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.evrow__when time { font-variant-numeric: tabular-nums; }
.evrow__meta { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.evrow__pair { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.evrow__pair dt { font: 500 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tone); }
.evrow__pair dd { margin: 0; max-width: 72ch; font: 400 14.5px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.evrow__pair a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color .3s; }
.evrow__pair a:hover { text-decoration-color: var(--accent-ink); }
/* An asserted figure nobody has re-affirmed in six months is flagged, not
   hidden and not called wrong. The build warns about the same row. */
.evrow--stale { box-shadow: inset 0 0 0 1px var(--chip-amber); }
.evrow__flag { display: block; margin-top: 4px; color: var(--chip-amber); letter-spacing: .06em; }
.evnote { gap: 10px; max-width: 72ch; }
.evnote__h { font: 450 20px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.evnote p { max-width: 62ch; font: 400 16px/1.65 var(--sans); color: var(--ink-2); text-wrap: pretty; }

@media (max-width: 860px) {
  .evrow { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 20px; }
  .evrow__v { font-size: 25px; }
  .evrow__pair { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
}
/* The band counts four things: the whole ledger and its three states. The
   shared .stats grid is built for three, so a fourth would orphan onto its
   own row. It halves rather than stacking, so the three states stay legible
   as a group on a phone. */
.evband { grid-template-columns: repeat(4, minmax(min-content, 1fr)); }
@media (max-width: 860px) { .evband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .evband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A claim whose value is an identifier lifted out of the source. Stating the
   rule as the constant that enforces it is the honest form, but it reads as
   code rather than as a number, and at display size it wraps into the column
   beside it. */
.evrow__v--code { font: 400 15px/1.45 var(--mono); letter-spacing: -.005em; overflow-wrap: anywhere; }
.evrow__v--long { font-size: clamp(20px, 1.6vw, 24px); }
/* A count in the band is the way into its section. The tile keeps the shared
   .stat shape and the link fills it, so the whole tile is the target rather
   than the digits alone. */
.evstat { padding: 0; }
.evstat__a { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 14px 14px 13px; border-radius: inherit; color: inherit; text-decoration: none; transition: background-color .3s; }
@media (max-width: 640px) { .evstat__a { padding: 11px 10px; } }
.evstat__a:hover { background: rgba(var(--gl-rgb), .5); }
.evstat__a:hover .stat__v { color: var(--accent-ink); }