/* Biotech Abundance. One declassified clinical file: a black photocopied sheet with a rule, a seal,
   typed paragraphs, engraved figures and one glowing exhibit. Everything here is measured off
   art/ref/plate.jpg: the field, the two neon inks, the bone, the band structure and the scale. */

@font-face { font-family: "Sporting"; src: url("/fonts/sporting-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Routed";   src: url("/fonts/routed.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "RoutedN";  src: url("/fonts/routed-narrow.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Typed";    src: url("/fonts/typed.woff2") format("woff2"); font-display: swap; }

:root {
  /* measured off the plate: field #0a0a0c, cyan #5cb7e9 / #a9e8f1, magenta #d673b3 / #ff87ff,
     inner blue #6b86d7 / #b6c2fc, bone #ebebec */
  --field: #0a0a0c;
  --field-lift: #121218;
  --ink: #eceae3;
  --ink-2: #b9b7ae;
  --ink-3: #8d8b84;
  --cyan: #6fd9ef;
  --cyan-2: #2f9ab2;
  --magenta: #ff6fb4;
  --blue: #9fb0ff;
  --rule: #34343c;
  --rule-2: #23232a;

  --page: 1120px;
  --gutter: 28px;

  /* one scale, nothing off it */
  --t-label: 12px;
  --t-small: 14px;
  --t-body: 15px;
  --t-value: 20px;
  --t-head: 28px;
  --t-display: 38px;

  --gap: 26px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--field); }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font: var(--t-body)/1.62 "Typed", "Courier New", monospace;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the photocopy itself: an even grain over the whole field, never a generated noise effect */
.grain {
  position: fixed;
  inset: 0;
  background-image: url("/img/grain.webp");
  background-size: 420px 420px;
  opacity: 0.28;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--field);
  padding: 10px 18px; font-family: "Routed", sans-serif; font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase; z-index: 20;
}
.skip:focus { left: 12px; top: 12px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.file {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 34px var(--gutter) 72px;
}

/* ------------------------------------------------------------------ masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mast-rule { display: block; flex: 1 1 auto; height: 1px; background: var(--ink-2); min-width: 18px; }

.mast-end {
  flex: 0 0 auto;
  font: var(--t-label)/1.2 "Routed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

.mast-title {
  flex: 0 0 auto;
  margin: 0;
  font: 700 var(--t-display)/1.06 "Sporting", sans-serif;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-shadow: 0 0 26px rgba(111, 217, 239, 0.22);
  white-space: nowrap;
}

.mast-sub {
  margin: 12px 0 0;
  font-size: var(--t-small);
  color: var(--ink-2);
  text-align: center;
}

/* ------------------------------------------------------------------ exhibit and callouts */

.exhibit {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 176px;
  align-items: center;
  gap: 14px;
  margin: 20px 0 6px;
}

.plate { margin: 0; position: relative; }
.plate img { display: block; width: 100%; height: auto; }

/* The one thing on the sheet that moves, and it is the thing that would: a glowing object's own
   light, breathing. No transform, no layout, nothing that follows the pointer; under reduced motion
   it simply holds still. */
@keyframes specimen {
  0%, 100% { filter: brightness(0.97) saturate(0.98); }
  50%      { filter: brightness(1.06) saturate(1.04); }
}
.plate img { animation: specimen 7.5s ease-in-out infinite; will-change: filter; }

.fig {
  margin: 6px 0 0;
  text-align: right;
  font: var(--t-label)/1 "Routed", sans-serif;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.callouts { display: flex; flex-direction: column; gap: 18px; }
.callouts-left { align-items: stretch; }
.callouts-right { align-items: stretch; }

.callout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.callouts-right .callout { text-align: right; }

.co-no {
  font: var(--t-label)/1 "Routed", sans-serif;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-right: 10px;
}
.callouts-right .co-no { margin-right: 0; margin-left: 10px; }

.co-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.co-name {
  font: var(--t-small)/1.2 "Routed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.co-value {
  font: var(--t-label)/1.35 "Routed", sans-serif;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* the hairline leader into the specimen, exactly as his plate labels its drawing */
.co-lead {
  flex: 0 0 18px;
  height: 1px;
  background: var(--rule);
  position: relative;
}
.co-lead::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rule);
}
.callouts-left .co-lead::after { right: -2px; }
.callouts-right .co-lead::after { left: -2px; }

.callout:hover, .callout:focus-visible { border-top-color: var(--cyan); }
.callout:hover .co-name, .callout:focus-visible .co-name { color: var(--cyan); }
.callout:hover .co-lead, .callout:focus-visible .co-lead,
.callout:hover .co-lead::after, .callout:focus-visible .co-lead::after { background: var(--cyan); }

.callout[aria-current="true"] { border-top-color: var(--cyan); }
.callout[aria-current="true"] .co-name { color: var(--field); background: var(--cyan); padding: 8px 16px; margin: 0 -16px; }
.callout[aria-current="true"] .co-lead, .callout[aria-current="true"] .co-lead::after { background: var(--cyan); }
/* the sheet number sits ON the cyan block when its sheet is open, so it takes an ink that reads
   there: the page ink would be 2.1:1 against it */
.callout[aria-current="true"] .co-no { color: #11424d; }

/* ------------------------------------------------------------------ sheets */

.rule { height: 1px; background: var(--rule-2); margin: 26px 0; }
.rule-head { background: var(--rule); margin-top: 18px; }

.sheet { outline: none; }
.page { display: block; }

.band {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 320px;
  gap: var(--gap);
  align-items: start;
}
.band-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.band-head { grid-template-columns: minmax(0, 1fr); }
.band-foot { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; }

.col { min-width: 0; }

.label {
  margin: 0 0 12px;
  font: var(--t-label)/1.2 "Routed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.label-split { margin-top: 24px; }

/* the seal, in the slot his plate gives its own */
.seal { display: block; width: 100%; max-width: 168px; height: auto; }
.seal-cap {
  margin: 10px 0 0;
  font: var(--t-small)/1.5 "Routed", sans-serif;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.seal-cap span {
  display: block;
  margin-top: 4px;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.typed-head {
  margin: 0 0 14px;
  font: var(--t-value)/1.35 "Typed", monospace;
  font-weight: normal;
  color: var(--ink);
}

.typed { margin: 0 0 14px; font-size: var(--t-body); color: var(--ink-2); }
.typed:last-child { margin-bottom: 0; }
.lede { color: var(--ink); }

/* his white-out bars, inverted: a painted block that DISCLOSES its source instead of hiding it */
.chips { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--field);
  font: var(--t-label)/1.3 "Routed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.chip:hover, .chip:focus-visible { background: var(--cyan); }

.byline {
  margin: 14px 0 0;
  font: var(--t-label)/1.5 "Routed", sans-serif;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* the figures block, in the slot his plate gives its wave chart */
.figures { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; }
.figures dt {
  padding: 9px 16px 9px 16px;
  border-top: 1px solid var(--rule-2);
  font: var(--t-label)/1.4 "Routed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.figures dd {
  margin: 0;
  padding: 9px 20px 9px 20px;
  border-top: 1px solid var(--rule-2);
  text-align: right;
  font-size: var(--t-small);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figures dd.big { font-size: var(--t-value); line-height: 1.1; color: var(--cyan); }
.figures dd.dim { color: var(--ink-3); }

.split { display: grid; gap: 10px; }
.split-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.split-name {
  font: var(--t-label)/1.4 "Routed", sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.split-pct { font-size: var(--t-small); color: var(--ink); font-variant-numeric: tabular-nums; }
.split-bar { grid-column: 1 / -1; height: 3px; background: var(--rule-2); }
.split-bar i { display: block; height: 3px; background: var(--cyan); }
.split-row.b .split-bar i { background: var(--magenta); }
.split-row.c .split-bar i { background: var(--blue); }

/* the paper, labelled the way his plate labels its anatomical drawing */
.paper { display: grid; gap: 0; }
.paper-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 10px 16px; border-top: 1px solid var(--rule-2); }
/* in the seal's narrow column the key sits above its value instead of beside it */
.col-seal .paper-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.paper-key { font: var(--t-label)/1.5 "Routed", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.paper-val { font-size: var(--t-small); color: var(--ink); overflow-wrap: anywhere; }
.paper-val .good { color: var(--cyan); }
.paper-val .bad { color: var(--magenta); }

.rounds { display: grid; gap: 0; }
.round-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--rule-2); font-size: var(--t-small); }
.round-date { font: var(--t-label)/1.6 "Routed", sans-serif; letter-spacing: 0.04em; color: var(--ink-3); }
.round-what { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.round-amount { color: var(--ink); font-variant-numeric: tabular-nums; }
.empty { padding: 12px 16px; border-top: 1px solid var(--rule-2); color: var(--ink-3); font-size: var(--t-small); }

/* ------------------------------------------------------------------ the stamp that holds the coin */

.stamp {
  border-style: solid;
  border-width: 31px 20px;
  border-image: url("/img/stamp2.webp") 102 65 round;
  padding: 14px 22px 16px;
}

.ca-line { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.ca {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--t-small);
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}
.ca.waiting { color: var(--ink-3); user-select: none; }

.copy, .key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 20px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font: var(--t-label)/1 "Routed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, transform 0.08s;
}
.copy:hover, .key:hover, .copy:focus-visible, .key:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.copy:active, .key:active { transform: translateY(1px); }
.copy[disabled], .key[disabled] { opacity: 0.74; cursor: not-allowed; }
.copy[disabled]:hover, .key[disabled]:hover { border-color: var(--rule); color: var(--ink); }
.key-wide { width: 100%; }

.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 12px; }
.key img { width: 15px; height: 15px; display: block; }

.warning {
  margin: 0 0 10px;
  font: 700 var(--t-value)/1 "Sporting", sans-serif;
  letter-spacing: 0.22em;
  color: var(--ink);
}
.warning-line {
  margin: 0;
  font: var(--t-small)/1.5 "RoutedN", "Routed", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ tables */

.table-wrap { width: 100%; overflow-x: auto; }

.sheet-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.sheet-table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font: var(--t-label)/1.3 "Routed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
.sheet-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-2);
  vertical-align: top;
}
.sheet-table td:first-child { color: var(--ink); white-space: nowrap; }
.sheet-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-table tr.ok td:first-child { color: var(--cyan); }
.verdict-ok { color: var(--cyan); white-space: nowrap; }
.verdict-no { color: var(--ink-3); white-space: nowrap; }

.weeks { display: grid; gap: 0; }
.week {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 190px;
  gap: 22px;
  padding: 20px 16px;
  border-top: 1px solid var(--rule-2);
}
.week-id { font: var(--t-label)/1.6 "Routed", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.week-id .rehearsed { display: block; color: var(--magenta); margin-top: 4px; }
.week-head { margin: 0 0 8px; font-size: var(--t-body); color: var(--ink); }
.week-why { margin: 0 0 10px; font-size: var(--t-small); color: var(--ink-2); }
.week-paper { text-align: right; }
.week-ticker { font: var(--t-value)/1.1 "Typed", monospace; color: var(--cyan); }
.week-company { display: block; margin-top: 6px; font-size: var(--t-small); color: var(--ink-2); }

/* ------------------------------------------------------------------ my share */

.ask { display: flex; gap: 12px; margin: 16px 0 0; flex-wrap: wrap; }
.ask input {
  flex: 1 1 320px;
  min-width: 0;
  min-height: 42px;
  padding: 0 16px;
  background: var(--field-lift);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: var(--t-small)/1 "Typed", monospace;
}
.ask input:focus { outline: none; border-color: var(--cyan); }
.ask input::placeholder { color: var(--ink-3); }
.ask .key { flex: 0 0 auto; }

.say { margin: 14px 0 0; font-size: var(--t-small); color: var(--ink-2); min-height: 22px; }
.say[data-state="error"] { color: var(--magenta); }
.say[data-state="good"] { color: var(--cyan); }

#claimBtn { margin-top: 20px; }

/* ------------------------------------------------------------------ protocol */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.step { min-width: 0; }
.step img { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.step-no { margin: 0 0 6px; font: var(--t-label)/1 "Routed", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.step-head { margin: 0 0 10px; font: var(--t-body)/1.35 "Typed", monospace; font-weight: normal; color: var(--ink); }
.prose .typed { margin-bottom: 12px; }

/* ------------------------------------------------------------------ widths */

@media (max-width: 1100px) {
  :root { --t-display: 34px; --gap: 22px; }
  .exhibit { grid-template-columns: 1fr minmax(0, 480px) 1fr; }
  .co-lead { flex-basis: 20px; }
  .band { grid-template-columns: 170px minmax(0, 1fr) 260px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --t-display: 30px; --t-head: 24px; }
  .masthead { flex-wrap: wrap; justify-content: center; }
  .mast-rule { display: none; }
  .mast-title { order: -1; width: 100%; text-align: center; white-space: normal; }

  .exhibit { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plate { order: -1; }
  .callouts-left { order: 1; }
  .callouts-right { order: 2; }
  .callouts { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .callouts-right .callout { text-align: left; flex-direction: row-reverse; }
  .callout { width: calc(50% - 6px); padding: 10px 14px; }
  .co-lead { display: none; }
  .band, .band-wide, .band-foot { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .col-seal .seal-block { display: flex; align-items: center; gap: 18px; }
  .seal { max-width: 96px; }
  .seal-cap { margin-top: 0; }
  .week { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .week-paper { text-align: left; }
  .keys { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  :root { --gutter: 18px; --t-display: 25px; --t-value: 18px; }
  .file { padding-top: 24px; }
  .callout { width: 100%; padding: 12px 16px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .stamp { border-width: 22px 14px; padding: 12px 16px 14px; }
  .paper-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .round-row { grid-template-columns: 84px minmax(0, 1fr); }
  .round-amount { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}