/* Concept: one box of parts. Thirty thousand small blocks lie loose at the top of the page
   and assemble into each project as the page moves. Material, exact, kinetic.

   Bone paper, ink parts, one signal orange. The three colours trade places from chapter to
   chapter: paper, night and ember. The canvas is the page, and the type sits on it. */

@font-face { font-family: "Anthropic Sans Web"; src: local("Anthropic Sans Web"), local("Anthropic Sans"); font-weight: 300 800; }

/* Registered so a change of tone moves every colour on the page at once, in step with the canvas. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #ebe7de; }
@property --plate { syntax: '<color>'; inherits: true; initial-value: #e2ded4; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #171a21; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #50545e; }
@property --subtle { syntax: '<color>'; inherits: true; initial-value: #777b84; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgb(23 26 33 / .18); }
@property --line-soft { syntax: '<color>'; inherits: true; initial-value: rgb(23 26 33 / .09); }
@property --signal { syntax: '<color>'; inherits: true; initial-value: #df5a2b; }
@property --signal-ink { syntax: '<color>'; inherits: true; initial-value: #b03f17; }
@property --on-fg { syntax: '<color>'; inherits: true; initial-value: #ebe7de; }

:root {
  color-scheme: light;
  --bg: #ebe7de;
  --plate: #e2ded4;
  --fg: #171a21;
  --muted: #50545e;
  --subtle: #777b84;
  --line: rgb(23 26 33 / .18);
  --line-soft: rgb(23 26 33 / .09);
  --signal: #df5a2b;
  --signal-ink: #b03f17;
  --on-fg: #ebe7de;
  --hover: color-mix(in srgb, var(--fg), #000 30%);
  --tone-move: 900ms cubic-bezier(.65, 0, .35, 1);
  transition: --bg var(--tone-move), --plate var(--tone-move), --fg var(--tone-move), --muted var(--tone-move), --subtle var(--tone-move),
    --line var(--tone-move), --line-soft var(--tone-move), --signal var(--tone-move), --signal-ink var(--tone-move), --on-fg var(--tone-move);

  --font: "Anthropic Sans Web", "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --t--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-1:  clamp(1.1875rem, 1.1rem + .42vw, 1.5rem);
  --t-2:  clamp(1.5rem, 1.3rem + .9vw, 2.25rem);
  --t-3:  clamp(2rem, 1.5rem + 2.2vw, 3.75rem);

  --pad: clamp(18px, 3.4vw, 56px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px; --s-10: 168px;

  --r-1: 2px;
  --r-2: 6px;
  --r-menu: 22px;

  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-quart:  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: #14161b;
  --plate: #1b1e25;
  --fg: #ece8df;
  --muted: #b5b1a8;
  --subtle: #8b8880;
  --line: rgb(236 232 223 / .2);
  --line-soft: rgb(236 232 223 / .1);
  --signal: #f0703f;
  --signal-ink: #f38d63;
  --on-fg: #14161b;
}

[data-tone="ember"] {
  --bg: #df5a2b;
  --plate: #d24f22;
  --fg: #14161b;
  --muted: #3b1c10;
  --subtle: #5c2a16;
  --line: rgb(20 22 27 / .3);
  --line-soft: rgb(20 22 27 / .15);
  --signal: #f6f1e7;
  --signal-ink: #fbf7ee;
  --on-fg: #f0703f;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 420;
  font-size: var(--t-0);
  line-height: 1.55;
  letter-spacing: -.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-weight: 600;
  font-variation-settings: 'opsz' 40, 'wght' 600;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h3 { font-size: var(--t-1); letter-spacing: -.015em; line-height: 1.15; }

p { text-wrap: pretty; }
button, input, select { font-family: inherit; }
button, input, select, label, th { font-weight: 500; }
img, canvas, svg { display: block; max-width: 100%; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--line); transition: text-decoration-color 160ms var(--ease-out-quint), color 160ms var(--ease-out-quint); }
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--signal); color: #14161b; }

:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.label { font-size: var(--t--1); color: var(--subtle); font-weight: 500; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }

/* the canvas is the page */

#field { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 0; pointer-events: none; }
main, .hud { position: relative; z-index: 2; }

/* loader */

