/* DIVIDEND
   The hall is the argument, so the page is built to get out of its way:
   one wide plate near the top, one sentence under it, then the few numbers
   that prove the sentence is true. Every colour is lifted from the scene's
   own palette so the page and the picture are plainly the same object. */

:root {
  --night:   #0d1420;
  --night-2: #131c2c;
  --wall:    #2c3850;
  --rule:    rgba(217,205,180,.14);
  --cream:   #d9cdb4;
  --cream-2: #a89e8a;
  --muted:   #8b93a6;
  --brass:   #b98d3f;
  --brass-2: #8f6c2f;
  --seal:    #b2492f;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  /* papered with a tile lifted from the hall's own wall, laid on at low
     strength: the page is inside the building, not next to it */
  background: var(--night);
  background-image: var(--wallpaper, none);
  background-repeat: repeat;
  background-blend-mode: soft-light;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--brass); color: var(--night); }

/* ---------------- header ---------------- */
.bar {
  display: flex; align-items: center; gap: 1.2rem;
  max-width: 1180px; margin: 0 auto; padding: 1.15rem 1.4rem;
}
.wordmark {
  font-family: var(--mono); font-weight: 600; font-size: 1rem;
  letter-spacing: .2em; color: var(--cream);
}
.chain {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--muted);
}
.status {
  margin-left: auto;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  color: var(--muted); border: 1px solid var(--rule);
  padding: .3rem .6rem;
}
.status.live { color: var(--brass); border-color: rgba(185,141,63,.45); }

main { max-width: 1180px; margin: 0 auto; padding: 0 1.4rem 5rem; }

/* ---------------- plates ----------------
   Every picture on this page is a crop of the one scene, so every picture
   is hung in the same brass frame. */
.stage { padding-top: .6rem; }
.plate {
  border: 1px solid rgba(185,141,63,.35);
  background: #080f1c;
  padding: 9px;
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}
.plate.sm { padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.vignette {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
  background: #080f1c;
}
#hall {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
  background: #080f1c;
}
.caption {
  margin-top: .9rem; text-align: center;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  color: var(--muted); text-transform: lowercase;
  transition: color .25s;
}
.caption.paying { color: var(--brass); }

/* ---------------- the one idea ---------------- */
.idea { max-width: 780px; margin: 4.2rem auto 0; text-align: center; }
.idea h1 {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.12;
  margin-bottom: 1.25rem;
}
.idea p { color: var(--cream-2); font-size: 1.04rem; line-height: 1.66; }

.cta { display: flex; gap: .8rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.btn {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  padding: .8rem 1.5rem; border: 1px solid var(--rule);
  color: var(--cream); transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--cream); }
.btn.primary {
  background: var(--brass); border-color: var(--brass); color: #171106;
  font-weight: 600;
}
.btn.primary:hover { background: #cf9f4c; border-color: #cf9f4c; }

/* ---------------- live numbers, under the board ---------------- */
.live-wrap {
  margin-top: 4.6rem;
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: 2.4rem; align-items: center;
}
.board-vig {
  border: 1px solid rgba(185,141,63,.35);
  padding: 0; background: #080f1c;
  box-shadow: 0 18px 46px rgba(0,0,0,.5);
}
.live {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.tile {
  padding: 1.5rem 1.2rem 1.6rem;
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .5rem;
}
.tile:first-child { border-left: 0; padding-left: 0; }
.tile .k {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  color: var(--muted);
}
.tile .v {
  font-family: var(--mono); font-size: 1.45rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--cream);
}
.tile .u {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  color: var(--muted); margin-top: -.3rem;
}

/* ---------------- how ---------------- */
.how { margin-top: 5rem; }
.how h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 600;
  letter-spacing: -.015em; margin-bottom: 2.2rem;
}
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.steps li { display: flex; flex-direction: column; gap: .7rem; }
.steps .plate { margin-bottom: .5rem; }
.steps .n {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  color: var(--brass);
}
.steps h3 { font-size: 1.06rem; font-weight: 600; }
.steps p { color: var(--cream-2); font-size: .93rem; line-height: 1.62; }

/* ---------------- the window ---------------- */
.window-sec {
  margin-top: 5rem;
  display: grid; grid-template-columns: 320px 1fr; gap: 2.6rem; align-items: start;
}
.window-copy h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.window-copy > p { color: var(--cream-2); font-size: .95rem; margin-bottom: 1.3rem; max-width: 56ch; }
#lookup { display: flex; gap: .7rem; flex-wrap: wrap; }
#addr {
  flex: 1 1 320px; min-width: 0;
  font-family: var(--mono); font-size: .86rem;
  background: #0b1220; color: var(--cream);
  border: 1px solid var(--rule); padding: .78rem .9rem;
}
#addr:focus { outline: none; border-color: var(--brass); }
#lookup button {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  background: transparent; color: var(--cream);
  border: 1px solid var(--rule); padding: .78rem 1.3rem; cursor: pointer;
}
#lookup button:hover { border-color: var(--cream); }
.result {
  margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.result .r { display: flex; flex-direction: column; gap: .35rem; }
.result .rk {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--muted);
}
.result .rv {
  font-family: var(--mono); font-size: 1.06rem; font-variant-numeric: tabular-nums;
}
.result .msg { grid-column: 1 / -1; font-family: var(--mono); font-size: .82rem; color: var(--muted); }

/* ---------------- the vault ---------------- */
.fine-sec {
  margin-top: 5rem;
  display: grid; grid-template-columns: 220px 1fr; gap: 2.6rem; align-items: center;
}
.fine { max-width: 720px; }
.fine p { color: var(--muted); font-size: .84rem; line-height: 1.66; }
.fine .ca {
  margin-top: 1rem; font-family: var(--mono); font-size: .74rem;
  word-break: break-all;
}
.fine .ca span { color: var(--cream-2); }

footer {
  max-width: 1180px; margin: 0 auto; padding: 2rem 1.4rem 3rem;
  border-top: 1px solid var(--rule);
  display: flex; gap: 1.2rem; align-items: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--muted);
}
footer a { margin-left: auto; }
footer a:hover { color: var(--cream); }

/* ---------------- narrow ---------------- */
@media (max-width: 900px) {
  .live-wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .window-sec, .fine-sec { grid-template-columns: 1fr; gap: 1.6rem; }
  .clerk-plate, .vault-plate { max-width: 320px; }
  .live { grid-template-columns: repeat(2, 1fr); }
  .tile { border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); padding-left: 1.2rem; }
  .tile:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tile:nth-child(1), .tile:nth-child(2) { border-top: 0; }
  .steps { grid-template-columns: 1fr; gap: 1.8rem; }
  .result { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .bar { flex-wrap: wrap; gap: .7rem; }
  .status { margin-left: 0; }
  .result { grid-template-columns: 1fr; }
}