/* BELLHAUL · split-flap departure board. Dark only. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --page: #0c0d0e;
  --board: #111214;
  --face: #1c1d20;
  --seam: #0a0a0b;
  --ink: #f2efe6;
  --muted: #9a978f;
  --brass: #e8a33d;
  --up: #5fae7a;
  --down: #c9645a;
  --line: #222327;
  --line-soft: #18191c;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gut: clamp(16px, 3vw, 40px);
  --flip: 150ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 14px/1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration-color: rgba(242, 239, 230, .35); text-underline-offset: 3px; }
a:hover { color: var(--brass); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.brass { color: var(--brass); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--brass); color: #111; padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ───────── header strip ───────── */
.hdr { border-bottom: 1px solid var(--line-soft); background: var(--page); }
.hdr .wrap { display: flex; align-items: center; gap: 14px 18px; min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.mark:hover { color: var(--ink); }
.mark b { font: 700 26px/1 var(--display); letter-spacing: .14em; }
.bell { width: 22px; height: 24px; color: var(--brass); transform-origin: 50% 8%; flex: none; }
.bell.ring { animation: swing 600ms cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes swing { 0% { transform: rotate(0); } 20% { transform: rotate(16deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } 88% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.tick { font: 600 13px/1 var(--mono); color: var(--brass); border: 1px solid rgba(232, 163, 61, .45); padding: 6px 8px; border-radius: 3px; letter-spacing: .04em; flex: none; }
.hdr nav { display: flex; gap: 18px; margin-left: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.hdr nav a { text-decoration: none; color: var(--muted); }
.hdr nav a:hover, .hdr nav a[aria-current="page"] { color: var(--ink); }
.hdr .sp { flex: 1 1 auto; }

.ca { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 5px 6px 5px 12px; background: var(--board); border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.ca-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ca-lab { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ca-val { font: 600 13px/1.3 var(--mono); color: #858279; letter-spacing: .02em; overflow-wrap: anywhere; }
.ca.live .ca-val { color: var(--brass); }
.ca-links { display: flex; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ca-links a { color: var(--muted); }
.ca-links a:hover { color: var(--brass); }
.cd { font: 600 15px/1 var(--mono); color: var(--brass); letter-spacing: .04em; padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--face); color: var(--ink); border-radius: 3px; cursor: pointer; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; flex: none; }
.copy:hover { border-color: var(--brass); color: var(--brass); }
.copy.ok { border-color: var(--up); color: var(--up); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 4px; font: 700 17px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; flex: none; white-space: nowrap; }
.btn.buy { background: var(--brass); color: #16110a; }
.btn.buy:hover { background: #f0b555; color: #16110a; }
.btn.buy[disabled] { background: transparent; color: #6d6a63; border-color: var(--line); cursor: not-allowed; }
.btn.ghost { border-color: var(--line); color: var(--ink); min-width: 46px; padding: 0 12px; }
.btn.ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn svg { width: 15px; height: 15px; }

/* ───────── hero line ───────── */
.hero { padding: clamp(18px, 3.2vw, 38px) 0 clamp(14px, 2.2vw, 24px); }
.tagline { margin: 0; font: 600 clamp(19px, 2.55vw, 34px)/1.12 var(--display); letter-spacing: .01em; max-width: 30em; text-wrap: balance; }
.tagline em { font-style: normal; color: var(--brass); }

/* ───────── split-flap ───────── */
.flaps { display: inline-flex; gap: .085em; vertical-align: middle; }
.flap {
  position: relative; display: inline-block; flex: none;
  width: .7em; height: 1.36em;
  font: 700 1em/1.36em var(--display); text-align: center; color: inherit;
  background: var(--face); border-radius: .08em;
  perspective: 3.2em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .035), 0 3px 5px -2px rgba(0, 0, 0, .75);
}
.flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap > span > i { position: absolute; left: 0; right: 0; height: 200%; font-style: normal; line-height: 1.36em; }
.flap .t, .flap .lt { top: 0; border-radius: .08em .08em 0 0; background: linear-gradient(180deg, #232428 0%, #1d1e21 100%); }
.flap .b, .flap .lb { bottom: 0; border-radius: 0 0 .08em .08em; background: linear-gradient(180deg, #191a1d 0%, #1b1c1f 100%); }
.flap .t > i, .flap .lt > i { top: 0; }
.flap .b > i, .flap .lb > i { top: -100%; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--seam); z-index: 4; }
.flap::before { content: ""; position: absolute; left: -1px; right: -1px; top: calc(50% - .09em); height: .18em; z-index: 5; background: linear-gradient(90deg, var(--seam) 0 .06em, transparent .06em calc(100% - .06em), var(--seam) calc(100% - .06em)); }
.flap .lt { z-index: 3; transform-origin: 50% 100%; animation: fall 80ms cubic-bezier(.55, 0, .9, .45) forwards; box-shadow: 0 -1px 0 rgba(255, 255, 255, .05) inset; }
.flap .lb { z-index: 3; transform-origin: 50% 0; transform: rotateX(90deg); animation: land 140ms linear 80ms forwards; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .55); }
.flap .b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)); opacity: 0; pointer-events: none; }
.flap.fl-on .b::after { animation: shade 220ms ease-out forwards; }
@keyframes fall { from { transform: rotateX(0); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(.45); } }
@keyframes land { 0% { transform: rotateX(90deg); filter: brightness(1.4); } 55% { transform: rotateX(-14deg); filter: brightness(1); } 78% { transform: rotateX(6deg); } 100% { transform: rotateX(0); filter: brightness(1); } }
@keyframes shade { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .flap .lt, .flap .lb { display: none; animation: none; }
  .flap.fl-on .b::after { animation: none; }
  .bell.ring { animation: none; }
}

/* ───────── board ───────── */
.board {
  position: relative;
  background: var(--board);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(14px, 1.8vw, 26px) clamp(14px, 2vw, 30px) 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 30px 60px -30px rgba(0, 0, 0, .8);
  --fs: clamp(13px, 1.48vw, 21.5px);
}
.board::before, .board::after { content: ""; position: absolute; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: #26272b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.board::before { left: 9px; } .board::after { right: 9px; }
.b-top { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-bottom: clamp(12px, 1.4vw, 18px); border-bottom: 1px solid var(--line-soft); }
.b-title { margin: 0; font-size: calc(var(--fs) * .78); color: var(--brass); font-weight: 400; line-height: 1; }
.b-next { display: flex; align-items: center; gap: 10px; font-size: calc(var(--fs) * .62); color: var(--ink); }
.b-next .lab { font: 400 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs); }
.grid th { font: 400 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; text-align: left; padding: 14px 0 10px; white-space: nowrap; }
.grid th.r, .grid td.r { text-align: right; }
.grid td { padding: 9px 0; vertical-align: middle; white-space: nowrap; border-top: 1px solid var(--line-soft); }
.grid th + th, .grid td + td { padding-left: clamp(10px, 1.4vw, 22px); }
.grid tbody tr:first-child td { border-top-color: var(--line); }
.c-sym .flaps { font-size: 1.12em; }
.c-name .flaps { font-size: .66em; }
.c-rep .flaps { font-size: .72em; }
.b-kick { display: none; }
.c-name { color: #d9d5ca; }
.c-live .flaps { color: var(--brass); }
.c-pl.up .flaps { color: var(--up); }
.c-pl.down .flaps { color: var(--down); }
.stale .c-live .flaps, .stale .c-pl .flaps, .stale .c-tval .flaps, .stale .c-tpl .flaps { opacity: .6; }
.c-rep .sub { display: block; font: 400 10.5px/1.2 var(--mono); color: var(--muted); letter-spacing: .06em; margin-top: 5px; text-transform: uppercase; }
.c-rep .sub b { color: var(--ink); font-weight: 600; }
.c-rep .sub a { color: var(--brass); }
.c-tx a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 44px; padding: 0 8px; font: 600 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; text-decoration: none; }
.c-tx a:hover { color: var(--brass); border-color: var(--brass); }
.grid tfoot td { border-top: 1px solid var(--line); padding-top: 12px; padding-bottom: 12px; }
.grid tfoot .c-sym .flaps { color: var(--muted); }
.cap { display: block; font: 400 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-top: 6px; }

.b-status { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; padding: 12px 0 14px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.b-status .st { display: inline-flex; align-items: center; gap: 9px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
.stale .dot { background: #6d6a63; }
.b-status .note { color: var(--muted); }

/* ───────── sections ───────── */
main .wrap > section:not(.board), .sect { padding: clamp(34px, 5vw, 64px) 0 0; }
.sh { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.sh h2 { margin: 0; font: 700 clamp(22px, 2.3vw, 30px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.sh .n { font: 400 11px/1 var(--mono); color: var(--brass); letter-spacing: .1em; }
.sh .aside { margin-left: auto; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-align: right; }
p { margin: 0 0 1em; }
.lede { font-size: 15px; color: #dcd8cd; max-width: 62ch; }

/* reports strip */
.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; background: var(--board); overflow: hidden; }
.day { padding: 16px 18px 18px; border-left: 1px solid var(--line-soft); min-width: 0; }
.day:first-child { border-left: 0; }
.day .dl { font-size: 18px; color: var(--muted); margin-bottom: 14px; display: block; }
.day.today .dl { color: var(--brass); }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.day li { display: grid; gap: 3px; }
.day .sym { font: 700 22px/1 var(--display); letter-spacing: .06em; }
.day .meta { font-size: 11px; color: var(--muted); letter-spacing: .02em; line-height: 1.45; }
.day .meta a { color: var(--muted); }
.day .meta a:hover { color: var(--brass); }
.day li.story .sym { color: #77746d; }
.day li.done .sym::after { content: " · REPORTED"; font: 600 10.5px/1 var(--mono); color: var(--brass); letter-spacing: .08em; vertical-align: middle; }
.day li.sell .sym { color: var(--brass); }
.tznote { font-size: 11px; color: var(--muted); margin-top: 10px; }

/* try it */
.term { display: flex; align-items: center; gap: 12px; background: #08090a; border: 1px solid var(--line); border-radius: 6px; padding: 8px 8px 8px 16px; max-width: 760px; }
.term code { flex: 1 1 auto; min-width: 0; font: 400 14px/1.5 var(--mono); color: var(--ink); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.term code::before { content: "$ "; color: var(--brass); }
.endpoints { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.endpoints a { color: var(--ink); }

/* the week */
.week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; counter-reset: wk; }
.tile { position: relative; background: var(--board); border: 1px solid var(--line); padding: 18px 18px 20px; min-width: 0; --fs: clamp(16px, 2vw, 26px); }
.tile + .tile { border-left: 0; }
.tile:first-child { border-radius: 6px 0 0 6px; }
.tile:last-child { border-radius: 0 6px 6px 0; }
.tile .flaps { font-size: var(--fs); }
.tile .tl { display: block; margin-top: 12px; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.tile .now { position: absolute; top: 14px; right: 14px; font: 600 10px/1 var(--mono); letter-spacing: .14em; color: #16110a; background: var(--brass); padding: 4px 6px 3px; border-radius: 2px; }
.tile.on { border-color: rgba(232, 163, 61, .55); box-shadow: inset 0 2px 0 var(--brass); z-index: 1; }
.tile.on .tl { color: var(--ink); }
.tile:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 2; width: 18px; height: 18px; line-height: 17px; text-align: center; font-size: 11px; color: var(--muted); background: var(--page); border: 1px solid var(--line); border-radius: 50%; }
.wknote { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* why small + fridays */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); }
.pair > section { padding-top: 0; }
.card { background: var(--board); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; }
.why p { font: 600 clamp(20px, 2vw, 26px)/1.22 var(--display); letter-spacing: .01em; margin: 0; }
.why p .brass { color: var(--brass); }
.fri-empty { font: 600 clamp(20px, 2vw, 26px)/1.22 var(--display); margin: 0; }
.fri-rule { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.rows li:first-child { border-top: 0; }
.rows .w { font: 700 18px/1 var(--display); letter-spacing: .06em; color: var(--brass); min-width: 44px; }
.up { color: var(--up); } .down { color: var(--down); }

/* ledger / tables */
.tbl-wrap { border: 1px solid var(--line); border-radius: 6px; background: var(--board); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 14px 16px 10px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 16px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.tbl tr:first-child td { border-top: 0; }
.tbl .r { text-align: right; }
.tbl .k { font: 700 15px/1.1 var(--display); letter-spacing: .08em; }
.tbl .k.buy { color: var(--ink); } .tbl .k.topup { color: var(--muted); } .tbl .k.sell { color: var(--brass); } .tbl .k.burn { color: var(--brass); }
.tbl a { white-space: nowrap; }
.tbl td.num:first-child { white-space: nowrap; }
.addr { font-size: 12px; overflow-wrap: anywhere; }
.more { margin-top: 12px; font-size: 12.5px; }

/* footer */
.ftr { margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line-soft); padding: 28px 0 40px; }
.ftr .wrap { display: grid; gap: 18px; }
.disc { margin: 0; max-width: 78ch; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.flinks { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px; letter-spacing: .04em; }
.flinks a { color: var(--ink); }
.flinks .wal { color: var(--muted); }
.fmark { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fmark .mark b { font-size: 20px; }

/* prose pages */
.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(24px, 4vw, 48px); }
.toc { position: sticky; top: 20px; align-self: start; display: grid; gap: 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.toc a { color: var(--muted); text-decoration: none; padding: 7px 0 7px 12px; border-left: 1px solid var(--line); }
.toc a:hover { color: var(--ink); border-left-color: var(--brass); }
.doc h1 { font: 700 clamp(36px, 5vw, 64px)/.95 var(--display); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 14px; }
.doc section { padding: 0 0 clamp(30px, 4vw, 48px); scroll-margin-top: 20px; }
.doc section > p, .doc section li { max-width: 68ch; color: #dcd8cd; }
.doc ol, .doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc dl { margin: 0; display: grid; gap: 0; }
.doc dt { font: 700 20px/1.2 var(--display); letter-spacing: .02em; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.doc dt:first-child { border-top: 0; padding-top: 0; }
.doc dd { margin: 6px 0 16px; color: #dcd8cd; max-width: 68ch; }
.ep { margin: 0 0 22px; }
.ep h3 { margin: 0 0 8px; font: 600 14px/1.3 var(--mono); }
.ep h3 a { color: var(--brass); }
.ep h3 span { color: var(--muted); font-weight: 400; }
pre { margin: 0; background: #08090a; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; overflow-x: auto; font: 400 12px/1.55 var(--mono); color: #cfcbc0; }
.callout { border-left: 2px solid var(--brass); padding: 4px 0 4px 16px; font: 600 clamp(20px, 2.2vw, 26px)/1.25 var(--display); margin: 0 0 28px; max-width: 40em; }

/* 404 */
.lost { padding-top: clamp(48px, 10vw, 120px); display: grid; gap: 22px; justify-items: start; --fs: clamp(22px, 5vw, 54px); }
.lost .flaps { font-size: var(--fs); }

/* ───────── responsive ───────── */
@media (max-width: 1080px) {
  .hdr nav { display: none; }
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day:nth-child(3) { border-left: 0; }
  .day:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; grid-auto-flow: column; overflow-x: auto; justify-content: start; gap: 0 4px; }
}

@media (max-width: 860px) {
  .hdr .wrap { flex-wrap: wrap; }
  .hdr .sp { display: none; }
  .ca { order: 5; flex: 1 1 100%; }
  .mark { margin-right: auto; }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile, .tile + .tile { border: 1px solid var(--line); border-radius: 6px !important; }
  .tile.on { border-color: rgba(232, 163, 61, .55); }
  .tile::after { display: none; }
  .pair { grid-template-columns: minmax(0, 1fr); }
}

/* board → stacked cards */
@media (max-width: 600px) {
  body { font-size: 13px; }
  .hdr .wrap { gap: 6px 10px; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .mark b { font-size: 22px; letter-spacing: .12em; }
  .bell { width: 18px; height: 20px; }
  .btn { min-height: 44px; font-size: 15px; padding: 0 14px; }
  .btn.ghost { min-width: 44px; padding: 0 10px; }
  .ca { min-height: 44px; padding: 4px 4px 4px 10px; gap: 8px; }
  .ca-val { font-size: 11.5px; }
  .ca.live .ca-val { font-size: 10.5px; letter-spacing: 0; }
  .ca-lab { font-size: 9.5px; letter-spacing: .05em; white-space: normal; }
  .cd { font-size: 14px; padding: 0 6px; margin-left: auto; }
  .copy { min-height: 44px; min-width: 56px; }
  .ca .copy { margin-left: auto; }
  .hero { padding: 10px 0 10px; }
  .tagline { font-size: 16px; line-height: 1.12; }
  .m-hide { display: none; }
  .mark b { font-size: 20px !important; }

  .board { padding: 8px 10px 0; --fs: 14px; border-radius: 5px; }
  .b-next { display: none !important; }
  .b-top { flex-direction: column; align-items: flex-start; gap: 4px !important; }

  .board::before, .board::after { display: none; }
  .b-top { padding-bottom: 8px; gap: 6px; }
  .b-title { font-size: 12.5px; }
  .b-next { font-size: 10.5px; }
  .grid, .grid thead, .grid tbody, .grid tfoot, .grid tr, .grid td { display: block; }
  .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .grid tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "sym name tx" "sh en en" "lv pl pl" "rep rep rep";
    column-gap: 10px; row-gap: 3px; align-items: center;
    padding: 6px 0 6px; border-top: 1px solid var(--line-soft);
  }
  .grid tbody tr:first-child { border-top: 1px solid var(--line); }
  .grid td, .grid th + th, .grid td + td { padding: 0; border: 0; text-align: left; }
  .grid td.r { text-align: left; }
  .grid td[data-l]::before { content: attr(data-l); display: inline-block; width: 46px; font: 400 9.5px/1 var(--mono); letter-spacing: .08em; color: var(--muted); vertical-align: middle; }
  .grid .c-sym { grid-area: sym; }
  .grid .c-sym .flaps { font-size: 1.1em; }
  .grid .c-name { grid-area: name; }
  .grid .c-name::after { content: attr(aria-label); font: 400 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .grid .c-tx { grid-area: tx; }
  .grid .c-tx a { min-height: 26px; min-width: 40px; }
  .grid .c-sh { grid-area: sh; }
  .grid .c-en { grid-area: en; }
  .grid .c-live { grid-area: lv; }
  .grid .c-pl { grid-area: pl; }
  .grid .c-en::before, .grid .c-pl::before { width: 38px !important; }
  .grid .c-rep { grid-area: rep; }
  .grid .c-rep .flaps { display: none; }
  .grid .c-rep .sub { margin-top: 0; font-size: 10px; }
  .grid .c-rep .sub .d { display: inline; }
  .grid tfoot tr { display: grid; grid-template-columns: auto auto auto auto; grid-template-areas: "ts tc tv tp"; justify-content: space-between; align-items: end; padding: 6px 0 7px; border-top: 1px solid var(--line); }
  .grid tfoot .c-sym { grid-area: ts !important; }
  .grid tfoot .c-en { grid-area: tc !important; }
  .grid tfoot .c-tval { grid-area: tv !important; }
  .grid tfoot .c-tpl { grid-area: tp !important; }
  .grid tfoot td[data-l]::before { display: block !important; width: auto !important; margin: 0 0 3px !important; font-size: 8.5px !important; }
  .grid tfoot td.blank { display: none; }
  .grid tfoot .cap { display: none; }
  .grid tfoot .c-sym .flaps { font-size: .8em; }
  .b-status { padding: 9px 0 10px; font-size: 10.5px; }
  .days { grid-template-columns: minmax(0, 1fr); }
  .day { border-left: 0 !important; border-top: 1px solid var(--line-soft); padding: 14px 16px; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .day:first-child { border-top: 0; }
  .day .dl { margin: 0; font-size: 16px; }
  .term { padding-left: 12px; }
  .term code { font-size: 12px; }
  .week { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tile { padding: 14px; --fs: 17px; }
  .card { padding: 18px; }
  .sh { flex-wrap: wrap; }
  .sh .aside { margin-left: 0; text-align: left; flex-basis: 100%; }
  .tbl th, .tbl td { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 601px) { .grid .c-rep .sub .d { display: none; } }
@media (max-width: 600px) {
  .tbl { min-width: 980px; }
  .tbl td br + .dim { display: inline-block; min-width: 260px; }
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .tbl-wrap::after { content: "scroll →"; position: sticky; left: 0; display: block; padding: 6px 12px 8px; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
}

/* ───────── 3D station hall: the board hangs in perspective ───────── */
.hall { position: relative; overflow: clip; padding-bottom: clamp(30px, 5vw, 70px); }
.hall::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 0%, rgba(232, 163, 61, .075), rgba(232, 163, 61, 0) 70%), radial-gradient(40% 30% at 50% 62%, rgba(242, 239, 230, .025), rgba(0, 0, 0, 0) 70%); }
.hall::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(#16171a, #121315); border-bottom: 1px solid #1f2023; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.hall .wrap { position: relative; }
.hall .hero { text-align: center; padding: clamp(30px, 4.2vw, 56px) 0 clamp(26px, 3.4vw, 44px); position: relative; z-index: 2; }
.hall .tagline { margin: 0 auto; max-width: 21em; font-size: clamp(20px, 2.5vw, 34px); }
.stage { position: relative; z-index: 2; perspective: 1700px; perspective-origin: 50% 135%; }
.slab { transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(calc(var(--rx, 6deg) + var(--pxo, 0deg))) rotateY(var(--ry, 0deg)); }
.board.slab { --rx: 6.5deg; --d: 30px; z-index: 1; border-top-color: #2b2c31; box-shadow: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 -1px 0 rgba(0, 0, 0, .6) inset, 0 60px 90px -40px rgba(0, 0, 0, .95), 0 22px 40px -24px rgba(0, 0, 0, .9); }
.face { position: absolute; display: block; pointer-events: none; }
.face.fb { left: 4px; right: 4px; bottom: 0; height: var(--d); transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(180deg, #08090a, #17181b 70%, #1f2024); border-radius: 0 0 4px 4px; }
.face.fl { top: 4px; bottom: 4px; left: 0; width: var(--d); transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #1a1b1e, #0a0a0b); }
.face.fr { top: 4px; bottom: 4px; right: 0; width: var(--d); transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #1a1b1e, #0a0a0b); }
.rod { position: absolute; top: -900px; height: 900px; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #232428, #46474d 45%, #1d1e21); transform: translateZ(-6px); }
.rod.l { left: 6%; } .rod.r { right: 6%; }
.rod::after { content: ""; position: absolute; left: -5px; bottom: -3px; width: 14px; height: 9px; border-radius: 2px; background: linear-gradient(#5a4a2c, #a77a33 40%, #6e5326); }
.board-shadow { position: absolute; left: 8%; right: 8%; bottom: -46px; height: 70px; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); filter: blur(8px); pointer-events: none; }
.board.slab::before, .board.slab::after { transform: translateZ(1px); }

/* bell: hangs from an arm off the right rod */
.bell-mount { position: absolute; right: calc(6% + 2px); top: -164px; width: 170px; height: 164px; pointer-events: none; transform: translateZ(10px); }
.bell-mount .arm { position: absolute; right: 0; top: 10px; width: 100px; height: 5px; border-radius: 3px; background: linear-gradient(#c79245, #8a6427 60%, #5c4219); box-shadow: 0 3px 6px rgba(0, 0, 0, .6); }
.bell-mount .hook { position: absolute; left: 69px; top: 12px; width: 2px; height: 22px; background: #6e5326; }
.bell-mount canvas, .bell-mount .bell-poster { position: absolute; left: 2px; top: 13px; width: 136px; height: 151px; }
.bell-mount .bell-poster { left: 30px; top: 30px; width: 80px; height: 88px; color: var(--brass); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.bell-mount.gl .bell-poster, .bell-mount.gl .hook { display: none; }
.bell-mount canvas { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .55)); }

/* the week: a smaller platform sign hung under the board */
.platform { position: relative; z-index: 1; perspective: 1400px; perspective-origin: 50% 150%; margin-top: clamp(56px, 7vw, 92px); }
.week.slab { --rx: 5deg; --d: 18px; position: relative; max-width: 940px; margin: 0 auto; gap: 8px; padding: 10px; background: var(--board); border: 1px solid var(--line); border-top-color: #2b2c31; border-radius: 6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 60px -30px rgba(0, 0, 0, .95); }
.week.slab .rod { top: -180px; height: 180px; }
.week.slab .rod.l { left: 12%; } .week.slab .rod.r { right: 12%; }
.platform .tile, .platform .tile + .tile { border: 1px solid #1d1e21; border-radius: 4px !important; background: linear-gradient(#141518, #121315); }
.platform .tile.on { border-color: rgba(232, 163, 61, .6); box-shadow: inset 0 2px 0 var(--brass); }
.platform .tile:not(:last-child)::after { right: -14px; }
.platform .wknote { text-align: center; }

@media (max-width: 1100px) {
  .hall .hero { text-align: left; padding-right: 170px; }
  .hall .tagline { margin: 0; }
}
@media (max-width: 860px) {
  .platform .tile::after { display: none; }
}
@media (max-width: 600px) {
  .hall::after { height: 6px; }
  .hall .hero { padding: 14px 64px 12px 0; }
  .hall .tagline { font-size: 16px; }
  .stage { perspective: 1100px; }
  .board.slab { --rx: 3deg; --d: 12px; }
  .rod { display: none; }
  .bell-mount { right: -4px; top: -66px; width: 60px; height: 66px; }
  .bell-mount .arm, .bell-mount .hook { display: none; }
  .bell-mount canvas { left: 0; top: 0; width: 60px; height: 66px; }
  .bell-mount .bell-poster { left: 10px; top: 14px; width: 40px; height: 44px; }
  .platform { margin-top: 34px; }
  .week.slab { --rx: 3deg; --d: 10px; padding: 8px; }
  .week.slab .rod { display: block; top: -70px; height: 70px; }
}

/* small flap rows: one face, faint hairline seam, no hinge pins (legible below ~18px) */
.b-title .flap, .b-next .flap, .c-rep .flap { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 3px -2px rgba(0, 0, 0, .7); }
.b-title .flap > .t, .b-next .flap > .t, .c-rep .flap > .t { height: 100%; border-radius: .08em; background: linear-gradient(180deg, #222327 0%, #1e1f22 49.5%, #1a1b1e 50.5%, #1b1c1f 100%); }
.b-title .flap > .b, .b-next .flap > .b, .c-rep .flap > .b { display: none; }
.b-title .flap::before, .b-next .flap::before, .c-rep .flap::before { display: none; }
.b-title .flap::after, .b-next .flap::after, .c-rep .flap::after { height: 1px; top: 50%; background: rgba(8, 8, 9, .55); }
/* NAME: plain small caps, not flaps */
.c-name { font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #bdb9ae; }
/* wall light behind the hung board */
.stage::before { content: ""; position: absolute; left: -6%; right: -6%; top: -60px; bottom: -40px; pointer-events: none; background: radial-gradient(60% 55% at 50% 25%, rgba(242, 228, 200, .05), rgba(0, 0, 0, 0) 70%); }
.board-shadow { bottom: -70px; height: 110px; left: 4%; right: 4%; background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); filter: blur(14px); }
.board.slab { --rx: 8deg; --ry0: -2.5deg; }
.slab { transform: rotateX(calc(var(--rx, 6deg) + var(--pxo, 0deg))) rotateY(calc(var(--ry0, 0deg) + var(--ry, 0deg))); }
@media (max-width: 600px) {
  .grid .flap { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 3px -2px rgba(0, 0, 0, .7); }
  .grid .flap > .t { height: 100%; border-radius: .08em; background: linear-gradient(180deg, #222327 0%, #1e1f22 49.5%, #1a1b1e 50.5%, #1b1c1f 100%); }
  .grid .flap > .b, .grid .flap::before { display: none; }
  .grid .flap::after { height: 1px; top: 50%; background: rgba(8, 8, 9, .55); }
  .board.slab { --rx: 4deg; --ry0: 0deg; }
  .grid .c-name { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .grid .c-name::after { content: none; }
  .hall .hero { padding-right: 72px; }
}

/* ───────── v3: obvious CA block ───────── */
.ca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "tag val cd copy" "tag lab links copy"; align-items: center; column-gap: 14px; row-gap: 2px; min-height: 54px; padding: 6px 6px 6px 0; border: 1px solid rgba(232, 163, 61, .38); border-radius: 5px; background: linear-gradient(180deg, #15161a, #101113); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 18px -10px rgba(0, 0, 0, .8); }
.ca-txt { display: contents; }
.ca-tag { grid-area: tag; align-self: stretch; display: flex; align-items: center; margin: -6px 0; padding: 0 12px; border-right: 1px solid rgba(232, 163, 61, .3); border-radius: 4px 0 0 4px; background: rgba(232, 163, 61, .1); color: var(--brass); font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ca-val { grid-area: val; font: 600 16px/1.2 var(--mono); color: #8f8c83; letter-spacing: .03em; }
.ca.live .ca-val { font-size: 14px; color: var(--brass); }
.ca-lab { grid-area: lab; }
.ca-links { grid-area: links; justify-self: end; }
.ca .cd { grid-area: cd; justify-self: end; padding: 0 4px; }
.ca-copy { grid-area: copy; min-height: 42px; min-width: 84px; font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--brass); background: rgba(232, 163, 61, .08); border-color: rgba(232, 163, 61, .55); }
.ca-copy:hover:not(:disabled) { background: var(--brass); color: #16110a; border-color: var(--brass); }
.ca-copy.ok { background: rgba(95, 174, 122, .12); }
.ca-copy:disabled { color: #8a877f; background: transparent; border-color: #2c2d31; cursor: not-allowed; }
.copy:focus-visible, .btn:focus-visible { outline-offset: 2px; }
.btn.ghost:focus-visible, .c-tx a:focus-visible { border-color: var(--brass); }

/* ───────── v3: the board as a physical object ───────── */
.stage { perspective: 1400px; perspective-origin: 50% 125%; }
.stage::before { background: radial-gradient(34% 46% at 84% 2%, rgba(232, 163, 61, .11), rgba(232, 163, 61, 0) 70%), radial-gradient(60% 55% at 50% 25%, rgba(242, 228, 200, .045), rgba(0, 0, 0, 0) 70%); }
.board.slab { --rx: 10deg; --ry0: -6deg; --d: 24px; border: 0; padding: clamp(18px, 2vw, 30px) clamp(18px, 2.2vw, 34px) 4px; background: linear-gradient(180deg, #131417, #101113 60%, #0f1012); }
.board.slab::before, .board.slab::after { display: none; }
.face.ft { display: none; }
.face.fb { left: 0; right: 0; background: linear-gradient(180deg, #050506, #1b1c20 55%, #2a2b30); }
.face.fl, .face.fr { top: 0; bottom: 0; }
.face.fl { background: linear-gradient(90deg, #2b2c31, #0b0b0c); }
.face.fr { background: linear-gradient(270deg, #2b2c31, #0b0b0c); }
.slab > .trim { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; border: 4px solid; border-color: #3a3b41 #232428 #17181a #2a2b30; box-shadow: inset 0 0 0 1px rgba(232, 163, 61, .3), inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #070708; z-index: 2; }
.slab > .bolts { position: absolute; inset: 8px; pointer-events: none; z-index: 3;
  background:
    radial-gradient(circle, #8c8e94 0 1.2px, #3b3c41 1.8px 3px, #0c0c0d 3.4px, transparent 4px) left top / 9px 9px no-repeat,
    radial-gradient(circle, #8c8e94 0 1.2px, #3b3c41 1.8px 3px, #0c0c0d 3.4px, transparent 4px) right top / 9px 9px no-repeat,
    radial-gradient(circle, #8c8e94 0 1.2px, #3b3c41 1.8px 3px, #0c0c0d 3.4px, transparent 4px) left bottom / 9px 9px no-repeat,
    radial-gradient(circle, #8c8e94 0 1.2px, #3b3c41 1.8px 3px, #0c0c0d 3.4px, transparent 4px) right bottom / 9px 9px no-repeat; }
.slab > .sheen { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; z-index: 4; mix-blend-mode: screen;
  background:
    linear-gradient(112deg, rgba(255, 250, 235, 0) 34%, rgba(255, 250, 235, .05) 46%, rgba(255, 250, 235, .012) 52%, rgba(255, 250, 235, 0) 62%) var(--sx, 50%) var(--sy, 50%) / 240% 240% no-repeat,
    radial-gradient(36% 60% at 86% -8%, rgba(232, 163, 61, .14), rgba(232, 163, 61, 0) 70%); }
.board-shadow { bottom: -90px; height: 130px; left: 2%; right: 2%; background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0)); filter: blur(16px); transform: translateX(3%); }
.rod { width: 3px; background: linear-gradient(90deg, #1c1d20, #5a5b62 40%, #2a2b2f 60%, #151618); box-shadow: 6px 0 10px rgba(0, 0, 0, .45); }

/* flap cells: recessed wells, darker top half, hairline hinge with pins */
.flap { box-shadow: 0 0 0 1px #070708, 0 0 0 2.5px #121315, inset 0 1px 0 rgba(255, 255, 255, .04), 0 5px 6px -3px rgba(0, 0, 0, .85); }
.flap .t, .flap .lt { background: linear-gradient(180deg, #19191c 0%, #1d1e21 100%); }
.flap .b, .flap .lb { background: linear-gradient(180deg, #232428 0%, #1f2023 100%); }
.flap::after { height: 1px; top: calc(50% - .5px); background: #050506; box-shadow: 0 1px 0 rgba(255, 255, 255, .035); }

/* the week: same object, smaller */
.platform { perspective: 1300px; perspective-origin: 50% 130%; margin-top: clamp(40px, 4.2vw, 60px); }
.week.slab { --rx: 9deg; --ry0: -5deg; --d: 16px; border: 0; padding: 12px; background: linear-gradient(180deg, #131417, #0f1012); }
.week.slab .rod { top: -150px; height: 150px; }
.platform .tile { background: linear-gradient(180deg, #17181b, #131417); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 -8px 16px rgba(0, 0, 0, .25); }
.hall { padding-bottom: clamp(26px, 3.6vw, 52px); }

@media (max-width: 860px) {
  .board.slab { --rx: 7deg; --ry0: -3deg; }
}
@media (max-width: 600px) {
  .ca { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 8px; min-height: 50px; padding: 4px 4px 4px 0; }
  .ca-tag { margin: -4px 0; padding: 0 7px; font-size: 8.5px; letter-spacing: .08em; }
  .ca-val { font-size: 13px; }
  .ca.live .ca-val { font-size: 10.5px; }
  .ca-lab { font-size: 8.8px; letter-spacing: .02em; }
  .ca .cd { font-size: 13px; padding: 0; margin: 0; }
  .ca-copy { min-height: 42px; min-width: 58px; font-size: 10.5px; letter-spacing: .08em; padding: 0 8px; }
  .board.slab { --rx: 5deg; --ry0: 0deg; --d: 12px; padding: 10px 11px 2px; }
  .slab > .bolts { inset: 5px; }
  .slab > .trim { border-width: 3px; }
  .week.slab { --rx: 5deg; --ry0: 0deg; --d: 10px; }
  .week.slab .rod { top: -60px; height: 60px; }
  .platform { margin-top: 30px; }
  .hall .hero { padding-top: 10px; padding-bottom: 10px; }
}
.hdr nav a { white-space: nowrap; }
.stage::before { top: -240px; bottom: -60px; left: -10%; right: -10%; background: radial-gradient(30% 40% at 84% 42%, rgba(232, 163, 61, .1), rgba(232, 163, 61, 0) 72%), radial-gradient(55% 50% at 50% 55%, rgba(242, 228, 200, .04), rgba(0, 0, 0, 0) 70%); }
@media (max-width: 1400px) { .hdr nav { gap: 14px; margin-left: 0; } .hdr nav .lg { display: none; } }
.hdr nav .sm { display: none; }
@media (max-width: 1400px) { .hdr nav .sm { display: inline; } }
.ca.live { grid-template-areas: "tag val val copy" "tag lab links copy"; }
@media (max-width: 600px) {
  .ca.live { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag val copy" "tag links copy"; }
  .ca.live .ca-lab { display: none; }
  .ca.live .ca-links { justify-self: start; }
  .ca.live .ca-val { font-size: 10.5px; line-height: 1.35; }
}
.ca.live { grid-template-areas: "tag val val copy" "tag links links copy"; }
.ca.live .ca-lab { display: none; }
.ca.live .ca-links { justify-self: start; }
@media (min-width: 861px) { .ca.live { flex: 0 0 auto; } .ca.live .ca-val { font-size: 12.5px; white-space: nowrap; } }