/* ═══════════════════════════════════════════════════════════════════════
   ORE-SIGNALS — design system

   Sibling to ₿RS Signals, not a clone. Same bones: one monospace family, no
   webfont, hierarchy from weight and letter-spacing, nothing moves unless
   the data moves.

   The difference is what gets to be bright. On the trading site that is
   orange, because orange is the brand. Here it is the plate — the cymatic
   figure is the only luminous thing on any page, and the rest recedes so
   you look at it. Amber survives as an accent so the two sites read as
   siblings rather than strangers.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --void:#07080b;
  --panel:#0d0f14;
  --panel-2:#12151c;
  --rule:#1b1f28;
  --rule-lit:#272c37;

  --amber:#ff9900;
  --amber-hi:#ffb545;
  --ember:#8a5f14;
  --violet:#9b7cff;
  --green:#3ddc84;

  --text:#e8e4da;
  --muted:#8b8577;
  --faint:#5a564c;

  --mono:"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --max:940px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--void);color:var(--muted);font-family:var(--mono);
  font-size:13px;line-height:1.75;-webkit-font-smoothing:antialiased;
  padding-bottom:20px}
::selection{background:var(--amber);color:var(--void)}
:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-hi)}
img{max-width:100%;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.tiny{font-size:10.5px;color:var(--faint);line-height:1.8}
.num{font-variant-numeric:tabular-nums}

/* ── the recurring label ──────────────────────────────────────────── */
.lbl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ember);display:flex;align-items:center;gap:14px;
  margin-bottom:18px}
.lbl::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ── nav ──────────────────────────────────────────────────────────── */
#rail{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:0 22px;border-bottom:1px solid var(--rule);flex-wrap:wrap;
  position:sticky;top:0;z-index:30;background:rgba(7,8,11,.92);
  backdrop-filter:blur(10px)}
#rail .mark{font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--text);padding:15px 0}
#rail .mark span{color:var(--ember)}
#rail nav{display:flex;gap:20px;flex-wrap:wrap}
#rail nav a{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);padding:15px 2px;display:inline-block;line-height:1}
#rail nav a:hover,#rail nav a[aria-current]{color:var(--amber)}

/* ── masthead ─────────────────────────────────────────────────────── */
.mast{padding:44px 0 30px;text-align:center}
.mast h1{font-size:44px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--text);font-weight:400;text-indent:.42em}
.mast .sub{margin-top:14px;font-size:12px;color:var(--faint);letter-spacing:.05em}

h2{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);
  font-weight:400;margin-bottom:16px}
h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
  font-weight:400}
p{max-width:620px;margin-bottom:14px}
em{font-style:normal;color:var(--text)}
strong{color:var(--text);font-weight:400}

section{padding:52px 0;border-top:1px solid var(--rule);margin-top:52px}

/* ── the plate ────────────────────────────────────────────────────── */
.plate{position:relative;width:100%;max-width:620px;margin:0 auto;
  aspect-ratio:1;border:1px solid var(--rule);background:#05060a}
.plate canvas,.plate img{position:absolute;inset:0;width:100%;height:100%}
.plate a#plate-link{position:absolute;inset:0;display:block}
.plate a#plate-link img{position:static;display:block}
.plate .mode,.plate .cv{position:absolute;bottom:12px;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.plate .mode{left:14px}
.plate .cv{right:14px;font-variant-numeric:tabular-nums}

/* ── controls ─────────────────────────────────────────────────────── */
button,.btn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:12px 30px;border:1px solid var(--ember);
  background:none;color:var(--amber);cursor:pointer;display:inline-block;
  transition:background .2s}
button:hover,.btn:hover{background:rgba(255,153,0,.07)}
button[data-on="true"]{background:rgba(255,153,0,.12)}
input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:1px;
  background:var(--rule-lit);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;
  height:9px;background:var(--amber);cursor:pointer;border-radius:50%}
input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--amber);
  cursor:pointer;border:0;border-radius:50%}

/* ── voices ───────────────────────────────────────────────────────── */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.voice{background:var(--panel);padding:20px 18px}
.voice .role{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:4px 0 12px}
.voice .say{font-size:11.5px;color:var(--text);min-height:34px}
.lvl{height:1px;background:var(--rule-lit);margin-top:12px;position:relative}
.lvl i{position:absolute;inset:0 auto 0 0;width:0;height:1px;
  background:var(--ember);transition:width 1.2s ease}
.voice .hz{font-size:9.5px;color:var(--faint);margin-top:8px;
  font-variant-numeric:tabular-nums;margin-bottom:10px}
.voice input[type=range]{width:100%;margin-top:4px}

/* ── month sections ───────────────────────────────────────────────── */
.month-section{margin-bottom:38px}
.month-head{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
.month-head span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text)}
.month-head .month-n{font-size:10px;letter-spacing:.12em;color:var(--faint)}

/* ── archive grid ─────────────────────────────────────────────────── */
.grid-days{display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;margin-top:8px}
@media(max-width:900px){.grid-days{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.grid-days{grid-template-columns:1fr}}
.day{border:1px solid var(--rule);background:var(--panel);
  transition:border-color .2s}
.day:hover{border-color:var(--ember)}
.day .thumb{aspect-ratio:1;background:#05060a;position:relative;overflow:hidden}
.day .thumb img{width:100%;height:100%;object-fit:cover}
.day .meta{padding:12px 13px}
.day .date{font-size:12px;color:var(--text);letter-spacing:.06em}
.day .facts{font-size:9.5px;color:var(--faint);margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:.06em}
.day .chip{font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin-top:7px;display:inline-block}

/* ── key/value ────────────────────────────────────────────────────── */
.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 20px;font-size:12px}
.kv dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);padding-top:3px}
.kv dd{color:var(--muted)}
.kv dd.mono{font-variant-numeric:tabular-nums;word-break:break-all}

code{background:var(--panel-2);padding:2px 6px;color:var(--amber-hi);font-size:11.5px}
pre{background:var(--panel);border:1px solid var(--rule);border-left:1px solid var(--ember);
  padding:13px 15px;overflow-x:auto;font-size:11px;color:var(--muted);line-height:1.7}
pre code{background:none;padding:0}

table{width:100%;border-collapse:collapse;font-size:11.5px}
th{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;text-align:left;
  color:var(--ember);padding:8px 10px;border-bottom:1px solid var(--rule)}
td{padding:8px 10px;border-bottom:1px solid var(--rule);color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.state{text-align:center;margin-top:20px;font-size:12px;color:var(--text);
  min-height:20px}
.beat{text-align:center;margin-top:5px;font-size:10.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.pending{color:var(--faint);padding:24px;text-align:center}
.dead{color:#ff5252;padding:18px;border-left:1px solid #ff5252;
  background:rgba(255,82,82,.05);font-size:12px}

#foot{border-top:1px solid var(--rule);padding:28px 22px 44px;text-align:center;
  font-size:10px;color:var(--faint);letter-spacing:.1em;margin-top:52px}
#foot a{color:var(--ember);margin:0 9px}

@media(max-width:700px){
  .mast h1{font-size:28px;letter-spacing:.3em;text-indent:.3em}
  .voices{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd{margin-bottom:14px}
  #rail{padding:0 16px}
  #rail .mark{padding:12px 0}
  #rail nav{gap:14px;padding-bottom:4px}
  #rail nav a{padding:8px 2px}
  .wrap{padding:0 16px}
  section{padding:38px 0;margin-top:38px}
}