/* ==========================================================================
   Relay — design system v2 (2026-08)
   Heritage: the Private Listing look. Dark-native, editorial, brass on
   forest. v2 keeps the tokens and adds: a real light theme, size-specific
   tracking, restrained motion, and the lesson-start components
   from the 2026-08-06 design decisions.
   ========================================================================== */

:root {
  --ink: #0d1512;
  --panel: #131e19;
  --panel-2: #182620;
  --raise: #1c2c25;
  --forest: #1e3d2f;
  --forest-2: #2a5442;
  --brass: #c6a35f;
  --brass-bright: #ddbc7e;
  --text: #e9e4d8;
  --muted: #8a8a7e;
  --faint: #63635a;
  --line: rgba(198, 163, 95, 0.18);
  --line-strong: rgba(198, 163, 95, 0.38);
  --danger: #c05a3f;
  --ok: #6f9e6a;
  --code-bg: #0a100d;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, ui-monospace, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-hover: 150ms;
  --dur-reveal: 350ms;
  color-scheme: dark;
}


*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ink); }

body {
  min-width: 0;
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 200ms ease, color 200ms ease;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--brass-bright); }

img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

input:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

::selection { background: rgba(198, 163, 95, 0.28); color: var(--text); }

.wrap { width: min(100% - 40px, 1160px); margin-inline: auto; }
.wrap-reading { width: min(100% - 40px, 880px); margin-inline: auto; }

/* ==========================================================================
   Header / footer
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-decoration: none;
  text-transform: uppercase;
}
.brand:hover { color: var(--brass-bright); }
.brand img { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; object-fit: cover; }

.header-nav { display: flex; align-items: center; gap: 24px; }
.header-nav a {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur-hover) ease;
}
.header-nav a:hover { color: var(--brass-bright); }
.header-nav a.is-here { color: var(--brass); }


.site-main { padding-block: 56px 96px; }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 84px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-inner p { margin: 0; }
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: var(--brass-bright); }

/* ==========================================================================
   Reviewer sign-in
   ========================================================================== */

.login-page { min-height: 100vh; }
.login-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(circle at 50% 12%, rgba(42, 84, 66, 0.34), transparent 42%),
    var(--ink);
}
.login-card {
  width: min(100%, 480px);
  padding: clamp(30px, 6vw, 48px);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 34px 90px -48px rgba(0, 0, 0, 0.85);
}
.login-brand { margin-bottom: 52px; }
.login-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.35rem, 8vw, 3.45rem);
  font-weight: 340;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.login-copy { margin: 18px 0 0; color: var(--muted); line-height: 1.65; }
.login-form { display: grid; gap: 12px; margin-top: 34px; }
.login-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.login-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--code-bg);
  color: var(--text);
  caret-color: var(--brass);
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.login-input:hover { border-color: var(--brass); }
.login-input:focus { border-color: var(--brass); box-shadow: 0 0 0 4px rgba(198, 163, 95, 0.1); }
.login-submit { justify-content: center; width: 100%; min-height: 50px; margin-top: 4px; text-align: center; }
.login-submit[disabled] { cursor: wait; opacity: 0.7; }
.login-error { margin: 4px 0 0; color: #e19a84; font-size: 0.86rem; }

@media (max-width: 520px) {
  .login-shell { align-items: start; padding-top: 22px; }
  .login-card { padding: 28px 22px 30px; border-radius: 14px; }
  .login-brand { margin-bottom: 42px; }
}

/* ==========================================================================
   Shared type
   ========================================================================== */

.kicker {
  margin: 0 0 16px;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

h1, h2, h3 { text-wrap: balance; }

.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
}

.page-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.lede { max-width: 600px; margin: 18px 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.6; }

.breadcrumb {
  margin: 0 0 20px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--brass-bright); }

/* ==========================================================================
   Statement home
   ========================================================================== */

.masthead { max-width: 880px; padding: 54px 0 40px; }

.standing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}
.standing strong { color: var(--brass); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Resume / start block */

.resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 54px;
  padding: 22px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
}
.resume-label {
  margin: 0 0 5px;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.resume-title { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 420; letter-spacing: -0.012em; }
.resume-detail { margin: 5px 0 0; color: var(--muted); font-size: 0.86rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--brass);
  border-radius: 9px;
  background: var(--brass);
  color: #14201a;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  text-align: left;
  line-height: 1.45;
  transition: background var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.btn:hover { background: var(--brass-bright); color: #14201a; }
.btn:active { transform: scale(0.98); }
.btn-quiet {
  background: transparent;
  color: var(--brass);
  border-color: var(--line-strong);
}
.btn-quiet:hover { background: transparent; border-color: var(--brass); color: var(--brass-bright); }

/* The proof plate */

.plate {
  display: block;
  margin: 0 0 64px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
}
.plate-head { padding: 24px 28px 0; }
.plate-title { margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400; letter-spacing: -0.014em; }
.plate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px 28px 26px; }
.plate-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--code-bg); }
.plate-item img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; filter: saturate(0.9); }
.plate-verdict { padding: 10px 13px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted); }
.plate-item.is-paid .plate-verdict { color: var(--brass); }
@media (max-width: 760px) { .plate-grid { grid-template-columns: minmax(0, 1fr); } }

/* Statement sections */

.statement { border-top: 1px solid var(--line); }

.st-section { border-bottom: 1px solid var(--line); padding: 34px 0 12px; }

.st-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 6px;
}
.st-section-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.014em;
}
.st-num { color: var(--brass); font-family: var(--mono); font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; }
.st-result { max-width: 640px; margin: 4px 0 18px; color: var(--muted); font-size: 0.94rem; }
.st-count {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.st-count .done { color: var(--brass); }
@media (max-width: 760px) {
  .st-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .st-count { white-space: normal; }
}

/* Lesson rows — the line items */

.rows { list-style: none; margin: 0 0 22px; padding: 0; }

.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--text);
  transition: background var(--dur-hover) ease;
}
a.row:hover { background: var(--panel); color: var(--text); }

.row-num { color: var(--faint); font-family: var(--mono); font-size: 0.74rem; font-variant-numeric: tabular-nums; }

.row > .mark, .row > .row-num { grid-column: 1; }
.row > .row-main { grid-column: 2; }
.row > .row-meta { grid-column: 3; }
.row-main { min-width: 0; }
.row-title { display: block; font-size: 0.97rem; font-weight: 550; letter-spacing: -0.006em; line-height: 1.35; }
.row-instructor { display: block; margin-top: 3px; color: var(--muted); font-size: 0.78rem; line-height: 1.3; }
.row-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; }

