/* cartercole.net — dystopian terminal */

:root,
[data-era="terminal"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 190.8deg; --h1: -118.7deg; --h2: -177.4deg;
  --void-lc: 0.121 0.012; --void-o: 67.9deg;
  --panel-lc: 0.167 0.017; --panel-o: 66.1deg;
  --panel-2-lc: 0.181 0.021; --panel-2-o: 67.5deg;
  --line-lc: 0.278 0.033; --line-o: 56.6deg;
  --line-hi-lc: 0.375 0.046; --line-hi-o: 52.8deg;
  --text-lc: 0.858 0.022; --text-o: 55.1deg;
  --dim-lc: 0.652 0.037; --dim-o: 52.2deg;
  --cyan-lc: 0.842 0.136;
  --amber-lc: 0.821 0.149;
  --alert-lc: 0.656 0.235;
  --bright-lc: 0.962 0.014; --bright-o: 47.2deg;
  --on-accent-lc: 0.121 0.012; --on-accent-o: 67.9deg;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Chakra Petch", "JetBrains Mono", ui-monospace, monospace;
  --gut: 16px;

  /* the eras (eras.js) repaint the site through these. --cyan is the accent and
     --amber the second accent, whatever colour an era makes them. */
  --body: var(--mono);        /* running text */
  --glow: 1;                  /* neon glow strength, 0 = none */
  --crt: 1;                   /* scanlines, vignette and sweep */
  --grid: .028;               /* the page's faint grid */
  --radius: 0px;
  --bw: 1px;                  /* card border width */
  --lift: 0 10px 34px -18px color-mix(in srgb, var(--cyan) calc(55% * var(--glow)), transparent);
  --bg-filter: opacity(1);    /* light eras invert the dark background scenes */
  --bg-scale: 1;              /* and show them fainter */
  --scan: .3;                 /* the tech layer's scan lines, in every era */
}

/* ---------- colour, by recipe ----------
   Every era describes its palette as lightness and chroma per token plus a hue
   offset from one base hue (--h0). --shift (the ERA panel's hue dial) turns the
   whole wheel at once, and a harmony rule replaces the two accent offsets
   (--h1, --h2) while keeping each era's lightness and chroma. */

:root { --shift: 0deg; }

:root,
[data-era] {
  --H: calc(var(--h0) + var(--shift));
  --void: oklch(var(--void-lc) calc(var(--H) + var(--void-o)));
  --panel: oklch(var(--panel-lc) calc(var(--H) + var(--panel-o)));
  --panel-2: oklch(var(--panel-2-lc) calc(var(--H) + var(--panel-2-o)));
  --line: oklch(var(--line-lc) calc(var(--H) + var(--line-o)));
  --line-hi: oklch(var(--line-hi-lc) calc(var(--H) + var(--line-hi-o)));
  --text: oklch(var(--text-lc) calc(var(--H) + var(--text-o)));
  --dim: oklch(var(--dim-lc) calc(var(--H) + var(--dim-o)));
  --bright: oklch(var(--bright-lc) calc(var(--H) + var(--bright-o)));
  --on-accent: oklch(var(--on-accent-lc) calc(var(--H) + var(--on-accent-o)));
  --cyan:  oklch(var(--cyan-lc) var(--H));
  --amber: oklch(var(--amber-lc) calc(var(--H) + var(--h1)));
  --alert: oklch(var(--alert-lc) calc(var(--H) + var(--h2)));
  /* the "see-through" cards (editorial, spec, blueprint): the scene still shows, but
     dimmed enough that prose over a busy one (tilelife's blobs) stays readable */
  --veil: color-mix(in srgb, var(--void) 84%, transparent);
}

/* harmonies: where the second and third accents sit on the wheel (doubled
   attribute so they outrank the era blocks below) */
[data-harmony="analogous"][data-harmony]     { --h1: 32deg;  --h2: -32deg; }
[data-harmony="complementary"][data-harmony] { --h1: 180deg; --h2: 150deg; }
[data-harmony="split"][data-harmony]         { --h1: 150deg; --h2: 210deg; }
[data-harmony="triadic"][data-harmony]       { --h1: 120deg; --h2: 240deg; }
[data-harmony="square"][data-harmony]        { --h1: 90deg;  --h2: 180deg; }
[data-harmony="mono"][data-harmony]          { --h1: 0deg;   --h2: 0deg; }

/* ---------- design eras (eras.js) ----------
   Each era sets every token, so eras.js can read any era back from a hidden probe
   and blend two of them while the slider is between. Only colours, --glow, --crt,
   --grid, --bg-scale, --radius and --bw blend; the rest switch at the midpoint.
   figures/design-eras.md has the plan, figures/design-eras.csv the other 42. */

[data-era="bauhaus"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 259.7deg; --h1: 129.5deg; --h2: -173.6deg;
  --void-lc: 0.932 0.025; --void-o: -170.5deg;
  --panel-lc: 0.958 0.018; --panel-o: -170.4deg;
  --panel-2-lc: 0.979 0.012; --panel-2-o: -168.2deg;
  --line-lc: 0.218 0.006; --line-o: -168.1deg;
  --line-hi-lc: 0.000 0.000; --line-hi-o: 0deg;
  --text-lc: 0.226 0.006; --text-o: -168.1deg;
  --dim-lc: 0.443 0.014; --dim-o: -175.1deg;
  --cyan-lc: 0.441 0.139;
  --amber-lc: 0.558 0.204;
  --alert-lc: 0.792 0.162;
  --bright-lc: 0.178 0.000; --bright-o: 0deg;
  --on-accent-lc: 0.958 0.018; --on-accent-o: -170.4deg;
  --disp: "Jost", "Futura", system-ui, sans-serif; --body: "Jost", "Futura", system-ui, sans-serif;
  --glow: 0; --crt: 0; --grid: .07; --radius: 0px; --bw: 3px; --bg-scale: 1;
  --bg-filter: opacity(1);
  --lift: 8px 8px 0 var(--amber); --rest: none;
}

[data-era="deco"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 91.1deg; --h1: 74.1deg; --h2: -57.8deg;
  --void-lc: 0.155 0.004; --void-o: -6.5deg;
  --panel-lc: 0.188 0.011; --panel-o: -10.6deg;
  --panel-2-lc: 0.220 0.016; --panel-2-o: -6.6deg;
  --line-lc: 0.476 0.061; --line-o: -5.7deg;
  --line-hi-lc: 0.767 0.139; --line-hi-o: 0deg;
  --text-lc: 0.905 0.038; --text-o: -2.6deg;
  --dim-lc: 0.695 0.059; --dim-o: -0.8deg;
  --cyan-lc: 0.767 0.139;
  --amber-lc: 0.754 0.097;
  --alert-lc: 0.591 0.156;
  --bright-lc: 0.931 0.050; --bright-o: -3deg;
  --on-accent-lc: 0.155 0.004; --on-accent-o: -6.5deg;
  --disp: "Poiret One", "Josefin Sans", serif; --body: "Josefin Sans", system-ui, sans-serif;
  --glow: .35; --crt: 0; --grid: .035; --radius: 0px; --bw: 1px; --bg-scale: 1;
  --bg-filter: opacity(1);
  --lift: 0 0 30px -10px color-mix(in srgb, var(--cyan) 60%, transparent); --rest: none;
}

[data-era="swiss"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 28.0deg; --h1: 0deg; --h2: 0deg;
  --void-lc: 0.958 0.007; --void-o: 60.7deg;
  --panel-lc: 1.000 0.000; --panel-o: 0deg;
  --panel-2-lc: 1.000 0.000; --panel-2-o: 0deg;
  --line-lc: 0.178 0.000; --line-o: 0deg;
  --line-hi-lc: 0.000 0.000; --line-hi-o: 0deg;
  --text-lc: 0.178 0.000; --text-o: 0deg;
  --dim-lc: 0.431 0.000; --dim-o: 0deg;
  --cyan-lc: 0.577 0.234;
  --amber-lc: 0.577 0.234;
  --alert-lc: 0.577 0.234;
  --bright-lc: 0.000 0.000; --bright-o: 0deg;
  --on-accent-lc: 1.000 0.000; --on-accent-o: 0deg;
  --disp: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --glow: 0; --crt: 0; --grid: .05; --radius: 0px; --bw: 1px; --bg-scale: 1;
  --bg-filter: opacity(1);
  --lift: none; --rest: none;
}

[data-era="synthwave"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 353.6deg; --h1: -142.7deg; --h2: 97.4deg;
  --void-lc: 0.156 0.056; --void-o: -49deg;
  --panel-lc: 0.199 0.074; --panel-o: -52.5deg;
  --panel-2-lc: 0.235 0.086; --panel-2-o: -52deg;
  --line-lc: 0.400 0.148; --line-o: -48.6deg;
  --line-hi-lc: 0.682 0.240; --line-hi-o: 0deg;
  --text-lc: 0.923 0.052; --text-o: -40.5deg;
  --dim-lc: 0.709 0.106; --dim-o: -45.2deg;
  --cyan-lc: 0.682 0.240;
  --amber-lc: 0.846 0.137;
  --alert-lc: 0.879 0.162;
  --bright-lc: 0.970 0.022; --bright-o: -18.7deg;
  --on-accent-lc: 0.156 0.056; --on-accent-o: -49deg;
  --disp: "Audiowide", "Chakra Petch", sans-serif; --body: "JetBrains Mono", ui-monospace, monospace;
  --glow: 1.5; --crt: .6; --grid: .05; --radius: 2px; --bw: 1px; --bg-scale: 1.4;
  --bg-filter: opacity(1);
  --lift: 0 10px 34px -14px color-mix(in srgb, var(--cyan) 70%, transparent); --rest: none;
}

