/* wsolnu. One tent, one column, one scale.
   Built 50 / 50 from his reference (art/ref/reference-crt-quests.jpg: pixel art, a framed window at
   79% of the frame, one giant glossy key at 62%, a three line display headline whose caps are 3.43x
   its labels) and from the brief's own design section (the big top, the safety nets, Shrikhand and
   Nunito Sans, canvas / rope / night / spotlight / red).

   TYPE, one face per role, and no role has two.  Shrikhand is the display face: the wordmark, the
   headline and every h2. Nunito Sans is the reading face: every sentence on the site is set in it.
   Space Mono is the data face: labels, values, addresses, table cells, keys. A sentence is never
   set in the mono and a value is never set in the sans. Sizes come off ONE scale:
   14 / 16 / 20 / 24 / 32 / 48, and the display is the only thing on the page over 32 px.

   SPACE, one scale: 4 / 8 / 12 / 16 / 24 / 32 / 48. Nothing here is 18, 22, 26 or 30.

   COLOUR, one meaning each.  spotlight amber = LIT: the live price, the flag you are standing on,
   the one key that acts; rope = the nets and the SOL standing on them; red = a fall, a sale, a
   burn, and the cloth of the tent itself; cloth = every reading surface; sky = the field. There is
   no pink on this site any more: the one big key is amber, like everything else that is lit.

   SURFACES. Every panel, key, flag and window is a generated raster from tools/art.mjs, nine
   sliced. There is not one bordered CSS rectangle on this site. */

@font-face { font-family: Shrikhand; src: url("/font/shrikhand-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/font/nunito-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/font/space-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/font/space-mono-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #141E3C;
  --deep: #0B1227;
  --violet: #2A2056;
  --inside: #1B2A4A;
  --cloth: #F6EBD9;
  --cloth2: #E0CCAE;
  --cloth3: #B99B73;
  --rope: #C9A46A;
  --rope-dark: #8A6B3C;
  --spot: #FFD24A;
  --red: #D7263D;
  --ink: #231B2E;
  --muted: #AFBEE2;            /* 7.4:1 on the night field, measured in tools/audit.mjs */
  --paper-muted: #574833;      /* 5.3:1 on the cloth it is printed on, measured in tools/review.mjs */

  --page: 1120px;
  --gutter: 24px;
  --rail: 336px;             /* the one panel width off the right line: the lamp is exactly this */
  --pad: 24px 32px;          /* ONE padding for every panel on the site, whatever is printed on it */
  --display: 48px;           /* one step down to 32 under 1100: nothing between, the scale has no 40 */

  --sans: "Nunito Sans", "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Consolas, monospace;
  --shrik: Shrikhand, Georgia, serif;

  --slice-plate: url("/img/plate.png") 24 fill / 12px / 0 stretch;
  --slice-sunk: url("/img/plate-sunk.png") 24 fill / 12px / 0 stretch;
  --slice-board: url("/img/board.png") 24 fill / 12px / 0 stretch;
  --slice-window: url("/img/window.png") 32 fill / 16px / 0 stretch;
  --slice-bar: url("/img/bar2.png") 24 fill / 12px / 0 stretch;
  --slice-key: url("/img/key.png") 24 fill / 12px / 0 stretch;
  --slice-key-down: url("/img/key-down.png") 24 fill / 12px / 0 stretch;
  --slice-hot: url("/img/keyhot.png") 24 fill / 12px / 0 stretch;
  --slice-hot-down: url("/img/keyhot-down.png") 24 fill / 12px / 0 stretch;
  --slice-cta: url("/img/cta2.png") 40 fill / 20px / 0 stretch;
  --slice-cta-down: url("/img/cta2-down.png") 40 fill / 20px / 0 stretch;
  --slice-pennant: url("/img/pennant2.png") 24 24 32 24 fill / 12px 12px 16px 12px / 0 round;
  --slice-pennant-on: url("/img/pennant2-on.png") 24 24 32 24 fill / 12px 12px 16px 12px / 0 round;
}

* { box-sizing: border-box; }

/* a grid or a flex display beats the browser own [hidden] rule, and then a panel that was told to
   go away stays on the page with nothing in it */
[hidden] { display: none !important; }

html { background: var(--night); }
body { background-image: url("/img/sky.png"); background-repeat: repeat; background-size: 256px 256px; }

body {
  margin: 0;
  background: var(--night);
  color: var(--cloth);
  font: 400 16px/1.6 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, canvas { image-rendering: pixelated; }

a { color: var(--spot); }

.skip {
  position: absolute; left: -9999px; top: 8px;
  font: 700 14px/1 var(--mono); padding: 12px 16px; background: var(--spot); color: var(--ink);
}
.skip:focus { left: 24px; z-index: 40; }

.page {
  width: var(--column, min(100% - 32px, var(--page)));
  margin: 0 auto;
  padding: 24px 0 48px;
}

/* ---- the bunting: the navigation is the garland strung under the dome ---------------------- */

.bunting {
  position: relative;
  padding-top: 12px;
  margin-bottom: 32px;
}
.bunting::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 12px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--rope) 0 4px, var(--rope-dark) 4px 8px);
}
.bunting ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.pennant {
  display: block;
  border-image: var(--slice-pennant);
  padding: 16px 16px 24px;
  min-height: 76px;
  text-decoration: none;
  color: var(--cloth);
  font: 700 14px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform .18s ease;
}
.pennant .short { display: none; }
.pennant em {
  display: block;
  margin-top: 4px;
  font: 400 14px/1.2 var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.pennant:hover { transform: translateY(2px); }
.pennant:active { transform: translateY(3px); filter: brightness(0.94); }
.pennant:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; }
.pennant[aria-current="page"] { border-image: var(--slice-pennant-on); color: var(--ink); }
.pennant[aria-current="page"] em { color: #6B4F12; }

/* ---- the masthead: his three line headline, line two in the second ink --------------------- */

/* the lamp sits in a column exactly as wide as a panel, so the headline block and everything under
   it come down one right line and the two readings on the first screen are the same width */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: 32px;
}
.kicker { margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; }
.wordmark { font: 400 24px/1 var(--shrik); color: var(--cloth); }
.ticker { font: 700 14px/1 var(--mono); letter-spacing: 0.08em; color: var(--spot); }
h1 {
  margin: 0;
  font: 400 var(--display)/1.12 var(--shrik);
  letter-spacing: 0.01em;
  text-shadow: 4px 4px 0 var(--deep);
  max-width: 15ch;
}
h1 em { font-style: normal; color: var(--spot); }