.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  row-gap: 3px;
  gap: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.type-chip {
  padding: 2.5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.type-chip.build { color: var(--brass); border-color: var(--line-strong); }

.mark { display: inline-grid; width: 19px; height: 19px; border: 1px solid var(--line-strong); border-radius: 50%; place-items: center; font-size: 10px; color: transparent; }
.mark.is-done { border-color: var(--brass); background: var(--brass); color: #14201a; }
.mark.is-progress { border-color: var(--brass); color: var(--brass); }

.row.is-pending { color: var(--muted); border-left: 2px solid var(--line); }
.row.is-pending .row-title { color: var(--text); font-weight: 500; }
.row.is-pending .mark { border-style: dashed; opacity: 0.65; }
.row-status { color: var(--muted); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.avail-note {
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Start page and optional library */

.section-label {
  margin: 0 0 10px;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.start-page { padding-top: 32px; }
.start-hero { padding: 42px 0 38px; border-bottom: 1px solid var(--line); }
.start-hero .page-title { max-width: 760px; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.start-hero .lede { max-width: 720px; font-size: 1.08rem; }
.start-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.download-detail { margin: 12px 0 0; color: var(--faint); font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; }
.start-result { margin: 38px 0 22px; padding: 24px 26px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); }
.start-result p:last-child { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.45; }
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 34px; }
.start-card { padding: 24px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.start-steps, .plain-list { margin: 0; padding: 0; list-style: none; }
.start-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.start-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.start-steps li > span { grid-row: 1 / 3; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brass); font-family: var(--mono); font-size: 0.68rem; }
.start-steps strong { font-size: 0.95rem; }
.start-steps p { margin: 3px 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.plain-list li { position: relative; padding: 10px 0 10px 20px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.plain-list li::before { position: absolute; left: 0; color: var(--brass); content: "✓"; }
.plain-list li:last-child { border-bottom: 0; }
.start-note { margin: 18px 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.course-order { margin: 0 0 34px; border-top: 1px solid var(--line); }
.course-order > .section-label { padding-top: 26px; }
.course-order-row { display: grid; grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.4fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.course-order-row span { color: var(--muted); line-height: 1.55; }
.course-order-row.is-optional strong { color: var(--muted); }
.next-action, .optional-section {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 34px 0 64px; padding: 24px 26px; border: 1px solid var(--line-strong);
  border-radius: 14px; background: var(--panel);
}
.next-action.compact { margin-top: 28px; }
.next-action h2, .optional-section h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; font-weight: 420; }
.next-action p:last-child, .optional-section p:last-child { max-width: 650px; margin: 7px 0 0; color: var(--muted); line-height: 1.55; }
.optional-section { margin-top: 46px; }

@media (max-width: 720px) {
  .start-grid { grid-template-columns: 1fr; }
  .course-order-row { grid-template-columns: 1fr; gap: 5px; }
  .next-action, .optional-section { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   Lesson page
   ========================================================================== */

.lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}
@media (max-width: 980px) { .lesson-grid { grid-template-columns: minmax(0, 1fr); } }

.lesson-head { margin-bottom: 26px; }
.lesson-intro { max-width: 680px; margin: 14px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.lesson-meta strong { color: var(--text); font-weight: 600; }

.planned-card {
  margin: 0 0 24px;
  padding: 24px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
}
.planned-card h2 { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 450; }
.planned-card dl { margin: 0 0 18px; }
.planned-card dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.planned-card dt { color: var(--muted); font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.planned-card dd { margin: 0; color: var(--text); line-height: 1.5; }
.planned-card > p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 560px) { .planned-card dl > div { grid-template-columns: 1fr; gap: 5px; } }

/* Lesson starting information */

.lesson-start {
  margin: 0 0 30px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
}
.lesson-start-head {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lesson-start-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.lesson-start-row:last-child { border-bottom: 0; }
.lesson-start-label { color: var(--muted); font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 2px; }
.lesson-start-body { min-width: 0; font-size: 0.93rem; line-height: 1.55; }
.lesson-start-body p { margin: 0; }
.lesson-start-files { list-style: none; margin: 0; padding: 0; }
.lesson-start-files li { margin: 5px 0; }
.lesson-start-files .fname { color: var(--brass-bright); font-family: var(--mono); font-size: 0.8rem; }
.lesson-start-files .frole { color: var(--muted); font-size: 0.84rem; }
@media (max-width: 640px) { .lesson-start-row { grid-template-columns: 1fr; gap: 6px; } }

/* Short student action list */

.lesson-steps { margin: 0 0 30px; }
.lesson-steps h2 { margin: 0 0 14px; font-family: var(--serif); font-size: 1.35rem; font-weight: 430; }
.lesson-steps ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lesson-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--line); line-height: 1.55; }
.step-number { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brass); font-family: var(--mono); font-size: 0.68rem; }

/* Video */

.video-frame { position: relative; aspect-ratio: 16/9; margin: 0 0 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #000; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.8); }
.video-frame video, .video-frame iframe { width: 100%; height: 100%; border: 0; object-fit: contain; }

.video-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16/9;
  margin: 0 0 34px;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-align: center;
}
.video-empty .ve-label { margin: 0 0 8px; color: var(--brass); font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.video-empty .ve-note { max-width: 460px; margin: 0; color: var(--muted); font-size: 0.94rem; }

/* Lesson body (injected content fragments) */

.lesson-body { min-width: 0; margin-bottom: 40px; }
.lesson-body h1 { margin: 0 0 16px; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; letter-spacing: -0.016em; line-height: 1.2; }
.lesson-body h2 { margin: 36px 0 12px; font-family: var(--serif); font-size: 1.3rem; font-weight: 450; letter-spacing: -0.01em; line-height: 1.3; }
.lesson-body h2::after { display: block; height: 1px; margin-top: 12px; background: var(--line); content: ""; }
.lesson-body h3 { margin: 24px 0 8px; font-size: 1rem; font-weight: 600; }
.lesson-body p { margin: 11px 0; }
.lesson-body ul, .lesson-body ol { margin: 11px 0 11px 24px; padding: 0; }
.lesson-body li { margin: 6px 0; }
.lesson-body li::marker { color: var(--brass); }
.lesson-body strong { font-weight: 650; }
.lesson-body a { color: var(--brass-bright); }
.lesson-body code { padding: 1px 5px; border-radius: 4px; background: var(--code-bg); font-family: var(--mono); font-size: 0.86em; }
.lesson-body pre { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--code-bg); overflow-x: auto; }
.lesson-body pre code { padding: 0; background: none; font-size: 13px; line-height: 1.55; }
.lesson-body img { border-radius: 10px; border: 1px solid var(--line); }
.lesson-body .brand, .lesson-body .kicker { display: none; }

.lesson-body .codewrap { position: relative; }
.lesson-body .copybtn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.lesson-body .copybtn:hover { border-color: var(--brass); color: var(--brass-bright); }
.lesson-body .copybtn:active { transform: scale(0.96); }

/* Checks */

.checks { margin: 0 0 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.checks-head { padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--brass); font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.checks ol { list-style: none; margin: 0; padding: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 9px; cursor: pointer; transition: background var(--dur-hover) ease; }
.check-item:hover { background: var(--panel-2); }
.check-box { flex: 0 0 auto; display: grid; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: 6px; place-items: center; color: transparent; font-size: 11px; transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.check-item.is-on .check-box { background: var(--brass); border-color: var(--brass); color: #14201a; }
.check-text { font-size: 0.92rem; line-height: 1.5; }
.check-item.is-on .check-text { color: var(--muted); }

/* Recovery */

.recovery { margin: 0 0 30px; }
.recovery-title { margin: 0 0 12px; font-family: var(--serif); font-size: 1.2rem; font-weight: 450; letter-spacing: -0.01em; }
.rec-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 9px; overflow: hidden; }
.rec-item summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; color: var(--text); font-size: 0.92rem; font-weight: 550; list-style: none; transition: background var(--dur-hover) ease; }
.rec-item summary::-webkit-details-marker { display: none; }
.rec-item summary::before { content: "+"; color: var(--brass); font-family: var(--mono); font-size: 0.85rem; transition: transform 200ms var(--ease-out); }
.rec-item[open] summary::before { transform: rotate(45deg); }
.rec-item summary:hover { background: var(--panel-2); }
.rec-body { padding: 2px 16px 15px 37px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.rec-body code { padding: 1px 5px; border-radius: 4px; background: var(--code-bg); font-family: var(--mono); font-size: 0.86em; }

/* Use with a client */

.client-block { margin: 0 0 40px; padding: 24px 26px; border: 1px solid var(--line); border-left: 2px solid var(--brass); border-radius: 12px; background: var(--panel); }
.client-block h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.15rem; font-weight: 450; letter-spacing: -0.01em; }
.client-block p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.62; }

/* Related field notes */

.related-notes { margin: 0 0 40px; }
.related-notes h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.15rem; font-weight: 450; }
.related-notes a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 12px; margin: 0 -12px; border-radius: 8px; color: var(--text); font-size: 0.9rem; text-decoration: none; transition: background var(--dur-hover) ease; }
.related-notes a:hover { background: var(--panel); }
.related-notes .rn-time { color: var(--faint); font-family: var(--mono); font-size: 0.7rem; }

/* Completion */

.complete-block { margin: 46px 0 34px; padding: 24px 26px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); }
.complete-note { margin: 0 0 14px; color: var(--muted); font-size: 0.88rem; }
.complete-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.complete-block.is-done { border-color: var(--brass); }
.complete-stamp { color: var(--brass); font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* Prev/next */

.prevnext { display: flex; justify-content: space-between; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); }
.prevnext a { max-width: 46%; color: var(--muted); font-size: 0.86rem; text-decoration: none; }
.prevnext a:hover { color: var(--brass-bright); }
.prevnext .pn-label { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.prevnext .pn-title { display: block; margin-top: 3px; color: var(--text); font-weight: 550; }
.prevnext .next { text-align: right; margin-left: auto; }

/* ==========================================================================
   Field Notes collection
   ========================================================================== */

.notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
@media (max-width: 980px) {
  .notes-layout { grid-template-columns: minmax(0, 1fr); }
  .notes-layout > div:first-child { grid-row: 2; }
  .note-player { grid-row: 1; position: static; }
}

.note-player { position: sticky; top: 86px; }
.note-player-title { margin: 14px 0 4px; font-family: var(--serif); font-size: 1.3rem; font-weight: 420; letter-spacing: -0.012em; }
.note-player-meta { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; }
.note-player-actions { display: flex; gap: 10px; margin-top: 16px; }
.note-player-actions .btn { white-space: normal; text-align: left; line-height: 1.4; max-width: 50%; }

.notes-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.notes-index a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.notes-index a:hover { background: var(--panel); }
.notes-index a.is-current { background: var(--panel); }
.notes-index a.is-current .ni-title { color: var(--brass-bright); }
.ni-num { color: var(--faint); font-family: var(--mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.ni-title { display: block; font-size: 0.92rem; font-weight: 550; letter-spacing: -0.005em; line-height: 1.35; }
.ni-src { display: block; margin-top: 2px; color: var(--faint); font-size: 0.76rem; }
.ni-time { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; font-variant-numeric: tabular-nums; }

/* Field-note marks appear only once earned — empty circles read as noise */
.notes-index .mark:not(.is-done), .st-section .row .mark[data-note-mark]:not(.is-done) { display: none; }
.notes-index .mark.is-done { display: inline-grid; }

/* ==========================================================================
   Downloads / library
   ========================================================================== */

.dl-grid { display: grid; gap: 14px; margin-top: 30px; }
.dl-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.dl-card strong { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.008em; }
.dl-card p { margin: 4px 0 0; color: var(--muted); font-size: 0.86rem; }
.dl-soon { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }

/* ==========================================================================
   Exhibit: three-reports comparison
   ========================================================================== */

.compare-bar {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  margin: 0 0 14px;
  overflow-x: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--code-bg);
}
.compare-tab {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
  white-space: nowrap;
}
.compare-tab:hover { color: var(--text); }
.compare-tab:active { transform: scale(0.97); }
.compare-tab.is-active { background: var(--forest); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

.compare-verdict { margin: 0 0 16px; color: var(--brass); font-family: var(--serif); font-size: 1.05rem; letter-spacing: -0.006em; transition: opacity 200ms ease; }
.compare-frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.compare-frame iframe { width: 100%; height: min(72vh, 780px); border: 0; background: #fff; }
.compare-open { margin: 14px 0 0; }
.compare-open a { color: var(--brass); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.compare-open a:hover { color: var(--brass-bright); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Reviewer mode
   ========================================================================== */

.review-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  padding: 10px 16px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brass);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  transition: transform var(--dur-press) var(--ease-out);
}
.review-fab:active { transform: scale(0.97); }

.review-panel {
  position: fixed;
  right: 18px;
  bottom: 66px;
  z-index: 50;
  width: min(360px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.review-panel-title { margin: 0 0 10px; font-family: var(--serif); font-size: 1.05rem; }
.review-panel select,
.review-panel textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--text);
  font-size: 0.88rem;
}
.review-panel-actions { display: flex; gap: 10px; }

/* ==========================================================================
   Motion
   ========================================================================== */

.has-js .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-reveal) ease, transform var(--dur-reveal) var(--ease-out); }
.has-js .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (max-width: 760px) {
  .site-main { padding-block: 36px 72px; }
  .header-inner { gap: 12px; }
  .header-nav { gap: 13px; }
  .header-nav a { font-size: 0.62rem; letter-spacing: 0.1em; }
  .header-nav a.nav-course { display: none; }
  .brand { font-size: 0.72rem; letter-spacing: 0.14em; }
  .brand img { width: 30px; height: 30px; }
  .theme-toggle { padding: 5px 9px; font-size: 0.6rem; }
  .row { grid-template-columns: 32px minmax(0, 1fr); }
  .row > .row-meta { grid-column: 2; }
  .note-player { position: static; }
  .resume { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 440px) {
  .brand span { display: none; }
  .brand { gap: 0; }
  .login-page .login-brand { gap: 11px; }
  .login-page .login-brand span { display: inline; }
  .header-nav { gap: 10px; }
  .header-nav a { white-space: nowrap; }
}

/* long file names never push the page sideways */
.lesson-start-body, .lesson-start-files .fname, .lesson-body code, .rec-body code {
  overflow-wrap: anywhere;
}
body { overflow-x: clip; }

/* folds — reference material collapsed by default on lesson pages */
.fold { border-top: 1px solid var(--line); margin: 0; }
.fold > summary {
  cursor: pointer; list-style: none; display: block;
  padding: 20px 2px; color: var(--muted);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: color var(--dur-hover) ease;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "+"; float: right; color: var(--brass); font-size: 0.9rem; letter-spacing: 0; }
.fold[open] > summary::after { content: "\2013"; }
.fold > summary:hover { color: var(--brass-bright); }
.fold-body { padding: 4px 0 8px; }
.fold-body > section { margin-bottom: 34px; }
.fold-body .lesson-body { margin-bottom: 34px; }
.fold-body .recovery-title,
.fold-body .client-block h2,
.fold-body .related-notes h2 { display: none; }
.fold-body .related-notes { margin-bottom: 34px; }

/* ---------- v3: single-column lesson + drawer + finish card ---------- */

.wrap-lesson { max-width: 1240px; margin: 0 auto; }
.wrap-lesson .lesson-content { max-width: 780px; }
.wrap-lesson .prevnext { margin-top: 56px; }

/* sticky strip (mobile only — desktop uses the persistent sidebar) */
.lesson-strip {
  position: sticky; top: 62px; z-index: 30; margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  backdrop-filter: blur(10px);
}
@media (min-width: 901px) { .lesson-strip { display: none; } }
.strip-inner { display: flex; align-items: center; gap: 18px; min-height: 46px; }
.strip-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: transparent;
  color: var(--text); cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.strip-btn:hover { border-color: var(--brass); color: var(--brass-bright); }
.strip-pos { color: var(--muted); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* course drawer */
.drawer {
  position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0; border: 0;
  width: 360px; max-width: 100vw; height: 100dvh; max-height: none;
  background: transparent; overflow: visible;
}
.drawer::backdrop { background: rgba(4, 8, 6, 0.55); opacity: 0; transition: opacity 200ms ease; }
.drawer.is-open::backdrop { opacity: 1; }
.drawer-panel {
  width: 360px; max-width: calc(100vw - 24px); height: 100dvh;
  background: var(--panel); border-right: 1px solid var(--line-strong);
  transform: translateX(-102%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column;
}
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
}
.drawer-body { overflow-y: auto; padding: 6px 12px 48px; }
.drawer-sec { opacity: 0; transform: translateX(-8px); transition: opacity 220ms ease, transform 220ms ease; }
.drawer.is-open .drawer-sec { opacity: 1; transform: none; }
.drawer.is-open .drawer-sec:nth-child(1) { transition-delay: 30ms; }
.drawer.is-open .drawer-sec:nth-child(2) { transition-delay: 60ms; }
.drawer.is-open .drawer-sec:nth-child(3) { transition-delay: 90ms; }
.drawer.is-open .drawer-sec:nth-child(4) { transition-delay: 120ms; }
.drawer.is-open .drawer-sec:nth-child(5) { transition-delay: 150ms; }
.drawer.is-open .drawer-sec:nth-child(6) { transition-delay: 180ms; }
.drawer-sec-title {
  display: flex; gap: 10px; margin: 20px 8px 6px;
  color: var(--muted); font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.drawer-sec-title .st-num { color: var(--brass); }
.drawer-sec ol { list-style: none; margin: 0; padding: 0; }
.drawer-sec li a {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px;
  border-radius: 8px; color: var(--text); font-size: 0.9rem; text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.drawer-sec li a:hover { background: var(--panel-2); }
.drawer-sec li a.is-current { background: var(--panel-2); color: var(--brass-bright); }
.drawer-sec .r-num { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; }
.drawer-sec .dr-title { min-width: 0; }
.drawer-sec .dr-title small,
.sb-row .dr-title small { display: block; margin-top: 2px; color: var(--faint); font-family: var(--mono); font-size: 0.57rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.drawer-sec li a.is-pending { color: var(--muted); }
.drawer-soon { margin: 4px 8px; color: var(--faint); font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) {
  .drawer-panel { transition: none; transform: none; }
  .drawer-sec { opacity: 1; transform: none; transition: none; }
}

/* buttons: Inter, sentence case (mono stays for metadata) */
.btn { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 11px 18px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-text {
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  color: var(--muted); font-family: var(--sans); font-size: 0.82rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-text:hover { color: var(--brass-bright); }

/* copy-for-AI card */
.ai-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 0 30px; padding: 18px 22px;
  border: 1px solid var(--line); border-left: 2px solid var(--brass);
  border-radius: 12px; background: var(--panel);
}
.ai-card .btn { flex-shrink: 0; }
.ai-title { margin: 0 0 4px; font-family: var(--serif); font-size: 1.05rem; font-weight: 450; letter-spacing: -0.008em; }
.ai-note { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
@media (max-width: 640px) { .ai-card { flex-direction: column; align-items: flex-start; } }

/* finish card */
.finish {
  margin: 0 0 30px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--panel); overflow: hidden;
  transition: border-color 250ms ease;
}
.finish.is-done { border-color: var(--brass); }
.finish-head {
  padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--brass);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.finish-checks { list-style: none; margin: 0; padding: 8px; }
.finish-note { margin: 6px 20px 0; color: var(--faint); font-size: 0.84rem; line-height: 1.5; }
.finish-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px 18px; }
.finish-count { margin-right: auto; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; }
.finish-next {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 0 20px; padding: 0 20px; max-height: 0; opacity: 0;
  border: 0 solid var(--line-strong); border-radius: 12px; background: var(--panel-2);
  overflow: hidden;
  transition: max-height 280ms ease-out, opacity 220ms ease, padding 280ms ease-out, margin 280ms ease-out;
}
.finish-next.is-open { max-height: 220px; opacity: 1; padding: 18px 20px; margin: 0 20px 20px; border-width: 1px; }
.fn-eyebrow { margin: 0 0 6px; color: var(--brass); font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.fn-title { margin: 0 0 4px; font-family: var(--serif); font-size: 1.2rem; font-weight: 450; letter-spacing: -0.01em; }
.fn-meta { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 0.7rem; }
@media (max-width: 640px) { .finish-next { flex-direction: column; align-items: flex-start; } }
.checkdraw { width: 14px; height: 14px; }
.checkdraw path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 17; stroke-dashoffset: 17;
  animation: draw-check 300ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .checkdraw path { animation: none; stroke-dashoffset: 0; } }

/* fold rhythm: one divider system, deliberate rows */
.fold-zone { margin-top: 64px; }
.fold > summary { padding: 22px 0; font-size: 0.78rem; letter-spacing: 0.16em; }
.fold > summary::after { float: none; display: inline-block; margin-left: 12px; font-size: 0.85rem; }
.fold-body { padding: 12px 0 36px; }
.rec-item { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; margin-bottom: 0; }
.rec-item summary { padding: 16px 0; }
.rec-item summary:hover { background: none; color: var(--brass-bright); }
.rec-body { padding: 2px 0 18px 22px; }

/* downloads */
.dl-note { margin-top: 26px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.fname-link { text-decoration: underline; text-underline-offset: 3px; }
.fname-link:hover { color: var(--brass-bright); }

/* client work page: tighter head, bigger player */
@media (min-width: 981px) { .notes-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } }
.preview-tag { color: var(--faint); }

/* drawer marks: quiet dots, invisible until there's something to show */
.drawer .mark { width: 7px; height: 7px; border: 0; font-size: 0; background: transparent; box-shadow: none; }
.drawer .mark:not(.is-done):not(.is-progress) { visibility: hidden; }
.drawer .mark.is-progress { box-shadow: inset 0 0 0 1.5px var(--brass); }
.drawer .mark.is-done { background: var(--brass); }

/* lesson resources */
.resources { margin: 0 0 30px; }
.resources-head {
  padding-bottom: 10px; color: var(--brass);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.res-link {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.res-link:hover { border-color: var(--brass); }
.res-link:active { transform: scale(0.98); }
.res-title { font-size: 0.92rem; font-weight: 600; }
.res-kind { color: var(--muted); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }

.row-soon { color: var(--faint); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.video-note { margin: -18px 0 30px; }
.note-player-meta a { color: var(--brass-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   v4: product-feel lesson pages (2026-08-17)
   Persistent outline sidebar, Do-this-now card, live file chips, clip
   cards, toasts. All colors come from the existing tokens so both themes
   work without new values.
   ========================================================================== */

/* ---------- lesson shell: sidebar + content ---------- */

.lesson-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.lesson-content { min-width: 0; }
@media (max-width: 900px) {
  .lesson-shell { grid-template-columns: minmax(0, 1fr); }
  .lesson-sidebar { display: none; }
}

.lesson-sidebar {
  position: sticky;
  top: 86px;
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-width: thin;
}

.sb-progress { margin-bottom: 20px; }
.sb-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.sb-bar [data-progress-fill] {
  display: block; height: 100%; width: 0;
  background: var(--brass);
  transition: width 200ms ease;
}
.sb-count {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.sb-sec-title {
  display: flex; gap: 10px; margin: 20px 8px 6px;
  color: var(--muted); font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.sb-sec-title .st-num { color: var(--brass); }
.sb-sec:first-child .sb-sec-title { margin-top: 4px; }
.sb-sec ol { list-style: none; margin: 0; padding: 0; }
.sb-row {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 10px;
  border-radius: 8px; color: var(--text); font-size: 0.88rem; text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.sb-row:hover { background: var(--panel); }
.sb-row.is-current { background: var(--panel-2); color: var(--brass-bright); box-shadow: inset 0 0 0 1px var(--line); }
.sb-row .r-num { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; }
.sb-row .dr-title { min-width: 0; }
.sb-row.is-pending { color: var(--muted); }
.sb-row.is-pending .mark { border-style: dashed; opacity: 0.65; }

/* sidebar marks: quiet dots, invisible until there is something to show */
.lesson-sidebar .mark { flex: 0 0 auto; align-self: center; width: 7px; height: 7px; border: 0; font-size: 0; background: transparent; box-shadow: none; }
.lesson-sidebar .mark:not(.is-done):not(.is-progress) { visibility: hidden; }
.lesson-sidebar .mark.is-progress { box-shadow: inset 0 0 0 1.5px var(--brass); }
.lesson-sidebar .mark.is-done { background: var(--brass); }

.sb-next {
  display: block; margin-top: 24px; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel);
  text-decoration: none;
  transition: border-color var(--dur-hover) ease;
}
.sb-next:hover { border-color: var(--brass); }
.sb-next-label {
  display: block; color: var(--brass); font-family: var(--mono); font-size: 0.64rem;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.sb-next-title { display: block; margin-top: 5px; color: var(--text); font-size: 0.92rem; font-weight: 600; line-height: 1.35; }

/* ---------- title row + Copy-for-AI chip ---------- */

.lesson-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.lesson-title-row .page-title { flex: 1 1 320px; }
@media (max-width: 640px) {
  .lesson-title-row { display: block; }
  .lesson-title-row .ai-chip { margin: 12px 0 0; }
}

.ai-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.ai-chip:hover { border-color: var(--brass); color: var(--brass-bright); }
.ai-chip:active { transform: scale(0.96); }

/* ---------- Do this now card ---------- */

.do-card { margin-bottom: 34px; }

.do-steps { margin: 0; padding: 0; list-style: none; }
.do-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.do-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.do-steps .step-number { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brass); font-family: var(--mono); font-size: 0.66rem; }

.do-group { padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.do-group-title {
  margin: 0 0 8px;
  color: var(--brass);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.do-group .finish-checks { padding: 0; }
.do-group .finish-note { margin: 10px 0 0; }
.do-card .finish-foot { border-top: 1px solid var(--line); }
.do-card.is-done { border-color: var(--brass); }

/* recovery accordions live inside the card: contained, no detached heading */
.do-group .rec-item { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; margin-bottom: 0; }
.do-group .rec-item summary { padding: 13px 0; }
.do-group .rec-item summary:hover { background: none; color: var(--brass-bright); }
.do-group .rec-body { padding: 2px 0 16px 22px; }

/* ---------- file chips (live references) ---------- */

.file-chip {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--muted);
  font-family: var(--mono); font-size: 0.74rem;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
a.file-chip { color: var(--brass-bright); border-color: var(--line-strong); }
a.file-chip:hover { border-color: var(--brass); color: var(--brass-bright); }
.file-chip.is-zip { border-style: dashed; }
.file-chip.is-folder { color: var(--muted); }

a.file-ref { text-decoration: none; }
a.file-ref code { transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease; }
a.file-ref:hover code { color: var(--brass-bright); }

/* ---------- prerequisite info bar ---------- */

.prereq-bar {
  margin: -8px 0 30px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--brass);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.prereq-bar a { color: var(--brass-bright); }

/* ---------- clip cards (client work) ---------- */

.related-notes .clips-sub { margin: 0 0 16px; color: var(--muted); font-size: 0.88rem; }
.related-notes h2 { margin: 0 0 6px; }

.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.notes-grid { margin-top: 8px; }

.note-categories { display: grid; gap: 36px; }
.note-category { min-width: 0; }
.note-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.note-category-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.note-category-head span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.clip-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--text);
  overflow: hidden; text-decoration: none;
  transition: border-color 180ms ease, transform var(--dur-press) var(--ease-out);
}
.clip-card:hover { border-color: var(--brass); color: var(--text); }
.clip-card:active { transform: scale(0.99); }
.clip-card.is-current { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }

.clip-thumb {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--panel-2) 0%, var(--forest) 100%);
  border-bottom: 1px solid var(--line);
}
.clip-num {
  color: var(--brass);
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 340;
  letter-spacing: -0.02em;
}
.clip-time {
  position: absolute; right: 10px; bottom: 8px;
  padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 74%, transparent);
  color: var(--text);
  font-family: var(--mono); font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
}
.clip-thumb .mark { position: absolute; top: 9px; left: 10px; }
.clip-thumb .mark:not(.is-done) { display: none; }

.clip-text { display: grid; gap: 5px; padding: 13px 15px 15px; }
.clip-title { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.clip-teaser { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.clip-src {
  color: var(--faint);
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- client work player ---------- */

.note-player { position: static; max-width: 880px; margin-bottom: 40px; scroll-margin-top: 78px; }
.note-player-teaser { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

/* ---------- next lesson card ---------- */

.prevnext { align-items: center; border-top: 0; padding-top: 0; }
.prev-link {
  color: var(--muted); font-size: 0.84rem; text-decoration: none;
  transition: color var(--dur-hover) ease;
}
.prev-link:hover { color: var(--brass-bright); }

.next-card {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 620px; margin-left: auto;
  padding: 14px 0;
  border: 1px solid var(--line); border-width: 1px 0 0; border-radius: 0; background: transparent;
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-hover) ease;
}
.next-card:hover { border-color: var(--brass); color: var(--text); }
.nc-text { display: grid; gap: 4px; min-width: 0; }
.nc-eyebrow { color: var(--brass); font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.nc-title { font-family: var(--sans); font-size: 0.95rem; font-weight: 650; letter-spacing: -0.008em; line-height: 1.3; }
.nc-meta { color: var(--muted); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; }
.nc-cta { flex: 0 0 auto; color: var(--brass); font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 640px) {
  .prevnext { flex-direction: column; align-items: stretch; }
  .next-card { max-width: none; margin-left: 0; }
}

/* ---------- toasts ---------- */

.toasts {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 60;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.84rem;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.toast.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: none; }
}

/* ---------- file viewer ---------- */

.file-viewer { padding-top: 8px; }
.file-view-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.file-view-title { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 420; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.file-view-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.file-view-actions .ai-chip { margin-top: 4px; }
.file-view-path { margin: 10px 0 18px; color: var(--muted); font-family: var(--mono); font-size: 0.76rem; overflow-wrap: anywhere; }
.file-view-note { margin: 0 0 14px; color: var(--faint); font-size: 0.84rem; }
.file-view-pane {
  margin: 0 0 40px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--code-bg);
  overflow-x: auto;
}
.file-view-pane code {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   v4.1: posters, real thumbnails, collapsible outline, locked skeleton,
   viewer trail (2026-08-17 round 2)
   ========================================================================== */

/* video poster behind the iframe: deliberate while the player loads */
.video-frame { position: relative; }
.video-poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.42) saturate(0.85);
}
.video-frame iframe { position: relative; z-index: 1; }
.video-empty { position: relative; overflow: hidden; }
.video-empty > div { position: relative; z-index: 1; }

/* clip cards: real frame grabs */
.clip-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.clip-thumb .clip-time, .clip-thumb .mark { z-index: 1; }
.clip-thumb .mark { z-index: 2; }

/* locked skeleton sections */
.lock-tag {
  display: inline-block;
  margin-left: 10px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--faint);
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  vertical-align: middle;
}
.st-section.is-locked { opacity: 0.55; }
.st-section.is-locked .st-section-title { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--muted); }
.st-section.is-locked .st-result { margin-bottom: 22px; }
.sb-sec.is-locked { opacity: 0.6; }
.sb-locked-note { margin: 2px 8px 0; color: var(--faint); font-size: 0.76rem; line-height: 1.45; }
.sb-sec.is-locked .lock-tag { margin-left: 6px; }

/* file viewer trail */
.viewer-trail { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.viewer-back {
  color: var(--brass); font-size: 0.88rem; text-decoration: none;
  transition: color var(--dur-hover) ease;
}
.viewer-back:hover { color: var(--brass-bright); }
.viewer-all { color: var(--muted); font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; }
.viewer-all:hover { color: var(--brass-bright); }

/* ==========================================================================
   Course review build — module navigation and focused lesson views
   ========================================================================== */

/* Course home: all nine modules are visible; lesson rows open only on demand. */
.masthead { max-width: 820px; padding: 24px 0 26px; }
.masthead .lede { margin-top: 10px; }
.standing { gap: 6px 20px; margin-top: 20px; padding-top: 14px; font-size: 0.68rem; }
.resume {
  margin: 0 0 28px;
  padding: 13px 8px;
  border-width: 1px 0;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
}
.resume-label { margin-bottom: 2px; font-size: 0.6rem; }
.resume-title { font-family: var(--sans); font-size: 1rem; font-weight: 650; }
.resume-detail { display: inline; margin: 0 0 0 8px; font-size: 0.76rem; }
.resume .btn { padding: 8px 14px; font-size: 0.78rem; }

.course-modules {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.course-module {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.course-module[open] { background: color-mix(in srgb, var(--panel) 46%, transparent); }
.course-module-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 8px;
  cursor: pointer;
  list-style: none;
}
.course-module-summary::-webkit-details-marker { display: none; }
.module-number {
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.module-copy { display: grid; gap: 2px; min-width: 0; }
.module-copy strong {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  line-height: 1.3;
}
.module-copy small { max-width: 700px; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.course-module:not([open]) .module-copy small { display: none; }
.module-status {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.module-progress strong { color: var(--brass); font-weight: 700; }
.module-arrow { color: var(--muted); font-size: 1rem; transition: transform 180ms var(--ease-out); }
.course-module[open] .module-arrow { transform: rotate(180deg); }
.course-module > .rows { margin: 0; padding: 3px 8px 10px 42px; border-top: 1px solid var(--line); }
.course-module .row {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 7px 4px;
  border-radius: 6px;
}
.course-module .row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.course-module .row-title { font-size: 0.9rem; font-weight: 590; line-height: 1.35; }
.course-module .row-instructor { display: inline; margin: 0; font-size: 0.7rem; }
.course-module .row-meta { gap: 8px; font-size: 0.66rem; letter-spacing: 0.02em; }
.course-module .mark { width: 14px; height: 14px; font-size: 8px; }
.course-module .mark:not(.is-done):not(.is-progress) { visibility: hidden; }
.course-module .mark.is-progress { width: 7px; height: 7px; border: 1px solid var(--brass); }
.course-module .mark.is-done { width: 12px; height: 12px; }
.row-slot { display: block; grid-column: 1; width: 14px; height: 14px; }
.course-module .row.is-pending { border-left: 0; color: var(--muted); }
.course-module .row.is-pending .row-title { color: var(--muted); font-weight: 530; }
.course-module .row-status { font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Desktop course navigation: normal expandable modules, no sideways text. */
.wrap-lesson .lesson-content { max-width: none; }
.wrap-lesson .prevnext { margin-top: 32px; }
.lesson-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 32px; }
.lesson-sidebar { padding-right: 12px; }
.sb-top { display: block; padding: 0 6px 14px; border-bottom: 1px solid var(--line); }
.sb-all {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
}
.sb-top .sb-progress { margin: 0; }
.sb-sec { border-bottom: 1px solid var(--line); }
.sb-sec-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 6px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.sb-sec-title::-webkit-details-marker { display: none; }
.sb-sec-title .st-num { margin-right: 8px; }
.sb-chevron { flex: 0 0 auto; transition: transform 180ms var(--ease-out); }
.sb-sec[open] .sb-chevron { transform: rotate(180deg); }
.sb-sec ol { padding: 0 0 6px; }
.sb-row { align-items: flex-start; padding: 6px; font-size: 0.8rem; line-height: 1.3; }
.sb-row small { display: block; margin-top: 3px; color: var(--faint); font-size: 0.68rem; }
.sb-examples {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 8px;
  border-radius: 9px;
  color: var(--text);
  font-size: 0.84rem;
  text-decoration: none;
}
.sb-examples span { color: var(--faint); font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; }
.drawer-sec { border-bottom: 1px solid var(--line); }
.drawer-sec-title { cursor: pointer; list-style: none; }
.drawer-sec-title::-webkit-details-marker { display: none; }

/* The lesson header is short; the four views hold the detail. */
.lesson-page .site-header { position: static; }
.lesson-page .lesson-strip { top: 0; }
.site-main-lesson { padding-top: 24px; }
.lesson-head { margin-bottom: 16px; }
.lesson-head .breadcrumb { margin-bottom: 8px; }
.lesson-head .breadcrumb span { margin-inline: 4px; color: var(--faint); }
.lesson-head .page-title {
  font-family: var(--sans);
  font-size: clamp(1.65rem, 2.7vw, 2.2rem);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.lesson-head .lesson-meta { margin-top: 8px; }
.lesson-workspace {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.lesson-tabs {
  position: static;
  z-index: 8;
  display: flex;
  gap: 22px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(12px);
}
.lesson-tabs button {
  min-height: 42px;
  padding: 8px 0 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 650;
  transition: background 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.lesson-tabs button.is-active {
  border-bottom-color: var(--brass);
  background: transparent;
  color: var(--text);
}
.lesson-tabs button:active { transform: scale(0.97); }
.lesson-panel { padding: 20px 0 0; }
.lesson-panel[hidden] { display: none; }
.lesson-panel-head { max-width: 680px; margin-bottom: 24px; }
.lesson-panel-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 420;
  letter-spacing: -0.015em;
}
.lesson-panel-head > p:last-child { margin: 9px 0 0; color: var(--muted); line-height: 1.55; }

.overview-video .video-frame,
.overview-video .video-empty { margin: 0; box-shadow: none; }
.overview-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 15px;
}
.overview-summary p {
  margin: 0;
  max-width: 720px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.overview-summary p > span {
  display: inline-block;
  margin-right: 10px;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overview-action {
  flex: 0 0 auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--brass);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
}
.overview-action:hover { color: var(--brass-bright); }
.lesson-panel .related-notes { margin: 28px 0 0; }

/* Files and tools */
.tool-cards { display: grid; gap: 9px; margin-bottom: 24px; }
.tool-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  text-decoration: none;
}
.tool-card > span:nth-child(2) { display: grid; gap: 2px; }
.tool-card small { color: var(--muted); font-size: 0.78rem; }
.tool-card > span:last-child { color: var(--muted); font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; }
.tool-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #fff; font-family: var(--mono); font-size: 0.68rem; font-weight: 800; }
.is-cursor .tool-mark { background: #2563eb; }
.is-claude .tool-mark { background: #c15f3c; }
.is-relay .tool-mark { background: #9a792f; color: #17130b; }
.lesson-file-list { display: grid; gap: 9px; margin: 0 0 28px; padding: 0; list-style: none; }
.lesson-file { padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--ink); }
.lesson-file-name { font-size: 0.9rem; font-weight: 650; }
.lesson-file p { margin: 5px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.lesson-panel .resources { margin-bottom: 0; }

/* Action and written lesson */
.lesson-reading { max-width: 760px; margin-inline: auto; }
.do-card { border-color: var(--line); background: var(--ink); }
.action-card-head { padding: 22px; border-bottom: 1px solid var(--line); }
.action-card-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 420;
  line-height: 1.4;
}
.action-steps, .do-group { padding: 20px 22px; border-top: 0; border-bottom: 1px solid var(--line); }
.action-steps h3, .do-group h3 { margin: 0 0 12px; font-size: 0.92rem; }
.do-steps li { padding: 10px 0; }
.finish-foot { padding: 17px 22px; }
.written-guide { margin-top: 34px; }
.lesson-reference-link { margin: 26px 0; }
.lesson-reference-link a, .text-link { color: var(--brass-bright); font-weight: 650; text-underline-offset: 3px; }
.empty-state { padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }

.setup-guide { display: grid; gap: 12px; }
.setup-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--ink);
}
.setup-step-number { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brass); font-family: var(--mono); font-size: 0.68rem; }
.setup-step h2 { margin: 0; font-size: 1.2rem; font-weight: 650; }
.setup-step p { margin: 8px 0 0; color: var(--muted); }
.setup-step .btn, .setup-step .text-link { margin-top: 14px; }
.tool-label { display: inline-flex; width: fit-content; margin: 0 0 6px !important; padding: 3px 8px; border-radius: 6px; color: #fff !important; font-family: var(--mono); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.tool-cursor { background: #2563eb; }
.tool-claude { background: #c15f3c; }
.tool-relay { background: #9a792f; color: #17130b !important; }
.terminal-example { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--code-bg); overflow: hidden; }
.terminal-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 0.66rem; }
.terminal-top .copybtn { position: static; }
.terminal-example pre { margin: 0; padding: 15px; border: 0; border-radius: 0; background: transparent; }
.terminal-example code { padding: 0; background: transparent; color: var(--text); font-family: var(--mono); font-size: 0.82rem; white-space: pre-wrap; }
.expected-result { padding: 11px 13px; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--forest) 48%, transparent); color: var(--text) !important; font-size: 0.86rem; }

.revenue-guide { display: grid; gap: 28px; }
.practical-explanation { max-width: 700px; }
.practical-explanation h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 420;
  line-height: 1.3;
}
.practical-explanation > p:not(.section-label) { margin: 10px 0 0; color: var(--muted); line-height: 1.65; }
.follow-up-decisions { border-block: 1px solid var(--line); }
.follow-up-decision {
  display: grid;
  grid-template-columns: 125px minmax(180px, 0.8fr) minmax(240px, 1.2fr);
  gap: 18px;
  align-items: baseline;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}
.follow-up-decision:last-child { border-bottom: 0; }
.follow-up-decision > span { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.follow-up-decision.is-ready > span { color: var(--ok); }
.follow-up-decision.is-waiting > span { color: var(--brass-bright); }
.follow-up-decision.is-blocked > span { color: var(--danger); }
.follow-up-decision strong { font-size: 0.9rem; }
.follow-up-decision p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.output-files { margin: 18px 0 0; }
.output-files > div { display: grid; grid-template-columns: minmax(185px, 0.55fr) minmax(0, 1fr); gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.output-files dt, .output-files dd { margin: 0; }
.output-files dd { color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.decision-rule { padding: 13px 15px; border-left: 2px solid var(--brass); background: var(--ink); color: var(--text) !important; }

/* Personal notes */
.student-notes-card { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--ink); }
.student-notes-card label { display: block; margin-bottom: 10px; font-size: 0.86rem; font-weight: 650; }
.student-notes-card textarea {
  width: 100%;
  min-height: 280px;
  resize: vertical;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  line-height: 1.6;
}
.student-notes-card textarea:focus { border-color: var(--brass); outline: 2px solid color-mix(in srgb, var(--brass) 32%, transparent); outline-offset: 1px; }
.student-note-status { margin: 8px 0 0; color: var(--faint); font-family: var(--mono); font-size: 0.66rem; }

/* File reading follows the familiar rendered/source split from code editors. */
.file-view-tabs { display: flex; gap: 4px; margin-bottom: 10px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.file-view-tab { padding: 7px 13px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.8rem; font-weight: 650; }
.file-view-tab.is-active { background: var(--raise); color: var(--text); }
.file-document, .file-view-pane {
  margin: 0 0 40px;
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.file-document { color: var(--text); line-height: 1.7; }
.file-document > :first-child { margin-top: 0; }
.file-document > :last-child { margin-bottom: 0; }
.file-document h2, .file-document h3, .file-document h4, .file-document h5 { margin: 1.7em 0 0.55em; font-family: var(--serif); font-weight: 450; line-height: 1.25; }
.file-document h2 { font-size: 1.65rem; }
.file-document h3 { font-size: 1.3rem; }
.file-document p { margin: 0.8em 0; }
.file-document li { margin: 0.35em 0; }
.file-document code { padding: 2px 5px; border-radius: 4px; background: var(--code-bg); font-family: var(--mono); font-size: 0.86em; }
.file-document pre { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--code-bg); overflow-x: auto; }
.file-document pre code { padding: 0; background: transparent; white-space: pre-wrap; }
.file-document blockquote { margin: 1em 0; padding: 10px 16px; border-left: 2px solid var(--brass); color: var(--muted); }
.file-document hr { height: 1px; margin: 2em 0; border: 0; background: var(--line); }

@media (hover: hover) and (pointer: fine) {
  .course-module-summary:hover, .sb-examples:hover { background: var(--raise); }
  .lesson-tabs button:hover, .file-view-tab:hover { color: var(--text); }
  .tool-card:hover { border-color: var(--brass); color: var(--text); }
}

@media (max-width: 980px) {
  .overview-summary { align-items: flex-start; }
}

@media (max-width: 720px) {
  .site-main { padding-block: 28px 64px; }
  .masthead { padding-top: 24px; }
  .course-module-summary { grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 8px; min-height: 60px; padding: 10px 4px; }
  .module-status { display: none; }
  .module-arrow { grid-column: 3; grid-row: 1; }
  .module-copy small { display: none; }
  .course-module > .rows { padding: 3px 4px 9px 28px; }
  .course-module .row { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 7px; padding-block: 7px; }
  .course-module .row-instructor { display: none; }
  .course-module .row-title { font-size: 0.86rem; }
  .course-module .row > .row-meta { grid-column: 3; justify-content: flex-end; text-align: right; }
  .course-module .row-status { max-width: 70px; font-size: 0.6rem; line-height: 1.25; }
  .lesson-workspace { margin-inline: 0; border-radius: 0; }
  .lesson-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .lesson-tabs::-webkit-scrollbar { display: none; }
  .lesson-tabs button { min-width: 0; padding-inline: 5px; font-size: 0.78rem; }
  .lesson-panel { padding: 16px 0 0; }
  .overview-summary { display: block; }
  .overview-action { margin-top: 9px; }
  .tool-card { grid-template-columns: 36px minmax(0, 1fr); }
  .tool-card > span:last-child { grid-column: 2; }
  .setup-step { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  .setup-step-number { width: 26px; height: 26px; }
  .follow-up-decision { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 14px; }
  .output-files > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .prompt-example code { font-size: 0.74rem; }
  .file-viewer { padding-top: 0; }
  .file-document, .file-view-pane { padding: 18px; }
}

@media (max-width: 900px) {
  .lesson-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 640px) {
  .prevnext .next-card { max-width: none; width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .module-arrow, .sb-chevron, .lesson-tabs button { transition: none; }
}

/* ==========================================================================
   Review build v2 (2026-08-23 PM): quiet home, thumbnail sidebar,
   poster-first video with Relay's own player chrome.
   ========================================================================== */

/* ---------- home: calmer masthead, stats, resume, modules ---------- */

.masthead { max-width: 760px; padding: 18px 0 20px; }
.masthead .lede { margin-top: 8px; font-size: 0.98rem; }
.standing {
  gap: 6px 18px;
  margin-top: 12px;
  padding-top: 10px;
  font-size: 0.62rem;
  border-top: 0;
  color: var(--faint);
}
.standing strong { color: var(--muted); }

.resume {
  margin: 0 0 20px;
  padding: 10px 2px;
  border-width: 0 0 1px;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
}
.resume-label { margin-bottom: 2px; font-size: 0.56rem; }
.resume-title { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; }
.resume-detail { display: inline; margin: 0 0 0 8px; font-size: 0.72rem; }
.resume .btn { padding: 7px 13px; font-size: 0.7rem; }

.course-module[open] { background: transparent; }
.course-module-summary { min-height: 54px; padding: 9px 6px; gap: 10px; }
.module-number { color: var(--faint); font-size: 0.6rem; }
.module-copy strong { font-size: 0.95rem; }
.module-copy small { font-size: 0.76rem; }
.course-module > .rows { padding: 2px 6px 8px 34px; }
.course-module .row { min-height: 40px; padding: 6px 4px; }
.course-module .row-instructor {
  display: inline;
  margin: 0 0 0 9px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- lesson sidebar: calm Whop-style list with thumbnails ---------- */

.lesson-shell { grid-template-columns: 258px minmax(0, 1fr); gap: 36px; }
.sb-sec-title {
  margin: 14px 6px 4px;
  padding: 6px 6px;
  color: var(--faint);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}
.sb-sec-title .st-num { color: var(--faint); }
.sb-sec ol { padding: 0 0 4px; }
.sb-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: 0.8rem;
  line-height: 1.3;
}
.sb-thumb {
  flex: 0 0 auto;
  width: 50px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-2);
}
.sb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-thumb.is-empty { border-style: dashed; background: transparent; }
.sb-text { min-width: 0; display: grid; gap: 1px; }
.sb-row .dr-title { min-width: 0; font-size: 0.79rem; line-height: 1.25; }
.sb-meta { color: var(--faint); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.04em; }
.sb-row.is-current {
  background: transparent;
  color: var(--brass-bright);
  box-shadow: inset 2px 0 0 var(--brass);
  border-radius: 0 7px 7px 0;
}
.sb-row.is-pending .sb-thumb.is-empty { opacity: 0.5; }

/* ---------- video: poster cover, one clean play button, Relay controls ---------- */

.video-shell { margin: 0 0 26px; }
.video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #000;
}
.video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}
.video-stage.is-live-play iframe { opacity: 1; }
.video-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.video-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 8, 6, 0.08), rgba(4, 8, 6, 0.38));
}
.video-cover[hidden] { display: none; }
.video-play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(8, 12, 10, 0.55);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.video-play:hover { transform: scale(1.06); background: rgba(8, 12, 10, 0.78); }
.video-play:active { transform: scale(0.97); }
.video-play svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
.video-stage.is-live-play .video-cover { display: none; }

.video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 22px 12px 9px;
  background: linear-gradient(180deg, transparent, rgba(2, 5, 4, 0.78));
  opacity: 0;
  transition: opacity 180ms ease;
}
.video-stage:hover .video-controls,
.video-stage.is-paused .video-controls,
.video-controls:focus-within { opacity: 1; }
.vc-btn {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.7rem;
  transition: color 120ms ease;
}
.vc-btn:hover { color: var(--brass-bright); }
.vc-btn svg { width: 16px; height: 16px; fill: currentColor; }
.vc-icon-pause { display: none; }
.video-stage.is-live-play:not(.is-paused) .vc-icon-play { display: none; }
.video-stage.is-live-play:not(.is-paused) .vc-icon-pause { display: block; }
.vc-time {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vc-scrub {
  flex: 1;
  min-width: 40px;
  height: 3px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
}
.vc-scrub::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.vc-scrub::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.vc-speed-wrap { position: relative; display: inline-flex; }
.vc-speed { min-width: 34px; }
.vc-speed-list {
  position: absolute;
  right: 0;
  bottom: 34px;
  display: grid;
  min-width: 86px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(8, 12, 10, 0.94);
}
.vc-speed-list[hidden] { display: none; }
.vc-speed-list button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-align: left;
}
.vc-speed-list button:hover { background: rgba(255, 255, 255, 0.08); }
.vc-speed-list button.is-on { color: var(--brass-bright); }

@media (max-width: 720px) {
  .lesson-shell { grid-template-columns: minmax(0, 1fr); }
  .video-controls { gap: 7px; padding: 18px 8px 7px; }
  .vc-time { font-size: 0.6rem; }
}
/* ==========================================================================
   Dark-only + motion pass (2026-08-23 evening)
   ========================================================================== */

/* reviewer chip (reuses the old toggle slot in the header) */
.review-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  padding: 6px 11px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: transparent;
  color: var(--brass);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- quiet lesson head ---------- */

.lesson-head { margin-bottom: 18px; }
.overview-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.overview-line > span {
  flex: 0 0 auto;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- sidebar: calmer headers, dimmed pending, one-open accordion ---------- */

.sb-sec-title { color: var(--muted); transition: color var(--dur-hover) ease; }
.sb-sec-title:hover { color: var(--text); }
.sb-sec[open] > .sb-sec-title { color: var(--text); }
.sb-row.is-pending { opacity: 0.55; }
.sb-row.is-pending:hover { opacity: 0.85; }
.sb-row.is-pending .sb-meta { font-size: 0.56rem; }
.sb-row { transition: background var(--dur-hover) ease, opacity var(--dur-hover) ease; }
.sb-row:active { transform: scale(0.99); }

/* ---------- motion: accordions unfold instead of snapping ---------- */

@keyframes unfold {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.course-module[open] > .rows,
.lesson-sidebar .sb-sec[open] > ol,
.drawer-sec[open] > ol {
  animation: unfold 200ms var(--ease-out);
}

/* ---------- motion: tab panels crossfade ---------- */

@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.lesson-panel.is-active { animation: panel-in 200ms var(--ease-out); }

/* ---------- motion: lesson page settles in once ---------- */

@keyframes lesson-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.lesson-content > .lesson-head,
.lesson-content > .lesson-workspace {
  animation: lesson-in 260ms var(--ease-out);
}
.lesson-content > .lesson-workspace { animation-delay: 40ms; }

/* ---------- motion: cover crossfades into the playing video ---------- */

.video-cover { transition: opacity 240ms ease; }
.video-stage.is-live-play .video-cover {
  display: grid;
  opacity: 0;
  pointer-events: none;
}

/* ---------- motion: speed menu pops from its trigger ---------- */

.vc-speed-list {
  transform-origin: bottom right;
  transition: opacity 125ms ease-out, transform 125ms ease-out;
}
.vc-speed-list[hidden] { display: grid; opacity: 0; transform: scale(0.95); pointer-events: none; }

/* ---------- reduced motion: keep fades, drop movement ---------- */

@keyframes fade-only {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .course-module[open] > .rows,
  .lesson-sidebar .sb-sec[open] > ol,
  .drawer-sec[open] > ol,
  .lesson-panel.is-active,
  .lesson-content > .lesson-head,
  .lesson-content > .lesson-workspace {
    animation-duration: 120ms;
    animation-name: fade-only;
  }
  .video-cover { transition: opacity 120ms ease; }
  .vc-speed-list { transition: opacity 120ms ease; transform: none; }
}

/* ==========================================================================
   Architecture A (2026-08-23 night): Linear-quiet collapsible rail,
   full-width content, slim surfaces. Expensive, not chunky.
   ========================================================================== */

/* ---------- full-width lesson layout ---------- */

.wrap-lesson {
  width: min(100% - 48px, 1560px);
  max-width: none;
  margin-inline: auto;
}
.lesson-shell { grid-template-columns: 244px minmax(0, 1fr); gap: 40px; }
.wrap-lesson .lesson-content { max-width: none; }
body[data-sb="rail"] .lesson-shell { grid-template-columns: 48px minmax(0, 1fr); gap: 32px; }
body[data-sb="rail"] .lesson-sidebar { display: none; }
.sb-mini { display: none; }
body[data-sb="rail"] .sb-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: sticky;
  top: 86px;
  padding: 6px 0;
  border-right: 1px solid var(--line);
}
.sb-mini-open, .sb-mini-mod {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.sb-mini-open { color: var(--brass); font-size: 0.8rem; margin-bottom: 6px; }
.sb-mini-open:hover, .sb-mini-mod:hover { background: var(--panel); color: var(--text); }
.sb-mini-mod.is-current { color: var(--brass-bright); box-shadow: inset 2px 0 0 var(--brass); border-radius: 0 7px 7px 0; }

/* ---------- top progress strip ---------- */

.lesson-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.lt-mod {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-prog { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lt-bar {
  display: inline-block;
  width: 90px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.lt-bar [data-progress-fill] {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brass);
  transition: width 200ms ease;
}
.lt-count {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lt-pending { color: var(--faint); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- the quiet rail ---------- */

.lesson-sidebar {
  position: sticky;
  top: 76px;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}
.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--line);
}
.sb-all { margin: 0; font-size: 0.76rem; }
.sb-collapse {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font-size: 0.78rem;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.sb-collapse:hover { background: var(--panel); color: var(--text); }
.sb-sec { border-bottom: 0; }
.sb-sec-title {
  margin: 10px 4px 2px;
  padding: 4px 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sb-sec ol { padding: 0; }
.sb-row {
  gap: 8px;
  padding: 4px 8px;
  font-size: 0.76rem;
  line-height: 1.3;
}
.sb-row .dr-title { font-size: 0.76rem; flex: 1 1 auto; }
.sb-row .sb-meta {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
}
.lesson-sidebar .mark {
  flex: 0 0 auto;
  align-self: center;
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0;
  background: transparent;
  box-shadow: none;
}
.lesson-sidebar .mark:not(.is-done):not(.is-progress) { visibility: visible; }
.lesson-sidebar .mark.is-progress { border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--brass); }
.lesson-sidebar .mark.is-done { border-color: var(--brass); background: var(--brass); }
.sb-row.is-current { border-radius: 6px; }
.sb-examples {
  margin-top: 10px;
  padding: 8px 8px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  font-size: 0.74rem;
}

/* ---------- slim surfaces inside the lesson ---------- */

.overview-line { max-width: 760px; }
.lesson-panel-head { max-width: 720px; }
.setup-step { padding: 14px 16px; border-radius: 10px; gap: 12px; }
.setup-step-number { width: 24px; height: 24px; font-size: 0.62rem; }
.setup-step h2 { font-size: 1.05rem; }
.tool-cards { gap: 7px; }
.tool-card { padding: 10px 12px; border-radius: 9px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
.tool-mark { width: 28px; height: 28px; font-size: 0.6rem; }
.lesson-file { padding: 10px 14px; border-radius: 8px; }
.action-card-head { padding: 16px 18px; }
.action-steps, .do-group { padding: 14px 18px; }
.finish-foot { padding: 13px 18px; }
.student-notes-card { padding: 14px 16px; border-radius: 10px; }
.planned-card { padding: 18px 20px; border-radius: 10px; }
.do-card .action-card-head h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
.follow-up-decision { padding: 11px 2px; }
.rec-item summary { padding: 10px 14px; }
.prereq-bar { padding: 10px 14px; }

/* ---------- mobile keeps the drawer ---------- */

@media (max-width: 900px) {
  .sb-mini { display: none !important; }
  body[data-sb="rail"] .lesson-shell { grid-template-columns: minmax(0, 1fr); }
  .lesson-topline { display: none; }
  .lesson-tabs { display: flex; gap: 16px; }
  .lesson-tabs button { min-width: 0; padding-inline: 0; font-size: 0.76rem; }
}

/* ==========================================================================
   Width balance pass (2026-08-23 night): the video gets air, and every
   other page gets the same width + slim treatment.
   ========================================================================== */

/* lesson: big but not breathless */
.wrap-lesson .lesson-content { max-width: 1020px; }

/* shared chrome: wider than 1160, still measured */
.wrap { width: min(100% - 48px, 1280px); }
.wrap-reading { width: min(100% - 48px, 940px); }

/* home: slimmer modules */
.course-module-summary { min-height: 50px; padding: 8px 6px; }
.course-module > .rows { padding: 2px 6px 6px 34px; }
.course-module .row { min-height: 36px; padding: 5px 4px; }
.masthead { padding: 16px 0 16px; }
.resume { margin: 0 0 16px; padding: 9px 2px; }

/* start page: slimmer cards */
.start-hero { padding: 30px 0 26px; }
.start-result { margin: 26px 0 18px; padding: 16px 20px; border-radius: 10px; }
.start-card { padding: 16px 20px; border-radius: 10px; }
.start-grid { gap: 12px; margin: 0 0 26px; }
.course-order-row { padding: 12px 0; }
.next-action, .optional-section { margin: 26px 0 48px; padding: 16px 20px; border-radius: 10px; }

/* real client breakdowns: denser grid, slimmer cards */
.clip-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 12px; }
.clip-text { padding: 10px 13px 12px; }
.clip-card { border-radius: 10px; }
.note-category-head { margin: 22px 0 10px; }

/* downloads + file viewers: slimmer panes */
.dl-card { padding: 16px 20px; border-radius: 10px; }
.file-document, .file-view-pane { padding: clamp(16px, 3vw, 28px); border-radius: 10px; }
.file-view-tabs { padding: 4px; border-radius: 9px; }

/* lesson bottom nav: slimmer */
.wrap-lesson .prevnext { margin-top: 28px; }
.next-card { padding: 11px 0; }

/* ==========================================================================
   Sidebar + balance corrections (2026-08-23 night, Aryan's production read)
   ========================================================================== */

/* sentence-case module labels, not all-caps */
.sb-sec-title {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--muted);
}

/* pending lessons: quiet but not faded-out */
.sb-row.is-pending { opacity: 0.72; }
.sb-row.is-pending:hover { opacity: 1; }

/* the capped content column centers in the space beside the rail */
.lesson-shell { gap: 32px; }
.wrap-lesson .lesson-content { margin-inline: auto; }

/* ==========================================================================
   Lessons as module boxes with a drop-down playlist
   ========================================================================== */

.wrap-wide { width: min(100% - 40px, 1320px); margin-inline: auto; }

/* The resume block already ends in a rule; the grid must not add a second. */
.course-modules { border-top: 0; }

.module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin: 4px 0 40px;
}
@media (min-width: 760px)  { .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.module-card { display: flex; flex-direction: column; min-width: 0; }

.mc-hit {
  display: flex; flex-direction: column;
  width: 100%; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--text);
  text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.mc-hit:hover { border-color: var(--line-strong); }
.mc-hit:active { transform: scale(0.995); }
.mc-hit:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.module-card.is-open .mc-hit { border-color: var(--brass); }

/* Cover: no artwork to ship, so the module number carries it. */
.mc-cover {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  align-items: center; aspect-ratio: 16 / 7; padding: 18px 20px;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(198, 163, 95, 0.10), transparent 60%),
    linear-gradient(160deg, var(--raise) 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* The cover carries the module number, never the title: the title sits
   directly below it, and printing it twice is the exact thing the TRG
   reference gets wrong. */
.mc-cover-num {
  color: rgba(233, 228, 216, 0.13);
  font-family: var(--serif); font-size: 4.6rem; line-height: 1;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.mc-cover-kicker {
  margin-top: 4px;
  color: var(--faint); font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.mc-cover-mark {
  position: absolute; top: 18px; left: 20px;
  color: var(--faint); font-family: var(--mono);
  font-size: 0.58rem; letter-spacing: 0.22em;
}

.mc-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 18px 17px; }
.mc-title { font-size: 1rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.mc-result {
  color: var(--muted); font-size: 0.84rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.4em;
}
.mc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 2px;
}
.mc-count {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.mc-open {
  color: var(--brass); font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase;
  opacity: 0; transition: opacity var(--dur-hover) ease;
}
.mc-hit:hover .mc-open, .mc-hit:focus-visible .mc-open { opacity: 1; }
.module-card.is-open .mc-open { opacity: 1; }

/* Progress reads like the reference: a pill with the number inside it. */
.mc-bar {
  position: relative; display: flex; align-items: center;
  height: 26px; margin-top: 6px; padding: 0 11px;
  border-radius: 999px; background: var(--ink);
  overflow: hidden;
}
.mc-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: color-mix(in srgb, var(--brass) 26%, transparent);
  transition: width 420ms var(--ease-out);
}
.mc-bar.is-complete .mc-fill { background: color-mix(in srgb, var(--brass) 46%, transparent); }
.mc-pct {
  position: relative;
  color: var(--text); font-family: var(--mono);
  font-size: 0.68rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.mc-bar.is-empty .mc-pct { color: var(--faint); }

/* The playlist drops down under the card and spans the whole row, so it reads
   as one panel rather than squeezing into a single column. */
/* The playlist takes the whole grid row, directly under the card that opened
   it, so a long lesson title has room to read instead of wrapping inside one
   narrow column. */
.module-playlist {
  grid-column: 1 / -1;
  margin-top: -8px;
  border: 1px solid var(--brass); border-radius: 14px;
  background: var(--panel-2);
  animation: pl-drop var(--dur-reveal) var(--ease-out);
}
.module-playlist[hidden] { display: none; }
@keyframes pl-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .module-playlist { animation: none; } }

.pl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 13px 16px 11px; border-bottom: 1px solid var(--line);
}
.pl-head-title {
  color: var(--muted); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.pl-head-start { color: var(--brass); font-size: 0.78rem; text-decoration: none; white-space: nowrap; }
.pl-head-start:hover { color: var(--brass-bright); }

.pl-list {
  list-style: none; margin: 0; padding: 6px;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .pl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; } }
.pl-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: 9px;
  color: var(--text); text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.pl-row:hover { background: var(--raise); color: var(--text); }
.pl-row:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.pl-index {
  flex: none; width: 20px;
  color: var(--faint); font-family: var(--mono);
  font-size: 0.7rem; font-variant-numeric: tabular-nums; text-align: right;
}
.pl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pl-title { font-size: 0.88rem; line-height: 1.35; }
.pl-sub {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.pl-meta {
  flex: none; color: var(--muted); font-family: var(--mono);
  font-size: 0.68rem; white-space: nowrap;
}
.pl-row.is-pending { opacity: 0.55; }
.pl-row.is-pending .pl-meta { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 560px) {
  .mc-cover { aspect-ratio: 5 / 2; padding: 14px 16px; }
  .mc-cover-num { font-size: 3.4rem; }
}

/* ==========================================================================
   Module pages and the watch layout
   ========================================================================== */

/* Gold is spent on progress, the current item and keyboard focus. Everywhere
   else it steps back to bone and muted, which is what stops the page reading
   as "way too golden". */
.mc-open, .pl-head-start { color: var(--muted); }

.back-link {
  display: inline-block; margin: 26px 0 18px;
  color: var(--muted); font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.06em; text-decoration: none;
}
.back-link:hover { color: var(--text); }

/* ---------- module card: a real thumbnail, not a number card ---------- */

.module-card { text-decoration: none; color: var(--text); }
.mc-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mc-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-cover-num {
  position: absolute; right: 12px; bottom: 8px;
  color: rgba(233, 228, 216, 0.5); font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.1em;
}

/* ---------- module page ---------- */

.module-head { max-width: 760px; padding: 4px 0 26px; }
.module-head-row { display: flex; align-items: center; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.mp-bar {
  position: relative; display: flex; align-items: center;
  min-width: 190px; height: 30px; padding: 0 13px;
  border-radius: 999px; background: var(--panel); overflow: hidden;
}

.playlist-grid {
  list-style: none; margin: 0 0 48px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 700px)  { .playlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .playlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- one playlist item, used on the module page and the rail ------- */

.pv-item {
  display: grid; grid-template-columns: 22px 152px minmax(0, 1fr) 18px;
  align-items: center; gap: 12px;
  padding: 8px; border-radius: 10px;
  color: var(--text); text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.pv-item:hover { background: var(--panel); color: var(--text); }
.pv-item:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.pv-item.is-current { background: var(--panel-2); }
.pv-item.is-current .pv-title { color: var(--brass-bright); }
.pv-item.is-pending { opacity: 0.5; }
.pv-index {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.7rem; font-variant-numeric: tabular-nums; text-align: right;
}
.pv-shot {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 7px; overflow: hidden; background: var(--code-bg);
}
.pv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-len {
  position: absolute; right: 5px; bottom: 4px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.82); color: #fff;
  font-family: var(--mono); font-size: 0.6rem;
}
.pv-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-title {
  font-size: 0.86rem; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pv-sub {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
}

/* On the module page the item stacks into a card. */
.playlist-grid .pv-item {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px; padding: 0 0 12px;
}
.playlist-grid .pv-index { display: none; }
.playlist-grid .pv-shot { border-radius: 10px; }
.playlist-grid .pv-item .mark { display: none; }

/* ---------- the watch page ---------- */

.site-main-watch { padding-bottom: 60px; }

.watch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
@media (min-width: 1080px) {
  .watch { grid-template-columns: minmax(0, 1fr) 372px; gap: 32px; }
}
.watch-main { min-width: 0; }

.watch-title {
  margin: 18px 0 0; font-family: var(--sans);
  font-size: clamp(1.24rem, 2.1vw, 1.56rem); font-weight: 650;
  line-height: 1.24; letter-spacing: -0.016em;
}
.watch-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.wm-facts { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 0.82rem; }
.wm-actions { display: flex; align-items: center; gap: 10px; }
.wm-done {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 0.8rem; cursor: not-allowed;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease,
              border-color var(--dur-hover) ease;
}
.wm-done:not([disabled]) {
  border-color: var(--brass); background: var(--brass); color: var(--ink);
  cursor: pointer; font-weight: 600;
}
.wm-done.is-done { background: transparent; color: var(--ok); border-color: var(--ok); }

/* ---------- description, read like a video description ---------- */

.watch-desc {
  position: relative; margin-top: 18px; padding: 16px 18px;
  border-radius: 12px; background: var(--panel);
}
.wd-action { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.wd-action-label {
  margin: 0 0 5px; color: var(--muted); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase;
}
.wd-action-text { margin: 0; font-size: 1rem; line-height: 1.45; }
.wd-body { position: relative; max-height: 260px; overflow: hidden; }
.watch-desc.is-open .wd-body { max-height: none; }
.wd-body::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(to top, var(--panel), transparent);
  pointer-events: none;
}
.watch-desc.is-open .wd-body::after { display: none; }
.wd-more {
  margin-top: 10px; padding: 0; border: 0; background: none;
  color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.wd-more:hover { color: var(--brass-bright); }
.wd-link { margin: 14px 0 0; font-size: 0.86rem; }

/* ---------- right rail ---------- */

.watch-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ws-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.ws-module { color: var(--text); font-size: 0.84rem; font-weight: 600; text-decoration: none; }
.ws-module:hover { color: var(--brass-bright); }
.ws-count {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; background: var(--panel);
  font-family: var(--mono); font-size: 0.66rem;
}
.playlist-vert { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.playlist-vert .pv-item { grid-template-columns: 20px 128px minmax(0, 1fr) 16px; }

.next-lesson {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 11px;
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-hover) ease, background var(--dur-hover) ease;
}
.next-lesson:hover { border-color: var(--brass); background: var(--panel); color: var(--text); }
.nl-label {
  color: var(--brass); font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.nl-title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.nl-meta { color: var(--faint); font-family: var(--mono); font-size: 0.66rem; }

.ws-notes { padding-top: 4px; }

/* ---------- chapters ---------- */

.chapters { margin-top: 14px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.chapters-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 15px; border: 0; background: var(--panel);
  color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.ch-count { color: var(--faint); font-family: var(--mono); font-size: 0.66rem; }
.chapter-list {
  list-style: none; margin: 0; padding: 6px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-height: 232px; overflow-y: auto;
}
@media (min-width: 760px) { .chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chapter-list[hidden] { display: none; }
.chapter {
  display: flex; gap: 11px; align-items: baseline; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text); text-align: left; cursor: pointer;
}
.chapter:hover { background: var(--panel); }
.chapter.is-on { background: color-mix(in srgb, var(--brass) 13%, transparent); }
.chapter.is-on .chapter-time { color: var(--brass); }
.chapter-time {
  flex: none; min-width: 40px; color: var(--faint);
  font-family: var(--mono); font-size: 0.7rem; font-variant-numeric: tabular-nums;
}
.chapter-title { font-size: 0.84rem; line-height: 1.35; }

@media (max-width: 1079px) {
  .watch-side { border-top: 1px solid var(--line); padding-top: 20px; }
}

.wm-progress { display: inline-flex; align-items: center; gap: 8px; }
.wm-bar {
  display: block; width: 78px; height: 3px;
  border-radius: 2px; background: var(--panel-2); overflow: hidden;
}
.wm-bar > span { display: block; height: 100%; width: 0; background: var(--brass); transition: width 400ms var(--ease-out); }

/* ==========================================================================
   Light theme
   The dark palette above is the default. Light re-points the same tokens at a
   warm paper ground rather than restyling components, so anything built on the
   tokens follows without extra rules.
   ========================================================================== */

:root[data-theme="light"] {
  --ink: #f6f4ee;
  --panel: #ffffff;
  --panel-2: #f1eee5;
  --raise: #e9e5da;
  --forest: #1e3d2f;
  --forest-2: #2a5442;
  --brass: #8a6a26;
  --brass-bright: #6f5419;
  --text: #17211c;
  --muted: #5b6159;
  --faint: #85897f;
  --line: rgba(30, 61, 47, 0.16);
  --line-strong: rgba(30, 61, 47, 0.34);
  --danger: #a8402a;
  --ok: #3f6b3b;
  --code-bg: #edeae0;
  color-scheme: light;
}

:root[data-theme="light"] .site-header {
  background: rgba(246, 244, 238, 0.9);
  backdrop-filter: saturate(150%) blur(8px);
}
:root[data-theme="light"] .mc-hit,
:root[data-theme="light"] .module-card { background: var(--panel); }
:root[data-theme="light"] .mc-bar,
:root[data-theme="light"] .mp-bar { background: var(--raise); }
:root[data-theme="light"] .mc-fill { background: color-mix(in srgb, var(--brass) 34%, transparent); }
:root[data-theme="light"] .watch-desc { background: var(--panel); }
:root[data-theme="light"] .wd-body::after {
  background: linear-gradient(to top, var(--panel), transparent);
}
:root[data-theme="light"] .pv-item:hover { background: var(--panel-2); }
:root[data-theme="light"] .pv-item.is-current { background: var(--raise); }
:root[data-theme="light"] .pv-item.is-current .pv-title { color: var(--brass-bright); }
:root[data-theme="light"] .chapters-toggle { background: var(--panel); }
:root[data-theme="light"] .vc-menu { background: rgba(255, 255, 255, 0.98); }
:root[data-theme="light"] .vc-menu button { color: var(--text); }
:root[data-theme="light"] .ws-count { background: var(--panel); }
/* The player chrome sits over video, so it stays dark in both themes. */
:root[data-theme="light"] .video-controls { color: #fff; }
:root[data-theme="light"] ::selection { background: rgba(138, 106, 38, 0.22); color: var(--text); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* On the module page the thumbnail already sets the lesson title, so the
   caption under it carries only who teaches it. Printing the name twice is the
   thing the TRG reference gets wrong. In the narrow rail the thumbnail is far
   too small to read, so there the title below it is the real label. */
.playlist-grid .pv-title { display: none; }
.playlist-grid .pv-text { padding: 0 2px; }
.playlist-grid .pv-sub { font-size: 0.62rem; }

/* ==========================================================================
   Fixes: progress pill, centred masthead, theme switch
   ========================================================================== */

/* The pill was invisible: its background matched the page behind the card, so
   only the number showed and the card read as a bare square. */
.mc-bar, .mp-bar {
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mc-fill { background: color-mix(in srgb, var(--brass) 40%, transparent); }
.mc-bar.is-complete .mc-fill { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.mc-bar.is-empty { box-shadow: inset 0 0 0 1px var(--line); }

/* Softer corners so the grid stops reading as a wall of squares. */
.mc-hit, .module-card { border-radius: 16px; }
.mc-cover { border-radius: 16px 16px 0 0; }
.playlist-grid .pv-shot, .pv-shot { border-radius: 12px; }
.watch-desc { border-radius: 16px; }

/* ---------- centred masthead ---------- */

.masthead-center {
  max-width: 780px; margin-inline: auto; text-align: center;
  padding: 56px 0 34px;
}
.masthead-center .lede { margin-inline: auto; }
.masthead-center .standing { justify-content: center; }
.masthead-center + .resume { margin-top: 0; }

/* ---------- theme switch ---------- */

.theme-switch {
  display: inline-flex; align-items: center;
  margin-left: 16px; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.ts-track {
  position: relative; display: inline-flex; align-items: center;
  width: 52px; height: 28px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel);
  transition: background var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.theme-switch:hover .ts-track { border-color: var(--line-strong); }
.theme-switch:focus-visible .ts-track { outline: 2px solid var(--brass); outline-offset: 3px; }
.ts-track svg {
  width: 13px; height: 13px; fill: none;
  stroke: var(--faint); stroke-width: 1.8;
  transition: stroke var(--dur-hover) ease;
}
.ts-sun { margin-right: auto; }
.ts-moon { margin-left: auto; }
.ts-knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brass);
  transition: transform var(--dur-reveal) var(--ease-out);
}
/* Dark is the default, so the knob sits over the moon. */
.ts-knob { transform: translateX(24px); }
:root[data-theme="dark"] .ts-moon { stroke: var(--ink); }
:root[data-theme="light"] .ts-knob { transform: translateX(0); }
:root[data-theme="light"] .ts-sun { stroke: var(--ink); }
:root[data-theme="light"] .ts-moon { stroke: var(--faint); }
@media (prefers-reduced-motion: reduce) { .ts-knob { transition: none; } }

/* The optional library reads as a normal closing section, not a labelled aside. */
.optional-section .section-label { display: none; }

.planned-facts { margin: 0 0 16px; display: grid; gap: 10px; }
.planned-facts > div {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.planned-facts dt {
  color: var(--muted); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.planned-facts dd { margin: 0; font-size: 0.88rem; }

/* The knob is drawn after the icons, so it covered the one it sits on and the
   switch read as a blank gold dot. Lift the icons above it and the active mode
   shows through in ink. */
.ts-track svg { position: relative; z-index: 1; }
.ts-knob { z-index: 0; }
:root[data-theme="dark"] .ts-moon { stroke: var(--ink); stroke-width: 2; }
:root[data-theme="light"] .ts-sun { stroke: var(--ink); stroke-width: 2; }

/* ==========================================================================
   One-box cards, module header panel, instructions link, notes, next arrow
   ========================================================================== */

/* ---------- the module card is one container ---------- */

.module-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: border-color 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
}
.mc-hit { all: unset; }
.mc-cover { border-radius: 0; border-bottom: 0; }
.mc-body { padding: 15px 17px 17px; }
.module-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}
.module-card:active { transform: translateY(-1px); }
.module-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* A soft wash in the module's own colour, lit on hover. It reads as the card
   waking up rather than a border flashing on. */
.mc-glow {
  position: absolute; inset: -1px; border-radius: 16px;
  pointer-events: none; opacity: 0;
  transition: opacity 240ms var(--ease-out);
  background: radial-gradient(120% 80% at 50% 0%, rgba(233, 228, 216, 0.1), transparent 62%);
}
.module-card:hover .mc-glow { opacity: 1; }
.module-card[data-part="1"]:hover { border-color: rgba(245, 244, 240, 0.5); }
.module-card[data-part="2"]:hover { border-color: rgba(238, 228, 176, 0.5); }
.module-card[data-part="3"]:hover { border-color: rgba(233, 212, 120, 0.5); }
.module-card[data-part="4"]:hover { border-color: rgba(231, 186, 100, 0.5); }
.module-card[data-part="5"]:hover { border-color: rgba(226, 156, 84, 0.5); }
.module-card[data-part="6"]:hover { border-color: rgba(217, 126, 74, 0.5); }
.module-card[data-part="7"]:hover { border-color: rgba(205, 96, 70, 0.5); }
.module-card[data-part="8"]:hover { border-color: rgba(190, 70, 62, 0.5); }
.module-card[data-part="9"]:hover { border-color: rgba(176, 46, 46, 0.55); }
@media (prefers-reduced-motion: reduce) {
  .module-card, .mc-glow { transition: none; }
  .module-card:hover { transform: none; }
}

/* ---------- module page header ---------- */

.module-head {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 24px; align-items: end; padding: 4px 0 30px;
  max-width: none;
}
@media (min-width: 900px) {
  .module-head { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
}
.mh-copy { min-width: 0; }
/* The heading was breaking across two lines with the right half of the row
   empty. Let it use the width it has. */
.mh-title { max-width: 22ch; text-wrap: balance; }
.mh-panel {
  display: flex; flex-direction: column; gap: 9px;
  padding: 17px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel);
}
.mh-panel-label {
  margin: 0; color: var(--brass); font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.mh-panel-title { margin: 0; font-size: 0.94rem; font-weight: 600; line-height: 1.3; }
.mh-panel .mp-bar { min-width: 0; width: 100%; }
.mh-start { text-align: center; margin-top: 3px; }

/* ---------- instructions link under the video ---------- */

.watch-head {
  margin-top: 18px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}
.watch-head .watch-title { margin-top: 0; }
.watch-head .watch-meta { border-bottom: 0; padding-bottom: 0; }
.watch-desc { margin-top: 14px; padding: 0; background: none; border-radius: 0; }
.wd-action-label {
  margin: 0 0 4px; color: var(--muted); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase;
}
.wd-action-text { margin: 0 0 14px; font-size: 0.98rem; line-height: 1.45; }
.wd-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.wd-open {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--brass); color: var(--ink);
  font-size: 0.84rem; font-weight: 650; text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.wd-open:hover { background: var(--brass-bright); color: var(--ink); }
.wd-open svg { width: 15px; height: 15px; }
.wd-chip {
  display: inline-flex; align-items: center; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 0.8rem; text-decoration: none;
}
.wd-chip:hover { color: var(--text); border-color: var(--line-strong); }

/* ---------- the instructions page ---------- */

.ip-body { margin: 26px 0 34px; }
.ip-block { margin: 34px 0; padding-top: 26px; border-top: 1px solid var(--line); }
.ip-block > h2 { margin: 0 0 16px; font-size: 1.06rem; font-weight: 650; }
.ip-back { margin: 8px 0 60px; }

/* ---------- next lesson, with a play control ---------- */

.next-lesson {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.nl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl-go {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brass); color: var(--ink);
  transition: transform var(--dur-hover) var(--ease-out);
}
.nl-go svg { width: 17px; height: 17px; fill: currentColor; margin-left: 2px; }
.next-lesson:hover .nl-go { transform: scale(1.08); }

/* ---------- notes ---------- */

.watch-side .lesson-panel-head { display: none; }
.student-notes-card {
  padding: 14px 15px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--panel);
}
.snc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.snc-head label {
  color: var(--muted); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase;
}
.snc-copy {
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 0.72rem; cursor: pointer;
}
.snc-copy:hover { color: var(--text); border-color: var(--line-strong); }
.snc-copy.is-done { color: var(--ok); border-color: var(--ok); }
.student-notes-card textarea {
  width: 100%; padding: 11px 12px; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--ink); color: var(--text); font-size: 0.86rem; line-height: 1.5;
}
.student-note-status {
  margin: 8px 0 0; color: var(--faint);
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
}

/* The base .next-lesson rule stacks its children in a column; the play control
   belongs beside the text, not under it. */
.next-lesson { flex-direction: row; }

/* ==========================================================================
   Light mode contrast, control alignment, autoplay card
   ========================================================================== */

/* The light palette's hairlines and muted text were far too pale to read
   against paper. These are the same tokens, pushed to real contrast. */
:root[data-theme="light"] {
  --line: rgba(23, 33, 28, 0.26);
  --line-strong: rgba(23, 33, 28, 0.52);
  --muted: #4a5049;
  --faint: #6b7168;
  --panel: #ffffff;
  --panel-2: #efece3;
  --raise: #e2ddd0;
}
/* Brass on paper needs to be a filled button with dark text, not a dim slab. */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .wd-open {
  background: #1e3d2f; color: #f6f4ee; border-color: #1e3d2f;
}
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .wd-open:hover { background: #2a5442; color: #fff; }
:root[data-theme="light"] .btn-quiet {
  background: transparent; color: var(--text); border: 1px solid var(--line-strong);
}
:root[data-theme="light"] .btn-quiet:hover { background: var(--panel-2); color: var(--text); }
:root[data-theme="light"] .module-card { border-color: rgba(23, 33, 28, 0.2); }
:root[data-theme="light"] .module-card:hover { box-shadow: 0 14px 30px rgba(23, 33, 28, 0.14); }
:root[data-theme="light"] .wm-done:not([disabled]) {
  background: #1e3d2f; border-color: #1e3d2f; color: #f6f4ee;
}
:root[data-theme="light"] .nl-go { background: #1e3d2f; color: #f6f4ee; }
:root[data-theme="light"] .ai-chip, :root[data-theme="light"] .wd-chip {
  border-color: var(--line-strong); color: var(--text);
}
:root[data-theme="light"] .mc-fill { background: rgba(30, 61, 47, 0.3); }
:root[data-theme="light"] .wm-bar > span { background: #1e3d2f; }

/* ---------- the meta row lines up ---------- */

.watch-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 18px;
}
.wm-facts { align-items: center; }
.wm-actions { align-items: center; gap: 8px; flex-wrap: wrap; }
/* Both controls share one height and shape so they read as a pair. */
.wm-actions .ai-chip,
.wm-actions .wm-done {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; margin: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.wm-actions .ai-chip:hover { color: var(--text); border-color: var(--line-strong); }
.wm-actions .wm-done:not([disabled]) { font-weight: 650; }

/* ---------- caption control with no reviewed file ---------- */

.vc-cc.is-pending { opacity: 0.45; }
.vc-cc.is-nudged { animation: cc-nudge 700ms ease; }
@keyframes cc-nudge { 0%,100% { transform: none; } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* ---------- speed menu, listed fastest first ---------- */

.vc-menu-speed { min-width: 96px; }
.vc-menu-speed button { text-align: center; font-size: 0.8rem; padding: 8px 12px; }
.vc-menu-speed button.is-on::before { content: "✓"; margin-right: 6px; }

/* ---------- what plays next ---------- */

.autoplay-next {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px; text-align: center;
  background: rgba(6, 11, 9, 0.92);
}
.an-label {
  margin: 0; color: var(--muted); font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.an-title { margin: 0; max-width: 32ch; font-size: 1.1rem; font-weight: 650; line-height: 1.3; color: #fff; }
.an-actions { display: flex; gap: 9px; margin-top: 6px; }
.an-count { margin: 4px 0 0; color: var(--faint); font-family: var(--mono); font-size: 0.72rem; }

@media (max-width: 700px) {
  .wm-actions { width: 100%; }
  .wm-actions .ai-chip, .wm-actions .wm-done { flex: 1 1 auto; }
}

/* ==========================================================================
   Start page, community, library playlist
   ========================================================================== */

.start-page .start-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px;
  align-items: start; padding: 46px 0 40px;
}
@media (min-width: 1000px) {
  .start-page .start-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
}
.sh-copy { min-width: 0; }
.sh-copy .display { margin: 10px 0 0; }
.sh-copy .lede { margin-top: 16px; max-width: 46ch; }
.start-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* The panel beside the hero, taken from the reference: a pale card against the
   dark ground rather than another transparent block. */
.sh-panel {
  padding: 24px 26px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--panel);
}
.start-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 18px; }
.start-steps li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 14px; align-items: baseline;
}
.start-steps li > span {
  grid-row: 1 / 3; align-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--brass);
  font-family: var(--mono); font-size: 0.68rem;
}
.start-steps strong { font-size: 0.94rem; }
.start-steps p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.sh-panel-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.sh-panel-foot .plain-list { margin: 12px 0 0; }

.start-result {
  padding: 22px 0 34px; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin-bottom: 40px;
}
.start-result p:last-child { margin: 8px 0 0; max-width: 74ch; font-size: 1.02rem; }

/* ---------- module list with a start button each ---------- */

.sm-head { margin-bottom: 20px; }
.sm-head h2 { margin: 0; font-size: 1.24rem; font-weight: 650; letter-spacing: -0.012em; }
.sm-head p { margin: 6px 0 0; color: var(--muted); }
.start-module-list { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 10px; }
.start-module {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel);
  transition: border-color var(--dur-hover) ease, background var(--dur-hover) ease;
}
.start-module:hover { border-color: var(--line-strong); }
.sm-num {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.86rem; font-variant-numeric: tabular-nums;
}
.sm-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sm-title { font-size: 0.98rem; font-weight: 650; color: var(--text); text-decoration: none; }
.sm-title:hover { color: var(--brass-bright); }
.sm-result { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.sm-count {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase;
}
.sm-start { white-space: nowrap; }
.sm-soon {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 700px) {
  .start-module { grid-template-columns: 34px minmax(0, 1fr); }
  .sm-start, .sm-soon { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ---------- community ---------- */

.community {
  margin-top: 20px; padding: 54px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--forest) 22%, transparent), transparent);
}
.community-inner {
  width: min(100% - 40px, 1320px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center;
}
@media (min-width: 900px) {
  .community-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; }
}
.community-lockup { display: flex; align-items: center; gap: 14px; }
.community-logo { width: 46px; height: 35px; color: #5865F2; }
.community-x { color: var(--faint); font-size: 1.1rem; }
.community-relay { width: 40px; height: 40px; border-radius: 9px; }
.community-copy h2 { margin: 0; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.012em; }
.community-copy p { margin: 6px 0 0; color: var(--muted); max-width: 58ch; }
.community-cta { white-space: nowrap; }

/* ---------- library playlist ---------- */

.notes-bar { width: 100%; margin-bottom: 14px; }
.note-filters { margin: 0 0 14px; padding-bottom: 14px; }
.note-filters .note-filter { padding: 6px 11px; font-size: 0.74rem; }
.note-player { margin: 0; }
.watch-side .playlist-vert { max-height: 620px; overflow-y: auto; padding-right: 4px; }
.watch-side .playlist-vert::-webkit-scrollbar { width: 7px; }
.watch-side .playlist-vert::-webkit-scrollbar-thumb {
  background: var(--raise); border-radius: 4px;
}
[data-notes-page] .video-frame { border-radius: 14px; overflow: hidden; }
[data-note-teaser] { color: var(--muted); }

/* The count sat flush against the label ("All18"). The chip is a flex row, so
   the gap belongs on the chip, not on the number. */
.note-filters .note-filter { gap: 8px; }
.note-filters .note-filter span {
  padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.note-filters .note-filter.is-on span { background: rgba(13, 21, 18, 0.18); }
.watch-side .note-filters { flex-wrap: wrap; row-gap: 8px; }

/* Prev/next in the library are controls, not the completion button. */
[data-notes-page] .wm-actions .wm-done {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
[data-notes-page] .wm-actions .wm-done[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   Start page: Relay preview, flat cards. Library: two-column playlist.
   ========================================================================== */

.start-page .start-hero {
  grid-template-columns: minmax(0, 1fr);
  align-items: center; padding: 52px 0 46px;
}
@media (min-width: 1000px) {
  .start-page .start-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 60px; }
}

/* A preview of what they are opening, not a list of how lessons work. */
.sh-preview { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.shp-frame {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9; border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--forest) 55%, transparent), transparent 70%),
    var(--code-bg);
}
.shp-frame img {
  width: 34%; max-width: 168px; height: auto;
  border-radius: 18px;
}
.shp-cta { text-align: center; }
.shp-note {
  margin: 0; text-align: center; color: var(--faint);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
}

/* ---------- flat cards ---------- */

.flat-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  margin-bottom: 56px;
}
@media (min-width: 700px)  { .flat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .flat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.flat-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--text); text-decoration: none;
  transition: border-color var(--dur-hover) ease, transform 180ms var(--ease-out);
}
.flat-card:hover { border-color: var(--line-strong); transform: translateY(-2px); color: var(--text); }
.flat-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.fc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fc-num { font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.fc-kicker {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.fc-shot {
  display: block; aspect-ratio: 16 / 9; border-radius: 9px;
  overflow: hidden; background: var(--code-bg);
}
.fc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-title { font-family: var(--serif); font-size: 1.16rem; line-height: 1.22; letter-spacing: -0.01em; }
.fc-result {
  color: var(--muted); font-size: 0.84rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
}
.fc-count, .fc-open {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.fc-count { color: var(--faint); }
.fc-open { color: var(--muted); }
.flat-card:hover .fc-open { color: var(--brass-bright); }
/* The module colour marks the card without shouting. */
.flat-card[data-part="1"] .fc-num { color: #f5f4f0; }
.flat-card[data-part="2"] .fc-num { color: #eee4b0; }
.flat-card[data-part="3"] .fc-num { color: #e9d478; }
.flat-card[data-part="4"] .fc-num { color: #e7ba64; }
.flat-card[data-part="5"] .fc-num { color: #e29c54; }
.flat-card[data-part="6"] .fc-num { color: #d97e4a; }
.flat-card[data-part="7"] .fc-num { color: #cd6046; }
.flat-card[data-part="8"] .fc-num { color: #be463e; }
.flat-card[data-part="9"] .fc-num { color: #b02e2e; }
@media (prefers-reduced-motion: reduce) { .flat-card:hover { transform: none; } }

/* ---------- library: player over a two-column playlist ---------- */

.notes-layout { display: block; }
.notes-queue { margin-top: 30px; }
.notes-queue .ws-head { border-bottom: 1px solid var(--line); }
.playlist-two { max-height: none; overflow: visible; }
@media (min-width: 860px) {
  .playlist-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 22px; }
}

/* The topic pills that used to sit here never had a click handler, so they were
   dead controls. The topics now head their own block and carry the same counts. */
.note-groups { margin-top: 26px; display: grid; gap: 34px; }
.note-group { display: block; }
.ng-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
}
.ng-count {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: 999px; background: var(--panel);
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  color: var(--muted);
}
@media (max-width: 640px) {
  .note-groups { gap: 26px; }
}

/* ==========================================================================
   Cream preview cards, two-column library, cleaner theme switch
   ========================================================================== */

/* Cards read as the thing being previewed, the way the reference does: a pale
   card on the dark page, with drawn line art rather than a lesson screenshot. */
.flat-card {
  background: #f4f1e8; color: #17211c;
  border-color: rgba(23, 33, 28, 0.14);
  padding: 20px;
}
.flat-card:hover {
  color: #17211c; border-color: rgba(23, 33, 28, 0.34);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}
.fc-kicker { color: rgba(23, 33, 28, 0.42); }
.fc-art {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9; border-radius: 8px;
  background: #e7e2d4; color: #1e3d2f;
}
.fc-art svg { width: 42%; max-width: 92px; height: auto; }
.fc-title { color: #17211c; }
.fc-result { color: rgba(23, 33, 28, 0.62); }
.fc-foot { border-top-color: rgba(23, 33, 28, 0.16); }
.fc-count { color: rgba(23, 33, 28, 0.45); }
.fc-open { color: rgba(23, 33, 28, 0.66); }
.flat-card:hover .fc-open { color: #1e3d2f; }
.flat-card .fc-num { font-weight: 700; }
/* The module colour is the one hot mark on an otherwise quiet card. */
.flat-card[data-part="1"] .fc-num { color: #6b6f66; }
.flat-card[data-part="2"] .fc-num { color: #9a8433; }
.flat-card[data-part="3"] .fc-num { color: #96762a; }
.flat-card[data-part="4"] .fc-num { color: #a06a1f; }
.flat-card[data-part="5"] .fc-num { color: #a55d20; }
.flat-card[data-part="6"] .fc-num { color: #a44d22; }
.flat-card[data-part="7"] .fc-num { color: #a33b26; }
.flat-card[data-part="8"] .fc-num { color: #9c2c26; }
.flat-card[data-part="9"] .fc-num { color: #8f1f1f; }
.flat-card[data-part="1"] .fc-art { color: #4a4f47; }
.flat-card[data-part="5"] .fc-art { color: #8a4d1c; }
.flat-card[data-part="9"] .fc-art { color: #8f1f1f; }

/* ---------- library: no stray divider, two even columns ---------- */

.notes-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  /* No rule here: the head, the bar and the filter row stacked three
     horizontal lines on top of each other. */
  border: 0; padding: 0;
}
.notes-progress { display: inline-flex; align-items: center; gap: 11px; }
.np-bar {
  display: block; width: 132px; height: 4px;
  border-radius: 2px; background: var(--raise); overflow: hidden;
}
.np-bar > span {
  display: block; height: 100%; width: 0;
  background: var(--brass); transition: width 420ms var(--ease-out);
}
.np-text {
  color: var(--muted); font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.05em; white-space: nowrap;
}

.playlist-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 860px) { .playlist-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.playlist-columns .playlist-vert { max-height: none; overflow: visible; padding: 0; }
.notes-queue { margin-top: 34px; }

/* ---------- theme switch: one crisp mark ---------- */

.theme-switch { margin-left: 18px; }
.ts-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--muted);
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease,
              background var(--dur-hover) ease;
}
.theme-switch:hover .ts-mark {
  color: var(--brass-bright); border-color: var(--line-strong);
  background: var(--panel);
}
.theme-switch:focus-visible .ts-mark { outline: 2px solid var(--brass); outline-offset: 3px; }
.ts-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ts-sun { display: none; }
:root[data-theme="light"] .ts-sun { display: block; }
:root[data-theme="light"] .ts-moon { display: none; }

/* The old knob design painted the active icon in --ink so it would read on top
   of a brass knob. There is no knob now, so that rule made the mark invisible
   against the page. The icon takes the button's own colour. */
:root[data-theme="dark"] .ts-mark .ts-moon,
:root[data-theme="light"] .ts-mark .ts-sun {
  stroke: currentColor; stroke-width: 1.8;
}

/* A progress bar you can actually see, sized like the module pills rather than
   a hairline tucked beside the count. */
.np-bar {
  position: relative; display: flex; align-items: center;
  width: 100%; height: 38px; margin: 0 0 22px; padding: 0 15px;
  border-radius: 999px; background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.np-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: color-mix(in srgb, var(--brass) 38%, transparent);
  transition: width 420ms var(--ease-out);
}
.np-pct {
  position: relative; color: var(--text); font-family: var(--mono);
  font-size: 0.78rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.notes-head { margin-bottom: 12px; }
.note-player[hidden] { display: none !important; }

/* ==========================================================================
   Progress meter, flat card rail, result block, header switch
   ========================================================================== */

/* A meter with its number beside it. The full-width capsule with the figure
   floating inside read as an empty box rather than progress. */
.np-meter { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; }
.np-bar {
  position: relative; display: block; flex: 1 1 auto;
  width: auto; height: 10px; padding: 0; margin: 0;
  border-radius: 999px; background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
}
.np-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--brass); border-radius: 999px;
  transition: width 420ms var(--ease-out);
}
.np-pct {
  flex: none; min-width: 3.5ch; text-align: right;
  color: var(--text); font-family: var(--mono);
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
}

/* ---------- flat cards on a rail ---------- */

.flat-rail-wrap { position: relative; margin-bottom: 56px; }
.flat-rail {
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
}
.flat-rail::-webkit-scrollbar { height: 6px; }
.flat-rail::-webkit-scrollbar-track { background: transparent; }
.flat-rail::-webkit-scrollbar-thumb { background: var(--raise); border-radius: 3px; }
/* Flat cards that slide. Smaller than the grid ones so several read at once. */
.flat-rail .flat-card {
  flex: 0 0 268px; scroll-snap-align: start; padding: 16px;
}
.flat-rail .fc-art { border-radius: 7px; }
.flat-rail .fc-art svg { width: 38%; max-width: 66px; }
.flat-rail .fc-title { font-size: 1.02rem; }
.flat-rail .fc-result {
  font-size: 0.8rem; -webkit-line-clamp: 3; min-height: 3.4em;
}
.flat-rail .fc-foot { padding-top: 10px; }
@media (min-width: 900px) { .flat-rail .flat-card { flex-basis: 290px; } }

.rail-arrow {
  position: absolute; top: 42%; z-index: 3;
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--ink);
  color: var(--text); cursor: pointer;
  transition: background var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.rail-arrow:hover { background: var(--panel); border-color: var(--brass); }
.rail-arrow svg { width: 18px; height: 18px; }
.rail-arrow[disabled] { opacity: 0.3; cursor: default; }
.rail-prev { left: -14px; }
.rail-next { right: -14px; }
@media (min-width: 900px) { .rail-arrow { display: flex; } }
@media (prefers-reduced-motion: reduce) { .flat-rail { scroll-behavior: auto; } }

/* ---------- what you will finish ---------- */

.start-result {
  padding: 0 0 40px; margin: 0;
  border: 0; border-bottom: 1px solid var(--line);
}
.start-result-text {
  margin: 10px 0 0; max-width: 62ch;
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.5;
}

/* ---------- the switch sits with the nav, not above it ---------- */

.theme-switch { margin-left: 20px; align-self: center; }
.ts-mark { width: 32px; height: 32px; border-radius: 9px; }
.ts-mark svg { width: 16px; height: 16px; }
.header-nav { align-items: center; }

/* The base rule gives this block a panel background and a 14px radius, so
   zeroing only the border left a rounded box behind the text. */
.start-page .start-result {
  background: transparent; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--line);
  margin: 30px 0 40px; padding: 0 0 38px;
}
.start-page .start-result p:last-child {
  margin: 10px 0 0; max-width: 62ch;
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.5;
}

/* ==========================================================================
   Three-card slideshow, header switch, hero divider, next action
   ========================================================================== */

/* The hero already sits above the community band, which carries its own top
   rule. Two lines twenty pixels apart read as a mistake. */
.start-page .start-hero { border-bottom: 0; }

/* ---------- slideshow: three at a time, no scrollbar ---------- */

.flat-rail-wrap { position: relative; margin-bottom: 46px; padding-bottom: 26px; }
.flat-viewport { overflow: hidden; padding: 4px 2px 8px; }
.flat-rail {
  display: flex; gap: 18px;
  transform: translateX(0);
  transition: transform 620ms var(--ease-out);
  /* No scrolling: the track is moved, so no bar appears under it. */
  overflow: visible; scroll-snap-type: none;
}
.flat-rail::-webkit-scrollbar { display: none; }
.flat-rail .flat-card {
  flex: 0 0 calc((100% - 36px) / 3);
  padding: 16px; opacity: 0.62;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out);
}
@media (max-width: 1039px) { .flat-rail .flat-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 699px)  { .flat-rail .flat-card { flex-basis: 100%; } }

/* The middle card of the three is the lit one. */
.flat-rail .flat-card.is-lit {
  opacity: 1; transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}
.flat-rail .flat-card.is-lit .fc-art { background: #dcd6c4; }
.flat-rail .flat-card:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .flat-rail { transition: none; }
  .flat-rail .flat-card { opacity: 1; transition: none; }
  .flat-rail .flat-card.is-lit { transform: none; }
}

.rail-dots {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: 6px;
}
.rail-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: var(--raise); cursor: pointer;
  transition: background 240ms ease, width 240ms ease;
}
.rail-dot:hover { background: var(--brass); }
.rail-dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.rail-dot.is-on { width: 18px; border-radius: 3px; background: var(--brass); }

/* ---------- next action under the slideshow ---------- */

.start-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; margin: 0 0 60px; padding: 26px 28px;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--panel);
}
.start-next h2 { margin: 6px 0 4px; font-size: 1.24rem; font-weight: 650; }
.start-next p { margin: 0; color: var(--muted); max-width: 54ch; }
.na-actions { display: flex; flex-wrap: wrap; gap: 10px; }

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

/* A softer focus ring: the 2px brass outline at 3px offset read as a second
   box drawn around the button, which is what it looked like in light mode. */
.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .ts-mark {
  outline: 2px solid var(--brass); outline-offset: 2px;
}
:root[data-theme="light"] .ts-mark { border-color: rgba(23, 33, 28, 0.3); color: var(--muted); }
:root[data-theme="light"] .theme-switch:hover .ts-mark {
  color: #1e3d2f; border-color: #1e3d2f; background: var(--panel-2);
}

/* ---------- what you will finish ---------- */

.start-page .start-result { padding: 0 0 34px; margin: 34px 0 38px; }
.start-page .start-result .section-label { margin-bottom: 12px; }

/* ==========================================================================
   Player chrome — full rebuild
   The earlier block for these classes is no longer in this file, so the bar
   fell back to block layout: every control stacked vertically and both volume
   icons drew at once. This is the complete set, in one place.
   ========================================================================== */

.video-stage { position: relative; }

.video-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; gap: 0;
  padding: 34px 12px 10px;
  background: linear-gradient(to top, rgba(4, 8, 6, 0.96) 0%, rgba(4, 8, 6, 0.86) 40%,
                              rgba(4, 8, 6, 0.4) 76%, transparent 100%);
  opacity: 0; transition: opacity 180ms ease;
}
.video-stage:hover .video-controls,
.video-stage.vc-show .video-controls,
.video-stage.is-paused .video-controls,
.video-controls:focus-within { opacity: 1; }

/* ---- scrub row ---- */
.vc-scrub-row { position: relative; display: block; width: 100%; height: 18px; margin: 0 0 2px; }
.vc-marks, .vc-buffer, .vc-played {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 2px; pointer-events: none;
}
.vc-marks { right: 0; background: rgba(233, 228, 216, 0.24); }
.vc-buffer { width: 0; background: rgba(233, 228, 216, 0.36); }
.vc-played { width: 0; background: var(--brass); }
.vc-mark { position: absolute; top: 0; width: 2px; height: 4px; background: var(--ink); opacity: 0.9; }
.vc-scrub {
  position: absolute; inset: 0; width: 100%; height: 18px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.vc-scrub::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.vc-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px;
  border: 0; border-radius: 50%; background: var(--brass);
  opacity: 0; transition: opacity 140ms ease;
}
.vc-scrub::-moz-range-track { height: 4px; background: transparent; }
.vc-scrub::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--brass); opacity: 0; }
.video-stage:hover .vc-scrub::-webkit-slider-thumb,
.vc-scrub:focus-visible::-webkit-slider-thumb { opacity: 1; }
.video-stage:hover .vc-scrub::-moz-range-thumb { opacity: 1; }
.vc-hover {
  position: absolute; bottom: 22px; transform: translateX(-50%);
  padding: 3px 7px; border-radius: 5px; background: rgba(4, 8, 6, 0.95);
  color: #fff; font-family: var(--mono); font-size: 0.66rem; pointer-events: none; white-space: nowrap;
}

/* ---- button row ---- */
.vc-bar {
  display: flex !important; flex-direction: row !important;
  align-items: center; gap: 2px; width: 100%; padding: 0 2px;
}
.vc-spacer { flex: 1 1 auto; }
.vc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: #fff; cursor: pointer;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.vc-btn:hover { background: rgba(255, 255, 255, 0.14); }
.vc-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.vc-btn svg { width: 20px; height: 20px; fill: currentColor; }
.vc-btn.is-on { color: var(--brass-bright); }

/* Only one icon per state may draw. */
.vc-icon-pause, .vc-icon-muted { display: none; }
.vc-icon-play, .vc-icon-loud { display: block; }
.video-stage.is-live-play:not(.is-paused) .vc-icon-play { display: none; }
.video-stage.is-live-play:not(.is-paused) .vc-icon-pause { display: block; }
.vc-btn.is-muted .vc-icon-loud { display: none; }
.vc-btn.is-muted .vc-icon-muted { display: block; }

/* ---- volume: one button, a slider that grows on hover ---- */
.vc-vol { display: flex; align-items: center; flex: none; }
.vc-vol-range {
  width: 0; opacity: 0; margin: 0; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.34); cursor: pointer;
  transition: width 180ms var(--ease-out), opacity 180ms ease, margin 180ms ease;
}
.vc-vol:hover .vc-vol-range, .vc-vol-range:focus-visible { width: 76px; opacity: 1; margin: 0 8px 0 2px; }
.vc-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: #fff;
}
.vc-vol-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

.vc-time {
  flex: none; padding: 0 8px; color: #fff;
  font-family: var(--mono); font-size: 0.74rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vc-chapter-now {
  min-width: 0; max-width: 280px; padding-left: 8px;
  color: rgba(255, 255, 255, 0.72); font-size: 0.76rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- menus ---- */
.vc-menu-wrap { position: relative; display: inline-flex; flex: none; }
.vc-speed, .vc-quality {
  width: auto; min-width: 42px; padding: 0 10px;
  font-family: var(--mono); font-size: 0.74rem;
}
.vc-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  display: flex; flex-direction: column; min-width: 118px; padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  background: rgba(14, 18, 16, 0.97);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); z-index: 4;
}
.vc-menu[hidden] { display: none; }
.vc-menu button {
  padding: 8px 12px; border: 0; border-radius: 6px; background: transparent;
  color: #fff; font-family: var(--mono); font-size: 0.76rem;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.vc-menu button:hover { background: rgba(255, 255, 255, 0.12); }
.vc-menu button.is-on { color: var(--brass-bright); }
.vc-menu-speed button.is-on::before { content: "✓ "; }

.vc-cc.is-pending { opacity: 0.45; }

/* ---- captions, loading, failure ---- */
.video-captions {
  position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: min(92%, 760px); text-align: center; pointer-events: none; z-index: 2;
}
.video-captions[hidden] { display: none; }
.vcap-line {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  background: rgba(4, 8, 6, 0.88); color: #fff;
  font-size: clamp(0.86rem, 1.7vw, 1.06rem); line-height: 1.4;
}
.video-status {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px; text-align: center; background: rgba(9, 15, 12, 0.9);
}
.video-status[hidden] { display: none; }
.video-status p { margin: 0; color: var(--muted); font-size: 0.86rem; }
.video-status .vs-head { color: #fff; font-size: 0.98rem; font-weight: 600; }
.video-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--brass);
  animation: relay-spin 700ms linear infinite;
}
@keyframes relay-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .vc-chapter-now { display: none; }
  .vc-vol-range { display: none; }
  .vc-btn { width: 32px; height: 32px; }
}

/* ==========================================================================
   Module page vertical list, chapters, bigger switch
   ========================================================================== */

.module-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
@media (min-width: 1020px) {
  .module-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
}
/* Lessons run down the page, one per row, rather than a grid of look-alike
   cards that gave no sense of order. */
.module-lessons { list-style: none; margin: 0 0 50px; padding: 0; display: grid; gap: 6px; }
.module-lessons .pv-item {
  grid-template-columns: 26px 168px minmax(0, 1fr) 20px;
  padding: 10px; border-radius: 12px;
}
.module-lessons .pv-title { display: block; font-size: 0.98rem; -webkit-line-clamp: 2; }
.module-lessons .pv-sub { font-size: 0.6rem; }
.module-lessons .pv-shot { border-radius: 9px; }
@media (max-width: 640px) {
  .module-lessons .pv-item { grid-template-columns: 22px 118px minmax(0, 1fr); }
  .module-lessons .pv-item .mark { display: none; }
}

.module-aside { display: grid; gap: 14px; }
.ma-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ma-note { margin: 10px 0 14px; color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.ma-facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ma-facts li { display: flex; align-items: baseline; gap: 9px; color: var(--muted); font-size: 0.85rem; }
.ma-facts strong {
  min-width: 2ch; color: var(--brass);
  font-family: var(--mono); font-size: 0.98rem; font-variant-numeric: tabular-nums;
}

/* ---------- chapters ---------- */

.chapters { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chapters-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 16px; border: 0; background: var(--panel);
  color: var(--text); font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.ch-count { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; }
.chapters-body { padding: 14px 16px 16px; }
.chapters-body[hidden] { display: none; }
.chapters-summary {
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 0.88rem; line-height: 1.55;
}
.chapter-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-height: 240px; overflow-y: auto;
}
@media (min-width: 760px) { .chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } }
.chapter {
  display: flex; gap: 12px; align-items: baseline; width: 100%;
  padding: 8px 10px; margin: 0 -10px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--text); text-align: left; cursor: pointer;
}
.chapter:hover { background: var(--panel); }
.chapter.is-on { background: color-mix(in srgb, var(--brass) 14%, transparent); }
.chapter.is-on .chapter-time { color: var(--brass); }
.chapter-time {
  flex: none; min-width: 42px; color: var(--faint);
  font-family: var(--mono); font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
.chapter-title { font-size: 0.86rem; line-height: 1.4; }
.chapter-none { margin: 0; color: var(--faint); font-size: 0.82rem; }

/* ---------- a switch you can actually hit ---------- */

.theme-switch { margin-left: 22px; }
.ts-mark { width: 42px; height: 42px; border-radius: 12px; }
.ts-mark svg { width: 21px; height: 21px; }

/* ==========================================================================
   Black sections, quieter buttons, softer card lift
   ========================================================================== */

/* The preview frame and the community band are their own black surfaces in
   both themes. A green wash behind the Relay mark made the logo look like it
   belonged to a different site. */
.shp-frame {
  background: #000; border-color: rgba(255, 255, 255, 0.12);
}
:root[data-theme="light"] .shp-frame { border-color: rgba(23, 33, 28, 0.2); }

.community {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.community-copy h2 { color: #f4f1e8; }
.community-copy p { color: rgba(244, 241, 232, 0.66); }
.community-x { color: rgba(244, 241, 232, 0.4); }
:root[data-theme="light"] .community {
  border-color: rgba(23, 33, 28, 0.18);
}

/* Buttons are near-black, not green. The forest fill read as a different
   brand sitting on the page. */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .wd-open,
:root[data-theme="light"] .wm-done:not([disabled]),
.community .btn {
  background: #12100d; color: #f4f1e8; border-color: #12100d;
}
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .wd-open:hover,
.community .btn:hover { background: #262119; color: #fff; border-color: #262119; }
:root[data-theme="light"] .nl-go { background: #12100d; color: #f4f1e8; }
:root[data-theme="light"] .mc-fill,
:root[data-theme="light"] .np-fill { background: #8a6a26; }
:root[data-theme="light"] .wm-bar > span { background: #8a6a26; }

/* The lifted card carried a hard black shadow that looked like a hole on the
   pale page. It is a soft lift now, tuned per theme. */
.flat-rail .flat-card.is-lit { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28); }
:root[data-theme="light"] .flat-rail .flat-card.is-lit {
  box-shadow: 0 12px 26px rgba(23, 33, 28, 0.16);
}
:root[data-theme="light"] .module-card:hover { box-shadow: 0 12px 26px rgba(23, 33, 28, 0.14); }
/* the dots are the slideshow's position marker; they stay in both themes */

/* On the black band the button has to be the light element, or it disappears
   into its own background. */
.community .btn,
.community .btn:hover {
  background: #f4f1e8; color: #12100d; border-color: #f4f1e8;
}
.community .btn:hover { background: #fff; }
.community .btn:focus-visible { outline: 2px solid #f4f1e8; outline-offset: 3px; }

/* ==========================================================================
   FAQ, stats band, community inversion, chapter links, switch, module boxes
   ========================================================================== */

/* ---------- stats band ---------- */

.stats-band { background: #000; border-bottom: 1px solid rgba(255,255,255,0.1); }
:root[data-theme="light"] .stats-band {
  background: #f4f1e8; border-top: 1px solid rgba(23,33,28,0.14);
  border-bottom: 1px solid rgba(23,33,28,0.14);
}
.stats-inner {
  width: min(100% - 40px, 1320px); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 820px) { .stats-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 18px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.stat:last-child { border-right: 0; }
:root[data-theme="light"] .stat { border-right-color: rgba(23,33,28,0.12); }
.stat strong {
  font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 420; line-height: 1; color: #f4f1e8;
}
.stat span { color: rgba(244,241,232,0.6); font-size: 0.82rem; }
:root[data-theme="light"] .stat strong { color: #17211c; }
:root[data-theme="light"] .stat span { color: rgba(23,33,28,0.62); }

/* ---------- FAQ ---------- */

.faq { margin: 56px 0 60px; }
.faq-title { margin: 10px 0 26px; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 420; }
.faq-list { border-top: 1px solid var(--line); }
.faq-row { border-bottom: 1px solid var(--line); }
.faq-row summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.8vw, 1.24rem); line-height: 1.35;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary:hover { color: var(--brass-bright); }
.faq-mark { position: relative; flex: none; width: 15px; height: 15px; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--brass); transform: translate(-50%, -50%);
  transition: opacity 200ms ease, transform 200ms ease;
}
.faq-mark::before { width: 15px; height: 1.5px; }
.faq-mark::after { width: 1.5px; height: 15px; }
.faq-row[open] .faq-mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq-answer { padding: 0 4px 24px; max-width: 74ch; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }

/* ---------- community: inverted against the page ---------- */

/* Dark page: a light band with a black button. Light page: a black band with a
   light button. Either way it is the one block that inverts, so it reads as a
   different place. */
.community { background: #f4f1e8; border-color: rgba(23,33,28,0.16); }
.community-copy h2 { color: #17211c; }
.community-copy p { color: rgba(23,33,28,0.66); }
.community-x { color: rgba(23,33,28,0.4); }
.community .btn, .community .btn:hover {
  background: #12100d; color: #f4f1e8; border: 1px solid #12100d;
}
.community .btn:hover { background: #2b251c; }
:root[data-theme="light"] .community { background: #000; border-color: rgba(255,255,255,0.14); }
:root[data-theme="light"] .community-copy h2 { color: #f4f1e8; }
:root[data-theme="light"] .community-copy p { color: rgba(244,241,232,0.66); }
:root[data-theme="light"] .community-x { color: rgba(244,241,232,0.4); }
:root[data-theme="light"] .community .btn {
  background: #f4f1e8; color: #12100d; border: 1px solid #f4f1e8;
}
:root[data-theme="light"] .community .btn:hover { background: #fff; }

/* ---------- chapters read as links ---------- */

.chapter-title {
  color: #6f8fd0; text-decoration: underline;
  text-decoration-color: rgba(111, 143, 208, 0.4); text-underline-offset: 0.18em;
}
.chapter:hover .chapter-title { color: #93b0e8; text-decoration-color: currentColor; }
:root[data-theme="light"] .chapter-title { color: #1f4fa8; text-decoration-color: rgba(31, 79, 168, 0.4); }
:root[data-theme="light"] .chapter:hover .chapter-title { color: #12376f; }
.chapter { padding: 9px 10px; }
.chapter:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* ---------- a switch with no box ---------- */

.ts-mark { width: 46px; height: 46px; border: 0; border-radius: 12px; background: transparent; }
.ts-mark svg { width: 24px; height: 24px; }
.theme-switch:hover .ts-mark { background: color-mix(in srgb, var(--text) 10%, transparent); border: 0; }
:root[data-theme="light"] .ts-mark { border: 0; }
:root[data-theme="light"] .theme-switch:hover .ts-mark {
  background: rgba(23,33,28,0.08); border: 0; color: #17211c;
}

/* ---------- module page: the playlist gets a container ---------- */

.module-lessons {
  padding: 10px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel);
}
.module-lessons .pv-item:hover { background: var(--panel-2); }
:root[data-theme="light"] .module-lessons { background: #fff; }
.module-head { padding-bottom: 34px; }
.mh-panel { gap: 12px; padding: 20px; }
.module-body { margin-top: 6px; }

/* ---------- a finished lesson is ticked ---------- */

.pv-item .mark.is-done { color: var(--ok); }
.pv-item.is-done .pv-title { color: var(--muted); }

/* ==========================================================================
   Plain theme button, cream community, exact-three slideshow, playlist rows
   ========================================================================== */

/* A button, not a toggle. No box, no track, no knob. */
.theme-switch { margin-left: 22px; padding: 0; border: 0; background: none; }
.ts-mark {
  width: 42px; height: 42px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted);
  transition: color 160ms ease, background 160ms ease;
}
.theme-switch:hover .ts-mark { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .ts-mark { outline: 2px solid var(--brass); outline-offset: 2px; }
.ts-mark svg { width: 22px; height: 22px; }
:root[data-theme="light"] .ts-mark { border: 0; background: transparent; color: #4a5049; }
:root[data-theme="light"] .theme-switch:hover .ts-mark { background: rgba(23,33,28,0.08); color: #17211c; }

/* ---------- community: cream, with a real edge ---------- */

.community {
  background: #efeae0;
  border-top: 2px solid rgba(23,33,28,0.55);
  border-bottom: 2px solid rgba(23,33,28,0.55);
}
:root[data-theme="light"] .community {
  background: #efeae0;
  border-top: 2px solid rgba(23,33,28,0.55);
  border-bottom: 2px solid rgba(23,33,28,0.55);
}
.community-copy h2, :root[data-theme="light"] .community-copy h2 { color: #17211c; }
.community-copy p, :root[data-theme="light"] .community-copy p { color: rgba(23,33,28,0.68); }
.community-x, :root[data-theme="light"] .community-x { color: rgba(23,33,28,0.4); }
.community .btn, :root[data-theme="light"] .community .btn {
  background: #12100d; color: #f4f1e8; border: 2px solid #12100d;
}
.community .btn:hover, :root[data-theme="light"] .community .btn:hover { background: #2b251c; border-color: #2b251c; }

/* ---------- exactly three cards, nothing peeping ---------- */

.flat-viewport { overflow: hidden; padding: 6px 0 10px; }
.flat-rail { gap: 20px; }
.flat-rail .flat-card {
  flex: 0 0 calc((100% - 40px) / 3);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out),
              box-shadow 520ms var(--ease-out), border-color 520ms var(--ease-out);
}
@media (max-width: 1039px) { .flat-rail .flat-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 699px)  { .flat-rail .flat-card { flex-basis: 100%; } }
.flat-rail { transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1); }
/* The arrows sit outside the viewport so no fourth card shows beneath them. */
.rail-prev { left: -54px; }
.rail-next { right: -54px; }
@media (max-width: 1460px) { .rail-prev { left: -10px; } .rail-next { right: -10px; } }

/* Light mode: a real black edge on the cards, lifting on the active one. */
:root[data-theme="light"] .flat-card { border: 1px solid rgba(23,33,28,0.35); }
:root[data-theme="light"] .flat-rail .flat-card.is-lit {
  border-color: #17211c; box-shadow: 0 14px 30px rgba(23,33,28,0.18);
}
.flat-rail .flat-card.is-lit { border-color: rgba(244,241,232,0.55); }

/* ---------- playlist rows are separated ---------- */

.module-lessons { padding: 6px; }
.module-lessons > li + li { border-top: 1px solid var(--line); }
.module-lessons .pv-item { border-radius: 10px; margin: 4px 0; }
.playlist-vert > li + li { border-top: 1px solid var(--line); }
.playlist-vert .pv-item { margin: 3px 0; }

/* ---------- the start button, centred and bigger ---------- */

.shp-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 18px 24px;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.005em;
}
.shp-note { text-align: center; }

/* ---------- fullscreen actually fills the screen ---------- */

.video-stage:fullscreen { width: 100vw; height: 100vh; background: #000; }
.video-stage:fullscreen video,
.video-stage:fullscreen iframe { width: 100%; height: 100%; object-fit: contain; }
.video-stage:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; }
.video-stage:-webkit-full-screen video { width: 100%; height: 100%; object-fit: contain; }

/* ---------- the "not on this machine" state ---------- */

.video-status-local { background: rgba(9, 15, 12, 0.96); }
.video-status-local code {
  padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.1); font-size: 0.82em;
}

/* ==========================================================================
   Final pass: plain theme button, dark community, module continue card
   ========================================================================== */

/* No border, no ring, no box. Just the mark. */
.theme-switch, .theme-switch:focus, .theme-switch:focus-visible,
.theme-switch:active { outline: none !important; box-shadow: none !important; border: 0 !important; }
.ts-mark, .theme-switch:focus .ts-mark, .theme-switch:focus-visible .ts-mark,
.theme-switch:active .ts-mark {
  border: 0 !important; outline: none !important; box-shadow: none !important;
  background: transparent;
}
.theme-switch:hover .ts-mark { background: color-mix(in srgb, var(--text) 10%, transparent) !important; }

/* ---------- community back to the dark band ---------- */

.community, :root[data-theme="light"] .community {
  background: linear-gradient(180deg, #0f1613 0%, #000 100%);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.community-copy h2, :root[data-theme="light"] .community-copy h2 { color: #f4f1e8; }
.community-copy p, :root[data-theme="light"] .community-copy p { color: rgba(244,241,232,0.68); }
.community-x, :root[data-theme="light"] .community-x { color: rgba(244,241,232,0.4); }
.community .btn, :root[data-theme="light"] .community .btn {
  background: #f4f1e8; color: #12100d; border: 1px solid #f4f1e8;
}
.community .btn:hover, :root[data-theme="light"] .community .btn:hover {
  background: #fff; border-color: #fff; color: #12100d;
}

/* ---------- module: a preview, then one clear control ---------- */

.mh-panel { padding: 0; overflow: hidden; }
.mh-shot {
  display: block; aspect-ratio: 16 / 9; background: var(--code-bg);
  border-bottom: 1px solid var(--line);
}
.mh-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-panel-inner { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.mh-panel-title { font-size: 0.92rem; line-height: 1.35; }
.mh-start { width: 100%; text-align: center; padding: 13px 18px; font-weight: 650; }

/* ---------- spacing ---------- */

.module-head { padding-bottom: 40px; gap: 44px; }
.watch-head { padding: 22px 24px; }
.watch-desc { margin-top: 18px; }
.wd-links { margin-top: 4px; }

/* ==========================================================================
   Theme button, rebuilt from nothing. New class, so no earlier rule reaches it.
   ========================================================================== */

.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 22px; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: color 160ms ease;
}
.theme-btn:hover { color: var(--text); }
.theme-btn:focus { outline: none; }
.theme-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 4px; }
.theme-btn svg { width: 20px; height: 20px; display: block; }
.tb-sun { display: none; }
:root[data-theme="light"] .tb-sun { display: block; }
:root[data-theme="light"] .tb-moon { display: none; }
:root[data-theme="light"] .theme-btn { color: #5b6159; }
:root[data-theme="light"] .theme-btn:hover { color: #17211c; }

/* ==========================================================================
   Module art, horizontal resume card, community as a box
   ========================================================================== */

.fc-art { background: #f0ebe0; padding: 0; overflow: hidden; }
.fc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The resume card reads left to right: preview, then what it is and the one
   control. Stacked, it took a whole column of height for one button. */
.mh-panel { padding: 14px; }
.mh-panel-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: center; }
.mh-shot {
  display: block; aspect-ratio: 16 / 9; border-radius: 9px;
  overflow: hidden; background: var(--code-bg); border: 0;
}
.mh-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-panel-inner { display: flex; flex-direction: column; gap: 9px; padding: 0; }
.mh-panel-title { font-size: 0.9rem; line-height: 1.32; }
.mh-start { width: 100%; text-align: center; padding: 11px 16px; }
@media (max-width: 520px) { .mh-panel-row { grid-template-columns: minmax(0, 1fr); } }

/* A contained box on the page, not a black strip running edge to edge. */
.community {
  margin: 34px 0 8px; border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #101815 0%, #050806 100%);
}
:root[data-theme="light"] .community {
  border: 1px solid rgba(23,33,28,0.5);
  background: linear-gradient(180deg, #14100c 0%, #000 100%);
}
.community-inner { width: auto; padding: 30px 34px; }
@media (max-width: 899px) { .community-inner { padding: 26px 22px; } }

/* `.theme-btn svg` is more specific than `.tb-sun`, so `display:block` on the
   svg was beating the hide and both icons drew at once. */
.theme-btn .tb-sun { display: none; }
.theme-btn .tb-moon { display: block; }
:root[data-theme="light"] .theme-btn .tb-sun { display: block; }
:root[data-theme="light"] .theme-btn .tb-moon { display: none; }

/* ==========================================================================
   Cream community box, module facts bar, centred result, account links
   ========================================================================== */

/* Cream in both themes, and the contents pulled together instead of the button
   drifting to the far edge. */
.community, :root[data-theme="light"] .community {
  background: #f4f1e8;
  border: 1px solid rgba(23,33,28,0.28);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
:root[data-theme="light"] .community { box-shadow: 0 12px 28px rgba(23,33,28,0.12); }
.community-copy h2, :root[data-theme="light"] .community-copy h2 { color: #17211c; }
.community-copy p, :root[data-theme="light"] .community-copy p { color: rgba(23,33,28,0.68); }
.community-x, :root[data-theme="light"] .community-x { color: rgba(23,33,28,0.38); }
.community .btn, :root[data-theme="light"] .community .btn {
  background: #12100d; color: #f4f1e8; border: 1px solid #12100d;
}
.community .btn:hover, :root[data-theme="light"] .community .btn:hover {
  background: #2b251c; border-color: #2b251c; color: #fff;
}
.community-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 22px; padding: 26px 30px;
}
.community-lockup { flex: none; gap: 12px; }
.community-copy { flex: 1 1 340px; min-width: 0; }
.community-copy p { max-width: 62ch; }
.community-cta { flex: none; margin-left: auto; }
.community-logo { width: 40px; height: 31px; }
.community-relay { width: 34px; height: 34px; }
@media (max-width: 780px) { .community-cta { margin-left: 0; width: 100%; text-align: center; } }

/* ---------- module facts bar ---------- */

.module-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 30px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); overflow: hidden;
}
@media (min-width: 860px) { .module-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mf-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; border-right: 1px solid var(--line);
}
.mf-cell:last-child { border-right: 0; }
@media (max-width: 859px) {
  .mf-cell:nth-child(2n) { border-right: 0; }
  .mf-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.mf-cell strong { font-size: 0.98rem; font-weight: 650; letter-spacing: -0.008em; }
.mf-cell span { color: var(--muted); font-size: 0.8rem; }

/* ---------- what you will finish, centred ---------- */

.start-page .start-result { text-align: center; padding: 36px 0 38px; }
.start-page .start-result .section-label { margin-bottom: 14px; }
.start-page .start-result p:last-child {
  margin-inline: auto; max-width: 58ch; text-align: center;
}

/* ---------- module resume card: progress under the preview ---------- */

.mh-panel-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mh-shot { width: 100%; }
.mh-panel-inner { gap: 10px; }
.mh-panel-title { font-size: 0.94rem; font-weight: 650; }
.mh-panel .mp-bar { height: 8px; padding: 0; }
.mh-panel .mp-bar .mc-pct { display: none; }
.mh-start { padding: 12px 16px; }

/* ---------- account controls ---------- */

.header-auth { display: inline-flex; align-items: center; gap: 14px; margin-left: 20px; }
.auth-link {
  color: var(--muted); font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.auth-link:hover { color: var(--text); }
.auth-cta {
  padding: 8px 15px; border-radius: 999px;
  background: var(--brass); color: var(--ink);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
.auth-cta:hover { background: var(--brass-bright); color: var(--ink); }
:root[data-theme="light"] .auth-cta { background: #12100d; color: #f4f1e8; }
:root[data-theme="light"] .auth-cta:hover { background: #2b251c; color: #fff; }
@media (max-width: 1120px) { .header-auth .auth-link { display: none; } }

/* ==========================================================================
   Resume card to the sketch, tighter community, header login
   ========================================================================== */

/* Preview and its progress bar on the left, the title beside them, one square
   button across the bottom. */
.mh-panel { padding: 16px; }
.mh-panel-row {
  display: grid; grid-template-columns: 152px minmax(0, 1fr);
  gap: 14px; align-items: start; margin-bottom: 14px;
}
.mh-media { display: flex; flex-direction: column; gap: 8px; }
.mh-shot { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.mh-media .mp-bar {
  width: 100%; min-width: 0; height: 8px; padding: 0;
  border-radius: 999px; background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mh-media .mp-bar .mc-pct { display: none; }
.mh-panel-title {
  margin: 0; font-size: 0.98rem; font-weight: 650; line-height: 1.34;
  align-self: center;
}
/* Square, full width, sitting under the whole card. */
.mh-start {
  display: block; width: 100%; padding: 14px 16px;
  border: 0; border-radius: 6px;
  background: var(--brass); color: var(--ink);
  font-size: 0.92rem; font-weight: 700; text-align: center; text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.mh-start:hover { background: var(--brass-bright); color: var(--ink); }
:root[data-theme="light"] .mh-start { background: #12100d; color: #f4f1e8; }
:root[data-theme="light"] .mh-start:hover { background: #2b251c; color: #fff; }
@media (max-width: 520px) { .mh-panel-row { grid-template-columns: minmax(0, 1fr); } }

/* The community band had a column of dead space under it. */
.community { margin: 30px 0 4px; }
.community-inner { padding: 22px 26px; align-items: center; }
.community-copy p { margin-top: 5px; }

/* One golden login control. */
.header-auth { margin-left: 22px; }
.auth-cta { padding: 9px 18px; }

/* ==========================================================================
   Module header: the resume card takes the room it needs
   ========================================================================== */

/* The header split left the title with a wide empty gutter and squeezed the
   resume card into a narrow column, so its title wrapped four lines deep. */
@media (min-width: 900px) {
  .module-head { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; }
}
@media (min-width: 1240px) {
  .module-head { grid-template-columns: minmax(0, 1fr) 480px; }
}
.mh-copy { max-width: 34ch; }
.mh-title { max-width: none; }
.mh-panel { padding: 18px; }
.mh-panel-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.mh-panel-title { font-size: 1.04rem; line-height: 1.3; }

/* ==========================================================================
   Video fills its frame, fullscreen fills the screen, login reads clearly
   ========================================================================== */

/* The stage was letterboxing the video inside a fixed box, so a 16:9 recording
   sat in the top half with black under it. */
.video-stage { aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video-stage > video,
.video-stage > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; border: 0;
}
.video-stage:fullscreen, .video-stage:-webkit-full-screen {
  aspect-ratio: auto; width: 100vw; height: 100vh;
}
.video-stage:fullscreen > video,
.video-stage:-webkit-full-screen > video { object-fit: contain; }

/* The login pill was brass-on-dark with muted text; it read as disabled. */
.auth-cta {
  background: var(--brass); color: #14100a; font-weight: 800;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.auth-cta:hover { background: var(--brass-bright); color: #14100a; }

/* ==========================================================================
   Facts bar: lighter and centred. A real footer.
   ========================================================================== */

.module-facts { background: color-mix(in srgb, var(--panel) 60%, transparent); }
:root[data-theme="light"] .module-facts { background: #fff; }
.mf-cell { align-items: center; text-align: center; padding: 20px 18px; gap: 5px; }
.mf-cell strong { font-weight: 600; }
.mf-cell span { color: var(--faint); }

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

.site-footer { margin-top: 70px; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  padding: 48px 0 34px;
}
@media (min-width: 760px)  { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } }
.footer-brand { min-width: 0; }
.footer-mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
}
.footer-mark img { width: 30px; height: 30px; border-radius: 7px; }
.footer-mark span {
  font-family: var(--mono); font-size: 0.82rem;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.footer-line { margin: 14px 0 0; max-width: 34ch; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.footer-head {
  margin: 0 0 4px; color: var(--faint); font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.footer-col a, .footer-col [role="button"] {
  color: var(--muted); font-size: 0.85rem; text-decoration: none; cursor: pointer;
}
.footer-col a:hover, .footer-col [role="button"]:hover { color: var(--text); }
.footer-note { color: var(--faint); font-size: 0.76rem; }
.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 0 40px; border-top: 1px solid var(--line);
  color: var(--faint); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
}

/* ==========================================================================
   Breakdown library: grouped rail, clean nav, lighter facts bar
   ========================================================================== */

.notes-side { max-height: none; }
.ns-groups { display: grid; gap: 22px; max-height: 780px; overflow-y: auto; padding-right: 4px; }
.ns-groups::-webkit-scrollbar { width: 7px; }
.ns-groups::-webkit-scrollbar-thumb { background: var(--raise); border-radius: 4px; }
.ns-group { min-width: 0; }
.ns-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.78rem; font-weight: 650;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.ns-title span { color: var(--faint); font-family: var(--mono); font-size: 0.66rem; }
.notes-side .pv-item { grid-template-columns: 20px 104px minmax(0, 1fr) 16px; gap: 10px; padding: 7px; }
.notes-side .pv-title { font-size: 0.82rem; -webkit-line-clamp: 2; }
.notes-head { border-bottom: 0; margin-bottom: 10px; }

/* Previous and next are their own row, so a long title cannot run under them. */
.note-nav { display: flex; gap: 9px; margin-top: 16px; }
.note-step {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.note-step:hover { color: var(--text); border-color: var(--line-strong); }
.note-step[disabled] { opacity: 0.4; cursor: not-allowed; }

.note-empty-state {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  border: 1px dashed var(--line-strong); border-radius: 14px;
  background: var(--panel);
}
.note-empty-state p { margin: 0; max-width: 34ch; text-align: center; color: var(--muted); }
.note-empty-state[hidden] { display: none; }

/* ---------- the facts bar reads as a lit panel ---------- */

.module-facts {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-color: var(--line-strong);
}
:root[data-theme="light"] .module-facts { background: #fff; border-color: rgba(23,33,28,0.22); }
.mf-cell strong { color: var(--text); }
.mf-cell span { color: var(--muted); }

/* ---------- profile ---------- */

.profile-head { max-width: 700px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 60px; }
@media (min-width: 940px) { .profile-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; } }
.pf-side { display: grid; gap: 22px; }
.pf-card { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
:root[data-theme="light"] .pf-card { background: #fff; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 32px; margin: 16px 0 26px; }
.pf-stats div { display: flex; flex-direction: column; gap: 3px; }
.pf-stats strong {
  font-family: var(--serif); font-size: 2.2rem; font-weight: 420;
  line-height: 1; color: var(--brass);
}
.pf-stats span { color: var(--muted); font-size: 0.84rem; }
.pf-modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pf-module {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 120px 44px;
  gap: 14px; align-items: center; padding: 11px 0;
  border-top: 1px solid var(--line);
}
.pf-num { color: var(--faint); font-family: var(--mono); font-size: 0.74rem; }
.pf-name { color: var(--text); font-size: 0.9rem; text-decoration: none; }
.pf-name:hover { color: var(--brass-bright); }
.pf-bar {
  position: relative; display: block; height: 6px; border-radius: 999px;
  background: var(--raise); overflow: hidden;
}
.pf-bar .mc-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brass); }
.pf-pct {
  color: var(--muted); font-family: var(--mono); font-size: 0.72rem;
  text-align: right; font-variant-numeric: tabular-nums;
}
.pf-facts { margin: 16px 0 0; display: grid; gap: 12px; }
.pf-facts > div { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pf-facts dt {
  color: var(--faint); font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.pf-facts dd { margin: 0; font-size: 0.9rem; }
.pf-note { margin: 16px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.pf-actions { display: grid; gap: 9px; margin-top: 16px; }
.pf-actions .btn { width: 100%; text-align: center; }
@media (max-width: 620px) { .pf-module { grid-template-columns: 26px minmax(0, 1fr) 44px; } .pf-bar { display: none; } }

/* ==========================================================================
   Community: a bigger lockup, held together in the middle
   ========================================================================== */

.community-inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 24px; padding: 34px 38px; align-items: center; justify-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .community-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 34px; justify-items: start; text-align: left;
  }
}
/* The marks were small and pinned to the far edge, a screen away from the
   button they belong to. */
.community-lockup { gap: 16px; flex: none; }
.community-logo { width: 62px; height: 48px; }
.community-relay { width: 54px; height: 54px; border-radius: 12px; }
.community-x { font-size: 1.3rem; }
.community-copy { max-width: 62ch; }
.community-copy h2 { font-size: 1.28rem; }
.community-copy p { margin-top: 8px; font-size: 0.92rem; line-height: 1.6; }
.community-points {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: center;
}
@media (min-width: 900px) { .community-points { justify-content: flex-start; } }
.community-points li {
  position: relative; padding-left: 16px;
  color: rgba(23,33,28,0.66); font-size: 0.82rem;
}
.community-points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: #5865F2;
}
.community-cta { flex: none; margin-left: 0; white-space: nowrap; padding: 13px 24px; }

/* ==========================================================================
   Gaps closed, files boxed, light community inverted, transcript page
   ========================================================================== */

/* The watch grid stretched both columns to the tallest, so a long playlist
   left a column of dead space beside the player. */
.watch { align-items: start; }
.watch-main { align-self: start; }
.notes-side .ns-groups { max-height: 620px; }
[data-notes-page] .watch { align-items: start; }
[data-notes-page] .watch-main { position: sticky; top: 84px; }
@media (max-width: 1079px) { [data-notes-page] .watch-main { position: static; } }

/* The start page ran a long empty stretch under the next action. */
.start-next { margin-bottom: 24px; }
.start-page .site-main { padding-bottom: 0; }
.faq { margin-bottom: 34px; }

/* ---------- files list sits in a panel ---------- */

.dl-grid { padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
:root[data-theme="light"] .dl-grid { background: #fff; }
.dl-card { border: 0; }
.file-list, .lesson-files, .fold-body > ul {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); padding: 8px;
}
:root[data-theme="light"] .file-list,
:root[data-theme="light"] .lesson-files { background: #fff; }

/* ---------- light mode: the community box inverts ---------- */

:root[data-theme="light"] .community {
  background: #12100d; border-color: #12100d;
}
:root[data-theme="light"] .community-copy h2 { color: #f4f1e8; }
:root[data-theme="light"] .community-copy p { color: rgba(244,241,232,0.72); }
:root[data-theme="light"] .community-points li { color: rgba(244,241,232,0.72); }
:root[data-theme="light"] .community-x { color: rgba(244,241,232,0.45); }
:root[data-theme="light"] .community .btn {
  background: #f4f1e8; color: #12100d; border-color: #f4f1e8;
}
:root[data-theme="light"] .community .btn:hover { background: #fff; }

/* A square marker, not a dot, and tighter padding around the block. */
.community-points li::before {
  border-radius: 2px; width: 7px; height: 7px; top: 0.5em;
  background: #5865F2;
}
:root[data-theme="light"] .community-points li::before { background: #7d88ff; }
.community-inner { padding: 26px 32px; }
.community { margin: 22px 0 26px; }

/* ---------- module card titles fit two lines ---------- */

.flat-card .fc-title {
  font-size: 1.06rem; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.flat-rail .flat-card { flex-basis: calc((100% - 40px) / 3); padding: 18px; }
.flat-card .fc-result { -webkit-line-clamp: 2; min-height: 2.6em; }

/* ---------- transcript page ---------- */

.tr-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 26px; }
.tr-panel {
  padding: 10px; margin-bottom: 60px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}
:root[data-theme="light"] .tr-panel { background: #fff; }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tr-list li {
  display: grid; grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px; padding: 9px 10px; border-radius: 8px;
}
.tr-list li:hover { background: var(--panel-2); }
.tr-time {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--brass); font-family: var(--mono); font-size: 0.74rem;
  font-variant-numeric: tabular-nums; text-align: left;
}
.tr-time:hover { color: var(--brass-bright); text-decoration: underline; }
.tr-text { font-size: 0.92rem; line-height: 1.6; }
.tr-none { margin: 24px; color: var(--muted); }

/* ---------- mobile ---------- */

@media (max-width: 720px) {
  .community-inner { padding: 22px 18px; }
  .community-points { flex-direction: column; gap: 7px; }
  .module-facts { grid-template-columns: minmax(0, 1fr); }
  .mf-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .mf-cell:last-child { border-bottom: 0; }
  .tr-list li { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .footer-grid { gap: 26px; padding: 34px 0 26px; }
}

/* ==========================================================================
   Library: browse first, playlist only once something is playing
   ========================================================================== */

.notes-watch { grid-template-columns: minmax(0, 1fr); }
.notes-watch[data-notes-view="browse"] .watch-main,
.notes-watch[data-notes-view="browse"] .notes-side { display: none; }
.notes-watch[data-notes-view="watch"] .notes-browse { display: none; }
@media (min-width: 1080px) {
  .notes-watch[data-notes-view="watch"] { grid-template-columns: minmax(0, 1fr) 372px; }
}
.notes-browse { grid-column: 1 / -1; }
.notes-browse .notes-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 18px;
}
@media (min-width: 620px)  { .notes-browse .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .notes-browse .notes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .notes-browse .notes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   Community: cropped, button pulled in, chips not dots, white in light mode
   ========================================================================== */

.community-inner { padding: 22px 26px; gap: 26px; }
.community { margin: 20px 0 22px; }
/* The button was pushed to the far edge by the copy taking all the slack. */
.community-copy { max-width: 56ch; }
.community-cta { justify-self: end; }
@media (min-width: 900px) {
  .community-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Small highlighted boxes instead of dots. */
.community-points { gap: 8px; }
.community-points li {
  padding: 5px 10px; border-radius: 6px;
  background: rgba(88, 101, 242, 0.14);
  color: rgba(23,33,28,0.78); font-size: 0.78rem;
}
.community-points li::before { content: none; }

/* Light mode keeps it light. */
:root[data-theme="light"] .community {
  background: #fff; border-color: rgba(23,33,28,0.2);
}
:root[data-theme="light"] .community-copy h2 { color: #17211c; }
:root[data-theme="light"] .community-copy p { color: rgba(23,33,28,0.68); }
:root[data-theme="light"] .community-points li {
  background: rgba(88, 101, 242, 0.12); color: rgba(23,33,28,0.78);
}
:root[data-theme="light"] .community-x { color: rgba(23,33,28,0.38); }
:root[data-theme="light"] .community .btn {
  background: #12100d; color: #f4f1e8; border-color: #12100d;
}
:root[data-theme="light"] .community .btn:hover { background: #2b251c; color: #fff; }

/* ---------- the empty stretch under the next action ---------- */

.start-next { margin-bottom: 0; }
.start-page .wrap-wide:last-of-type { padding-bottom: 8px; }
.site-footer { margin-top: 44px; }

/* The community block began life as a full-bleed band with 54px of vertical
   padding on the section itself. It is a card now, so that padding is just
   empty space above and below the content. */
.community { padding: 0; }
.community-inner { padding: 20px 24px; }
.community-copy p { margin-top: 6px; }
.community-points { margin-top: 12px; }

/* Close the long empty run between the last section and the footer. */
.start-page .site-main > .wrap-wide:last-of-type { padding-bottom: 0; }
.start-next { margin: 0 0 28px; }
.site-footer { margin-top: 0; }

/* .site-main carries 96px of bottom padding for pages that end on text. The
   start page ends on a bordered card, so that padding read as a blank screen
   between it and the footer. */
.start-page.site-main { padding-bottom: 24px; }
.start-page .wrap-wide:last-of-type { padding-bottom: 0; }

/* ---------------------------------------------------------------- watch
   Under the player. The panel used to hold one line of text and two
   buttons, which left most of the page empty below the video; it now
   carries the lesson's own opening prose and its section list. */
.watch-desc .wd-prose{
  margin:18px 0 0;
  max-width:64ch;
  position:relative;
  overflow:hidden;
  max-height:8.4em;
  transition:max-height .32s ease;
}
.watch-desc .wd-prose:after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:3.4em;
  background:linear-gradient(to bottom,transparent,var(--panel));
  pointer-events:none;
  transition:opacity .2s ease;
}
.watch-desc .wd-prose.is-open{max-height:none;}
.watch-desc .wd-prose.is-open:after{opacity:0;}
.watch-desc .wd-prose p{
  margin:0 0 .85em;
  font-size:15px;
  line-height:1.72;
  color:var(--muted);
}
.watch-desc .wd-prose p:last-child{margin-bottom:0;}
.watch-desc .wd-prose strong{color:var(--text); font-weight:600;}
.watch-desc .wd-prose code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--code-bg);
  padding:1px 5px; border-radius:4px;
}

.watch-desc .wd-more{
  margin-top:10px;
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:4px 0;
  font:600 13px/1 inherit;
  letter-spacing:.02em;
  color:var(--brass-bright);
  cursor:pointer;
}
.watch-desc .wd-more svg{width:15px; height:15px; transition:transform .25s ease;}
.watch-desc .wd-more[aria-expanded="true"] svg{transform:rotate(180deg);}
.watch-desc .wd-more:hover .wd-more-text{text-decoration:underline;}

.watch-desc .wd-outline{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.watch-desc .wd-outline-label{
  margin:0 0 10px;
  font:600 11px/1 inherit;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.watch-desc .wd-outline-list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:2px;
}
.watch-desc .wd-outline-list a{
  display:flex; align-items:baseline; gap:12px;
  padding:8px 10px; margin:0 -10px;
  border-radius:7px;
  text-decoration:none;
  color:var(--text);
  font-size:14.5px; line-height:1.45;
  transition:background .15s ease,color .15s ease;
}
.watch-desc .wd-outline-list a:hover{
  background:var(--panel-2);
  color:var(--brass-bright);
}
.watch-desc .wd-outline-list .wo-n{
  flex:0 0 auto;
  min-width:1.35em;
  font:600 12px/1.5 var(--mono);
  color:var(--muted);
}
.watch-desc .wd-outline-list a:hover .wo-n{color:var(--brass-bright);}

@media(max-width:760px){
  .watch-desc .wd-prose{max-height:9.6em;}
  .watch-desc .wd-prose p{font-size:14.5px;}
  .watch-desc .wd-outline-list a{padding:9px 8px; margin:0 -8px;}
}

/* ---------------------------------------------------------------- header
   The nav used to shrink its way down to phone width, which at 390px ran
   "Relay" straight into "Start" and wrapped "Real Client Breakdowns" over
   two colliding lines. The links now take a row of their own below the
   brand and scroll sideways if they need to, so nothing overlaps and
   nothing has to be hidden to fit. */
.header-nav { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-tools { display: flex; align-items: center; gap: 18px; }

@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; gap: 10px 12px; min-height: 0; padding-block: 10px; }
  .header-nav { display: contents; }
  .brand { order: 1; margin-right: auto; }
  .nav-tools { order: 2; gap: 14px; }
  .nav-links {
    order: 3;
    flex: 0 0 100%;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  /* every destination stays reachable now that the row is its own line */
  .header-nav a.nav-course { display: inline; }
  .nav-links a { white-space: nowrap; font-size: 0.63rem; letter-spacing: 0.11em; }
}

@media (max-width: 440px) {
  .brand span { display: inline; }
  .brand { gap: 9px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 0.6rem; letter-spacing: 0.09em; }
}

/* On the paper ground --raise is almost the background colour, so an
   unselected dot disappeared. Same marker, real contrast. */
:root[data-theme="light"] .rail-dot { background: rgba(23, 33, 28, 0.28); }
:root[data-theme="light"] .rail-dot:hover { background: rgba(23, 33, 28, 0.5); }
:root[data-theme="light"] .rail-dot.is-on { background: var(--forest); }

/* The card runs the full width of the page wrap, but its copy stopped at
   56ch, so the slack all collected on one side: roughly 340px of empty card
   between the last word and the button, with the button pinned to the far
   edge. Centring the row inside the card closes it from both sides at once,
   which is what Aryan asked for: the button comes left, the lockup and copy
   come right, and the whole block reads tighter without shrinking the card. */
.community-inner {
  max-width: 1020px;
  margin-inline: auto;
  padding: 18px 24px;
  gap: 30px;
}
.community-copy { max-width: none; }

@media (max-width: 899px) {
  /* Stacked, the row has no slack to close and centring would strand it. */
  .community-inner { max-width: none; padding: 22px 20px; gap: 18px; }
}

/* ---------------------------------------------------------------- faq
   The list ran the full width of the page wrap, so the plus sat a long way
   from the end of its own question and the rows read as very wide, very
   empty lines. A question is short text: giving the list its own measure
   puts the marker back beside the words it belongs to. */
.faq { max-width: 860px; margin-inline: auto; }
.faq-title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: 20px; }
.faq-row summary { padding: 16px 2px; font-size: 0.98rem; }
.faq-answer { padding: 0 2px 20px; max-width: none; }

/* Centring the row fixed the stranded button but left a margin of empty card
   at both ends instead. The three parts now spread across the full card:
   lockup at the left, copy taking the slack in the middle, button at the
   right, with the copy no longer capped short of its own column. */
.community-inner { max-width: none; padding: 22px 30px; gap: 34px; }
.community-copy { max-width: none; }
.community-copy h2 { font-size: 1.24rem; line-height: 1.3; }
.community-copy p { margin-top: 9px; max-width: 78ch; }
.community-points { margin-top: 16px; }

@media (max-width: 899px) {
  .community-inner { padding: 22px 20px; gap: 18px; }
}

/* The button sat hard against the right edge with the copy ending well short
   of it. Giving its column real width and centring it inside brings it in
   towards the middle, so the row reads as three filled parts. */
@media (min-width: 900px) {
  .community-inner { grid-template-columns: auto minmax(0, 1fr) 250px; }
  .community-cta { justify-self: center; }
}

/* Held for the one frame the theme changes on, so the swap is instant
   instead of a hundred separate 200ms fades running together. */
:root[data-theme-swapping] *,
:root[data-theme-swapping] *::before,
:root[data-theme-swapping] *::after {
  transition: none !important;
  animation: none !important;
}

/* ------------------------------------------------------- next lesson
   This was a filled brass disc with a play triangle in it, sitting next to
   the lesson title. Aryan read it as a button that does something rather
   than a way to move to the next lesson, which is fair: it looked exactly
   like the play control on the video above it. It is a link, so it now
   looks like one. The whole row is the target, and the chevron slides
   instead of a disc growing. */
.nl-go {
  width: 26px; height: 26px;
  background: none; color: var(--muted);
  transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) ease;
}
.nl-go svg { width: 20px; height: 20px; margin-left: 0; fill: none; }
.next-lesson:hover .nl-go { transform: translateX(4px) scale(1); color: var(--brass-bright); }
.next-lesson { padding: 15px 16px; }
.next-lesson:hover .nl-title { color: var(--brass-bright); }
.nl-title { transition: color var(--dur-hover) ease; }

:root[data-theme="light"] .nl-go { background: none; color: var(--muted); }
:root[data-theme="light"] .next-lesson:hover .nl-go,
:root[data-theme="light"] .next-lesson:hover .nl-title { color: var(--forest); }

/* ------------------------------------------------------- stats band
   Four numbers set very large in a tall band, with the label floating a
   long way under each one. Aryan's note was that it reads as filler and
   that tighter type would carry it better, so the numbers come down, the
   tracking closes up, the label sits right under its number, and the band
   loses about a third of its height. */
.stat { padding: 22px 16px; gap: 3px; }
.stat strong {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 480; letter-spacing: -0.022em;
}
.stat span {
  font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244, 241, 232, 0.52);
}
:root[data-theme="light"] .stat span { color: rgba(23, 33, 28, 0.55); }

/* ------------------------------------------------- module slideshow
   The section ran the full page width and read oversized next to
   everything around it. Down to about 80%, with the card's own type and
   padding brought in to match so it scales rather than just narrows. */
.start-modules { max-width: 1080px; margin-inline: auto; }
.start-modules .sm-head h2 { font-size: 1.28rem; }
.start-modules .sm-head p { font-size: 0.9rem; }
.flat-rail { gap: 15px; }
.flat-rail .flat-card { flex-basis: calc((100% - 30px) / 3); padding: 13px; }
@media (max-width: 1039px) { .flat-rail .flat-card { flex-basis: calc((100% - 15px) / 2); } }
@media (max-width: 699px)  { .flat-rail .flat-card { flex-basis: 100%; } }
.flat-card .fc-title { font-size: 1.02rem; }
.flat-card .fc-desc { font-size: 0.84rem; }
.flat-card .fc-foot { font-size: 0.63rem; }

/* The card in the centre is the one you are on, so it carries the brand
   colour rather than the same hairline as the two beside it. */
.flat-rail .flat-card.is-lit {
  border-color: #d46a29;
  box-shadow: 0 0 0 1px rgba(212, 106, 41, 0.55), 0 18px 38px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] .flat-rail .flat-card.is-lit {
  border-color: #d46a29;
  box-shadow: 0 0 0 1px rgba(212, 106, 41, 0.45), 0 12px 26px rgba(23, 33, 28, 0.16);
}

/* ------------------------------------------------------- stats band
   Set against the reference Aryan gave: the numeral carries it in the
   serif, with a quiet sentence-case label under it. The mono uppercase
   label I had tried read as a system tag, not as a line of copy. */
.stat { padding: 26px 16px; gap: 7px; }
.stat strong {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 400; letter-spacing: -0.012em; line-height: 1;
}
.stat span {
  font-family: var(--sans);
  font-size: 0.82rem; letter-spacing: 0; text-transform: none;
  color: rgba(244, 241, 232, 0.58);
}
:root[data-theme="light"] .stat span { color: rgba(23, 33, 28, 0.6); }

/* One line, right aligned, as asked. */
.footer-base { justify-content: flex-end; }

/* ------------------------------------------------------- hero panel
   The frame behind the mark was flat black, which Aryan read as dead.
   It now carries a warm rake of light from the upper right in the Relay
   orange, a low ember at the base, and a very faint oversized R sitting
   off the bottom left corner, so the panel has depth without competing
   with the mark itself. */
.shp-frame {
  position: relative;
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(212, 106, 41, 0.30), transparent 58%),
    radial-gradient(90% 70% at 18% 104%, rgba(198, 163, 95, 0.18), transparent 62%),
    linear-gradient(158deg, #171310 0%, #080a09 62%, #050706 100%);
}
.shp-frame::before {
  /* The sun ray, thrown across the corner. */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(122deg, transparent 44%, rgba(233, 152, 96, 0.14) 52%, transparent 60%);
  pointer-events: none;
}
.shp-frame::after {
  /* The mark again, oversized and almost gone, as a watermark. */
  content: "";
  position: absolute;
  left: -10%; bottom: -34%;
  width: 62%; aspect-ratio: 1;
  background: url("relay-logo.jpg") center / contain no-repeat;
  opacity: 0.07;
  filter: grayscale(0.2);
  pointer-events: none;
}
.shp-frame img { position: relative; z-index: 1; }
:root[data-theme="light"] .shp-frame { border-color: rgba(23, 33, 28, 0.24); }

/* Discord's own colour is blue, and a blue slab next to the orange mark
   fought it. Gold is the brand's second colour and reads as the primary
   action on both themes. */
.community .btn,
:root[data-theme="light"] .community .btn {
  background: var(--brass); color: #17211c; border-color: var(--brass);
}
.community .btn:hover,
:root[data-theme="light"] .community .btn:hover {
  background: var(--brass-bright); color: #17211c; border-color: var(--brass-bright);
}

/* ------------------------------------------------------- module head
   The title was capped at 22ch inside a column nearly three times that
   wide, so it broke into three short lines against a long run of empty
   page before the panel. A wider measure lets it sit on two lines and
   fill the space it was given. */
.mh-title { max-width: 30ch; }
.mh-copy .lede { max-width: 48ch; }
@media (min-width: 900px) {
  .module-head { grid-template-columns: minmax(0, 1fr) 372px; gap: 44px; align-items: start; }
}

/* The strip can now be three cells or four, depending on whether the
   module has builds and files, so it lays out from the count. */
.module-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .module-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* The header was capped at 760px from an earlier single-column layout. With
   a 372px panel beside it that left the title 343px to wrap in, which is why
   it broke into three short lines with the rest of the page empty. */
.module-head { max-width: none; }
.mh-title { max-width: 22ch; text-wrap: pretty; }

/* ------------------------------------------------------- chapters
   The current chapter was a filled brass wash across the whole row, which
   sat oddly against the blue chapter links. It reads as a marker now: an
   orange rule down the left edge and the time in orange, no fill fighting
   the text. The panel also gets a real caret, so it is obvious it opens
   and closes. */
.chapters-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.ch-label { font-weight: 600; }
.chapters-toggle .ch-count { margin-left: auto; }
.ch-caret {
  width: 17px; height: 17px; flex: none;
  color: var(--muted);
  transition: transform 220ms var(--ease-out);
}
.chapters-toggle[aria-expanded="false"] .ch-caret { transform: rotate(-90deg); }
.chapters-toggle:hover .ch-caret { color: var(--brass-bright); }

.chapter.is-on {
  background: none;
  box-shadow: inset 2px 0 0 #d46a29;
  border-radius: 0 7px 7px 0;
}
.chapter.is-on .chapter-time { color: #d46a29; font-weight: 600; }
.chapter.is-on .chapter-title { color: #d46a29; }
:root[data-theme="light"] .chapter.is-on .chapter-time,
:root[data-theme="light"] .chapter.is-on .chapter-title { color: #b8551d; }

/* ------------------------------------------------- breakdown nav
   Previous and next carried the neighbouring clip's title, so neither
   looked like a step. Plain labels, pushed to the right, with the files
   link taking the space they were leaving empty on the left. */
.note-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.note-steps { display: inline-flex; gap: 10px; margin-left: auto; }
.note-files {
  color: var(--muted); font-size: 0.84rem; text-decoration: none;
  transition: color var(--dur-hover) ease;
}
.note-files:hover { color: var(--brass-bright); }

/* ===================================================== Aryan pass 3 ===== */

/* The oversized watermark R behind the mark read as a smudge, not depth. */
.shp-frame::after { content: none; }

/* Discord's own blue. The gold read as another Relay button rather than as
   the thing it opens. */
.community .btn,
:root[data-theme="light"] .community .btn {
  background: #5865F2; color: #fff; border-color: #5865F2;
}
.community .btn:hover,
:root[data-theme="light"] .community .btn:hover {
  background: #4752e0; color: #fff; border-color: #4752e0;
}

/* Module titles were held to a 22ch measure inside a column four times that
   wide, so every one of them stacked into short left-hung lines with the
   rest of the row empty. They take the column now. */
.mh-title { max-width: none; text-wrap: pretty; }
.mh-copy .lede { max-width: 54ch; }

/* The lit slide's border was a hairline; it needs to read as the marker. */
.flat-rail .flat-card.is-lit {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(212, 106, 41, 0.5), 0 18px 38px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] .flat-rail .flat-card.is-lit {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(212, 106, 41, 0.38), 0 12px 26px rgba(23, 33, 28, 0.16);
}

/* Stats band: the four numbers were spread the full width of the page, so
   they read as four separate things rather than one row. The row is pulled
   in towards the middle and the dividers are actually visible. */
.stats-inner { width: min(100% - 40px, 1020px); }
.stat { border-right: 1px solid rgba(255, 255, 255, 0.22); }
:root[data-theme="light"] .stat { border-right-color: rgba(23, 33, 28, 0.22); }
.stat:last-child { border-right: 0; }

/* 96px of padding under the last card, then the footer's own margin, left a
   dead band at the bottom of every page. The footer already carries its own
   space. */
.site-main { padding-bottom: 44px; }
.optional-section { margin-bottom: 0; }
@media (max-width: 760px) { .site-main { padding-bottom: 32px; } }

/* The copy column itself was capped at 34ch, which is what actually held the
   title to 343px inside a 904px column. */
.mh-copy { max-width: none; }
.mh-title { max-width: 20ch; }
.mh-copy .lede { max-width: 52ch; }


/* ===================================================== display face =====
   The serif was whatever Iowan Old Style resolved to on the machine, which
   is why the numbers read soft and why the type drifted between sections.
   Playfair Display is the face in the reference Aryan sent: high contrast,
   fine hairlines, proper Didone numerals. Redefining the token moves every
   serif heading onto it at once, so nothing is left on the old face. */
:root, :root[data-theme="light"] {
  --serif: "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif;
}
.stat strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.9vw, 2.3rem);
  letter-spacing: -0.005em;
}

/* One 260ms crossfade of the whole page, rather than every element easing
   its own colour on its own clock. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: normal;
}

/* The resume and start buttons were snapping. Slower and softer, as asked. */
.mh-start, .shp-cta, .btn {
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mh-start:hover, .shp-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); }
.mh-start:active, .shp-cta:active { transform: translateY(0); transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .mh-start:hover, .shp-cta:hover { transform: none; }
}

/* ------------------------------------------------- click to play/pause
   Playback is a cross-origin iframe, so clicks on the picture never reach
   us. A transparent layer over the frame catches them; it sits under the
   control bar and the cover so neither is blocked. */
.video-clickcatch {
  position: absolute; inset: 0;
  appearance: none; background: none; border: 0; padding: 0;
  cursor: pointer; z-index: 2;
}
.video-clickcatch:focus { outline: none; }
.video-cover, .video-status, .video-controls, .caption-layer { z-index: 3; }
.video-pip-slot {
  width: 100%; border-radius: 14px;
  background: var(--code-bg);
  border: 1px solid var(--line);
}


/* `.header-nav a` (0,1,1) outranks `.auth-cta` (0,1,0), so the muted nav
   colour won and the login label rendered grey on brass, which read as a
   disabled button. */
.header-nav .auth-cta,
.header-auth .auth-cta { color: #14100a; font-weight: 800; }
.header-nav .auth-cta:hover,
.header-auth .auth-cta:hover { color: #14100a; }
:root[data-theme="light"] .header-nav .auth-cta,
:root[data-theme="light"] .header-auth .auth-cta { color: #f4f1e8; }

/* ------------------------------------------------- action flash
   A play, pause or caption toggle blooms once in the middle of the picture,
   the way a video player normally answers a tap, so the action is confirmed
   where the reader is looking. */
.video-flash {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  pointer-events: none; opacity: 0;
}
.video-flash .vf-mark {
  display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(8, 10, 9, 0.62);
  backdrop-filter: blur(3px);
  color: #fff;
}
.video-flash .vf-mark svg { width: 34px; height: 34px; fill: currentColor; }
.video-flash .vf-label {
  padding: 5px 12px; border-radius: 999px;
  background: rgba(8, 10, 9, 0.72);
  color: #fff; font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.video-flash.is-on { animation: vf-bloom 620ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes vf-bloom {
  0%   { opacity: 0; transform: scale(0.78); }
  22%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .video-flash.is-on { animation: none; opacity: 0; }
}

/* Captions were set small and tight to the bottom edge. Bigger, readable,
   and lifted clear of the control bar. */
.caption-layer { bottom: 74px; padding-inline: 6%; }
.caption-layer .cap-line, .caption-cue, .caption-layer > span {
  font-size: clamp(0.95rem, 1.7vw, 1.28rem) !important;
  line-height: 1.4;
  padding: 5px 12px;
  background: rgba(8, 10, 9, 0.78);
  border-radius: 6px;
}
@media (max-width: 760px) { .caption-layer { bottom: 62px; } }

/* ==========================================================================
   Motion
   The page had no motion of its own: everything arrived at once, fully
   formed, and nothing acknowledged a scroll or a click. What follows is one
   system rather than a set of effects. Three rules it keeps: nothing moves
   more than a few pixels, nothing takes longer than half a second, and
   anything that moves has a reason to.
   ========================================================================== */

/* Navigation crossfades between pages instead of a white flash and a jump.
   This is the browser's own transition, so it costs nothing at runtime. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }
::view-transition-new(root) { animation: vt-in 280ms cubic-bezier(0, 0, 0.2, 1) forwards; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } to { opacity: 1; } }

/* Sections rise into place as they are reached. The distance is small on
   purpose: this should register as the page settling, not as an entrance. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].is-in { will-change: auto; }

/* A hairline under the header showing how far through the page you are. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--scrolled, 0));
  background: linear-gradient(90deg, var(--brass), #d46a29);
  opacity: 0;
  transition: opacity 220ms ease;
}
.scroll-progress.is-on { opacity: 1; }

/* Cards answer the pointer with depth rather than a colour change. */
.flat-card, .module-card, .clip-card, .pl-row, .row {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 220ms ease, background 220ms ease;
}
.module-card:hover, .clip-card:hover { transform: translateY(-3px); }
.flat-card .fc-art, .module-card img, .clip-card img, .row img {
  transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.module-card:hover img, .clip-card:hover img, .row:hover img { transform: scale(1.035); }
.flat-card .fc-art { overflow: hidden; }

/* The counters run up when the band is reached, so the numbers are read
   rather than skipped. */
.stat strong { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scroll-progress { display: none; }
  .module-card:hover, .clip-card:hover { transform: none; }
  .module-card:hover img, .clip-card:hover img, .row:hover img { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   Measure
   Every container ran nearly edge to edge: .wrap-wide was 1320px inside a
   1440px window, which is 92% of the screen with a 20px gutter. Against the
   reference, where the content sits at about 70% with real margin either
   side, everything here read as stretched and oversized.

   This is one pass over the whole system: narrower containers, a wider
   gutter, a smaller root so every rem-based size comes down with it, and
   tighter vertical rhythm. Nothing is restyled, it is all the same design
   at the right size.
   ========================================================================== */

html { font-size: 15px; }
body { font-size: 0.98rem; }

.wrap { width: min(100% - 88px, 1020px); }
.wrap-wide { width: min(100% - 88px, 1100px); }
.wrap-reading { width: min(100% - 88px, 780px); }
.wrap-lesson { max-width: 1100px; }
.community-inner, .stats-inner { width: min(100% - 88px, 1100px); }
.start-modules { max-width: 1100px; }
.faq { max-width: 800px; }

/* Headings were set for a full-width page. */
.display { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.page-title { font-size: clamp(1.6rem, 2.9vw, 2.2rem); }
.lede { font-size: 0.98rem; max-width: 52ch; }
.watch-title { font-size: clamp(1.25rem, 2.2vw, 1.62rem); }
.faq-title { font-size: clamp(1.3rem, 2vw, 1.6rem); }

/* Vertical rhythm comes in with the width, or the page just gets taller. */
.site-main { padding-block: 40px 36px; }
.stat { padding: 20px 14px; }
.community-inner { padding: 18px 24px; }
.watch-desc { padding: 14px 16px; }
.faq-row summary { padding: 13px 2px; }
.module-head { padding-bottom: 26px; }

@media (max-width: 1040px) {
  .wrap, .wrap-wide, .wrap-reading,
  .community-inner, .stats-inner { width: min(100% - 44px, 1100px); }
}
@media (max-width: 760px) {
  html { font-size: 15px; }
  .wrap, .wrap-wide, .wrap-reading,
  .community-inner, .stats-inner { width: min(100% - 32px, 1100px); }
  .site-main { padding-block: 28px 28px; }
}

/* At the narrower measure the button column was taking a quarter of the
   card and pushing the chips onto three rows. */
@media (min-width: 900px) {
  .community-inner { grid-template-columns: auto minmax(0, 1fr) 200px; gap: 24px; }
}
.community-points li { padding: 4px 9px; font-size: 0.74rem; }
.community-copy h2 { font-size: 1.14rem; }
.community-copy p { font-size: 0.92rem; }

/* ==========================================================================
   Motion, second pass
   Aryan's note was that the site still reads as flat: nothing answers a
   pointer, nothing arrives, nothing acknowledges a click. This gives every
   surface a response, and makes the ones that already existed slower and
   deeper so they register instead of flicking past.
   ========================================================================== */

/* The scroll bar is gone. */
.scroll-progress { display: none !important; }

/* Pages slide rather than dissolve, so moving through the course reads as
   travelling forward rather than the screen being swapped. */
::view-transition-old(root) {
  animation: vt-slide-out 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
::view-transition-new(root) {
  animation: vt-slide-in 380ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes vt-slide-out { to { opacity: 0; transform: translateX(-22px); } }
@keyframes vt-slide-in { from { opacity: 0; transform: translateX(30px); } }

/* Sections arrive from below, further and slower than before. */
[data-reveal] {
  transform: translateY(26px) scale(0.994);
  transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-in { transform: none; }

/* The counters land with a beat instead of just stopping. */
.stat strong { display: inline-block; transition: transform 320ms cubic-bezier(0.34, 1.5, 0.64, 1); }
.stat strong.is-counted { animation: stat-land 460ms cubic-bezier(0.34, 1.5, 0.64, 1); }
@keyframes stat-land {
  0% { transform: translateY(4px) scale(0.94); }
  60% { transform: translateY(0) scale(1.06); }
  100% { transform: none; }
}

/* Nav links get a rule that draws in, and the current page keeps it. */
.nav-links a { position: relative; padding-bottom: 3px; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--brass-bright);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-here::after { transform: scaleX(1); background: var(--brass); }

/* Every button gives under the press. */
.btn, .wm-done, .ai-chip, .wd-open, .auth-cta, .mh-start, .shp-cta,
.note-step, .vc-btn, .rail-arrow, .theme-btn, .chapters-toggle {
  transition: transform 160ms cubic-bezier(0.34, 1.4, 0.64, 1),
              background 200ms ease, color 200ms ease, border-color 200ms ease,
              box-shadow 220ms ease;
}
.btn:active, .wm-done:active, .ai-chip:active, .wd-open:active,
.auth-cta:active, .mh-start:active, .shp-cta:active, .note-step:active,
.vc-btn:active, .rail-arrow:active, .theme-btn:active {
  transform: scale(0.955);
  transition-duration: 90ms;
}

/* Sun and moon turn into each other rather than cutting. */
.theme-btn svg { transition: transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 240ms ease; }
.theme-btn:hover svg { transform: rotate(28deg); }
:root[data-theme="light"] .theme-btn:hover svg { transform: rotate(-28deg); }

/* Rows and cards lift under the pointer. */
.pl-row, .row, .fn-card, .ma-card, .next-lesson, .mf-cell {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              background 240ms ease, border-color 240ms ease, box-shadow 300ms ease;
}
.pl-row:hover, .row:hover { transform: translateX(3px); }
.next-lesson:hover { transform: translateY(-2px); }

/* The player rises into place rather than appearing. */
.video-stage { animation: stage-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes stage-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Another 10% off the measure, as asked. */
.wrap { width: min(100% - 88px, 940px); }
.wrap-wide { width: min(100% - 88px, 1000px); }
.wrap-reading { width: min(100% - 88px, 720px); }
.wrap-lesson { max-width: 1000px; }
.community-inner, .stats-inner { width: min(100% - 88px, 1000px); }
.start-modules { max-width: 1000px; }
.faq { max-width: 740px; }

@media (prefers-reduced-motion: reduce) {
  .video-stage { animation: none; }
  .stat strong.is-counted { animation: none; }
  .nav-links a::after { transition: none; }
  .pl-row:hover, .row:hover, .next-lesson:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* The preview sits over the still and fades up, so the card does not jump
   when it starts. */
.hover-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 260ms ease;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.has-preview .hover-preview { opacity: 1; }
.row-shot, .pl-shot, .fc-art, .mh-shot, .clip-shot { position: relative; overflow: hidden; }

/* ===================================================== fixes pass ====== */

/* A theme change is not a navigation, so it crossfades rather than sliding
   the whole page sideways. */
:root.theme-swap::view-transition-old(root),
:root.theme-swap::view-transition-new(root) {
  animation-duration: 240ms;
  animation-name: vt-fade;
}
@keyframes vt-fade { from { opacity: 0; } to { opacity: 1; } }
:root.theme-swap::view-transition-old(root) { animation-direction: reverse; }

/* Closed chapters left an empty band with its own edge inside the panel. */
.chapters-body { overflow: hidden; }
.chapters-toggle[aria-expanded="false"] + .chapters-body {
  height: 0; padding: 0; margin: 0; border: 0; opacity: 0;
}
.chapters-toggle[aria-expanded="false"] { border-bottom: 0; margin-bottom: 0; }
.chapters:has(.chapters-toggle[aria-expanded="false"]) { padding-bottom: 0; }

/* The download button was wrapping its own label onto two lines. */
.dl-card .btn, .download-row .btn, a.btn[download] { white-space: nowrap; }

/* Borders read as invisible on both grounds. */
:root { --line: rgba(198, 163, 95, 0.30); --line-strong: rgba(198, 163, 95, 0.52); }
:root[data-theme="light"] { --line: rgba(23, 33, 28, 0.34); --line-strong: rgba(23, 33, 28, 0.62); }

/* The hero panel is lit: a slow rake of light crossing behind the mark. */
.shp-frame::before {
  background: linear-gradient(122deg, transparent 38%, rgba(233, 152, 96, 0.20) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: hero-rake 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hero-rake {
  0%   { background-position: 130% 0; opacity: 0.55; }
  50%  { background-position: -30% 0; opacity: 1; }
  100% { background-position: 130% 0; opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) { .shp-frame::before { animation: none; } }

/* Card art needs a frame for the preview to sit inside. */
.mc-cover, .clip-shot, .fc-art, .mh-shot { position: relative; overflow: hidden; }

/* Pages rise and settle rather than sliding sideways: opening a lesson
   should feel like moving into it, not like the screen being swapped. */
::view-transition-old(root) {
  animation: vt-sink 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
  animation: vt-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes vt-sink { to { opacity: 0; transform: translateY(-10px) scale(0.985); } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(26px) scale(0.985); } }

/* The Discord card sat hard against the band above it. */
.community { margin-top: 34px; }

/* Join the community draws in on hover and folds on the press, so the
   click is acknowledged before the tab opens. */
.community-cta { position: relative; overflow: hidden; }
.community-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.community-cta:hover::before { transform: translateX(120%); }
.community-cta.is-going {
  animation: cta-fold 420ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
@keyframes cta-fold {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.9, 0.86); }
  100% { transform: scale(0.72, 0.8); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .community-cta::before, .community-cta.is-going { animation: none; transition: none; }
}

/* The notes box was a fixed tall block sitting against a short panel, so
   the rail ran far past everything beside it. */
.ws-notes textarea, [data-lesson-note], .note-input {
  min-height: 0;
  height: 150px;
  resize: vertical;
  font-size: 0.9rem;
}
.ws-notes { padding-top: 0; }

/* The press was long enough to feel like waiting. */
.community-cta.is-going { animation-duration: 220ms; }

/* ==========================================================================
   Depth and life
   ========================================================================== */

/* Cards grow and cast rather than just shifting, the way a physical card
   lifts off a surface. Scale is small; the shadow does the work. */
.module-card, .clip-card, .flat-card, .fn-card, .ma-card, .notes-grid > * {
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 260ms ease;
}
.module-card:hover, .clip-card:hover, .fn-card:hover, .notes-grid > *:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  border-color: var(--line-strong);
}
:root[data-theme="light"] .module-card:hover,
:root[data-theme="light"] .clip-card:hover,
:root[data-theme="light"] .fn-card:hover,
:root[data-theme="light"] .notes-grid > *:hover {
  box-shadow: 0 20px 44px rgba(23, 33, 28, 0.18);
}

/* The mark answers the pointer too. */
.brand img {
  transition: transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.brand:hover img {
  transform: scale(1.09) rotate(-2deg);
  box-shadow: 0 10px 26px rgba(212, 106, 41, 0.4);
}

/* A slow weave of lines behind the page. Very low contrast on purpose: it
   should register as the surface having depth, never as a pattern you look
   at. Two layers drifting at different speeds so it never repeats visibly. */
.site-main { position: relative; }
.site-main::before {
  content: "";
  position: fixed; inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(64deg, transparent 0 118px,
      color-mix(in srgb, var(--brass) 8%, transparent) 118px 119px, transparent 119px 240px),
    repeating-linear-gradient(-52deg, transparent 0 164px,
      color-mix(in srgb, var(--forest-2) 12%, transparent) 164px 165px, transparent 165px 330px);
  opacity: 0.5;
  animation: weave 48s linear infinite;
}
:root[data-theme="light"] .site-main::before { opacity: 0.32; }
@keyframes weave {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-46px, 30px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-main::before { animation: none; }
  .module-card:hover, .clip-card:hover, .fn-card:hover, .notes-grid > *:hover,
  .brand:hover img { transform: none; }
}

/* ------------------------------------------------- your next action
   The copy took the full width, so the buttons wrapped underneath and the
   right half of the panel sat empty. The two controls belong at the top
   right, level with the label, and the box closes up around them. */
.start-next {
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px;
}
.start-next > div:first-child { flex: 1 1 auto; min-width: 0; }
.start-next p { max-width: 62ch; font-size: 0.92rem; }
.start-next h2 { font-size: 1.14rem; }
.na-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.na-actions .btn { white-space: nowrap; }

@media (max-width: 760px) {
  .start-next { flex-direction: column; align-items: stretch; }
  .na-actions { margin-top: 4px; }
}

/* The row still wrapped, which put the buttons on their own line at the
   left with the panel's right half empty. */
@media (min-width: 761px) {
  .start-next { flex-wrap: nowrap; }
  .start-next > div:first-child { flex: 1 1 auto; min-width: 0; }
  .na-actions { align-self: flex-start; }
}

/* ==========================================================================
   Mobile
   The whole layout was built for the desktop column and then squeezed. Every
   two-column row here keeps its shape on a phone: side by side, but stacking
   when there is not room, so nothing ends up in a 170px gutter with one word
   per line. Everything below applies only under 760px.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- header: sections behind one control, on the right --- */
  .header-inner { flex-wrap: nowrap; gap: 10px; min-height: 56px; }
  .brand { order: 1; margin-right: auto; }
  .nav-tools { order: 3; gap: 10px; }
  .nav-links {
    order: 2;
    position: fixed;
    top: 56px; right: 0;
    width: min(78vw, 300px);
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    background: var(--panel);
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 14px;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.44);
    transform: translateX(102%);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
    z-index: 70;
  }
  .site-header.is-open .nav-links { transform: translateX(0); }
  .nav-links a {
    padding: 13px 18px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { display: none; }
  .nav-links a.is-here { color: var(--brass); background: var(--panel-2); }

  .nav-menu {
    order: 4;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    padding: 0; border: 1px solid var(--line); border-radius: 9px;
    background: none; color: var(--text); cursor: pointer;
  }
  .nav-menu span {
    display: block; width: 4px; height: 4px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  }
  .site-header.is-open .nav-menu { border-color: var(--brass); color: var(--brass); }

  /* --- any row of copy next to a control stacks --- */
  .dl-card, .start-next, .community-inner, .resume, .mh-panel-row,
  .next-action, .lesson-start-head, .notes-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .dl-card { display: flex; padding: 16px; }
  .dl-card > div:first-child { min-width: 0; }
  .dl-card .btn { width: 100%; text-align: center; }
  .dl-card p, .dl-card strong { max-width: none; }

  .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 16px 10px; }
  .stat strong { font-size: 1.5rem; }
  .stat span { font-size: 0.74rem; }

  /* --- the community card --- */
  .community-inner { display: grid; grid-template-columns: minmax(0, 1fr); text-align: left; }
  .community-lockup { justify-content: flex-start; }
  .community-points { display: flex; flex-wrap: wrap; gap: 7px; }
  .community-points li { flex: 1 1 auto; text-align: center; }
  .community-cta { width: 100%; text-align: center; justify-self: stretch; }

  /* --- the lesson page --- */
  .lesson-shell { display: block !important; }
  .watch-side { margin-top: 20px; }
  .watch-side .playlist-vert { max-height: none; }
  .watch-meta { flex-wrap: wrap; gap: 10px; }
  .wm-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .wm-actions .ai-chip, .wm-actions .wm-done { flex: 1 1 auto; text-align: center; }
  .chapter-list { grid-template-columns: minmax(0, 1fr) !important; }
  .video-controls { padding-inline: 6px; }
  .vc-bar { gap: 6px; }
  .vc-time { font-size: 0.66rem; }
  .vc-btn { width: 30px; height: 30px; }
  .vc-chapter-now { display: none; }

  /* --- module page --- */
  .module-head { display: block; }
  .mh-panel { margin-top: 18px; }
  .module-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-cell { padding: 14px 10px; }
  .module-body { display: block; }
  .module-body > aside { margin-top: 20px; }

  /* --- breakdown library --- */
  .notes-side { margin-top: 20px; }
  .note-nav { flex-direction: column; align-items: stretch; gap: 10px; }
  .note-steps { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .note-step { width: 100%; }

  /* --- typography and rhythm --- */
  .display { font-size: clamp(1.65rem, 7vw, 2.1rem); }
  .page-title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .lede { font-size: 0.95rem; }
  .wrap, .wrap-wide, .wrap-reading,
  .community-inner, .stats-inner { width: min(100% - 28px, 1000px); }

  /* Long unbroken strings never push the page sideways. */
  .dl-card p, .dl-card strong, .fname, .lesson-body code { overflow-wrap: anywhere; }
}

/* The menu control only exists on a phone. This has to sit above the
   media query that shows it, or it wins on order and hides it again. */
@media (min-width: 761px) { .nav-menu { display: none !important; } }

/* The closed menu panel is parked off the right edge, and a translated
   fixed element still widens the page. Hide it outright until it opens. */
@media (max-width: 760px) {
  .nav-links {
    visibility: hidden;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 320ms;
  }
  .site-header.is-open .nav-links {
    visibility: visible;
    pointer-events: auto;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
}
html { overflow-x: clip; }

/* ==========================================================================
   Mobile, second pass
   The panel was a small dropdown hanging off the header. It is a full
   height drawer from the left now, with sign in inside it, and everything
   on a phone comes down another notch in size.
   ========================================================================== */

@media (max-width: 760px) {

  html { font-size: 14px; }

  .site-header { position: sticky; }
  .header-inner { min-height: 50px; padding-block: 7px; }
  .brand { font-size: 0.68rem; letter-spacing: 0.14em; }
  .brand img { width: 26px; height: 26px; }

  /* --- the drawer --- */
  .nav-links {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: auto;
    width: min(82vw, 320px);
    height: 100dvh;
    padding: 18px 0 20px;
    border-left: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--panel);
    box-shadow: 22px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(-102%);
    overflow-y: auto;
  }
  .site-header.is-open .nav-links { transform: translateX(0); }
  .nav-links a { padding: 15px 20px; font-size: 0.74rem; }

  /* Sign in belongs with the sections, not stranded in the bar. */
  .nav-links .header-auth {
    display: block;
    margin: 16px 20px 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .nav-links .header-auth .auth-cta {
    display: block; width: 100%; text-align: center; padding: 11px 16px;
  }

  /* A scrim, so the page behind reads as inactive. */
  .nav-scrim {
    position: fixed; inset: 0;
    background: rgba(4, 8, 6, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 280ms ease;
    z-index: 65;
  }
  .site-header.is-open ~ .nav-scrim,
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  /* --- everything a notch tighter --- */
  .site-main { padding-block: 22px 22px; }
  .wrap, .wrap-wide, .wrap-reading,
  .community-inner, .stats-inner { width: min(100% - 24px, 1000px); }

  .display { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.1; }
  .page-title { font-size: clamp(1.3rem, 5.6vw, 1.65rem); }
  .lede { font-size: 0.9rem; }
  .watch-title { font-size: 1.1rem; }

  .community-inner { padding: 16px 16px 18px; gap: 12px; }
  .community-copy h2 { font-size: 1.02rem; }
  .community-copy p { font-size: 0.86rem; }
  .community-points { gap: 6px; }
  .community-points li { font-size: 0.72rem; padding: 6px 9px; }
  .community-cta { padding: 11px 16px; font-size: 0.82rem; }
  .community-lockup img, .community-logo { width: 34px; height: 34px; }

  .stat { padding: 13px 8px; }
  .stat strong { font-size: 1.32rem; }
  .stat span { font-size: 0.7rem; }

  .flat-card, .module-card, .clip-card { padding: 12px; }
  .fc-title, .mc-title { font-size: 0.96rem; }
  .fc-result, .mc-desc { font-size: 0.82rem; }

  .watch-desc { padding: 12px 13px; }
  .watch-desc .wd-prose p { font-size: 0.87rem; }
  .chapters-toggle { padding: 11px 13px; }
  .chapter { padding: 8px 9px; }
  .chapter-title { font-size: 0.82rem; }
  .chapter-time { font-size: 0.7rem; }

  .btn, .ai-chip, .wm-done { padding: 9px 14px; font-size: 0.82rem; }
  .site-footer { padding-block: 22px; }
  .footer-grid { gap: 18px; }
}

/* .site-header has z-index 40, which creates a stacking context, so the
   drawer inside it could never rise above a scrim at 65 no matter what
   z-index it carried. Lift the header itself while the drawer is open. */
@media (max-width: 760px) {
  .site-header.is-open { z-index: 80; }
  .nav-scrim { z-index: 70; }
}

/* ==========================================================================
   Mobile, third pass
   Opens from the right, and sized like a phone app rather than a desktop
   page made narrow. Reference points: YouTube and Instagram run 12 to 14px
   body text, 36 to 40px controls and 12 to 16px gutters. That is the scale
   here now.
   ========================================================================== */

@media (max-width: 760px) {

  html { font-size: 13px; }

  /* --- the drawer comes from the right --- */
  .nav-links {
    left: auto; right: 0;
    width: min(76vw, 290px);
    border-right: 0;
    border-left: 1px solid var(--line);
    box-shadow: -22px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(102%);
    padding: 14px 0 16px;
  }
  .site-header.is-open .nav-links { transform: translateX(0); }
  .nav-links a { padding: 13px 17px; font-size: 0.72rem; }
  .nav-links .header-auth { margin: 12px 17px 0; padding-top: 12px; }
  .nav-links .header-auth .auth-cta { padding: 10px 14px; font-size: 0.72rem; }

  /* --- app-scale controls --- */
  .btn, .ai-chip, .wm-done, .auth-cta, .note-step, .wd-open, .mh-start, .shp-cta {
    padding: 10px 14px;
    font-size: 0.82rem;
    border-radius: 9px;
    min-height: 38px;
  }
  .btn-lg { padding: 11px 16px; font-size: 0.86rem; min-height: 42px; }
  .nav-menu { width: 32px; height: 32px; }
  .theme-btn { width: 32px; height: 32px; }

  /* --- gutters and rhythm --- */
  .wrap, .wrap-wide, .wrap-reading,
  .community-inner, .stats-inner { width: min(100% - 20px, 1000px); }
  .site-main { padding-block: 16px 18px; }
  .site-header .header-inner { min-height: 46px; padding-block: 5px; }

  /* --- cards --- */
  .flat-card, .module-card, .clip-card, .fn-card, .dl-card,
  .community-inner, .watch-desc, .chapters, .ma-card, .start-next, .next-action {
    border-radius: 11px;
  }
  .module-card, .clip-card, .fn-card { padding: 10px; }
  .dl-card { padding: 13px; }
  .community-inner { padding: 13px; gap: 10px; }
  .start-next, .next-action { padding: 14px; }

  /* --- type --- */
  .display { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .page-title { font-size: clamp(1.2rem, 5.2vw, 1.45rem); }
  .lede { font-size: 0.88rem; }
  .watch-title { font-size: 1.02rem; }
  .mc-title, .fc-title, .fn-title { font-size: 0.9rem; }
  .mc-desc, .fc-result { font-size: 0.79rem; }
  .community-copy h2 { font-size: 0.96rem; }
  .community-copy p { font-size: 0.82rem; }
  .community-points li { font-size: 0.7rem; padding: 5px 8px; }
  .section-label, .kicker { font-size: 0.6rem; }

  /* --- the stats band as a compact 2x2 --- */
  .stat { padding: 11px 8px; gap: 2px; }
  .stat strong { font-size: 1.2rem; }
  .stat span { font-size: 0.66rem; }

  /* --- lists --- */
  .row, .pl-row { padding: 8px; gap: 10px; }
  .row img, .pl-row img { width: 92px; }
  .chapter { padding: 7px 8px; }
  .chapter-title { font-size: 0.78rem; }
  .faq-row summary { padding: 11px 2px; font-size: 0.88rem; }
  .footer-col a, .footer-col span { font-size: 0.82rem; }
}

/* ==========================================================================
   Mobile scale, calibrated
   The last pass overshot: measured on device it produced 9px chips and
   10.7px button labels, smaller than anything a real app ships. YouTube and
   Instagram sit at 14px body, 12 to 13px secondary, 14px controls around
   42px tall, 16px gutters. These are set in pixels rather than rem so the
   result is exactly that and cannot drift with the root size.
   ========================================================================== */

@media (max-width: 760px) {
  html { font-size: 14px; }

  .wrap, .wrap-wide, .wrap-reading,
  .community-inner, .stats-inner { width: min(100% - 32px, 1000px); }

  /* Controls */
  .btn, .ai-chip, .wm-done, .auth-cta, .note-step, .wd-open,
  .mh-start, .shp-cta, .community-cta {
    font-size: 14px;
    min-height: 42px;
    padding: 11px 16px;
    border-radius: 10px;
  }
  .btn-lg { font-size: 15px; min-height: 46px; }
  .nav-links a { font-size: 12px; padding: 14px 18px; }
  .nav-links .header-auth .auth-cta { font-size: 13px; }

  /* Type */
  .display { font-size: 25px; line-height: 1.16; }
  .page-title { font-size: 21px; }
  .lede { font-size: 14px; line-height: 1.55; }
  .watch-title { font-size: 17px; }
  .community-copy h2 { font-size: 16px; }
  .community-copy p { font-size: 13px; line-height: 1.5; }
  .community-points li { font-size: 12px; padding: 8px 11px; }
  .mc-title, .fc-title, .fn-title { font-size: 15px; }
  .mc-desc, .fc-result, .fn-teaser { font-size: 12.5px; }
  .section-label, .kicker { font-size: 10px; }
  .chapter-title { font-size: 13px; }
  .chapter-time { font-size: 11px; }
  .faq-row summary { font-size: 15px; padding: 14px 2px; }
  .footer-col a, .footer-col span { font-size: 13px; }
  .row-title, .pl-title { font-size: 14px; }

  /* Stats */
  .stat { padding: 14px 10px; }
  .stat strong { font-size: 21px; }
  .stat span { font-size: 11px; }

  /* Cards */
  .module-card, .clip-card, .fn-card { padding: 12px; }
  .community-inner { padding: 16px; gap: 12px; }
  .dl-card { padding: 16px; }
  .start-next, .next-action { padding: 16px; }
  .watch-desc { padding: 14px; }
  .watch-desc .wd-prose p { font-size: 13.5px; line-height: 1.6; }

  .site-main { padding-block: 18px 20px; }
  .nav-menu, .theme-btn { width: 36px; height: 36px; }
  .site-header .header-inner { min-height: 52px; }
}

/* backdrop-filter on .site-header creates a containing block, so a fixed
   child resolves its top against the header rather than the viewport. The
   drawer was landing 618px above the screen. Dropping the filter on a phone
   restores real viewport positioning. */
@media (max-width: 760px) {
  .site-header { backdrop-filter: none; background: var(--ink); }
}

/* The drawer is parented to the body on a phone, so its open state comes
   from its own class rather than from the header it no longer sits in. */
@media (max-width: 760px) {
  .nav-links.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}

/* Reparenting the drawer took it out of `.header-nav`, so the rules that
   styled its links by that ancestor stopped matching. Stated directly. */
@media (max-width: 760px) {
  .nav-links a {
    color: var(--muted);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
  }
  .nav-links a.is-here { color: var(--brass); background: var(--panel-2); }
  .nav-links a:hover { color: var(--brass-bright); }
  .nav-links .auth-cta {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
  }
}

/* The buttons were pinned to the top of a taller copy block, which left
   empty card under them. Centred against the copy instead. */
@media (min-width: 761px) {
  .start-next, .next-action { align-items: center; }
  .na-actions { align-self: center; margin-top: 0; }
}

/* ==========================================================================
   Desktop scale
   The measure was pulled in to 1000px and the root to 15px, which left a
   wide empty margin on both sides and type that reads small on a laptop.
   Wider and larger: the content uses the screen it is given.
   ========================================================================== */

@media (min-width: 761px) {
  html { font-size: 16px; }

  .wrap { width: min(100% - 64px, 1180px); }
  .wrap-wide { width: min(100% - 64px, 1320px); }
  .wrap-reading { width: min(100% - 64px, 840px); }
  .wrap-lesson { max-width: 1320px; }
  .community-inner, .stats-inner { width: min(100% - 64px, 1320px); }
  .start-modules { max-width: 1320px; }
  .faq { max-width: 900px; }

  .display { font-size: clamp(2.1rem, 3.6vw, 2.9rem); }
  .page-title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .lede { font-size: 1.05rem; max-width: 56ch; }
  .watch-title { font-size: clamp(1.35rem, 2vw, 1.7rem); }
  .stat strong { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
  .stat span { font-size: 0.9rem; }
  .community-copy h2 { font-size: 1.3rem; }
  .community-copy p { font-size: 1rem; }
  .community-points li { font-size: 0.85rem; padding: 6px 12px; }
  .mc-title, .fc-title, .fn-title { font-size: 1.08rem; }
  .mc-desc, .fc-result { font-size: 0.94rem; }
  .faq-row summary { font-size: 1.06rem; padding: 17px 2px; }
  .watch-desc .wd-prose p { font-size: 1rem; line-height: 1.72; }
  .chapter-title { font-size: 0.95rem; }
  .site-main { padding-block: 44px 40px; }

  /* YouTube proportions: the player takes the room, the rail is a rail. */
  .watch { grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; }
  .lesson-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }

  /* The playlist scrolls in place rather than running the page long. */
  .watch-side .playlist-vert {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Chapters open and close; closed is the default, and it sits under the
   description now, the way a video page reads: picture, then what it is,
   then how to move around inside it. */
.chapters { margin-top: 18px; }

/* ------------------------------------------------- breakdown sections
   Eighteen cards in one grid gave no sense of where you were. The library
   is grouped by topic now, each with its own progress, the same shape the
   course modules use. */
.notes-section { margin-bottom: 34px; }
.ns-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.ns-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass);
}
.ns-meter { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.ns-bar {
  display: block; width: 86px; height: 3px; border-radius: 2px;
  background: var(--panel-2); overflow: hidden;
}
.ns-bar > span {
  display: block; height: 100%; width: 0;
  background: var(--brass);
  transition: width 420ms var(--ease-out);
}
.ns-count {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.06em; color: var(--muted);
}
.ns-meter.is-done .ns-bar > span { background: var(--ok); }
@media (max-width: 760px) {
  .ns-head { margin-bottom: 10px; }
  .ns-bar { width: 62px; }
  .notes-section { margin-bottom: 24px; }
}

/* ==========================================================================
   Notes page: watch polish (2026-09)
   A way back to the grid, steps that say where they go, and browse cards
   that carry their state: category in quiet mono, a brass hairline for a
   clip left mid-way, a dimmed still for one already seen.
   ========================================================================== */

/* The way out of the player, in the same register as the files link. */
.note-back {
  display: inline-block; margin: 0 0 14px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.84rem; color: var(--muted);
  transition: color var(--dur-hover) ease;
}
.note-back:hover { color: var(--brass-bright); }

/* Steps carry their destination: a mono micro-label over the clip title. */
.note-step {
  display: inline-flex; flex-direction: column; gap: 2px;
  max-width: 250px; text-align: left;
}
.note-step[data-note-next] { align-items: flex-end; text-align: right; }
.step-dir {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.step-dest {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted);
  transition: color var(--dur-hover) ease;
}
.note-step:hover .step-dest { color: var(--text); }
/* Narrow screens fall back to the short direction labels alone. */
@media (max-width: 700px) {
  .note-step { max-width: none; }
  .step-dest { display: none; }
}

/* The category label takes the ns-title register, one step fainter. */
.clip-cat {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}

/* Watched: the still settles back and lets the brass check carry the state. */
.clip-card .clip-thumb img { transition: filter var(--dur-hover) ease; }
.clip-card.is-done .clip-thumb img { filter: saturate(0.5) brightness(0.8); }

/* Resume: a hairline of brass under the still, as wide as the watched share. */
.clip-prog {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: var(--p, 0); height: 3px;
  background: var(--brass);
}

/* ==========================================================================
   Compaction
   The last pass sized everything up together. The copy is what needed to
   come back down; the pictures did not. Text, padding and rhythm tighten
   here while thumbnails and card art keep their size.
   ========================================================================== */

@media (min-width: 761px) {
  .site-main { padding-block: 32px 30px; }

  .display { font-size: clamp(1.85rem, 3vw, 2.4rem); }
  .page-title { font-size: clamp(1.5rem, 2.5vw, 1.95rem); }
  .lede { font-size: 0.98rem; max-width: 58ch; }
  .lede-wide { max-width: 70ch; }
  .watch-title { font-size: clamp(1.2rem, 1.7vw, 1.45rem); }
  .stat strong { font-size: clamp(1.6rem, 2.2vw, 2rem); }
  .stat span { font-size: 0.82rem; }
  .stat { padding: 18px 14px; }
  .community-copy h2 { font-size: 1.14rem; }
  .community-copy p { font-size: 0.92rem; }
  .community-inner { padding: 16px 22px; }
  .mc-title, .fc-title, .fn-title { font-size: 1rem; }
  .mc-desc, .fc-result { font-size: 0.88rem; }
  .faq-row summary { font-size: 0.98rem; padding: 14px 2px; }
  .watch-desc .wd-prose p { font-size: 0.94rem; line-height: 1.66; }
  .clip-title { font-size: 0.95rem; }
  .clip-cat { font-size: 0.78rem; }

  /* Card chrome tightens; the picture inside does not. */
  .module-card, .clip-card { padding: 10px; }
  .mc-body, .clip-text { padding: 12px 6px 6px; }
  .module-grid, .notes-grid { gap: 18px; }
  .start-next, .next-action { padding: 16px 20px; }
  .watch-desc { padding: 14px 16px; }
}

/* ------------------------------------------------- chronology
   The position markers were set so small they read as noise. A number is
   the fastest way to answer "where do I start", so it is stated plainly. */
.mc-cover-num {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brass-bright);
  background: rgba(8, 12, 10, 0.72);
  padding: 3px 9px;
  border-radius: 7px;
  backdrop-filter: blur(3px);
}
:root[data-theme="light"] .mc-cover-num {
  background: rgba(23, 33, 28, 0.78);
  color: #f4f1e8;
}

/* Chapters are numbered, so the order reads without counting. */
.chapter { display: grid; grid-template-columns: 1.6rem 3.2rem minmax(0, 1fr); align-items: baseline; gap: 10px; }
.chapter-n {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--faint);
  text-align: right;
}
.chapter.is-on .chapter-n { color: #d46a29; }
@media (max-width: 760px) {
  .chapter { grid-template-columns: 1.3rem 2.8rem minmax(0, 1fr); gap: 8px; }
}

/* The breakdown page opened on a tall empty run before the first section. */
[data-notes-page] .masthead-center { padding: 26px 0 20px; }
[data-notes-page] .notes-browse { margin-top: 4px; }

/* The rail ran out of content long before the page did, leaving a tall
   empty column beside the description. Sticking it means it stays with you
   instead, which is what the space was for. */
@media (min-width: 1080px) {
  .watch-side {
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
  }
  .watch-side::-webkit-scrollbar { width: 7px; }
  .watch-side::-webkit-scrollbar-thumb { background: var(--raise); border-radius: 4px; }
  /* The playlist no longer needs its own scroller inside a scrolling rail. */
  .watch-side .playlist-vert { max-height: none; overflow: visible; }
}

/* ==========================================================================
   Module rail: folded carousel + hover colour wipe
   Two references drove this. The wallet carousel, where the cards either side
   of centre fold back in 3D instead of sitting flat, and the Abron Studio
   cards, where a colour sweeps across on hover. Niraj wanted both combined.
   The sweep is burnt orange, picked out of the module ramp so it belongs to
   the palette the cards already use rather than arriving from outside it.
   ========================================================================== */

:root {
  --flare: #d07a42;
  --flare-deep: #a8532a;
  --flare-soft: rgba(208, 122, 66, 0.16);
}
:root[data-theme="light"] {
  --flare: #c26a33;
  --flare-deep: #96431e;
  --flare-soft: rgba(194, 106, 51, 0.14);
}

/* ---- the fold ---- */

.flat-viewport { perspective: 1700px; perspective-origin: 50% 45%; }
.flat-rail { transform-style: preserve-3d; }

.flat-card {
  transform-style: preserve-3d;
  transform-origin: center center;
  backface-visibility: hidden;
  transition:
    transform 520ms var(--ease-out),
    opacity 420ms ease,
    filter 420ms ease,
    border-color var(--dur-hover) ease,
    box-shadow 420ms ease;
}

/* Cards to the left and right of the lit one hinge away from the reader. The
   rotation is small on purpose: past about 18deg the type on the side cards
   stops being readable and it reads as a gimmick. */
.flat-rail .flat-card.is-side-left {
  transform: rotateY(15deg) scale(0.9) translateZ(-70px);
  opacity: 0.62; filter: saturate(0.8);
}
.flat-rail .flat-card.is-side-right {
  transform: rotateY(-15deg) scale(0.9) translateZ(-70px);
  opacity: 0.62; filter: saturate(0.8);
}
.flat-rail .flat-card.is-lit {
  transform: rotateY(0deg) scale(1.03) translateZ(40px);
  opacity: 1;
  border-color: var(--line-strong);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.75),
              0 0 0 1px color-mix(in srgb, var(--flare) 32%, transparent);
}
.flat-rail .flat-card.is-side-left:hover,
.flat-rail .flat-card.is-side-right:hover { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .flat-card, .flat-rail .flat-card.is-lit,
  .flat-rail .flat-card.is-side-left,
  .flat-rail .flat-card.is-side-right {
    transform: none; opacity: 1; transition: none;
  }
}

/* ---- the hover wipe ---- */

.flat-card { position: relative; overflow: hidden; isolation: isolate; }
.fc-wipe {
  position: absolute; z-index: 0; pointer-events: none;
  right: -30%; bottom: -55%;
  width: 210%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--flare) 94%, transparent) 0%,
              color-mix(in srgb, var(--flare-deep) 90%, transparent) 60%,
              color-mix(in srgb, var(--flare-deep) 78%, transparent) 100%);
  transform: scale(0);
  transform-origin: 62% 66%;
  transition: transform 620ms var(--ease-out);
}
.flat-card:hover .fc-wipe,
.flat-card:focus-visible .fc-wipe { transform: scale(1); }

/* Everything the wipe passes under has to stay legible once it arrives. */
.flat-card > *:not(.fc-wipe) { position: relative; z-index: 1; }
.flat-card:hover .fc-title,
.flat-card:hover .fc-result,
.flat-card:hover .fc-count,
.flat-card:hover .fc-kicker,
.flat-card:hover .fc-num { color: #fff8f2; transition: color 320ms ease; }
.flat-card:hover .fc-open { color: #ffffff; }
.flat-card:hover .fc-art { border-color: rgba(255, 255, 255, 0.28); }

/* One card per view below 700px, so there is nothing to fold against. Scaling
   the lit card there pushed it past the right edge of the phone viewport. */
@media (max-width: 699px) {
  .flat-viewport { perspective: none; }
  .flat-rail .flat-card.is-lit,
  .flat-rail .flat-card.is-side-left,
  .flat-rail .flat-card.is-side-right {
    transform: none; opacity: 1; filter: none;
  }
  .flat-rail .flat-card.is-lit { box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7); }
}

/* ------------------------------------------------- chapters, single file
   Two columns broke the reading order: your eye had to go right, back
   left, right again to follow 1 to 5, and a short list left a hole on one
   side. One column, in order, with the current chapter marked. */
.chapter-list { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
.chapter { padding: 9px 12px; border-radius: 8px; }
.chapter:not(:last-child) { border-bottom: 1px solid var(--line); }
.chapter-title { text-decoration: none; }
.chapter:hover .chapter-title { text-decoration: underline; }
.chapter.is-on { background: color-mix(in srgb, #d46a29 10%, transparent); }

/* The primary action belongs at the end of the block, not stranded left. */
.wd-links { display: flex; align-items: center; gap: 12px; }
.wd-open { margin-left: auto; }

/* ------------------------------------------------- hero
   The copy and the panel sat at opposite ends of a 1320px row with a wide
   trough between them, and the eyebrow was too small to act as the entry
   point it is meant to be. */
@media (min-width: 900px) {
  .start-hero, .sh-grid, .site-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
  }
  .sh-copy { max-width: 52ch; }
  .sh-preview { max-width: 520px; margin-left: auto; }
}
.start-page .kicker, .sh-copy .kicker {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--brass-bright);
}

/* ==========================================================================
   Hero back to full width, and a compact module rail
   The hero had grown a small logo panel on the right that shrank the mark to
   168px and pushed it off to one side. The original hero was a single full
   width column, so it is that again; the mark still sits in the header.
   ========================================================================== */

.start-hero-full { display: block; }
.start-hero-full .sh-copy { max-width: 860px; }
.start-hero-full .display { max-width: 15ch; }
.start-hero-full .lede { max-width: 60ch; }
.start-hero-full .sh-actions { margin-top: 28px; }
@media (min-width: 940px) {
  .start-page .start-hero.start-hero-full { grid-template-columns: none; display: block; }
}

/* ---- compact rail ---- */

.start-modules { padding-block: 8px 24px; }
.start-modules .sm-head { margin-bottom: 18px; }
.flat-rail .flat-card { padding: 14px; gap: 7px; }
.flat-rail .fc-art { margin-bottom: 2px; }
.flat-rail .fc-title { font-size: 1.12rem; line-height: 1.25; }
.flat-rail .fc-result {
  font-size: 0.85rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.flat-rail .fc-foot { margin-top: auto; padding-top: 8px; }
.flat-rail .fc-top { margin-bottom: 2px; }

/* ==========================================================================
   Lesson page
   ========================================================================== */

/* "Show more" and the instructions button were on separate rows, which left
   a band of empty card between them and another below. One row: the toggle
   at the left, the action at the right, and the block ends there. */
.lesson-page .wd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}
.lesson-page .wd-foot .wd-more { margin-top: 0; }
.lesson-page .wd-links { margin-top: 0; }
.lesson-page .watch-desc { padding-bottom: 14px; }

/* The rail used the operating system's scrollbar, which is a grey slab
   against a dark green page. Same width, brand colour, and it only shows
   itself when there is something to scroll. */
.lesson-page .watch-side {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brass) 46%, transparent) transparent;
}
.lesson-page .watch-side::-webkit-scrollbar { width: 6px; }
.lesson-page .watch-side::-webkit-scrollbar-track { background: transparent; }
.lesson-page .watch-side::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brass) 42%, transparent);
  border-radius: 999px;
}
.lesson-page .watch-side:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brass) 68%, transparent);
}
.lesson-page .watch-side::-webkit-scrollbar-thumb:active {
  background: var(--brass);
}
.lesson-page .playlist-vert::-webkit-scrollbar { width: 6px; }
.lesson-page .playlist-vert::-webkit-scrollbar-track { background: transparent; }
.lesson-page .playlist-vert::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brass) 42%, transparent);
  border-radius: 999px;
}

/* ==========================================================================
   Rail and next-action, settled
   Several passes have appended competing rules for these, so this block is the
   last word: exactly three cards, arrows clear of them, a tighter section, and
   a next-action strip that centres instead of stranding its buttons.
   ========================================================================== */

/* ---- exactly three, nothing peeping ---- */
.flat-viewport { overflow: hidden; padding: 6px 0 10px; }
.flat-rail { gap: 18px; }
.flat-rail .flat-card { flex: 0 0 calc((100% - 36px) / 3); padding: 13px; }
@media (max-width: 1039px) { .flat-rail .flat-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 699px)  { .flat-rail .flat-card { flex-basis: 100%; } }

/* The fold pushes the side cards back, which opened a sliver at each edge for
   the next card to show through. Fade the last few pixels instead of letting
   a fourth card appear. */
.flat-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px,
                      #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px,
              #000 calc(100% - 14px), transparent 100%);
}

/* ---- arrows clear of the cards ---- */
.rail-arrow { width: 42px; height: 42px; }
.rail-prev { left: -72px; }
.rail-next { right: -72px; }
@media (max-width: 1500px) { .rail-prev { left: -58px; } .rail-next { right: -58px; } }
@media (max-width: 1240px) { .rail-prev { left: -44px; } .rail-next { right: -44px; } }

/* ---- a tighter section ---- */
.start-modules { padding-block: 4px 16px; }
.start-modules .sm-head { margin-bottom: 14px; }
.flat-rail-wrap { margin-bottom: 22px; padding-bottom: 18px; }
.rail-dots { margin-top: 12px; }

/* ---- next action: centred, one line, buttons close ---- */
.next-action {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  max-width: 900px; margin: 30px auto 44px; padding: 22px 26px;
}
.next-action h2 { margin: 0; }
.next-action p:last-of-type,
.next-action p { max-width: none; margin: 0; }
.next-action .start-actions,
.next-action .na-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 4px;
}
@media (min-width: 700px) {
  .next-action, .optional-section { align-items: center; flex-direction: column; }
}

/* overflow:hidden does not clip 3D transformed descendants when the same
   element establishes the perspective, which is why the fourth and fifth cards
   were still reaching the screen edges. clip-path does clip them. The vertical
   inset is negative so the lit card keeps its lift and shadow. */
.flat-viewport {
  clip-path: inset(-60px 0 -60px 0);
  -webkit-mask-image: none;
  mask-image: none;
}

/* ==========================================================================
   Rail sized down, hero mark restored, divider before the questions
   ========================================================================== */

/* ---- the mark is back, and big enough to be the mark ---- */
.shp-frame { aspect-ratio: 16 / 10; }
.shp-frame img { width: 58%; max-width: 260px; border-radius: 22px; }

/* ---- a genuinely smaller rail ---- */
.start-modules { padding-block: 0 10px; }
.start-modules .sm-head { margin-bottom: 10px; }
.start-modules .sm-head h2 { margin: 0 0 2px; font-size: 1.5rem; }
.start-modules .sm-head p { margin: 0; font-size: 0.9rem; }

.flat-rail-wrap { margin-bottom: 8px; padding-bottom: 10px; }
.flat-viewport { padding: 4px 0 6px; }
.flat-rail { gap: 16px; }
.flat-rail .flat-card { flex: 0 0 calc((100% - 32px) / 3); padding: 11px; gap: 6px; }
@media (max-width: 1039px) { .flat-rail .flat-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 699px)  { .flat-rail .flat-card { flex-basis: 100%; } }

/* The art was driving the height. A shorter frame pulls the whole rail in. */
.flat-rail .fc-art { aspect-ratio: 16 / 8.2; overflow: hidden; }
.flat-rail .fc-art img { width: 100%; height: 100%; object-fit: cover; }
.flat-rail .fc-title { font-size: 1.02rem; line-height: 1.22; }
.flat-rail .fc-result { font-size: 0.8rem; line-height: 1.36; -webkit-line-clamp: 2; }
.flat-rail .fc-foot { padding-top: 6px; font-size: 0.66rem; }
.flat-rail .fc-top { margin-bottom: 0; }

/* ---- smaller, quieter arrows ---- */
.rail-arrow { width: 34px; height: 34px; }
.rail-arrow svg { width: 15px; height: 15px; }
.rail-prev { left: -50px; }
.rail-next { right: -50px; }
@media (max-width: 1500px) { .rail-prev { left: -40px; } .rail-next { right: -40px; } }
@media (max-width: 1240px) { .rail-prev { left: -30px; } .rail-next { right: -30px; } }

.rail-dots { margin-top: 8px; }
.rail-dot { transform: scale(0.85); }

/* ---- divider, and even air either side of it ---- */
.start-modules { position: relative; }
.faq {
  position: relative;
  margin-top: 40px; padding-top: 40px;
}
.faq::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--line);
}
.faq .faq-title { margin-top: 0; }

/* The mark was the thing Niraj missed on the home page, so it leads properly. */
.shp-frame { aspect-ratio: 16 / 11; }
.shp-frame img { width: 74%; max-width: 340px; border-radius: 26px; }

/* The mark is a square badge on its own black ground. Blowing it up to 74% of
   a 16/11 frame overflowed the frame and clipped the badge. Contain it, centre
   it, and let the frame be a quiet panel behind it rather than a second box. */
.shp-frame {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  padding: 26px;
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--flare) 12%, transparent), transparent 68%),
    var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.shp-frame img {
  width: auto; height: auto;
  max-width: 190px; max-height: 100%;
  object-fit: contain;
  border-radius: 22%;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
}

/* A 16/10 frame is shorter than a square badge, so the mark was still being
   clipped vertically. Let the panel take its height from the mark. */
.shp-frame { aspect-ratio: auto; padding: 30px; }
.shp-frame img { max-width: 180px; max-height: none; }

/* ==========================================================================
   Home page: hero, questions, and the lesson rail's scrollbar
   ========================================================================== */

/* The hero ran as 693px + 567px across the full 1320px wrap while the copy
   stopped at 514px and the panel at 242px, which left 564px of dead space
   between them. Measured, not guessed. The row is capped and the panel
   fills its own column, so the two halves sit together. */
@media (min-width: 900px) {
  .start-hero {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
    max-width: 1120px;
    margin-inline: auto;
    align-items: center;
  }
  .start-hero .sh-copy { max-width: 100%; }
  .start-hero .sh-preview { width: 100%; max-width: 400px; margin-left: 0; }
}

/* Six questions in one column left half the page empty beside them. Three
   and three, filling top to bottom in each column so the reading order is
   still 1 to 6. */
@media (min-width: 900px) {
  .faq { max-width: 1120px; }
  .faq-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    border-top: 0;
  }
  .faq-row { border-top: 1px solid var(--line); border-bottom: 0; }
  .faq-answer { max-width: none; }
}

/* The rail's scrollbar. Styling it failed twice because `scrollbar-width`
   was set on the same element, and once that standard property is present
   Chrome ignores every ::-webkit-scrollbar rule. Rather than fight which
   rendering path the OS picks, the bar is hidden outright: the rail
   overflows by about 50px, it is sticky, and the wheel still scrolls it. */
.lesson-page .watch-side,
.lesson-page .watch-side .playlist-vert {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lesson-page .watch-side::-webkit-scrollbar,
.lesson-page .watch-side .playlist-vert::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ==========================================================================
   Footer
   The Course column carries six links, so it ran twice as tall as the three
   beside it and left a long empty run down the right of the footer. Three
   and three, filling top to bottom so the order is unchanged.
   ========================================================================== */

@media (min-width: 761px) {
  .footer-col[aria-label="Course"] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 9px;
    align-content: start;
  }
  /* The heading spans both halves rather than sitting in the first. */
  .footer-col[aria-label="Course"] .footer-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .footer-col[aria-label="Course"] { grid-template-rows: auto repeat(3, auto); }
}

/* "Deliver results." was dropping onto a line of its own under the mark.
   A wider measure keeps the sentence together. */
.footer-line { max-width: 40ch; text-wrap: pretty; }

/* "Real Client Breakdowns" was wrapping in its half-width column and
   throwing the two sides out of alignment. */
@media (min-width: 761px) {
  .footer-col[aria-label="Course"] a { white-space: nowrap; }
  .footer-col[aria-label="Course"] { column-gap: 28px; }
  .footer-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.9fr); }
}

/* The COURSE label sat above the first of two link columns rather than the
   pair, so it read as belonging only to the left half. Centred across both. */
@media (min-width: 761px) {
  .footer-col[aria-label="Course"] .footer-head { text-align: center; }
}

/* The Discord card had drifted back to a left-hung block of copy with the
   chips stacked under it. Centred and evenly distributed again: the marks,
   the copy and the button each hold their own share of the row, and the
   text and chips sit centred inside the middle column. */
@media (min-width: 900px) {
  .community-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
  }
  .community-copy { text-align: center; }
  .community-copy p { margin-inline: auto; max-width: 62ch; }
  .community-points { justify-content: center; }
  .community-lockup { justify-content: center; }
}
.community-points { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   Module card: crisp + halo
   Locked design. The card stays on its own paper at all times. The only
   thing that lights up is a soft warm halo behind the artwork, which is
   what "sharp object, soft feather" means: the object stays crisp and the
   light behind it is the thing that feathers.

   This replaces the orange wipe, which flooded the whole card and turned
   every line of text white on hover.
   ========================================================================== */

/* No flood. */
.flat-card .fc-wipe,
.module-card .fc-wipe { display: none !important; }
.flat-card:hover .fc-title,
.flat-card:hover .fc-result,
.flat-card:hover .fc-count,
.flat-card:hover .fc-kicker,
.flat-card:hover .fc-num,
.flat-card:hover .fc-open { color: inherit; }
.flat-card:hover .fc-num { color: var(--flare-deep, #b0492a); }
.flat-card:hover .fc-open { color: var(--brass-bright); }
.flat-card:hover .fc-art { border-color: var(--line); }

/* The halo is painted into the artwork itself by tools/halo_module_art.py,
   not drawn in CSS. A second glow here would double it, and a hover-only
   glow would mean the card is not "crisp + halo" until you touch it. */

/* A hairline above the meta, as in the reference. */
.flat-card .fc-foot {
  border-top: 1px solid var(--line);
  padding-top: 9px;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .flat-card .fc-art::before { transition: none; }
}

/* The card answers the pointer again. Removing the orange wipe took the
   hover with it, which left the cards inert. This lifts the card, deepens
   its shadow and pushes the artwork a touch closer, so the halo already in
   the picture appears to bloom. No fill, no colour change, no white text. */
.flat-card {
  transition: transform 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out),
              border-color 260ms ease;
}
.flat-card .fc-art img {
  transition: transform 620ms var(--ease-out), filter 420ms ease;
  will-change: transform;
}
.flat-card:hover,
.flat-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.55);
  border-color: var(--line-strong);
}
.flat-card:hover .fc-art img,
.flat-card:focus-visible .fc-art img {
  transform: scale(1.06);
  filter: saturate(1.06) brightness(1.03);
}
.flat-card .fc-open { transition: transform 320ms var(--ease-out), color 200ms ease; }
.flat-card:hover .fc-open { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .flat-card:hover, .flat-card:hover .fc-art img { transform: none; }
}

/* ==========================================================================
   The orange hover sweep is back, by Niraj's call
   A later pass disabled it with display:none, on the view that it flooded the
   card and whitened the text. He wants it, so it returns and the text is
   handled properly instead: everything the disc passes under flips to a warm
   white as it arrives, which is what stopped it being a legibility problem the
   first time.
   ========================================================================== */

.flat-card .fc-wipe,
.module-card .fc-wipe { display: block !important; }

.flat-card:hover .fc-title,
.flat-card:hover .fc-result,
.flat-card:hover .fc-count,
.flat-card:hover .fc-kicker,
.flat-card:hover .fc-num { color: #fff8f2 !important; transition: color 320ms ease; }
.flat-card:hover .fc-open { color: #ffffff !important; }
.flat-card:hover .fc-art { border-color: rgba(255, 255, 255, 0.28); }