/* The Mother Pair. Everything here comes from his three creatives, measured in DESIGN-NOTES.md:
   the flat blue field #A4D9FD (71% of both the avatar and the banner), the sticker grammar (a
   cream ring, a dark ring, a flat blue shadow), the right angle wires #4175A7 that join his
   dolls, and the dither of the interior. Three faces, three jobs: his pixel caps for names and
   heads, a rounded sans for sentences, a mono for values. */

@font-face {
  font-family: "Pixeloid";
  src: url("/fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pixeloid";
  src: url("/fonts/PixeloidSans.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo";
  src: url("/fonts/Baloo2-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("/fonts/Sligoil-Micro.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("/fonts/Sligoil-MicroBold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* the inks, measured off his files */
  --blue: #a4d9fd;
  --blue-deep: #7fbde8;      /* the shadow under every one of his dolls */
  --ink: #241109;            /* the dark ring, and every word on the page */
  --cream: #fdf8e4;          /* the halo ring, and the inside of every card */
  --cream-deep: #f1e7c8;
  --wire: #4175a7;           /* the connectors on his banner: lines only, 3.4:1 */
  --wire-ink: #2d5b84;       /* the same blue darkened to 5.1:1, for small labels */
  --red: #b80106;
  --gold: #f2b33d;

  /* the scale, nothing off it: 16 20 24 32 48 72 for text, 18 27 36 54 72 for the pixel face */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --display: 48px;
  --head: 27px;
  --body: 16px;
  --lede: 20px;
  --sheet: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --ring: 4px;               /* the dark ring of a sticker */
  --drop: 8px;               /* how far his shadow sits down and to the right */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font: 400 var(--body)/1.55 "Baloo", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  overflow-x: hidden;
}

img { image-rendering: pixelated; }

.sheet {
  width: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- the running band: four equal columns, a label over a value ----------- */
.band {
  background: var(--cream);
  border-bottom: var(--ring) solid var(--ink);
  /* the interior's ordered dither, the one texture on the page */
  background-image:
    linear-gradient(45deg, rgba(164, 217, 253, .5) 25%, transparent 25%, transparent 75%, rgba(164, 217, 253, .5) 75%),
    linear-gradient(45deg, rgba(164, 217, 253, .5) 25%, transparent 25%, transparent 75%, rgba(164, 217, 253, .5) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
.band-line {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.band-item { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.band-item .k {
  font: 600 16px/1.2 "Baloo", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wire-ink);
}
.band-item b {
  font: 700 24px/1.1 "Sligoil", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---- the first screen ----------------------------------------------------- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-12);
  padding: var(--sp-12) 0 0;
  align-items: start;
}
.head-left { min-width: 0; }

.wordmark-img { display: block; width: 340px; max-width: 100%; height: auto; margin: 0 0 var(--sp-6); }

.chip {
  /* inline-block, not flex: the issue line is one sentence, and a flex gap would pull its words apart */
  display: inline-block;
  min-height: 48px;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  line-height: 1.35;
  background: var(--cream);
  color: var(--ink);
  border: var(--ring) solid var(--ink);
  box-shadow: var(--drop) var(--drop) 0 var(--blue-deep);
  font: 700 18px/1 "Pixeloid", ui-monospace, monospace;
  text-decoration: none;
}
.chip b { font-weight: 700; color: var(--red); }
.chip .nowrap { white-space: nowrap; }
.chip .dot { color: var(--wire-ink); }

.kicker {
  margin: var(--sp-6) 0 var(--sp-3);
  font: 600 16px/1.3 "Baloo", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wire-ink);
}

.display {
  margin: 0;
  max-width: 22ch;
  font: 600 var(--display)/1.15 "Baloo", sans-serif;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lede { margin: var(--sp-6) 0 0; max-width: 54ch; font-size: var(--lede); line-height: 1.5; }
.lede-small { margin: 0 0 var(--sp-6); max-width: 62ch; font-size: 16px; line-height: 1.6; }

.head-right { display: grid; gap: var(--sp-6); justify-items: center; width: 100%; }
.mark { display: block; width: 100%; }
.mark-doll { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto; }

.next {
  width: 100%;
  background: var(--cream);
  border: var(--ring) solid var(--ink);
  box-shadow: var(--drop) var(--drop) 0 var(--blue-deep);
  padding: var(--sp-4) var(--sp-6);
  text-align: center;
}
.label {
  margin: 0 0 var(--sp-2);
  font: 600 16px/1.3 "Baloo", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wire-ink);
}
.numeral { margin: 0; font: 700 24px/1.1 "Sligoil", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.figures { display: none; margin: 0; }

/* his wire is the only rule on the page */
.rule { border: 0; border-top: var(--ring) solid var(--wire); margin: var(--sp-12) 0 0; }

/* ---- the index ------------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-8) 0 0; }
.chips .chip:hover, .chips .chip:focus-visible {
  background: #fff;
  box-shadow: var(--sp-1) var(--sp-1) 0 var(--blue-deep);
  transform: translate(var(--sp-1), var(--sp-1));
}
.chips .chip:active { box-shadow: none; transform: translate(var(--drop), var(--drop)); }

/* ---- blocks --------------------------------------------------------------- */
.block { margin-top: var(--sp-12); }
.block:last-child { margin-bottom: var(--sp-12); }

/* a card is one of the interior's framed openings: cream inside a dark frame on the blue */
.card, .black {
  background: var(--cream);
  border: var(--ring) solid var(--ink);
  box-shadow: var(--drop) var(--drop) 0 var(--blue-deep);
  padding: var(--sp-8);
  color: var(--ink);
}
.block-head, .card-head, .green-head {
  margin: 0 0 var(--sp-4);
  font: 700 var(--head)/1.15 "Pixeloid", ui-monospace, monospace;
  color: var(--ink);
}
.block-note, .card-note { margin: 0 0 var(--sp-6); max-width: 62ch; font-size: 16px; line-height: 1.6; }
.block-note.small { margin: var(--sp-6) 0 0; }
.black .label, .card .label { color: var(--wire-ink); margin-top: var(--sp-6); }
.black .label:first-child, .card .label:first-child { margin-top: 0; }

/* ---- the tree: his own field, his own wires ------------------------------- */
#tree { background: transparent; border: 0; box-shadow: none; padding: 0; }
.tree-frame { position: relative; margin-top: var(--sp-4); }
#tree-canvas { display: block; width: 100%; height: auto; cursor: default; }
#tree-canvas.on-doll { cursor: pointer; }
.tree-empty { margin: 0; padding: var(--sp-12) 0; text-align: center; font-size: 16px; color: var(--wire-ink); }
.tree-frame.has-children .tree-empty { display: none; }

/* ---- tables --------------------------------------------------------------- */
.table-wrap { width: 100%; }
.rows { width: 100%; border-collapse: collapse; font-size: 16px; }
.rows tr { position: relative; }
.rows tbody tr::after, .rows thead tr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wire); opacity: .5;
}
.rows thead tr::after { height: var(--ring); opacity: 1; }
.rows th, .rows td { text-align: left; padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; vertical-align: top; }
.rows th {
  font: 600 16px/1.3 "Baloo", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wire-ink);
  white-space: nowrap;
}
.rows .num, .rows td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rows td.num { font-family: "Sligoil", ui-monospace, monospace; }
.rows tbody tr:hover { background: rgba(255, 255, 255, .45); }
.rows a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rows a:hover, .rows a:focus-visible { color: var(--red); }
.rows .empty td { color: var(--wire-ink); }
.rows .copy-row td:first-child::after { content: " copy"; font-size: 16px; color: var(--wire-ink); }

.tag {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--blue-deep);
  font: 700 16px/1.4 "Pixeloid", ui-monospace, monospace;
}
.tag.off { background: var(--cream-deep); color: var(--wire-ink); }

/* ---- the mint and the keys ------------------------------------------------- */
.mint-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-4); }
.mint {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: var(--ring) solid var(--ink);
  background: #fff;
  font: 400 16px/1.5 "Sligoil", ui-monospace, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: var(--ring) solid var(--ink);
  background: var(--red);
  color: var(--cream);
  box-shadow: var(--drop) var(--drop) 0 var(--blue-deep);
  font: 700 18px/1 "Pixeloid", ui-monospace, monospace;
  text-decoration: none;
  cursor: pointer;
}
.key:hover:not(:disabled), .key:focus-visible:not(:disabled) {
  background: #d4040a;
  box-shadow: var(--sp-1) var(--sp-1) 0 var(--blue-deep);
  transform: translate(var(--sp-1), var(--sp-1));
}
.key:active:not(:disabled) { box-shadow: none; transform: translate(var(--drop), var(--drop)); }
.key:disabled, .key[aria-disabled="true"] {
  background: var(--cream-deep); color: var(--wire-ink); border-color: var(--wire-ink);
  box-shadow: none; transform: none; cursor: not-allowed;
}
.key.wide { margin-top: var(--sp-6); width: 100%; }

.copied { margin: var(--sp-3) 0 0; min-height: 24px; font-size: 16px; color: var(--wire-ink); }

.marks { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.mark-key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: var(--ring) solid var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--drop) var(--drop) 0 var(--blue-deep);
  font: 700 18px/1 "Pixeloid", ui-monospace, monospace;
  text-decoration: none;
}
.mark-key img { display: block; width: auto; height: 24px; image-rendering: auto; }
.mark-key:hover, .mark-key:focus-visible {
  background: var(--cream);
  box-shadow: var(--sp-1) var(--sp-1) 0 var(--blue-deep);
  transform: translate(var(--sp-1), var(--sp-1));
}
.mark-key:active { box-shadow: none; transform: translate(var(--drop), var(--drop)); }
.mark-key[aria-disabled="true"] { background: var(--cream-deep); color: var(--wire-ink); box-shadow: none; pointer-events: none; }
.mark-key[aria-disabled="true"] img { opacity: .45; }