.loader {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  display: grid; align-content: end; padding: var(--pad);
}
.loader__n {
  font-variation-settings: 'opsz' 48, 'wght' 600;
  font-size: clamp(6rem, 22vw, 20rem); line-height: .8; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.loader__t { font-size: var(--t--1); color: var(--subtle); margin-top: var(--s-4); }
html:not(.js) .loader { display: none; }

/* header and menu */

.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--pad) * .7) var(--pad);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.mark {
  font-variation-settings: 'opsz' 24, 'wght' 620;
  font-size: var(--t-0); letter-spacing: -.02em; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: translate 420ms var(--ease-out-expo), opacity 240ms var(--ease-out-quint);
}
/* On a long page the wordmark steps aside while reading down and returns on the way up. */
body[data-away="true"] .mark { translate: 0 -160%; opacity: 0; pointer-events: none; transition: translate 260ms var(--ease-in-quart), opacity 200ms var(--ease-in-quart); }

.menu { position: relative; }
.menu__btn {
  position: relative; z-index: 2;
  width: 96px; height: 44px;
  border: 0; border-radius: var(--r-menu);
  background: var(--fg); color: var(--on-fg);
  font-size: var(--t--1); font-variation-settings: 'opsz' 18, 'wght' 600;
  cursor: pointer;
}
.menu__panel {
  position: absolute; top: 0; right: 0; z-index: 1;
  width: min(400px, calc(100vw - var(--pad) * 2));
  padding: 64px var(--s-5) var(--s-5);
  background: var(--fg); color: var(--on-fg);
  border-radius: var(--r-menu);
  clip-path: inset(0 0 calc(100% - 44px) calc(100% - 96px) round var(--r-menu));
  transition: clip-path 300ms var(--ease-in-quart), visibility 0s 300ms;
  visibility: hidden;
}
.menu[data-open="true"] .menu__panel { clip-path: inset(0 round var(--r-menu)); visibility: visible; transition: clip-path 620ms var(--ease-spring); }
.menu__list { list-style: none; padding: 0; display: grid; }
.menu__list a {
  display: grid; grid-template-columns: 34px 1fr; align-items: baseline;
  padding: 9px 0; text-decoration: none;
  font-variation-settings: 'opsz' 36, 'wght' 600;
  font-size: var(--t-2); letter-spacing: -.03em; line-height: 1.05;
  border-top: 1px solid rgb(127 127 127 / .28);
}
.menu__list a span { font-size: var(--t--1); letter-spacing: 0; opacity: .6; font-variation-settings: 'opsz' 18, 'wght' 500; }
.menu__list a[aria-current="page"] { color: var(--signal); }
.menu__list a:hover { color: var(--hover); }
.menu__foot { display: flex; gap: var(--s-5); align-items: center; margin-top: var(--s-5); font-size: var(--t--1); }
.menu__foot a { opacity: .75; }

/* the story on the home page */

.story { position: relative; }
.panel { --col: min(44vw, 680px); position: relative; min-height: 90vh; padding: calc(var(--pad) * 2.1) var(--pad) calc(var(--pad) * 1.5); display: grid; }
.panel__text { display: grid; gap: var(--s-5); align-content: center; width: var(--col); max-width: 100%; }
.panel--right .panel__text { justify-self: end; }
.panel--top .panel__text { align-content: start; }
.panel--wide { --col: min(64vw, 1000px); }

.fit {
  font-size: min(var(--max, 11rem), calc(var(--col) / (var(--chars) * .54)));
  line-height: .86;
  letter-spacing: -.05em;
  white-space: nowrap;
}
.panel__no { font-size: var(--t--1); color: var(--subtle); font-variant-numeric: tabular-nums; }
.panel__lead { font-size: var(--t-1); line-height: 1.34; color: var(--muted); max-width: 36ch; letter-spacing: -.015em; }
.panel--hero { --col: min(78vw, 1200px); }
.panel--hero h1 { font-size: clamp(2.5rem, .8rem + 6.6vw, 8rem); line-height: .92; letter-spacing: -.045em; max-width: 9.4em; }
.panel--hero .panel__lead { max-width: 30ch; }

/* Split titles rise through a clip box, and the box needs room for descenders. */
[data-title] span[style*="overflow"] { padding: .1em .05em .24em; margin: -.1em -.05em -.24em; }

