/* ==========================================================================
   Nobody Ever Got Fired: IBM, 1911 to 2026
   One stylesheet. Order: fonts, tokens, base, chrome (rail, controls,
   contents), hero, story layout, prose, chapter openers, exhibits (shared),
   exhibits (each), ledger/end, footer, utilities, motion, print.
   ========================================================================== */

/* ---------- Fonts (self-hosted, Latin subsets) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var-normal.woff2") format("woff2");
  font-weight: 300 650;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var-italic.woff2") format("woff2");
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courierprime-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* Every neutral is sampled from the film's own frames: the shadow under
     the desks, the olive carpet, the putty of the machines, the fluorescent
     ceiling. The warm brown under the ground fades out as the story goes on
     (main.js), leaving the colder shadow. */
  --ground: #0e100f;
  --ground-warm: #17130d;
  --panel: rgb(226 223 208 / 0.035);
  --panel-2: rgb(226 223 208 / 0.065);
  --ink: #e2dfd0;
  --ink-2: #a3a491;
  --ink-3: #8c8a78;
  --ink-4: #4a4a3f;
  --line: rgb(226 223 208 / 0.13);
  --line-2: rgb(226 223 208 / 0.26);
  --putty: #c9c3ac;
  --card: #b7a07f;
  --desk: #5d4935;

  /* IBM's colour. main.js mixes it from a printed blue toward the office's
     olive grey as the decline goes on; by 2026 it is part of the furniture. */
  --ibm-a: #7b98d8;
  --ibm-z: #8e9ab0;
  --ibm: var(--ibm-a);
  --drain: 0;

  --loss: #d9654c;     /* ledger red: losses and controversies only */
  --gold: #cfb06b;     /* quantum hardware */
  --phos: #93c98f;     /* green-screen phosphor, inside screens only */
  --rival: #a3a491;    /* every other company */

  --f-text: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-ui: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-doc: "Courier Prime", "Courier New", Courier, monospace;

  --rail: 0px;
  --gut: clamp(16px, 4.2vw, 44px);
  --measure: 34rem;
  --max: 1240px;
  --bar: 46px;
}

@media (min-width: 1000px) {
  :root { --rail: 84px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + 12px);
}
body {
  margin: 0;
  background: transparent;   /* the html ground and the warmth layer show through */
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: clip;
}
@media (min-width: 700px) { body { font-size: 1.1875rem; } }

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--ibm); color: var(--ground); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html { scrollbar-color: var(--ink-4) var(--ground); accent-color: var(--ibm); caret-color: var(--ibm); }

/* The brown of the film's desks sits under everything at first and fades
   as the company does (opacity set in main.js). */
.warmth {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ground-warm);
}
h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl { margin: 0; }
abbr { text-decoration: none; }
.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--ground);
  font: 600 0.9rem/1 var(--f-ui); transform: translateY(-200%);
}
.skip:focus { transform: none; }

.num { font-family: var(--f-ui); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Chrome: the year rail (wide screens) ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--rail);
  display: none;
  border-right: 1px solid var(--line);
  background: var(--bg-now, var(--ground));
}
@media (min-width: 1000px) { .rail { display: block; } }
.rail__ruler {
  position: absolute; left: 0; right: 0; top: 76px; bottom: 76px;
  container-type: size;
}
.rail__tick {
  position: absolute; right: 0; width: 100%; height: 22px; margin-top: -11px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.rail__tick::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 12px; height: 1px;
  background: var(--ink-4);
}
.rail__tick span {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font: 500 0.6875rem/1 var(--f-ui); font-stretch: 85%;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
  transition: color 0.2s;
}
.rail__tick:hover span { color: var(--ink); }
.rail__tick.is-near span { opacity: 0; }
.rail__tick:focus-visible { outline-offset: -2px; }
.rail__mark {
  position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 2;
  pointer-events: none;
  will-change: transform;
}
.rail__mark::before {
  content: ""; position: absolute; right: 0; top: -1px; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ibm) 40%);
}
.rail__year {
  position: absolute; right: 16px; top: -1.45em;
  padding: 2px 4px;
  background: var(--bg-now, var(--ground));
  font: 700 0.875rem/1 var(--f-ui); font-stretch: 80%;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.rail__sign {
  position: absolute; left: 0; right: 0; top: 22px;
  text-align: center;
  font: 800 0.75rem/1.05 var(--f-ui); font-stretch: 70%;
  color: var(--ink-3);
  text-decoration: none;
}

/* ---------- Chrome: controls and the top bar ---------- */
.ctl {
  position: fixed; top: 12px; right: max(12px, env(safe-area-inset-right)); z-index: 45;
  display: flex; gap: 6px;
}
.ctl__b {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 0;
  background: var(--bg-now, var(--ground));
  color: var(--ink-2);
  font: 500 0.8125rem/1 var(--f-ui); font-stretch: 88%;
  transition: color 0.2s, border-color 0.2s;
}
.ctl__b:hover { color: var(--ink); border-color: var(--ink-3); }
.ctl__b.is-on { color: var(--ink); }

/* The reel turns while the score plays. */
.reel { width: 16px; height: 16px; flex: none; }
.reel circle { fill: none; stroke: currentColor; stroke-width: 1.4; }
.reel .reel__hub { fill: currentColor; stroke: none; }
.reel g { transform-origin: 8px 8px; }
.is-on .reel g { animation: reel 2.4s linear infinite; }
@keyframes reel { to { transform: rotate(360deg); } }

.bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 44;
  height: var(--bar);
  display: flex; align-items: center;
  padding-left: max(var(--gut), env(safe-area-inset-left));
  background: var(--bg-now, var(--ground));
  border-bottom: 1px solid var(--line);
  transform: translateY(-101%);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.bar.is-on { transform: none; }
.bar__year {
  font: 700 1rem/1 var(--f-ui); font-stretch: 80%;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ibm);
}
.bar__title {
  display: none;
  margin-left: 12px;
  font: 500 0.8125rem/1 var(--f-ui); font-stretch: 88%;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 46vw;
}
@media (min-width: 600px) { .bar__title { display: block; max-width: calc(100vw - 330px); } }
@media (min-width: 1000px) { .bar { display: none; } }

/* ---------- Contents ---------- */
.contents {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--ground); color: var(--ink);
}
.contents::backdrop { background: rgb(0 0 0 / 0.6); }
.has-modal { overflow: hidden; }
.contents__in {
  width: min(100% - 2 * var(--gut), 900px);
  margin: 0 auto; padding: 72px 0 48px;
}
.contents__h {
  font: 300 clamp(2rem, 6vw, 3.4rem)/1 var(--f-text);
  margin-bottom: 28px;
}
.contents__list { list-style: none; padding: 0; margin: 0; columns: 2 300px; column-gap: 40px; }
.contents__list li { break-inside: avoid; border-top: 1px solid var(--line); }
.contents__list a {
  display: grid; grid-template-columns: 4.2em 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0; text-decoration: none; color: var(--ink-2);
}
.contents__list a:hover { color: var(--ink); }
.contents__y { font-weight: 700; font-stretch: 80%; color: var(--ibm); font-size: 0.95rem; }
.contents__t { font-size: 1.0625rem; line-height: 1.3; }
.contents__opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.contents__close { position: absolute; top: 12px; right: max(12px, env(safe-area-inset-right)); }