[data-era="web1"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 264.1deg; --h1: -121.6deg; --h2: 125.2deg;
  --void-lc: 0.000 0.000; --void-o: 0deg;
  --panel-lc: 0.808 0.000; --panel-o: 0deg;
  --panel-2-lc: 0.808 0.000; --panel-2-o: 0deg;
  --line-lc: 0.600 0.000; --line-o: 0deg;
  --line-hi-lc: 1.000 0.000; --line-hi-o: 0deg;
  --text-lc: 1.000 0.000; --text-o: 0deg;
  --dim-lc: 0.833 0.000; --dim-o: 0deg;
  --cyan-lc: 0.429 0.297;
  --amber-lc: 0.866 0.295;
  --alert-lc: 0.628 0.258;
  --bright-lc: 0.968 0.211; --bright-o: -154.3deg;
  --on-accent-lc: 1.000 0.000; --on-accent-o: 0deg;
  --disp: "Times New Roman", Times, serif; --body: "Times New Roman", Times, serif;
  --glow: 0; --crt: .35; --grid: 0; --radius: 0px; --bw: 2px; --bg-scale: 2;
  --bg-filter: opacity(1);
  --lift: none; --rest: none;
}

[data-era="web2"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 248.8deg; --h1: -115.5deg; --h2: 156deg;
  --void-lc: 0.951 0.012; --void-o: -8.9deg;
  --panel-lc: 1.000 0.000; --panel-o: 0deg;
  --panel-2-lc: 0.976 0.008; --panel-2-o: -12.2deg;
  --line-lc: 0.846 0.034; --line-o: -8.9deg;
  --line-hi-lc: 0.692 0.106; --line-hi-o: -4.7deg;
  --text-lc: 0.278 0.027; --text-o: -4.3deg;
  --dim-lc: 0.532 0.039; --dim-o: -2.9deg;
  --cyan-lc: 0.628 0.153;
  --amber-lc: 0.713 0.191;
  --alert-lc: 0.701 0.201;
  --bright-lc: 0.351 0.082; --bright-o: -0.7deg;
  --on-accent-lc: 1.000 0.000; --on-accent-o: 0deg;
  --disp: "Nunito", "Lucida Grande", "Trebuchet MS", sans-serif; --body: "Nunito", "Lucida Grande", "Trebuchet MS", sans-serif;
  --glow: 0; --crt: 0; --grid: 0; --radius: 12px; --bw: 1px; --bg-scale: 1;
  --bg-filter: opacity(1);
  --lift: 0 10px 24px -8px color-mix(in srgb, var(--cyan) 35%, transparent); --rest: 0 2px 6px rgba(15,61,99,.12);
}

[data-era="neubrutal"] {
  /* palette recipe: oklch lightness and chroma per token, hue as an offset */
  --h0: 6.6deg; --h1: -102.3deg; --h2: 86.4deg;
  --void-lc: 0.968 0.033; --void-o: 77.1deg;
  --panel-lc: 1.000 0.000; --panel-o: 0deg;
  --panel-2-lc: 1.000 0.000; --panel-2-o: 0deg;
  --line-lc: 0.000 0.000; --line-o: 0deg;
  --line-hi-lc: 0.000 0.000; --line-hi-o: 0deg;
  --text-lc: 0.000 0.000; --text-o: 0deg;
  --dim-lc: 0.301 0.000; --dim-o: 0deg;
  --cyan-lc: 0.701 0.200;
  --amber-lc: 0.531 0.203;
  --alert-lc: 0.885 0.170;
  --bright-lc: 0.000 0.000; --bright-o: 0deg;
  --on-accent-lc: 0.000 0.000; --on-accent-o: 0deg;
  --disp: "Space Grotesk", system-ui, sans-serif; --body: "Space Grotesk", system-ui, sans-serif;
  --glow: 0; --crt: 0; --grid: .08; --radius: 10px; --bw: 3px; --bg-scale: 1;
  --bg-filter: opacity(1);
  --lift: 10px 10px 0 #000; --rest: 6px 6px 0 #000;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--void);
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cyan) calc(var(--grid) * 100%), transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--cyan) calc(var(--grid) * 100%), transparent) 0 1px, transparent 1px 64px);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- background layers ---------- */

/* bg.js: one canvas per scene, crossfading; each scene sets its own --bg-op */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* scenes drawn in fixed colours follow the hue dial by filter; .native ones read the tokens */
.bg canvas { filter: var(--bg-filter) hue-rotate(var(--shift)); }
.bg canvas.native { filter: none; }
.bg canvas.on { opacity: calc(var(--bg-op, .45) * var(--bg-scale)); }

/* the vignette belongs to the terminal (--crt); the scan lines are part of the tech
   layer and never go below --scan in any era */
.crt {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.crt::before,
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
}
.crt::before {
  opacity: var(--crt);
  background: radial-gradient(ellipse 120% 85% at 50% 45%, transparent 38%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.78) 100%);
}
.crt::after {
  opacity: max(var(--crt), var(--scan));
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
}

.sweep {
  position: fixed;
  left: 0;
  right: 0;
  height: 36vh;
  z-index: 49;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 3.5%, transparent), transparent);
  animation: sweep 14s linear infinite;
  opacity: max(var(--crt), .8);
}

@keyframes sweep {
  0%   { transform: translateY(-40vh); }
  100% { transform: translateY(140vh); }
}

/* ---------- top status bar ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px var(--gut);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  background: color-mix(in srgb, var(--void) 82%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.topbar__spacer { flex: 1 1 auto; }
.topbar__live { color: var(--alert); display: inline-flex; align-items: center; gap: 6px; }
.topbar__host { color: var(--cyan); }
.topbar__clock { font-variant-numeric: tabular-nums; }

/* the account chip, always the last thing in the bar: SIGN IN, or your picture and alias */
.topbar__acct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
  border-radius: var(--radius);
  max-width: 34vw;
}
.topbar__acct[hidden] { display: none; }
.topbar__acct:hover, .topbar__acct:focus-visible { border-color: var(--cyan); }
.topbar__acct.is-in { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 32%, transparent); background: color-mix(in srgb, var(--amber) 5%, transparent); }
.topbar__acct.is-in:hover { border-color: var(--amber); }
.topbar__acct .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: none; }
.topbar__acctname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__avatar { width: 16px; height: 16px; object-fit: cover; border-radius: var(--radius); flex: none; display: block; }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--alert);
  box-shadow: 0 0 8px var(--alert);
  animation: blink 2s steps(1) infinite;
}

@keyframes blink { 0%,60% { opacity: 1; } 61%,100% { opacity: .18; } }

/* ---------- layout ---------- */

.wrap {
  position: relative;
  z-index: 10;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gut) 72px;
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(96px, 20vh, 190px) 0 clamp(54px, 9vh, 96px);
}

.hero__kicker {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber);
}

h1.glitch {
  position: relative;
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(2.5rem, 11.5vw, 6.5rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--bright);
  text-shadow: -1px 0 color-mix(in srgb, var(--alert) calc(16% * var(--glow)), transparent), 1px 0 color-mix(in srgb, var(--cyan) calc(16% * var(--glow)), transparent);
}

h1.glitch::before,
h1.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* a brief tick now and then, not a seizure: one thin slice each, 2px, every 14s */
h1.glitch::before { color: var(--cyan);  animation: gl-a 14s steps(1) infinite; }
h1.glitch::after  { color: var(--alert); animation: gl-b 14s steps(1) infinite; }

@keyframes gl-a {
  0%, 95%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
  95.5% { opacity: .6; clip-path: inset(30% 0 58% 0); transform: translateX(-2px); }
  96.5% { opacity: 0; }
}

@keyframes gl-b {
  0%, 95.8%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
  96% { opacity: .5; clip-path: inset(62% 0 26% 0); transform: translateX(2px); }
  96.8% { opacity: 0; }
}

.hero__sub {
  max-width: 54ch;
  margin: 24px 0 0;
  color: var(--text);
  font-size: clamp(.95rem, 2.4vw, 1.1rem);
}

.hero__term {
  margin: 30px 0 0;
  font-size: 12.5px;
  color: var(--dim);
  min-height: 1.6em;
}

.prompt { color: var(--cyan); }

.caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--cyan);
  animation: blink 1.1s steps(1) infinite;
}

/* ---------- section headers ---------- */

.section { margin: 0 0 clamp(48px, 8vh, 80px); }

.sec {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
  font-family: var(--disp);
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bright);
}

.sec__num {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: .72em;
  color: var(--on-accent);
  background: var(--cyan);
  letter-spacing: .1em;
}

.sec__name { flex: 0 0 auto; }

.sec__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--line-hi), transparent);
}

.sec__note {
  margin: 0 0 26px;
  font-size: 12.5px;
  color: var(--dim);
}

/* ---------- cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 14px;
}

.grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

/* restricted: full-width illustrated entries over a two-up row of plain ones */
.grid--locked { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--panel-2), var(--panel));
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--rest, none);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  opacity: .5;
  transition: opacity .2s;
}

.card::before {
  top: 0; left: 0;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.card::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

.card:hover,
.card:focus-within {
  border-color: var(--line-hi);
  transform: translateY(-3px);
  box-shadow: var(--lift), inset 0 0 44px -28px color-mix(in srgb, var(--cyan) calc(70% * var(--glow)), transparent);
}

.card:hover::before,
.card:hover::after { opacity: 1; }

.scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
}

