/* The Archivooor. One black sheet carrying a wall of saved text.
   Built to his collage: 81% black ground, bone ink, one amber, one green, everything flat. The
   only picture on the page is the cyanotype; every frame here is a hairline, every plate is type
   knocked out of its own fill, exactly as the reference does it. */

@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/PixelifySans-Bold.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --black: #000000;
  --ink: #d8d4c6; /* bone, the archived text: 14.4:1 on black */
  --mid: #9a958a; /* secondary: 7.0:1 */
  --dim: #837e70; /* separators, disabled, the quietest text allowed: measured 5.1:1 on black */
  --amber: #efd000; /* the archive's own voice: counted, the memo, the ticker */
  --green: #b5d700; /* agreement between crawlers */
  --rule: #262420;
  --rule-lit: #46412f;

  --page: 1120px;
  --gut: 24px;
  --f: "Space Mono", ui-monospace, monospace;
  --f-px: "Pixelify Sans", "Space Mono", monospace;

  --t-meta: 14px;
  --t-body: 15px;
  --t-val: 17px;
  --t-head: 20px;
  --t-name: 24px;
  --ls: 0.08em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font: 400 var(--t-body) / 1.6 var(--f);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

#net {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.sheet {
  position: relative;
  z-index: 1;
  width: min(var(--page), 100% - var(--gut) * 2);
  margin-inline: auto;
  padding-block: 20px 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amber);
  color: #000;
  padding: 10px 16px;
  font-size: var(--t-meta);
  z-index: 9;
}
.skip:focus {
  left: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ---- masthead: one line, one size, one baseline ------------------------------------------- */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  position: relative;
}
.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
}
.mark {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font: 400 var(--t-meta) / 1 var(--f);
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.mark__leaf {
  width: 22px;
  height: 22px;
  mix-blend-mode: screen;
  align-self: center;
  transform: translateY(1px);
}
.mark__name {
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.06em;
}
.ident {
  margin: 0;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--mid);
}
.ident b {
  color: var(--amber);
  font-weight: 400;
}

/* ---- the slot: the one control, and the four keys ------------------------------------------ */
.slot {
  padding-block: 12px 16px;
}
.find {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
}
.find::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule-lit);
}
.find:focus-within::after {
  background: var(--amber);
}
.find__cue {
  display: flex;
  align-items: center;
  padding: 0 14px 0 0;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}
.find__cue::after {
  content: " \00a0>";
  color: var(--dim);
}
.find__in {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: 400 var(--t-val) / 1.4 var(--f);
  padding: 13px 10px;
}
.find__in::placeholder {
  color: var(--dim);
}
.find__go {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  color: var(--mid);
  font: 400 var(--t-meta) / 1 var(--f);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  padding: 0 18px;
  min-height: 48px;
  cursor: pointer;
}
.find__go:hover,
.find__go:focus-visible {
  color: var(--amber);
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 26px;
  padding-top: 8px;
}
.key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mid);
}
.key__mk {
  color: var(--dim);
}
.key:hover,
.key:focus-visible {
  color: var(--ink);
}
.key.is-open {
  color: var(--amber);
}
.key.is-open .key__mk {
  color: var(--amber);
}

/* ---- the first screen: the newest line, and the coin --------------------------------------- */
.first {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 26px;
  align-items: stretch;
  padding-bottom: 24px;
}
.latest {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 236px;
  padding: 2px 0 0;
}

