/* home.css — landing page only.
   Theme variables come from styles.css. */

.home {
  min-height: 100vh;
  padding: 10vh 6vw 8vh;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
}

.home-hero h1 {
  font-family: 'Newsreader', serif;
  font-size: clamp(64px, 10vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  margin: 0 0 18px;
  font-weight: 400;
}
.home-hero h1 em { font-style: italic; }

.home-hero .lede {
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 30em;
  margin: 0 0 28px;
}

.home-hero .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 22px;
}

.home-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

/* hero card with mini animation */
.home-mini {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 28px;
  position: relative;
}
.home-mini .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.home-mini-diagram {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── curriculum grid ──────────────────────────────────────────────────── */
.home-curriculum {
  padding-top: 64px;
}
.home-curriculum-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 32px;
}
.home-curriculum-header h2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.chapter-card {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  text-decoration: none;
  color: inherit;
  min-height: 200px;
  overflow: hidden;
}
.chapter-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 60%, color-mix(in oklch, var(--water) 6%, transparent) 100%);
  opacity: 0;
  transition: opacity 240ms ease;
}
.chapter-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: 0 14px 36px -22px var(--ink);
}
.chapter-card:hover::after { opacity: 1; }
.chapter-card .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.chapter-card .title {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 4px;
}
.chapter-card .sub {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.chapter-card .footer {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
/* ─── PCB trace rail ─────────────────────────────────────────────────────── */
.level-trace {
  display: block;
  width: 100%;
  height: 56px;
  margin: 4px 0 18px;
}

.chapter-card.done {
  border-color: color-mix(in oklch, var(--current) 45%, var(--rule));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--current) 25%, transparent),
              0 10px 30px -20px var(--current);
}
.chapter-card.done::after {
  opacity: 1 !important;
  background: radial-gradient(circle at 90% 8%, color-mix(in oklch, var(--current) 18%, transparent), transparent 42%);
}
.chapter-card.done .footer .status {
  color: var(--current);
}
.chapter-card.done .check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--current);
  color: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.chapter-card.in-progress .footer .status { color: var(--current); }
.chapter-card.locked {
  opacity: 0.6;
}
.chapter-card.locked .title { color: var(--ink-soft); }
.chapter-card.locked::before {
  content: "soon";
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chapter-card.locked { cursor: default; }
.chapter-card .applies {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--water);
  margin-top: 4px;
}