/* ---------- Keys: buttons cut like old keyboard keycaps ---------- */
.key {
  --k-top: #2a2d29;
  --k-skirt: #0b0c0b;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid #3b3f39; border-radius: 4px;
  background: linear-gradient(#30332f, var(--k-top) 40%);
  box-shadow: 0 3px 0 var(--k-skirt), inset 0 1px 0 rgb(255 255 255 / 0.05);
  color: var(--ink);
  font: 600 0.875rem/1.1 var(--f-ui); font-stretch: 90%;
  transform: translateY(0);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.key:hover { color: #fff; }
.key:active, .key[aria-pressed="true"] {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--k-skirt), inset 0 1px 0 rgb(255 255 255 / 0.03);
}
.key[aria-pressed] { padding-left: 30px; }
.key[aria-pressed]::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: #1b1d1a; box-shadow: inset 0 0 0 1px #000;
}
.key[aria-pressed="true"] { color: #fff; }
.key[aria-pressed="true"]::before { background: var(--gold); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5); }
.key--small { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
.key:disabled { opacity: 0.4; cursor: default; }
.keys { display: flex; flex-wrap: wrap; gap: 8px 8px; }

/* ---------- Scrubber: a ruler you can drag ---------- */
.scrub { position: relative; display: block; flex: 1 1 220px; min-width: 200px; padding-bottom: 18px; }
.scrub__in {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0; background: transparent;
  touch-action: pan-y;
}
.scrub__in::-webkit-slider-runnable-track {
  height: 44px;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--ink-4) 0 1px, transparent 1px 10px) 0 calc(50% + 6px) / 100% 7px no-repeat;
}
.scrub__in::-moz-range-track {
  height: 44px;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--ink-4) 0 1px, transparent 1px 10px) 0 calc(50% + 6px) / 100% 7px no-repeat;
}
.scrub__in::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 30px; margin-top: 7px;
  background: var(--ink); border: 0; border-radius: 2px;
  box-shadow: 0 0 0 4px var(--ground);
}
.scrub__in::-moz-range-thumb {
  width: 12px; height: 30px; background: var(--ink); border: 0; border-radius: 2px;
  box-shadow: 0 0 0 4px var(--ground);
}
.scrub__in:focus-visible { outline: none; }
.scrub__in:focus-visible::-webkit-slider-thumb { background: var(--ibm); }
.scrub__in:focus-visible::-moz-range-thumb { background: var(--ibm); }
.scrub__ticks { position: absolute; left: 6px; right: 6px; bottom: 0; height: 14px; pointer-events: none; }
.scrub__ticks span {
  position: absolute; transform: translateX(-50%);
  font: 500 0.6875rem/1 var(--f-ui); font-stretch: 85%; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Hero: the film beside the title (wide), behind it (narrow) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  isolation: isolate;
}
.hero__film {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  background: #000;
}
.hero__film video, .hero__film img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: saturate(0.9) contrast(1.03) brightness(0.92);
}
.hero__film::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(14 16 15 / 0.25) 0%, rgb(14 16 15 / 0.05) 18%, rgb(14 16 15 / 0.62) 36%, rgb(14 16 15 / 0.88) 52%, var(--ground) 82%);
}
.hero__text {
  padding: 0 var(--gut) clamp(28px, 6svh, 64px);
  max-width: 44rem;
}
.hero__h {
  font-family: var(--f-text);
  font-weight: 330;
  font-size: clamp(2.6rem, 11.5vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.hero__h em { font-style: italic; font-weight: 300; }
.hero__dek {
  margin-top: clamp(16px, 2.6svh, 26px);
  max-width: 33rem;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero__go {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: clamp(18px, 3svh, 30px);
}
.hero__hint { color: var(--ink-2); font: 500 0.875rem/1.3 var(--f-ui); font-stretch: 90%; }

@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-left: var(--rail);
  }
  .hero__film {
    position: relative; inset: auto; z-index: 0;
    grid-column: 2;
    height: 100svh; aspect-ratio: 9 / 16;
    max-width: 44vw;
  }
  .hero__film::after { background: linear-gradient(90deg, var(--ground) 0%, rgb(14 16 15 / 0) 18%); }
  .hero__text { grid-column: 1; grid-row: 1; padding: 0 clamp(28px, 4vw, 64px) 0 clamp(40px, 5vw, 88px); max-width: 52rem; }
  .hero__h { font-size: clamp(3.4rem, 6.4vw, 7rem); }
}

/* ---------- Story layout ---------- */
.story { position: relative; padding-left: var(--rail); }
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }

/* Text sits left of centre; notes and small exhibits use the right. */
.col { max-width: var(--measure); }
@media (min-width: 1000px) {
  .col, .ex { margin-left: clamp(0px, 7vw, 120px); }
  .ex { max-width: 860px; }
  .ex--wide { max-width: 1120px; }
}

.prose > * + * { margin-top: 1em; }
.prose p { text-wrap: pretty; hanging-punctuation: first; }
.prose strong { font-weight: 620; }
.prose em { font-style: italic; }
.lede { font-size: 1.2em; line-height: 1.5; color: var(--ink); }

/* ---------- Chapter openers ---------- */
/* Each chapter sets --w (weight) and --s (width) on its year: wide and heavy
   while IBM is confident, narrow and light by the end. */
