:root{
  --bg: #1a1b1f;
  --panel: #232429;
  --line: #383a42;
  --text: #f1efe8;
  --text-dim: #adaeb4;
  --accent: #ff7a3d;
  --accent-2: #6fcf6c;
  --max: 74rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-weight:600;
  line-height:1.2;
  margin:1.6em 0 0.6em;
  letter-spacing:-0.01em;
  color:var(--accent);
}
h1:first-child, h2:first-child{ margin-top:0; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

p{ margin:0 0 1em; max-width:42rem; color:var(--text); }
p.dim{ color:var(--text-dim); }
strong, b{ color:var(--text); }
em, i{ color:var(--text-dim); }

ul, ol{ max-width:42rem; padding-left:1.3rem; margin:0 0 1.2em; }
li{ margin-bottom:0.4em; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }

.mono{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.8rem;
  letter-spacing:0.02em;
  color:var(--text-dim);
}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:#121214; padding:0.6em 1em;
  z-index:200; font-weight:600;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Header / nav */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(26,27,31,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}

.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem;
  max-width:var(--max); margin:0 auto;
  gap:1rem;
}

.logo{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700; font-size:1.15rem;
  color:var(--text); text-decoration:none;
  display:flex; align-items:baseline; gap:0.5rem;
}
.logo:hover{ text-decoration:none; }
.logo .dot{ color:var(--accent); }
.logo small{ font-family:"IBM Plex Mono", monospace; font-size:0.65rem; color:var(--text-dim); font-weight:500; }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--text);
  padding:0.5rem 0.75rem; border-radius:4px; cursor:pointer;
  font-family:"IBM Plex Mono", monospace; font-size:0.8rem;
}

nav.primary{ display:flex; flex-wrap:wrap; gap:0.25rem; }
.nav-item{ position:relative; }

.nav-item > button, .nav-item > a{
  background:none; border:none; color:var(--text);
  font-family:"IBM Plex Sans", sans-serif; font-size:0.92rem;
  padding:0.6rem 0.75rem; cursor:pointer; text-decoration:none;
  display:inline-block;
}
.nav-item > a:hover, .nav-item > button:hover{ color:var(--accent); text-decoration:none; }

