/* Cohentra. A kinetic installation: thousands of small cubes hung on threads, tumbling apart
   and settling into agreement to form each product. Porcelain, cobalt and night navy.
   Patient, exact, alive. The page and the field share one set of colours and change together. */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
/* Anthropic Sans is only used where it is already installed; it is not served. */
@font-face {
  font-family: "Anthropic Sans Local";
  src: local("Anthropic Sans Web Text Regular"), local("AnthropicSansWebWeb-TextRegular"), local("Anthropic Sans Web");
  font-weight: 300 800;
  font-display: swap;
}


:root {
  color-scheme: light;
  --bg-day: #e7ebef; --bg-night: #0c152f; --bg-cobalt: #2355ed;
  --bg: #e7ebef;
  --plate: #dbe0e6;
  --fg: #0d1b41;
  --muted: #414d66;
  --subtle: #5f6a7e;
  --line: rgb(13 27 65 / .16);
  --line-soft: rgb(13 27 65 / .08);
  --signal: #2355ed;
  --on-fg: #e7ebef;
  --mark: #2355ed;
  --paper: #f3f5f8;
  --paper-ink: #0d1b41;
  --hover: color-mix(in oklab, var(--fg), var(--bg) 22%);

  /* The tone switch is not animated on :root: an inherited colour that animates there restyles
     every element on the page every frame. The canvas tweens its own background, the chapter
     text changes while it fades, and the few pieces that stay on screen tween their own colour. */
  --tone-move: 900ms cubic-bezier(.65, 0, .35, 1);

  --font: "Anthropic Sans Web", "Anthropic Sans Local", "Mona Sans", ui-sans-serif, system-ui, sans-serif;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: clamp(1.0625rem, .99rem + .32vw, 1.3125rem);
  --t-l: clamp(1.375rem, 1.15rem + .9vw, 2rem);
  --t-xl: clamp(2.75rem, 1.5rem + 5vw, 6.75rem);
  --t-long: clamp(2.125rem, 1.35rem + 3vw, 4.5rem);
  --t-hero: clamp(2.6rem, 1.3rem + 5.2vw, 6.5rem);

  --pad: clamp(20px, 4vw, 64px);
  --top: 64px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* radii step up with the size of the thing, and nest: inner = outer minus padding */
  --r-tag: 3px;
  --r-ctl: 10px;
  --r-bar: 16px;
  --r-sheet: 20px;
  --r-shot: 14px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-spring: linear(0, .0743 4.17%, .2236 8.33%, .3846 12.5%, .5286 16.67%, .6475 20.83%, .741 25%, .8121 29.17%, .8653 33.33%, .904 37.5%, .932 41.67%, .9521 45.83%, .9664 50%, .9765 54.17%, .9836 58.33%, .9886 62.5%, .9921 66.67%, .9945 70.83%, .9962 75%, .9974 79.17%, .9982 83.33%, .9987 87.5%, .9991 91.67%, .9994 95.83%, 1);
}

[data-tone="night"] {
  color-scheme: dark;
  --bg: #0c152f;
  --plate: #141f3c;
  --fg: #e8ebf0;
  --muted: #b1bbcb;
  --subtle: #8a97ac;
  --line: rgb(232 235 240 / .18);
  --line-soft: rgb(232 235 240 / .09);
  --signal: #6f9cf5;
  --on-fg: #0c152f;
  --mark: #6f9cf5;
}

[data-tone="cobalt"] {
  color-scheme: dark;
  --bg: #2355ed;
  --plate: #2b5ef0;
  --fg: #f1f4f7;
  --muted: #dde6fb;
  --subtle: #c3d3f9;
  --line: rgb(241 244 247 / .3);
  --line-soft: rgb(241 244 247 / .16);
  --signal: #f1f4f7;
  --on-fg: #1640c4;
  --mark: #f1f4f7;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-s);
  font-weight: 400;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100svh;
}
h1, h2, h3 { font-weight: 600; line-height: 1; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--line); transition: text-decoration-color 160ms var(--ease-quint), color 160ms var(--ease-quint); }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--signal); color: var(--on-fg); }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.skip { position: fixed; z-index: 90; top: 12px; left: 12px; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--fg); color: var(--on-fg); text-decoration: none; translate: 0 -160%; transition: translate 240ms var(--ease-quint); }
.skip:focus { translate: 0 0; }