/* the lamp: the live price reading, where his poster puts its moon */
.lamp {
  border-image: var(--slice-board);
  padding: var(--pad);
  width: 100%;
  text-align: right;
}
.lamp dt { font: 700 14px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lamp dd { margin: 4px 0 0; font: 700 32px/1.1 var(--mono); color: var(--spot); }
.lamp .lamp__unit { font: 400 14px/1.2 var(--mono); color: var(--muted); display: block; margin-top: 4px; }

/* ---- the ring: the tent across the whole column -------------------------------------------- */

/* The picture is a panorama the full width of the page, and nothing is printed on top of it. The
   numbers that used to be pinned to its right edge are the strip of plates under it: a label over
   a drawing crowds the drawing, and the drawing stops being one. */
.ring { margin-bottom: 12px; }
.tent__frame { position: relative; line-height: 0; }
.tent__frame canvas { display: block; width: 100%; height: auto; }

/* the levels, as a strip of equal plates under the tent: one per rope, in the same order */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.strip li { display: grid; }
.strip .level { width: 100%; }

.note {
  border-image: var(--slice-board);
  padding: var(--pad);
  margin: 0 0 24px;
  font: 400 16px/1.6 var(--sans);
  color: var(--cloth);
}
.note b { color: var(--spot); font-weight: 700; }

/* the one key of the page, and the line that says what pressing it does */
.call {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gutter);
  align-items: center;
  margin: 0 0 24px;
}
.call--stack { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 16px; }
.two .call { margin-bottom: 0; }        /* a margin on a stretched cell makes the row uneven */
.call .say { margin: 0; }

/* the three totals over the catch list: what the nets caught, what was paid, what was burned */
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-bottom: 24px; }
.tally .rowline { padding-top: 0; }
.tally .rowline + .rowline::before { display: none; }

/* the catches, and the nets of one wallet: one list, as many columns as the panel can hold */
.catches { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px 32px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.catches li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font: 400 14px/1.4 var(--mono); align-content: start; }
.catches .who { color: var(--cloth); }
.catches .sol { color: var(--spot); font-weight: 700; text-align: right; }
.catches .at { color: var(--muted); grid-column: 1 / -1; }
.catches .empty { color: var(--cloth); font: 400 16px/1.6 var(--sans); grid-column: 1 / -1; }