.card:hover .scan { animation: scan 1.4s linear infinite; }

@keyframes scan {
  0%   { top: 0;    opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .85; }
  100% { top: 100%; opacity: 0; }
}

.card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.idx {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--amber);
}

.card__head h3 {
  margin: 0;
  font-family: var(--disp);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bright);
  overflow-wrap: anywhere;
}

.card--sm .card__head h3 { font-size: 1rem; }

.desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.chip {
  padding: 3px 7px;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
}

.chip--star { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 32%, transparent); background: color-mix(in srgb, var(--amber) 5%, transparent); }

.chip--alert {
  color: var(--alert);
  border-color: color-mix(in srgb, var(--alert) 38%, transparent);
  background: color-mix(in srgb, var(--alert) 7%, transparent);
}

.link {
  margin-left: auto;
  padding: 3px 9px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--cyan);
  text-decoration: none;
  transition: background .18s, box-shadow .18s;
}

.link:hover { background: color-mix(in srgb, var(--cyan), white 35%); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--cyan) calc(80% * var(--glow)), transparent); }
.link + .link { margin-left: 0; }

/* data block inside a card */

.card--data { grid-column: 1 / -1; }

.data-wrap { overflow-x: auto; margin-top: 2px; }

.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.data caption {
  caption-side: top;
  padding: 0 0 8px;
  text-align: left;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}

.data th,
.data td {
  padding: 5px 12px 5px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}

.data th:last-child,
.data td:last-child { padding-right: 0; }

.data thead th {
  padding-top: 0;
  border-top: 0;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.data tbody th {
  width: 30%;
  font-weight: 400;
  color: var(--dim);
}

.data td { color: var(--text); }
.data .ok  { color: var(--cyan); }
.data .bad { color: var(--alert); }

.desc--fine {
  flex: 0 0 auto;
  font-size: 12px;
}

/* locked / private */

.card--locked {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--alert) 26%, transparent);
  background-image:
    linear-gradient(160deg, var(--panel-2), var(--panel)),
    repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--alert) 3.5%, transparent) 7px 14px);
}

.card--locked::before,
.card--locked::after {
  border-color: var(--alert);
  opacity: .35;
}

.card--locked .card__head h3 { color: color-mix(in srgb, var(--bright) 85%, var(--alert)); }

/* wide entry with screenshots beside the description (add card--wide for the span) */

.card--shots {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas:
    "head head"
    "desc shots"
    "meta shots";
  gap: 12px 24px;
  align-items: start;
}

/* an entry carrying a long strip of shots reads better stacked: the prose at a
   sane measure, then the gallery across the whole card */
.card--shots-stack {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "desc"
    "shots"
    "meta";
}

.card--shots-stack .desc  { max-width: 88ch; }
.card--shots-stack .shots { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.card--shots .card__head { grid-area: head; }
.card--shots .desc       { grid-area: desc; }
.card--shots .shots      { grid-area: shots; }
.card--shots .meta       { grid-area: meta; align-self: end; }

@media (max-width: 950px) {
  .card--shots {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "desc"
      "shots"
      "meta";
  }
}

/* wide entry: span the grid */

.card--wide { grid-column: 1 / -1; }

/* wide card with screenshots: a.shot tiles with an overlaid caption */

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shot {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--void);
  transition: border-color .18s, box-shadow .18s;
}

.card--locked .shot { border-color: color-mix(in srgb, var(--alert) 22%, transparent); }

.shot:hover,
.shot:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 18px -6px color-mix(in srgb, var(--cyan) calc(70% * var(--glow)), transparent);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.82) brightness(.92);
  transition: filter .25s, transform .4s;
}

.shot:hover img,
.shot:focus-visible img { filter: none; transform: scale(1.03); }

.shot__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 20px 9px 7px;
  font-size: 9.5px;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  background: linear-gradient(0deg, color-mix(in srgb, var(--void) 94%, transparent) 0%, color-mix(in srgb, var(--void) 60%, transparent) 60%, transparent 100%);
}

.shot__cap b { font-weight: 400; color: var(--amber); }

@media (max-width: 860px) {
  /* tiled two across, a phone screenshot is unreadable and its caption covers
     it; a swipeable strip keeps every tile wide enough to make out */
  .shots,
  .card--shots-stack .shots,
  .entry__body .shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(190px, 72%, 320px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-hi) transparent;
  }

  .shots .shot { scroll-snap-align: start; }

  .shots::-webkit-scrollbar { height: 5px; }
  .shots::-webkit-scrollbar-track { background: color-mix(in srgb, var(--line) 30%, transparent); }
  .shots::-webkit-scrollbar-thumb { background: var(--line-hi); }
}

/* ---------- uplink ---------- */