/* the field sits behind everything */

#field { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 0; pointer-events: none; }
html.no-gl #field { display: none; }
.svh { position: fixed; top: 0; left: 0; width: 1px; height: 100svh; pointer-events: none; visibility: hidden; }
main, .rail, .top { position: relative; z-index: 2; }

/* loader */

.loader {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; align-content: center; gap: var(--s-5);
  background: var(--bg);
  --load: 0;
  transition: opacity 700ms var(--ease-quint) 160ms;
}
.loader__mark { width: 76px; height: 76px; overflow: visible; transition: scale 520ms var(--ease-in), opacity 360ms var(--ease-in); }
.loader__mark path { fill: var(--mark); stroke: var(--mark); stroke-width: .7; fill-opacity: 0; transition: fill-opacity 260ms var(--ease-quint); }
.loader__mark path:nth-child(1) { fill-opacity: clamp(0, calc(var(--load) * 4), 1); }
.loader__mark path:nth-child(2) { fill-opacity: clamp(0, calc(var(--load) * 4 - 1), 1); }
.loader__mark path:nth-child(3) { fill-opacity: clamp(0, calc(var(--load) * 4 - 2), 1); }
.loader__mark path:nth-child(4) { fill-opacity: clamp(0, calc(var(--load) * 4 - 3), 1); }
.loader__t { font-size: var(--t-xs); color: var(--subtle); }
.loader.is-done { opacity: 0; pointer-events: none; }
.loader.is-done .loader__mark { scale: .82; opacity: 0; }
html:not(.js) .loader { display: none; }

/* header */

.top {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--top); padding: 0 var(--pad);
  pointer-events: none;
  transition: translate 460ms var(--ease-quint), background-color 260ms var(--ease-quint), box-shadow 260ms var(--ease-quint);
}
.head-solid .top { background: var(--bg); box-shadow: 0 1px 0 var(--line-soft); pointer-events: auto; }
.head-away .top { translate: 0 -100%; }
.top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.lockup { height: 24px; width: auto; }
.lockup__mark { fill: var(--mark); transition: fill var(--tone-move); }
.lockup__word { fill: var(--fg); transition: fill var(--tone-move); }
.clock { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; display: flex; gap: 6px; transition: color var(--tone-move); }
.clock span { color: var(--subtle); }

/* shared type */

.kicker, .meta { font-size: var(--t-xs); color: var(--subtle); font-weight: 500; }
.meta span { display: inline-block; min-width: 2.2em; font-variant-numeric: tabular-nums; color: var(--muted); }
.display { font-size: var(--t-hero); line-height: .97; letter-spacing: -.042em; max-width: 11.5ch; }
.name { font-size: var(--t-xl); line-height: .9; letter-spacing: -.05em; }
.name--long { font-size: var(--t-long); line-height: .98; letter-spacing: -.04em; max-width: 13ch; }
.lead { font-size: var(--t-m); line-height: 1.42; color: var(--muted); max-width: 40ch; letter-spacing: -.008em; }

.btn, .go {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px;
  border-radius: var(--r-ctl); background: var(--fg); color: var(--on-fg);
  font-weight: 600; font-size: var(--t-s); text-decoration: none;
  transition: background 160ms var(--ease-quint), translate 120ms var(--ease-quint);
}
.btn:hover, .go:hover { background: var(--hover); }
.btn:active, .go:active { translate: 0 1px; }
.go { justify-self: start; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.go:hover { background: color-mix(in oklab, var(--fg) 7%, transparent); }
.link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); min-height: 44px; display: inline-flex; align-items: center; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* the story: one pinned screen, chapters take turns on it */

.story { position: relative; }
.story__view { position: relative; }
.chapter { position: relative; min-height: 100svh; padding: calc(var(--top) + var(--s-4)) var(--pad) 120px; }
.chapter__text { display: grid; gap: var(--s-4); align-content: start; }
.chapter__icon { display: none; }

