:root{
  --bg:#0a0a0d; --panel:#121218; --line:#26262f; --line-soft:#1b1b22;
  --ink:#e8e8ee; --dim:#8b8b9a; --dimmer:#5c5c6b;
  --pink:#ff4fd8; --cyan:#28e6ff; --red:#ff2a5f; --amber:#ffb000;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Georgia,'Times New Roman',serif;
  --max:1180px;
}
*{box-sizing:border-box}
html,body{max-width:100%; overflow-x:hidden}
html{scroll-behavior:smooth}
/* sticky topbar height, so #anchors land below it instead of under it */
:root{--bar:64px}
section[id], .tier[id], [id^="plate-"], #rig{scroll-margin-top:calc(var(--bar) + 18px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 520px at 50% -8%, rgba(255,79,216,.10), transparent 70%);
}
.wrap{position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:0 24px}
a{color:inherit}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:50;
  background:rgba(10,10,13,.86); backdrop-filter:blur(10px);
}
.topbar{position:sticky}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:10px; min-height:52px; padding-top:8px; padding-bottom:8px; position:relative}
.crumb{font-size:12px; letter-spacing:.14em; color:var(--dim); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.status{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto}
.navbtn{flex:0 0 auto}
.crumb b{color:var(--ink); font-weight:600}
.crumb:hover{color:var(--pink)}
/* menu */
.navbtn{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:3px;
  padding:7px 13px; cursor:pointer; white-space:nowrap}
.navbtn:hover,.navbtn[aria-expanded="true"]{border-color:var(--pink); color:var(--pink)}
.navmenu{position:absolute; right:24px; top:100%; z-index:60; min-width:250px;
  background:var(--panel); border:1px solid var(--line); border-radius:0 0 3px 3px;
  box-shadow:0 18px 40px rgba(0,0,0,.6)}
.navmenu a{display:block; padding:15px 18px; text-decoration:none; color:var(--ink);
  font-size:12px; letter-spacing:.12em; border-bottom:1px dashed var(--line-soft)}
.navmenu a:last-child{border-bottom:0}
.navmenu a:hover{background:rgba(255,79,216,.1); color:var(--pink)}
@media(max-width:700px){ .navmenu{left:12px; right:12px; min-width:0} }
@media(max-width:700px){
  :root{--bar:56px}
  .crumb{font-size:11px; letter-spacing:.1em}
  .c-lab,.c-sep{display:none}
  .status{font-size:10px; letter-spacing:.08em; max-width:46vw}
}
@media(max-width:420px){
  .status{max-width:38vw}
}
.status{font-size:11px; letter-spacing:.16em; color:var(--dimmer)}
.status{text-decoration:none}
.status .dot{display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--amber); margin-right:7px; vertical-align:1px}
.status.live{color:var(--pink)}
.status.live .dot{background:var(--pink); animation:pulse 1.8s infinite}

/* ---------- masthead ---------- */
.mast{padding:78px 0 46px}
.hero-cta{margin-top:0; margin-bottom:6px}
.mast h1{
  font-size:clamp(42px,9vw,104px); line-height:.92; margin:0;
  letter-spacing:-.02em; font-weight:600;
}
.mast h1 span{color:var(--pink)}
.mast .sub{
  margin:20px 0 0; font-family:var(--serif); font-style:italic;
  font-size:clamp(17px,2.4vw,23px); color:var(--dim);
}
.meta{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;
  font-size:11px; letter-spacing:.14em; color:var(--dim);
}
.meta span{border:1px solid var(--line); border-radius:2px; padding:6px 11px}

/* ---------- hero cta ---------- */
.hc-lab{display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:10px; letter-spacing:.2em; color:var(--pink); margin-bottom:12px}
.hc-lab .dot{width:7px; height:7px; border-radius:50%; background:var(--pink);
  animation:pulse 1.8s infinite}

/* the primary button: solid fill, dark text, presses down */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:60px; padding:19px 24px; cursor:pointer;
  text-decoration:none; border:0; border-radius:6px;
  background:var(--pink); color:#0a0a0d;
  font-family:var(--mono); font-size:16px; font-weight:600; letter-spacing:.06em;
  box-shadow:0 4px 0 #b8259b, 0 8px 22px rgba(255,79,216,.28);
  transition:transform .08s ease, box-shadow .08s ease, filter .16s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 #b8259b, 0 2px 8px rgba(255,79,216,.2)}
.btn .arrow{font-size:19px; line-height:1}

/* secondary: same raised shape, lighter face so the edge actually reads
   against the near-black ground */