.figs { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 33rem; }
.figs > div { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: var(--s-5); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.figs dt { font-variation-settings: 'opsz' 36, 'wght' 600; font-size: var(--t-2); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.figs dd { font-size: var(--t--1); color: var(--muted); line-height: 1.35; }

.readout-line { display: flex; gap: var(--s-6); flex-wrap: wrap; font-size: var(--t--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.readout-line b { font-variation-settings: 'opsz' 28, 'wght' 600; font-weight: 600; color: var(--fg); font-size: var(--t-1); letter-spacing: -.02em; display: block; }

.go {
  justify-self: start;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-5);
  background: var(--fg); color: var(--on-fg); border-radius: var(--r-1);
  font-size: var(--t--1); font-variation-settings: 'opsz' 18, 'wght' 600;
  text-decoration: none;
  transition: background 160ms var(--ease-out-quint), color 160ms var(--ease-out-quint);
}
.go:hover { background: var(--hover); color: var(--on-fg); }

.hint {
  position: absolute; left: 50%; bottom: calc(var(--pad) * .8); translate: -50% 0;
  font-size: var(--t--1);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 8px var(--s-4);
}

/* the project index on the first screen */

.index { position: absolute; top: calc(var(--pad) * 2.9); right: var(--pad); width: min(27vw, 380px); display: grid; border-top: 1px solid var(--line); }
.index a {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: var(--s-3);
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; font-size: var(--t--1); color: var(--muted);
  transition: border-color 160ms var(--ease-out-quint);
}
.index a span { font-variant-numeric: tabular-nums; color: var(--subtle); }
.index a b { font-weight: 600; font-variation-settings: 'opsz' 24, 'wght' 600; font-size: var(--t-0); letter-spacing: -.02em; color: var(--fg); transition: color 160ms var(--ease-out-quint); }
.index a:hover { border-bottom-color: var(--fg); }
.index a:hover b { color: var(--hover); }
@media (max-width: 1279px) { .index { display: none; } }

/* labels pinned to points on the shape */

.notes { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t--1); line-height: 1.2; white-space: nowrap;
  opacity: 0; transition: opacity 220ms var(--ease-in-quart);
}
.tag.is-on { opacity: 1; transition: opacity 700ms var(--ease-out-expo) var(--d, 0ms); }
.tag::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 -3.5px; background: var(--signal); outline: 2px solid var(--bg); }
.tag i { flex: none; width: 40px; height: 1px; background: var(--fg); opacity: .55; }
.tag span { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-1); padding: 4px 8px; }
.tag[data-side="left"] { flex-direction: row-reverse; }
.tag[data-side="below"] { flex-direction: column; gap: 0; }
.tag[data-side="above"] { flex-direction: column-reverse; gap: 0; }
.tag[data-side="above"] i, .tag[data-side="below"] i { width: 1px; height: 22px; }
.tag[data-side="above"]::before, .tag[data-side="below"]::before { margin: -3.5px 0; }

/* live mode: the panels share one pinned screen and the page becomes a timeline */

html.live .story__view { position: sticky; top: 0; height: 100dvh; overflow: clip; }
html.live .panel { position: absolute; inset: 0; min-height: 0; visibility: hidden; }
html.live .panel.is-on { visibility: visible; }
html.live .panel [data-in] { opacity: 0; }

.hud {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: end;
  padding: var(--s-4) var(--pad);
  font-size: var(--t--1); color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1;
  pointer-events: none;
}
.hud span { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-1); padding: 7px 10px; }
.hud__bar { position: fixed; inset: auto 0 0 0; height: 2px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); z-index: 31; }
html:not(.live) .hud, html:not(.live) .hud__bar,
body:not([data-route="/"]) .hud, body:not([data-route="/"]) .hud__bar { display: none; }

/* project pages */

.phero { position: relative; min-height: 100dvh; padding: calc(var(--pad) * 2.6) var(--pad) calc(var(--pad) * 1.2); display: grid; align-content: end; gap: var(--s-5); --col: min(58vw, 900px); }
.phero__stage { position: absolute; top: 10vh; right: var(--pad); width: min(46vw, 740px); height: 58vh; pointer-events: none; }
.phero .fit { --max: 13rem; }
.phero__lead { font-size: var(--t-1); line-height: 1.34; letter-spacing: -.015em; color: var(--muted); max-width: 38ch; }

.facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); max-width: min(100%, 60rem); }
.facts > div { display: grid; gap: 4px; max-width: 26ch; align-content: start; }
.facts dt { font-weight: 600; font-variation-settings: 'opsz' 36, 'wght' 600; font-size: var(--t-2); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts dd { font-size: var(--t--1); color: var(--muted); line-height: 1.35; }

.project__body { position: relative; z-index: 2; background: var(--bg); padding-bottom: var(--s-10); }

.block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); padding: var(--s-9) var(--pad) 0; position: relative; }
.block > h2 { grid-column: 1 / span 4; font-size: var(--t-3); position: sticky; top: 96px; align-self: start; }
.block__body { grid-column: 5 / -1; display: grid; gap: var(--s-5); min-width: 0; }
.block--wide > h2 { grid-column: 1 / -1; position: static; }
.block--wide .block__body { grid-column: 1 / -1; }
.block__body > p { max-width: 62ch; color: var(--muted); }
.block__body > p.big { font-size: var(--t-1); color: var(--fg); line-height: 1.42; max-width: 40ch; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--t--1); color: var(--subtle); padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.table td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td:first-child { font-variation-settings: 'opsz' 24, 'wght' 600; white-space: normal; }
.table td.best { color: var(--signal-ink); font-variation-settings: 'opsz' 24, 'wght' 600; }
.table-wrap { overflow-x: auto; }
.note { font-size: var(--t--1); color: var(--subtle); max-width: 70ch; line-height: 1.45; }

.film { display: grid; gap: var(--s-3); margin: 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--plate); border-radius: var(--r-1); }
.film figcaption { font-size: var(--t--1); color: var(--subtle); max-width: 70ch; line-height: 1.45; }

.list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.list li { padding: var(--s-5) 0; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(150px, 3fr) minmax(0, 8fr); gap: var(--s-6); align-items: baseline; }
.list b { font-variation-settings: 'opsz' 28, 'wght' 600; font-weight: 600; font-size: var(--t-1); letter-spacing: -.02em; line-height: 1.1; }
.list span { color: var(--muted); max-width: 58ch; }

/* demos */

.demo { position: relative; border-top: 2px solid var(--fg); padding-top: var(--s-5); display: grid; gap: var(--s-3); }
.demo__title { font-size: var(--t-2); letter-spacing: -.03em; }
.demo__sub { font-size: var(--t--1); color: var(--subtle); max-width: 68ch; line-height: 1.45; }
.demo__body { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
.demo--split .demo__body { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--s-6); align-items: start; }
.demo__side { display: grid; gap: var(--s-5); }
.demo--split .readout { grid-template-columns: 1fr; gap: var(--s-4); }
.demo--split .readout dd { font-size: var(--t-2); letter-spacing: -.03em; }
.demo[data-state="loading"] .demo__body { visibility: hidden; }
.demo[data-state="loading"]::after {
  content: ''; position: absolute; inset: 120px 0 0 0; border-radius: var(--r-1);
  background: linear-gradient(100deg, var(--plate) 35%, var(--bg) 50%, var(--plate) 65%);
  background-size: 240% 100%;
  animation: skeleton 1.5s var(--ease-out-quint) infinite;
}
@keyframes skeleton { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.demo[data-state="failed"]::after { content: 'This demo could not start.'; font-size: var(--t--1); color: var(--subtle); }
.demo[data-state="failed"] .demo__body { display: none; }

.canvas-frame { background: var(--plate); border-radius: var(--r-1); overflow: hidden; }
.canvas-frame canvas { width: 100%; height: auto; touch-action: pan-y; }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-5); }
.field { display: grid; gap: var(--s-1); }
.field label { font-size: var(--t--1); color: var(--muted); }
.field input, .field select {
  min-height: 48px; padding: 0;
  background: transparent; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--fg); border-radius: 0;
  font-size: var(--t-1); font-variation-settings: 'opsz' 28, 'wght' 600; font-variant-numeric: tabular-nums; width: 100%;
}
.field input[type="range"] { border: 0; accent-color: var(--signal); min-height: 44px; }

.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-5); }
.readout dt { font-size: var(--t--1); color: var(--subtle); }
.readout dd { font-variation-settings: 'opsz' 40, 'wght' 600; font-size: var(--t-3); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: var(--s-1); }
.readout dd.signal { color: var(--signal-ink); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: transparent; color: var(--fg); cursor: pointer; font-size: var(--t--1);
  transition: background 150ms var(--ease-out-quint), color 150ms var(--ease-out-quint), border-color 150ms var(--ease-out-quint);
}
.chip:hover { border-color: var(--hover); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }

.bar { height: 14px; background: var(--plate); position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--fg); width: 0; transition: width 420ms var(--ease-out-expo); }
.bar > b { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--signal); transition: left 420ms var(--ease-out-expo); }

.tool-answer { min-height: 120px; }
.tool-answer h3 { font-size: var(--t-3); letter-spacing: -.04em; margin-bottom: var(--s-3); }
.tool-answer p { color: var(--muted); max-width: 52ch; }