.uplink {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.uplink__btn {
  padding: 13px 18px;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  background: color-mix(in srgb, var(--cyan) 4%, transparent);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
  overflow-wrap: anywhere;
}

.uplink__btn:hover {
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px -16px color-mix(in srgb, var(--cyan) calc(90% * var(--glow)), transparent);
}

/* ---------- footer ---------- */

.foot {
  margin-top: clamp(40px, 8vh, 80px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.foot__tele { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.foot__tele .sep { color: var(--line-hi); }
.foot__end { margin: 0; color: color-mix(in srgb, var(--dim) 75%, var(--void)); }

/* ---------- focus ---------- */

a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ---------- motion / small screens ---------- */

@media (max-width: 420px) {
  .topbar__host { display: none; }
  .topbar__acctname { display: none; }
  .card { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sweep,
  .dot,
  .caret,
  h1.glitch::before,
  h1.glitch::after,
  .card:hover .scan { animation: none; }
  .caret { opacity: 1; }
  .card:hover, .card:focus-within { transform: none; }
  .uplink__btn:hover { transform: none; }
  .shot:hover img,
  .shot:focus-visible img { transform: none; }
  .bg canvas.on { opacity: calc(var(--bg-op, .45) * .5); }
}

/* ---------- background: the scene name, and play mode ---------- */

.topbar__bg {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  padding: 1px 7px;
  max-width: 34vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.topbar__bg::before { content: "BG "; color: var(--cyan); }
.topbar__bg::after { content: " \25BE"; color: var(--dim); }
.topbar__bg:hover, .topbar__bg:focus-visible, .topbar__bg[aria-expanded="true"] { color: var(--text); border-color: var(--line-hi); }

/* the picker under the name: every scene, scrolling; AUTO on top, play and /bg below */
.bgmenu {
  position: fixed;
  z-index: 46;
  display: flex;
  flex-direction: column;
  padding: 4px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: var(--bw, 1px) solid var(--line-hi);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}
.bgmenu[hidden] { display: none; }
.bgmenu__list {
  max-height: min(52vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 4px 0;
  padding: 4px 0;
  border-block: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}
.bgmenu__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 8px 6px 22px;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dim);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.bgmenu__item:hover, .bgmenu__item:focus-visible { color: var(--text); background: color-mix(in srgb, var(--cyan) 9%, transparent); outline: none; }
.bgmenu__item.is-showing { color: var(--cyan); }
.bgmenu__item[aria-checked="true"]::before { content: "\25B8"; position: absolute; left: 8px; color: var(--amber); }
.bgmenu__item.is-skipped { opacity: .55; }
.bgmenu__ico { flex: none; align-self: center; width: 14px; height: 14px; opacity: .85; }
.bgmenu__item.is-showing .bgmenu__ico, .bgmenu__item[aria-checked="true"] .bgmenu__ico { opacity: 1; }
.bgmenu__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bgmenu__note { color: var(--dim); letter-spacing: .08em; text-transform: none; }
.bgmenu__foot { display: flex; }
.bgmenu__foot .bgmenu__item { flex: 1; padding-left: 8px; }
.bgmenu__foot .bgmenu__item + .bgmenu__item { justify-content: flex-end; }

/* the lock: amber when the background is your pick, dim when the era picks (AUTO) */
.topbar__lock {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 20px;
  padding: 0;
  margin-left: -6px;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  touch-action: manipulation;
}
.topbar__lock[hidden] { display: none; }
.topbar__lock svg { width: 10px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.topbar__lock rect { fill: currentColor; fill-opacity: .25; }
.topbar__lock .topbar__shackle { display: none; }
.topbar__lock .topbar__shackle-open { transform: translate(2px, -1.5px); }
.topbar__lock[aria-pressed="true"] .topbar__shackle { display: inline; }
.topbar__lock[aria-pressed="true"] .topbar__shackle-open { display: none; }
.topbar__lock[aria-pressed="true"] { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.topbar__lock:hover, .topbar__lock:focus-visible { color: var(--text); border-color: var(--line-hi); }

/* the song picker beside the note: the same button and menu as the background's */
.topbar__song { max-width: 22vw; margin-left: -6px; }
.topbar__song::before { content: "SONG "; color: var(--cyan); }
.topbar__song[hidden] { display: none; }
.topbar__song.is-kept::before { color: var(--amber); }
@media (max-width: 520px) { .topbar__song { max-width: 24vw; } }

/* the music (music.js): cyan while it's on, dim when it's off */
.topbar__snd {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  padding: 1px 7px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.topbar__snd[hidden] { display: none; }
.topbar__snd[aria-pressed="true"] { color: var(--cyan); }
.topbar__snd:hover, .topbar__snd:focus-visible { color: var(--text); border-color: var(--line-hi); }
/* a phone: just the note, crossed out when off */
@media (max-width: 520px) {
  .topbar__snd { padding: 1px 5px; }
  .topbar__snd-w { display: none; }
  .topbar__snd[aria-pressed="false"] { text-decoration: line-through; }
}

/* the page steps aside and the scene takes the screen and every touch */
body.bg-play { overflow: hidden; }
body.bg-play > :not(.bg):not(.crt):not(.bgplay):not(script):not(.topbar):not(#era):not(.bgmenu) {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
body.bg-play .bg { pointer-events: auto; touch-action: none; cursor: crosshair; }
body.bg-play .bg canvas.on { opacity: 1; }

.bgplay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom));
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  background: linear-gradient(0deg, color-mix(in srgb, var(--void) 90%, transparent), color-mix(in srgb, var(--void) 0%, transparent));
  pointer-events: none;
  flex-wrap: wrap;
}

body.bg-play .bgplay { display: flex; }

/* a scene's own buttons (the seed, for the Life ones) sit on a row above the bar */
.bgplay__acts { order: -1; flex: 0 0 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bgplay__acts:empty { display: none; }
.bgplay__slide { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; font: inherit; letter-spacing: inherit; }
.bgplay__slide input { width: 96px; accent-color: currentColor; }
.bgplay__act { padding: 0 12px; height: 34px; letter-spacing: inherit; text-transform: inherit; }

.bgplay__mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bgplay__name { color: var(--cyan); font-family: var(--disp); font-size: 12px; }
.bgplay__help { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* a phone: score and controls get two lines rather than an ellipsis */
@media (max-width: 600px) {
  .bgplay { letter-spacing: .08em; gap: 6px; }
  .bgplay__help {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
  }
  .topbar__bg { max-width: 38vw; }
}

.bgplay__btn {
  pointer-events: auto;
  font: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--line-hi);
  min-width: 40px;
  height: 40px;
  cursor: pointer;
  touch-action: manipulation;
}

.bgplay__btn:hover, .bgplay__btn:focus-visible { color: var(--cyan); border-color: var(--cyan); }
.bgplay__x { color: var(--alert); }
.bgplay__all { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- /asobi's cards, and the arcade on /bg ---------- */

.asobi {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.entry__body .asobi__card { padding: 0; margin: 0; }
.entry__body .asobi__card::before { content: none; }

.asobi__go {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.asobi__go:hover, .asobi__go:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--cyan) calc(60% * var(--glow)), transparent);
  transform: translateY(-2px);
}

.asobi__name { font-family: var(--disp); font-size: 17px; letter-spacing: .08em; color: var(--cyan); }
.asobi__name::before { content: "\25B6  "; color: var(--amber); font-size: 12px; }
.asobi__what { font-size: 13px; line-height: 1.5; }
.asobi__keys, .asobi__hi { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.asobi__hi { color: var(--amber); }
.asobi__hi:empty { display: none; }
.asobi__key { color: var(--cyan); }

/* a card with a second way in: the walkthrough under the thing itself */
.entry__body .asobi__card { display: flex; flex-direction: column; }
.asobi__card .asobi__go { flex: 1; height: auto; }
.asobi__more {
  display: block;
  padding: 7px 16px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--line);
  border-top: 0;
}
.asobi__more::after { content: "  \2192"; }
.asobi__more:hover, .asobi__more:focus-visible { color: var(--cyan); border-color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .asobi__go:hover, .asobi__go:focus-visible { transform: none; }
}

/* ---------- /asobi/<game>: the rules of one game, with chibi Carter ---------- */

.gamehero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px 28px; align-items: end; }
.gamehero__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 6px; }
.gamehero__fine { font-size: 12px; color: var(--dim); margin: 0 0 4px; }

.entry__body a.gplay {
  display: inline-block;
  font-family: var(--disp);
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--on-accent);
  background: var(--amber);
  border: var(--bw) solid var(--amber);
  border-radius: var(--radius);
  padding: 9px 20px;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.entry__body a.gplay:hover, .entry__body a.gplay:focus-visible {
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--amber) calc(70% * var(--glow)), transparent);
  transform: translateY(-1px);
}

.gkey {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--cyan);
  padding: 1px 8px;
  border: 1px solid var(--line-hi);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  white-space: nowrap;
}

.gamepage section { scroll-margin-top: 48px; }
.gamepage section > p, .gamepage section > ul, .gamepage .gamesplit > ul, .gamepage .gamesplit > ol { max-width: 78ch; }
.entry__body .gamerules { margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.entry__body .gamerules li { margin-bottom: 8px; padding-left: 30px; counter-increment: rule; }
.entry__body .gamerules li::before {
  content: counter(rule);
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  line-height: 19px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
  border: 1px solid var(--line-hi);
  border-radius: 50%;
}
.gamethings tbody th { white-space: nowrap; }
.gamethings td.gamethings__pts { padding-right: 0; font-family: var(--mono); white-space: nowrap; color: var(--amber); text-align: right; }
.gamethings thead th:last-child { text-align: right; }
.gamethings .bglegend__sw { margin-right: 4px; vertical-align: -2px; }

/* chibi Carter, with what he says in a bubble whose tail points at him */
.carter { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.carter__img { width: 100%; max-width: 220px; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.carter__say {
  position: relative;
  order: -1;
  max-width: 260px;
  margin-bottom: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
}
.carter__say::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: inherit;
  border: 1px solid var(--line-hi);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.gamehero .carter { align-self: end; }
.gamesplit { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 28px; align-items: end; }
.gamesplit--two { grid-template-columns: minmax(0, 1fr) 200px 200px; }
.gamesplit .carter__img { max-width: 190px; }

@media (max-width: 760px) {
  .gamehero, .gamesplit, .gamesplit--two { grid-template-columns: 1fr; }
  .gamehero .carter, .gamesplit .carter { max-width: 260px; margin: 8px auto 0; }
  .gamehero .carter { order: -1; }
}

/* ---------- overlay: screenshot lightbox and entry dossier ---------- */

/* DETAIL control, a button wearing the .link skin */
.link--btn {
  font-family: var(--mono);
  line-height: inherit;
  border: 0;
  cursor: pointer;
  color: var(--on-accent);
  background: var(--amber);
}

.link--btn:hover { background: color-mix(in srgb, var(--amber), white 30%); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--amber) calc(80% * var(--glow)), transparent); }

body.ov-on { overflow: hidden; }

.ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 44px);
  overflow-y: auto;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .16s ease-out;
}

.ov.is-on { opacity: 1; }
.ov[hidden] { display: none; }

.ov__x {
  position: fixed;
  top: clamp(10px, 2.4vw, 22px);
  right: clamp(10px, 2.4vw, 22px);
  z-index: 2;
  width: 34px;
  height: 34px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line-hi);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}

.ov__x:hover,
.ov__x:focus-visible { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); }

.ov__panel {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: auto;
  transform: translateY(6px);
  transition: transform .16s ease-out;
}

.ov.is-on .ov__panel { transform: none; }

/* --- lightbox --- */

.ov__panel--shot { max-width: 1440px; }

.ov__fig {
  margin: 0;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) calc(8% * var(--glow)), transparent), 0 24px 70px -20px rgba(0,0,0,.9);
}

.ov__view {
  position: relative;
  overflow: hidden;
}

.ov__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  background: var(--void);
  user-select: none;
  -webkit-user-drag: none;
}

/* the tile's image stands in while the full one loads; a line scans it meanwhile */
.ov__fig.is-loading .ov__view::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .7;
  animation: scan 1.6s linear infinite;
}

.ov__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 10px 13px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  border-top: 1px solid var(--line);
}

.ov__n { color: var(--amber); }
.ov__capt { color: var(--text); }

.ov__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--cyan);
  background: color-mix(in srgb, var(--void) 88%, transparent);
  border: 1px solid var(--line-hi);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}

.ov__nav:hover,
.ov__nav:focus-visible { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); }

.ov__nav--prev { left: -1px; }
.ov__nav--next { right: -1px; }

/* --- 1:1 zoom --- */

.ov__tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
}

.ov__tools[hidden] { display: none; }

.ov__dims { font-variant-numeric: tabular-nums; }

.ov__zoom {
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}

.ov__zoom:hover,
.ov__zoom:focus-visible { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); }

.ov__zoom[aria-pressed="true"] { color: var(--on-accent); background: var(--amber); border-color: var(--amber); }
.ov__zoom[aria-pressed="true"]:hover,
.ov__zoom[aria-pressed="true"]:focus-visible { background: color-mix(in srgb, var(--amber), white 30%); border-color: color-mix(in srgb, var(--amber), white 30%); }

.ov__fig--zoomable .ov__view { cursor: zoom-in; }

/* zoomed: the image at its own size inside a viewport that keeps the fitted height */
.ov__fig.is-zoomed .ov__view {
  overflow: auto;
  cursor: grab;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}

.ov__fig.is-dragging .ov__view { cursor: grabbing; }

.ov__fig.is-zoomed .ov__view::-webkit-scrollbar { width: 6px; height: 6px; }
.ov__fig.is-zoomed .ov__view::-webkit-scrollbar-track { background: color-mix(in srgb, var(--line) 30%, transparent); }
.ov__fig.is-zoomed .ov__view::-webkit-scrollbar-thumb { background: var(--line-hi); }

.ov__fig.is-zoomed .ov__img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

.ov__view:focus { outline: none; }
.ov__view:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* --- dossier --- */

.ov__panel--detail {
  padding: clamp(18px, 3vw, 32px);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-hi);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) calc(7% * var(--glow)), transparent), 0 24px 70px -20px rgba(0,0,0,.9);
}

.ov__panel--detail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}

.ov__head { position: relative; margin-bottom: 18px; }

.ov__kicker {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--dim);
}

.ov__head h2 {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cyan);
}

