/* Plumbrow — the gauge wall. Nine columns, one rail, one composer. */
:root{
  --ground:#08070E; --deck:#100E1A; --edge:#241F38; --ink:#ECE9F6; --dim:#8C86A8;
  --glow:#9D7BFF; --glow-soft:rgba(157,123,255,.16); --chrome:#B9B6CC; --warm:#FFC25C;
  --face:"Saira Condensed",system-ui,sans-serif; --num:"Space Grotesk",ui-monospace,monospace;
  --railH:64px; --railW:200px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--num);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
code{font-family:var(--num);font-size:.86em;word-break:break-all}
h1,h2,h3{font-family:var(--face);font-weight:800;letter-spacing:0;margin:0}

/* ---- the rail (fixed at every width; carries the buy control) ---- */
.rail{position:fixed;z-index:40;left:0;right:0;bottom:0;height:var(--railH);
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:rgba(13,11,22,.94);backdrop-filter:blur(14px);border-top:1px solid var(--edge)}
.brandmark{display:flex;align-items:center;gap:8px;font-family:var(--face);font-weight:800;
  letter-spacing:.01em;font-size:17px;flex:0 0 auto}
.brandmark img{width:26px;height:26px;border-radius:7px}
.brandmark span{display:none}
.railnav{display:none}
.railbuy{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 14px;border-radius:999px;border:1px solid var(--glow);
  background:var(--glow-soft);color:var(--ink);font-weight:700;font-size:13px;white-space:nowrap}
