/* ── futures-atlas-core tokens (design-system defaults; single source of truth).
      Inlined here because this static bundle isn't built through the hub, the
      same way the other zone bundles carry them. The live /style-guide overrides
      load last, via <link href="/api/theme.css"> in each page's head.
      This bundle is set in Archivo throughout: no serif, no monospace. ── */
:root {
  /* raw primitives (light) */
  --fa-bone: #f4efe4; --fa-panel: #fbf8f0; --fa-haze: #ece4d4;
  --fa-ink: #211e18; --fa-ink-body: #3a352b; --fa-graphite: #6b6456; --fa-faint: #9a9484;
  /* raw primitives (dark) */
  --fa-bone-d: #211e18; --fa-panel-d: #2b2722; --fa-haze-d: #16130f; --fa-band-d: #17140f;
  --fa-ink-d: #f2ede2; --fa-ink-body-d: #d3ccbe; --fa-graphite-d: #a69f91; --fa-faint-d: #7d7668;
  /* accent (light / dark) */
  --fa-accent: oklch(0.565 0.13 245); --fa-accent-soft: oklch(0.93 0.045 245); --fa-accent-deep: oklch(0.565 0.13 245);
  --fa-accent-d: oklch(0.565 0.13 245); --fa-accent-soft-d: oklch(0.34 0.06 245); --fa-accent-deep-d: oklch(0.565 0.13 245);
  /* font families, resolved to the webfonts this bundle loads */
  --font-archivo: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-saira: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --fa-font-display: var(--font-archivo);
  --fa-font-year: var(--font-saira);
  /* semantic tokens (light) */
  --bg: var(--fa-bone); --panel: var(--fa-panel); --haze: var(--fa-haze); --band: var(--fa-ink);
  --paper: #f4efe4; --text: var(--fa-ink); --text-body: var(--fa-ink-body);
  --muted: var(--fa-graphite); --faint: var(--fa-faint);
  --accent: var(--fa-accent); --accent-soft: var(--fa-accent-soft); --accent-deep: var(--fa-accent-deep);
  --hairline: color-mix(in srgb, var(--text) 16%, transparent);
  --font-heading: var(--fa-font-display); --font-year: var(--fa-font-year);
  /* type scale */
  --text-display-xl: clamp(40px, 7.5vw, 120px);
  --text-display-m: clamp(32px, 4.6vw, 68px);
  --text-title: clamp(22px, 2.6vw, 32px);
  --text-lead: clamp(15px, 1.5vw, 19px);
  --text-body-size: clamp(13px, 1.35vw, 16px);
  --text-label: 11px;
  /* line-height, tracking, weight */
  --lh-display: 0.96; --lh-snug: 1.34; --lh-body: 1.7;
  --track-display: -0.022em; --track-label: 0.14em; --track-label-wide: 0.18em;
  --weight-body: 400; --weight-medium: 500; --weight-strong: 800; --weight-black: 900;
  /* layout: the hub's Container is full width with 16px / 28px gutters and NO
     max-width, so this bundle matches it rather than centring on its own */
  --gutter: 16px;
  --gutter-wide: 28px;
  /* spacing, radii, borders, motion */
  --space-section: clamp(58px, 9vw, 130px);
  --space-header: clamp(44px, 7vw, 96px);
  --space-card: clamp(20px, 3vw, 28px);
  --space-3: 12px; --space-4: 16px;
  --radius: 2px;
  --border-hairline: 1px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  color-scheme: light;
}
/* semantic tokens (dark) */
html.dark {
  --bg: var(--fa-bone-d); --panel: var(--fa-panel-d); --haze: var(--fa-haze-d); --band: var(--fa-band-d);
  --text: var(--fa-ink-d); --text-body: var(--fa-ink-body-d);
  --muted: var(--fa-graphite-d); --faint: var(--fa-faint-d);
  --accent: var(--fa-accent-d); --accent-soft: var(--fa-accent-soft-d); --accent-deep: var(--fa-accent-deep-d);
  color-scheme: dark;
}

/* ── page ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/*
  Reserve the shared bar's height HERE rather than letting atlas-nav.js apply
  it. The script is deferred, so it set this padding after first paint and
  pushed the whole page down 64px on arrival. The variable is declared in
  atlas-nav.css, which is a render-blocking stylesheet, so it is available
  before anything paints. The script's own check (`have >= need`) sees the
  padding already in place and leaves it alone.
*/
body { padding-top: var(--fa-nav-h, 64px); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-heading);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font-family: var(--font-heading); }

.wrap { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 680px) { .wrap { padding: 0 var(--gutter-wide); } }

.masthead { padding: var(--space-header) 0 clamp(22px, 3vw, 34px); }
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-year); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--hairline); }
h1 {
  margin: 16px 0 0;
  font-size: var(--text-display-m);
  font-weight: var(--weight-strong); letter-spacing: var(--track-display); line-height: var(--lh-display);
}
.lede {
  margin: 22px 0 0; max-width: 62ch;
  font-size: var(--text-lead); font-weight: var(--weight-body);
  line-height: var(--lh-body); color: var(--text-body);
}
.lede--sub { margin-top: 14px; color: var(--muted); font-size: var(--text-body-size); }