.ov__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}

.ov__meta .link { margin-left: 0; }

.ov__body { position: relative; }

.ov__body .desc { margin: 0 0 12px; }

.ov__more {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ov__more h4 {
  margin: 18px 0 6px;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--amber);
}

.ov__more h4:first-child { margin-top: 0; }

.ov__more p { margin: 0 0 11px; color: var(--dim); }
.ov__more p:last-child { margin-bottom: 0; }
.ov__more strong { color: var(--text); font-weight: 400; }
.ov__more em { color: var(--text); font-style: italic; }
.ov__more code { color: var(--cyan); font-size: .92em; }

.ov__more ul {
  margin: 0 0 11px;
  padding-left: 0;
  list-style: none;
}

.ov__more li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
  color: var(--dim);
}

.ov__more li::before {
  content: "\203A";
  position: absolute;
  left: 2px;
  color: var(--cyan);
}

.ov__strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .ov__nav { padding: 8px 10px; font-size: 9px; }
  .ov__img { max-height: calc(100vh - 190px); }
  .ov__strip { grid-template-columns: repeat(2, 1fr); }
  .ov__dims { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ov,
  .ov__panel { transition: none; }
  .ov__fig.is-loading .ov__view::after { animation: none; }
}

/* ---------- entry pages ---------- */

/* the card's title is the way to the entry's own page */
.card__head h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .18s;
}

.card__head h3 a:hover,
.card__head h3 a:focus-visible { color: var(--cyan); }

.entry { padding-top: clamp(84px, 14vh, 150px); }

.crumb {
  margin: 0 0 clamp(26px, 5vh, 44px);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.crumb a { color: var(--cyan); text-decoration: none; }
.crumb a:hover,
.crumb a:focus-visible { text-decoration: underline; }
.crumb .sep { margin: 0 8px; color: var(--line-hi); }

.entry__head { margin: 0 0 clamp(26px, 5vh, 40px); }

.entry__title {
  margin: 0 0 16px;
  font-family: var(--disp);
  font-size: clamp(1.9rem, 6.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--bright);
  overflow-wrap: anywhere;
  text-shadow: -1px 0 color-mix(in srgb, var(--alert) calc(30% * var(--glow)), transparent), 1px 0 color-mix(in srgb, var(--cyan) calc(30% * var(--glow)), transparent);
}

.entry .link { margin-left: 0; }

/* prose keeps a reading measure; the gallery and the table take the width */
.entry__body > p,
.entry__body > h2,
.entry__body > ul,
.entry__body .data { max-width: 78ch; }

.entry__body p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dim);
}

.entry__body .desc {
  margin: 0 0 16px;
  font-size: 15.5px;
  color: var(--text);
}

.entry__body .desc--fine {
  font-size: 13px;
  line-height: 1.65;
  color: var(--dim);
}

.entry__body .data-wrap { margin: 6px 0 22px; }

.entry__body .shots {
  margin: 26px 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.entry__body h2 {
  margin: 30px 0 8px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--amber);
}

.entry__body strong { color: var(--text); font-weight: 400; }
.entry__body em { color: var(--text); font-style: italic; }
.entry__body code { color: var(--cyan); font-size: .92em; }

.entry__body ul {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}

.entry__body li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dim);
}

.entry__body li::before {
  content: "\203A";
  position: absolute;
  left: 2px;
  color: var(--cyan);
}

/* ---------- prose links (privacy) ---------- */

.entry__body a.inline,
.entry__body p a,
.consent a,
.foot__end a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  text-underline-offset: .2em;
}

.entry__body p a:hover,
.consent a:hover,
.foot__end a:hover { text-decoration-color: var(--cyan); }

/* ---------- consent banner ---------- */

.consent {
  position: fixed;
  left: var(--gut);
  right: var(--gut);
  bottom: var(--gut);
  z-index: 60;
  max-width: 560px;
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-hi);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--cyan) calc(8% * var(--glow)), transparent), inset 0 0 44px -30px color-mix(in srgb, var(--cyan) calc(70% * var(--glow)), transparent);
}

.consent[hidden] { display: none; }
.consent p { margin: 0 0 10px; }

.consent__head {
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--amber);
}

.consent__choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.consent__btn {
  padding: 7px 12px;
  font: inherit;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
}

.consent__btn:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); border-color: var(--cyan); }

.consent__btn--yes { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); }
.consent__btn--yes:hover { background: color-mix(in srgb, var(--cyan), white 35%); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--cyan) calc(80% * var(--glow)), transparent); }

.foot__btn {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--cyan);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  text-underline-offset: .2em;
}

button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- an entry's video ---------- */

/* templates/_video.html: the browser's own player, framed like a shot tile */

.tour {
  margin: 26px 0 30px;
  max-width: 1040px;
}

.ov__more .tour { margin: 0 0 22px; }

.tour video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--void);
  border: 1px solid var(--line);
  transition: border-color .18s, box-shadow .18s;
}

/* a phone's screen: its own shape, as tall as a wide video is wide would be too much */
.tour--tall { max-width: 300px; }

.tour video:hover,
.tour video:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 18px -6px color-mix(in srgb, var(--cyan) calc(70% * var(--glow)), transparent);
  outline: none;
}

.tour__cap {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

.tour__len { margin-left: auto; color: var(--amber); letter-spacing: .1em; }

/* on YouTube: the player, inline in the same frame as a shot tile */
.tour__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--void);
  border: 1px solid var(--line);
}

.tour__on { color: var(--cyan); text-decoration: none; }
.tour__on:hover, .tour__on:focus-visible { text-decoration: underline; }

/* ---------- relayed posts ---------- */

/* A Facebook post as the site draws it (templates/_posts.html), in place of
   Facebook's embed, which cannot be restyled and would load its trackers. */

.posts {
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin: 26px 0 30px;
}

.ov__more .posts { margin: 0 0 22px; }
.ov__more .posts:last-child { margin-bottom: 0; }

.post {
  position: relative;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 44px -30px color-mix(in srgb, var(--cyan) calc(60% * var(--glow)), transparent);
  transition: border-color .2s, box-shadow .2s;
}

.post::before,
.post::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: .5;
  pointer-events: none;
  transition: opacity .2s;
}

.post::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.post::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

.post:hover,
.post:focus-within {
  border-color: var(--line-hi);
  box-shadow: 0 10px 34px -20px color-mix(in srgb, var(--cyan) calc(50% * var(--glow)), transparent), inset 0 0 44px -28px color-mix(in srgb, var(--cyan) calc(70% * var(--glow)), transparent);
}

.post:hover::before,
.post:hover::after,
.post:focus-within::before,
.post:focus-within::after { opacity: 1; }

.post__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  background: color-mix(in srgb, var(--void) 50%, transparent);
  border-bottom: 1px solid var(--line);
}

.post__src { flex: 1 1 auto; min-width: 0; }

.post__when {
  flex: 0 0 auto;
  letter-spacing: .1em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.post__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 0;
}

.post__mono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  box-shadow: inset 0 0 14px -6px color-mix(in srgb, var(--cyan) calc(60% * var(--glow)), transparent);
}

.post__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.post__name {
  font-family: var(--disp);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bright);
}

.post__sub {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.post__text { padding: 12px 16px 0; }

.post__text p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: anywhere;
}

.post__text p:last-child { margin-bottom: 0; }

.post__text a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  text-underline-offset: .2em;
}

.post__text a:hover { text-decoration-color: var(--cyan); }
.post__text a.post__tag { text-decoration: none; }
.post__text a.post__tag:hover { text-decoration: underline; }

.post__media { margin: 14px 16px 0; }

/* The picture keeps its own shape: --ar (set by the template from the file) is
   its width / height, which the .shot rule would otherwise force to 16:10. A tall
   one is held to 620px high and its frame narrows to fit, so it never letterboxes;
   the width is known before the image loads, so nothing jumps. */
.post__shot,
.post__play {
  width: min(100%, calc(min(72vh, 620px) * var(--ar)));
  margin: 0 auto;
}

.post__shot img,
.post__play img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
}

.post__shot .shot__cap { display: none; }

.post__play {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--void);
  border: 1px solid var(--line);
  transition: border-color .18s, box-shadow .18s;
}

.post__play img {
  display: block;
  width: 100%;
  filter: saturate(.8) brightness(.72);
  transition: filter .25s;
}

.post__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  font-size: 10.5px;
  letter-spacing: .18em;
  white-space: nowrap;
  color: var(--on-accent);
  background: var(--cyan);
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--cyan) calc(80% * var(--glow)), transparent);
  transition: background .18s;
}

.post__play:hover,
.post__play:focus-visible { border-color: var(--cyan); box-shadow: 0 0 18px -6px color-mix(in srgb, var(--cyan) calc(70% * var(--glow)), transparent); }
.post__play:hover img,
.post__play:focus-visible img { filter: saturate(.9) brightness(.9); }
.post__play:hover .post__badge { background: color-mix(in srgb, var(--cyan), white 35%); }

.post__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 420px) {
  .post__bar { padding: 7px 12px; letter-spacing: .14em; }
  .post__who { padding: 14px 12px 0; }
  .post__text { padding: 10px 12px 0; }
  .post__media { margin: 12px 12px 0; }
  .post__foot { padding: 10px 12px; }
}

/* ---------- design eras: what tokens can't say ---------- */

/* ---------- the tech layer ----------
   Every era is the terminal rendering that style: the top bar, the kicker, the typed
   prompt, the small labels and the HUD stay monospace; scan lines, the sweep, the card
   scan line and the rare title glitch stay on in every era, in the era's own colours. */
