:root {
  --ink: #171613;
  --ink-soft: #28251f;
  --paper: #f5f0e5;
  --paper-deep: #ded4c2;
  --line: rgba(245, 240, 229, 0.24);
  --muted: #b9b0a2;
  --accent: #ff4f19;
  --accent-pale: #ffcab2;
  --yellow: #f1cc57;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    var(--ink);
  background-size: 36px 36px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

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

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 50%;
  transform: translate(-50%, -140%);
  padding: 0.65rem 1rem;
  color: var(--ink);
  background: var(--yellow);
  font-weight: 800;
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

.section-shell { width: min(1160px, calc(100% - 3rem)); margin-inline: auto; }

.site-header {
  width: min(1280px, calc(100% - 3rem));
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.wordmark { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.04em; }
.wordmark em { color: var(--accent); font-family: var(--serif); font-weight: 400; }
.wordmark-mark { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; color: var(--ink); background: var(--accent); font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }
.header-note { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.06em; line-height: 1.35; text-align: right; text-transform: uppercase; }

.hero { padding: clamp(4.25rem, 10vw, 9rem) 0 4.5rem; }
.eyebrow, .aside-label, .position-label, .card-status, .lesson-count, .lesson-status, .next-action-label, .possible-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow { color: var(--accent-pale); }
.pulse-dot { display: inline-block; width: 0.52rem; height: 0.52rem; margin-right: 0.42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 79, 25, 0.55); animation: pulse 2.2s infinite; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 2rem; align-items: end; margin-top: 1.3rem; }
h1, h2, h3 { margin-top: 0; line-height: 0.98; letter-spacing: -0.055em; }
h1 { max-width: 850px; margin-bottom: 1.65rem; font-size: clamp(3.5rem, 9.4vw, 8.25rem); font-weight: 800; }
h1 span { color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.075em; }
.hero-copy { max-width: 560px; margin: 0; color: var(--paper-deep); font-size: clamp(1.05rem, 1.75vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.15rem 1.75rem; margin-top: 2.35rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 3rem; padding: 0.72rem 1.05rem; border: 1px solid transparent; font-weight: 800; letter-spacing: -0.015em; text-decoration: none; cursor: pointer; transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.button-accent { color: var(--ink); background: var(--accent); }
.button-accent:hover { background: #ff7546; }
.button-outline { color: var(--paper); border-color: rgba(245,240,229,.72); background: transparent; }
.button-outline:hover { color: var(--ink); background: var(--paper); }
.button-dark { color: var(--paper); background: var(--ink); }
.button-dark:hover { color: var(--ink); background: var(--yellow); }
.text-link { color: var(--paper); font-weight: 750; text-underline-offset: 0.25em; }
.text-link:hover { color: var(--yellow); }

.hero-aside { position: relative; min-height: 235px; padding: 1.2rem; overflow: hidden; color: var(--ink); background: var(--paper); }
.aside-label { color: #5a5145; }
.aside-number { margin: 0.4rem 0 -0.75rem; font-size: 8rem; font-weight: 850; letter-spacing: -0.11em; line-height: 1; }
.aside-status { position: relative; z-index: 1; margin: 0; font-weight: 800; line-height: 1.2; }
.aside-status span { color: #6c5d48; font-weight: 600; }
.stamp { position: absolute; right: 1rem; bottom: 1rem; display: grid; width: 3.5rem; aspect-ratio: 1; place-items: center; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-family: var(--mono); font-size: 0.62rem; font-weight: 800; line-height: 1.1; text-align: center; transform: rotate(-12deg); }
.hero-rule { height: 1px; margin-top: 4.5rem; overflow: hidden; background: var(--line); }
.hero-rule span { display: block; width: 24%; height: 100%; background: var(--accent); animation: line-travel 5s ease-in-out infinite alternate; }

.position-strip { color: var(--ink); background: var(--accent); }
.position-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 1.1rem 0; }
.position-grid p { margin: 0; font-weight: 650; line-height: 1.35; }
.position-label { display: block; margin-bottom: 0.2rem; color: rgba(23,22,19,.65); }

.now-section, .confidence-section, .practice-section, .next-section, .update-section { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.section-heading h2, .confidence-copy h2, .practice-intro h2, .next-callout h2, .update-section h2 { margin: 0.45rem 0 0; font-size: clamp(2.55rem, 5vw, 4.75rem); font-weight: 800; }

.now-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: 0; margin-top: 2.4rem; border-top: 1px solid var(--paper); border-bottom: 1px solid var(--line); }
.now-main { padding: 2rem 2rem 2.3rem 0; }
.card-status { color: var(--accent-pale); }
.lesson-number { display: block; margin-top: 0.8rem; color: var(--accent); font-size: clamp(4.5rem, 8vw, 7.25rem); font-weight: 850; letter-spacing: -0.1em; line-height: .83; }
.now-title { max-width: 650px; margin: 1.2rem 0 1rem; font-size: clamp(2rem, 4.3vw, 3.8rem); font-weight: 800; }
.now-summary { max-width: 620px; margin: 0; color: var(--paper-deep); font-size: 1.1rem; }
.reflection { max-width: 630px; margin: 2rem 0 0; padding-left: 1.1rem; border-left: 3px solid var(--accent); color: var(--accent-pale); font-family: var(--serif); font-size: 1.32rem; font-style: italic; line-height: 1.33; }
.now-side { display: flex; align-items: end; padding: 2rem; background: var(--ink-soft); }
.action-block { border-top: 1px solid rgba(245,240,229,.5); padding-top: 0.8rem; }
.next-action-label { color: var(--yellow); }
.next-action { margin: 0.55rem 0 0; font-size: 1.13rem; font-weight: 750; line-height: 1.3; }

.confidence-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 8vw, 7rem); color: var(--ink); background: var(--paper); }
.confidence-section::before, .confidence-section::after { content: ""; position: absolute; }
.confidence-copy { align-self: center; }
.confidence-copy .eyebrow { color: #926143; }
.confidence-copy h2 { color: var(--ink); }
.confidence-copy > p:last-child { max-width: 31ch; margin-bottom: 0; color: #625a4e; font-size: 1.05rem; }
.confidence-panel { align-self: center; padding: 1rem 0; }
.confidence-panel fieldset { margin: 0; padding: 0; border: 0; }
.confidence-options { display: grid; }
.confidence-choice { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; width: 100%; padding: 1rem 0; border: 0; border-bottom: 1px solid rgba(23,22,19,.2); color: var(--ink); background: transparent; font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -0.045em; text-align: left; cursor: pointer; transition: padding 160ms ease, color 160ms ease; }
.confidence-choice::after { content: "→"; color: transparent; }
.confidence-choice:hover, .confidence-choice.is-selected { padding-left: .75rem; color: var(--accent); }
.confidence-choice:hover::after, .confidence-choice.is-selected::after { color: var(--accent); }
.choice-index { color: #8c8377; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .08em; }
.confidence-message { min-height: 1.6rem; margin: 1.15rem 0 0; color: #625a4e; font-family: var(--mono); font-size: .74rem; }

.course-section { padding: clamp(5rem, 10vw, 9rem) 0; background: #26221c; }
.course-topline { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.filter-wrap { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: .65rem; }
.filter-label { color: var(--muted); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }
.filter-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-button { padding: .45rem .7rem; border: 1px solid rgba(245,240,229,.3); color: var(--paper); background: transparent; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.filter-button:hover, .filter-button.is-active { color: var(--ink); border-color: var(--yellow); background: var(--yellow); }
.filter-status { min-height: 1.5rem; margin: 1.5rem 0 0; color: var(--muted); font-family: var(--mono); font-size: .7rem; }
.course-flow-list { position: relative; margin-top: .5rem; }
.course-flow-list::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 1.45rem; width: 2px; background: repeating-linear-gradient(to bottom, var(--accent) 0 10px, transparent 10px 20px); animation: flow-dash 1.2s linear infinite; }
.lesson-card { position: relative; z-index: 1; display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); gap: 0; padding: 2rem 0; border-bottom: 1px solid rgba(245,240,229,.19); transition: background-color 160ms ease, transform 160ms ease; }
.lesson-card:hover, .lesson-card:focus { background: rgba(245,240,229,.05); transform: translateX(5px); }
.flow-rail { position: relative; }
.flow-stop { position: absolute; top: .3rem; left: .82rem; display: block; width: 1.3rem; aspect-ratio: 1; border: 3px solid var(--paper); border-radius: 50%; background: var(--ink); }
.status-practising .flow-stop { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(255,79,25,.15); }
.status-upcoming .flow-stop { border-color: var(--yellow); }
.lesson-content { max-width: 800px; padding-right: 2rem; }
.lesson-count { color: var(--accent-pale); }
.lesson-status { margin-top: .38rem; color: var(--yellow); }
.lesson-title { margin: .75rem 0; font-size: clamp(1.75rem, 3.3vw, 2.85rem); font-weight: 800; }
.lesson-summary { max-width: 680px; margin: 0; color: var(--paper-deep); font-size: 1.08rem; }
.lesson-reflection { margin: 1.15rem 0 0; color: var(--accent-pale); font-family: var(--serif); font-size: 1.13rem; font-style: italic; }
.lesson-action { margin: .9rem 0 0; font-weight: 700; }
.empty-state { max-width: 600px; margin: 2rem 0 0 5.8rem; padding: 1.25rem; border: 1px dashed rgba(245,240,229,.35); color: var(--paper-deep); }

.practice-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.practice-intro p:last-child { max-width: 36ch; color: var(--paper-deep); }
.practice-card { padding: clamp(1.4rem, 4vw, 2.4rem); color: var(--ink); background: var(--yellow); box-shadow: 10px 10px 0 var(--accent); }
.practice-prompt { display: block; max-width: 28ch; font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.45rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.practice-hint { margin: 1rem 0 0; color: #6e5820; font-family: var(--mono); font-size: .74rem; }
.practice-input { width: 100%; margin-top: 1.5rem; padding: .8rem; border: 2px solid var(--ink); border-radius: 0; color: var(--ink); background: rgba(245,240,229,.5); resize: vertical; }
.practice-input::placeholder { color: #766122; }
.practice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .8rem; }
.practice-note { flex: 1 1 180px; margin: 0; color: #625019; font-family: var(--mono); font-size: .67rem; line-height: 1.35; }
.practice-result { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 2px solid rgba(23,22,19,.5); }
.possible-label { color: #6a4d08; }
.possible-answer { margin: .35rem 0; font-family: var(--serif); font-size: 1.32rem; font-weight: 700; line-height: 1.25; }
.possible-note { margin: 0; font-size: .9rem; }

.next-section { padding-top: 0; }
.next-callout { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(245,240,229,.38); }
.next-callout .eyebrow { align-self: start; }
.next-lesson-number { color: var(--accent); font-size: clamp(4.4rem, 7.5vw, 6.5rem); font-weight: 850; letter-spacing: -0.12em; line-height: .75; }
.next-callout h2 { max-width: 540px; margin-bottom: .55rem; font-size: clamp(1.75rem, 3.4vw, 3rem); }
.next-callout p:last-child { max-width: 55ch; margin: 0; color: var(--paper-deep); }

.update-section { display: grid; grid-template-columns: 1.1fr .65fr; gap: 4rem; border-top: 1px solid var(--line); }
.update-section h2 { max-width: 630px; }
.update-section > p { align-self: end; margin: 0; color: var(--paper-deep); font-size: 1.04rem; }

.site-footer { color: var(--ink); background: var(--paper-deep); }
.footer-grid { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; font-family: var(--mono); font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.footer-grid p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes pulse { 70% { box-shadow: 0 0 0 .5rem rgba(255,79,25,0); } 100% { box-shadow: 0 0 0 0 rgba(255,79,25,0); } }
@keyframes line-travel { from { transform: translateX(-100%); } to { transform: translateX(440%); } }
@keyframes flow-dash { to { background-position-y: 20px; } }

@media (max-width: 780px) {
  .hero-grid, .confidence-section, .practice-section, .update-section { grid-template-columns: 1fr; }
  .hero-aside { width: min(100%, 315px); min-height: 190px; }
  .position-grid { grid-template-columns: 1fr; gap: .9rem; }
  .position-label { display: inline; margin-right: .45rem; }
  .now-card { grid-template-columns: 1fr; }
  .now-main { padding-right: 0; }
  .now-side { padding: 1.5rem; }
  .course-topline { align-items: start; flex-direction: column; }
  .filter-wrap { justify-content: start; }
  .lesson-card { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .course-flow-list::before { left: .86rem; }
  .flow-stop { left: .22rem; }
  .lesson-content { padding-right: 0; }
  .empty-state { margin-left: 3.6rem; }
  .next-callout { grid-template-columns: auto 1fr; }
  .next-callout .eyebrow { grid-column: 1 / -1; }
  .next-callout .button { grid-column: 1 / -1; width: max-content; }
  .update-section { gap: 1rem; }
}

@media (max-width: 480px) {
  .section-shell, .site-header { width: min(100% - 2rem, 1160px); }
  .header-note { display: none; }
  .hero { padding-top: 3.5rem; }
  h1 { font-size: clamp(3.3rem, 17vw, 5rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .filter-controls { gap: .3rem; }
  .filter-button { padding: .4rem .52rem; font-size: .64rem; }
  .practice-actions .button { width: 100%; }
  .next-callout { gap: 1rem; }
  .footer-grid { flex-direction: column; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}