html.live .story { height: calc((var(--story-len) + 1) * 100svh); }
html.live .story__view { position: sticky; top: 0; height: 100svh; overflow: clip; }
html.live .chapter { position: absolute; inset: 0; min-height: 0; visibility: hidden; transition: visibility 0s 420ms; pointer-events: none; }
html.live .chapter.is-on { visibility: visible; transition: visibility 0s 0s; }
html.live .chapter.is-on .chapter__text { pointer-events: auto; }

html.live [data-in] { opacity: 0; translate: 0 18px; transition: opacity 260ms var(--ease-in), translate 300ms var(--ease-in); }
html.live .is-on [data-in] {
  opacity: 1; translate: 0 0;
  transition: opacity 700ms var(--ease-quint) calc(var(--i, 0) * 70ms + 80ms), translate 900ms var(--ease-out) calc(var(--i, 0) * 70ms + 80ms);
}
html.live :is(.name, .display)[data-in] { clip-path: inset(-20% -10% 100% -10%); translate: 0 30%; transition: opacity 260ms var(--ease-in), translate 300ms var(--ease-in), clip-path 300ms var(--ease-in); }
html.live .is-on :is(.name, .display)[data-in] {
  clip-path: inset(-20% -10% -20% -10%); translate: 0 0;
  transition: opacity 500ms var(--ease-quint) calc(var(--i, 0) * 70ms + 60ms), translate 1000ms var(--ease-out) calc(var(--i, 0) * 70ms + 60ms), clip-path 1000ms var(--ease-out) calc(var(--i, 0) * 70ms + 60ms);
}

/* before the field agrees, the hero waits */
html.js:not(.ready) .chapter--hero [data-in] { opacity: 0 !important; }

.hint { font-size: var(--t-xs); color: var(--subtle); }
.hint::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 1.5px; background: var(--signal); vertical-align: 1px; rotate: 45deg; }
.hint--coarse { display: none; }
@media (pointer: coarse) { .hint--fine { display: none; } .hint--coarse { display: inline; } }

.readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.readout b { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.readout span { font-size: var(--t-s); color: var(--muted); max-width: 26ch; line-height: 1.3; }
.readout--small b { font-size: var(--t-l); letter-spacing: -.02em; }

.facts { display: grid; border-top: 1px solid var(--line); max-width: 34rem; }
.facts > div { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: var(--s-4); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.facts dt { font-size: var(--t-l); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts dd { font-size: var(--t-xs); color: var(--muted); line-height: 1.38; }

/* chapter controls */

.switch { display: inline-flex; justify-self: start; padding: 4px; gap: 4px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.switch button {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); background: transparent; cursor: pointer;
  font-size: var(--t-xs); font-weight: 600; color: var(--muted);
  transition: background 200ms var(--ease-quint), color 200ms var(--ease-quint);
}
.switch button[aria-pressed="true"] { background: var(--fg); color: var(--on-fg); }

.question { display: grid; gap: var(--s-3); }
.question__q { font-size: var(--t-s); font-weight: 500; }
.choices { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.choices button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 8px;
  border: 0; border-radius: var(--r-ctl); background: transparent; box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-s); font-weight: 600; cursor: pointer;
  transition: background 200ms var(--ease-quint), box-shadow 200ms var(--ease-quint);
}
.choices button span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: var(--t-xs); }
.choices button:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
.choices button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--fg); }

.toggle {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-height: 44px; padding: 0 16px 0 10px;
  border: 0; border-radius: var(--r-ctl); background: transparent; box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-s); font-weight: 600; cursor: pointer;
}
.toggle::before {
  content: ''; width: 34px; height: 20px; border-radius: 10px; flex: none;
  background: radial-gradient(circle at 10px 50%, var(--fg) 6px, transparent 6.5px) no-repeat, color-mix(in oklab, var(--fg) 14%, transparent);
  background-position: 0 0, 0 0;
  transition: background-position 380ms var(--ease-spring), background-color 200ms var(--ease-quint);
}
.toggle[aria-pressed="true"]::before { background-position: 14px 0, 0 0; background-color: var(--signal); }
[data-tone="cobalt"] .toggle[aria-pressed="true"]::before { background-image: radial-gradient(circle at 10px 50%, #2355ed 6px, transparent 6.5px); }

.controls { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.slider { display: grid; grid-template-columns: auto minmax(120px, 220px) 3.2em; align-items: center; gap: var(--s-3); font-size: var(--t-s); font-weight: 600; }
.slider output { font-variant-numeric: tabular-nums; text-align: right; }
.slider input { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; cursor: pointer; }
.slider input::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 1px; }
.slider input::-moz-range-track { height: 2px; background: var(--line); border-radius: 1px; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--fg); border: 0; }
.slider input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--fg); border: 0; }