.topbar, .hero__kicker, .hero__term, .idx, .chip, .link, .link--btn, .sec__num, .sec__note,
.meta, .foot, .era__why, .era__tick, .era__colour, .hud { font-family: var(--mono); }
html[data-era]:not([data-era="terminal"]) h1.glitch { text-shadow: none; }

.hud {
  position: fixed;
  right: var(--gut);
  bottom: 10px;
  z-index: 41;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}
.hud b { color: var(--cyan); font-weight: 500; }
body.bg-play .hud { display: none; }
@media (max-width: 640px) { .hud { display: none; } }

/* Bauhaus: a circle, a square and a triangle; red, blue, yellow */
html[data-era="bauhaus"] .card::before {
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: var(--amber); top: 10px; left: auto; right: 34px; opacity: 1;
}
html[data-era="bauhaus"] .card::after {
  width: 18px; height: 16px; border: 0; background: var(--alert);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); top: 10px; bottom: auto; right: 10px; opacity: 1;
}
html[data-era="bauhaus"] h1.glitch { letter-spacing: -.02em; }
html[data-era="bauhaus"] .sec__num { border-radius: 50%; padding: 4px 9px; }

/* Art Deco: thin double rules and gold */
html[data-era="deco"] .card { outline: 1px solid var(--line); outline-offset: -6px; }
html[data-era="deco"] .card::before, html[data-era="deco"] .card::after { border-color: var(--cyan); width: 22px; height: 22px; }
html[data-era="deco"] h1.glitch { font-weight: 400; letter-spacing: .08em; }
html[data-era="deco"] .sec, html[data-era="deco"] .card__head h3 { font-weight: 400; }

/* Swiss: one heavy rule on top, no boxes, tight grotesk */
html[data-era="swiss"] .card {
  border-width: 6px 0 0; border-color: var(--line); background: transparent; padding-left: 0; padding-right: 0;
}
html[data-era="swiss"] .card::before, html[data-era="swiss"] .card::after { display: none; }
html[data-era="swiss"] .card:hover, html[data-era="swiss"] .card:focus-within { transform: none; border-color: var(--cyan); }
html[data-era="swiss"] h1.glitch { font-weight: 800; letter-spacing: -.045em; text-transform: none; }
html[data-era="swiss"] .sec { letter-spacing: -.01em; font-weight: 800; }

/* Synthwave: chrome on the title */
html[data-era="synthwave"] h1.glitch {
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--cyan), white 75%) 45%, var(--cyan) 55%,
    color-mix(in oklch, var(--cyan), var(--amber)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cyan) 50%, transparent));
}

/* Web 1.0: bevels, Times, underlined blue links, a navy title bar */
html[data-era="web1"] .card {
  --text: #000; --dim: #222; --bright: #000080;
  border-style: outset; border-color: #fff #808080 #808080 #fff;
}
html[data-era="web1"] .era {
  --text: #000; --dim: #222; --bright: #000080;
  border-style: outset; border-color: #fff #808080 #808080 #fff;
}
html[data-era="web1"] .card::before, html[data-era="web1"] .card::after { display: none; }
html[data-era="web1"] .card:hover, html[data-era="web1"] .card:focus-within { transform: none; }
html[data-era="web1"] .link, html[data-era="web1"] .link--btn {
  color: #0000ee; background: none; text-decoration: underline; letter-spacing: 0; text-transform: none; font-size: 13px;
}
html[data-era="web1"] .chip { color: #000; background: #fff; border: 1px solid #000; }
html[data-era="web1"] .topbar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; border-color: #000; }
html[data-era="web1"] .topbar__host { color: #fff; }
html[data-era="web1"] .sec__num { background: #000080; color: #fff; }

/* Web 2.0: glossy pills and soft rounded boxes */
html[data-era="web2"] .card::before, html[data-era="web2"] .card::after { display: none; }
html[data-era="web2"] .link, html[data-era="web2"] .sec__num, html[data-era="web2"] .chip {
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 70%, #000);
  background: linear-gradient(180deg, color-mix(in oklab, var(--cyan), white 45%) 0%,
    color-mix(in oklab, var(--cyan), white 12%) 49%, var(--cyan) 51%, color-mix(in oklab, var(--cyan), white 22%) 100%);
  color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25); letter-spacing: .04em;
}
html[data-era="web2"] .topbar { background: linear-gradient(180deg, #fff, #dfeaf3); border-color: var(--line); }
html[data-era="web2"] h1.glitch { text-transform: none; letter-spacing: -.02em; }

/* Neubrutalism: thick outlines, hard shadows, flat bright fills */
html[data-era="neubrutal"] .card::before, html[data-era="neubrutal"] .card::after { display: none; }
html[data-era="neubrutal"] .card:hover, html[data-era="neubrutal"] .card:focus-within { transform: translate(-4px, -4px); }
html[data-era="neubrutal"] .link, html[data-era="neubrutal"] .chip, html[data-era="neubrutal"] .sec__num {
  border: 2px solid #000; border-radius: 6px; box-shadow: 3px 3px 0 #000;
}
html[data-era="neubrutal"] .chip { background: var(--alert); color: #000; }
html[data-era="neubrutal"] .topbar { background: var(--alert); border-bottom: 3px solid #000; color: #000; }

/* ---------- the era slider ---------- */

.topbar__era {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--amber);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1px 7px;
  cursor: pointer;
  touch-action: manipulation;
}
.topbar__era:hover, .topbar__era:focus-visible, .topbar__era[aria-expanded="true"] { border-color: var(--amber); }

.era {
  position: fixed;
  top: 34px;
  left: 50%;
  z-index: 45;
  width: min(760px, calc(100% - 2 * var(--gut)));
  transform: translateX(-50%);
  padding: 14px 16px 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: var(--bw) solid var(--line-hi);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}
.era[hidden] { display: none; }

.era__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.era__year { font-family: var(--disp); font-size: 30px; line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.era__name { font-family: var(--disp); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--bright); }
.era__why { flex: 1 1 100%; margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.era__x {
  margin-left: auto; font: inherit; font-size: 14px; color: var(--dim); background: none;
  border: 0; cursor: pointer; padding: 0 2px;
}

.era__range {
  display: block;
  width: 100%;
  margin: 12px 0 4px;
  accent-color: var(--cyan);
  cursor: grab;
}
.era__range:active { cursor: grabbing; }

.era__ticks { position: relative; height: 32px; }
.era__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font: inherit;
  font-size: 9.5px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  white-space: nowrap;
}
.era__tick b { font-weight: 600; color: var(--text); }
.era__tick[aria-current="true"], .era__tick[aria-current="true"] b { color: var(--cyan); }
.era__tick:first-child { transform: none; }
.era__tick:last-child { transform: translateX(-100%); }

@media (max-width: 520px) {
  .era__tick span { display: none; }
  .topbar__clock { display: none; }
}

/* the page morphs between eras; a font switch crossfades */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* the colour row: hue dial, harmony chips, dice */
.era__colour {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--dim);
}
.era__hue-l { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; }
.era__hue {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.era__hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--text);
}
.era__hue::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--text); }
.era__harm { display: flex; flex-wrap: wrap; gap: 4px; }
.era__chip, .era__dice {
  font: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 6px;
  cursor: pointer;
}
.era__chip[aria-pressed="true"] { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); }
.era__chip:hover, .era__dice:hover { border-color: var(--cyan); color: var(--text); }
.era__dice { font-size: 14px; line-height: 1; padding: 2px 7px; }

/* the tempo row (music.js): TEMPO, the slider, a readout, RESET. The slider may shrink
   (min-width: 0) so the readout and the button never get pushed over each other. */
.bgmenu__tempo { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--dim); }
.bgmenu__tempo-l { flex: none; }
.era__tempo-r { flex: 1 1 0; min-width: 0; width: auto; background: var(--line); }
.era__bpm { flex: none; min-width: 7ch; text-align: right; white-space: nowrap; color: var(--text); letter-spacing: .08em; }
.bgmenu__tempo .era__chip { flex: none; white-space: nowrap; }

/* ---------- motifs: the structural moves of the generated eras ----------
   figures/eras.py gives each generated era one motif; eras.js puts it on <html> as
   data-motif. Every one is a tech take: labels, prompt and HUD stay terminal. */

/* corner brackets are the terminal's; motifs that box things differently drop them */
html[data-motif] .card::before, html[data-motif] .card::after { opacity: .35; }
html[data-motif="plain"] .card::before, html[data-motif="plain"] .card::after,
html[data-motif="raw"] .card::before, html[data-motif="raw"] .card::after,
html[data-motif="soft"] .card::before, html[data-motif="soft"] .card::after,
html[data-motif="doodle"] .card::before, html[data-motif="doodle"] .card::after,
html[data-motif="tape"] .card::after, html[data-motif="editorial"] .card::before,
html[data-motif="editorial"] .card::after, html[data-motif="gloss"] .card::before,
html[data-motif="gloss"] .card::after, html[data-motif="bevel"] .card::before,
html[data-motif="bevel"] .card::after { display: none; }

/* plain: modernism, minimalism, flat; no gradient, nothing extra */
html[data-motif="plain"] .card { background: var(--panel); }
html[data-motif="plain"] .card:hover, html[data-motif="plain"] .card:focus-within { transform: none; }

/* raw: brutalism; concrete boxes, thick rules, no shadows */
html[data-motif="raw"] .card { background: var(--void); border: 2px solid var(--text); }
html[data-motif="raw"] h1.glitch { text-transform: lowercase; letter-spacing: -.03em; }