/* ---- sunday ---------------------------------------------------------------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-12); }
.candidates, .locks { margin: 0; padding: 0; list-style: none; }
.candidates li, .locks li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3) 0;
  font-size: 16px;
}
.candidates li::after, .locks li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wire); opacity: .45;
}
.candidates .who { font-weight: 600; }
.candidates .why, .locks .why { color: var(--wire-ink); }
.candidates a, .locks a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.candidates a:hover, .locks a:hover { color: var(--red); }
.candidates .empty, .locks .empty { color: var(--wire-ink); }

/* ---- steps ---------------------------------------------------------------- */
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); font-size: 16px; line-height: 1.6; }
.steps b { font: 700 18px/1.5 "Pixeloid", ui-monospace, monospace; color: var(--red); }

.rules-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-12); }
.rules-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-content: start; }
.rules-steps b { grid-row: span 2; font: 700 var(--head)/1 "Pixeloid", ui-monospace, monospace; color: var(--red); }
.rule-head { font-weight: 600; font-size: var(--lede); }
.rules-steps span:last-child { font-size: 16px; line-height: 1.6; }

/* ---- mine ------------------------------------------------------------------ */
.mine-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.mine-form .label { margin: 0; }
.mine-form input {
  flex: 1 1 320px;
  min-width: 0;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: var(--ring) solid var(--ink);
  background: #fff;
  color: var(--ink);
  font: 400 16px/1.4 "Sligoil", ui-monospace, monospace;
}
.mine-form input::placeholder { color: var(--wire-ink); }
.mine-error { margin: var(--sp-3) 0 0; min-height: 24px; font-size: 16px; color: var(--wire-ink); }
.mine-out[hidden] { display: none; }
.mine-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin: var(--sp-6) 0 0; }
.mine-out div { position: relative; padding-top: var(--sp-4); }
.mine-out div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wire); }
.mine-out dt { font: 600 16px/1.3 "Baloo", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--wire-ink); }
.mine-out dd { margin: var(--sp-2) 0 0; font: 700 24px/1.1 "Sligoil", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.mine-list { margin: var(--sp-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.mine-list li { position: relative; padding-top: var(--sp-4); font-size: 16px; }
.mine-list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wire); opacity: .45; }
.mine-list a { color: var(--ink); text-underline-offset: 3px; }

#show-all { margin-top: var(--sp-6); background: var(--cream); color: var(--ink); }
#show-all:hover, #show-all:focus-visible { background: #fff; }
#show-all[hidden] { display: none; }

/* ---- shared ---------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, canvas:focus-visible {
  outline: var(--ring) solid var(--red);
  outline-offset: var(--sp-1);
}

/* ---- one child's record ------------------------------------------------------ */
.band-back { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.band-back:hover, .band-back:focus-visible { color: var(--red); }
.child-art { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto; }
.child-art.logo {
  width: 180px; height: 180px;
  object-fit: cover;
  border: var(--ring) solid var(--ink);
  background: #fff;
  box-shadow: var(--drop) var(--drop) 0 var(--blue-deep);
  image-rendering: auto;
}
.record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); margin: 0; }
.record div { position: relative; padding-top: var(--sp-4); min-width: 0; }
.record div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wire); }
.record dt { font: 600 16px/1.3 "Baloo", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--wire-ink); }
.record dd { margin: var(--sp-2) 0 0; font: 700 20px/1.3 "Sligoil", ui-monospace, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* a ticker is a name, and his pixel face is the face for names */
.display-ticker { font: 700 36px/1.15 "Pixeloid", ui-monospace, monospace; letter-spacing: 0; max-width: none; }
@media (max-width: 620px) { .display-ticker { font-size: 27px; } }
.label-sunday { margin-top: var(--sp-6); }
.blocked { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.6; }

/* ---- widths ---------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --display: 32px; }
  .head { grid-template-columns: minmax(0, 1fr) 260px; }
  .mark-doll { width: 220px; }
  .wordmark-img { width: 300px; }
  .record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --sp-12: 32px; --display: 32px; }
  .head { grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-8); }
  .head-right { justify-items: start; }
  .mark-doll { width: 180px; margin: 0; }
  .two, .rules-steps, .mine-out { grid-template-columns: minmax(0, 1fr); }
  .band-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  .display { max-width: none; }
}

@media (max-width: 620px) {
  :root { --display: 24px; --head: 18px; --lede: 16px; --drop: 6px; --ring: 3px; }
  .wordmark-img { width: 240px; }
  .rows th, .rows td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
  .rows th:nth-child(2), .rows td:nth-child(2),
  .rows th:nth-child(4), .rows td:nth-child(4),
  .rows th:nth-child(5), .rows td:nth-child(5) { display: none; }
  #burns-table th:nth-child(4), #burns-table td:nth-child(4) { display: table-cell; }
  .card, .black { padding: var(--sp-6); }
  .record { grid-template-columns: minmax(0, 1fr); }
  .child-art { width: 150px; }
}

@media (max-width: 400px) {
  #burns-table th:nth-child(2), #burns-table td:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .chips .chip:hover, .key:hover:not(:disabled), .mark-key:hover { transform: none; }
}