.compare { position: relative; overflow: hidden; background: var(--plate); aspect-ratio: 3 / 2; max-width: min(100%, 111vh); border-radius: var(--r-1); }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 50% 0 0); }
.compare__tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgb(23 26 33 / .72); color: #ebe7de; font-size: 12px; font-weight: 600; letter-spacing: .01em; pointer-events: none; }
.compare__caps { display: flex; justify-content: space-between; margin: 10px 2px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.compare__tag--before { left: 12px; }
.compare__tag--after { right: 12px; }
.compare__rule { position: absolute; top: 0; bottom: 0; left: var(--at, 50%); width: 2px; background: var(--signal); translate: -1px 0; pointer-events: none; }

.legend { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t--1); color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 3px; background: var(--fg); vertical-align: middle; margin-right: 8px; }
.legend i.signal { background: var(--signal); }

/* next project */

.next { position: relative; z-index: 2; display: grid; align-content: end; min-height: 92vh; padding: var(--pad); gap: var(--s-4); text-decoration: none; --col: min(58vw, 900px); }
.next__stage { position: absolute; top: 10vh; right: var(--pad); width: min(46vw, 700px); height: 68vh; pointer-events: none; }
.next .fit { --max: 12rem; font-weight: 600; font-variation-settings: 'opsz' 40, 'wght' 600; transition: color 200ms var(--ease-out-quint); }
.next:hover .fit { color: var(--hover); }

.legal { position: relative; z-index: 2; padding: var(--s-5) var(--pad); font-size: var(--t--1); color: var(--subtle); }
.legal__pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: 14px 28px; border-radius: 999px; corner-shape: squircle; background: #fff; color: #14161b; }
.legal__pill a, .legal__pill span { color: inherit; }

.prose { max-width: 66ch; display: grid; gap: var(--s-4); }
.prose h2 { font-size: var(--t-2); margin-top: var(--s-6); }
.prose p { color: var(--muted); }

.end__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-0); }

html.js-anim [data-reveal] { opacity: 0; }

/* Short desktop windows: the pinned panels have to fit one screen, so everything tightens. */
@media (max-height: 820px) and (min-width: 861px) {
  .panel__text { gap: var(--s-4); }
  .panel__lead { font-size: var(--t-0); line-height: 1.42; max-width: 46ch; }
  .fit { --max: 8rem; }
  .panel--hero h1 { font-size: clamp(2.5rem, .8rem + 5.2vw, 6.2rem); }
  .figs dt { font-size: var(--t-1); }
  .figs > div { padding: var(--s-2) 0; }
}

@media (max-width: 860px) {
  .panel { --col: 100%; padding-top: calc(var(--pad) * 4); }
  .panel--wide { --col: 100%; }
  html.live .panel { align-content: end; padding-bottom: calc(var(--pad) + 48px); }
  html.live .panel .panel__text { align-content: end; justify-self: start; }
  html.live .panel--hero, html.live .panel--hero .panel__text,
  html.live .panel[data-panel="end"], html.live .panel[data-panel="end"] .panel__text { align-content: start; }
  /* Over the particle field, text needs a surface behind it to stay readable on a phone. */
  .panel__lead { color: var(--fg); }
  .hud { font-size: 12px; }
  .fit { font-size: min(var(--max, 11rem), calc((100vw - var(--pad) * 2) / (var(--chars) * .6))); }
  .panel__lead { font-size: var(--t-0); }
  .figs dt { font-size: var(--t-1); }
  html.live .figs { display: none; }
  .phero { --col: 100%; padding-top: 58vh; }
  .facts { gap: var(--s-4) var(--s-6); }
  .phero__stage { top: 9vh; right: 0; width: 100vw; height: 46vh; }
  .next { --col: 100%; }
  .next__stage { top: 4vh; right: 0; width: 100vw; height: 44vh; }
  .block > h2, .block__body { grid-column: 1 / -1; position: static; }
  .demo--split .demo__body { grid-template-columns: 1fr; }
  .list li { grid-template-columns: 1fr; gap: var(--s-2); }
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .12ms !important; }
}

/* Text colour eases when the contrast guard in app.js changes it. */
:where(.project__body, .next, .legal) :where(*) { transition: color 260ms var(--ease-out-quint); }

/* A dropped G-code print replaces the Benchy, so the Benchy callouts on the Arachnid stop are hidden. */
:root[data-print="custom"] .tag[data-stop="arachnid"] { display: none; }