/* the six live figures: the product working, under the one display line */
.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: auto 0 0;
}
.figs__f {
  background: var(--black);
  padding: 16px 24px 16px;
  min-width: 0;
}
.figs dt {
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.figs dd {
  margin: 5px 0 0;
  font-family: var(--f);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.figs dd.is-lit {
  color: var(--amber);
}
.figs dd.is-zero {
  color: var(--dim);
}
.figs dd.is-none {
  color: var(--dim);
  font-family: var(--f);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  padding-block: 7px 6px;
}
.latest__eyebrow {
  margin: 0 0 11px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--dim);
}
.latest__quote {
  margin: 0;
  font-family: var(--f-px);
  font-weight: 700;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
  max-width: 19ch;
}
.latest__quote.is-long {
  font-size: clamp(23px, 2.3vw, 30px);
  max-width: 31ch;
}
.latest__meta {
  margin: 18px 0 0;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--mid);
}
.latest__meta a {
  color: var(--amber);
  text-decoration: none;
  position: relative;
}
.latest__meta a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
}

/* the plate: the one inverted block on the page, exactly as his collage inverts one */
.plate {
  background: var(--amber);
  color: #0a0900;
  padding: 16px 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.plate__tick {
  margin: 0;
  font-family: var(--f-px);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.plate__say {
  margin: 8px 0 0;
  font-size: var(--t-meta);
  line-height: 1.45;
  color: #3a3200;
}
.plate__caLabel {
  margin: 18px 0 5px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: #4a4000;
}
.plate__ca {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.45;
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
  color: #0a0900;
  user-select: all;
}
.plate__ca.is-empty {
  color: #4a4000;
  user-select: none;
}
.plate__row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.plate__copy,
.plate__scan {
  flex: 1 1 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #0a0900;
  color: #0a0900;
  font: 400 var(--t-meta) / 1 var(--f);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.plate__copy:hover:not(:disabled),
.plate__scan:not([aria-disabled="true"]):hover {
  background: #0a0900;
  color: var(--amber);
}
.plate__copy:disabled,
.plate__scan[aria-disabled="true"] {
  opacity: 0.62;
  cursor: default;
  pointer-events: none;
}
.plate__buy {
  margin-top: 10px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: #0a0900;
  color: var(--amber);
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.plate__buy:hover:not([aria-disabled="true"]) {
  background: #241f00;
}
.plate__buy[aria-disabled="true"] {
  opacity: 0.62;
  pointer-events: none;
}
.plate__marks {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.mk {
  flex: 1 1 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid #0a0900;
  color: #0a0900;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  text-decoration: none;
}
.mk img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0);
}
.mk:hover:not([aria-disabled="true"]) {
  background: #0a0900;
  color: var(--amber);
}
.mk:hover:not([aria-disabled="true"]) img {
  filter: none;
}
.mk[aria-disabled="true"] {
  opacity: 0.62;
  pointer-events: none;
}

/* ---- a band ---------------------------------------------------------------------------------- */
.band {
  padding-block: 28px 0;
  scroll-margin-top: 16px;
}
.band__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  position: relative;
}
.band__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rule-lit);
}
.band__title {
  margin: 0;
  font-size: var(--t-head);
  font-weight: 700;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--ink);
}
.band__note {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--mid);
  flex: 1 1 320px;
}