.submenu{
  list-style:none; margin:0; padding:0.4rem;
  position:absolute; left:0; top:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  min-width:15rem;
  display:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.nav-item.open .submenu{ display:block; }
.submenu li{ margin-bottom:0; }
.submenu li a{
  display:block; padding:0.55rem 0.7rem; font-size:0.9rem;
  color:var(--text); border-radius:4px;
}
.submenu li a:hover{ background:rgba(255,122,61,0.1); color:var(--accent); text-decoration:none; }

@media (min-width: 861px){
  .nav-item:hover .submenu, .nav-item:focus-within .submenu{ display:block; }
}

@media (max-width: 860px){
  .nav-toggle{ display:inline-block; }
  nav.primary{
    display:none; flex-direction:column; width:100%;
    border-top:1px solid var(--line); padding:0.5rem 0;
  }
  nav.primary.mobile-open{ display:flex; }
  .nav-row{ flex-wrap:wrap; }
  .submenu{ position:static; border:none; background:none; box-shadow:none; padding-left:0.75rem; display:none; }
  .nav-item.open .submenu{ display:block; }
  .nav-item > button, .nav-item > a{ width:100%; text-align:left; padding:0.7rem 0.75rem; }
}

/* Hero (homepage) */
.hero{ padding:5rem 0 4rem; border-bottom:1px solid var(--line); }
.hero h1{ font-size:clamp(2.4rem, 6vw, 4rem); max-width:16ch; margin-top:0; }
.hero .lede{ font-size:1.1rem; color:var(--text-dim); max-width:40rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:1.6rem; }

.btn{
  font-family:"IBM Plex Sans", sans-serif; font-weight:600; font-size:0.95rem;
  padding:0.8rem 1.4rem; border-radius:4px; display:inline-block;
  text-decoration:none;
}
.btn-primary{ background:var(--accent); color:#181205; }
.btn-primary:hover{ background:#ff8f5c; text-decoration:none; }
.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }

/* Status / two-column info sections (homepage) */
.status{ padding:3.5rem 0; border-bottom:1px solid var(--line); }
.status-grid{ display:grid; grid-template-columns: 1fr; gap:2rem; }
@media (min-width: 700px){ .status-grid{ grid-template-columns: 1fr 1.4fr; } }
.status .label{ font-family:"IBM Plex Mono", monospace; color:var(--accent); font-size:0.8rem; }

/* Channel strips (homepage) */
.channels{ border-bottom:1px solid var(--line); }
.channel{
  display:grid; grid-template-columns: 1fr; gap:1.25rem;
  padding:2.75rem 0; border-top:1px solid var(--line);
}
.channel:first-child{ border-top:none; }
@media (min-width: 760px){
  .channel{ grid-template-columns: 15rem 1fr; gap:2.5rem; align-items:start; }
}
.channel .ch-num{
  font-family:"IBM Plex Mono", monospace; color:var(--accent);
  font-size:0.85rem; display:block; margin-bottom:0.35rem;
}
.channel h2{ font-size:1.5rem; margin-top:0; }
.channel-links{ list-style:none; margin:1rem 0 0; padding:0; columns: 1; }
@media (min-width: 500px){ .channel-links{ columns:2; column-gap:2rem; } }
.channel-links li{ break-inside:avoid; margin-bottom:0.5rem; }
.channel-links a{ font-size:0.95rem; color:var(--text); }
.channel-links a:hover{ color:var(--accent); }
.badge{ font-family:"IBM Plex Mono", monospace; font-size:0.7rem; color:var(--text-dim); }

/* Elsewhere (homepage) */
.elsewhere{ padding:3rem 0; border-bottom:1px solid var(--line); }
.elsewhere ul{ list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:1.5rem; max-width:none; }
.elsewhere li{ font-size:0.95rem; margin-bottom:0; }

/* Content pages (subpages) */
.page-header{ padding:3rem 0 1rem; border-bottom:1px solid var(--line); margin-bottom:2.5rem; }
.page-header h1{ font-size:clamp(2rem, 4.5vw, 2.75rem); margin:0 0 0.5rem; }
.page-header .dek{ color:var(--text-dim); max-width:42rem; }

.content{ padding-bottom:3rem; }
.content h2{ font-size:1.5rem; border-top:1px solid var(--line); padding-top:1.6rem; margin-top:2.2rem; }
.content h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.content h3{ font-size:1.15rem; }
.content img{ max-width:100%; height:auto; border-radius:6px; margin:0.5rem 0 1.2rem; display:block; }
.content table{ border-collapse:collapse; width:100%; max-width:42rem; margin:0 0 1.5em; }
.content th, .content td{ border:1px solid var(--line); padding:0.5rem 0.7rem; text-align:left; font-size:0.9rem; }
.content th{ background:var(--panel); font-family:"Space Grotesk", sans-serif; font-weight:600; }
.content .figure-cap{ color:var(--text-dim); font-size:0.85rem; margin-top:-0.8em; }
.callout{
  border:1px solid var(--line); background:var(--panel); border-radius:6px;
  padding:1rem 1.2rem; max-width:42rem; margin:0 0 1.5em; color:var(--text-dim); font-size:0.92rem;
}

/* Buy the book (shared block, appears near bottom of every page) */
.buy-book{ padding:3rem 0; border-bottom:1px solid var(--line); scroll-margin-top:5rem; }
.buy-book h2{ margin-top:0; }
.buy-links{ list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-wrap:wrap; gap:0.75rem 2rem; max-width:none; }
.buy-links li{ margin-bottom:0; }
.buy-links a{
  display:inline-block; font-weight:600; font-size:0.95rem;
  border:1px solid var(--line); border-radius:4px; padding:0.6rem 1rem; color:var(--text);
}
.buy-links a:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }

footer{ padding:2.5rem 0 3rem; }
footer p{ color:var(--text-dim); font-size:0.85rem; max-width:none; }
footer a{ color:var(--text-dim); }
footer a:hover{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}