@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/motion.css";

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font: var(--text-prose);
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

h1, h2, h3 { color: var(--text-heading); margin: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }

/* ---------- theme toggle ---------- */
.theme-toggle {
  font: var(--text-ui);
  font-family: var(--font-sans);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
  transition: background var(--dur-hover) ease;
}
.theme-toggle:hover { background: var(--mix-wash); }

/* ---------- hero (graph-paper band, per the design system) ---------- */
.hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-6);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 calc(-50vw + 50%);      /* bleed the texture full-width */
  z-index: -1;
  background:
    repeating-linear-gradient(0deg,  transparent 0, transparent 27px, var(--grid-line) 27px, var(--grid-line) 28px),
    repeating-linear-gradient(90deg, transparent 0, transparent 27px, var(--grid-line) 27px, var(--grid-line) 28px),
    var(--surface-diagram);
  border-bottom: var(--border-hair) dashed var(--rule-dashed);
  /* fade the grid out toward the bottom so it reads as a band, not a box */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hero .theme-toggle { position: absolute; top: var(--space-7); right: 0; z-index: 1; }
.hero h1 { font: var(--text-display); letter-spacing: -0.02em; margin: 0 0 var(--space-2); }
.hero p { font: var(--text-prose); color: var(--text-body); max-width: var(--measure); margin: 0; }

/* split hero: copy left, interactive diagram right */
.hero--split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: center; }
.hero-copy { min-width: 0; }
.hero-figure { min-height: 0; }
.hero-figure:empty { display: none; }           /* no diagram → no empty column */
.hero--split:has(.hero-figure:empty) { display: block; }
@media (max-width: 820px) {
  .hero--split { display: block; }
  .hero-figure { margin-top: var(--space-5); }
}

.back-link {
  font: var(--text-ui); font-family: var(--font-sans);
  color: var(--link); text-decoration: none;
  display: inline-block; margin-bottom: var(--space-3);
}
.back-link:hover { text-decoration: underline; }

/* ---------- chapter link cards ---------- */
.chapter-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-spring);
}
.chapter-card:hover { border-color: var(--mix); transform: translateY(-2px); }
.chapter-kicker {
  font: var(--text-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--text-muted);
}
.chapter-title { font: var(--text-heading); font-family: var(--font-serif); color: var(--text-heading); }
.chapter-summary { font: var(--text-ui); font-family: var(--font-sans); color: var(--text-body); margin: 0; }
.chapter-meta {
  margin-top: auto; padding-top: var(--space-2);
  font: var(--text-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--link);
}

/* ---------- section (explainer rhythm: number → serif title → rule → grid) ---------- */
.section { padding: var(--space-7) 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.section > .blurb { font: var(--text-prose); color: var(--text-body); max-width: var(--measure); margin: 0 0 var(--space-3); }

/* number + glyph eyebrow above each section title */
.section-num {
  display: flex; align-items: center; gap: var(--space-2);
  font: var(--text-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--text-muted);
}
.section-num .glyph { width: 12px; height: 12px; display: block; color: var(--mix); flex: none; }
.section > h2 { font: var(--text-title); letter-spacing: -0.01em; margin: 0; }
/* dashed rule under the title, echoing the diagram frames */
.section > h2 { padding-bottom: var(--space-4); border-bottom: var(--border-hair) dashed var(--rule-dashed); }

/* ---------- chapter walkthrough (single reading column) ---------- */
.walkthrough {
  display: flex; flex-direction: column;
  gap: var(--space-8);
  max-width: 760px;
  padding-top: var(--space-6);
}
.walk-part { display: flex; flex-direction: column; gap: var(--space-4); }
.walk-head { display: flex; flex-direction: column; gap: var(--space-2); }
.walk-title { font: var(--text-title); letter-spacing: -0.01em; margin: 0; }
/* the part number folded into the title as a quiet mono prefix */
.walk-num {
  font-family: var(--font-mono);
  font-size: 0.7em; font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--link);
  margin-right: var(--space-2);
  vertical-align: 0.08em;
}
.walk-lead { font: var(--text-prose); color: var(--text-body); max-width: var(--measure); margin: 0; }