.limits, .more, .services { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); max-width: 36rem; }
.limits li, .more li, .services li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }
.more li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: center; }
.more img { width: 40px; height: 40px; border-radius: 9px; }
.more b, .services b { color: var(--fg); font-weight: 600; margin-right: 6px; }
.services li { display: grid; grid-template-columns: minmax(150px, 13rem) 1fr; gap: var(--s-4); }
.services b { font-size: var(--t-s); }

.mail { font-size: clamp(1.75rem, 1rem + 3.2vw, 3.75rem); font-weight: 600; letter-spacing: -.035em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; justify-self: start; }

/* the expanding range: the ends part and the values between them fill the gap */

.range { position: relative; display: inline-flex; align-items: baseline; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; --gap: 7.4em; }
.range__lo, .range__hi { transition: translate 520ms var(--ease-out); }
.range__dots { transition: opacity 160ms var(--ease-quint); }
.range__mid {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(var(--gap) - .8em); height: 1.1em;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); place-items: center;
  font-size: .5em; line-height: 1; opacity: 0; pointer-events: none;
}
.range__mid i { font-style: normal; font-size: 1.05em; opacity: 0; translate: 0 4px; transition: opacity 300ms var(--ease-quint), translate 420ms var(--ease-out); }
.range:is(:hover, :focus-visible, .is-open) .range__lo { translate: calc(var(--gap) / -2 + .4em) 0; }
.range:is(:hover, :focus-visible, .is-open) .range__hi { translate: calc(var(--gap) / 2 - .4em) 0; }
.range:is(:hover, :focus-visible, .is-open) .range__dots { opacity: 0; }
.range:is(:hover, :focus-visible, .is-open) .range__mid { opacity: 1; }
.range:is(:hover, :focus-visible, .is-open) .range__mid i { opacity: 1; translate: 0 0; transition-delay: calc(120ms + var(--k, 0) * 30ms); }
.range__mid i:nth-child(2) { --k: 1; } .range__mid i:nth-child(3) { --k: 2; } .range__mid i:nth-child(4) { --k: 3; }
.range__mid i:nth-child(5) { --k: 4; } .range__mid i:nth-child(6) { --k: 5; } .range__mid i:nth-child(7) { --k: 6; }

/* hanging tags */

.tags { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: clip; }
.tag { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: opacity 180ms var(--ease-in); will-change: transform; }
.tag.is-on { opacity: 1; transition: opacity 500ms var(--ease-quint) var(--d, 0ms); }
.tag::before { content: ''; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--fg); }
.tag__string { position: absolute; left: -.5px; top: 0; width: 1px; height: 26px; background: var(--fg); opacity: .55; transform-origin: 50% 0; scale: 1 0; transition: scale 200ms var(--ease-in); }
.tag.is-on .tag__string { scale: 1 1; transition: scale 620ms var(--ease-out) var(--d, 0ms); }
.tag__card {
  position: absolute; top: 25px; left: 0; transform: translateX(-50%);
  padding: 11px 9px 6px; border-radius: var(--r-tag);
  background: var(--paper); color: var(--paper-ink); box-shadow: inset 0 0 0 1px rgb(13 27 65 / .14);
  font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  translate: 0 -6px; opacity: 0; transition: opacity 180ms var(--ease-in), translate 240ms var(--ease-in);
}
.tag.is-on .tag__card { opacity: 1; translate: 0 0; transition: opacity 400ms var(--ease-quint) calc(var(--d, 0ms) + 260ms), translate 700ms var(--ease-spring) calc(var(--d, 0ms) + 260ms); }
/* the punched hole the string goes through */
.tag__card::before { content: ''; position: absolute; top: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px rgb(13 27 65 / .25); }