.block h2, .sheet h2 {
  margin: 0 0 16px;
  font: 400 20px/1.2 var(--shrik);
  color: var(--cloth);
}
.sub {
  margin: 24px 0 8px;
  font: 700 14px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet .sub { color: var(--paper-muted); }

/* ---- the one key of the page --------------------------------------------------------------- */

/* One key, 320 px wide, in the amber every lit thing on this site is painted in: a key the width
   of the page shouted louder than the tent, and a colour nothing else used had nothing to do with
   the palette. The ink on it is the dark ink, which measures over 9:1 on the amber. */
.cta {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  border-image: var(--slice-cta);
  padding: 20px 32px;
  min-height: 72px;
  color: var(--ink);
  font: 400 24px/1.2 var(--shrik);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { border-image: var(--slice-cta-down); padding-top: 22px; padding-bottom: 18px; }
.cta:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; }
/* a key that cannot be pressed yet is still a key: it is dimmed by COLOUR, onto the cream face
   with the muted ink, never greyed into a murk the palette has no name for */
.cta[aria-disabled="true"], .cta:disabled {
  border-image: var(--slice-key);
  color: var(--paper-muted);
  cursor: not-allowed;
}

/* ---- keys ---------------------------------------------------------------------------------- */

.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border: 0; background: transparent;
  border-image: var(--slice-key);
  color: var(--ink);
  font: 700 14px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.key:hover { filter: brightness(1.04); }
.key:active { border-image: var(--slice-key-down); padding-top: 14px; padding-bottom: 10px; }
.key:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; }
.key[aria-disabled="true"], .key:disabled { filter: grayscale(0.5); opacity: .74; cursor: not-allowed; }
.key--hot { border-image: var(--slice-hot); }
.key--hot:active { border-image: var(--slice-hot-down); }
.key img { width: 16px; height: 16px; image-rendering: auto; }

/* ---- the booth at the tent door: the mint and every link ----------------------------------- */

.booth { border-image: var(--slice-window); padding: 0 0 24px; }
/* the window's own painted frame is 8 px of cloth, so the title strip starts 8 px in: at 4 it sat
   on the frame and read as a band wider than the window it belongs to */
.booth__bar {
  border-image: var(--slice-bar);
  margin: 8px 8px 0;
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 700 14px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cloth);
  min-height: 48px;
}
.booth__body { padding: 24px 32px 0; display: grid; gap: 16px; }
/* the field and the key that copies it are one row: the key is the field's own right hand, not a
   small control marooned in the middle of a cream plate */
.booth__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.booth__mint {
  border-image: var(--slice-sunk);
  padding: 16px 24px;
  color: var(--ink);
  font: 400 16px/1.5 var(--mono);
  overflow-wrap: anywhere;
  min-width: 0;
}
.booth__mint b { display: block; font: 700 14px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-muted); margin-bottom: 8px; }
.booth__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.booth__say { font: 400 16px/1.6 var(--sans); color: var(--cloth); margin: 0; }

/* ---- blocks of reading: canvas plates, never a bordered box -------------------------------- */

.block { border-image: var(--slice-board); padding: var(--pad); }
/* a panel in a row of two is as tall as its neighbour whether it likes it or not, so the line it
   ends on sits at its foot instead of leaving a band of nothing under it */
.block--fill { display: flex; flex-direction: column; }
.block--fill .foot { margin-top: auto; padding-top: 16px; }
/* the same block printed on canvas instead of a painted board: every ink inside it changes with it */
.paper { border-image: var(--slice-plate); color: var(--ink); }
.paper h2 { color: var(--ink); }
.paper .say { color: var(--paper-muted); }
.paper .rowline b { color: var(--ink); }
.paper .rowline + .rowline::before { background: var(--cloth3); }
.paper label { color: var(--paper-muted); }
.sheet { border-image: var(--slice-plate); padding: var(--pad); color: var(--ink); }
.sheet h2 { color: var(--ink); }
.sheet p { margin: 0 0 16px; max-width: 68ch; font: 400 16px/1.6 var(--sans); }
.sheet a { color: #9A2A5E; }
.stack { display: grid; gap: 24px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: stretch; }
.two > * { min-width: 0; }

/* One line per cell and one height per row: a cell that wrapped to two lines made its row taller
   than the rest and the table stopped reading across. The price has its own column for that
   reason, and every number is right aligned on the same figures. */
table { border-collapse: collapse; width: 100%; font: 400 14px/1.5 var(--mono); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0 24px 0 0; height: 44px; vertical-align: middle; white-space: nowrap; }
th { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sheet th { color: var(--paper-muted); }
td.num, th.num { text-align: right; padding-right: 0; padding-left: 24px; }
tbody tr + tr th, tbody tr + tr td { border-top: 0; }

/* the label and its figure sit on ONE baseline, whatever either of them is set in */
.rowline { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; font: 400 14px/1.6 var(--mono); padding: 12px 0; }
.rowline { position: relative; }
.rowline + .rowline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rope-dark); }
.sheet .rowline + .rowline::before { background: var(--cloth3); }
.rowline b { font-weight: 700; color: var(--spot); }
.sheet .rowline b { color: var(--ink); }

