/* Closing Bell — a pick board, not a trading terminal.
   Palette sampled from Underdog Pick'em: a near-black with a blue cast, a
   saturated yellow, and a green/red pair that is darker and heavier than the
   usual crypto neon, which keeps the two directions legible side by side at
   card size. */
:root {
  --bg: #01070e;
  --panel: #0d1218;
  --panel-2: #141a22;
  --line: #1f242a;
  --line-2: #2c333c;
  --ink: #fefeff;
  --body: #bdbdc5;
  --dim: #81838a;

  /* Yellow is the house colour. Green and red mean direction and nothing
     else, so a green number is always "higher" and never "good". */
  --bell: #ffce00;
  --bell-2: #ffde59;
  --bell-soft: rgba(255, 206, 0, .12);
  --bell-dim: #4a3b00;
  --up: #0ea023;
  --up-soft: rgba(14, 160, 35, .14);
  --down: #c02126;
  --down-soft: rgba(192, 33, 38, .14);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --r: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--body); font-family: var(--sans);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--bell); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

/* grain, so the flat dark does not band on cheap panels */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- header ---------- */
.bar { position: sticky; top: 0; z-index: 40; background: rgba(1,7,14,.9);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 16px; height: 64px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  color: var(--ink); letter-spacing: -.02em; font-size: 1.02rem; }
.mark:hover { text-decoration: none; }
.mark svg { width: 24px; height: 24px; color: var(--bell); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--body); font-size: .92rem; font-weight: 500; padding: 7px 12px;
  border-radius: 7px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; }
.nav a.on { color: var(--ink); background: var(--panel-2); }
.nav a.cta { background: var(--bell); color: #1a1103; font-weight: 700; margin-left: 8px; }
.nav a.cta:hover { background: var(--bell-2); }
@media (max-width: 780px) { .nav a:not(.cta) { display: none; } }

/* ---------- shell ---------- */
main { flex: 1; }
.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--line); }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.035em;
  color: var(--ink); font-weight: 800; }
h2 { font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink); font-weight: 700; margin-bottom: 10px; }
h3 { font-size: 1.02rem; color: var(--ink); font-weight: 650; margin-bottom: 6px; }
.lede { font-size: 1.12rem; max-width: 640px; margin-top: 16px; }
.sub { max-width: 660px; margin-bottom: 26px; }
.fine { font-size: .86rem; color: var(--dim); }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bell); margin-bottom: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 78px 0 58px; border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: -50% -10% auto -10%; height: 180%;
  background: radial-gradient(680px 380px at 22% 8%, rgba(255,206,0,.10), transparent 62%),
              radial-gradient(520px 340px at 82% 0%, rgba(14,160,35,.06), transparent 66%);
  pointer-events: none; }
.hero .wrap { position: relative; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bell);
  color: #1a1103; font-weight: 700; font-size: .96rem; padding: 12px 22px; border-radius: 9px;
  border: 1px solid var(--bell); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(255,206,0,.20); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--bell); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- chips & badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: .7rem; letter-spacing: .04em; color: var(--dim); border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 11px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bell); }
.dot.live { background: var(--up); box-shadow: 0 0 0 0 rgba(14,160,35,.5); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(14,160,35,0); } 100% { box-shadow: 0 0 0 0 rgba(14,160,35,0); } }
@media (prefers-reduced-motion: reduce) { .dot.live { animation: none; } }
.tag { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--dim); }
.tag.up { color: var(--up); background: var(--up-soft); border-color: rgba(14,160,35,.34); }
.tag.down { color: var(--down); background: var(--down-soft); border-color: rgba(192,33,38,.34); }
.tag.bell { color: var(--bell); background: var(--bell-soft); border-color: var(--bell-dim); }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%), var(--panel);
  border: 1px solid var(--line); border-radius: 13px; padding: 20px; }
.card.pad { padding: 26px; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.stat { background: var(--panel); padding: 17px 19px; }
.stat .k { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.stat .v { font-size: 1.45rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; }
.stat .n { display: block; font-size: .72rem; color: var(--dim); margin-top: 3px; }
.stat .v.bell { color: var(--bell); }

/* ---------- market rows ---------- */
.mkt { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 14px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--line); }
.mkt:last-child { border-bottom: 0; }
.mkt:hover { background: var(--panel-2); }
.mkt .sym { font-weight: 700; color: var(--ink); }
.mkt .nm { font-size: .8rem; color: var(--dim); }
.mkt .px { font-family: var(--mono); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right; }
.mkt .badge-slot { min-width: 74px; text-align: right; }
.avatar { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: .74rem; letter-spacing: -.02em;
  background: var(--bell-soft); color: var(--bell); border: 1px solid var(--bell-dim); }
.listwrap { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }

/* ---------- pick buttons ---------- */
.picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pick-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px;
  border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer;
  color: var(--body); font-family: inherit; font-size: .9rem; font-weight: 600;
  transition: border-color .12s, background .12s, transform .12s; }