/* rail: the chapter bar, which opens into the menu */

.rail { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
.rail__bar {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  height: 56px; padding: 0 6px 0 18px; border-radius: var(--r-bar);
  background: var(--fg); color: var(--on-fg);
  transition: background-color var(--tone-move), color var(--tone-move);
}
.rail__now { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: var(--t-s); }
.rail__no { font-variant-numeric: tabular-nums; opacity: .6; font-size: var(--t-xs); }
.rail__no:empty { display: none; }
.rail__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__track { position: relative; height: 2px; border-radius: 1px; background: color-mix(in oklab, var(--on-fg) 22%, transparent); overflow: hidden; }
.rail__fill { position: absolute; inset: 0; background: var(--on-fg); transform-origin: 0 50%; transform: scaleX(0); }
.rail__btn {
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-ctl); cursor: pointer;
  background: color-mix(in oklab, var(--on-fg) 14%, transparent); color: var(--on-fg);
  font-size: var(--t-s); font-weight: 600;
  transition: background 160ms var(--ease-quint);
}
.rail__btn:hover { background: color-mix(in oklab, var(--on-fg) 22%, transparent); }
.rail__sheet {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  max-height: min(72svh, 640px); overflow: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: var(--r-sheet);
  background: var(--fg); color: var(--on-fg);
  clip-path: inset(100% 0 0 0 round var(--r-sheet));
  visibility: hidden;
  transition: clip-path 320ms var(--ease-in), visibility 0s 320ms;
}
.rail[data-open="true"] .rail__sheet { clip-path: inset(0 0 0 0 round var(--r-sheet)); visibility: visible; transition: clip-path 640ms var(--ease-spring); }
.rail__list { list-style: none; padding: 0; display: grid; }
.rail__list a {
  display: grid; grid-template-columns: 38px 1fr; align-items: baseline;
  padding: 11px 12px; border-radius: 12px; text-decoration: none;
  font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.1;
}
.rail__list a span { font-size: var(--t-xs); letter-spacing: 0; opacity: .55; font-weight: 500; font-variant-numeric: tabular-nums; }
.rail__list a:hover { background: color-mix(in oklab, var(--on-fg) 9%, transparent); }
.rail__list a[aria-current] { color: color-mix(in oklab, var(--on-fg), var(--signal) 55%); }
[data-tone="cobalt"] .rail__list a[aria-current] { color: #9db6ff; }
.rail__pages { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 14px 12px 10px; margin-top: 6px; border-top: 1px solid color-mix(in oklab, var(--on-fg) 16%, transparent); font-size: var(--t-xs); }
.rail__pages a { opacity: .78; min-height: 32px; display: inline-flex; align-items: center; }
.rail__pages a[aria-current] { opacity: 1; text-decoration: underline; }
.rail__list li, .rail__pages { opacity: 0; translate: 0 10px; transition: opacity 160ms var(--ease-in), translate 160ms var(--ease-in); }
.rail[data-open="true"] .rail__list li, .rail[data-open="true"] .rail__pages { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease-quint), translate 640ms var(--ease-out); }
.rail[data-open="true"] .rail__list li:nth-last-child(n) { transition-delay: calc(60ms + var(--n, 0) * 22ms); }

/* footer */

.foot {
  --bg: #0c152f; --fg: #e8ebf0; --muted: #b1bbcb; --subtle: #8a97ac; --mark: #6f9cf5; --line: rgb(232 235 240 / .18); --on-fg: #0c152f; --signal: #6f9cf5;
  position: relative; z-index: 3;
  display: grid; gap: var(--s-6);
  padding: var(--s-8) var(--pad) calc(var(--s-9) + 40px);
  background: var(--bg); color: var(--fg);
}
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); }
.foot .lockup { height: 30px; }
.foot__line { font-size: var(--t-m); color: var(--muted); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-s); }
.foot__nav a { min-height: 44px; display: inline-flex; align-items: center; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); font-size: var(--t-xs); color: var(--subtle); }
.credit { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--muted); text-decoration: none; min-height: 44px; }
.credit:hover { color: var(--fg); }
.credit img { width: 22px; height: auto; }

