/* Independent Browser Mining. One sheet, printed in two inks on near black.
   The reference is a flat printed pack sheet, so the blocks, rules and type ARE the objects here:
   no window chrome, no card panels, no footer. Everything that is a picture is a generated raster. */

@font-face {
  font-family: "BackOut";
  src: url("/fonts/backout.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Format1452";
  src: url("/fonts/format1452.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Azeret";
  src: url("/fonts/azeret-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Azeret";
  src: url("/fonts/azeret-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ground: #0a0910;
  --ground-2: #100e18;
  --paper: #efeae1;
  --paper-dim: #cfc9c0;
  --pink: #ff3d8b;
  --pink-dim: #a3285a;
  --blue: #3f6bff;
  --blue-dim: #2a46a8;
  --hair: rgba(63, 107, 255, 0.38);
  --hair-pink: rgba(255, 61, 139, 0.32);
  --gutter: clamp(16px, 2.2vw, 40px);
  --measure: 1560px; /* the sheet's own width: masthead, head row, stage and imprint all end here */
  --stage-pad: clamp(28px, 2vw, 34px);
  --display: "BackOut", "Arial Narrow", sans-serif;
  --text: "Format1452", system-ui, sans-serif;
  --mono: "Azeret", ui-monospace, monospace;
  /* One scale, used everywhere. Nothing on the page is sized outside it, and nothing is under 16 px:
     a label is 16, a sentence 18, a value 20, a block title 28 to 44, the masthead its own clamp. */
  --t-xs: 16px;
  --t-s: 18px;
  --t-m: 20px;
  --t-l: 28px;
  --t-xl: clamp(28px, 2.4vw, 44px);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--paper);
}

body {
  font-family: var(--text);
  font-size: var(--t-s);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  /* every band of the sheet is a child of body, so one measure and one pair of gutters hold them all
     to the same left and right edge, at every width */
  width: min(100%, var(--measure));
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(28px, 4vw, 64px);
  position: relative;
  min-height: 100vh;
}

/* the paper: a generated riso grain tile multiplied over the whole sheet, and two ink blooms */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/img/grain.png");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 60;
}
body::after {
  content: "";
  position: fixed;
  inset: -20vh -10vw auto;
  height: 90vh;
  background:
    radial-gradient(60vw 50vh at 18% 22%, rgba(255, 61, 139, 0.16), transparent 70%),
    radial-gradient(55vw 45vh at 82% 10%, rgba(63, 107, 255, 0.17), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pink);
  color: #10060c;
  padding: 14px 22px;
  font-family: var(--mono);
  z-index: 90;
}
.skip:focus { left: var(--gutter); top: 10px; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

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

.sheet-head { padding-top: clamp(22px, 3vw, 46px); }

/* One line, one face, one size. The name is the name: the old inline wedge put a second colour and a
   second size inside the lockup, and at 1024 it climbed over the word next to it. */
.masthead {
  display: grid;
  gap: 0;
  width: 100%;
}

.masthead-line {
  display: block;
  font-family: var(--display);
  /* sized so the line fits the sheet at every width and wraps by words on a phone */
  font-size: clamp(44px, 6.6vw, 104px);
  /* when the name wraps on a phone, the pink of one line must not sit on the blue of the next */
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--paper);
  text-transform: uppercase;
  text-wrap: balance;
  /* the two inks print a hair out of register, the way a riso actually does: a hair, not a smear */
  text-shadow: 2px 2px 0 var(--pink), -2px -1px 0 var(--blue);
}

.masthead-rule {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--pink);
  margin: clamp(14px, 1.4vw, 22px) 0 10px;
}

.masthead-sub {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue);
}

.standfirst {
  max-width: 60ch;
  margin: 0;
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--paper-dim);
}

/* ----------------------------------------------------------------- ribbons */

.ribbons {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1vw, 18px);
  margin: clamp(20px, 2.4vw, 34px) 0 clamp(14px, 1.6vw, 22px);
}

.ribbon {
  --notch: 14px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  line-height: 1.1;
  min-width: clamp(132px, 12vw, 190px);
  padding: 12px calc(1.5em + var(--notch));
  background: var(--blue-dim);
  color: var(--paper);
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%);
  transition: transform 120ms ease, background 120ms ease;
}
.ribbon span { transform: translateY(1px); }
.ribbon:hover { background: #33539f; }
.ribbon:active { transform: translateY(2px); }
.ribbon[aria-current="page"] {
  background: var(--pink);
  color: #150509;
}

/* ------------------------------------------------------------------- stage */

.stage {
  position: relative;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(18, 16, 26, 0.92), rgba(10, 9, 16, 0.92));
  padding: var(--stage-pad);
}

.runstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 1.6vw, 28px);
  padding: 14px 22px 16px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.run-item { white-space: nowrap; }
.run-item + .run-item::before {
  content: "+";
  color: var(--pink);
  margin-right: 10px;
}