/* ---- the wall ---------------------------------------------------------------------------------
   Cells of different widths, rows always complete and every cell in a row the same height: his
   collage varies by WEIGHT and by the size of the type inside, not by ragged boxes. */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: 0;
  margin-top: 18px;
}
.cell {
  grid-column: span 1;
  background: var(--black);
  padding: 16px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 178px;
  text-align: left;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.cell:hover,
.cell:focus-visible {
  background: #0b0a07;
}
.cell--w2 {
  grid-column: span 2;
}
.cell__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cell__sym {
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--amber);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cell__stop {
  font-size: var(--t-meta);
  color: var(--dim);
  white-space: nowrap;
}
.cell__stop b {
  color: var(--green);
  font-weight: 400;
}
.cell__line {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.cell--w2 .cell__line {
  font-size: var(--t-body);
  -webkit-line-clamp: 4;
}
.cell__line.is-quote {
  font-family: var(--f-px);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.22;
  -webkit-line-clamp: 3;
}
.cell--w2 .cell__line.is-quote {
  font-size: 22px;
}
.cell__line.is-empty {
  color: var(--dim);
}
.cell__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 24px;
}
.cell__hash {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--t-meta);
  color: var(--dim);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* statuses: inverted blocks, the way his collage knocks letters out of a fill */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 9px 16px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--counted {
  background: var(--amber);
  color: #0a0900;
}
.tag--gone {
  background: var(--ink);
  color: #0a0900;
}
.tag--blocked {
  border: 1px solid var(--amber);
  color: var(--amber);
}
.tag--disputed {
  border: 1px solid var(--ink);
  color: var(--ink);
}
.tag--pending,
.tag--due,
.tag--waiting,
.tag--watching {
  border: 1px solid var(--dim);
  color: var(--mid);
}

.more {
  margin: 0;
  padding-top: 16px;
  text-align: center;
}
.more__btn {
  min-height: 48px;
  padding: 0 24px;
  background: transparent;
  border: 1px solid var(--rule-lit);
  color: var(--mid);
  font: 400 var(--t-meta) / 1 var(--f);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  cursor: pointer;
}
.more__btn:hover {
  color: var(--amber);
  border-color: var(--amber);
}

/* ---- one coin's record ------------------------------------------------------------------------ */
.rec__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
}
.rec__name {
  margin: 0;
  font-family: var(--f-px);
  font-weight: 700;
  font-size: var(--t-name);
  line-height: 1.15;
  color: var(--ink);
}
.rec__mint {
  margin: 6px 0 0;
  font-size: var(--t-meta);
  color: var(--dim);
  word-break: break-all;
  overflow-wrap: anywhere;
  max-width: 48ch;
}
.rec__links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rec__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--rule-lit);
  color: var(--mid);
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.rec__link:hover {
  color: var(--amber);
  border-color: var(--amber);
}
.rec__back {
  background: transparent;
  cursor: pointer;
  font-family: var(--f);
}

.stops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 20px;
}
.stop {
  background: var(--black);
  padding: 14px 26px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 150px;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.stop:hover,
.stop.is-open {
  background: #0c0b08;
}
.stop.is-open {
  box-shadow: inset 0 2px 0 0 var(--amber);
}
.stop__label {
  font-family: var(--f);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
}
.stop__when {
  font-size: var(--t-meta);
  color: var(--dim);
}
.stop__agree {
  font-size: var(--t-meta);
  color: var(--mid);
}
.stop__agree b {
  color: var(--green);
  font-weight: 400;
}
.stop__hash {
  font-size: var(--t-meta);
  color: var(--dim);
  overflow-wrap: anywhere;
  margin-top: auto;
  min-width: 0;
}

.shot {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: 0;
}
.shot__pic,
.shot__text {
  background: var(--black);
  padding: 16px 18px;
  min-width: 0;
}
.shot__pic img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-lit);
}
.shot__pic .none {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1366 / 900;
  border: 1px solid var(--rule);
  color: var(--dim);
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  background-image: url("/img/blank.webp");
  background-size: cover;
  background-position: center;
}
.shot__pic .none span {
  background: rgba(0, 0, 0, 0.78);
  padding: 10px 16px;
}
.lines {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-meta);
  line-height: 1.55;
  color: var(--ink);
}
.lines li {
  padding: 1px 0;
  overflow-wrap: anywhere;
}