.chap { position: relative; padding-top: clamp(84px, 16svh, 180px); }
.chap--tight { padding-top: clamp(56px, 10svh, 110px); }
.chap__year {
  display: block; width: max-content;
  font-family: var(--f-ui);
  font-weight: var(--w, 800);
  font-stretch: var(--s, 110%);
  font-size: clamp(5rem, 22vw, 13.5rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--ibm);
  font-variant-numeric: lining-nums tabular-nums;
  margin-left: -0.04em;
}
.chap__h {
  margin-top: clamp(14px, 2.4svh, 26px);
  max-width: 22ch;
  font-family: var(--f-text);
  font-weight: 340;
  font-size: clamp(1.95rem, 5.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.008em;
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
}
.chap__dek {
  margin-top: 14px;
  max-width: 34rem;
  color: var(--ink-2);
  font-size: 1.0625em;
  line-height: 1.5;
}
.chap__body { margin-top: clamp(28px, 5svh, 48px); }

/* Part titles: a quiet card between acts. */
.part {
  min-height: 64svh;
  display: grid; align-content: center;
  padding-block: 12svh;
}
.part__n {
  font: 500 1rem/1.2 var(--f-ui); font-stretch: 90%;
  color: var(--ink-2);
}
.part__h {
  margin-top: 10px;
  font: 300 clamp(2.6rem, 9vw, 6rem)/0.98 var(--f-text);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.part__d { margin-top: 18px; max-width: 32rem; color: var(--ink-2); font-size: 1.125rem; }

/* Pull quotes: spoken words get the italic, the speaker gets plain type. */
.quote { margin: clamp(36px, 7svh, 64px) 0; max-width: 40rem; }
.quote p {
  font: italic 340 clamp(1.5rem, 3.6vw, 2.25rem)/1.22 var(--f-text);
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}
.quote footer { margin-top: 12px; color: var(--ink-2); font: 500 0.9375rem/1.4 var(--f-ui); font-stretch: 92%; }

/* A memo or wire, typed. */
.memo {
  margin: 28px 0; padding: 16px 18px 18px;
  max-width: 36rem;
  background: var(--panel);
  font: 400 0.95rem/1.6 var(--f-doc);
  color: var(--putty);
}
.memo__h { color: var(--ink-3); margin-bottom: 8px; }
.memo b { font-weight: 400; color: var(--ink); }

/* Notes: a superscript number opens the note under the paragraph. */
.fn {
  display: inline-block; margin: 0 0 0 1px; padding: 0 3px;
  border: 0; background: none;
  font: 600 0.62em/1 var(--f-ui); color: var(--ink-3);
  vertical-align: super;
  font-variant-numeric: lining-nums;
}
.fn:hover, .fn[aria-expanded="true"] { color: var(--ibm); }
.note {
  margin-top: 8px; padding: 10px 0 2px 14px;
  border-left: 2px solid var(--ink-4);
  font: 400 0.875rem/1.5 var(--f-ui); font-stretch: 94%;
  color: var(--ink-2);
}

/* ---------- Exhibits (shared) ---------- */
/* An exhibit is a figure: a finding as its title, an invitation, the thing
   itself, then where the numbers come from. */
.ex { margin-block: clamp(40px, 8svh, 84px); }
.ex__t {
  max-width: 34rem;
  font: 620 clamp(1.125rem, 2vw, 1.3rem)/1.25 var(--f-ui);
  font-stretch: 92%;
  letter-spacing: -0.003em;
  text-wrap: balance;
}
.ex__d { margin-top: 6px; max-width: 34rem; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.ex__stage { position: relative; margin-top: clamp(16px, 2.6svh, 24px); }
.ex__src {
  margin-top: 14px; max-width: 46rem;
  font: 400 0.8125rem/1.45 var(--f-ui); font-stretch: 94%;
  color: var(--ink-3);
}
.ex__src a { color: inherit; }
/* Wide exhibits take whatever the margin leaves; a fixed width plus the
   left margin used to push them past the right edge on laptop screens. */
.ex--wide { max-width: 1120px; }
.ex.is-broken .ex__stage::after {
  content: "This piece could not load. The text around it tells the same story.";
  display: block; padding: 14px; background: var(--panel); color: var(--ink-2);
  font: 0.9rem/1.4 var(--f-ui);
}
/* Before the module arrives, the stage holds its height so nothing jumps. */
.js .ex:not(.is-live) .ex__stage { min-height: var(--h, 320px); }
.js .ex:not(.is-live) .ex__fallback { display: none; }

/* Pinned exhibits: a tall section whose stage sticks while you scroll. */
.pin { position: relative; height: var(--len, 300svh); }
.pin__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  padding-block: calc(var(--bar) + 8px) 16px;
}
@media (min-width: 1000px) { .pin__stage { padding-block: 28px; } }
.no-js .pin { height: auto; }
.no-js .pin__stage { position: static; height: auto; }

/* Readouts: the live caption every exhibit keeps next to its picture. */
.readout { font: 500 0.95rem/1.45 var(--f-ui); font-stretch: 94%; color: var(--ink-2); }

/* Tables */
.tablewrap { overflow-x: auto; margin-top: 22px; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font: 400 0.875rem/1.35 var(--f-ui); font-stretch: 94%; }
.tbl th, .tbl td { text-align: left; padding: 9px 12px 9px 0; vertical-align: top; }
.tbl thead th { color: var(--ink-3); font-weight: 500; white-space: nowrap; padding-bottom: 8px; }
.tbl tbody tr { background: linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat; }
.tbl tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tbl td { color: var(--ink-2); }
.tbl .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.tbl__sort { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.tbl__sort:hover { color: var(--ink); }
th[aria-sort="ascending"] .tbl__sort::after { content: " \2191"; }
th[aria-sort="descending"] .tbl__sort::after { content: " \2193"; }
.tbl__long { min-width: 16rem; }
.minibar { display: inline-block; width: 52px; height: 6px; margin-right: 8px; background: var(--panel-2); vertical-align: 1px; }
.minibar i { display: block; height: 100%; background: var(--ibm); }

/* ---------- Exhibit: punch card ---------- */
.punch { max-width: 820px; }
.punch__card { width: 100%; height: auto; overflow: visible; }
.punch__body { fill: var(--card); }
.punch__digits text, .punch__cols text {
  font: 400 9.6px var(--f-ui); font-stretch: 80%;
  fill: #5d4b33;
}
.punch__cols text { font-size: 5.6px; text-anchor: middle; }
.punch__warn { font: 600 9px var(--f-ui); font-stretch: 85%; fill: #6b5839; letter-spacing: 0.02em; }
.punch__print text { font: 400 12.5px var(--f-doc); fill: #2b2116; text-anchor: middle; }
.punch__hole { fill: var(--ground); }
.punch__hole.is-new { animation: punch 0.18s steps(2, end) both; transform-box: fill-box; transform-origin: center; }
@keyframes punch { from { transform: scaleY(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
.punch__form { margin-top: 18px; }
.punch__label { display: block; font: 500 0.875rem/1.3 var(--f-ui); font-stretch: 92%; color: var(--ink-2); margin-bottom: 8px; }
.punch__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.punch__in {
  flex: 1 1 240px; min-width: 0; height: 46px; padding: 0 14px;
  background: var(--ground); border: 1px solid var(--line-2); border-radius: 3px;
  font: 400 1.125rem/1 var(--f-doc); color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em;
}
.punch__in:focus { outline: none; border-color: var(--ibm); }
.punch__in::placeholder { color: var(--ink-4); }
.punch__out { margin-top: 12px; max-width: 40rem; font: 500 0.95rem/1.45 var(--f-ui); font-stretch: 94%; color: var(--ink-2); }

/* ---------- Exhibit: the revenue climb ---------- */
.curve { display: grid; gap: 14px; }
.curve__read { min-height: 7.5em; }
.curve__year { font: 800 clamp(2.6rem, 8vw, 4.4rem)/0.9 var(--f-ui); font-stretch: 112%; color: var(--ibm); }
.curve__val { margin-top: 6px; font: 600 1.05rem/1.3 var(--f-ui); font-stretch: 92%; }
.curve__note { margin-top: 6px; max-width: 34rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
.curve__svg { width: 100%; overflow: visible; }
.curve__grid line { stroke: var(--line); }
.curve__grid text { font: 400 11px var(--f-ui); font-stretch: 88%; fill: var(--ink-3); }
.curve__mark line { stroke: var(--ink-4); stroke-dasharray: 2 4; opacity: 0; transition: opacity 0.4s; }
.curve__mark text { font: 600 10.5px var(--f-ui); font-stretch: 85%; fill: var(--ink-3); opacity: 0; transition: opacity 0.4s; }
.curve__mark.is-on line, .curve__mark.is-on text { opacity: 1; }
.curve__line { fill: none; stroke: var(--ibm); stroke-width: 2.5; stroke-linejoin: round; }
.curve__area { fill: var(--ibm); opacity: 0.12; }
.curve__head { fill: var(--ground); stroke: var(--ibm); stroke-width: 2.5; }
.curve__keys { align-items: center; }
.curve__hint { flex: 1 1 18rem; color: var(--ink-3); font: 400 0.8125rem/1.4 var(--f-ui); font-stretch: 94%; }
@media (min-width: 1000px) {
  .curve { grid-template-columns: 17rem minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .curve__read { grid-row: 1 / span 2; padding-top: 8px; }
}

/* ---------- Exhibit: the people ---------- */
.ppl { max-width: 760px; }
.ppl__top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ppl__year { font: 800 clamp(2.4rem, 7vw, 4rem)/0.9 var(--f-ui); font-stretch: 105%; color: var(--ibm); }
.ppl__n { font: 600 1.1rem/1.2 var(--f-ui); font-stretch: 92%; }
.ppl__cv { width: 100%; }
.ppl__note { margin-top: 14px; min-height: 3em; max-width: 36rem; font-size: 1.02rem; line-height: 1.45; }
.ppl__key { margin-top: 10px; display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; font: 400 0.8125rem/1.3 var(--f-ui); color: var(--ink-3); }
.ppl__key > span { display: inline-flex; align-items: center; white-space: nowrap; }
.ppl__dot, .ppl__ring { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }
.ppl__dot { background: var(--ibm); }
.ppl__ring { border: 1px solid var(--ink-3); }

/* ---------- Exhibit: the skyline ---------- */
.sky__head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; min-height: 4.2rem; }
.sky__year { font: 800 clamp(2.4rem, 7vw, 4rem)/0.9 var(--f-ui); color: var(--ink); }
.sky__rank { flex: 1 1 18rem; color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
.sky__plot { margin-top: 12px; }
.sky__svg { width: 100%; overflow: visible; }
.sky__body { fill: #23251f; }
.sky__win { fill: #3a3b31; }
.sky__win--ibm { fill: var(--ibm); opacity: 0.75; }
.is-ibm .sky__body { fill: color-mix(in oklab, var(--ibm) 22%, var(--ground)); }
.sky__roof { fill: var(--ink-4); }
.is-ibm .sky__roof { fill: var(--ibm); }
.sky__val { font: 600 11.5px var(--f-ui); font-stretch: 86%; fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
.is-ibm .sky__val { fill: var(--ibm); }
.sky__name { font: 500 11.5px var(--f-ui); font-stretch: 86%; fill: var(--ink-2); text-anchor: middle; }
.is-ibm .sky__name { fill: var(--ink); font-weight: 700; }
.sky__base { stroke: var(--ink-3); }
.sky__ghost { stroke: var(--ibm); stroke-dasharray: 3 5; opacity: 0; transition: opacity 0.5s; }
.sky__ghost-t { font: 500 11px var(--f-ui); fill: var(--ibm); text-anchor: end; transition: opacity 0.5s; }
.sky__scale { font: 400 11px var(--f-ui); fill: var(--ink-3); }
.sky__ctl { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 18px; }

/* ---------- Exhibit: twenty-two quarters ---------- */
.qtr__count { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.qtr__n { font: 800 clamp(3rem, 10vw, 5.4rem)/0.85 var(--f-ui); color: var(--loss); min-width: 1.4em; }
.qtr__t { font: 500 1.05rem/1.3 var(--f-ui); font-stretch: 92%; color: var(--ink-2); max-width: 16rem; }
.qtr__plot { margin-top: 18px; }
.qtr__svg { width: 100%; overflow: visible; }
.qtr__bar { fill: var(--ink-4); opacity: 0; transform: translateY(-10px); transition: opacity 0.25s, transform 0.25s; }
.qtr__bar.is-on { opacity: 1; transform: none; }
.qtr__bar.is-streak { fill: var(--loss); }
.qtr__bar.is-up { fill: var(--ibm); }
.qtr__zero { stroke: var(--ink-3); }
.qtr__grid { stroke: var(--line); }
.qtr__axis { font: 400 10.5px var(--f-ui); font-stretch: 86%; fill: var(--ink-3); }
.qtr__read { margin-top: 12px; min-height: 1.5em; color: var(--ink-2); font-size: 1rem; }

/* ---------- Exhibit: the PC ---------- */
.pc { display: grid; gap: 20px; }
.pc__svg { width: 100%; height: auto; }
.pc__draw rect, .pc__draw path, .pc__draw line { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.pc__draw .pc__screen { fill: #11150f; }
.pc__draw .pc__text { stroke: var(--phos); opacity: 0.55; stroke-width: 2; }
.pc__keys rect { stroke: var(--ink-4); }
.pc__draw .pc__cover { fill: var(--panel); }
.pc__draw .pc__slot { fill: var(--panel-2); }
.pc__part { cursor: pointer; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
.pc__part rect, .pc__part line, .pc__part circle { fill: #23241e; stroke: var(--ink-2); stroke-width: 1.4; }
.pc__part text { font: 700 10px var(--f-ui); font-stretch: 85%; fill: var(--ink-2); }
.pc__part.is-on { transform: translateY(-14px); }
.pc__part.is-on rect, .pc__part.is-on circle { stroke: var(--ibm); fill: color-mix(in oklab, var(--ibm) 18%, var(--ground)); }
.pc__part.is-on text { fill: var(--ink); }
.pc__part--box rect { fill: transparent; stroke: transparent; }
.pc__part--box.is-on rect { fill: color-mix(in oklab, var(--ibm) 10%, transparent); stroke: var(--ibm); }
.pc__part--box.is-on { transform: none; }
.pc__tabs { margin-bottom: 14px; }
.pc__panel { min-height: 9.5em; }
.pc__who { font: 650 1.1rem/1.3 var(--f-ui); font-stretch: 92%; }
.pc__own { margin-top: 4px; font: 500 0.95rem/1.3 var(--f-ui); color: var(--ink-2); }
.pc__own b { font-weight: 600; color: var(--ink); }
.pc__txt { margin-top: 10px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.pc__val { grid-column: 1 / -1; margin-top: 6px; }
.pc__val-h { font: 500 0.875rem/1.3 var(--f-ui); color: var(--ink-3); margin-bottom: 10px; }
.pc__vrow { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 4.6rem; gap: 12px; align-items: center; padding: 5px 0; font: 500 0.875rem/1.3 var(--f-ui); font-stretch: 94%; color: var(--ink-2); }
.pc__vt { height: 12px; background: var(--panel); }
.pc__vt i { display: block; height: 100%; background: var(--rival); }
.pc__vrow.is-ibm { color: var(--ink); }
.pc__vrow.is-ibm .pc__vt i { background: var(--ibm); }
.pc__vv { text-align: right; }
@media (max-width: 600px) { .pc__vrow { grid-template-columns: minmax(0, 1fr) 4.4rem; } .pc__vt { grid-column: 1 / -1; order: 3; } }
@media (min-width: 1000px) { .pc { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; align-items: start; } }

/* ---------- Exhibit: the clearance shelf ---------- */
.sold__shelf {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 0;
}
@media (min-width: 640px) { .sold__shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sold__item { position: relative; padding-bottom: 12px; border-bottom: 6px solid var(--desk); }
.sold__b {
  width: 100%; display: grid; justify-items: center; gap: 6px;
  padding: 8px 4px 24px; border: 0; background: none; color: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
}
.sold__ic { width: 58px; height: 58px; }
.sold__ic path, .sold__ic rect, .sold__ic circle, .sold__ic line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sold__ic .ic-red { fill: var(--loss); stroke: none; }
.sold__name { font: 600 0.8125rem/1.2 var(--f-ui); font-stretch: 90%; text-align: center; }
.sold__tag {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(-4deg);
  min-width: 54px; padding: 3px 6px; border-radius: 2px;
  background: var(--putty); color: #2a261d;
  font: 700 0.75rem/1.1 var(--f-ui); font-stretch: 85%; text-align: center; white-space: nowrap;
  transition: transform 0.3s;
}
.sold__tag-b { display: none; }
.sold__b:hover { color: var(--ink); }
.is-on .sold__b { color: var(--ink); }
.is-on .sold__tag, .is-seen .sold__tag { background: var(--loss); color: #1a0d09; }
.is-on .sold__tag { transform: translateX(-50%) rotate(3deg) scale(1.06); }
.is-seen .sold__tag-f, .is-on .sold__tag-f { display: none; }
.is-seen .sold__tag-b, .is-on .sold__tag-b { display: inline; }
.sold__panel { margin-top: 26px; min-height: 8.5em; max-width: 40rem; }
.sold__h { font: 650 1.15rem/1.3 var(--f-ui); font-stretch: 92%; }
.sold__h .num { color: var(--ibm); margin-right: 6px; }
.sold__deal { margin-top: 6px; color: var(--ink); font-size: 1rem; }
.sold__after { margin-top: 6px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.sold__tally { margin-top: 10px; color: var(--ink-3); font: 500 0.875rem/1.4 var(--f-ui); }

/* ---------- Exhibit: the balance ---------- */
.bal { max-width: 720px; }
.bal__svg { width: 100%; height: auto; overflow: visible; }
.bal__post { fill: none; stroke: var(--ink-3); stroke-width: 3; }
.bal__pivot { fill: var(--ink-2); }
.bal__beam line { stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; }
.bal__str { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.bal__pan > path:not(.bal__str) { fill: var(--panel-2); stroke: var(--ink-2); stroke-width: 1.5; }
.bal__lbl { font: 600 13px var(--f-ui); font-stretch: 90%; fill: var(--ink-2); }
.bal__blk rect { fill: color-mix(in oklab, var(--ibm) 35%, var(--ground)); stroke: var(--ibm); }
.bal__blk text { font: 700 11px var(--f-ui); font-stretch: 86%; fill: var(--ink); }
.bal__blk.is-unknown rect { fill: var(--panel-2); stroke: var(--ink-3); stroke-dasharray: 3 3; }
.bal__blk.is-unknown text { fill: var(--ink-2); font-size: 9.5px; }
.bal__blk.is-sale rect { fill: color-mix(in oklab, var(--loss) 30%, var(--ground)); stroke: var(--loss); }
.bal__tray { margin-top: 16px; }
.bal__read { margin-top: 14px; min-height: 3em; max-width: 38rem; font-size: 1rem; line-height: 1.5; }

/* ---------- Exhibit: the floor plan ---------- */
.floor__svg { width: 100%; overflow: visible; }
.floor__wall { fill: none; stroke: var(--ink-2); stroke-width: 3; }
.floor__wname { font: 700 12px var(--f-ui); font-stretch: 88%; fill: var(--ink-2); }
.floor__room { cursor: pointer; outline: none; }
.floor__rbox { fill: var(--panel); stroke: var(--ink-3); stroke-width: 1.2; transition: fill 0.2s; }
.floor__room:hover .floor__rbox, .floor__room:focus-visible .floor__rbox { fill: var(--panel-2); }
.floor__room.is-on .floor__rbox { fill: color-mix(in oklab, var(--ibm) 22%, transparent); stroke: var(--ibm); }
.floor__gap { stroke: var(--ground); stroke-width: 3; }
.floor__door { fill: none; stroke: var(--ink-4); stroke-width: 1; }
.floor__rname { font: 600 12.5px var(--f-ui); font-stretch: 88%; fill: var(--ink); }
.floor__rval { font: 500 11.5px var(--f-ui); font-stretch: 88%; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.floor__panel { margin-top: 18px; min-height: 7.5em; max-width: 40rem; }
.floor__ph { font: 650 1.15rem/1.3 var(--f-ui); font-stretch: 92%; }
.floor__ph .num { color: var(--ibm); margin-left: 8px; }
.floor__pm { margin-top: 2px; color: var(--ink-3); font: 500 0.875rem/1.3 var(--f-ui); }
.floor__pt { margin-top: 8px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

/* ---------- Exhibit: the comparison board ---------- */
.led { max-width: 880px; }
.led__head, .led__row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) 6.5rem minmax(0, 1fr) 6.5rem;
  gap: 12px; align-items: center;
}
.led__head { padding-bottom: 6px; font: 700 1rem/1 var(--f-ui); font-stretch: 90%; color: var(--ink-2); }
.led__head .led__c:last-child { color: var(--ibm); }
.led__row { padding: 10px 0; background: linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat; font: 500 0.9375rem/1.3 var(--f-ui); font-stretch: 94%; }
.led__c--k { color: var(--ink-2); }
.led__v { text-align: right; font-weight: 650; }
.led__head .num { text-align: right; }
.led__c--bars { display: grid; gap: 3px; }
.led__ba, .led__bb { display: block; height: 7px; transform-origin: 0 50%; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.led__ba { background: var(--putty); opacity: 0.7; }
.led__bb { background: var(--ibm); }
.led__ctl { margin-top: 16px; }
.led__fine { margin-top: 10px; color: var(--ink-3); font: 400 0.8125rem/1.45 var(--f-ui); }
@media (max-width: 640px) {
  .led__head, .led__row { grid-template-columns: minmax(0, 1fr) 5.2rem 5.2rem; }
  .led__c--bars { grid-column: 1 / -1; order: 4; }
  .led__head .led__c--bars { display: none; }
}

/* ---------- Exhibit: the timeline strip ---------- */
.tl { position: relative; }
.tl__keys { margin-bottom: 14px; }
.tl__glyph { width: 11px; height: 11px; fill: currentColor; }
.tl__frame { position: relative; }
.tl__view {
  position: relative; display: flex; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; cursor: grab;
  background: var(--panel); border-radius: 4px;
  overscroll-behavior-x: contain;
  -webkit-user-select: none; user-select: none;
}
.tl__view::-webkit-scrollbar { display: none; }
.tl__view::before, .tl__view::after { content: ""; flex: 0 0 50%; }
.tl__view.is-drag { cursor: grabbing; }
.tl__strip { position: relative; flex: none; height: 132px; }
.tl__ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; }
.tl__dec { position: absolute; bottom: 6px; transform: translateX(-50%); font: 500 11px/1 var(--f-ui); font-stretch: 86%; color: var(--ink-3); }
.tl__dec::before { content: ""; position: absolute; left: 50%; bottom: 16px; width: 1px; height: 96px; background: var(--line); }
.tl__m {
  position: absolute; width: 22px; height: 22px; margin-left: -11px;
  display: grid; place-items: center; padding: 0; border: 0; background: none;
  color: var(--ink-2);
}
.tl__m svg { width: 11px; height: 11px; fill: currentColor; transition: transform 0.2s; }
.tl__m--dark { color: var(--loss); }
.tl__m--science { color: var(--gold); }
.tl__m--machine { color: var(--ibm); }
.tl__m.is-on svg { transform: scale(1.6); }
.tl__m.is-dim { opacity: 0.12; pointer-events: none; }
.tl__needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.tl__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.tl__year { font: 800 1.6rem/1 var(--f-ui); font-stretch: 95%; color: var(--ink); }
.tl__panel { margin-top: 14px; min-height: 9em; max-width: 40rem; }
.tl__h { display: flex; gap: 12px; align-items: baseline; }
.tl__py { font: 700 1rem/1 var(--f-ui); color: var(--ibm); }
.tl__pk { font: 500 0.8125rem/1 var(--f-ui); color: var(--ink-3); }
.tl__pt { margin-top: 6px; font: 650 1.15rem/1.3 var(--f-ui); font-stretch: 92%; }
.tl__pd { margin-top: 6px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

/* ---------- Exhibit: the Granite family ---------- */
.fam__svg { width: 100%; overflow: visible; }
.fam__grid { stroke: var(--line); }
.fam__axis { font: 400 11px var(--f-ui); font-stretch: 86%; fill: var(--ink-3); }
.fam__m { cursor: pointer; outline: none; }
.fam__tot { fill: none; stroke: var(--ink-3); stroke-width: 1.3; }
.fam__act { fill: var(--ink-4); }
.fam__m.is-new .fam__tot { stroke: var(--ibm); }
.fam__m.is-new .fam__act { fill: color-mix(in oklab, var(--ibm) 55%, var(--ground)); }
.fam__m.is-on .fam__tot { stroke: var(--ink); stroke-width: 2.2; }
.fam__m.is-on .fam__act { fill: var(--ibm); }
.fam__m:focus-visible .fam__tot { stroke: var(--ink); stroke-dasharray: 3 2; }
.fam__panel { margin-top: 12px; min-height: 6.5em; max-width: 42rem; }
.fam__ph { font: 650 1.15rem/1.3 var(--f-ui); font-stretch: 92%; }
.fam__pm { margin-top: 2px; color: var(--ink-3); font: 500 0.875rem/1.35 var(--f-ui); }
.fam__pt { margin-top: 6px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.fam__tbl tr.is-new th { color: var(--ibm); }

/* ---------- Exhibit: the cryostat ---------- */
[data-ex="cryostat"] .pin__stage { display: flex; flex-direction: column; justify-content: flex-start; }
[data-ex="cryostat"] .ex__stage { flex: 1 1 auto; min-height: 0; }
.cryo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 320px; }
.cryo__view {
  position: relative; overflow: hidden; height: 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
.cryo__svg { width: 100%; height: auto; will-change: transform; }
.cryo__plates rect { fill: var(--gold); }
.cryo__plates .cryo__hx { fill: color-mix(in oklab, var(--gold) 55%, var(--ground)); }
.cryo__rods line { stroke: color-mix(in oklab, var(--gold) 65%, var(--ground)); stroke-width: 3; }
.cryo__cables path { fill: none; stroke: var(--ink-3); stroke-width: 1.3; opacity: 0.6; }
.cryo__tag { font: 700 9.5px var(--f-ui); font-stretch: 85%; fill: #2b2412; }
.cryo__ghost { stroke: var(--ibm); stroke-dasharray: 4 6; opacity: 0.35; }
.cryo__ghost.is-on { opacity: 0.9; }
.cryo__chip rect { fill: #262318; stroke: var(--gold); stroke-width: 1.5; }
.cryo__chip line { stroke: var(--gold); stroke-width: 2; }
.cryo__chip .cryo__die { fill: #3a3424; }
.cryo__q { fill: var(--ink-4); transition: fill 0.6s; }
.cryo__chip.is-cold .cryo__q { fill: var(--gold); }
.cryo__read { position: absolute; left: 0; top: 0; z-index: 2; padding: 6px 0; max-width: 15rem; pointer-events: none; }
.cryo__t { font: 800 clamp(2.6rem, 9vw, 4.6rem)/0.9 var(--f-ui); font-stretch: 90%; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.cryo__u { margin-left: 6px; font: 600 1.2rem/1 var(--f-ui); color: var(--ink-2); }
.cryo__name { margin-top: 8px; font: 650 1rem/1.25 var(--f-ui); color: var(--gold); }
.cryo__note { margin-top: 4px; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); text-shadow: 0 0 8px var(--ground), 0 0 2px var(--ground); }
.cryo__depth { position: absolute; right: 0; top: 10%; bottom: 10%; width: 3px; background: var(--panel-2); }
.cryo__depth i { display: block; height: 100%; background: var(--gold); transform-origin: 50% 0; transform: scaleY(0); }
@media (min-width: 1000px) {
  .cryo { grid-template-columns: 19rem minmax(0, 520px); column-gap: 48px; justify-content: start; }
  .cryo__read { position: relative; grid-column: 1; grid-row: 1; align-self: center; max-width: none; }
  .cryo__view { grid-column: 2; grid-row: 1; }
  .cryo__depth { right: auto; left: calc(19rem + 24px); }
}
@media (max-width: 999px) {
  .cryo { grid-template-rows: auto minmax(0, 1fr); row-gap: 8px; }
  .cryo__read { position: relative; grid-row: 1; max-width: none; padding: 0; }
  .cryo__t { font-size: clamp(2.2rem, 11vw, 3rem); }
  .cryo__note { min-height: 2.9em; }
  .cryo__view { grid-row: 2; width: min(100%, 340px); margin-inline: auto; }
  .cryo__depth { top: auto; bottom: 0; height: calc(100% - 9.5rem); }
}

/* ---------- Exhibit: Granite against the field ---------- */
.fld__classes { margin-bottom: 14px; }
.fld__benches { display: flex; flex-wrap: wrap; gap: 6px; }
.fld__bk {
  display: grid; gap: 1px; text-align: left;
  min-height: 44px; padding: 6px 12px 7px;
  border: 1px solid var(--line-2); border-radius: 3px; background: none;
  color: var(--ink-2); font: 600 0.875rem/1.15 var(--f-ui); font-stretch: 92%;
}
.fld__bk small { font: 400 0.6875rem/1.1 var(--f-ui); color: var(--ink-3); }
.fld__bk.is-ind small { color: var(--gold); }
.fld__bk:hover { color: var(--ink); border-color: var(--ink-3); }
.fld__bk[aria-pressed="true"] { color: var(--ground); background: var(--ink); border-color: var(--ink); }
.fld__bk[aria-pressed="true"] small { color: var(--ground); }
.fld__about { margin-top: 14px; max-width: 40rem; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; min-height: 3em; }
.fld__bars { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.fld__row {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 3.4rem; gap: 12px; align-items: center;
  font: 500 0.875rem/1.25 var(--f-ui); font-stretch: 92%; color: var(--ink-2);
}
.fld__t { height: 14px; background: var(--panel); }
.fld__t i { display: block; height: 100%; background: var(--rival); opacity: 0.55; transform-origin: 0 50%; transition: transform 0.55s cubic-bezier(.2,.8,.2,1); }
.fld__row.is-ibm { color: var(--ink); font-weight: 650; }
.fld__row.is-ibm .fld__t i { background: var(--ibm); opacity: 1; }
.fld__v { text-align: right; }
.fld__miss { margin-top: 6px; color: var(--ink-3); font: 400 0.8125rem/1.4 var(--f-ui); }
@media (max-width: 600px) {
  .fld__row { grid-template-columns: minmax(0, 1fr) 3.2rem; row-gap: 4px; }
  .fld__t { grid-column: 1 / -1; order: 3; }
}
.fld__tbl tr.is-ibm th { color: var(--ibm); }
.fld__tbl td.is-best { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.fld__key { margin-top: 8px; color: var(--ink-3); font: 400 0.8125rem/1.45 var(--f-ui); max-width: 46rem; }

/* ---------- Exhibit: what IBM sold, by kind ---------- */
.mix { display: grid; gap: 18px; }
.mix__plot { touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.mix__svg { width: 100%; overflow: visible; }
.mix__a { stroke: var(--ground); stroke-width: 1.5; }
.mix__a--0 { fill: color-mix(in oklab, var(--ibm) 62%, var(--ground)); }
.mix__a--1 { fill: color-mix(in oklab, var(--putty) 40%, var(--ground)); }
.mix__a--2 { fill: color-mix(in oklab, var(--putty) 72%, var(--ground)); }
.mix__a--3 { fill: color-mix(in oklab, var(--loss) 45%, var(--ground)); }
.mix__a--2 + .mix__l, .mix__l { paint-order: stroke; stroke: rgb(14 16 15 / 0.55); stroke-width: 3px; }
.mix__l { font: 700 13px var(--f-ui); font-stretch: 90%; fill: var(--ink); pointer-events: none; }
.mix__ax { font: 400 11px var(--f-ui); font-stretch: 86%; fill: var(--ink-3); }
.mix__cur { stroke: var(--ink); stroke-width: 1.5; }
.mix__ry { font: 800 2.4rem/1 var(--f-ui); color: var(--ink); }
.mix__dl { margin-top: 10px; display: grid; gap: 4px; max-width: 22rem; }
.mix__row { display: grid; grid-template-columns: 1fr 3.4rem 4.6rem; gap: 10px; font: 500 0.9375rem/1.3 var(--f-ui); font-stretch: 94%; }
.mix__row dt { color: var(--ink-2); }
.mix__row dd { margin: 0; text-align: right; }
.mix__row .mix__bn { color: var(--ink-3); }
.mix__row::before { content: ""; display: none; }
@media (min-width: 1000px) {
  .mix { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; column-gap: 36px; }
  .mix__keys { grid-column: 1 / -1; }
}

/* ---------- Exhibit: quantum processors ---------- */
.qr__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 12px; }
.qr__b { width: 100%; display: grid; gap: 4px; padding: 0; border: 0; background: none; text-align: left; color: var(--ink-2); }
.qr__chip { width: 100%; height: auto; aspect-ratio: 1; }
.qr__pkg { fill: #1b1a14; stroke: color-mix(in oklab, var(--gold) 60%, var(--ground)); stroke-width: 1.5; }
.qr__qubits circle { fill: var(--gold); }
.qr__logical circle { fill: none; stroke: var(--gold); stroke-width: 0.35; }
.is-planned .qr__pkg { fill: none; stroke-dasharray: 4 4; }
.is-planned .qr__qubits circle { fill: none; stroke: var(--gold); stroke-width: 0.4; }
.qr__y { font: 700 0.9375rem/1 var(--f-ui); color: var(--ink); margin-top: 4px; }
.qr__n { font: 600 0.875rem/1.2 var(--f-ui); font-stretch: 92%; }
.qr__q { font: 400 0.8125rem/1.2 var(--f-ui); color: var(--ink-3); }
.qr__b:hover .qr__n, .is-on .qr__n { color: var(--ink); }
.is-on .qr__pkg { stroke: var(--gold); stroke-width: 2.5; }
.qr__none { font: 600 8.5px var(--f-ui); font-stretch: 88%; fill: var(--ink-3); }
.qr__panel { margin-top: 20px; min-height: 7.5em; max-width: 40rem; }
.qr__ph { font: 650 1.15rem/1.3 var(--f-ui); font-stretch: 92%; }
.qr__ph .num { color: var(--gold); margin-right: 6px; }
.qr__ps { margin-top: 2px; color: var(--ink-3); font: 500 0.875rem/1.3 var(--f-ui); }
.qr__pt { margin-top: 8px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

/* ---------- Exhibit: futures ---------- */
.fut { display: grid; gap: 22px; }
.fut__svg { width: min(100%, 300px); height: auto; overflow: visible; }
.fut__tick { stroke: var(--ink-4); stroke-width: 1.5; }
.fut__tick.is-long { stroke: var(--ink-2); stroke-width: 2.5; }
.fut__knob { fill: #23251f; stroke: #3b3f39; stroke-width: 2; }
.fut__knob-in { fill: #2c2f29; }
.fut__ptr { transform-origin: 110px 112px; transition: transform 0.5s cubic-bezier(.3,1.4,.5,1); }
.fut__ptr line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.fut__opts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fut__panel { max-width: 40rem; min-height: 15em; }
.fut__h { font: 650 1.2rem/1.3 var(--f-ui); font-stretch: 92%; }
.fut__b { margin-top: 8px; color: var(--ink); font-size: 1.02rem; line-height: 1.55; }
.fut__sh { margin-top: 16px; color: var(--ink-3); font: 600 0.875rem/1.3 var(--f-ui); }
.fut__list { margin: 6px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.fut__list li + li { margin-top: 4px; }
@media (min-width: 1000px) { .fut { grid-template-columns: 300px minmax(0, 1fr); column-gap: 48px; align-items: start; } }

/* ---------- Exhibit: where the money went ---------- */
.cash__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.cash__row {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) 4.4rem; gap: 14px; align-items: center;
  font: 500 0.9375rem/1.25 var(--f-ui); font-stretch: 92%; color: var(--ink-2);
}
.cash__t { height: 22px; background: var(--panel); }
.cash__t i { display: block; height: 100%; background: var(--rival); opacity: 0.5; transform-origin: 0 50%; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
.cash__row.is-ibm { color: var(--ink); font-weight: 650; }
.cash__row.is-ibm .cash__t i { background: var(--ibm); opacity: 1; }
.cash__row.is-return .cash__t i {
  background: repeating-linear-gradient(135deg, var(--ibm) 0 6px, color-mix(in oklab, var(--ibm) 45%, var(--ground)) 6px 10px);
}
.cash__v { text-align: right; }
.cash__note { margin-top: 14px; color: var(--ink-3); font: 400 0.875rem/1.45 var(--f-ui); max-width: 40rem; }
@media (max-width: 640px) {
  .cash__row { grid-template-columns: minmax(0, 1fr) 4.2rem; row-gap: 5px; }
  .cash__t { grid-column: 1 / -1; order: 3; }
}

/* ---------- Exhibit: the cloud market ---------- */
.cld { display: grid; gap: 16px; }
.cld__svg { width: 100%; overflow: visible; }
.cld__grid { stroke: var(--line); }
.cld__ax { font: 400 11px var(--f-ui); font-stretch: 86%; fill: var(--ink-3); }
.cld__seg--0 { fill: #8c7a5c; }
.cld__seg--1 { fill: #6e7f74; }
.cld__seg--2 { fill: #7d8597; }
.cld__seg--3 { fill: #34362f; }
.cld__hit { fill: transparent; cursor: pointer; }
.cld__col { outline: none; }
.cld__col:not(.is-on) .cld__seg { opacity: 0.55; }
.cld__col:focus-visible .cld__hit { stroke: var(--ink); stroke-dasharray: 3 3; }
.cld__q { font: 650 1.05rem/1.3 var(--f-ui); font-stretch: 92%; }
.cld__q .num { color: var(--ink); }
.cld__dl { margin-top: 8px; display: grid; gap: 4px; max-width: 24rem; }
.cld__row { display: grid; grid-template-columns: 14px 1fr 3.2rem; gap: 10px; align-items: center; font: 500 0.9375rem/1.3 var(--f-ui); font-stretch: 94%; color: var(--ink-2); }
.cld__row::before { content: ""; width: 12px; height: 12px; border-radius: 2px; }
.cld__row--0::before { background: #8c7a5c; }
.cld__row--1::before { background: #6e7f74; }
.cld__row--2::before { background: #7d8597; }
.cld__row--3::before { background: #34362f; outline: 1px solid var(--ink-4); }
.cld__row--3 { color: var(--ink); }
.cld__row dd { margin: 0; text-align: right; }
@media (min-width: 1000px) { .cld { grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 36px; align-items: center; } }

/* ---------- Film sections: the interlude and the ending ---------- */
/* Narrow screens: the portrait film fills the screen and the words sit at
   the bottom. Wide screens: the film stands in a column beside the words. */
.film {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  margin-block: clamp(60px, 12svh, 140px);
  isolation: isolate;
}
.film__frame { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000; }
.film__frame video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.film__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ground) 0%, rgb(14 16 15 / 0.1) 18%, rgb(14 16 15 / 0.55) 40%, rgb(14 16 15 / 0.86) 58%, var(--ground) 90%);
}
.film--mid .film__frame video { filter: saturate(0.42) contrast(1.02) brightness(0.82); }
.film--end .film__frame video { filter: grayscale(1) contrast(1.06) brightness(0.78); }
.film__quote, .film__text { padding: 0 var(--gut) clamp(36px, 8svh, 80px); max-width: 40rem; }
.film__quote p {
  font: italic 330 clamp(1.8rem, 6.4vw, 3.4rem)/1.12 var(--f-text);
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
}
.film__quote footer { margin-top: 14px; color: var(--ink-2); font: 500 0.9375rem/1.4 var(--f-ui); font-stretch: 92%; max-width: 26rem; }
.film__h {
  text-wrap: balance;
  font: 330 clamp(2.2rem, 7vw, 4rem)/1.02 var(--f-text);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.film__text p + p { margin-top: 1em; }
.film__text p { max-width: 34rem; }
.film__last { font-size: 1.25em; line-height: 1.4; color: var(--ink); }
@media (min-width: 1000px) {
  .film { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(36px, 5vw, 80px); }
  .film__frame { position: relative; inset: auto; z-index: 0; height: 100svh; aspect-ratio: 9 / 16; max-width: 44vw; grid-column: 1; grid-row: 1; }
  .film__frame::after { background: linear-gradient(90deg, rgb(14 16 15 / 0) 70%, var(--ground) 100%), linear-gradient(180deg, var(--ground) 0%, transparent 12%, transparent 88%, var(--ground) 100%); }
  .film__quote, .film__text { grid-column: 2; grid-row: 1; padding: 0 var(--gut) 0 0; }
  .film--end { grid-template-columns: minmax(0, 1fr) auto; }
  .film--end .film__frame { grid-column: 2; }
  .film--end .film__frame::after { background: linear-gradient(270deg, rgb(14 16 15 / 0) 70%, var(--ground) 100%), linear-gradient(180deg, var(--ground) 0%, transparent 12%, transparent 88%, var(--ground) 100%); }
  .film--end .film__text { grid-column: 1; padding: 0 0 0 clamp(40px, 11vw, 160px); }
}
/* When the last film stops on the empty aisle, the closing line settles in. */
.film--end .film__last { opacity: 0.35; transition: opacity 2.4s ease; }
.film--end.is-held .film__last, .is-still .film--end .film__last, .no-js .film--end .film__last { opacity: 1; }

/* ---------- Where Watson went ---------- */
.lin, .lin ol { list-style: none; margin: 0; padding: 0; }
.lin { margin-top: 18px; max-width: 46rem; }
.lin ol { margin-left: 10px; padding-left: 22px; border-left: 2px solid var(--ink-4); }
.lin__node { position: relative; padding: 9px 0 0; }
.lin ol > .lin__node::before { content: ""; position: absolute; left: -22px; top: 21px; width: 16px; height: 2px; background: var(--ink-4); }
.lin__y { display: inline-block; min-width: 3.6rem; margin-right: 10px; font: 700 0.875rem/1.3 var(--f-ui); color: var(--ink-3); }
.lin__t { font: 500 0.98rem/1.4 var(--f-ui); font-stretch: 94%; color: var(--ink-2); }
.lin__node--root > .lin__t { color: var(--ink); font-weight: 650; }
.lin__node--now > .lin__t { color: var(--ink); }
.lin__node--now > .lin__y { color: var(--ibm); }
.lin__node--gone > .lin__t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--loss); text-decoration-thickness: 1.5px; }
.lin__node--note > .lin__t { color: var(--ink-3); font-style: italic; }
.js .lin__node > .lin__y, .js .lin__node > .lin__t { opacity: 0.12; transition: opacity 0.5s ease; }
.js .lin__node.is-on > .lin__y, .js .lin__node.is-on > .lin__t, .is-still .lin__node > * { opacity: 1; }
.lin__node--gone > .lin__t i { font-style: italic; }
@media (max-width: 520px) { .lin__y { display: block; margin-bottom: 1px; } }

/* ---------- Quantum rivals table ---------- */
.qtbl td:nth-child(4) { min-width: 18rem; }
.qtbl td:nth-child(3) { min-width: 9rem; }
.qtbl tr.is-ibm th { color: var(--gold); }

/* The quantum chapter carries the only warm metal on the page. */
.chap--q .chap__year { color: var(--gold); }

/* ---------- Sources ---------- */
.sources { padding-top: clamp(80px, 14svh, 160px); }
.sources__h { font: 340 clamp(1.8rem, 4.4vw, 2.6rem)/1.1 var(--f-text); font-variation-settings: "opsz" 48; }
.sources__cols { display: grid; gap: 8px 48px; margin-top: 24px; }
@media (min-width: 900px) { .sources__cols { grid-template-columns: 1fr 1fr; } }
.sources h3 { margin: 20px 0 8px; font: 650 0.9375rem/1.3 var(--f-ui); font-stretch: 92%; color: var(--ink); }
.sources ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font: 400 0.875rem/1.55 var(--f-ui); font-stretch: 96%; }
.sources li + li { margin-top: 6px; }
.sources a { color: var(--ink); }
.sources__note { margin-top: 28px; max-width: 46rem; color: var(--ink-3); font: 400 0.875rem/1.55 var(--f-ui); }

/* ---------- Footer ---------- */
.foot { padding-block: clamp(56px, 10svh, 110px) clamp(40px, 8svh, 80px); display: grid; gap: 18px; }
.foot__by { display: flex; align-items: center; gap: 12px; font: 500 0.9375rem/1 var(--f-ui); color: var(--ink-2); }
.foot__by a { display: inline-flex; color: var(--ink); text-decoration: none; }
.foot__by svg { height: 34px; width: auto; }
.foot__by a:hover { color: #fff; }
.foot__fine { max-width: 46rem; color: var(--ink-3); font: 400 0.8125rem/1.55 var(--f-ui); }


/* ---------- Held motion ----------
   Reduced-motion settings, or "Hold all motion" in the contents panel.
   Durations go to 0s exactly; anything above zero leaves half-drawn frames. */
.is-still *, .is-still *::before, .is-still *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}
.is-still .reel g { animation: none !important; }

/* ---------- Print ---------- */
@media print {
  .rail, .bar, .ctl, .warmth, .hero__film, .film__frame, .contents { display: none !important; }
  html, body { background: #fff; color: #111; }
  .story, .hero { padding-left: 0; }
  .pin { height: auto; }
  .pin__stage { position: static; height: auto; }
}