/* Fendrow — a drafting board for a ring nobody picks. Amber line-work on navy, one glow, no second hue. */
:root{
  --ground:#071018; --plate:#0B1A25; --sunk:#06121A; --rule:#16303F;
  --ink:#DCE7F0; --ink-dim:#7E97A8; --ink-faint:#4C6577;
  --amber:#FFC53D; --amber-soft:rgba(255,197,61,.16); --amber-line:rgba(255,197,61,.42);
  --display:"Chakra Petch",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --fig:"IBM Plex Mono",ui-monospace,monospace;
  --bandh:54px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink); font:15px/1.55 var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:44px 44px; background-position:-1px -1px;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.01em;margin:0}
.fig{font-family:var(--fig);font-variant-numeric:tabular-nums}

/* ---------- the band: sticky chrome, gauge + the buy, at every width ---------- */
#band{
  position:sticky; top:0; z-index:40;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px;
  min-height:var(--bandh); padding:7px 12px;
  background:rgba(7,16,24,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.bmark{display:flex;align-items:center;gap:8px;min-width:0}
.bmark img{width:26px;height:26px;display:block}
.bmark b{font-family:var(--display);font-size:16px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.bgauge{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.glab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.gnum{font-family:var(--fig);font-size:13px;color:var(--amber);white-space:nowrap}
.gbar{position:relative;flex:0 1 92px;height:5px;background:var(--sunk);border:1px solid var(--rule);overflow:hidden}
.gbar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--amber);transition:width .5s ease}
.gbar.over i{box-shadow:0 0 10px var(--amber)}
.gsay{font-size:11px;letter-spacing:.06em;color:var(--ink-dim);white-space:nowrap}
.bbuy{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:7px 12px;border:1px solid var(--amber);color:var(--amber);
  font-family:var(--display);font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  background:var(--amber-soft);
}
.bbuy:hover{background:var(--amber);color:#0A0A0A}
.bbuy.cold{border-color:var(--rule);color:var(--ink-faint);background:none;cursor:default}
.bwal{
  padding:7px 10px;border:1px solid var(--rule);color:var(--ink-dim);
  font-family:var(--fig);font-size:12px;white-space:nowrap;
}
.bwal.on{color:var(--amber);border-color:var(--amber-line)}

/* ---------- frame ---------- */
#frame{max-width:1180px;margin:0 auto;padding:18px 12px 60px;display:block}
#plate{min-width:0}
#margin{min-width:0;margin-top:26px}

/* ---------- the stage: the ring instrument ---------- */
.stage{border:1px solid var(--rule);background:var(--plate);padding:14px 12px 10px;position:relative}
.stagetop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.stagetop h1{font-size:19px;letter-spacing:.03em}
.bell{font-family:var(--fig);font-size:15px;color:var(--amber)}
.bell.cold{color:var(--ink-faint)}
.ringwrap{position:relative;width:100%;max-width:520px;margin:2px auto 0}
.ringwrap svg{display:block;width:100%;height:auto;overflow:visible}
.hubfig{font-family:var(--fig);fill:var(--amber);text-anchor:middle}
.hublab{font-size:9.5px;letter-spacing:.16em;fill:var(--ink-faint);text-anchor:middle;text-transform:uppercase;font-family:var(--body)}
.sq{transition:fill .25s ease,stroke .25s ease}
.sq.give{fill:var(--ground);stroke:var(--amber);stroke-width:2.5}
.sq.nerve{fill:var(--amber);stroke:var(--amber);stroke-width:2.5}
.sq.ghost{fill:none;stroke:var(--rule);stroke-width:2;stroke-dasharray:3 4}
.sq.mine{filter:drop-shadow(0 0 7px var(--amber))}
.halo{fill:none;stroke:var(--amber);stroke-width:1.2;opacity:.55}
.ed{stroke-linecap:round}
.ed.split{stroke:var(--amber);stroke-width:2;opacity:.5}
.ed.taken{stroke:var(--amber);stroke-width:3;opacity:.95}
.ed.burn{stroke:var(--ink-faint);stroke-width:2;stroke-dasharray:5 6;opacity:.8}
.ed.ghost{stroke:var(--rule);stroke-width:1.5;stroke-dasharray:3 5}
.burnx{stroke:var(--ink-dim);stroke-width:2.6;stroke-linecap:round}
.arrow{fill:var(--amber)}
.seatno{font-family:var(--fig);font-size:8px;fill:var(--ink-faint);text-anchor:middle}
.legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px;padding-top:9px;border-top:1px solid var(--rule)}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-dim);letter-spacing:.03em}
.legend i{width:12px;height:12px;display:inline-block;border:2px solid var(--amber)}
.legend i.f{background:var(--amber)}
.legend i.b{border:none;border-top:2px dashed var(--ink-faint);height:0;width:16px}