/* content pages */

.page { position: relative; z-index: 2; }
.page__hero { display: grid; gap: var(--s-5); align-content: end; min-height: 78svh; padding: calc(var(--top) + var(--s-9)) var(--pad) var(--s-8); max-width: 1180px; }
.page__hero .display { max-width: 14ch; }
.index { display: grid; border-top: 1px solid var(--line); margin-top: var(--s-5); max-width: 760px; }
.index a { display: grid; grid-template-columns: 2.4em 1fr; padding: 12px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; font-weight: 600; font-size: var(--t-m); }
.index a span { font-size: var(--t-xs); color: var(--subtle); font-weight: 500; font-variant-numeric: tabular-nums; align-self: center; }
.index a:hover { color: var(--signal); }

.projects { position: relative; display: grid; gap: var(--s-9); padding: var(--s-7) var(--pad) var(--s-9); background: linear-gradient(to bottom, transparent, var(--bg) 160px); }
.project { display: grid; gap: var(--s-6); scroll-margin-top: calc(var(--top) + 16px); }
.project__copy { display: grid; gap: var(--s-5); align-content: start; }
.project__head { display: flex; align-items: center; gap: var(--s-4); }
.project__icon { width: 64px; height: 64px; border-radius: 15px; }
.project h2 { font-size: var(--t-long); letter-spacing: -.045em; }
.project__lead { font-size: var(--t-m); color: var(--muted); max-width: 42ch; line-height: 1.42; }
.spec { display: grid; border-top: 1px solid var(--line); }
.spec > div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.spec dt { font-weight: 600; font-size: var(--t-s); }
.spec dd { color: var(--muted); font-size: var(--t-s); max-width: 56ch; }
.project__links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.project__media { display: grid; gap: var(--s-4); align-content: start; }
.shot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); align-items: start; }
.note { font-size: var(--t-xs); color: var(--subtle); }

/* images wait in a shimmering frame the exact size of what is coming */
.shot { position: relative; border-radius: var(--r-shot); overflow: hidden; background: var(--plate); isolation: isolate; }
.shot::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--bg) 60%, transparent) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: shimmer 1.6s cubic-bezier(.45, 0, .55, 1) infinite;
  transition: opacity 400ms var(--ease-quint);
}
.shot.is-loaded::before { opacity: 0; animation: none; }
.shot img, .shot video { width: 100%; height: auto; opacity: 0; transition: opacity 600ms var(--ease-quint); }
.shot.is-loaded img, .shot.is-loaded video { opacity: 1; }
.shot.is-voxel img, .shot.is-voxel video { transition: none; }
.shot__voxels { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.shot figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: 8px; background: var(--paper); color: var(--paper-ink); font-size: var(--t-xs); }
.shot--phone { border-radius: 18px; }
.shot--video { max-width: 360px; border-radius: 22px; }
.shot--video figcaption { right: 12px; }
.shot--small { max-width: 220px; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.connectors, .more-work, .hello { display: grid; gap: var(--s-5); scroll-margin-top: calc(var(--top) + 16px); }
.connectors h2, .more-work h2, .hello h2 { font-size: var(--t-long); letter-spacing: -.04em; max-width: 16ch; }
.steps { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 2.4em 1fr; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-m); font-weight: 600; }
.steps span { color: var(--subtle); font-size: var(--t-xs); font-weight: 500; align-self: center; }
.connectors__body { display: grid; gap: var(--s-4); color: var(--muted); max-width: 66ch; font-size: var(--t-s); line-height: 1.6; }
/* the smaller apps are a list, one row each */
.trio { display: grid; border-top: 1px solid var(--line); }
.trio article {
  display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "icon name" "icon text" "icon note" "icon link" "shot shot";
  column-gap: var(--s-4); row-gap: var(--s-2); align-items: start;
  padding: var(--s-6) 0; border-bottom: 1px solid var(--line-soft);
}
.trio .project__icon { grid-area: icon; width: 56px; height: 56px; border-radius: 13px; }
.trio h3 { grid-area: name; font-size: var(--t-l); letter-spacing: -.03em; line-height: 1.1; }
.trio p { grid-area: text; color: var(--muted); max-width: 46ch; }
.trio p.note { grid-area: note; }
.trio .link { grid-area: link; justify-self: start; }
.trio .shot { grid-area: shot; margin-top: var(--s-4); width: min(200px, 60%); }
.disclaimer { font-size: var(--t-xs); color: var(--subtle); max-width: 80ch; line-height: 1.55; }
.hello { padding-top: var(--s-8); border-top: 1px solid var(--line); }

