/* dig. One browser window standing on a grey desktop, built to the 2000s fan page in art/ref.
   Flat: hard rules, solid fills, no radius, no shadow, no gradient except the title bar.

   Two scales only, and nothing off them:
   type   16 / 20 / 24 / 32 / 48, and the display steps 64 / 80 / 96
          (16 is the floor: smaller text is unreadable on a phone and the house checker refuses it)
   space  4 / 8 / 12 / 16 / 24 / 32 / 48
   A rule is 1px or 2px of ink, which is weight, not space. */

@font-face {
  font-family: "Tanker";
  src: url("/fonts/tanker.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/fonts/fragmentmono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --field: #dedddb;
  --paper: #ffffff;
  --ink: #141316;
  --blue: #1547fa;
  --tab: #1734d9;
  --link: #2543e2;
  --yellow: #fec70b;
  --orange: #ee7a12;
  --red: #d62913;
  --grey: #4a4a4c;
  --rule: 2px solid var(--ink);
  --hair: 1px solid var(--ink);
  --display: "Tanker", "Arial Narrow", Impact, sans-serif;
  --text: "Archivo", "Segoe UI", Tahoma, sans-serif;
  --mono: "Fragment Mono", "Consolas", ui-monospace, monospace;

  /* type */
  --t1: 16px;
  --t2: 20px;
  --t3: 24px;
  --t4: 32px;
  --t5: 48px;
  --d1: 48px;
  --d2: 64px;
  --d3: 80px;
  --d4: 96px;

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;

  --gap: var(--s2);
  --pad: var(--s8);
  --bar: var(--s12);
  --echo-shift: 2px;
  --page: 1720px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t2);
  line-height: 1.5;
  font-variation-settings: "wdth" 104;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ desk */

.desk {
  min-height: 100vh;
  padding: var(--s8);
  display: block;
}

/* ---------------------------------------------------------------- window */

.win {
  border: var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--s8) * 2);
  max-width: var(--page);
  margin: 0 auto;
}
.desk[data-win="full"] .win { min-height: 100vh; max-width: none; }

.win__bar {
  background: linear-gradient(180deg, #2a58fb 0%, var(--blue) 46%, #0f33cf 100%);
  border-bottom: var(--rule);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s2) var(--s2) var(--s2) var(--s6);
  min-height: var(--bar);
  cursor: default;
}

.win__mark {
  width: var(--s6);
  height: var(--s6);
  flex: 0 0 auto;
  background: var(--yellow);
  border: 2px solid #ffffff;
}

.win__title {
  color: #ffffff;
  font-size: var(--t2);
  font-weight: 700;
  font-variation-settings: "wdth" 96;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win__title b { font-weight: 900; }
.win__title span { opacity: 0.86; font-weight: 500; }

.win__keys {
  margin-left: auto;
  display: flex;
  gap: var(--s1);
  flex: 0 0 auto;
}

.key {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--ink);
  background: #f4f4f2 url("/img/keys.png") no-repeat;
  background-size: 102px 30px;
  cursor: pointer;
  image-rendering: pixelated;
}
.key--min { background-position: 0 0; }
.key--max { background-position: -34px 0; }
.key--close { background-position: -68px 0; }
.key:hover { background-color: var(--yellow); }
.key:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ strip */

.strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: var(--rule);
  background: var(--paper);
}

.strip__cell {
  appearance: none;
  border: 0;
  border-right: var(--hair);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t1);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  min-height: var(--bar);
  padding: var(--s3) var(--s4);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip__cell:last-child { border-right: 0; }
.strip__cell:hover { background: var(--yellow); }
.strip__cell:active { background: var(--orange); }
.strip__cell[aria-current="page"] {
  background: var(--ink);
  color: var(--yellow);
}
.strip__cell[aria-current="page"]:hover,
.strip__cell[aria-current="page"]:active { background: var(--ink); color: var(--yellow); }

/* ------------------------------------------------------------------- body */

.win__body {
  padding: var(--gap);
  display: grid;
  gap: var(--gap);
  flex: 1 1 auto;
  align-content: start;
  min-width: 0;
}

.station[hidden] { display: none; }
.station {
  display: grid;
  gap: var(--gap);
  min-width: 0;
}

/* --------------------------------------------------------------- the cell */