/* ---- the form that hangs a net -------------------------------------------------------------- */

.form { display: grid; gap: 24px; }
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.level {
  border: 0; background: transparent; border-image: var(--slice-key);
  padding: 16px 12px; min-height: 76px; cursor: pointer; color: var(--ink);
  font: 700 14px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  display: grid; gap: 4px; justify-items: center;
}
.level span { font: 400 14px/1.2 var(--mono); letter-spacing: 0; text-transform: none; color: var(--paper-muted); }
/* the level you picked is lit; a level with SOL standing on it says so in its own value, in the
   dark ink, because five lit plates in a row would out shout the one key on the page */
.level[aria-pressed="true"] { border-image: var(--slice-hot); }
.level[aria-pressed="true"] span, .level--on span { color: var(--ink); font-weight: 700; }
.level:hover { filter: brightness(1.04); }
.level:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; }
.level:active { border-image: var(--slice-key-down); }

label { display: block; font: 700 14px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sheet label { color: var(--paper-muted); }
input[type="text"], input[type="number"] {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 0; background: transparent; border-image: var(--slice-sunk);
  font: 400 16px/1.4 var(--mono); color: var(--ink);
}
input:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; }
/* equal columns, never four keys of four widths side by side */
.amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.amounts .key { width: 100%; }

/* every sentence on the site, in the reading face, on the cream the dark field can carry */
.say { font: 400 16px/1.6 var(--sans); color: var(--cloth); margin: 16px 0 0; }
.sheet .say, .paper .say { color: var(--ink); }
.say--warn { color: var(--spot); }
.say--read b { color: var(--spot); font-weight: 700; }

.steps { counter-reset: step; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.steps b {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-image: var(--slice-hot); color: var(--ink); font: 700 20px/1 var(--mono);
}

.pill { font: 700 14px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--spot); padding: 12px 16px; }
.pill--off { background: #6B5233; color: var(--cloth); }   /* 5.3:1, measured; rope-dark was 4.19 */

/* ---- the one wide screen rule and the phone ------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --rail: 300px; --display: 32px; }
}
@media (max-width: 920px) {
  :root { --rail: 100%; }
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .lamp { text-align: left; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .call { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  :root { --pad: 20px 24px; }
  /* five flags still hang in one row on a phone: the garland is the navigation, not a stack of it */
  .bunting ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .pennant { padding: 12px 8px 20px; min-height: 60px; text-align: center; letter-spacing: 0.04em; }
  .pennant .long, .pennant em { display: none; }
  .pennant .short { display: block; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tbody tr { padding: 12px 0; position: relative; }
  tbody tr + tr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rope-dark); }
  td, th { padding: 4px 0; text-align: left; height: auto; white-space: normal; }
  td.num, th.num { text-align: left; padding-left: 0; }
  td::before { content: attr(data-label) " "; color: var(--muted); }
  .levels, .amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* five levels over two columns leave a half empty row: on a phone the strip is a list, one
     level a line, and every row of it is complete */
  .strip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .strip .level { grid-template-columns: 1fr auto; justify-items: stretch; text-align: left; min-height: 48px; padding: 12px 16px; }
  .strip .level span { text-align: right; }
  .tally { grid-template-columns: minmax(0, 1fr); }
  .booth__keys { grid-template-columns: minmax(0, 1fr); }
  .booth__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  :root { --pad: 16px 20px; }
  .page { width: min(100% - 16px, var(--page)); }
  h1 { text-shadow: 3px 3px 0 var(--deep); }
  .booth__body { padding: 16px 20px 0; }
  .catches { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pennant { transition: none; }
}