/* ─── level headers in the course map ───────────────────────────────────── */
.level-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 8px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.level-tag {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg-card);
  background: var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
}
.level-tag.l2 { background: var(--current); }
.level-tag.l0 { background: var(--water); }
.level-meta h3 {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 2px;
}
.level-meta p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ─── promise list ─────────────────────────────────────────────────────── */
.promise {
  padding-top: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  border-top: 1px solid var(--rule);
  margin-top: 80px;
}
.promise > div {
  padding-right: 12px;
}
.promise h3 {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
  font-weight: 400;
  font-style: italic;
}
.promise p {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* ─── footer ───────────────────────────────────────────────────────────── */
.home-footer {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.home-footer a {
  border: none !important;
  color: var(--ink-soft);
}
.home-footer a:hover { color: var(--ink); }
/* footer link rows are inline-styled display:flex on many pages — let them
   wrap on narrow screens instead of forcing horizontal overflow */
.home-footer > span { flex-wrap: wrap; row-gap: 10px; justify-content: flex-end; }

/* ════════════════════════════════════════════════════════════════════════
   COURSE-MAP PAGE  (single-screen PCB board — replaces the card grid)
   ════════════════════════════════════════════════════════════════════════ */
.map-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 3.4vw 34px;
  position: relative;
}
.map-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px 56px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.mh-left { flex: 1 1 440px; }
.map-hero .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 11px;
}
.map-hero h1 {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.map-hero h1 em { font-style: italic; }
.mh-tagline {
  font-family: 'Newsreader', serif;
  font-size: clamp(19px, 1.7vw, 25px);
  color: var(--ink-soft);
  margin: -4px 0 16px;
  letter-spacing: 0.01em;
}
.mh-tagline em { font-style: italic; color: var(--ink); }
.mh-howto {
  margin-top: 14px;
  max-width: 42em;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 12px 16px;
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  background: color-mix(in oklch, var(--bg-card) 55%, transparent);
}
.mh-howto strong { color: var(--ink); font-weight: 600; }
.mh-howto em { font-style: normal; color: var(--current); font-family: 'IBM Plex Mono', monospace; font-size: 0.92em; }
.map-hero .lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38em;
  margin: 0 0 18px;
}
.mh-right { flex: 0 0 auto; }
.mh-progress { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mh-ring-link { display: block; text-decoration: none; color: inherit; border-radius: 12px; transition: transform 160ms ease; }
.mh-ring-link:hover { transform: translateY(-2px); }
.mh-legend, .pcb-legend {
  display: flex;
  gap: 14px 16px;
  flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mh-legend { justify-content: center; }
.mh-legend span, .pcb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot.done  { background: var(--current); }
.dot.now   { background: var(--water); }
.dot.ready { background: transparent; border: 1.5px solid var(--rule-strong); }

/* the board */
.pcb-wrap { margin-top: 6px; }
.pcb-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.pcb {
  display: block;
  width: 100%;
  min-width: 880px;
  height: auto;
}
.cm-pad:focus, .cm-chip:focus { outline: none; }
.cm-pad:focus-visible .cm-pad-ring { stroke-width: 3.6; }
.cm-pad:hover, .cm-chip:hover {
  filter: drop-shadow(0 3px 7px color-mix(in oklch, var(--ink) 32%, transparent));
}
.cm-pad:hover .cm-pad-ring { stroke-width: 3.4; }

.pcb-legend { margin-top: 16px; align-items: center; font-size: 11px; }
.pcb-legend-hint {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--ink-faint);
}
@media (max-width: 760px) {
  .map-hero { align-items: flex-start; }
  .mh-right { width: 100%; display: flex; justify-content: flex-start; }
  .pcb-legend-hint { margin-left: 0; width: 100%; }
}

/* ─── project onramp band ─────────────────────────────────────── */
.pj-onramp {
  display: flex; align-items: center; gap: 24px;
  margin-top: 28px; padding: 22px 28px;
  box-shadow: var(--edge-hi, inset 0 1px 0 rgba(255,255,255,0.4)), var(--shadow-card, 0 14px 32px -22px rgba(44,42,38,0.5));
  border: 1px solid var(--current); border-radius: 14px;
  background: color-mix(in oklch, var(--current) 5%, var(--bg-card));
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--current);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.pj-onramp:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -26px var(--current); }
.pj-onramp-beacon { flex: 0 0 auto; }
.pj-onramp-text { flex: 1 1 auto; }
.pj-onramp-text h3 {
  font-family: 'Newsreader', serif; font-weight: 400; font-style: italic;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.1; margin: 6px 0 6px;
  color: var(--ink);
}
.pj-onramp-text p { margin: 0; font-size: 15px; color: var(--ink-soft); max-width: 54em; line-height: 1.5; }
.pj-onramp-meta {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.pj-onramp-meta .mono { font-size: 22px; color: var(--current); }
.pj-onramp-go {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}

/* ─── aux row: daily drill + workbench ─────────────────────────────────── */
.aux-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
  margin-top: 14px;
}
@media (max-width: 760px) { .aux-row { grid-template-columns: 1fr; } }
.aux-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px;
  text-decoration: none; color: inherit;
  box-shadow: var(--edge-hi, inset 0 1px 0 rgba(255,255,255,0.4)), var(--shadow-card, 0 14px 32px -22px rgba(44,42,38,0.5));
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.aux-card:hover { transform: translateY(-2px); }
.aux-icon { flex: 0 0 auto; display: grid; place-items: center; }
.aux-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aux-text b { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 18px; color: var(--ink); }
.aux-text i { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.aux-go { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ink-soft); }