.station {
  display: grid;
  gap: clamp(20px, 2vw, 34px);
  padding: clamp(22px, 2.4vw, 38px) 0;
  min-height: 420px;
}
.station.two-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; }

/* ------------------------------------------------------------------ blocks */

/* a row answers to the column it is in, not to the window: at 1024 the station is still two columns,
   and a label in a 440 px cell wraps exactly as it would on a phone */
.block { min-width: 0; container-type: inline-size; container-name: col; }
.block + .block { margin-top: clamp(22px, 2.2vw, 34px); }

.block-title {
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.06;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--paper);
  text-shadow: 1px 1px 0 var(--pink-dim);
}

.lead { margin: 0 0 18px; max-width: 62ch; font-size: var(--t-s); line-height: 1.55; color: var(--paper-dim); }

.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}

.figure {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1;
  color: var(--paper);
}
.figure.pink { color: var(--pink); }
.figure.huge { font-size: clamp(40px, 6vw, 88px); }

.rows { display: grid; gap: 0; margin: 0 -22px; }
.rows > p { padding: 0 22px; }
.row {
  display: grid;
  /* one long value must never squeeze the label column to one letter per line */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 18px;
  align-items: baseline;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(239, 234, 225, 0.12);
}
.row:first-child { border-top: 1px solid rgba(239, 234, 225, 0.12); }
.row-key { font-size: var(--t-s); color: var(--paper-dim); min-width: 0; overflow-wrap: anywhere; }
.row-val { font-family: var(--mono); font-weight: 500; font-size: var(--t-m); color: var(--paper); text-align: right; overflow-wrap: anywhere; }
/* a value that is a sentence is set flush left, where a reader starts it */
.rows.prose .row-val { text-align: left; }
.row-val.pink { color: var(--pink); }
.row-val.blue { color: var(--blue); }

.plate {
  border: 1px solid var(--hair);
  padding: clamp(24px, 2vw, 36px);
  background: rgba(8, 7, 14, 0.6);
}
.plate + .plate { margin-top: 18px; }
.plate.pink { border-color: var(--hair-pink); }
/* the concentration plate carries a 104 px numeral, which needs its own 1 em (32 px capped) */
.plate.big { padding: clamp(34px, 2.6vw, 44px); }

.note {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 14px 0 0;
}
.warn { color: var(--pink); }

/* ------------------------------------------------------------------ the card */

.card-wrap { position: relative; }
.card-wrap + .plate { margin-top: clamp(18px, 1.8vw, 26px); }
.card-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}
.card-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 14px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ----------------------------------------------------------------- controls */

.controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.field input[type="text"] {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  background: #07060c;
  border: 1px solid var(--hair);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-s);
}
.field input[type="text"]::placeholder { color: #6f6a7f; }

.key {
  --notch: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* a label that wraps on a phone must still have its half em above and below: padding, not height */
  min-height: 60px;
  line-height: 1.1;
  padding: 12px 1.6em;
  border: 0;
  background: var(--blue-dim);
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--t-m);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%);
}
.key:hover { background: #33539f; }
.key:active { transform: translateY(2px); }
/* a key is dark until the config carries its link, and it still has to be readable */
.key[disabled] { background: #1b1826; color: #a9a3b8; cursor: not-allowed; }
.key.primary { background: var(--pink); color: #180609; min-height: 78px; font-size: var(--t-l); padding: 16px 2em; }
.key.primary:hover { background: #ff5c9e; }
.key img { height: 20px; width: auto; display: block; }

.slider { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.slider input[type="range"] { width: 100%; accent-color: var(--pink); height: 32px; }

/* ----------------------------------------------------------------- imprint */

/* The ink band that closes the sheet: three groups on one axis, the same air above and below each,
   and the keys ending on the stage's own right edge, not the window's. */
.imprint {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: clamp(18px, 1.8vw, 32px);
  align-items: center;
  margin: 0 calc(-1 * var(--stage-pad)) calc(-1 * var(--stage-pad));
  padding: clamp(24px, 2vw, 32px) max(24px, var(--stage-pad));
  background: var(--blue-dim);
  border-top: 1px solid var(--hair);
}
.imprint-ident { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; }
.imprint-name {
  font-family: var(--display);
  font-size: var(--t-m);
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.imprint-ticker { font-family: var(--mono); font-weight: 700; font-size: var(--t-m); color: var(--pink); }
/* label, value, key: one block, read top to bottom, nothing between them but 8 px */
.imprint-ca { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.imprint-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(239, 234, 225, 0.85);
}
.imprint-address {
  font-family: var(--mono);
  font-size: var(--t-s);
  color: var(--paper);
  overflow-wrap: break-word;
  max-width: 100%;
  user-select: all;
}
.imprint-copy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.imprint-copy .key { min-height: 48px; font-size: var(--t-s); padding: 12px 1.6em; }
.imprint-feedback { font-family: var(--mono); font-size: var(--t-xs); color: #e8ecff; }
.imprint-keys { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
/* the notch is cut out of the padding, so a narrower key keeps a smaller notch and the same air */
.imprint-keys .key { --notch: 10px; background: #0d1430; min-height: 48px; font-size: var(--t-s); padding: 12px 1.5em; }
.imprint-keys .key:hover { background: #16204a; }
.imprint .key[disabled] { background: #121a3d; color: #b9c0e0; }
.imprint .key img { height: 18px; }

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

.board { border-collapse: collapse; margin: 0 -20px; width: calc(100% + 40px); }
.board caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 0 20px 12px;
}
.board th, .board td {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(239, 234, 225, 0.12);
  font-size: var(--t-s);
}
.board th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.board td.num, .board th.num { text-align: right; font-family: var(--mono); }
.board td.wallet { font-family: var(--mono); font-size: var(--t-xs); overflow-wrap: anywhere; }
.board tr.you td { color: var(--pink); }

/* --------------------------------------------------------------- the phone */

/* the three groups of the band stop fitting on one line before the stage does */
@media (max-width: 1180px) {
  .imprint { grid-template-columns: minmax(0, 1fr) auto; row-gap: 24px; }
  .imprint-ident { grid-area: 1 / 1; }
  .imprint-keys { grid-area: 1 / 2; justify-content: flex-end; }
  .imprint-ca { grid-area: 2 / 1 / 3 / -1; }
}

@media (max-width: 900px) {
  .station.two-up { grid-template-columns: minmax(0, 1fr); }
  .imprint { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .imprint-ident, .imprint-ca, .imprint-keys { grid-area: auto; }
  .imprint-keys { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .ribbons { display: grid; grid-template-columns: 1fr 1fr; }
  .ribbon { min-width: 0; width: 100%; }
  /* four keys in three ragged rows is not a group: on a phone they are a block of two by two */
  .imprint-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .imprint-keys .key { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@media (max-width: 430px) {
  /* at 320 the run strip's own words are wider than the sheet: let them break */
  .runstrip { letter-spacing: 0.06em; }
  .run-item { white-space: normal; }
  /* and a ribbon half the sheet wide cannot carry 24 px type with its notch */
  .ribbon { font-size: 20px; padding: 12px calc(0.8em + var(--notch)); }
}

/* the head row: what it is on the left, where the money goes on the right, so the first screen is
   never half empty at 1366 and up */
.head-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 64px);
  align-items: start;
  margin-top: clamp(18px, 2vw, 28px);
}
.split {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.split li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 28px;
  background: rgba(63, 107, 255, 0.14);
}
.split li:nth-child(1) { background: rgba(255, 61, 139, 0.18); }
.split b {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-l);
  color: var(--pink);
  min-width: 2.6em;
}
.split li:nth-child(n + 2) b { color: var(--blue); }
.split span { font-size: var(--t-s); color: var(--paper-dim); }

/* between 900 and 1180 the chip is half of a narrow column: its own padding was eating the label */
@media (max-width: 1180px) {
  .split li { padding: 14px 18px; gap: 10px; }
  .split b { min-width: 2.2em; }
}

@media (max-width: 900px) {
  .head-row { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split li { padding: 16px 28px; gap: 12px; }
}


/* A table answers to its own column too. The keeper's ledger carries five columns and signatures, so
   it needs about 700 px; the three and four column boards manage down to 440. Under that each row
   becomes its own labelled block instead of scrolling the page sideways. */
@container col (max-width: 700px) {
  .board.stack, .board.stack tbody, .board.stack tr, .board.stack td { display: block; width: 100%; }
  .board.stack thead { display: none; }
  .board.stack tr { border-bottom: 1px solid rgba(239, 234, 225, 0.18); padding: 10px 0; }
  .board.stack td { border: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 26px; text-align: left; }
  .board.stack td::before { content: attr(data-label); color: var(--paper-dim); font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
  .board.stack td.num { text-align: left; }
  .board.stack td:empty { display: none; }
}

@container col (max-width: 440px) {
  .board, .board tbody, .board tr, .board td { display: block; width: 100%; }
  .board thead { display: none; }
  .board tr { border-bottom: 1px solid rgba(239, 234, 225, 0.18); padding: 10px 0; }
  .board td { border: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 26px; text-align: left; }
  .board td::before { content: attr(data-label); color: var(--paper-dim); font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
  .board td.num { text-align: left; }
  .board td:empty { display: none; }
}

@container col (max-width: 560px) {
  /* a label and its number do not fit on one narrow line: the value goes under its label */
  .row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .row-val { text-align: left; }
}


/* The drill marks: his reference scatters hand marks around its stages, so ours carries its own,
   drawn as rasters on transparency. Each one is a child of the block it belongs to, never of the page,
   and none of them can be clicked or read. */
.sheet-head, .stage { position: relative; }
.mark {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
  image-rendering: auto;
}
/* one registration mark, in the stage's own corner. The two that floated down the long edges landed
   on whatever plate happened to be there, which is not a place. */
.mark-stage-1 { width: 26px; top: 9px; right: 9px; }