.diff {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-meta);
  line-height: 1.55;
}
.diff li {
  display: flex;
  gap: 12px;
  padding: 2px 0;
}
.diff__op {
  flex: 0 0 14px;
  color: var(--dim);
}
.diff__t {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.diff li.is-out .diff__t {
  color: var(--dim);
  text-decoration: line-through;
}
.diff li.is-out .diff__op {
  color: var(--dim);
}
.diff li.is-in .diff__t {
  color: var(--amber);
}
.diff li.is-in .diff__op {
  color: var(--amber);
}
.diff li.is-same .diff__t {
  color: var(--mid);
}
.diff li.is-gap {
  min-height: 14px;
}
.diff li.is-gap .diff__op::after {
  content: "...";
}

.promises {
  margin: 0;
  padding: 0;
  list-style: none;
}
.promises li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-top: 0;
  position: relative;
}
.promises li + li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
}
.promises__mk {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: var(--t-meta);
}
.promises__q {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.promises__s {
  margin: 3px 0 0;
  font-size: var(--t-meta);
  color: var(--dim);
  letter-spacing: var(--ls);
  text-transform: uppercase;
}

.sub {
  margin: 26px 0 0;
  position: relative;
  padding-top: 14px;
}
.sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule-lit);
}
.sub__t {
  margin: 0 0 12px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--mid);
}
.sub__t b {
  color: var(--amber);
  font-weight: 400;
}

/* ---- crawlers ---------------------------------------------------------------------------------- */
.join {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: 0;
  margin-top: 18px;
}
.join__half {
  background: var(--black);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lbl {
  margin: 0 0 9px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--amber);
}
.lbl--gap {
  margin-top: 20px;
}
.say {
  margin: 0 0 14px;
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--mid);
}
.say--dim {
  color: var(--dim);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}
.join__wallet {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  min-height: 48px;
  padding: 0 20px;
  background: var(--amber);
  border: 1px solid var(--amber);
  color: #0a0900;
  font: 400 var(--t-meta) / 1 var(--f);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover {
  background: #fbe23a;
  border-color: #fbe23a;
}
.btn--quiet {
  background: transparent;
  color: var(--mid);
  border-color: var(--rule-lit);
  margin-top: 10px;
  align-self: flex-start;
}
.btn--quiet:hover {
  background: transparent;
  color: var(--amber);
  border-color: var(--amber);
}
.join__state {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--dim);
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.join__state.is-on {
  color: var(--green);
}
.token {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink);
  word-break: break-all;
  overflow-wrap: anywhere;
  background: #0d0c08;
  padding: 11px 16px;
  border: 1px solid var(--rule-lit);
  user-select: all;
}
.token.is-empty {
  color: var(--dim);
  user-select: none;
}
.cmds {
  margin: 0 0 14px;
  padding: 13px 16px;
  background: #0d0c08;
  border: 1px solid var(--rule-lit);
  font: 400 var(--t-meta) / 1.75 var(--f);
  color: var(--ink);
}
.cmds code {
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: block;
}

.board {
  margin-top: 26px;
  border: 1px solid var(--rule);
  border-top: 0;
  padding: 16px 18px 18px;
}
.board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.board__pot {
  margin: 0 0 9px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--mid);
}
.board__pot b {
  color: var(--amber);
  font-weight: 400;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-meta);
  margin-bottom: 12px;
}
.tbl th,
.tbl td {
  text-align: left;
  padding: 8px 10px 8px 0;
  position: relative;
}
.tbl th {
  font-weight: 400;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--dim);
}
.tbl thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 10px;
  bottom: 0;
  height: 1px;
  background: var(--rule);
}
.tbl tbody td {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tbl__n,
.tbl .tbl__n {
  width: 40px;
  color: var(--dim);
}
.tbl__r {
  text-align: right !important;
  padding-right: 0 !important;
}
.tbl__empty td {
  color: var(--dim);
  padding-top: 14px;
}
.tbl tr.is-me td {
  color: var(--amber);
}

/* ---- rules -------------------------------------------------------------------------------------- */
.steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
}
.steps li {
  display: flex;
  gap: 18px;
  padding: 11px 0;
  position: relative;
}
.steps li + li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
}
.steps__n {
  flex: 0 0 auto;
  font-family: var(--f);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--dim);
  width: 42px;
}
.steps__t {
  flex: 1 1 auto;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--mid);
  min-width: 0;
}
.steps__t b {
  color: var(--ink);
  font-weight: 400;
}

