/* ==========================================================================
   THE BASEMENT VIEW
   Black and white. Rings, not fills. Stairs, not ornament.
   One stylesheet, no build step. Edit here, redeploy.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root{
  --ink:#0E0F11;
  --paper:#FFFFFF;
  --muted:#6B6B6B;
  --faint:#A2A2A2;
  --hair:#E4E4E4;
  --fill:#EFEFEF;

  --rad:18px;
  --ring:1px solid var(--ink);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1200px;
  --gut:28px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; }
img,svg{ max-width:100%; }
h1,h2,h3,h4{ margin:0; letter-spacing:-0.02em; font-weight:800; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.mono{ font-family:var(--mono); }
.dim{ color:var(--muted); }
.faint{ color:var(--faint); }

/* ---- the tape ----------------------------------------------------------- */

.tape{
  background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap; position:relative; z-index:60;
}
.tape-track{
  display:inline-flex; align-items:center; gap:44px;
  padding:8px 22px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase;
  animation:tape 46s linear infinite; will-change:transform;
}
.tape-track span{ display:inline-flex; align-items:center; gap:8px; color:var(--faint); }
.tape-track b{ color:var(--paper); font-weight:700; }
.tape-track i{ font-style:normal; }
.tape-track i.g{ color:var(--paper); }
.tape-track i.r{ color:var(--faint); }
@keyframes tape{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .tape-track{ animation:none } }

/* ---- header ------------------------------------------------------------- */

.top{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hair);
}
.top .wrap{ display:flex; align-items:center; gap:20px; height:64px; }
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:700; font-size:16px; }
.mark{
  width:26px; height:26px; border-radius:7px; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.02em;
}
.navlinks{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.navlinks a{ text-decoration:none; font-size:14.5px; color:var(--muted); }
.navlinks a:hover,.navlinks a[aria-current="page"]{ color:var(--ink); }
.cta{
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  border-radius:999px; padding:8px 18px; font-size:14px; font-weight:600;
  text-decoration:none; display:inline-block; cursor:pointer; transition:.15s;
}
.cta:hover{ background:var(--paper); color:var(--ink); }

.cats{ border-bottom:1px solid var(--hair); }
.cats .wrap{ display:flex; gap:24px; overflow-x:auto; padding-top:12px; padding-bottom:12px; scrollbar-width:none; }
.cats .wrap::-webkit-scrollbar{ display:none; }
.cats a{ text-decoration:none; font-size:13.5px; color:var(--faint); white-space:nowrap; }
.cats a:hover{ color:var(--ink); }
.cats a.on{ color:var(--ink); font-weight:600; }

/* ---- the ring: every segment -------------------------------------------- */

.seg{
  background:var(--paper); border:var(--ring); border-radius:var(--rad);
  padding:22px;
}
.seg--ink{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.seg--ink .dim,.seg--ink .faint{ color:var(--faint); }
.seg--dash{ border-style:dashed; border-color:var(--faint); }

/* ---- the nine-step cascade (the logo's structure, as a rule) ------------- */

.steps{ position:relative; width:72px; height:70px; flex:none; }
.steps i{ position:absolute; height:5px; width:26px; background:var(--hair); display:block; }
.steps i.on{ background:var(--ink); }
.steps i:nth-child(1){ top:0;    left:0 }
.steps i:nth-child(2){ top:8px;  left:5px }
.steps i:nth-child(3){ top:16px; left:10px }
.steps i:nth-child(4){ top:24px; left:18px }
.steps i:nth-child(5){ top:32px; left:23px }
.steps i:nth-child(6){ top:40px; left:28px }
.steps i:nth-child(7){ top:48px; left:36px }
.steps i:nth-child(8){ top:56px; left:41px }
.steps i:nth-child(9){ top:64px; left:46px }

/* ---- type scale --------------------------------------------------------- */

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
}
.crumb{ font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }
h1.big{ font-size:clamp(38px,5.4vw,66px); line-height:1.02; letter-spacing:-.035em; }
h2.sect{ font-size:clamp(22px,2.6vw,28px); letter-spacing:-.025em; }
.lede{ font-size:clamp(16px,1.5vw,18.5px); color:var(--muted); line-height:1.6; max-width:62ch; }

.head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:18px; }
.more{ font-size:13.5px; text-decoration:none; color:var(--muted); white-space:nowrap; }
.more:hover{ color:var(--ink); }

