/* Dev on break — one stylesheet for the whole site.
   Cream paper ground (no grid), Caveat headings, Nunito body, JetBrains Mono for
   identifiers, teal for recurring elements. Committed light, same as the video brand.
   Base look is the series hub; course pages reuse the same tokens and box language. */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --paper: #fbf7ee;
  --ink: #2f4858;
  --muted: #7a6a55;
  --accent: #b4622a;      /* handwritten kicker */
  --teal: #1c7a6e;        /* season / recurring */
  --teal-fill: #d6eae5;
  --sticky: #ffe9a8;
  --sticky-ink: #5a4a2a;
  --hairline: #e8dfcc;

  --hand: "Caveat", "Bradley Hand", cursive;
  --sans: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --maxw: 820px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

main { flex: 1 0 auto; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- header / nav (course pages) ---- */

.site-header {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}
.site-header a { text-decoration: none; color: inherit; }
.site-header-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hand); font-size: 28px; font-weight: 700; line-height: 1; }
.brand svg { width: 24px; height: 24px; flex: none; }
.crumb { font-size: 15px; color: var(--muted); white-space: nowrap; }
.crumb::before { content: "/"; margin-right: 12px; color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.site-nav { display: flex; gap: 20px; font-size: 16px; }
.site-nav a:hover { color: var(--accent); }

/* ---- intro (hub) / hero (course) ---- */

.intro { padding: 88px 0 40px; }
.hero { padding: 72px 0 48px; border-bottom: 1px dashed var(--muted); }

.kicker {
  font-family: var(--hand);
  font-size: 24px;
  color: var(--accent);
  display: inline-block;
  transform: rotate(-1deg);
  margin-bottom: 8px;
}
h1 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 78px);
  line-height: 0.98;
  margin: 6px 0 16px;
}
.intro p, .hero p { font-size: 20px; color: var(--muted); max-width: 42ch; }
.rule { height: 6px; width: 220px; background: var(--teal); border-radius: 3px; margin: 24px 0; }

/* ---- buttons ---- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 11px 20px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 3px 3px 0 var(--sticky-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* ---- series list (hub) ---- */

.series-list { list-style: none; margin: 24px 0 80px; padding: 0; display: grid; gap: 20px; }
.series-card {
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  padding: 24px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.series-card h2 { font-family: var(--hand); font-size: 34px; margin: 0 0 6px; }
.series-meta { flex: 1; min-width: 240px; }
.series-meta p { margin: 0 0 10px; color: var(--ink); }
.tag { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.series-card.upcoming { opacity: 0.6; border-style: dashed; }
.series-links { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- sections (course) ---- */

section { padding: 48px 0; }
h2 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1;
  margin: 0 0 20px;
}
h3 { font-family: var(--hand); font-weight: 700; font-size: 26px; margin: 28px 0 8px; }

/* ---- episode list ---- */

.episodes { list-style: none; margin: 0; padding: 0; }
.episodes li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.episodes .num { font-family: var(--mono); font-size: 15px; color: var(--muted); min-width: 2.5ch; }
.episodes .title { flex: 1; }
.episodes a { color: var(--ink); text-decoration: none; font-weight: 600; }
.episodes a:hover { color: var(--accent); text-decoration: underline; }
.episodes .soon {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--muted);
  border-radius: 6px;
  padding: 1px 6px;
}
.episodes .concept { color: var(--muted); font-size: 16px; display: block; }

/* ---- arcs ---- */

.arcs { display: grid; gap: 16px; }
.arc { border: 2px solid var(--ink); border-radius: 16px; padding: 18px 20px; background: #fff; }
.arc strong { font-family: var(--hand); font-size: 22px; font-weight: 700; }

/* ---- sticky note ---- */

.sticky {
  background: var(--sticky);
  color: var(--sticky-ink);
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.25;
  padding: 20px 24px;
  transform: rotate(-1.5deg);
  box-shadow: 6px 8px 18px rgba(47, 72, 88, 0.16);
  max-width: 420px;
  margin: 32px 0;
}

/* ---- video embed ---- */

.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 4px 4px 0 var(--ink);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--paper);
  font-family: var(--hand);
  font-size: 28px;
  text-align: center;
  padding: 24px;
}
.embed-placeholder small { font-family: var(--mono); font-size: 13px; opacity: 0.7; }

/* ---- exercises ---- */

.exercise { border-left: 4px solid var(--teal); padding: 4px 0 4px 20px; margin: 28px 0; }
.exercise ol { padding-left: 22px; }
.exercise ol > li { margin-bottom: 14px; }
.exercise ol ol { margin: 8px 0; }
.exercise ol ol > li { margin-bottom: 6px; }
details ol > li { margin-bottom: 10px; }

.quiz-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  padding: 5px 10px;
  margin: 1px 0;
  border-radius: 8px;
  transition: background 0.1s ease;
}
.quiz-option:hover { background: var(--teal-fill); }
.quiz-option input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0.2em 0 0;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.quiz-option input:checked {
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: inset 0 0 0 2.5px #fff;
}
.quiz-option:has(input:checked) { background: var(--teal-fill); }
.exercise pre {
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
}
code { font-family: var(--mono); font-size: 0.9em; background: var(--teal-fill); padding: 1px 5px; border-radius: 4px; }
pre code { background: none; padding: 0; }

.code-sandbox {
  border: 1px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
  margin: 18px 0;
}
.code-sandbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: var(--teal-fill);
  border-bottom: 1px solid var(--ink);
}
.code-sandbox-filename { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 9px;
  box-shadow: 2px 2px 0 var(--sticky-ink);
}
.btn-sm:hover { box-shadow: 3px 3px 0 var(--sticky-ink); }
.btn-sm:active { box-shadow: 1px 1px 0 var(--sticky-ink); }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

.code-editor {
  display: block;
  width: 100%;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  tab-size: 2;
  resize: vertical;
  min-height: 180px;
}
.code-editor:focus { outline: none; background: var(--paper); }

.test-output {
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  min-height: 28px;
}
.test-output-empty { margin: 0; color: rgba(251, 247, 238, 0.55); }
.test-row { display: flex; gap: 9px; }
.test-row .mark { flex: none; width: 1.1em; text-align: center; }
.test-pass { color: #7fe0c8; }
.test-fail { color: #ffab7a; }
.test-pending { color: rgba(251, 247, 238, 0.55); }
.test-summary { margin-top: 6px; font-weight: 700; color: var(--paper); }
.test-block + .test-block { margin-top: 10px; }
.test-log {
  margin: 4px 0 0 1.9em;
  color: rgba(251, 247, 238, 0.55);
  font-size: 12px;
  white-space: pre-line;
}

details {
  border: 1px dashed var(--muted);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  background: #fff;
}
details summary { cursor: pointer; font-weight: 700; font-family: var(--sans); }
details[open] summary { margin-bottom: 8px; }

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

.site-footer { border-top: 2px solid var(--ink); padding: 28px 0; font-size: 15px; color: var(--muted); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

.back-link {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  margin: 32px 0 0;
}
.back-link:hover { color: var(--accent); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .intro { padding: 56px 0 32px; }
  .hero { padding: 48px 0 36px; }
  .site-nav { gap: 14px; font-size: 15px; }
  section { padding: 36px 0; }
}