.money {
  margin-top: 30px;
  padding-top: 16px;
  position: relative;
}
.money::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule-lit);
}
.split {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.split li {
  background: var(--black);
  padding: 20px 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 118px;
}
.split__n {
  font-family: var(--f);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--amber);
}
.split__t {
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--mid);
}

.sheetfig {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 46px;
}
.sheetfig__img {
  display: block;
  width: 300px;
  height: 300px;
  object-fit: cover;
}
.sheetfig__cap {
  margin: 0;
  min-width: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.sheetfig__cap .say {
  font-size: var(--t-body);
  color: var(--mid);
  max-width: 62ch;
}
.risk {
  margin: auto 0 0;
  padding-top: 18px;
  font-size: var(--t-meta);
  color: var(--dim);
  max-width: 62ch;
}

/* ---- the reader ---------------------------------------------------------------------------------- */
.reader {
  width: min(880px, calc(100vw - 32px));
  max-height: 84vh;
  padding: 0;
  border: 1px solid var(--rule-lit);
  background: #060504;
  color: var(--ink);
  overflow: hidden;
}
.reader::backdrop {
  background: rgba(0, 0, 0, 0.84);
}
.reader__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  position: relative;
}
.reader__bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule-lit);
}
.reader__title {
  margin: 0;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--amber);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader__close {
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--rule-lit);
  color: var(--mid);
  font: 400 var(--t-meta) / 1 var(--f);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  cursor: pointer;
  flex: 0 0 auto;
}
.reader__close:hover {
  color: var(--amber);
  border-color: var(--amber);
}
.reader__body {
  padding: 18px 20px 22px;
  max-height: calc(84vh - 74px);
  overflow-y: auto;
  font-size: var(--t-meta);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}

/* ---- widths ------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root {
    --page: 1024px;
  }
}
@media (max-width: 1060px) {
  .join {
    grid-template-columns: minmax(0, 1fr);
  }
  .first {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .shot {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 820px) {
  .sheetfig__cap {
    min-height: 0;
  }
  .risk {
    margin-top: 18px;
  }
  .first {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .latest {
    min-height: 0;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .join {
    grid-template-columns: minmax(0, 1fr);
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split li {
    min-height: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }
  .split__n {
    width: 86px;
    flex: 0 0 86px;
  }
  .sheetfig {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .sheetfig__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 420px;
  }
}
@media (max-width: 820px) {
  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  :root {
    --gut: 16px;
  }
  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .figs__f {
    padding: 14px 20px 14px;
  }
  .figs dt {
    white-space: normal;
  }
  .figs dd {
    font-size: 18px;
  }
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cell--w2 {
    grid-column: span 1;
  }
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .keys {
    gap: 2px 20px;
  }
  .find {
    flex-wrap: wrap;
  }
  .find__in {
    flex: 1 1 100%;
    order: 3;
    /* the one line a phone has to read in full: at 17 px the last word of the hint is cut off */
    font-size: var(--t-body);
    padding: 12px 0;
    border-top: 1px solid var(--rule);
  }
  .find__go {
    border-left: 0;
    padding-right: 0;
    margin-left: auto;
  }
  .stops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .latest__quote {
    max-width: none;
  }
}

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

/* a cell that has nothing kept yet still says something true: the page it is about to open */
.cell__line.is-addr {
  display: flex;
  flex-direction: column;
  gap: 5px;
  -webkit-line-clamp: none;
}
.cell__what {
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--dim);
}
.cell__url {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 340px) {
  .figs {
    grid-template-columns: minmax(0, 1fr);
  }
  .split li {
    padding: 16px 22px 16px;
  }
  .split__n {
    font-size: 20px;
  }
}

/* the split lives on the coin plate: it is a fact about this coin, and it fills the plate to the
   same height as the figures beside it */
.plate__split {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.plate__splitLabel {
  margin: 0 0 7px;
  font-size: var(--t-meta);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: #4a4000;
}
.plate__split span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--t-meta);
  line-height: 1.5;
  color: #0a0900;
}
.plate__split span b {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}