/* Hazard signage. Three colors and one rule: red means the company paid. */

:root {
  --yellow: oklch(0.87 0.178 93);
  --ink: oklch(0.17 0.012 93);
  --red: oklch(0.56 0.225 28);
  --paper: oklch(0.975 0.012 93);

  /* DIN Condensed (macOS, iOS) and Bahnschrift (Windows) are both DIN 1451,
     the road-sign face. The rest are the nearest thing each platform ships. */
  --display: "DIN Condensed", Bahnschrift, "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --label: "DIN Alternate", Bahnschrift, "Helvetica Neue", Arial, system-ui, sans-serif;
  --text: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --tape: repeating-linear-gradient(-45deg, var(--ink) 0 9px, transparent 9px 18px);
  --rule: 3px solid var(--ink);
  --gap: clamp(14px, 1.8vw, 26px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font: 17px/1.45 var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.defs { position: absolute; }

/* Several elements here set their own display, which would otherwise beat
   the hidden attribute. */
[hidden] { display: none !important; }

button, input { font: inherit; color: inherit; }

/* ---- Type ------------------------------------------------------------- */

.label {
  font: 700 15px/1.2 var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label span { font-weight: 700; letter-spacing: 0.02em; text-transform: none; opacity: 0.62; margin-left: 0.4em; }

.figure {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
  line-height: 0.82;
  letter-spacing: -0.01em;
  /* DIN Condensed sits high in its box; this puts the caps back on center. */
  padding-top: 0.16em;
}

.sub { font-size: 15px; line-height: 1.35; max-width: 34ch; }

/* ---- Mast ------------------------------------------------------------- */

.mast {
  display: flex;
  align-items: flex-end;
  gap: var(--gap) clamp(18px, 3vw, 44px);
  padding: 14px var(--gap) 8px;
}

.wordmark {
  font: 700 clamp(60px, 7vw, 100px) / 0.8 var(--display);
  font-stretch: 75%;
  letter-spacing: -0.005em;
  padding-top: 0.16em;
  white-space: nowrap;
}
.wordmark svg { height: 0.7em; width: auto; margin-left: 0.035em; fill: var(--ink); }
.wordmark .bang { fill: var(--yellow); }

.pitch {
  flex: 1;
  font: 700 clamp(17px, 1.7vw, 24px) / 1.1 var(--label);
  padding-bottom: 0.55em;
  max-width: 14em;
}

.clock { display: flex; gap: clamp(18px, 3vw, 44px); margin-left: auto; }
.clock dt { font: 700 15px/1.2 var(--label); letter-spacing: 0.1em; text-transform: uppercase; }
.clock dd {
  font: 700 clamp(38px, 4.2vw, 60px) / 0.8 var(--display);
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
  padding-top: 0.22em;
}

.time { display: grid; gap: 6px; width: clamp(220px, 21vw, 300px); padding-bottom: 4px; }

/* The century, as hazard tape that turns solid as it is used up. */
.tape { height: 14px; margin: 0 var(--gap); background: var(--tape); border: var(--rule); border-width: 3px 0; }
.tape i { display: block; height: 100%; width: 0; background: var(--ink); }

/* ---- Floor ------------------------------------------------------------ */

.floor {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(250px, 0.82fr) minmax(280px, 0.9fr);
  grid-template-areas: "town book desk" "ledger book desk";
  grid-template-rows: auto 1fr;
  gap: 16px var(--gap);
  padding: 20px var(--gap) var(--gap);
  align-items: start;
}
.town { grid-area: town; }
.book { grid-area: book; }
.desk { grid-area: desk; }
.ledger { grid-area: ledger; }

/* ---- Town ------------------------------------------------------------- */

.field { position: relative; }
.field canvas { display: block; width: 100%; aspect-ratio: 3 / 2; }
.field.shake canvas { animation: shake 90ms linear infinite; }
@keyframes shake {
  0% { transform: translate(var(--shake, 3px), 0); }
  25% { transform: translate(0, var(--shake, 3px)); }
  50% { transform: translate(calc(var(--shake, 3px) * -1), 0); }
  75% { transform: translate(0, calc(var(--shake, 3px) * -1)); }
}

.banner {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.25em;
  background: var(--ink);
  color: var(--yellow);
  font: 700 clamp(30px, 4.2vw, 60px) / 0.8 var(--display);
  font-stretch: 75%;
  padding: 0.3em 0.4em 0.14em 0.3em;
  text-transform: uppercase;
  pointer-events: none;
}
.banner svg { width: 1.2em; height: 1.08em; margin-top: -0.16em; }

.caption {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--ink);
  color: var(--yellow);
  font: 700 16px/1.25 var(--label);
  padding: 10px 14px;
  max-width: 22em;
}

.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font: 700 14px/1 var(--label); letter-spacing: 0.06em; text-transform: uppercase; }
.legend li { display: flex; align-items: center; gap: 8px; }
.k { display: inline-block; width: 13px; height: 13px; background: var(--ink); }
.k-out { width: 5px; height: 5px; margin: 0 4px; }
.k-paid { background: var(--red); }

/* ---- Cards (start, ruin, the end) ------------------------------------ */

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 32em);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(16px, 1.7vw, 24px);
  background: var(--ink);
  color: var(--yellow);
}
.card:empty { display: none; }
.card.ruin { background: var(--red); color: var(--paper); }
.card.tucked { top: auto; bottom: 0; width: auto; min-height: 0; padding: 10px; }
.card.tucked > :not(.actions) { display: none; }
.card.tucked .actions > :not([data-act="xray"]) { display: none; }