.pick-btn:hover { transform: translateY(-1px); }
.pick-btn .arrow { font-size: 1.3rem; line-height: 1; }
.pick-btn.up:hover, .pick-btn.up.sel { border-color: var(--up); background: var(--up-soft); color: var(--up); }
.pick-btn.down:hover, .pick-btn.down.sel { border-color: var(--down); background: var(--down-soft); color: var(--down); }
.pick-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); font-weight: 500; padding: 0 14px 11px 0;
  border-bottom: 1px solid var(--line); }
.tbl td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.scroll-x { overflow-x: auto; }

/* ---------- steps ---------- */
.steps { counter-reset: s; display: grid; gap: 12px; }
.step { counter-increment: s; position: relative; padding: 20px 22px 20px 62px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.step::before { content: "0" counter(s); position: absolute; left: 22px; top: 20px;
  font-family: var(--mono); font-size: .8rem; color: var(--bell); font-weight: 500; }

/* ---------- notes ---------- */
.note { border-left: 3px solid var(--line-2); padding: 2px 0 2px 16px; margin: 18px 0; }
.note.warn { border-left-color: var(--bell); }
.empty { padding: 34px; text-align: center; color: var(--dim); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 30px 0 44px; margin-top: 40px; }
.foot { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.foot .links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--dim); font-size: .88rem; }
.foot a:hover { color: var(--ink); }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translate3d(0, 14px, 0);
    transition: opacity .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms), transform .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ============================================================
   Pick board — the card pattern this site is really about.
   ============================================================ */

/* Filter row across the top of the board. */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab { padding: 8px 15px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--panel); color: var(--body); font-size: .88rem; font-weight: 600;
  cursor: pointer; font-family: inherit; }
.tab:hover { border-color: var(--line-2); color: var(--ink); }
.tab.on { background: var(--ink); color: #01070e; border-color: var(--ink); }

/* The card. A number big enough to read across a room, and two buttons under
   it — the whole interaction is "which side of this number". */
.board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.pc { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .14s, transform .14s; }
.pc:hover { border-color: var(--line-2); transform: translateY(-2px); }
.pc.picked { border-color: var(--bell); box-shadow: 0 0 0 1px var(--bell); }

.pc-top { display: flex; align-items: center; gap: 11px; padding: 15px 16px 0; }
.pc-av { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: -.02em;
  background: var(--panel-2); color: var(--bell); border: 1px solid var(--line-2); }
.pc-sym { font-weight: 750; color: var(--ink); font-size: 1rem; letter-spacing: -.01em; }
.pc-nm { display: block; font-size: .76rem; color: var(--dim); line-height: 1.3; }

/* the line itself */
.pc-line { padding: 16px 16px 14px; text-align: center; }
.pc-num { font-size: 2.15rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1; }
.pc-cap { font-size: .72rem; color: var(--dim); margin-top: 6px; }

/* higher / lower, split, full width, big targets */
.pc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); margin-top: auto; }
.pc-btn { display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 8px; background: var(--panel); border: 0; cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 700; color: var(--body);
  transition: background .12s, color .12s; }