/* ---------- in-chapter jump nav (contents) ---------- */
.chapter-nav {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hair) dashed var(--rule-dashed);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
.chapter-nav-kicker {
  font: var(--text-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--text-muted);
}
.chapter-nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  counter-reset: navitem;
}
.chapter-nav-list li { counter-increment: navitem; }
.chapter-nav-list a {
  font: var(--text-heading); font-family: var(--font-serif);
  color: var(--text-heading); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: var(--space-2);
}
.chapter-nav-list a::before {
  content: counter(navitem, decimal-leading-zero);
  font: var(--text-label); font-family: var(--font-mono);
  color: var(--link); flex: none;
}
.chapter-nav-list a:hover { color: var(--mix); }

/* ---------- meta sub-section header inside a chapter ---------- */
.walk-group-head {
  display: flex; flex-direction: column; gap: var(--space-2);
  scroll-margin-top: var(--space-6);
}
.walk-group-title {
  font: var(--text-title); letter-spacing: -0.01em; margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hair) dashed var(--rule-dashed);
}
.walk-group-blurb {
  font: var(--text-prose); color: var(--text-body);
  max-width: var(--measure); margin: 0;
}

/* connective line between parts — quieter than a lead, marked with a rule so it
   reads as a hand-off, not body copy */
.walk-bridge {
  font: var(--text-ui); font-family: var(--font-sans);
  color: var(--text-muted); max-width: var(--measure);
  margin: 0; padding-left: var(--space-4);
  border-left: 2px solid var(--rule-dashed);
}

/* expandable "what's happening" block under a part's video */
.walk-details {
  max-width: var(--measure);
  border: var(--border-hair) dashed var(--rule-dashed);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
.walk-details-summary {
  cursor: pointer; list-style: none;
  padding: var(--space-3) var(--space-4);
  font: var(--text-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--link);
  display: flex; align-items: center; gap: var(--space-2);
}
.walk-details-summary::-webkit-details-marker { display: none; }
.walk-details-summary::before {
  content: "+"; font-family: var(--font-mono); color: var(--mix);
  width: 1em; text-align: center; flex: none;
}
.walk-details[open] .walk-details-summary::before { content: "\2212"; } /* minus */
.walk-details[open] .walk-details-summary {
  border-bottom: var(--border-hair) dashed var(--rule-dashed);
}
.walk-details-list {
  margin: 0; padding: var(--space-4) var(--space-5) var(--space-4) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-2);
  font: var(--text-prose); color: var(--text-body);
}
.walk-details-list li { padding-left: var(--space-1); }

/* ---------- grid of figures ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6) var(--space-5);
}

/* a "figure" — graph-paper panel + serif caption, per the system's Figure rhythm */
.figure { display: flex; flex-direction: column; gap: var(--space-3); }

.panel {
  position: relative;
  border-radius: var(--radius-card);
  border: var(--border-hair) dashed var(--rule-dashed);
  background:
    repeating-linear-gradient(0deg,  transparent 0, transparent 27px, var(--grid-line) 27px, var(--grid-line) 28px),
    repeating-linear-gradient(90deg, transparent 0, transparent 27px, var(--grid-line) 27px, var(--grid-line) 28px),
    var(--surface-diagram);
  overflow: hidden;
  cursor: crosshair;
}
.panel video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  cursor: auto;
}
.missing {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  text-align: center; padding: var(--space-6);
  font: var(--text-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--text-muted);
}

.caption { font: var(--text-heading); font-family: var(--font-serif); color: var(--text-heading); }
.caption .sub { display: block; font: var(--text-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); margin-top: var(--space-1); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(var(--rise)); }
.reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring); }

main { padding-bottom: var(--space-8); }

@media (max-width: 640px) {
  .hero h1 { font-size: 38px; }
}

.hub-courses{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-courses .chapter-title{font-family:var(--font-sans);font-size:25px;line-height:1.25}.explainer-library{padding:24px 0 60px;border-top:1px solid var(--grid-line)}.explainer-library>summary{cursor:pointer;font:var(--text-heading);color:var(--text-heading)}@media(max-width:820px){.hub-courses{grid-template-columns:1fr}}

/* Course cards use the theme accent regardless of browser visit history. */
.chapter-card:link,.chapter-card:visited,.chapter-card .chapter-title{color:var(--link)}