.cell {
  position: relative;
  border: var(--rule);
  background: var(--paper);
  /* the tab plate is 42px tall and a 48px headline stands above its own line box */
  padding: calc(var(--s12) + var(--s2)) var(--pad) var(--pad);
  min-width: 0;
}

.cell__tab {
  position: absolute;
  top: -2px;
  left: -2px;
  background: var(--tab);
  color: #ffffff;
  font-size: var(--t1);
  font-weight: 700;
  line-height: 1.5;
  padding: var(--s2) var(--s4);
  border: 2px solid var(--ink);
  border-left: 0;
  border-top: 0;
  letter-spacing: 0.02em;
  max-width: calc(100% - var(--s4));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell__tab--yellow { background: var(--yellow); color: var(--ink); }
.cell__tab--red { background: var(--red); }

.cell--flat { padding: var(--pad); }

/* echo headline: the word twice, the ghost barely offset, the way his boxes shout */
.echo {
  position: relative;
  margin: 0 0 var(--s4);
  padding-right: var(--s2);
  font-size: var(--t5);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.01em;
  color: var(--ink);
  isolation: isolate;
  overflow-wrap: break-word;
}
.echo span {
  position: absolute;
  left: var(--echo-shift);
  top: calc(var(--echo-shift) * -1);
  right: var(--s2);
  z-index: -1;
  color: var(--blue);
  pointer-events: none;
}
.echo--yellow span { color: var(--yellow); }
.echo--orange span { color: var(--orange); }
.echo--red span { color: var(--red); }
.echo--small { font-size: var(--t4); }

.hl {
  position: relative;
  z-index: 0;
  padding: 0 var(--s1);
  --mark: var(--yellow);
}
.hl::before {
  content: "";
  position: absolute;
  inset: -1px 0 -2px;
  background: var(--mark);
  z-index: -1;
}
.hl--blue { --mark: var(--link); color: #ffffff; }
.hl--orange { --mark: var(--orange); color: #ffffff; }
.hl--red { --mark: var(--red); color: #ffffff; }
.coin__lines p, .step div, .lead { isolation: isolate; }

.lead { margin: 0 0 var(--s3); font-size: var(--t2); }
.note { color: var(--grey); font-size: var(--t1); margin: var(--s3) 0 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: var(--t1); letter-spacing: -0.01em; }

/* ------------------------------------------------------- home: two columns */

.row2 {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: var(--gap);
  align-items: stretch;
}

.col {
  display: grid;
  gap: var(--gap);
  min-width: 0;
  align-content: start;
}

/* the picture panel: the find of the day, with the two dates printed on it */
.find {
  border: var(--rule);
  background: var(--paper);
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.find__plate {
  position: relative;
  border-bottom: var(--rule);
  background: #e7e6e3;
  overflow: hidden;
  min-height: 304px;
}

.find__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.stamp {
  position: absolute;
  padding: var(--s3) var(--s4);
  font-size: var(--t1);
  font-weight: 700;
  line-height: 1.25;
  border: 2px solid var(--ink);
  max-width: 54%;
  margin: 0;
}
.stamp b { display: block; font-size: var(--t1); font-family: var(--mono); font-weight: 400; }
.stamp--machine { top: var(--s4); left: var(--s4); background: var(--paper); color: var(--ink); }
.stamp--human { bottom: var(--s4); right: var(--s4); background: var(--red); color: #ffffff; border-color: var(--ink); }
.stamp--gap {
  top: var(--s4);
  right: var(--s4);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t3);
  line-height: 1.1;
  padding: var(--s3) var(--s6);
}

.find__caption {
  padding: var(--s6) var(--s8);
  display: grid;
  gap: var(--s1);
}
.find__name {
  font-family: var(--display);
  font-size: var(--d1);
  line-height: 1;
  margin: 0;
  overflow-wrap: anywhere;
}

/* the coin card: the identity block under the picture, where the links live */
.coin {
  border: var(--rule);
  background: var(--paper);
  padding: var(--s8);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.coin__name {
  font-family: var(--display);
  font-size: var(--d4);
  line-height: 1;
  margin: 0;
  overflow-wrap: anywhere;
}
.coin__name i { font-style: normal; color: var(--red); }

.coin__lines { display: grid; gap: var(--s2); font-size: var(--t2); }
.coin__lines p { margin: 0; padding-right: var(--s2); }

/* the split of the fees: three plates of one size, not a sentence with colours in it */
.splitline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}
.splitpart {
  border: var(--rule);
  padding: var(--s3) var(--s6);
  display: grid;
  gap: var(--s1);
  align-content: start;
  min-width: 0;
  font-size: var(--t2);
}
.splitpart b { font-family: var(--display); font-size: var(--t3); line-height: 1.1; }
.splitpart--rewards { background: var(--yellow); color: var(--ink); }
.splitpart--burn { background: var(--ink); color: #ffffff; }
.splitpart--work { background: var(--paper); color: var(--ink); }

.addr {
  border: var(--hair);
  background: #f3f3f1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
}
.addr code {
  font-family: var(--mono);
  font-size: var(--t1);
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
  display: flex;
  align-items: center;
  padding: var(--s3) var(--s4);
  min-height: var(--s12);
}
.addr--empty code { color: var(--grey); }
.addr .btn { border: 0; border-left: var(--hair); }

.btn {
  appearance: none;
  font-family: var(--text);
  font-size: var(--t2);
  font-weight: 700;
  min-height: var(--s12);
  padding: var(--s3) var(--s6);
  border: var(--rule);
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--yellow); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: #e7e6e3; color: var(--grey); cursor: not-allowed; }
.btn--wide { width: 100%; }
.btn--blue { background: var(--link); color: #ffffff; }
.btn--blue:hover { background: var(--ink); color: #ffffff; }

.marks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}
.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--s12);
  min-width: 0;
  padding: var(--s3) var(--s4);
  border: var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t1);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.mark span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mark img { width: var(--s6); height: var(--s6); object-fit: contain; flex: 0 0 auto; }
.mark:hover { background: var(--yellow); }
.mark[aria-disabled="true"] { background: #e7e6e3; color: var(--grey); pointer-events: none; }
.mark[aria-disabled="true"] img { opacity: 0.45; }

.risk { font-size: var(--t1); color: var(--grey); margin: 0; }

/* --------------------------------------------------------------- the score */

.split { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: var(--s6); align-items: start; }
.plate { border: var(--hair); display: block; width: 100%; height: auto; }
.score__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
}
.score__side { display: grid; gap: var(--s1); min-width: 0; }
.score__num {
  font-family: var(--display);
  font-size: var(--d3);
  line-height: 0.9;
}
.score__num--machine { color: var(--grey); }
.score__label { font-size: var(--t1); font-weight: 700; }
.band {
  display: flex;
  height: var(--s6);
  border: var(--hair);
  margin-top: var(--s4);
  background: #f3f3f1;
}
.band__humans { background: var(--yellow); }
.band--empty { background: repeating-linear-gradient(45deg, #efeeec 0 8px, #e2e1de 8px 16px); }
.band__machine { background: var(--ink); }

/* ------------------------------------------------------------------- lists */

.rows { display: grid; min-width: 0; }
.rows > * { position: relative; min-width: 0; }
.rows > * + *::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ink);
}

/* One grammar for every row: a text column that may shrink to nothing, mono columns of
   their own width, and the tag in a column of its own so nothing ever runs under it. */
.row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 112px;
  gap: var(--s4);
  padding: var(--s3) 0;
  align-items: baseline;
  font-size: var(--t1);
  min-width: 0;
}
.row time, .row .row__when {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.row__what { min-width: 0; overflow-wrap: anywhere; }
.row__what a { text-decoration: underline; }
.row__tag {
  font-size: var(--t1);
  font-weight: 700;
  padding: var(--s2) var(--s4);
  border: var(--hair);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  align-self: start;
  min-width: 0;
}
.row__tag--machine { background: #f3f3f1; }
.row__tag--human { background: var(--yellow); }
.row__tag--open { background: var(--orange); color: #ffffff; }
.row__tag--paid { background: var(--link); color: #ffffff; }
.row__tag--rejected { background: #f3f3f1; color: var(--grey); }

/* an article row: the title, the date it proved, the platform, who holds it */
.rows--articles .row {
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 168px) 112px;
}
/* the rows that explain the shape of an article before the first one exists */
.row--note { grid-template-columns: minmax(0, 1fr) 112px; }

.empty {
  border-left: var(--s3) solid var(--yellow);
  padding: var(--s6);
  font-size: var(--t2);
  background: #f3f3f1;
  margin: 0;
}

/* --------------------------------------------------------------- the pot */

.pot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s8);
  align-items: start;
}
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.chip {
  border: var(--rule);
  padding: var(--s6) var(--s8);
  display: grid;
  gap: var(--s1);
  align-content: start;
  min-width: 0;
}
.chip b { font-family: var(--display); font-size: var(--t4); line-height: 1.1; }
.chip span { font-size: var(--t1); }
.chip--rewards { background: var(--yellow); }
.chip--burn { background: var(--ink); color: #ffffff; }
.chip--work { background: var(--paper); }

.pot__figure { display: grid; gap: var(--s1); min-width: 0; align-content: start; }
.pot__sol { font-family: var(--display); font-size: var(--d2); line-height: 1; }
.pot__figure .note { margin: 0; }

/* ------------------------------------------------------ how it works band */

.how { display: grid; gap: var(--gap); }
/* the kicker and the title start on the same vertical line as the text inside a panel:
   the panel rule is 2px, so this padding carries it too */
.how__head { display: grid; gap: var(--s2); padding: var(--s2) calc(var(--s8) + 2px) 0; }
.how__kicker { font-size: var(--t2); margin: 0; }
.how__title {
  margin: 0;
  font-size: var(--t4);
  font-weight: 900;
  letter-spacing: 0.04em;
  font-variation-settings: "wdth" 112;
  text-transform: none;
  overflow-wrap: break-word;
}
.how__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

.steps { display: grid; gap: var(--s3); }
.step {
  display: grid;
  grid-template-columns: var(--s8) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  font-size: var(--t2);
}
.step b {
  font-family: var(--display);
  font-size: var(--t4);
  line-height: 1;
  color: var(--red);
}

.formulas { display: grid; gap: var(--s3); }
.formula {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--s4);
  font-size: var(--t1);
  padding-top: var(--s3);
  align-items: baseline;
  min-width: 0;
}
/* the rule between two lines is drawn, never a border: a border would make every line its own box */
.formula + .formula::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ink);
}
.formula b { font-weight: 700; }
.formula code { font-family: var(--mono); font-size: var(--t1); overflow-wrap: anywhere; min-width: 0; }

/* ----------------------------------------------------------- diggers band */

.band2 { display: grid; grid-template-columns: 45fr 55fr; gap: var(--gap); }

.stack {
  border: var(--rule);
  background: var(--paper);
  padding: var(--s8) var(--pad);
  display: grid;
  align-content: center;
  gap: var(--s1);
  min-width: 0;
}
.stack span {
  font-family: var(--display);
  font-size: var(--d1);
  line-height: 1.1;
  display: block;
  overflow-wrap: anywhere;
}
.stack span:nth-child(1) { color: var(--yellow); margin-left: 0; }
.stack span:nth-child(2) { color: var(--link); margin-left: var(--s3); }
.stack span:nth-child(3) { color: var(--ink); margin-left: var(--s6); }

.names {
  border: var(--rule);
  background: var(--paper);
  padding: var(--s6) var(--pad);
  font-size: var(--t2);
  line-height: 1.6;
  min-width: 0;
}
.names p { margin: 0 0 var(--s3); }
.names p:last-child { margin-bottom: 0; }
.names b { font-weight: 700; }
.names a { font-family: var(--mono); font-size: var(--t1); text-decoration: underline; }

/* ------------------------------------------------------------- the forms */

.form { display: grid; gap: var(--s4); max-width: 760px; }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--t1); font-weight: 700; }
.field input,
.field select,
.field textarea {
  font-family: var(--mono);
  font-size: var(--t1);
  padding: var(--s3) var(--s4);
  border: var(--rule);
  background: var(--paper);
  color: var(--ink);
  min-height: var(--s12);
  width: 100%;
}
.field textarea { min-height: 96px; font-family: var(--text); }
.field .hint { font-size: var(--t1); color: var(--grey); }

.status {
  border: var(--hair);
  padding: var(--s4);
  font-size: var(--t1);
  background: #f3f3f1;
  min-height: var(--s12);
}
.status--ok { background: var(--yellow); }
.status--bad { background: #ffe3de; }

/* --------------------------------------------------------------- article */

.article { display: grid; grid-template-columns: 58fr 42fr; gap: var(--gap); align-items: start; }
.infobox { display: grid; gap: var(--s3); }
.infobox .formula { grid-template-columns: 136px minmax(0, 1fr); }
.footnotes { display: grid; gap: var(--s2); font-size: var(--t1); }
.footnotes li { overflow-wrap: anywhere; }
.history { display: grid; }
.history .row { grid-template-columns: 112px minmax(0, 1fr) 112px; }

.figure { border: var(--hair); margin: 0 0 var(--s4); background: #f3f3f1; }
.figure img { display: block; width: 100%; max-height: 416px; object-fit: contain; }
.figure__credit { margin: 0; padding: var(--s3) var(--s4); font-size: var(--t1); color: var(--grey); border-top: var(--hair); }
.sources__head { margin: var(--s6) 0 var(--s3); font-size: var(--t2); }
.prose { font-size: var(--t2); }
.prose p { margin: 0 0 var(--s3); }
.prose p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ closed state */

.restore {
  display: none;
  margin: 0 auto;
  background: var(--paper);
  border: var(--rule);
  padding: var(--s8) var(--s12);
  font-family: var(--display);
  font-size: var(--d1);
  cursor: pointer;
}
.restore:hover { background: var(--yellow); }
.desk[data-win="closed"] .win { display: none; }
.desk[data-win="closed"] .restore { display: block; }
.desk[data-win="full"] { padding: 0; }
.desk[data-win="min"] .strip,
.desk[data-win="min"] .win__body { display: none; }
.desk[data-win="min"] .win { min-height: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: var(--s3);
  top: var(--s3);
  z-index: 9;
  background: var(--yellow);
  border: var(--rule);
  padding: var(--s3) var(--s4);
  font-weight: 700;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1240px) {
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .article { grid-template-columns: minmax(0, 1fr); }
  .coin__name { font-size: var(--d3); }
}

@media (max-width: 1024px) {
  .pot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

@media (max-width: 900px) {
  .desk { padding: var(--s4); }
  .win { min-height: calc(100vh - var(--s4) * 2); }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip__cell:nth-child(3) { border-right: 0; }
  .strip__cell:nth-child(-n + 3) { border-bottom: var(--hair); }
  .how__pair { grid-template-columns: minmax(0, 1fr); }
  .band2 { grid-template-columns: minmax(0, 1fr); }
  .rows--articles .row { grid-template-columns: minmax(0, 1fr) 112px; row-gap: var(--s1); }
  .rows--articles .row .row__when { grid-column: 1; }
}

@media (max-width: 760px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__cell { white-space: normal; padding: var(--s3); border-right: var(--hair); border-bottom: 0; }
  .strip__cell:nth-child(2n) { border-right: 0; }
  .strip__cell:not(:nth-last-child(-n + 2)) { border-bottom: var(--hair); }
  .win__date { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .plate { max-width: 280px; }
  .splitline { grid-template-columns: minmax(0, 1fr); }
  .chips { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .desk { padding: var(--s2); }
  .win { min-height: calc(100vh - var(--s2) * 2); }
  .win__bar { padding: var(--s2) var(--s2) var(--s2) var(--s3); gap: var(--s3); }
  .win__title { font-size: var(--t1); }
  .coin__name { font-size: var(--d2); }
  .echo { font-size: var(--t4); }
  .echo--small { font-size: var(--t3); }
  .score__num { font-size: var(--d2); }
  .find__name { font-size: var(--t4); }
  .how__title { font-size: var(--t3); }
  .stack span { font-size: var(--t4); }
  .pot__sol { font-size: var(--d1); }
  .restore { font-size: var(--t4); padding: var(--s6) var(--s8); }
  .row, .rows--articles .row, .row--note, .history .row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
  .row__tag { justify-self: start; }
  .row time, .row .row__when { grid-column: 1; }
  /* on a phone the plates stand under each other: pinned to the corners they would cover each other */
  .stamp { max-width: 62%; padding: var(--s3) var(--s4); }
  .stamp--machine { top: var(--s3); left: var(--s3); }
  .stamp--gap { top: 104px; right: var(--s3); font-size: var(--t2); padding: var(--s3) var(--s6); max-width: 46%; }
  .stamp--human { bottom: var(--s3); right: var(--s3); max-width: 72%; }
  .formula { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .cell__tab { letter-spacing: 0; }
}

@media (max-width: 420px) {
  .marks { grid-template-columns: minmax(0, 1fr); }
  .coin__name { font-size: var(--d1); }
}

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