.pc-btn:hover:not(:disabled) { background: var(--panel-2); }
.pc-btn .ar { font-size: .82rem; }
.pc-btn.hi.on { background: var(--up); color: #fff; }
.pc-btn.lo.on { background: var(--down); color: #fff; }
.pc-btn:hover:not(:disabled).hi { color: var(--up); }
.pc-btn:hover:not(:disabled).lo { color: var(--down); }
/* Must out-specify the two hover rules above, not merely follow them: those
   tint the label in the direction colour, which on a selected button is the
   same colour as its fill, and the label disappears under the cursor. */
.pc-btn.hi.on:hover:not(:disabled),
.pc-btn.lo.on:hover:not(:disabled) { color: #fff; }
.pc-btn:disabled { opacity: .38; cursor: not-allowed; }

/* ---------- the slip ---------- */
/* Fixed to the bottom once something is selected, the way an entry slip works:
   the pick you have made should never be more than a glance away. */
.slip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(13,18,24,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2); transform: translateY(110%);
  transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.slip.show { transform: none; }
.slip-in { display: flex; align-items: center; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.slip-pick { display: flex; align-items: center; gap: 10px; }
.slip-pick .pc-av { width: 34px; height: 34px; font-size: .62rem; }
.slip-txt b { color: var(--ink); font-weight: 700; }
.slip-txt span { display: block; font-size: .78rem; color: var(--dim); }
.slip .btn { margin-left: auto; }
@media (max-width: 560px) {
  .slip-in { gap: 10px; }
  .slip .btn { margin-left: 0; width: 100%; justify-content: center; }
}
body.has-slip { padding-bottom: 86px; }

/* ============================================================
   THE BOARD
   ------------------------------------------------------------
   The redesign this site needed. Everything above is scaffolding;
   what follows is the identity: a split-flap departure board, a
   running tape, and a masthead rather than a hero.

   Three deliberate breaks from the default dark-crypto look:
   a high-contrast serif against mechanical mono, warm board amber
   on near-black instead of neon, and numbers that physically move.
   ============================================================ */

:root {
  --serif: "Instrument Serif", "Times New Roman", serif;
  --slat: #0b0e13;         /* the face of a flap */
  --slat-2: #151b23;       /* its lit half */
  --cream: #f4ead8;        /* aged board paint */
  --tape: #05080c;
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 2px solid var(--line); padding: 54px 0 30px; position: relative; }
.masthead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--line); }
.mast-rule { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); padding-bottom: 16px;
  border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.mast-rule .sep { color: var(--line-2); }
.mast-title { font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.2rem, 10vw, 7rem); line-height: .92; letter-spacing: -.02em;
  color: var(--cream); }
.mast-title em { font-style: italic; color: var(--bell); }
.mast-sub { font-size: 1.06rem; max-width: 620px; margin-top: 18px; color: var(--body); }

/* serif headings everywhere, so the voice carries past the masthead */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; color: var(--cream); }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: .98; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.05; margin-bottom: 12px; }
.mark span { font-family: var(--serif); font-size: 1.24rem; font-weight: 400; letter-spacing: 0; }

/* ---------- the tape ---------- */
/* A real tape of the six prices, running under the header on every page.
   It is the first moving thing you see and every number in it is read from
   chain, which is the whole argument of the project stated as decoration. */
.tape { background: var(--tape); border-bottom: 1px solid var(--line);
  overflow: hidden; height: 38px; position: relative; }
.tape::before, .tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px;
  z-index: 2; pointer-events: none; }
.tape::before { left: 0; background: linear-gradient(90deg, var(--tape), transparent); }
.tape::after { right: 0; background: linear-gradient(270deg, var(--tape), transparent); }
.tape-run { display: flex; align-items: center; height: 38px; width: max-content;
  animation: tape 42s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tape-run { animation: none; } }
@keyframes tape { to { transform: translate3d(-50%, 0, 0); } }
.tape-i { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 22px;
  font-family: var(--mono); font-size: .74rem; white-space: nowrap;
  border-right: 1px solid var(--line); height: 20px; }
.tape-i b { color: var(--cream); font-weight: 500; letter-spacing: .04em; }
.tape-i span { color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- split-flap ---------- */
/* Each character is a slat. When a digit changes the slat flips: the top half
   folds down over the old glyph and the new one is revealed underneath. It is
   the one piece of motion on the site that carries meaning — it fires only
   when a price actually moves, so the board is visibly alive exactly when the
   market is. */
.flap { display: inline-flex; gap: 3px; }
.flap-c { position: relative; width: 30px; height: 46px; border-radius: 4px;
  background: linear-gradient(180deg, var(--slat-2) 0 50%, var(--slat) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 5px rgba(0,0,0,.45);
  font-family: var(--mono); font-size: 1.55rem; font-weight: 500; color: var(--cream);
  display: grid; place-items: center; overflow: hidden; }
/* the seam across the middle of a real flap */
.flap-c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0,0,0,.55); }
.flap-c.thin { width: 15px; font-size: 1.35rem; background: none; box-shadow: none; color: var(--dim); }
.flap-c.thin::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .flap-c.turn { animation: flap .34s cubic-bezier(.35,.1,.25,1); }
}
@keyframes flap {
  0%   { transform: rotateX(0deg);   filter: brightness(1); }
  45%  { transform: rotateX(-88deg); filter: brightness(.55); }
  55%  { transform: rotateX(-92deg); filter: brightness(.55); }
  100% { transform: rotateX(0deg);   filter: brightness(1); }
}