/* ─── animated beacon in the onramp — the 'behold' shot ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .pj-ring {
    transform-box: fill-box; transform-origin: center;
    animation: pj-ping 2.6s ease-out infinite;
  }
  .pj-ring.r2 { animation-delay: 1.3s; }
  .pj-lamp { animation: pj-blink 2.6s ease-in-out infinite; }
}
@keyframes pj-ping {
  0%   { transform: scale(0.35); opacity: 0.9; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes pj-blink {
  0%, 10% { opacity: 1; }
  16%, 86% { opacity: 0.45; }
  92%, 100% { opacity: 1; }
}
@media (max-width: 640px) {
  .pj-onramp { flex-wrap: wrap; gap: 14px; }
  .pj-onramp-meta { flex-direction: row; align-items: center; gap: 12px; }
}

/* ─── project shelf link (under the onramp) ──────────────────────────────── */
.pj-shelf-link {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding: 13px 24px;
  border: 1px dashed var(--rule-strong); border-radius: 12px;
  background: var(--bg-card); text-decoration: none;
  font-size: 14px; color: var(--ink-soft); transition: border-color .15s ease;
}
.pj-shelf-link:hover { border-color: var(--current); }
.pj-shelf-link b { color: var(--ink); font-weight: 600; }
.pj-shelf-dots { color: var(--current); letter-spacing: 3px; font-size: 11px; flex: 0 0 auto; }
.pj-shelf-go {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.06em; color: var(--current); white-space: nowrap;
}

