/* Replicate: one screen printed poster. Flat black paper, acid inks for verdicts only, a one bit dot screen.
   Two materials: dithered ink blocks (canvas) and solid knockout plates (white paper, black type).

   ONE type scale, used everywhere: 16 / 20 / 24 / 32 / 48 / 72, plus one display clamp for the masthead.
   ONE space scale, used everywhere: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
   The accent inks carry a verdict and nothing else: no button, no rule and no focus ring uses them. */

@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Sligoil"; src: url("../fonts/sligoil-micro.woff2") format("woff2"); font-display: swap; }

:root {
  /* surfaces */
  --paper: #050505;         /* the sheet */
  --surface: #fafafa;       /* a knockout plate */
  --surface-2: #ffffff;     /* a field inside a plate */
  --rule: #272727;          /* a rule on paper */
  --rule-ink: #d2d2d2;      /* a rule on a plate */
  --disabled: #dcdcdc;      /* a plate control that opens at launch */

  /* type colours, every one at or above 4.5:1 on its own surface */
  --ink: #fafafa;           /* 19.3:1 on paper */
  --ink-2: #9a9a9a;         /* 7.3:1 on paper */
  --ink-3: #7a7a7a;         /* 4.8:1 on paper */
  --on-plate: #050505;      /* 19.3:1 on a plate */
  --on-plate-2: #4a4a4a;    /* 8.4:1 on a plate */
  --on-plate-3: #555555;    /* 5.7:1 on a plate */

  /* the four verdict inks, each above 4.5:1 on paper and carrying black type when used as a plate */
  --v-green: #05fa6f;       /* REPRODUCED */
  --v-yellow: #faff65;      /* PARTIAL */
  --v-red: #ff3d2e;         /* FAILED */
  --v-magenta: #ff5ce1;     /* BLOCKED */

  /* scales */
  --gutter: 64px;
  --band: 64px;
  --pad: 32px;              /* every plate keeps its text this far from its own edges */
  --display: clamp(48px, 6.4vw, 112px);
  font-synthesis: none;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  font-variation-settings: "wght" 400, "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

/* the even scan the whole sheet is printed through: 1 row of ink in every 4 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .030) 0 1px, transparent 1px 4px);
}

/* one container, one pair of side margins: every section starts and ends on the same two lines */
.sheet { max-width: 1792px; margin: 0 auto; padding: 32px var(--gutter) 64px; }

a { color: inherit; }

/* ---------- head row: the index across the sheet, the ident on its right edge ---- */

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }

.index a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 2px solid var(--rule);
  color: var(--ink);
  font-size: 20px;
  font-variation-settings: "wght" 500, "wdth" 88;
  letter-spacing: .02em;
}
.index a .n { font-family: Sligoil, monospace; font-size: 16px; color: var(--ink-2); }
.index a:hover { border-bottom-color: var(--ink); background: #101010; }
.index a[aria-current="page"] { background: var(--surface); color: var(--on-plate); border-bottom-color: var(--surface); }
.index a[aria-current="page"] .n { color: var(--on-plate); }
.index a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.ident { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.ident .line { font-size: 20px; color: var(--ink-2); font-variation-settings: "wght" 400, "wdth" 92; }
.ident .line b { color: var(--ink); font-variation-settings: "wght" 600, "wdth" 92; }

/* ---------- masthead: the name and its line read as one group -------------- */

.masthead { margin: 64px 0 0; text-align: center; }
.masthead h1 {
  margin: 0;
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  font-size: var(--display);
  line-height: .92;
  letter-spacing: -.005em;
}
.knock {
  display: inline-block;
  margin-top: 16px;
  background: var(--surface);
  color: var(--on-plate);
  padding: 16px 32px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600, "wdth" 100;
}

/* ---------- the verdict field: four dithered glyph blocks ----------------- */

.field { margin-top: var(--band); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.vblock {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* the four letters share one block, so they print on one baseline whatever their counts are */
.vblock canvas { display: block; width: 100%; height: 240px; image-rendering: pixelated; }
.vblock .cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  color: var(--on-plate);
  min-height: 88px;
  padding: 24px var(--pad);
}
.vblock .cap .w { font-size: 20px; letter-spacing: .12em; font-variation-settings: "wght" 700, "wdth" 92; }
.vblock .cap .c { font-family: Anton, sans-serif; font-size: 32px; line-height: 1; }
.vblock[aria-pressed="true"] .cap { background: var(--pressed, var(--v-green)); }
.vblock:hover canvas { filter: brightness(1.12); }
.vblock:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- section heads ------------------------------------------------- */

.band { margin-top: var(--band); }
.band > h2 {
  margin: 0 0 16px;
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: .005em;
}
.band > .sub { margin: 0 0 24px; color: var(--ink-2); font-size: 20px; line-height: 1.6; max-width: 72ch; }

/* ---------- the ledger: rows start and end on the container's own two lines ---- */

.ledger { border-top: 1px solid var(--rule); }
.lrow {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 150px 120px 130px 170px;
  gap: 24px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 16px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lrow:hover { background: #0e0e0e; }
.lrow:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.lrow .id { font-family: Sligoil, monospace; font-size: 16px; color: var(--ink-2); }
.lrow .t { font-size: 20px; font-variation-settings: "wght" 500, "wdth" 100; min-width: 0; overflow-wrap: anywhere; }
.lrow .f, .lrow .cl { font-size: 16px; color: var(--ink-2); }
.lrow .b { font-family: Sligoil, monospace; font-size: 20px; }
.lrow .v { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: .1em;
  font-variation-settings: "wght" 700, "wdth" 88; }
.lrow .v .dot { width: 16px; height: 16px; flex: none; }
.head-row { color: var(--ink-2); font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
  min-height: 0; padding: 0 0 12px; cursor: default; font-variation-settings: "wght" 600, "wdth" 88; }
.head-row:hover { background: none; }
/* a column head is a label, in the label face, whatever the column under it is set in */
.head-row .id, .head-row .b { font-family: inherit; font-size: 16px; color: var(--ink-2); }

.v-REPRODUCED { color: var(--v-green); } .v-REPRODUCED .dot { background: var(--v-green); }
.v-PARTIAL { color: var(--v-yellow); } .v-PARTIAL .dot { background: var(--v-yellow); }
.v-FAILED { color: var(--v-red); } .v-FAILED .dot { background: var(--v-red); }
.v-BLOCKED { color: var(--v-magenta); } .v-BLOCKED .dot { background: var(--v-magenta); }
.v-RUNNING, .v-QUEUED { color: var(--ink-2); } .v-RUNNING .dot, .v-QUEUED .dot { background: var(--ink-2); }

.empty { padding: 32px 0; color: var(--ink-2); font-size: 20px; border-bottom: 1px solid var(--rule); }

/* ---------- plates: the only surface that holds text ---------------------- */

.plate { background: var(--surface); color: var(--on-plate); padding: var(--pad); }
.plate h3 { margin: 0 0 16px; font-family: Anton, sans-serif; font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: .01em; }
.plate p { margin: 0 0 16px; font-size: 20px; line-height: 1.6; max-width: 64ch; }
.plate p:last-child { margin-bottom: 0; }
.lbl {
  display: block; margin: 0 0 12px;
  font-size: 16px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-plate-2); font-variation-settings: "wght" 700, "wdth" 88;
}
/* a label that opens a new block after a paragraph takes the air of a section, not of a line */
.plate p + .lbl, .plate .facts + .lbl { margin-top: 24px; }

/* ---------- the imprint: the coin, its address, its links, and the count ---- */

.imprint { margin-top: var(--band); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.imprint > * { min-width: 0; }
.imprint > [data-imprint] { display: flex; }
.imprint > [data-imprint] > .plate { flex: 1; }

/* the coin's wordmark is printed INSIDE its plate, on a block of its own, never over the plate's edge */
.coinband {
  background: var(--paper); margin: 0 0 24px;
  padding: 32px 48px;                     /* a full em at the sides of the mark, more than half of one above it */
  display: flex; align-items: center; justify-content: center;
}
/* a block, not an inline run: an inline box is as tall as the face own ascent and descent, which would
   leave the mark nearer the edges of its block than it looks */
.coinmark {
  display: block; width: 100%; text-align: center;
  font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 48px; line-height: 1;
  letter-spacing: .02em; color: var(--ink);
}

.cafield { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.imprint .ca {
  display: flex; align-items: center;
  font-family: Sligoil, monospace; font-size: 20px; overflow-wrap: anywhere;
  background: var(--surface-2); color: var(--on-plate); border: 1px solid var(--rule-ink);
  padding: 16px 24px; min-height: 64px; user-select: all;
}
.imprint .ca.none { color: var(--on-plate-3); user-select: none; }

/* one row of equal links: the same height, padding and mark on every one of them */
.linkrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mark {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 12px 16px;
  background: var(--paper); color: var(--ink);
  font-size: 16px; letter-spacing: .04em; text-decoration: none; text-align: center;
  font-variation-settings: "wght" 600, "wdth" 92;
  border: 0; cursor: pointer;
}
.mark img { width: 24px; height: 24px; display: block; flex: none; }
.mark:hover { background: #1b1b1b; }
.mark:focus-visible { outline: 3px solid var(--on-plate); outline-offset: 3px; }
.mark[aria-disabled="true"] { background: var(--disabled); color: var(--on-plate-2); cursor: not-allowed; }
.mark[aria-disabled="true"] img { opacity: .55; }
/* a pair of calls to action inside an empty plate uses the same control, sized by its own words */
.marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.marks .mark { justify-content: flex-start; padding: 12px 24px; }

/* the count: one row height, one rule, one value style */
.edition { background: var(--surface); color: var(--on-plate); padding: var(--pad); }
.edition h3 { margin: 0 0 16px; font-family: Anton, sans-serif; font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: .01em; }
/* a long pair on a narrow sheet drops its value onto a second line instead of fraying both of them */
.edition .row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  position: relative; min-height: 64px; padding: 8px 0;
}
/* the divider between two counts is a drawn rule, not the edge of a box: the values keep the plate padding */
.edition .row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-ink); }
.edition .row:last-of-type::after { content: none; }
.edition .k {
  font-size: 16px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-plate-2); font-variation-settings: "wght" 700, "wdth" 88;
}
.edition .n { font-family: Sligoil, monospace; font-size: 20px; color: var(--on-plate); text-align: right; margin-left: auto; }
.edition .n.soft { color: var(--on-plate-3); }
.edition .note { margin: 24px 0 0; font-size: 16px; line-height: 1.6; color: var(--on-plate-2); }

/* ---------- controls: ink on paper, paper on ink. No accent carries a control ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 16px 32px;
  background: var(--surface); color: var(--on-plate);
  font-size: 20px; letter-spacing: .02em; font-variation-settings: "wght" 700, "wdth" 92;
  border: 0; cursor: pointer; text-decoration: none;
}
.btn.ghost { background: none; color: var(--ink); border: 1px solid var(--ink); }
.btn:hover { filter: brightness(.92); }
.btn.ghost:hover { background: var(--ink); color: var(--on-plate); filter: none; }
/* every control answers the press in its own ink and moves nothing: no transform, no reflow */
.btn:active:not(:disabled) { filter: brightness(.78); }
.btn.ghost:active { background: var(--ink); color: var(--on-plate); filter: none; }
.mark:active:not([aria-disabled="true"]) { background: #2e2e2e; }
.chip:active { border-color: var(--ink); color: var(--ink); }
.index a:active { background: #1b1b1b; }
.lrow:active { background: #141414; }
.btn:disabled, .btn[aria-disabled="true"] { background: #2a2a2a; color: var(--ink-3); cursor: not-allowed; filter: none; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* inside a plate the page is white, so the same button prints the other way round */
.plate .btn, .edition .btn { background: var(--paper); color: var(--ink); }
.plate .btn:hover { background: #1b1b1b; filter: none; }
.plate .btn.ghost { background: none; color: var(--on-plate); border-color: var(--on-plate); }
.plate .btn.ghost:hover { background: var(--on-plate); color: var(--surface); }
.plate .btn:focus-visible { outline-color: var(--on-plate); }

label {
  display: block; margin-bottom: 8px;
  font-size: 16px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); font-variation-settings: "wght" 600, "wdth" 88;
}
input[type="text"], input[type="url"], textarea, select {
  width: 100%; min-height: 64px; padding: 16px 24px;
  background: #0d0d0d; color: var(--ink); border: 1px solid var(--rule);
  font-family: Sligoil, monospace; font-size: 20px;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { min-height: 128px; font-family: Archivo, sans-serif; line-height: 1.6; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; border-color: var(--ink); }

.note { font-size: 16px; color: var(--ink-2); }
.plate .note { color: var(--on-plate-2); }
.risk { margin-top: 48px; font-size: 16px; color: var(--ink-3); max-width: 70ch; }

/* ---------- the run log --------------------------------------------------- */

.log { background: #0b0b0b; border: 1px solid var(--rule); padding: 24px; max-height: 416px; overflow: auto;
  font-family: Sligoil, monospace; font-size: 16px; line-height: 1.6; overscroll-behavior: contain; }
.log div { color: var(--ink-2); overflow-wrap: anywhere; }
.log div b { color: var(--ink); font-weight: 400; }

/* ---------- claims table -------------------------------------------------- */

.claims { border-top: 1px solid var(--rule); }
.claim {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 160px 160px 210px; gap: 24px;
  align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); min-height: 72px;
}
.claim .k { font-family: Sligoil, monospace; font-size: 16px; color: var(--ink-2); }
.claim .what { font-size: 20px; min-width: 0; overflow-wrap: anywhere; }
.claim .target, .claim .got { font-family: Sligoil, monospace; font-size: 20px; }
.claim .got.none { color: var(--ink-2); }

/* ---------- the split plates: a share and what it pays for are one pair ----- */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.shares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 24px; }
.share { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.share .pc { font-family: Anton, sans-serif; font-size: 32px; line-height: 1; }
.share .pc::after { content: "%"; font-size: 16px; margin-left: 2px; }
.share .of { font-size: 20px; line-height: 1.3; color: var(--on-plate-2); min-width: 0; }

/* ---------- the launch form and the plates that answer it ----------------- */

.step .row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.step .row.end { justify-content: flex-end; margin-top: 24px; }
.step .grow { flex: 1 1 420px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid2 .wide { grid-column: 1 / -1; }
.slot { margin-top: 24px; min-height: 112px; }

.plate.good { border-left: 12px solid var(--v-green); }
.plate.bad { border-left: 12px solid var(--v-red); }
.plate.wait { background: #121212; color: var(--ink-2); border-left: 12px solid var(--rule); }
.plate.wait p { color: var(--ink-2); }
.plate .meta { font-family: Sligoil, monospace; font-size: 16px; color: var(--on-plate-2); overflow-wrap: anywhere; }
.plate .why { font-size: 20px; color: var(--on-plate-2); }
.plate .facts { display: grid; gap: 12px; margin: 16px 0; }
.plate .facts > div { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.plate .facts .k { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-plate-2);
  min-width: 190px; font-variation-settings: "wght" 700, "wdth" 88; }
.plate .facts .v { font-size: 20px; overflow-wrap: anywhere; }
input[type="file"] { padding: 16px 24px; font-family: Archivo, sans-serif; font-size: 16px; }

/* ---------- field summaries, chips, the paper head ------------------------ */

/* however many fields the pad has, the row is complete: the tracks that have nothing collapse */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fieldrow .big { font-family: Anton, sans-serif; font-size: 48px; line-height: 1; margin: 0 0 12px; }
.fieldrow .big .pct { font-size: 20px; margin-left: 2px; }
.fieldrow p { font-size: 20px; line-height: 1.6; color: var(--on-plate-2); margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 24px;
  background: none; border: 1px solid var(--rule); color: var(--ink-2);
  font: inherit; font-size: 16px; letter-spacing: .1em; cursor: pointer;
  font-variation-settings: "wght" 600, "wdth" 88;
}
.chip .dot { width: 16px; height: 16px; flex: none; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--surface); color: var(--on-plate); border-color: var(--surface); }
.chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.paperhead { position: relative; }
.paperhead canvas { display: block; width: 180px; height: 180px; margin: 0 auto 16px; image-rendering: pixelated; }
.paperhead h1 { font-size: clamp(32px, 3.6vw, 72px); line-height: 1.05; max-width: 22ch; margin: 0 auto; }

.claim.head-row { color: var(--ink-2); font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
  min-height: 0; padding: 0 0 12px; font-variation-settings: "wght" 600, "wdth" 88; }
/* a verdict reads the same in a claims row as it does in the ledger: a dot, the word, its receipts */
.claim .v { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 16px;
  letter-spacing: .1em; font-variation-settings: "wght" 700, "wdth" 88; }
.claim .v .dot { width: 16px; height: 16px; flex: none; }
.claim .v a { color: inherit; letter-spacing: .02em; }
.claim.head-row .k, .claim.head-row .target, .claim.head-row .got { font-family: inherit; font-size: 16px; }
.claim .why { color: var(--ink-2); font-size: 16px; letter-spacing: 0; text-transform: none; }

/* ---------- the method's four steps --------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stepcard { display: flex; flex-direction: column; }
.stepcard img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.stepcard .plate { flex: 1; }
.btn.small { min-height: 48px; padding: 8px 16px; font-size: 16px; }
.qrow { align-items: center; }
.qrow .note { color: var(--ink-2); font-size: 16px; }

/* an empty state is a full row, not a paragraph with a hole beside it: the way out sits on the right */
.empty-plate { border-left: 12px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.empty-plate .etext > p:last-child { margin-bottom: 0; }
.empty-plate > .marks { margin-top: 0; flex-direction: column; align-items: stretch; min-width: 280px; }
@media (max-width: 1100px) {
  .empty-plate { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .empty-plate > .marks { flex-direction: row; min-width: 0; }
}

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

@media (max-width: 1360px) {
  :root { --gutter: 32px; }
  .head { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ident { align-items: flex-start; text-align: left; flex-direction: row; gap: 24px; flex-wrap: wrap; }
}

@media (max-width: 1100px) {
  .field { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lrow { grid-template-columns: 150px minmax(0, 1fr) 130px 170px; }
  .lrow .f, .lrow .cl { display: none; }
  .imprint, .split, .steps { grid-template-columns: minmax(0, 1fr); }
  .claim { grid-template-columns: 56px minmax(0, 1fr) 150px 150px; }
  .claim .got { display: none; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --band: 48px; --pad: 24px; }
  .sheet { padding-top: 24px; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masthead { margin-top: 48px; }
  .knock { letter-spacing: .24em; text-indent: .24em; font-size: 16px; padding: 12px 24px; }
  .vblock canvas { height: 190px; }
  .vblock .cap { padding: 24px; }
  .lrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .head-row { display: none; }
  .claim { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .linkrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step .row.end { justify-content: stretch; }
  .step .row.end .btn { flex: 1 1 auto; }
  .cafield { grid-template-columns: minmax(0, 1fr); }
  .paperhead canvas { width: 130px; height: 130px; }
}

/* on a narrow phone the field is one column: four names like REPRODUCED need their own width */
@media (max-width: 480px) {
  .field { grid-template-columns: minmax(0, 1fr); }
  .vblock canvas { height: 170px; }
  .linkrow { grid-template-columns: minmax(0, 1fr); }
  .vblock .cap .w { font-size: 16px; }
  .shares { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}