.page--legal .page__hero { min-height: 62svh; }
.legal { position: relative; display: grid; gap: var(--s-7); padding: var(--s-7) var(--pad) var(--s-9); max-width: 860px; background: linear-gradient(to bottom, transparent, var(--bg) 120px); }
.legal section { display: grid; gap: var(--s-3); }
.legal h2 { font-size: var(--t-l); letter-spacing: -.025em; line-height: 1.1; }
.legal p { color: var(--muted); max-width: 68ch; line-height: 1.65; }
.legal a { color: var(--fg); text-decoration: underline; }
.page--missing .page__hero { min-height: 100svh; align-content: center; }

/* no WebGL: each chapter shows its product icon where the field would be */
html.no-gl .chapter__icon { display: block; position: absolute; width: min(42vw, 260px); height: auto; border-radius: 22%; right: var(--pad); bottom: 120px; }
html.no-gl .chapter__icon--hidden { display: none; }
html:not(.live) .chapter { border-bottom: 1px solid var(--line-soft); }

/* phones: text owns the top of the screen, the field the rest */
@media (max-width: 899px), (orientation: portrait) {
  .chapter__text { gap: 14px; }
  .facts > div:nth-child(n+2), .readout ~ .facts { display: none; }
  .services span { display: none; }
  .services li { grid-template-columns: 1fr; }
  .limits li:nth-child(n+2) { display: none; }
  .more li:nth-child(n+2) { display: none; }
  html.live .chapter--end .chapter__text { top: auto; bottom: calc(110px + env(safe-area-inset-bottom)); }
}
@media (max-height: 760px) and ((max-width: 899px) or (orientation: portrait)) {
  .facts, .chapter .go { display: none; }
  .lead { font-size: 1rem; }
  .readout b { font-size: 2.25rem; }
}

/* wide screens: text in a column beside the field */
@media (min-width: 900px) and (orientation: landscape) {
  :root { --top: 76px; }
  .lockup { height: 28px; }
  html.live .chapter__text { position: absolute; top: 50%; translate: 0 -46%; left: var(--pad); width: min(36vw, 560px); }
  html.live .chapter[data-side="right"] .chapter__text { left: auto; right: var(--pad); }
  html.live .chapter--hero .chapter__text { width: min(46vw, 760px); translate: 0 -50%; }
  .rail { left: 50%; right: auto; width: 480px; translate: -50% 0; }
  .project { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
  .project:nth-of-type(even) .project__copy { order: 2; }
  .project__copy { position: sticky; top: calc(var(--top) + 24px); }
  .trio article { grid-template-columns: 56px minmax(0, 18rem) minmax(0, 1fr) 180px; grid-template-areas: "icon name text shot" "icon link note shot"; column-gap: var(--s-6); }
  .trio .shot { margin-top: 0; width: 180px; justify-self: end; }
  .connectors { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); }
  .connectors > .meta, .connectors > h2, .connectors > .steps { grid-column: 1; }
  .connectors__body, .connectors > .project__links { grid-column: 2; }
  .connectors__body { grid-row: 1 / span 3; align-self: end; }
}

@media (min-width: 1500px) and (orientation: landscape) {
  html.live .chapter__text { width: min(32vw, 600px); }
}

@media (prefers-reduced-motion: reduce) {
  html.live [data-in], html.live .is-on [data-in] { translate: none !important; clip-path: none !important; transition: opacity 150ms linear !important; }
  .shot::before { animation: none; }
}