.card h2 {
  font: 700 clamp(40px, 4.4vw, 62px) / 0.84 var(--display);
  font-stretch: 75%;
  padding-top: 0.14em;
  text-transform: uppercase;
}
.card h2 span { display: inline-block; }
.card.verdict h2 { font-size: clamp(60px, 6.6vw, 96px); line-height: 0.8; }
.card .when { font: 700 clamp(18px, 1.6vw, 22px) / 1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; }
.card p, .card li { font-size: 16px; line-height: 1.4; }
.card ol { display: grid; gap: 6px; counter-reset: rule; }
.card ol li { counter-increment: rule; display: grid; grid-template-columns: 1.6em 1fr; }
.card ol li::before { content: counter(rule); font: 700 1em/1.4 var(--label); }
.card strong { font-family: var(--label); }

.tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 10px 0 6px; border: 2px solid currentColor; border-width: 2px 0; }
.tally dt { font: 700 13px/1.2 var(--label); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.tally dd { font: 700 clamp(30px, 3.2vw, 44px) / 0.8 var(--display); font-stretch: 75%; padding-top: 0.2em; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Buttons ---------------------------------------------------------- */

button { cursor: pointer; border: 0; border-radius: 0; background: var(--ink); color: var(--yellow); font: 700 16px/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 16px 13px; }
button:hover { background: var(--red); color: var(--paper); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }

.card button { background: var(--yellow); color: var(--ink); font-size: 15px; padding: 14px 14px 13px; }
.card button[data-act="start"] { font-size: 18px; padding: 16px 20px 15px; }
.card.ruin button { background: var(--paper); }
.card button:hover { background: var(--paper); color: var(--ink); }
.card.ruin button:hover { background: var(--ink); color: var(--paper); }
.card button.quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.card.tucked button.quiet { background: var(--ink); color: var(--yellow); box-shadow: none; }

.seg { display: flex; border: var(--rule); }
.seg button { flex: 1; background: transparent; color: var(--ink); padding: 13px 4px 12px; font-size: 17px; letter-spacing: 0.04em; }
.seg button + button { border-left: var(--rule); }
.seg button:hover { background: var(--ink); color: var(--yellow); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }
.seg button:focus-visible { position: relative; z-index: 1; }

/* ---- Book ------------------------------------------------------------- */

.book { display: grid; gap: 16px; align-content: start; }
.stat { display: grid; gap: 6px; }
.capital .figure { font-size: clamp(72px, 8.8vw, 128px); }
.banked { border-top: var(--rule); padding-top: 14px; }
.banked .figure { font-size: clamp(52px, 5.6vw, 82px); }

.flag { display: none; }
.thin .flag { display: inline-block; opacity: 1; background: var(--red); color: var(--paper); padding: 3px 7px 2px; letter-spacing: 0.1em; text-transform: uppercase; }
.warn { display: none; height: 14px; background: var(--tape); }
.thin .warn { display: block; animation: creep 1.2s linear infinite; }
@keyframes creep { to { background-position: 25.456px 0; } }
.under .figure { color: var(--red); }

.gauges { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; border: var(--rule); border-width: 3px 0; padding: 12px 0 8px; }
.gauges dt { font: 700 13px/1.2 var(--label); letter-spacing: 0.1em; text-transform: uppercase; }
.gauges dd { font: 700 clamp(30px, 3vw, 42px) / 0.8 var(--display); font-stretch: 75%; font-variant-numeric: tabular-nums; padding-top: 0.24em; }

.news { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; }
.news-sign { width: 54px; height: 49px; }
.news-head { font: 700 clamp(26px, 2.6vw, 36px) / 0.86 var(--display); font-stretch: 75%; padding-top: 0.16em; text-transform: uppercase; }
.news-body { font-size: 15px; line-height: 1.35; }

.sign { fill: var(--yellow); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.glyph { fill: var(--ink); }
.stroke { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Desk ------------------------------------------------------------- */

.desk { display: grid; gap: 18px; align-content: start; }
.control { display: grid; gap: 8px; }
.control + .control { border-top: var(--rule); padding-top: 14px; }

.stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; }
.stepper button { font-size: 28px; line-height: 1; padding: 8px 0 10px; }
.stepper .figure { font-size: clamp(52px, 5.6vw, 82px); text-align: center; }

input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 12px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 12px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 40px; margin-top: -14px; background: var(--paper); border: 4px solid var(--ink); border-radius: 0; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 32px; background: var(--paper); border: 4px solid var(--ink); border-radius: 0; }

/* ---- Ledger ----------------------------------------------------------- */

.ledger { display: grid; gap: 8px; }
.bars { position: relative; display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); gap: 0 2px; height: clamp(72px, 10vh, 96px); margin-bottom: 6px; }
.bars::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; border-top: 2px solid var(--ink); }
.yr { position: relative; }
.yr i { position: absolute; left: 0; right: 0; }
.yr .in { bottom: 60%; background: var(--ink); }
.yr .out { top: calc(40% + 2px); background: var(--red); }
.yr.over .out { background: repeating-linear-gradient(-45deg, var(--red) 0 4px, var(--paper) 4px 7px); }
.yr.re::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--ink); }
.axis { display: flex; justify-content: space-between; font: 700 13px/1 var(--label); letter-spacing: 0.06em; padding-top: 6px; }