/* slant: constructivism, post-modernism, deconstructivism; knocked off true */
html[data-motif="slant"] h1.glitch { transform: rotate(-3deg); transform-origin: left; }
html[data-motif="slant"] .sec { transform: rotate(-1.2deg); }
html[data-motif="slant"] .card { border-left: 8px solid var(--cyan); }
html[data-motif="slant"] .card:nth-child(3n+2) { transform: rotate(.6deg); }
html[data-motif="slant"] .sec__num { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); padding-right: 14px; }

/* ornate: art nouveau, steampunk, gothic; double rules and corner fleurons */
html[data-motif="ornate"] .card { outline: 1px solid var(--line); outline-offset: -6px; }
html[data-motif="ornate"] .card::before, html[data-motif="ornate"] .card::after {
  content: "\2766"; width: auto; height: auto; border: 0; opacity: .8; color: var(--cyan); font-size: 15px; line-height: 1;
}
html[data-motif="ornate"] .card::before { top: 8px; left: 10px; }
html[data-motif="ornate"] .card::after { bottom: 8px; right: 10px; transform: rotate(180deg); }
html[data-motif="ornate"] .sec__num { border-radius: 50%; }

/* double: luxury; thin double rules, lots of air */
html[data-motif="double"] .card { outline: 1px solid var(--line); outline-offset: -5px; padding: 24px; }
html[data-motif="double"] h1.glitch { font-weight: 400; letter-spacing: .12em; }

/* halftone: pop art; dot screens and a printed offset shadow */
html[data-motif="halftone"] .card {
  background: radial-gradient(color-mix(in srgb, var(--amber) 22%, transparent) 1.4px, transparent 1.6px) 0 0 / 9px 9px, var(--panel);
  border: 3px solid var(--text); box-shadow: 6px 6px 0 var(--alert);
}
html[data-motif="halftone"] h1.glitch { color: var(--alert); -webkit-text-stroke: 2px var(--text); text-shadow: 6px 6px 0 var(--cyan); letter-spacing: .02em; }

/* outline: psychedelic, new wave, experimental, future funk; hollow type */
html[data-motif="outline"] h1.glitch { color: transparent; -webkit-text-stroke: 2px var(--cyan); }
html[data-motif="outline"] .card { border-color: var(--cyan); }

/* stripes: 70s; a rainbow band on every card */
html[data-motif="stripes"] .card {
  border: 0; padding-top: 34px;
  background: linear-gradient(180deg, var(--cyan) 0 6px, var(--amber) 6px 12px, var(--alert) 12px 18px, transparent 18px), var(--panel);
}
html[data-motif="stripes"] .card::before, html[data-motif="stripes"] .card::after { display: none; }

/* tape: punk; photocopied cards taped up crooked, ransom headings */
html[data-motif="tape"] .card { background: var(--panel); border: 1px solid var(--text); transform: rotate(-.7deg); }
html[data-motif="tape"] .card:nth-child(even) { transform: rotate(.8deg); }
html[data-motif="tape"] .card::before {
  width: 70px; height: 20px; border: 0; top: -6px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--alert) 55%, transparent); opacity: 1;
}
html[data-motif="tape"] h1.glitch { background: var(--text); color: var(--void); padding: 0 .12em; display: inline-block; transform: rotate(-1.5deg); }
html[data-motif="tape"] .sec__name { background: var(--alert); color: #000; padding: 0 6px; }

/* memphis: memphis, maximalism; confetti and zigzags, offset shadows */
html[data-motif="memphis"] .card {
  border: 2px solid var(--text); box-shadow: 7px 7px 0 var(--amber);
  background:
    linear-gradient(135deg, transparent 75%, color-mix(in srgb, var(--cyan) 30%, transparent) 75%) 0 0 / 14px 14px,
    var(--panel);
}
html[data-motif="memphis"] .sec__rule { height: 6px; background: repeating-linear-gradient(135deg, var(--alert) 0 6px, transparent 6px 12px); }
html[data-motif="memphis"] h1.glitch { text-shadow: 5px 5px 0 var(--cyan), 10px 10px 0 var(--amber); }

/* chrome: italo disco, y2k, chromecore, acid; liquid metal type */
html[data-motif="chrome"] h1.glitch {
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--amber), white 40%) 44%,
    color-mix(in oklab, var(--amber), black 35%) 52%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--cyan) 40%, transparent));
}
html[data-motif="chrome"] .card { border-image: linear-gradient(160deg, var(--amber), var(--cyan), var(--amber)) 1; }

/* editorial: 80s editorial; magazine columns and a big italic serif */
html[data-motif="editorial"] h1.glitch { font-style: italic; font-weight: 900; text-transform: none; letter-spacing: -.02em; }
html[data-motif="editorial"] .card { background: var(--veil); border: 0; border-left: 1px solid var(--line); border-radius: 0; }
html[data-motif="editorial"] .card__head h3 { font-size: 1.35rem; font-style: italic; }

/* noise: grunge; photocopy grit over everything */
html[data-motif="noise"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 48; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-motif="noise"] .card { transform: rotate(-.4deg); }

/* gloss: bubblegum; the Web 2.0 pills */
html[data-motif="gloss"] .link, html[data-motif="gloss"] .sec__num, html[data-motif="gloss"] .chip {
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 70%, #000);
  background: linear-gradient(180deg, color-mix(in oklab, var(--cyan), white 45%) 0%,
    color-mix(in oklab, var(--cyan), white 12%) 49%, var(--cyan) 51%, color-mix(in oklab, var(--cyan), white 22%) 100%);
  color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

/* neon: cyberpop; heavy glow */
html[data-motif="neon"] h1.glitch { text-shadow: 0 0 18px var(--cyan), 0 0 42px color-mix(in srgb, var(--cyan) 50%, transparent); }
html[data-motif="neon"] .card { box-shadow: 0 0 0 1px var(--cyan), 0 0 24px -6px var(--cyan); border-color: transparent; }

/* glitchy: glitch; the tick every few seconds, split channels always */
html[data-motif="glitchy"] h1.glitch::before { animation-duration: 3.2s; }
html[data-motif="glitchy"] h1.glitch::after { animation-duration: 2.7s; }
html[data-motif="glitchy"] h1.glitch { text-shadow: -3px 0 color-mix(in srgb, var(--amber) 70%, transparent), 3px 0 color-mix(in srgb, var(--cyan) 70%, transparent); }

/* bevel: vaporwave; Windows 95 dialogs */
html[data-motif="bevel"] .card {
  background: var(--panel); border: 2px outset color-mix(in oklab, var(--panel), white 40%); border-radius: 0;
  padding-top: 34px; box-shadow: 3px 3px 0 rgba(0,0,0,.45);
}
html[data-motif="bevel"] .card .scan { display: none; }
html[data-motif="bevel"] .card__head::before {
  content: "\25A0  C:\\WINDOWS"; position: absolute; top: 0; left: 0; right: 0; height: 22px; padding: 3px 8px;
  font: 11px var(--mono); color: #fff; background: linear-gradient(90deg, var(--cyan), var(--amber));
}

/* glass: gen x soft club, glassmorphism; frosted panels */
html[data-motif="glass"] .card {
  background: color-mix(in srgb, var(--panel) 35%, transparent);
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
html[data-motif="glass"] .topbar { background: color-mix(in srgb, var(--panel) 40%, transparent); }

/* soft: neumorphism; extruded from the page */
html[data-motif="soft"] .card {
  background: var(--void); border: 0;
  box-shadow: 9px 9px 18px color-mix(in oklab, var(--void), black 22%), -9px -9px 18px color-mix(in oklab, var(--void), white 70%);
}
html[data-motif="soft"] .card:hover, html[data-motif="soft"] .card:focus-within {
  transform: none;
  box-shadow: inset 6px 6px 12px color-mix(in oklab, var(--void), black 18%), inset -6px -6px 12px color-mix(in oklab, var(--void), white 70%);
}

/* skeuo: skeuomorphism; stitched linen */
html[data-motif="skeuo"] .card {
  background: repeating-linear-gradient(45deg, transparent 0 2px, rgba(0,0,0,.025) 2px 4px),
    linear-gradient(180deg, color-mix(in oklab, var(--panel), white 30%), var(--panel));
  outline: 2px dashed color-mix(in srgb, var(--amber) 55%, transparent); outline-offset: -8px;
  box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 6px 14px rgba(0,0,0,.18);
}

/* doodle: kidcore, naive, type doodles; hand-drawn boxes */
html[data-motif="doodle"] .card {
  border: 2px solid var(--text); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transform: rotate(-.5deg); box-shadow: 4px 5px 0 var(--amber);
}
html[data-motif="doodle"] .card:nth-child(even) { transform: rotate(.6deg); box-shadow: -4px 5px 0 var(--alert); }
html[data-motif="doodle"] h1.glitch { text-transform: none; transform: rotate(-2deg); }

/* spec: tech spec, cyberminimalism; hairlines and part numbers */
html[data-motif="spec"] .grid { counter-reset: part; }
html[data-motif="spec"] .card { counter-increment: part; border-style: dashed; background: var(--veil); }
html[data-motif="spec"] .card::after {
  content: "P/N " counter(part, decimal-leading-zero); width: auto; height: auto; border: 0; opacity: .7;
  font: 9px var(--mono); letter-spacing: .14em; color: var(--cyan); bottom: 6px; right: 10px;
}
html[data-motif="spec"] h1.glitch { font-weight: 500; letter-spacing: -.02em; text-transform: none; }

/* surveil: surveillance; a camera on every card */
html[data-motif="surveil"] .card::before {
  content: "\25CF REC"; width: auto; height: auto; border: 0; opacity: 1; top: 8px; left: auto; right: 10px;
  font: 10px var(--mono); color: var(--alert); animation: blink 1.4s steps(1) infinite;
}
html[data-motif="surveil"] .card::after {
  content: "CAM 0" counter(cam); width: auto; height: auto; border: 0; opacity: .7;
  font: 10px var(--mono); color: var(--cyan); bottom: 6px; right: 10px;
}
html[data-motif="surveil"] .grid { counter-reset: cam; }
html[data-motif="surveil"] .card { counter-increment: cam; }

/* blueprint: dimension lines and grid paper */
html[data-motif="blueprint"] body {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cyan) 14%, transparent) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--cyan) 14%, transparent) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cyan) 28%, transparent) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--cyan) 28%, transparent) 0 1px, transparent 1px 80px);
}
html[data-motif="blueprint"] .card { background: var(--veil); border: 1px dashed var(--line); }
html[data-motif="blueprint"] .card__head h3::after {
  content: "  \2190 \2014 \2192"; font: 10px var(--mono); color: var(--amber); letter-spacing: .1em;
}