/* ---------- the throw switch + the commit ---------- */
.act{margin-top:14px;border:1px solid var(--rule);background:var(--plate);padding:14px 12px}
.actq{font-family:var(--display);font-size:15px;letter-spacing:.02em;margin-bottom:10px}
.actq b{color:var(--amber)}
.throw{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--amber-line);background:var(--sunk);position:relative;overflow:hidden}
.throw button{
  appearance:none;background:none;border:0;color:var(--ink-dim);cursor:pointer;
  font-family:var(--display);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 6px 13px;position:relative;z-index:2;transition:color .2s ease;
}
.throw button.on{color:#0A0A0A}
.throw .knob{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--amber);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:1}
.throw.give .knob{transform:translateX(100%)}
.throwsub{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:11.5px;color:var(--ink-faint);line-height:1.35}
.throwsub span{flex:1}
.throwsub span:last-child{text-align:right}
.go{
  display:block;width:100%;margin-top:12px;padding:15px 12px;cursor:pointer;
  background:var(--amber);color:#0A0A0A;border:1px solid var(--amber);
  font-family:var(--display);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
}
.go.ghosted{background:none;color:var(--ink-faint);border-color:var(--rule);cursor:default}
.go.line{background:none;color:var(--amber)}
.seatline{margin-top:10px;font-size:12.5px;color:var(--ink-dim);line-height:1.5}
.seatline b{color:var(--amber);font-family:var(--fig)}

/* ---------- leaves: the cards in the margin ---------- */
.leaf{border:1px solid var(--rule);background:var(--plate);padding:13px 12px;margin-bottom:14px}
.leaf h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px;font-family:var(--body);font-weight:600}
.leaf p{margin:0 0 8px;font-size:13px;color:var(--ink-dim);line-height:1.5}
.leaf p:last-child{margin-bottom:0}
.leaf .k{color:var(--amber)}
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.figs div{border:1px solid var(--rule);background:var(--sunk);padding:8px 9px}
.figs dt{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px}
.figs dd{margin:0;font-family:var(--fig);font-size:15px;color:var(--ink)}
.figs dd.hot{color:var(--amber)}

/* ---------- the tape ---------- */
.tape{list-style:none;margin:0;padding:0}
.tape li{
  display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline;
  padding:7px 0;border-bottom:1px dotted var(--rule);font-size:12.5px;
}
.tape li:last-child{border-bottom:0}
.tape .who{font-family:var(--fig);font-size:12px;color:var(--ink)}
.tape .what{color:var(--ink-dim)}
.tape .what b{color:var(--amber);font-weight:600}
.tape .when{font-family:var(--fig);font-size:11px;color:var(--ink-faint)}
.empty{font-size:13px;color:var(--ink-faint);line-height:1.5;margin:0}