.btn.ghost{
  background:#2b2b36; color:var(--ink); border:1px solid #43434f;
  box-shadow:0 4px 0 #16161d, 0 8px 18px rgba(0,0,0,.5);
}
.btn.ghost:hover{background:#34343f; filter:none}
.btn.ghost:active{transform:translateY(4px); box-shadow:0 0 0 #16161d, 0 2px 6px rgba(0,0,0,.4)}
.btn.sm{min-height:52px; font-size:13px; padding:15px 20px}

.hc-sub{display:block; margin-top:11px; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:14px; color:var(--dim)}
@media(max-width:860px){ .btn{font-size:15px} }

/* ---------- tldr + faq ---------- */
.tldr{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:34px}
.tldr div{border:1px solid var(--line); border-radius:3px; background:var(--panel); padding:18px 18px}
.tldr b{display:block; font-size:17px; letter-spacing:-.01em; color:var(--pink)}
.tldr span{display:block; margin-top:7px; font-size:12px; line-height:1.55; color:var(--dim)}
.faq details{border-top:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer; padding:17px 0; font-size:15px; font-weight:600;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--dim); font-size:19px; line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{color:var(--pink)}
.faq details p{margin:0 0 14px; font-size:14px; color:#b8b8c6}
.faq details p:last-child{padding-bottom:6px}
@media(max-width:860px){ .tldr{grid-template-columns:1fr} }

/* ---------- tail ---------- */
.tail{border-bottom:0}
.tail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:860px){ .tail-grid{grid-template-columns:1fr} }

/* ---------- generic section ---------- */
section{padding:64px 0; border-bottom:1px solid var(--line-soft)}
.eyebrow{
  font-size:11px; letter-spacing:.22em; color:var(--dimmer);
  margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.eyebrow::after{content:''; flex:1; height:1px; background:var(--line-soft)}
h2{font-size:26px; letter-spacing:-.01em; margin:0 0 18px; font-weight:600}
h3{font-size:16px; letter-spacing:.02em; margin:0 0 10px; font-weight:600}
p{margin:0 0 16px; color:#c9c9d4; max-width:68ch}
p.voice{font-family:var(--serif); font-style:italic; color:var(--dim); font-size:17px}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:22px 24px}
.card p:last-child{margin-bottom:0}
.k{color:var(--dim); font-size:12px; letter-spacing:.14em}

/* ---------- instrument callout ---------- */
.instr{display:grid; grid-template-columns:1.35fr 1fr; gap:38px; align-items:start}
/* ---------- embedded instrument ---------- */
.rig{margin-top:34px; border:1px solid var(--line); border-radius:3px; background:var(--panel); overflow:hidden}
.rig-head{display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; padding:18px 22px; border-bottom:1px solid var(--line)}
#launchRig{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.08em;
  color:#0a0a0d; cursor:pointer; background:var(--pink); border:0; border-radius:6px;
  padding:16px 26px; min-height:52px; white-space:nowrap;
  box-shadow:0 4px 0 #b8259b, 0 8px 18px rgba(255,79,216,.25);
  transition:transform .08s ease, box-shadow .08s ease, filter .16s;
}
#launchRig:hover{filter:brightness(1.08)}
#launchRig:active{transform:translateY(4px); box-shadow:0 0 0 #b8259b}
#launchRig:disabled{opacity:.45; cursor:default; transform:none; box-shadow:none}
.rig-frame{position:relative; height:760px; background:#0a0a0d}
.rig-frame iframe{width:100%; height:100%; border:0; display:block}
.rig-idle{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; padding:24px; color:var(--dimmer);
}
.rig-idle b{font-size:12px; letter-spacing:.2em; color:var(--dim); font-weight:400}
.rig-idle span{font-family:var(--serif); font-style:italic; font-size:15px}
@media(max-width:860px){ .rig-frame{height:600px} }

.tier-live{font-size:10px; letter-spacing:.16em; color:#0a0a0d; background:var(--pink);
  padding:3px 8px; border-radius:2px; font-weight:600}

.tier-live{font-size:10px; letter-spacing:.16em; color:#0a0a0d; background:var(--pink);
  padding:3px 8px; border-radius:2px; font-weight:600}

/* ---------- live auction readout ---------- */
.auction{margin-top:18px; border:1px solid var(--line); border-radius:3px;
  background:#0e0e13; padding:15px 17px; min-height:126px}
.auction.gone{display:none}
.auction-skel{color:var(--dimmer); font-size:10px; letter-spacing:.18em; padding:6px 0}
.auction-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.auction-row + .auction-row{margin-top:11px; padding-top:11px; border-top:1px solid var(--line-soft)}
.auction-lab{font-size:10px; letter-spacing:.18em; color:var(--dimmer)}
.auction-val{font-size:15px; letter-spacing:.02em; color:var(--ink)}
.auction-val.big{font-size:21px; font-weight:600}
.auction-val.live{color:var(--pink)}
.auction-state{font-size:10px; letter-spacing:.18em; color:var(--dim);
  display:flex; align-items:center; gap:8px}
.auction-state .dot{width:6px; height:6px; border-radius:50%; background:var(--dimmer)}
.auction-state.live .dot{background:var(--pink); animation:pulse 1.8s infinite}
.auction-state.ended .dot{background:var(--dimmer)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.auction-bidder{font-size:11px; letter-spacing:.06em; color:var(--dim)}

/* ---------- collect ---------- */
.collect.pending{display:block; margin-top:18px; padding:15px 16px; text-align:center;
  border:1px solid var(--line-soft); border-radius:6px;
  font-size:11px; letter-spacing:.16em; color:var(--dimmer)}

/* ---------- source block ---------- */
.source-block{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:32px; align-items:start; margin:30px 0 40px}
.source-block figure{margin:0}
.source-block img{width:100%; height:auto; display:block; aspect-ratio:1/1; border:1px solid var(--line); border-radius:3px; cursor:zoom-in}
.source-block figcaption{margin-top:10px; font-size:11px; letter-spacing:.16em; color:var(--dimmer)}
@media(max-width:860px){ .source-block{grid-template-columns:1fr; gap:20px} }

/* ---------- contact sheet ---------- */
.sheet{
  display:block; width:100%; height:auto; aspect-ratio:2508/1328;
  border:1px solid var(--line); border-radius:3px;
  cursor:zoom-in; background:var(--panel);
}
.sheet-cap{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.14em; color:var(--dimmer); margin-top:12px;
}

/* ---------- plate index ---------- */
.index-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.slot{
  aspect-ratio:1; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  position:relative; background:var(--panel); text-decoration:none; display:block;
}
.slot img{width:100%; height:100%; object-fit:cover; display:block}
.slot .tag{
  position:absolute; left:0; bottom:0; right:0; padding:9px 10px;
  background:linear-gradient(transparent,rgba(10,10,13,.94));
  font-size:11px; letter-spacing:.14em; color:var(--ink);
}
.slot .tag b{display:block; font-weight:600}
.slot .tag span{display:block; margin-top:3px; font-size:9px; letter-spacing:.12em; color:var(--dim)}
.slot.up img{filter:grayscale(.55) brightness(.62)}
.slot.up .tag b{color:var(--dim)}
.slot.up:hover img{filter:grayscale(.2) brightness(.85)}
.slot.pending{display:flex; align-items:center; justify-content:center;
  border-style:dashed; border-color:#232330; color:var(--dimmer);
  font-size:12px; letter-spacing:.16em}
.slot:not(.pending):hover{border-color:var(--pink)}

/* ---------- tier ladder ---------- */
.ladder{display:flex; flex-direction:column; gap:0}
.tier{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:38px; align-items:start; padding:44px 0; border-top:1px solid var(--line-soft);
}
.tier:first-child{border-top:0}
.tier figure{margin:0}
.tier video{
  width:100%; height:auto; display:block; aspect-ratio:1/1;
  border:1px solid var(--line); border-radius:3px; background:var(--panel);
}
.tier img{
  width:100%; height:auto; display:block; aspect-ratio:1/1;
  border:1px solid var(--line); border-radius:3px;
  cursor:zoom-in; background:var(--panel);
}
.tier-head{display:flex; align-items:baseline; gap:14px; margin-bottom:14px}
.tier-num{
  font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1;
}
.tier-name{font-size:12px; letter-spacing:.2em; color:var(--dim)}
.bar{height:3px; background:var(--line-soft); border-radius:2px; margin:16px 0 18px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--pink)}
.specs{
  list-style:none; padding:0; margin:18px 0 0; border-top:1px solid var(--line-soft);
  font-size:12px; letter-spacing:.06em;
}
.specs li{display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--line-soft)}
.specs b{color:var(--dimmer); font-weight:400; min-width:96px; letter-spacing:.14em; font-size:11px}
.swatches{display:flex; gap:6px; margin-top:16px}
.swatches i{width:26px; height:26px; border-radius:2px; border:1px solid rgba(255,255,255,.14)}

/* ---------- lightbox ---------- */
#lb{
  position:fixed; inset:0; z-index:200; display:none; cursor:zoom-out;
  background:rgba(6,6,9,.95); padding:28px; place-items:center;
}
#lb.on{display:grid}
#lb img{max-width:100%; max-height:88vh; width:auto; height:auto; object-fit:contain; border:1px solid var(--line)}
#lb .cap{
  position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font-size:11px; letter-spacing:.18em; color:var(--dim);
}

/* ---------- footer ---------- */
footer{padding:52px 0 70px; color:var(--dimmer); font-size:12px; letter-spacing:.1em}
footer a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)}
footer a:hover{color:var(--pink); border-color:var(--pink)}
.foot-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

@media(max-width:860px){
  .cols{grid-template-columns:1fr; gap:20px}
  .instr{grid-template-columns:1fr; gap:24px}
  .tier{grid-template-columns:1fr; gap:22px; padding:34px 0}
  .index-grid{grid-template-columns:repeat(3,1fr)}
  section{padding:48px 0}
  .mast{padding:52px 0 40px}
}