/* ---- Fine print, set large enough to read ----------------------------- */

.fine { background: var(--ink); color: var(--yellow); padding: clamp(28px, 4vw, 56px) var(--gap); margin-top: var(--gap); }
.fine h2 { font: 700 clamp(44px, 6vw, 84px) / 0.8 var(--display); font-stretch: 75%; text-transform: uppercase; padding-top: 0.16em; margin-bottom: 0.4em; }
.clauses { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.clauses h3 { font: 700 16px/1.2 var(--label); letter-spacing: 0.1em; text-transform: uppercase; border-top: 3px solid var(--yellow); padding-top: 12px; margin-bottom: 12px; }
.clauses p { font-size: 18px; line-height: 1.5; color: var(--paper); }
.clauses p + p { margin-top: 0.8em; }
.clauses strong { font-family: var(--label); color: var(--yellow); margin-right: 0.3em; }
.inline-sign { width: 1.9em; height: 1.7em; vertical-align: -0.42em; margin-right: 0.35em; }

.colophon { background: var(--ink); color: var(--paper); padding: 0 var(--gap) 40px; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; font-size: 16px; }
.colophon p { max-width: 46em; opacity: 0.8; }
.colophon a { color: var(--yellow); font: 700 16px/1.45 var(--label); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- Narrower --------------------------------------------------------- */

@media (max-width: 1120px) {
  .mast { flex-wrap: wrap; }
  .pitch { min-width: 9em; }
  .floor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "town town" "ledger ledger" "book desk"; grid-template-rows: none; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .mast { padding-top: 12px; }
  .pitch { order: 3; flex-basis: 100%; max-width: none; padding-bottom: 0; }
  .time { order: 4; width: 100%; }
  .time .label { display: none; }
  .floor { grid-template-columns: minmax(0, 1fr); grid-template-areas: "town" "book" "desk" "ledger"; }
  .card { position: relative; width: 100%; }
  .card.tucked { position: absolute; }
  /* Keep the town in view while the controls scroll under it. */
  .town:has(.card:empty) { position: sticky; top: 0; z-index: 2; background: var(--yellow); padding: 8px 0; margin: -8px 0; }
  .bars { gap: 0 1px; }
  .book { grid-template-columns: 1fr 1fr; }
  .gauges, .news { grid-column: 1 / -1; }
  .banked { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .field.shake canvas, .thin .warn { animation: none; }
}