.railbuy b{font-family:var(--face);font-weight:800;font-size:14px;letter-spacing:.02em}
.railbuy span{color:var(--glow);font-size:12px}
.railbuy.armed{background:var(--glow);border-color:var(--glow)}
.railbuy.armed b,.railbuy.armed span{color:#120B20}
/* a phone rail has to fit the mark, the buy pill AND connect: the long wording is desktop-only */
@media (max-width:559px){
  .railbuy{padding:9px 12px;gap:6px}
  .railbuy span{display:none}
  .railbuy::after{font-size:12px;color:var(--glow);font-weight:700}
  .railbuy[data-state="live"]::after{content:"buy"}
  .railbuy[data-state="soon"]::after{content:"soon"}
  .railbuy.armed::after{color:#120B20}
}
.railfoot{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.railfoot button{font:inherit;font-size:12px;padding:8px 11px;border-radius:9px;
  border:1px solid var(--edge);background:var(--deck);color:var(--dim);cursor:pointer}
.railfoot button.on{color:var(--ink);border-color:var(--glow)}
#social{display:none}

.shell{padding:18px 14px calc(var(--railH) + 26px);max-width:560px;margin:0 auto}

/* ---- preamble ---- */
.preamble h1{font-size:38px;line-height:1.02;margin-bottom:10px}
.preamble h1 em{font-style:normal;color:var(--glow)}
.preamble p{color:var(--dim);margin:0 0 6px;font-size:14.5px}
.crumb{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.crumb span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--edge);border-radius:6px;padding:4px 8px;background:var(--deck)}
.crumb span b{color:var(--ink);font-weight:700}

/* ---- the instrument ---- */
.instrument{margin-top:22px}
.dial{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.dial .lede{font-family:var(--face);font-weight:800;font-size:18px;letter-spacing:.01em}
.dial .tick{font-size:12.5px;color:var(--dim)}
.dial .tick b{color:var(--warm);font-weight:700}

.gauge{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;align-items:end;
  height:260px;padding:10px 8px 0;border:1px solid var(--edge);border-radius:14px;
  background:linear-gradient(180deg,#0D0B16 0%,#120F1E 100%)}
.pipe{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.column{position:relative;width:100%;flex:1 1 auto;display:flex;align-items:flex-end;
  border-radius:6px 6px 0 0;background:#191527;border:1px solid #241F38;border-bottom:0}
.fill{width:100%;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#5B45A8,#2A2140);
  transition:height .45s cubic-bezier(.2,.7,.3,1);min-height:2px}
.pipe.lead .fill{background:linear-gradient(180deg,var(--glow),#5233A8);box-shadow:0 0 18px var(--glow-soft)}
.pipe.picked .column{border-color:var(--glow);box-shadow:0 0 0 1px var(--glow)}
.depth{position:absolute;left:0;right:0;top:-17px;text-align:center;font-size:11px;
  font-weight:700;color:var(--chrome)}
.pipe.lead .depth{color:var(--glow)}
.plate{font-size:11px;color:var(--dim);font-weight:500;padding-bottom:9px}
.pipe.picked .plate{color:var(--ink)}
.rung{font-size:10px;letter-spacing:.04em;color:var(--warm);font-weight:700}

.composer{margin-top:12px;border:1px solid var(--edge);border-radius:14px;background:var(--deck);padding:14px}
.composer .line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.composer .line .l{font-family:var(--face);font-weight:800;font-size:18px}
.composer .line .r{font-size:12.5px;color:var(--dim)}
.composer .note{font-size:13px;color:var(--dim);margin:6px 0 12px}
.composer .note b{color:var(--ink);font-weight:700}
.act{width:100%;font:inherit;font-weight:700;font-size:15px;padding:14px;border-radius:11px;
  border:1px solid var(--glow);background:var(--glow);color:#120B20;cursor:pointer}
.act:disabled{background:var(--deck);color:var(--dim);border-color:var(--edge);cursor:not-allowed}
.act.quiet{background:transparent;color:var(--ink);border-color:var(--edge);margin-top:8px}

/* ---- the second column ---- */
.aside{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.panel{border:1px solid var(--edge);border-radius:14px;background:var(--deck);overflow:visible}
.panel>h3{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  font-family:var(--num);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--edge)}
.tapelog{display:flex;flex-direction:column}
.strike{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid #1B172A;font-size:13px}
.strike:last-child{border-bottom:0}
.strike .no{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:#191527;border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--chrome)}
.strike .who{flex:1 1 auto;min-width:0;color:var(--dim);font-size:12.5px}
.strike .who a{color:var(--chrome)}
.strike .read{flex:0 0 auto;font-weight:700;color:var(--glow)}
.strike .sh{flex:0 0 auto;font-size:12px;color:var(--warm)}
.strike .when{flex:0 0 auto;font-size:11.5px;color:#5E5878;min-width:30px;text-align:right}
.hollow{padding:14px;color:var(--dim);font-size:13px}
.primer{padding:13px 14px;font-size:13px;color:var(--dim)}
.primer dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.primer dt{color:var(--chrome);font-weight:500}
.primer dd{margin:0;color:var(--ink)}
.bellcard{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #1B172A;font-size:13px}
.bellcard:last-child{border-bottom:0}
.bellcard .rd{flex:0 0 auto;color:var(--dim);font-size:12px}
.bellcard .won{flex:1 1 auto;color:var(--ink)}
.bellcard .won b{color:var(--glow)}
.bellcard .pot{flex:0 0 auto;color:var(--warm);font-weight:700}

/* ---- prose + ledger pages ---- */
.longform{margin-top:20px;color:var(--dim);font-size:15px}
.longform h3{color:var(--ink);font-size:18px;margin:22px 0 7px}
.longform p{margin:0 0 10px}
.longform code{color:var(--chrome)}
.kvrow{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin:8px 0 0}
.kvrow span{color:var(--dim)}
.kvrow code{color:var(--ink)}

/* ---- base ---- */
.base{margin-top:26px;padding-top:16px;border-top:1px solid var(--edge);font-size:12px;color:#5E5878}
.base .addr{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-bottom:6px}
.base .addr b{color:var(--dim);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.base .addr code{color:var(--chrome)}
.base button{font:inherit;font-size:11px;background:none;border:1px solid var(--edge);color:var(--dim);
  border-radius:6px;padding:2px 7px;cursor:pointer}

/* ---- sheet + flash ---- */
#sheetwrap{position:fixed;inset:0;z-index:60;background:rgba(5,4,10,.78);display:flex;align-items:flex-end}
.sheet{width:100%;max-width:520px;margin:0 auto;background:var(--deck);border:1px solid var(--edge);
  border-radius:16px 16px 0 0;padding:16px;max-height:86vh;overflow:auto}
.sheethead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#sheetTitle{font-family:var(--face);font-weight:800;font-size:17px}
#sheetClose{background:none;border:0;color:var(--dim);font-size:24px;line-height:1;cursor:pointer}
.pickers{display:flex;flex-direction:column;gap:8px}
.pickers button{display:flex;align-items:center;gap:10px;font:inherit;padding:11px;border-radius:10px;
  border:1px solid var(--edge);background:var(--ground);color:var(--ink);cursor:pointer}
.pickers button img{width:22px;height:22px;border-radius:5px}
.flash{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--railH) + 16px);z-index:80;
  background:#1B1630;border:1px solid var(--glow);color:var(--ink);padding:10px 15px;border-radius:10px;
  font-size:13px;max-width:92vw}

/* ---- wider: one column, bigger measure ---- */
@media (min-width:640px){
  .shell{max-width:680px;padding:26px 22px calc(var(--railH) + 34px)}
  .preamble h1{font-size:46px}
  .gauge{height:320px;gap:8px;padding:12px 12px 0}
  .plate{font-size:12px}
  .depth{font-size:12px;top:-19px}
  .brandmark span{display:inline}
  #social{display:flex;gap:9px;font-size:12px;color:var(--dim)}
}

/* ---- desktop: the rail stands up, the wall and the activity sit side by side ---- */
@media (min-width:1000px){
  .rail{top:0;right:auto;bottom:0;width:var(--railW);height:auto;flex-direction:column;
    align-items:stretch;gap:0;padding:22px 16px;border-top:0;border-right:1px solid var(--edge)}
  .brandmark{font-size:20px;margin-bottom:26px}
  .brandmark img{width:32px;height:32px}
  .railnav{display:flex;flex-direction:column;gap:2px;margin-bottom:auto}
  .railnav a{padding:8px 10px;border-radius:8px;color:var(--dim);font-size:14px}
  .railnav a:hover{background:var(--ground);color:var(--ink)}
  .railbuy{margin:0 0 14px;justify-content:center;padding:13px 14px;font-size:14px}
  .railbuy b{font-size:14px}
  .railfoot{flex-direction:column;align-items:stretch;gap:9px}
  .railfoot button{width:100%;padding:10px;font-size:13px}
  #social{justify-content:center}

  .shell{max-width:1180px;margin:0 auto;padding:34px 34px 44px calc(var(--railW) + 34px);
    display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:30px;align-items:start}
  .preamble{grid-column:1 / -1;max-width:760px}
  .preamble h1{font-size:62px}
  .preamble p{font-size:16px;max-width:660px}
  .instrument{grid-column:1;margin-top:28px}
  .aside{grid-column:2;margin-top:28px}
  .base{grid-column:1 / -1}
  .gauge{height:440px;gap:10px;padding:16px 16px 0}
  .depth{font-size:13.5px;top:-21px}
  .plate{font-size:13px}
  .rung{font-size:11px}
  .composer{padding:18px}
  .composer .line .l{font-size:21px}
  .act{font-size:16px;padding:15px}
  .flash{bottom:26px;left:calc(50% + var(--railW)/2)}
}
@media (min-width:1280px){
  .shell{grid-template-columns:minmax(0,1fr) 380px}
  .gauge{height:480px}
  .preamble h1{font-size:70px}
}