section{ padding:56px 0; }
section.tight{ padding:36px 0; }

/* ---- grids -------------------------------------------------------------- */

.g{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

/* ---- chips & pills ------------------------------------------------------ */

.pill{
  display:inline-flex; align-items:center; gap:7px;
  border:var(--ring); border-radius:999px; padding:6px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.pill.on{ background:var(--ink); color:var(--paper); }
.tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

/* ---- reveal ------------------------------------------------------------- */

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ---- footer ------------------------------------------------------------- */

.foot{ border-top:1px solid var(--hair); padding:26px 0; margin-top:20px; }
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot .mono{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.foot .links{ display:flex; gap:20px; }
.foot a{ font-size:13.5px; text-decoration:none; color:var(--muted); }
.foot a:hover{ color:var(--ink); }

/* ---- responsive --------------------------------------------------------- */

@media (max-width:900px){
  .g3,.g4{ grid-template-columns:repeat(2,1fr); }
  .navlinks{ display:none; }
}
@media (max-width:620px){
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  :root{ --gut:18px; }
  section{ padding:40px 0; }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- hero --------------------------------------------------------------- */

.hero{ padding:64px 0 20px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 .n{ font-family:var(--mono); font-weight:700; letter-spacing:-.04em; }
.hero .lede{ margin-top:20px; }
.sub{ display:flex; gap:0; margin-top:26px; border:var(--ring); border-radius:999px; padding:5px 5px 5px 18px; max-width:420px; }
.sub input{
  flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:var(--ink); min-width:0;
}
.sub input::placeholder{ color:var(--faint); }
.proof{ margin-top:12px; font-size:13px; color:var(--muted); }
.proof b{ font-family:var(--mono); font-weight:600; color:var(--ink); }

/* ---- market card -------------------------------------------------------- */

.spec{ background:var(--paper); border:var(--ring); border-radius:var(--rad); padding:20px; }
.spec .top-row{ display:flex; align-items:flex-start; gap:14px; }
.ico{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--hair);
  display:grid; place-items:center; font-family:var(--mono); font-size:9px; color:var(--muted); flex:none;
}
.spec .q{ font-weight:700; font-size:16.5px; letter-spacing:-.015em; }
.spec .meta{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.spec .num{ margin-left:auto; text-align:right; flex:none; }
.spec .num b{ font-family:var(--mono); font-size:26px; font-weight:700; display:block; letter-spacing:-.03em; }
.spec .num span{ font-size:11.5px; color:var(--muted); }
.chart{ margin:16px 0 12px; }
.btnrow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.yes,.no{
  border-radius:999px; padding:9px 0; text-align:center;
  font-weight:600; font-size:14.5px; border:var(--ring);
}
.yes{ background:var(--ink); color:var(--paper); }
.no{ background:var(--paper); color:var(--ink); }
.spec .foot-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:12px; }

/* ---- stat cards --------------------------------------------------------- */

.stat{ background:var(--paper); border:var(--ring); border-radius:var(--rad); padding:18px 20px; }
.stat .k{ font-size:13px; color:var(--muted); }
.stat .v{ font-family:var(--mono); font-size:28px; font-weight:700; letter-spacing:-.03em; margin:4px 0 2px; }
.stat .n{ font-size:12.5px; color:var(--faint); }
.narr{ font-size:14px; color:var(--muted); font-style:italic; margin-top:14px; }

/* ---- call cards --------------------------------------------------------- */

.mkt{ background:var(--paper); border:var(--ring); border-radius:var(--rad); padding:18px; display:flex; flex-direction:column; }
.mkt .hd{ display:flex; gap:12px; align-items:flex-start; }
.mkt .q{ font-weight:700; font-size:15px; line-height:1.3; letter-spacing:-.01em; }
.mkt .sub2{ font-size:12px; color:var(--muted); margin-top:3px; }
.mkt .num{ margin-left:auto; text-align:right; flex:none; }
.mkt .num b{ font-family:var(--mono); font-size:21px; font-weight:700; display:block; }
.mkt .num span{ font-size:11px; color:var(--muted); }
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 0; }
.three div{ border:1px solid var(--hair); border-radius:11px; padding:8px; text-align:center; }
.three b{ font-family:var(--mono); font-size:15px; font-weight:700; display:block; }
.three span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.flip{ margin-top:14px; border-top:1px solid var(--hair); padding-top:12px; }
.flip .tag{ display:block; margin-bottom:5px; }
.flip p{ font-size:13px; color:var(--muted); line-height:1.5; }
.mkt .end{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12px; color:var(--muted); }

/* ---- the book table ----------------------------------------------------- */

.book{ width:100%; border-collapse:collapse; font-size:14px; }
.book th{
  text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); font-weight:600;
  padding:10px 12px; border-bottom:1px solid var(--ink);
}
.book td{ padding:13px 12px; border-bottom:1px solid var(--hair); }
.book tr.ex td{ color:var(--faint); font-style:italic; }
.book .m{ font-family:var(--mono); }
.book .res{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; }
.book .hit{ font-weight:700; }
.book .miss{ color:var(--muted); }

/* ---- letters / library cards -------------------------------------------- */

.letter,.lib{ background:var(--paper); border:var(--ring); border-radius:var(--rad); padding:20px; display:flex; flex-direction:column; }
.letter h3,.lib h3{ font-size:19px; margin:6px 0 8px; letter-spacing:-.02em; }
.letter p,.lib p{ font-size:14px; color:var(--muted); line-height:1.55; }
.letter .go,.lib .go{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; font-size:13.5px; }
.letter .go b,.lib .go b{ font-family:var(--mono); }
.lib .nums{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.lib .nums span{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.crypto{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--hair); }
.crypto .t{ font-size:14.5px; }
.crypto .d{ font-family:var(--mono); font-size:11.5px; color:var(--faint); white-space:nowrap; }

/* ---- rules -------------------------------------------------------------- */

.rule{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--hair); }
.rule .no2{ font-family:var(--mono); font-size:22px; font-weight:700; color:var(--ink); }
.rule h3{ font-size:19px; letter-spacing:-.02em; margin-bottom:7px; }
.rule p{ font-size:15px; color:var(--muted); line-height:1.6; }
.rule .prac{ margin-top:10px; }
.step{ background:var(--paper); border:var(--ring); border-radius:var(--rad); padding:18px; }
.step .no2{ font-family:var(--mono); font-size:12px; color:var(--faint); }
.step h3{ font-size:16px; margin:6px 0 7px; letter-spacing:-.015em; }
.step p{ font-size:13.5px; color:var(--muted); line-height:1.5; }

.faq{ border-bottom:1px solid var(--hair); }
.faq summary{ cursor:pointer; padding:16px 0; font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--mono); color:var(--faint); font-size:18px; }
.faq[open] summary::after{ content:'\2212'; }
.faq p{ font-size:14.5px; color:var(--muted); line-height:1.6; padding:0 0 18px; max-width:70ch; }

/* ---- basement ----------------------------------------------------------- */

.invite{ position:relative; overflow:hidden; }
.invite::after{
  content:''; position:absolute; right:-90px; top:-90px; width:340px; height:340px;
  background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 70%); pointer-events:none;
}
.table-ring{ position:relative; width:200px; height:200px; margin:0 auto; }
.table-ring i{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--paper); }
.table-ring .centre{
  position:absolute; inset:52px; border:1px solid rgba(255,255,255,.35); border-radius:50%;
  display:grid; place-items:center; text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--paper);
}
.season{ display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:center; margin-top:4px; }
.season b{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--faint); }
.season .dots{ display:flex; gap:5px; flex-wrap:wrap; }
.season .dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); }
.season .dots i.live{ background:var(--paper); }

.letter .go,.lib .go{ text-decoration:none; }
.calib{ border:1px dashed var(--faint); border-radius:var(--rad); padding:26px; }
.calib .axis{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }

/* ---- the beehiiv embed sits inside the ring ----------------------------- */
.sub--embed{ padding:0; border:0; max-width:440px; margin-top:26px; }
.sub--embed iframe{ width:100%; height:56px; border:0; display:block; }