/* ---------- rows: closed rings, seats ---------- */
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.rows li:last-child{border-bottom:0}
.rows .rid{font-family:var(--fig);font-size:13px;color:var(--amber)}
.rows .rmid{font-size:12.5px;color:var(--ink-dim)}
.rows .rend{font-family:var(--fig);font-size:13px;text-align:right}
.tag{display:inline-block;padding:1px 6px;border:1px solid var(--rule);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.tag.nerve{border-color:var(--amber-line);color:var(--amber)}

/* ---------- prose ---------- */
.prose h1{font-size:22px;margin-bottom:12px}
.prose h2{font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin:22px 0 8px;font-family:var(--body);font-weight:600}
.prose p,.prose li{font-size:14px;color:var(--ink-dim);line-height:1.62}
.prose p{margin:0 0 10px}
.prose ol,.prose ul{margin:0 0 10px;padding-left:20px}
.prose b{color:var(--ink)}
.prose code{font-family:var(--fig);font-size:13px;color:var(--amber)}
.ledger{width:100%;border-collapse:collapse;margin:4px 0 10px}
.ledger th,.ledger td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--rule);font-size:12.5px}
.ledger th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.ledger td{color:var(--ink-dim)}
.ledger td.f{font-family:var(--fig);color:var(--amber)}
.scroll{overflow-x:auto}

/* ---------- footer ---------- */
#colophon{border-top:1px solid var(--rule);padding:20px 12px 34px;max-width:1180px;margin:0 auto}
.cnav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}
.cnav a{font-size:12px;letter-spacing:.06em;color:var(--ink-dim)}
.cnav a:hover{color:var(--amber)}
.caddr{font-family:var(--fig);font-size:10.5px;color:var(--ink-faint);line-height:1.9;word-break:break-all}
.caddr b{color:var(--ink-dim);font-weight:400}
.caddr a{color:var(--ink-dim)}
.csoc{display:flex;gap:14px;margin:10px 0 8px}
.csoc a{font-size:12px;color:var(--amber)}
.cline{font-size:11px;color:var(--ink-faint);margin:0}

/* ---------- drawer + flash ---------- */
#drawer{position:fixed;inset:0;z-index:60;background:rgba(3,8,12,.82);display:flex;align-items:flex-end;justify-content:center;padding:0}
#drawer[hidden]{display:none!important}
.dcard{width:100%;max-width:520px;background:var(--plate);border:1px solid var(--rule);border-bottom:0;padding:16px 14px 26px}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dhead h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.dhead button{background:none;border:1px solid var(--rule);color:var(--ink-dim);width:30px;height:30px;cursor:pointer;font-size:14px}
.picks{display:grid;gap:8px}
.picks button{display:flex;align-items:center;gap:10px;padding:12px;background:var(--sunk);border:1px solid var(--rule);color:var(--ink);cursor:pointer;font:inherit;text-align:left}
.picks img{width:22px;height:22px}
.flash{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  background:var(--amber);color:#0A0A0A;padding:10px 16px;font-size:13px;font-weight:500;max-width:88vw;
}

/* ---------- ~720px: one column still, but a wider measure and a bigger instrument ---------- */
@media (min-width:720px){
  body{font-size:16px}
  :root{--bandh:60px}
  #frame{padding:26px 22px 70px}
  .stage{padding:20px 18px 14px}
  .stagetop h1{font-size:23px}
  .ringwrap{max-width:600px}
  .act{padding:18px 18px}
  .throw button{font-size:17px;padding:17px 6px 15px}
  .figs{grid-template-columns:repeat(4,1fr)}
  #colophon{padding:26px 22px 40px}
}

/* ---------- ≥1000px: the page recomposes — instrument left, the room down the right ---------- */
@media (min-width:1000px){
  #frame{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:26px;align-items:start;padding:30px 26px 80px}
  #margin{margin-top:0;position:sticky;top:calc(var(--bandh) + 18px)}
  .ringwrap{max-width:640px}
  .stagetop h1{font-size:26px}
  .figs{grid-template-columns:repeat(2,1fr)}
  .bgauge{gap:10px}
  .gbar{flex-basis:130px}
  .prose{max-width:760px}
}
@media (min-width:1260px){
  #frame{grid-template-columns:minmax(0,1fr) 380px}
}

/* ---------- narrow phones: keep the band to two live things ---------- */
@media (max-width:560px){
  .bbuy .bw{display:none}
  .glab,.gsay{display:none}
  .gbar{flex-basis:56px}
}
@media (max-width:400px){
  .bmark b{display:none}
  .bwal{padding:7px 8px;font-size:11px}
}