/* The course home: hero, the lesson map, the teaching ladder, the featured lesson. */

.c-hero {
  position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 20px;
  background:
    radial-gradient(55% 45% at 15% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(45% 40% at 95% 30%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 70%);
}
.c-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background-image: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0); background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.c-hero-inner { position: relative; max-width: 980px; margin: 0 auto; padding: 0 var(--gutter) 40px; }
.c-hero .display { font-size: clamp(3rem, 7.6vw, 6.6rem); margin-top: 22px; }
.c-hero .lede { max-width: 42rem; margin: 26px 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- the map ---------- */
.map-wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.map-wrap .chips { margin-bottom: 14px; }
.map-tools { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 14px; }
.map-tools .kicker { margin: 0; }
.map-frame {
  position: relative; border-radius: var(--r-3); overflow: hidden;
  background: radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--accent) 8%, transparent), transparent), var(--bg-2);
}
#course-map { display: block; width: 100%; height: auto; }
.map-line { fill: none; stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
.stn { cursor: pointer; transition: opacity 0.3s; }
.stn .dot { fill: var(--bg-2); stroke: var(--c); stroke-width: 3; transition: r 0.2s var(--ease); }
.stn.lit .dot { fill: var(--gold); stroke: var(--gold); }
.stn .halo { fill: var(--gold); opacity: 0.25; animation: pulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.stn:hover .dot, .stn:focus-visible .dot { stroke: var(--ink); stroke-width: 3.5; }
.stn:focus-visible { outline: none; }
.stn-n { font: 500 10.5px var(--f-mono); fill: var(--ink-3); }
.stn.lit .stn-n { fill: var(--gold); }
@keyframes pulse { 50% { transform: scale(1.8); opacity: 0; } }
svg.routed .stn:not(.on) { opacity: 0.2; }
svg.routed .map-line { opacity: 0.25; }
.route-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--gold-soft)); }
.route-badge { fill: var(--gold); }
.route-n { font: 600 10px var(--f-ui); fill: var(--bg); }
.map-card { position: absolute; z-index: 3; width: 280px; padding: 14px 16px; pointer-events: none; font-family: var(--f-ui); animation: rise 0.2s var(--ease); }
.map-card .t { font: 400 1.4rem/1.1 var(--f-display); color: var(--ink); margin: 6px 0; }
.map-card .o { font-size: 0.82rem; color: var(--ink-2); margin: 0; }
.map-card .s { font-size: 0.76rem; color: var(--ink-3); margin: 10px 0 0; font-weight: 500; }
.map-card .s.lit { color: var(--gold); }
.path-note { margin-top: 14px; }
.path-note:not(:empty) {
  padding: 16px 18px; border-radius: var(--r-2); background: color-mix(in oklab, var(--surface) 92%, transparent);
  border: 1px solid var(--gold); animation: rise 0.25s var(--ease);
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
}
.path-note .kicker, .path-note p { flex-basis: 100%; }
@media (min-width: 900px) { .path-note p { flex-basis: auto; flex: 1; margin: 0; } }
.path-note p { margin: 0 0 10px; font-size: 0.95rem; color: var(--ink-2); }
.path-note .kicker { color: var(--gold); margin-bottom: 6px; }

.map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 0.8rem; color: var(--ink-3); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.parts-legend { display: inline-flex !important; flex-wrap: wrap; gap: 8px 16px; }
.lg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lg-new { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.lg-primer { border: 2px solid var(--ink-3); }


/* ---------- sections ---------- */
.c-section { padding: clamp(56px, 8vw, 100px) 0 0; }
.c-head { max-width: 1240px; margin: 0 auto 26px; padding: 0 var(--gutter); }
.c-head h2 { margin: 0 0 8px; }
.lede.small { font-size: 1.1rem; margin: 0; max-width: 40rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- every lesson ---------- */
.course-parts { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 44px; }
@media (min-width: 1000px) { .course-parts { grid-template-columns: 1fr 1fr; gap: 44px 56px; } }
.part-t { margin: 0; font: 600 1rem var(--f-ui); }
.part .blurb { margin: 4px 0 12px; font-size: 0.98rem; color: var(--ink-3); }
.lesson-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lesson-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 12px 8px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: background 0.2s;
}
.lesson-row:hover { background: var(--surface); text-decoration: none; }
.lesson-row .n { font: 500 0.78rem var(--f-mono); color: var(--ink-3); grid-row: span 2; }
.lesson-row .t { font: 400 1.25rem/1.2 var(--f-display); }
.lesson-row .o { grid-column: 2; font: 0.82rem/1.4 var(--f-ui); color: var(--ink-3); }
.lesson-row .st { grid-row: 1; grid-column: 3; align-self: center; }
.lesson-row.on .n { color: var(--gold); }
.st { font: 500 0.68rem var(--f-ui); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st.ready { color: var(--gold); background: var(--gold-soft); }

/* ---------- status page ---------- */
.status { max-width: 860px; margin: 0 auto; padding: 72px var(--gutter) 0; }
.status h2 { margin: 56px 0 18px; }
.status-hero h1 { margin: 12px 0 14px; }
.status-meter { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 26px 0 10px; }
.status-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.status-count { color: var(--ink-2); margin: 0; }
.status-count b { color: var(--ink); }
.status-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: n; }
.status-next li { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.status-next li span { color: var(--ink-2); font-size: 0.95rem; }
.status-key { color: var(--ink-3); font-size: 0.9rem; margin: 0 0 16px; }
.status-key b { color: var(--ink-2); font-weight: 500; }
.status-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.status-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 18px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.status-row a { display: flex; gap: 12px; color: var(--ink); text-decoration: none; }
.status-row a:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.status-row .n { color: var(--ink-3); font-family: var(--f-mono); }
.status-row .s { font-size: 0.8rem; white-space: nowrap; }
.status-row .s.yes { color: var(--ink); }
.status-row .s.no { color: var(--ink-3); }
.status-row .s.yes::before { content: "● "; color: var(--gold); }
.status-row .s.no::before { content: "○ "; }
.status-foot { color: var(--ink-3); font-size: 0.82rem; margin: 40px 0 0; }
@media (max-width: 640px) { .status-row { grid-template-columns: 1fr; } .status-row .s { margin-left: 28px; } }