/* ─── front-page glance section (home.jsx) ─────────────────────────────── */
.hg-hero { grid-template-columns: 1fr; }
.hg-glance { margin: 46px 0 10px; padding: 30px 0 6px; border-top: 1px solid var(--rule); }
.hg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.hg-stat {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 18px 20px;
}
.hg-num { font-family: 'Newsreader', serif; font-size: 44px; line-height: 1; color: var(--current); }
.hg-stat b { font-size: 15px; color: var(--ink); font-weight: 600; }
.hg-sub { font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
.hg-facts { font-size: 14.5px; color: var(--ink-soft); max-width: 46em; line-height: 1.6; margin: 18px 0 0; }
.hg-facts b { color: var(--ink); }

/* ─── home scrollytelling story (homestory.jsx) ────────────────────────── */
.hs-lesson { margin-top: 10px; }
svg.hs { height: auto; aspect-ratio: 520 / 600; max-height: 82vh; margin: 0 auto; flex: 0 0 auto; }
/* aside is FIRST in DOM (so mobile sticky works); pin desktop grid placement */
.hs-lesson > .lesson-sticky { grid-column: 2; grid-row: 1; }
.hs-lesson > .lesson-scroll { grid-column: 1; grid-row: 1; }

/* ≤1100px: leave the chapters' grid layout entirely — block flow with a true
   full-section sticky stage, so the morphs stay on screen while beats scroll */
@media (max-width: 1100px) {
  .hs-lesson { display: block; padding: 0 5vw; }
  .hs-lesson > .lesson-sticky {
    order: initial;
    position: sticky; top: 50px; z-index: 5;
    display: block; height: auto; max-height: none;
    background: var(--bg); padding: 6px 0 8px; margin: 0;
  }
  .hs-lesson .vis-block {
    display: block; height: auto; max-height: none; padding: 8px 12px 10px;
  }
  .hs-lesson .vis-block svg.hs {
    height: 30vh !important; width: auto !important; max-height: none !important;
    display: block; margin: 0 auto;
  }
  .hs-lesson .beat { min-height: 64vh; }
}

.hs .hs-layer { transition: opacity 0.7s ease; }
.hs .hs-dot { fill: #f5ff00; transition: fill 0.8s ease; }
.hs[data-mode="water"] .hs-dot { fill: #5aa7d6; }
.hs-blink { animation: jnBlink 1.6s ease-in-out infinite; }
.hs-ring {
  animation: hsRing 1.6s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes hsRing {
  0% { opacity: 0.7; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-blink, .hs-ring { animation: none; }
}

/* ─── simple (streamlined) course map + view toggle ────────────────────── */
.jn-strip {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 6px; padding: 22px 24px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-card);
}
.jn-stop {
  flex: 1 1 150px; min-width: 140px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 4px;
}
.jn-text { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.jn-text b { font-family: 'Newsreader', serif; font-weight: 500; font-size: 16.5px; color: var(--ink); }
.jn-text span { font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; max-width: 20em; }
.jn-arrow {
  align-self: center; font-family: 'IBM Plex Mono', monospace; font-size: 16px;
  color: var(--current); flex: 0 0 auto;
}
.jn-lamp { animation: jnBlink 2.2s ease-in-out infinite; }
@keyframes jnBlink { 0%, 44%, 100% { opacity: 1; } 50%, 90% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .jn-lamp { animation: none; } }
@media (max-width: 700px) {
  .jn-strip { flex-direction: column; align-items: stretch; padding: 18px; }
  .jn-stop { flex-direction: row; text-align: left; align-items: center; gap: 14px; }
  .jn-stop svg { flex: 0 0 64px; width: 64px; height: 44px; }
  .jn-text { align-items: flex-start; }
  .jn-arrow { display: none; }
}

.sm-toggle-row {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 4px;
}
.sm-toggle-row .eyebrow { margin-right: auto; }
.sm-toggle {
  display: flex; gap: 4px; border: 1px solid var(--rule); border-radius: 999px; padding: 3px;
}
.sm-toggle button {
  appearance: none; border: none; cursor: pointer; background: transparent;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); padding: 6px 14px; border-radius: 999px;
  white-space: nowrap;
}
.sm-toggle button.active { background: var(--ink); color: var(--bg); }

.sm-wrap { display: flex; flex-direction: column; gap: 34px; margin-top: 18px; }
.sm-step-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap;
}
.sm-step-num {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600;
  color: var(--current); border: 1.5px solid var(--current); border-radius: 50%;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  align-self: center; flex: 0 0 30px; background: var(--bg-card);
}
.sm-step-head h2 {
  font-family: 'Newsreader', serif; font-weight: 500; font-size: 24px; margin: 0;
}
.sm-step-note {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-faint);
}
.sm-list { display: grid; gap: 8px; }
.sm-cols { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
@media (max-width: 720px) { .sm-cols { grid-template-columns: 1fr; } }
.sm-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 16px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--bg-card); text-decoration: none; color: var(--ink-soft);
  transition: border-color .15s ease, transform .12s ease; min-height: 44px; box-sizing: border-box;
}
.sm-row:hover { border-color: var(--current); transform: translateY(-1px); color: var(--ink-soft); }
.sm-tick {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-faint); flex: 0 0 16px;
}
.sm-row.done .sm-tick { color: var(--current-deep); }
.sm-row.done .sm-title { color: var(--ink-faint); }
.sm-row.next { border-color: var(--current); box-shadow: 0 6px 18px -12px var(--current-deep); }
.sm-row.next .sm-tick { color: var(--current); }
.sm-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-faint); flex: 0 0 18px; }
.sm-title { font-weight: 600; color: var(--ink); font-size: 14.5px; white-space: nowrap; }
.sm-sub { font-size: 12.5px; color: var(--ink-faint); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-min, .sm-go {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); white-space: nowrap; margin-left: auto;
}
.sm-go { color: var(--current); letter-spacing: 0.04em; }
.sm-exam .sm-title { color: var(--ink); }
.sm-exam { background: var(--bg-deeper); }
.sm-anytime { border-top: 1px solid var(--rule); padding-top: 26px; }
.sm-chip-group { display: flex; gap: 14px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.sm-chip-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); flex: 0 0 92px;
}
.sm-chip-row { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.sm-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft);
  text-decoration: none; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg-card); transition: border-color .15s ease;
}
.sm-chip:hover { border-color: var(--current); }
.sm-chip.done { color: var(--ink-faint); border-style: dashed; }
@media (max-width: 640px) {
  .sm-sub { display: none; }
  .sm-chip-label { flex-basis: 100%; }
}


/* ─── reset progress button ────────────────────────────────────────────── */
.reset-progress {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  cursor: pointer;
  text-transform: uppercase;
}
.reset-progress:hover {
  background: var(--bg-deeper);
  color: var(--ink);
}

/* ─── capstone banner ──────────────────────────────────────────────────── */
.capstone-banner {
  margin-top: 80px;
  display: flex;
  align-items: center;
  gap: 32px;
  border: 1px solid var(--current);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}
.capstone-banner::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 55%, color-mix(in oklch, var(--current) 8%, transparent) 100%);
}
.cb-left { flex: 1 1 auto; position: relative; z-index: 1; }
.cb-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
}
.cb-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42em;
  margin: 0 0 22px;
}
.cb-sub em { font-style: italic; color: var(--ink); }
.cb-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cb-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.cb-right { flex: 0 0 auto; position: relative; z-index: 1; }
@media (max-width: 720px) {
  .capstone-banner { flex-direction: column-reverse; align-items: flex-start; }
}