/* the panel: fifty eras on one slider */
.era__tick--minor {
  width: 1px; height: 8px; padding: 0; background: var(--line); transform: translateX(-50%);
}
.era__tick--minor[aria-current="true"] { background: var(--cyan); height: 12px; width: 3px; }
.era__step {
  font: inherit; font-size: 12px; color: var(--dim); background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2px 8px; cursor: pointer; align-self: center;
}
.era__step:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- the era panel's AUTO: the era's own colours and background ---------- */

.era__auto {
  font: inherit;
  letter-spacing: .1em;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 8px;
  cursor: pointer;
}
.era__auto:hover, .era__auto:focus-visible { border-color: var(--amber); color: var(--text); }
.era__all { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--cyan); text-decoration: none; }
.era__all:hover, .era__all:focus-visible { color: var(--bright); }
.era__auto[aria-pressed="true"] { color: var(--on-accent); background: var(--amber); border-color: var(--amber); }

/* ---------- /bg: backgrounds, and /eras ---------- */


.bgpage__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 18px 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
}
.bgpage__jump a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--line); }
.bgpage__jump a:hover { border-color: var(--cyan); }
.bgpage section { scroll-margin-top: 48px; }
.bgpage .bgscene, .bgpage .erastop { scroll-margin-top: 48px; }
.bgpage__lock {
  display: inline-block; width: 9px; height: 8px; margin: 0 2px; vertical-align: -1px;
  border: 1.4px solid var(--amber); border-radius: 1px; position: relative;
}
.bgpage__lock::before {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 100%; height: 5px;
  border: 1.4px solid var(--amber); border-bottom: 0; border-radius: 4px 4px 0 0;
}

.bgbtn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: var(--bw) solid var(--line-hi);
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
}
.bgbtn:hover, .bgbtn:focus-visible { border-color: var(--cyan); color: var(--bright); }
.bgbtn[aria-pressed="true"] { color: var(--on-accent); background: var(--amber); border-color: var(--amber); }
.bgbtn:disabled { opacity: .45; cursor: default; }
.bgbtn--quiet { color: var(--dim); border-color: var(--line); }

.bgchoice {
  margin: 22px 0 8px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
}
.bgchoice h2 { margin-top: 0; }
.bgchoice__now { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; }
.bgchoice__now b { font-family: var(--disp); color: var(--cyan); font-size: 16px; letter-spacing: .1em; }
.bgchoice__k, .bgscene__k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--dim); margin-right: 6px; }
.bgchoice__mode { color: var(--amber); font-size: 11px; letter-spacing: .12em; }
.bgchoice__btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.bgchoice__btns[hidden] { display: none; }
.bgchoice__opts { display: grid; gap: 6px; margin: 12px 0; }
.bgchoice__opt { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.bgchoice__opt input { accent-color: var(--amber); }
.bgchoice__fine { font-size: 12px; color: var(--dim); }

.bgpage__group { margin-top: 34px; font-family: var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--bright); }
.bgpage__note { color: var(--dim); margin-top: 4px; }

.bgrules {
  margin: 14px 0 18px;
  padding: 14px 18px;
  border: var(--bw) dashed var(--line-hi);
  border-radius: var(--radius);
  scroll-margin-top: 48px;
}
.bgrules__h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--amber); margin: 0 0 6px; }
.bgrules__steps { margin: 0 0 14px; padding-left: 20px; }
.entry__body .bgrules__steps li { margin: 6px 0; padding-left: 2px; }
.entry__body .bgrules__steps li::before { content: none; }

.bglegend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 8px 0; }
.entry__body .bglegend li { margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text); }
.entry__body .bglegend li::before { content: none; }
.bglegend__sw { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line-hi); flex: none; }
.bglegend__sw[data-ramp] { width: 46px; }
.bglegend__shape { width: 18px; height: 18px; flex: none; }

.bgscenes { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.entry__body .bgscene { margin: 0; padding: 14px 16px; }
.entry__body .bgscene::before { content: none; }
.bgscene {
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s, box-shadow .3s;
}
.bgscene.is-on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 24px -8px var(--cyan); }
.bgscene p { margin: 6px 0; }
.bgscene__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.bgscene__name { margin: 0; font-family: var(--disp); font-size: 15px; letter-spacing: .1em; color: var(--cyan); }
.bgscene__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bgscene__tag, .bgscene__on { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--dim);
  border: 1px solid var(--line); padding: 0 5px; }
.bgscene__on { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); }
.bgscene__on[hidden] { display: none; }
.bgscene__shapes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.bgscene__shapes span { display: inline-flex; align-items: center; gap: 5px; }
.bgscene__shapes i { width: 9px; height: 9px; display: inline-block; }
.bgscene__rules { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.entry__body .bgscene__rules li { margin: 3px 0; }
.bgscene__touch, .bgscene__eras { font-size: 12.5px; color: var(--dim); }
.bgscene__eras a { color: var(--text); }
.bgscene__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.bgscene__acts[hidden] { display: none; }
.bgscene__in { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--dim); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.bgscene__in input { accent-color: var(--cyan); }

/* the eras: a big era panel stuck under the top bar, the eras scrolling past beneath it */
.bgeras { margin-top: 40px; }
.bgeras__panel { position: sticky; top: 30px; z-index: 20; margin: 14px 0 0; }
.era--inline {
  position: static;
  width: auto;
  transform: none;
  padding: 18px 20px 14px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .8);
}
.era--inline .era__year { font-size: clamp(34px, 7vw, 64px); }
.era--inline .era__name { font-size: clamp(15px, 2.4vw, 22px); }
.era--inline .era__why { font-size: 13px; min-height: 2.6em; }
.era--inline .era__range { height: 22px; }
.era--inline .era__colour { font-size: 11px; }
.era--inline .era__hue { height: 14px; }

.erastops { list-style: none; padding: 0; margin: 0; }
.entry__body .erastop { margin: 0; padding: 0; }
.entry__body .erastop::before { content: none; }
.erastop {
  --d: 0;
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.erastop__year {
  position: absolute;
  right: -2vw;
  top: 50%;
  font-family: var(--disp);
  font-size: clamp(110px, 24vw, 300px);
  line-height: 1;
  color: var(--cyan);
  opacity: calc(.13 - min(.1, abs(var(--d)) * .08));
  transform: translateY(calc(-50% + var(--d) * 45%));
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.erastop__body {
  position: relative;
  max-width: 560px;
  padding: 18px 0;
  opacity: calc(1 - min(.7, abs(var(--d)) * .9));
  transform: translateY(calc(var(--d) * -14px));
}
.erastop__when { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--amber); }
.erastop__name { margin: 2px 0 8px; font-family: var(--disp); font-size: clamp(24px, 4.4vw, 40px); letter-spacing: .04em; color: var(--bright); }
.erastop__why { margin: 0 0 10px; font-size: 15px; }
.erastop__bg { margin: 0; font-size: 13px; color: var(--dim); }
.erastop__bg a { color: var(--cyan); }
.erastop.is-near .erastop__name { color: var(--cyan); }
@media (max-width: 640px) {
  .erastop { min-height: 56vh; align-items: flex-end; }
  .era--inline { padding: 12px 12px 10px; }
  .era--inline .era__why { display: none; }
  .era--inline .era__tick b { display: none; }
  .era--inline .era__tick:first-child b, .era--inline .era__tick:last-child b { display: inline; }
  .erastop__body { padding-bottom: 8vh; }
}
@media (prefers-reduced-motion: reduce) {
  .erastop__year, .erastop__body { transform: none; }
  .erastop__year { transform: translateY(-50%); }
}

/* the randomize button: a spin, and the three things it shuffles on hover */
.topbar__rnd { position: relative; display: inline-flex; margin-left: -6px; }
.topbar__rnd[hidden] { display: none; }
.topbar__rndbtn { margin-left: 0; font-size: 13px; line-height: 1; }
.topbar__rndbtn.is-spin { animation: rndspin .5s ease-out; }
@keyframes rndspin { to { transform: rotate(360deg); } }
.topbar__rndmenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--line-hi); white-space: nowrap;
  font-size: 11px; letter-spacing: .1em;
}
.topbar__rnd:hover .topbar__rndmenu, .topbar__rnd:focus-within .topbar__rndmenu { display: block; }
.topbar__rndmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.topbar__rndmenu label { display: flex; gap: 6px; align-items: center; padding: 3px 0; color: var(--text); cursor: pointer; }