/* ---------- board slats ---------- */
/* Cards read as slats on a board: square-ish corners, a lit top edge, and a
   hairline between the label and the number the way a real board rules them. */
.pc { border-radius: 6px; background: var(--slat);
  border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.pc:hover { transform: none; border-color: var(--bell-dim); }
.pc.picked { border-color: var(--bell); box-shadow: 0 0 0 1px var(--bell), 0 8px 30px rgba(255,206,0,.10); }
.pc-top { padding: 14px 15px 12px; border-bottom: 1px solid var(--line); }
.pc-sym { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; font-size: .92rem; }
.pc-nm { font-family: var(--sans); }
.pc-line { padding: 20px 14px 16px; }
.pc-cap { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin-top: 12px; }
.pc-btns { border-radius: 0 0 5px 5px; }
.pc-btn { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.pc-av { border-radius: 4px; background: var(--tape); color: var(--bell);
  border: 1px solid var(--line-2); }

/* ---------- rules & marginalia ---------- */
/* Editorial furniture: a hairline with a label sitting on it, the way a
   broadsheet separates sections. */
.rule { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule b { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); font-weight: 500; }

.section { padding: 54px 0; }
.card { border-radius: 6px; }
.stats { border-radius: 6px; }
.listwrap { border-radius: 6px; }
.btn { border-radius: 5px; font-family: var(--mono); font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 14px 24px; }
.tab, .chip { border-radius: 4px; }

/* ============================================================
   FOLIO HEADER + STATUS RAIL
   ------------------------------------------------------------
   Replacing the two most generic components on the web: a
   wordmark-left/links-right bar, and a row of four equal
   label-value boxes. Both are what every generated page has.
   ============================================================ */

/* ---------- folio ---------- */
/* Two rows, like the top of a broadsheet: the masthead line carries the
   edition and a live readout; the nav sits under a hairline as small caps
   with rules between, not as pills floating in space. */
.bar { background: var(--tape); border-bottom: 1px solid var(--line-2); }
.folio { display: flex; align-items: baseline; gap: 18px; padding: 13px 0 11px; }
.folio .mark { gap: 9px; align-items: center; display: inline-flex; }
.folio .mark svg { width: 19px; height: 19px; }
.folio-mid { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); }
.folio-clock { margin-left: auto; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--body);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.folio-clock b { color: var(--bell); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .folio-mid { display: none; } }

.navrow { border-top: 1px solid var(--line); }
.navrow-in { display: flex; align-items: stretch; }
.navrow .nav { margin: 0; gap: 0; flex: 1; }
.navrow .nav a { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; padding: 11px 16px; border-radius: 0;
  border-right: 1px solid var(--line); color: var(--dim); }
.navrow .nav a:first-child { padding-left: 0; }
.navrow .nav a:hover { background: none; color: var(--cream); }
.navrow .nav a.on { background: none; color: var(--bell); box-shadow: inset 0 -2px 0 var(--bell); }
.navrow .cta { display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: var(--bell); color: #150f00; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 500; padding: 11px 18px;
  border-radius: 0; }
.navrow .cta:hover { background: var(--bell-2); text-decoration: none; }
@media (max-width: 780px) {
  .navrow .nav a { display: none; }
  .navrow .cta { width: 100%; justify-content: center; }
}

/* ---------- status rail ---------- */
/* Not four cards. One strip, ruled like a board header: micro caps above,
   the value below, hairlines between. The clock inside it is a real flip
   clock, so the one number that changes every second visibly does. */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 70%);
  margin-bottom: 30px; }
.rail-i { padding: 16px 20px; border-right: 1px solid var(--line); }
.rail-i:last-child { border-right: 0; }
.rail-k { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.rail-v { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--cream);
  font-variant-numeric: tabular-nums; }