/* the way across to the hands-on pond */
.try {
  display: inline-flex; align-items: center; gap: 18px; margin-top: 24px;
  padding: 14px 18px 14px 20px; border-radius: 2px; text-decoration: none;
  background: var(--accent); color: #fff;
  transition: background 0.15s;
}
.try:hover { background: var(--accent-deep); }
.try:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.try__text { display: flex; flex-direction: column; gap: 3px; }
.try__text strong { font-size: 17px; font-weight: 700; }
.try__text span { font-size: 14px; opacity: 0.85; }
.try__arrow { font-size: 22px; line-height: 1; transition: transform 0.15s; }
.try:hover .try__arrow { transform: translateX(3px); }

/* ── the global bar ───────────────────────────────────────────────────────── */
.bar {
  background: var(--bg);
  border-top: var(--border-hairline) solid var(--hairline);
  border-bottom: var(--border-hairline) solid var(--hairline);
}
.bar__inner {
  width: 100%; margin: 0 auto; padding: 11px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 28px);
}
@media (min-width: 680px) { .bar__inner { padding: 11px var(--gutter-wide); } }
.grp { display: flex; align-items: center; gap: 9px; }
.lab {
  font-family: var(--font-year); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.lab--head { color: var(--text); }
.btn {
  font-family: var(--font-year); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 7px 13px; cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.btn.is-rec { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 26%, transparent); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 3px; background: var(--hairline); outline: none;
  width: clamp(90px, 12vw, 170px); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border: 0;
  border-radius: 50%; background: var(--accent); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer;
}
input[type="range"]:disabled { opacity: 0.35; cursor: default; }

/* On a finger the 3px track is not a target. Keep the drawing identical — a
   thin rule with a round thumb — but let the input itself be 30px tall and
   paint the track as a centred background band, so the whole band answers a
   drag. The thumb grows a little too, since it is the thing being grabbed. */
@media (pointer: coarse) {
  input[type="range"] {
    height: 30px;
    border-radius: 0;
    background: transparent;
    background-image: linear-gradient(var(--hairline), var(--hairline));
    background-size: 100% 3px;
    background-position: center;
    background-repeat: no-repeat;
  }
  input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; }
  input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }
}

.swatches { display: flex; gap: 6px; align-items: center; }
.sw {
  width: 26px; height: 22px; padding: 0; border: 1px solid var(--hairline);
  border-radius: var(--radius); cursor: pointer;
}
.sw.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input[type="color"] {
  width: 30px; height: 24px; padding: 0; cursor: pointer; background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--radius);
}
.hexin {
  width: 88px; font-size: 16px; /* 16px, or iOS zooms the page on focus */
  padding: 5px 8px; color: var(--text); background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  letter-spacing: 0.04em;
}
.hexin:focus { outline: none; border-color: var(--accent); }
.sel {
  font-size: 16px; padding: 5px 8px; color: var(--text); background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer;
}
.sel:focus { outline: none; border-color: var(--accent); }
.sel option { background: var(--panel); color: var(--text); }

/* ── grid ─────────────────────────────────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-card);
  padding: clamp(24px, 3.5vw, 44px) 0 var(--space-section);
}
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }
/* the hub runs full width, so on a very wide screen a third column keeps the
   fields at a size you can read rather than one field per half a desk */
@media (min-width: 1800px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: var(--border-hairline) solid var(--hairline); background: var(--panel);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; cursor: pointer;
}
.stage canvas { display: block; width: 100%; height: 100%; }
/* While a fixed-size clip records, the canvas is a 9:16 or 16:9 frame inside
   a 16:10 stage: show it whole rather than stretched. */
