/* CONVENTIONS — before editing, read IN FULL (not skimmed) the governing
   CSS conventions; mandatory for any Claude/Codex session writing CSS here:
   C:\Users\catsc\Documents\Projects\Aza-core\conventions\code\CSS.md */

/* The evidence sheet: the same paper and ink as the lesson, laid out as a
   document to read, one section per thing the lesson crosses out. */

:root {
  --paper: oklch(96% 0.025 90);
  --paper-deep: oklch(92% 0.03 88);
  --ink-blue: oklch(42% 0.17 262);
  --ink-deep: oklch(28% 0.13 262);
  --ink-text: oklch(30% 0.12 262);
  --ink-soft: oklch(52% 0.1 262);
  --ochre: oklch(76% 0.15 80);
  --ochre-wash: oklch(85% 0.12 88 / 0.55);
  --coral: oklch(63% 0.17 32);
  --leaf: oklch(60% 0.14 145);
  --board: oklch(97% 0.02 90);
  --voice: "Palatino Linotype", "Iowan Old Style", Palatino, Georgia, "Book Antiqua", serif;
  --ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink-text); font-family: var(--voice); font-size: 18px; line-height: 1.5; }
body { margin: 0; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; min-height: 3.6rem; padding: 0.35rem clamp(0.8rem, 3vw, 2rem); border-bottom: 1px solid color-mix(in oklab, var(--ink-blue) 25%, transparent); }
.wordmark { font-size: 1.3rem; color: var(--ink-deep); text-decoration: none; white-space: nowrap; }
.wordmark i { color: var(--coral); }
.lesson-tag { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.back { margin-left: auto; font-family: var(--ui); font-size: 0.85rem; color: var(--ink-deep); }

main { max-width: 46rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 5rem; }
h1 { margin: 0 0 0.3rem; font-size: 2.2rem; line-height: 1.1; color: var(--ink-deep); text-wrap: balance; }
.lede { margin: 0 0 1.4rem; font-size: 1.15rem; color: var(--ink-soft); }
h2 { margin: 3rem 0 0.4rem; padding-top: 1.2rem; border-top: 2px solid var(--ink-blue); font-size: 1.6rem; line-height: 1.15; color: var(--ink-deep); text-wrap: balance; }
h3 { margin: 1.4rem 0 0.4rem; font-family: var(--ui); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
p { margin: 0.5rem 0; }
a { color: var(--ink-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--coral); }
a:hover { color: var(--coral); }

/* What we're told, on a poster; what holds, on paper. */
.told { display: inline-block; margin: 0.2rem 0 0.6rem; padding: 0.5rem 0.9rem; border: 2px solid var(--ink-blue); border-radius: 3px; background: var(--board); font-size: 1.15rem; font-weight: 600; box-shadow: 4px 5px 0 color-mix(in oklab, var(--ink-blue) 25%, transparent); }
.told::before { content: "We’re told: "; font-family: var(--ui); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); display: block; }
.holds { margin: 0.8rem 0; padding-left: 1rem; border-left: 4px solid var(--ochre); }
.holds strong { color: var(--ink-deep); }
.caveat { font-size: 0.95rem; color: var(--ink-soft); }

/* The sources: one line each, marked by kind. */
.sources { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.sources li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.6rem; margin: 0.55rem 0; align-items: baseline; }
.kind { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; background: var(--ochre-wash); color: var(--ink-deep); white-space: nowrap; }
.kind.video { background: color-mix(in oklab, var(--coral) 22%, transparent); }
.kind.course { background: color-mix(in oklab, var(--ink-blue) 14%, transparent); }
.kind.study { background: color-mix(in oklab, var(--leaf) 22%, transparent); }
.sources .who { font-family: var(--ui); font-size: 0.8rem; color: var(--ink-soft); }
.sources .what { display: block; font-size: 0.95rem; }

.how { margin: 1.2rem 0 0; padding: 0.8rem 1rem; border: 2px dashed color-mix(in oklab, var(--ink-blue) 40%, transparent); border-radius: 6px; font-size: 0.95rem; }
.how .kind { margin-right: 0.3rem; }

footer { max-width: 46rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 3rem; font-family: var(--ui); font-size: 0.78rem; color: var(--ink-soft); }

@media (max-width: 600px) {
  html { font-size: 16px; }
  .sources li { grid-template-columns: 1fr; gap: 0.15rem; }
}