.rail-v.bell { color: var(--bell); }
.rail-n { display: block; font-size: .72rem; color: var(--dim); margin-top: 7px; }
/* the flip clock sits a touch smaller than a serif value so the two line up */
.rail-i .flap .flap-c { width: 23px; height: 34px; font-size: 1.12rem; border-radius: 3px; }
.rail-i .flap .flap-c.thin { width: 11px; font-size: 1rem; }
@media (max-width: 560px) { .rail-i { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ============================================================
   TIMETABLE
   ------------------------------------------------------------
   Was three identical rounded cards with a number, a heading and
   a paragraph — the shape every generated page uses for "how it
   works". This is a running order instead, which is what the
   thing actually is: times down one side, a spine, the event on
   the other. The times are computed from today's real bell, so
   the column is data rather than illustration.
   ============================================================ */
.sched { border-top: 1px solid var(--line-2); }
.sched-row { display: grid; grid-template-columns: 96px 34px 1fr;
  border-bottom: 1px solid var(--line); align-items: stretch; }
.sched-row:hover { background: rgba(255,255,255,.014); }

.sched-t { padding: 20px 0 20px 2px; font-family: var(--mono); text-align: left; }
.sched-t b { display: block; font-size: 1.02rem; color: var(--cream); font-weight: 500;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sched-t span { display: block; font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-top: 4px; }

/* the spine: one continuous line with a node on each stop */
.sched-spine { position: relative; }
.sched-spine::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line-2); transform: translateX(-.5px); }
.sched-row:first-child .sched-spine::before { top: 26px; }
.sched-row:last-child .sched-spine::before { bottom: calc(100% - 27px); }
.sched-spine::after { content: ""; position: absolute; left: 50%; top: 26px;
  width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-2); }
/* the last stop is the bell itself, so it is filled */
.sched-row.is-bell .sched-spine::after { background: var(--bell); border-color: var(--bell);
  box-shadow: 0 0 0 3px rgba(255,206,0,.14); }
.sched-row.is-lock .sched-spine::after { background: var(--cream); border-color: var(--cream); }

.sched-b { padding: 20px 0 20px 8px; }
.sched-b h3 { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream); font-weight: 500; margin-bottom: 7px; }
.sched-row.is-bell .sched-b h3 { color: var(--bell); }
.sched-b p { font-size: .94rem; color: var(--body); max-width: 56ch; }

@media (max-width: 560px) {
  .sched-row { grid-template-columns: 74px 26px 1fr; }
  .sched-b p { font-size: .88rem; }
}

/* ---------- footer ---------- */
/* A colophon, not a link bar: the rule, then the note and the sections in
   two columns of small caps. */
footer { border-top: 2px solid var(--line-2); margin-top: 56px; padding: 26px 0 52px; }
.foot { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }
.foot .fine { max-width: 52ch; }
.foot .links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; justify-self: end; }
.foot .links a { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); }
.foot .links a:hover { color: var(--bell); text-decoration: none; }
.foot-mark { font-family: var(--serif); font-size: 1.1rem; color: var(--cream);
  display: block; margin-bottom: 8px; }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr; } .foot .links { justify-self: start; } }

/* ============================================================
   ESSAY
   ------------------------------------------------------------
   For prose pages. The heading hangs in a left margin and sticks
   while its section scrolls, the text sits in a real measure, and
   sections are divided by rules rather than boxed in cards. The
   h2-paragraph-grid-of-cards sandwich, repeated three times, is
   the other shape every generated page has.
   ============================================================ */
.essay { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px;
  border-top: 1px solid var(--line-2); }
.essay > * { border-bottom: 1px solid var(--line); padding: 30px 0; }
.essay-h h2 { font-size: 1.42rem; line-height: 1.1; margin: 0; }
.essay-h .n { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  color: var(--bell); margin-bottom: 10px; }
/* Sticks so the heading stays beside the paragraph it names, which is the
   point of hanging it in the margin at all. */
.essay-h > div { position: sticky; top: 132px; }
.essay-b p { max-width: 62ch; }
.essay-b p + p { margin-top: 13px; }
.essay-b .fine { max-width: 62ch; }

@media (max-width: 760px) {
  .essay { grid-template-columns: 1fr; gap: 0; }
  .essay-h { border-bottom: 0; padding-bottom: 0; }
  .essay-h > div { position: static; }
  .essay-b { padding-top: 12px; }
}

/* ---------- definition list ---------- */
/* For the limits: the term hangs, the rule separates, nothing is boxed.
   Four cards in a grid implies four equal things; these are not equal and a
   list does not pretend they are. */
.defs { border-top: 1px solid var(--line-2); }
.def { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 40px;
  padding: 22px 0; border-bottom: 1px solid var(--line); }
.def dt { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cream); }
.def dd { margin: 0; font-size: .94rem; color: var(--body); max-width: 62ch; }
@media (max-width: 700px) {
  .def { grid-template-columns: 1fr; gap: 8px; }
}