.stage.is-fixed canvas { object-fit: contain; background: #000; }

/* ── fullscreen ──────────────────────────────────────────────────────────── */
.fshint {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  font-family: var(--font-year); font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--paper); opacity: 0; mix-blend-mode: screen; pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.card:hover .fshint { opacity: 0.65; }
.stage:fullscreen .fshint { display: none; }

.stage:fullscreen {
  aspect-ratio: auto; width: 100vw; height: 100vh;
  background: #000; cursor: none;
}
.stage:fullscreen.is-live { cursor: default; }

.fsbar { display: none; }
.stage:fullscreen .fsbar {
  position: absolute; left: 50%; bottom: 30px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  width: min(920px, 92vw); padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  border: var(--border-hairline) solid var(--hairline); border-radius: var(--radius);
  opacity: 0; transform: translateX(-50%) translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.stage:fullscreen.is-live .fsbar { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* The chrome is revealed by `mousemove`, which a touch device never sends, and
   any tap on the stage exits fullscreen — so on a phone the transport was
   unreachable for as long as the piece was fullscreen. With no hover there is
   nothing to hide it FROM, so it just stays out. */
@media (hover: none) {
  .stage:fullscreen .fsbar { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
}
.stage:fullscreen .fsbar .ctl { margin-top: 0; }
.stage:fullscreen .fsbar > .btn { align-self: flex-end; margin-top: 2px; }
/* the two that make no sense in here: the prose is outside the fullscreen
   element, and you are already fullscreen */
.stage:fullscreen .fsbar [data-act="read"],
.stage:fullscreen .fsbar [data-act="full"] { display: none; }
.idx {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--font-year); font-size: 11px; letter-spacing: 0.2em;
  color: var(--paper); opacity: 0.5; mix-blend-mode: screen; pointer-events: none;
}

.meta { padding: 15px clamp(14px, 1.6vw, 20px) 16px; border-top: 1px solid var(--hairline); }
.meta__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.name { font-family: var(--font-year); font-size: 14px; letter-spacing: var(--track-label-wide); text-transform: uppercase; }
.loop { font-family: var(--font-year); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.draftflag {
  margin-left: 8px; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 2px;
  font-size: 10px; letter-spacing: 0.16em; color: var(--accent); vertical-align: 1px;
}
.note {
  margin: 7px 0 0; max-width: 62ch;
  font-size: var(--text-body-size); line-height: var(--lh-snug); color: var(--muted);
}

.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ctl--transport { gap: 10px; }
.ctl--transport .scrub { flex: 1 1 140px; width: auto; min-width: 90px; }
.ctl--transport .time { min-width: 42px; text-align: right; }
.ctl .btn { padding: 6px 11px; font-size: 10.5px; }
.ctl .btn--play { min-width: 66px; }
.ctl .spd { width: clamp(70px, 8vw, 110px); }

/* ── the download menu ────────────────────────────────────────────────────── */
.dl { position: relative; }
.btn--dl { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.btn--dl:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dl__menu {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); min-width: 210px;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.55);
  padding: 5px;
}
.dl__menu[hidden] { display: none; }
.dl__menu > * {
  font-family: var(--font-heading); font-size: 13px; text-align: left;
  color: var(--text); background: transparent; border: 0; border-radius: var(--radius);
  padding: 8px 10px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.dl__menu > *:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.read { display: none; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hairline); }
.card.is-open .read { display: block; }
.read p { margin: 0 0 13px; max-width: 74ch; font-size: var(--text-body-size); line-height: var(--lh-body); color: var(--text-body); }
.rlab {
  display: block; margin-bottom: 3px;
  font-family: var(--font-year); font-size: var(--text-label); letter-spacing: var(--track-label-wide);
  text-transform: uppercase; color: var(--accent);
}
.read p:last-child { margin-bottom: 0; }

/* ── the code panel ────────────────────────────────────────────────────────
   The shader that draws the panel above it, printed as it is written. Set in
   the mono the rest of the site keeps for machine text, scrolling in its own
   box rather than stretching the card, and capped in height so a long field
   does not push the next card off the screen. */
/* ── the listening point ───────────────────────────────────────────────────
   A dot you drag over the field. It is a button so it is reachable without a
   pointer, and it sits above the canvas but below the fullscreen chrome. */
.probe {
  position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  padding: 0; border-radius: 50%; cursor: grab; touch-action: none;
  background: rgba(255, 255, 255, .92);
  border: 2px solid rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .18), 0 2px 10px rgba(0, 0, 0, .5);
}
.probe:active { cursor: grabbing; }
.probe:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.code { display: none; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hairline); }
.card.is-code .code { display: block; }
.code__note {
  margin: 0 0 12px; max-width: 74ch;
  font-size: var(--text-body-size); line-height: var(--lh-body); color: var(--text-body);
}
.code__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.code pre {
  margin: 0; max-height: 460px; overflow: auto;
  padding: 14px 16px; background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  -webkit-overflow-scrolling: touch;
}
.code code {
  display: block; white-space: pre; tab-size: 2;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12.5px; line-height: 1.62; color: var(--text-body);
}

.colophon { border-top: var(--border-hairline) solid var(--hairline); padding: clamp(28px, 4vw, 52px) 0 var(--space-section); }
.colophon p { margin: 0 0 14px; max-width: 78ch; font-size: var(--text-body-size); line-height: var(--lh-body); color: var(--muted); }
.colophon em { font-style: normal; color: var(--text-body); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  background: var(--band); color: var(--paper);
  font-family: var(--font-year); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--radius); border: 1px solid var(--hairline);
  opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 90;
}
.toast.is-up { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── embed surface ────────────────────────────────────────────────────────── */
body.embed { overflow: hidden; background: #000; }
.embed__stage { position: fixed; inset: 0; }
.embed__stage canvas { display: block; width: 100%; height: 100%; }
.embed__label {
  position: fixed; left: 16px; bottom: 14px; z-index: 5;
  font-family: var(--font-year); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper); opacity: 0.55; text-decoration: none; mix-blend-mode: screen;
}
.embed__label:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .card, .btn { transition: none; } }

/* iOS zooms the page when a focused field is set below 16px; hold every control at 16px on touch devices. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}