/* a pull quote, for the one line on the page that should stop you */
.pull { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2;
  color: var(--cream); border-left: 2px solid var(--bell); padding: 4px 0 4px 24px;
  margin: 34px 0; max-width: 24ch; }

/* ============================================================
   MARKET SLATS
   ------------------------------------------------------------
   The markets list was a conventional table. It is the same board
   language as the play page now, and depth — the argument the
   page is actually making — is drawn rather than only printed,
   because "$6.9M" and "$463k" side by side in a column does not
   show you that one is fifteen times the other.
   ============================================================ */
.mrow { display: grid; grid-template-columns: 44px minmax(120px, 1fr) 160px 92px auto;
  gap: 18px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.mrow:first-child { border-top: 1px solid var(--line-2); }
.mrow:hover { background: rgba(255,255,255,.014); }
.mrow .sym { font-family: var(--mono); font-weight: 500; letter-spacing: .06em;
  color: var(--cream); font-size: .92rem; }
.mrow .nm { display: block; font-size: .76rem; color: var(--dim); margin-top: 2px; }
.mrow .flap { justify-content: flex-end; }
.mrow .flap-c { width: 21px; height: 31px; font-size: 1.02rem; border-radius: 3px; }
.mrow .flap-c.thin { width: 10px; font-size: .92rem; }
.mrow .vol { font-family: var(--mono); font-size: .74rem; color: var(--dim);
  text-align: right; font-variant-numeric: tabular-nums; }

.depth-k { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
/* display:block matters: these are spans, and an inline element has no width
   to fill, so the bars computed correct percentages of nothing and the column
   rendered empty while the numbers beside it were right. */
.depth { display: block; }
.depth-bar { display: block; height: 3px; background: var(--line);
  position: relative; overflow: hidden; }
.depth-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bell);
  transition: width .5s cubic-bezier(.2,.7,.3,1); }
/* Below a threshold the bar turns amber-to-red: thin pools are the ones a
   determined attacker could lean on, and the page should say so in the bar
   rather than only in the paragraph underneath. */
.depth-bar i.thin { background: var(--down); }
.depth-v { font-family: var(--mono); font-size: .72rem; color: var(--body); margin-top: 6px;
  display: block; font-variant-numeric: tabular-nums; }

.mhead { display: grid; grid-template-columns: 44px minmax(120px, 1fr) 160px 92px auto;
  gap: 18px; padding-bottom: 10px; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.mhead span:nth-child(4) { text-align: right; }
.mhead span:last-child { text-align: right; }

@media (max-width: 720px) {
  .mrow, .mhead { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .mrow .depth, .mrow .vol, .mhead span:nth-child(3), .mhead span:nth-child(4) { display: none; }
}

/* ============================================================
   LEDGER
   ------------------------------------------------------------
   Three cards implied three parallel features. They are not
   features — they are three ways to rig this and the reason each
   one fails, which is an argument, and an argument reads as two
   columns facing each other rather than as boxes in a row.
   ============================================================ */
.ledger { border-top: 1px solid var(--line-2); }
.ldg-head { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.45fr);
  gap: 0 44px; padding: 12px 0 11px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim); }
.ldg { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.45fr);
  gap: 0 44px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ldg:hover { background: rgba(255,255,255,.014); }

.ldg-a { font-family: var(--serif); font-size: 1.24rem; line-height: 1.22; color: var(--cream);
  display: flex; gap: 12px; align-items: baseline; }
/* A struck mark against each attack: the page is a list of things that do not
   work, and the mark says so before the sentence does. */
.ldg-a::before { content: "\00d7"; color: var(--down); font-family: var(--mono);
  font-size: 1rem; flex: none; line-height: 1.3; }
.ldg-b { font-size: .94rem; color: var(--body); max-width: 60ch; }
.ldg-b em { font-style: normal; color: var(--cream); }

@media (max-width: 700px) {
  .ldg-head { display: none; }
  .ldg { grid-template-columns: 1fr; gap: 10px; }
}


/* The claim panel on the results page. Sits above the ledger because a winner
   arriving to collect should not have to scroll past a table to find it. */
.claim-panel {
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin: 0 0 26px;
  overflow: hidden;
}
.claim-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
}
.claim-row:first-child { border-top: 0; }
.claim-row span { flex: 1; min-width: 240px; }
.claim-row .btn { flex: 0 0 auto; }