/* ==========================================================================
   Heyoku — main.css
   The ONLY stylesheet on the site. Every design decision lives here.

   RULE: pages must never hardcode a colour, font, size or spacing value.
   Always use var(--token). See dls/01-design-tokens.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Colour — light (default) */
  --c-bg:           #FDFBF7;  /* page background, warm paper */
  --c-surface:      #F4F0E7;  /* raised blocks, callouts */
  --c-ink:          #191815;  /* body text. 15.8:1 on --c-bg */
  --c-ink-soft:     #56534B;  /* secondary text. 7.4:1 */
  --c-ink-faint:    #7E7A70;  /* metadata only. 4.8:1 */
  --c-accent:       #0E5B4D;  /* links, primary action. 7.9:1 */
  --c-accent-ink:   #0A4339;  /* accent text on accent-soft */
  --c-accent-soft:  #E3EDEA;  /* accent background wash */
  --c-flag:         #8A3324;  /* wrong answers, gap warnings. 7.2:1 */
  --c-flag-soft:    #F8EBE7;
  --c-border:       #E4DED1;
  --c-border-firm:  #C7BFAE;

  /* Type families — zero downloads, zero LCP cost */
  --f-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
  --f-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — fluid, mobile-first */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --t-lg:   clamp(1.1875rem, 1.13rem + 0.3vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --t-2xl:  clamp(1.625rem, 1.45rem + 0.9vw, 2.125rem);
  --t-3xl:  clamp(2rem, 1.7rem + 1.5vw, 2.875rem);

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* Spacing scale */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6rem;

  /* Layout */
  --w-text:   38rem;   /* ~68 characters. The reading column. */
  --w-wide:   62rem;   /* headers, footers, index grids */
  --gutter:   var(--s-5);
  --radius:   6px;
  --radius-lg: 10px;

  /* Borders */
  --border-hair: 1px solid var(--c-border);
  --border-firm: 1px solid var(--c-border-firm);
}

/* Colour — dark. Same tokens, different values: nothing else changes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #14150F;
    --c-surface:     #1E1F18;
    --c-ink:         #EDEAE0;
    --c-ink-soft:    #B3AFA2;
    --c-ink-faint:   #8A867A;
    --c-accent:      #6FC5AF;
    --c-accent-ink:  #A8DCCD;
    --c-accent-soft: #1B2A26;
    --c-flag:        #E3937E;
    --c-flag-soft:   #2C1E1A;
    --c-border:      #2E2F26;
    --c-border-firm: #474839;
  }
}

:root[data-theme="dark"] {
  --c-bg:          #14150F;
  --c-surface:     #1E1F18;
  --c-ink:         #EDEAE0;
  --c-ink-soft:    #B3AFA2;
  --c-ink-faint:   #8A867A;
  --c-accent:      #6FC5AF;
  --c-accent-ink:  #A8DCCD;
  --c-accent-soft: #1B2A26;
  --c-flag:        #E3937E;
  --c-flag-soft:   #2C1E1A;
  --c-border:      #2E2F26;
  --c-border-firm: #474839;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-serif);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap      { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text{ max-width: var(--w-text); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--c-accent); color: var(--c-bg);
  padding: var(--s-3) var(--s-4); z-index: 100;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   4. HEADER & NAV
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: var(--border-hair);
  padding-block: var(--s-4);
  font-family: var(--f-sans);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.site-logo {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-decoration: none;
}
.site-logo:hover { color: var(--c-accent); }

.site-nav ul {
  display: flex; gap: var(--s-5);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--t-sm);
  flex-wrap: wrap;
}
.site-nav a { color: var(--c-ink-soft); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--c-accent); text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. BREADCRUMB
   -------------------------------------------------------------------------- */

.breadcrumb {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
  padding-top: var(--s-5);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-border-firm); }
.breadcrumb a { color: var(--c-ink-soft); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. ARTICLE / PROSE
   -------------------------------------------------------------------------- */

.article { padding-block: var(--s-6) var(--s-9); }

.article__meta {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.article h1 {
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
}

/* The 60-word answer. This is the block LLMs quote. Style it as the
   most important paragraph on the page, because it is. */
.answer {
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  border-left: 3px solid var(--c-accent);
  padding-left: var(--s-4);
  margin: 0 0 var(--s-7);
}

.prose h2 {
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
  margin: var(--s-8) 0 var(--s-4);
}
.prose h3 {
  font-size: var(--t-lg);
  margin: var(--s-6) 0 var(--s-3);
}
.prose p, .prose ul, .prose ol { margin: 0 0 var(--s-4); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { font-weight: 700; }
.prose blockquote {
  margin: var(--s-5) 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-border-firm);
  color: var(--c-ink-soft);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   7. PREREQUISITE LIST  (H2: What [topic] actually requires)
   -------------------------------------------------------------------------- */

.prereqs { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.prereqs > li {
  border-top: var(--border-hair);
  padding-block: var(--s-4);
}
.prereqs > li:last-child { border-bottom: var(--border-hair); }
.prereqs__name {
  font-weight: 700;
  display: block;
  margin-bottom: var(--s-1);
}
.prereqs__why { color: var(--c-ink-soft); font-size: var(--t-sm); margin: 0; }
.prereqs__grade {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
  margin-left: var(--s-2);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   8. CHECK BLOCK  (H2: How to check in five minutes)
   -------------------------------------------------------------------------- */

.check { margin: 0 0 var(--s-5); counter-reset: check; }
.check__item {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.check__q {
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-4);
}
.check__q::before {
  counter-increment: check;
  content: "Question " counter(check);
  display: block;
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: var(--s-2);
}
.check__row { display: flex; gap: var(--s-3); margin-bottom: var(--s-3); }
.check__row:last-child { margin-bottom: 0; }
.check__label {
  flex: 0 0 auto;
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--s-2);
  border-radius: var(--radius);
  height: fit-content;
  margin-top: 3px;
}
.check__label--good { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.check__label--bad  { background: var(--c-flag-soft);   color: var(--c-flag); }
.check__text { margin: 0; font-size: var(--t-sm); color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   9. MISCONCEPTIONS  (H2: The three ways children get this wrong)
        The section a competitor cannot copy. From the misconception log.
   -------------------------------------------------------------------------- */

.misconception {
  border-left: 3px solid var(--c-flag);
  padding: 0 0 0 var(--s-4);
  margin: 0 0 var(--s-6);
}
.misconception h3 { margin-top: 0; margin-bottom: var(--s-3); }
.misconception__said {
  font-family: var(--f-sans);
  background: var(--c-flag-soft);
  color: var(--c-ink);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-3);
}
.misconception__said b {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-flag);
  margin-bottom: var(--s-1);
}
.misconception__gap { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   10. FAQ  (H2: Questions parents ask)
   -------------------------------------------------------------------------- */

.faq { margin: 0 0 var(--s-6); }
.faq__item { border-top: var(--border-hair); padding-block: var(--s-4); }
.faq__item:last-child { border-bottom: var(--border-hair); }
.faq__q { font-size: var(--t-lg); font-weight: 700; margin: 0 0 var(--s-2); line-height: var(--lh-snug); }
.faq__a { margin: 0; color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   11. CTA
   -------------------------------------------------------------------------- */

.cta {
  background: var(--c-accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  margin: var(--s-8) 0 0;
  text-align: center;
}
.cta__title { font-size: var(--t-xl); margin: 0 0 var(--s-2); color: var(--c-accent-ink); }
.cta__sub { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0 0 var(--s-5); }
.button {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--c-accent);
  color: var(--c-bg);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius);
  text-decoration: none;
}
.button:hover { background: var(--c-accent-ink); color: var(--c-bg); }

/* --------------------------------------------------------------------------
   12. INTERNAL LINK RAIL  (up / down / sideways — the prerequisite graph)
   -------------------------------------------------------------------------- */

.rail {
  border-top: var(--border-firm);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  font-family: var(--f-sans);
  font-size: var(--t-sm);
}
.rail__group { margin-bottom: var(--s-5); }
.rail__group:last-child { margin-bottom: 0; }
.rail__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--s-2);
}
.rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.rail li { margin: 0; }
.rail span[data-unpublished] { color: var(--c-ink-faint); }

/* --------------------------------------------------------------------------
   13. INDEX PAGES  (/learn, /notes)
   -------------------------------------------------------------------------- */

.page-intro { padding-block: var(--s-6) var(--s-7); }
.page-intro h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; margin-bottom: var(--s-4); }
.page-intro p { font-size: var(--t-lg); color: var(--c-ink-soft); margin: 0; max-width: var(--w-text); }

.grade-group { margin-bottom: var(--s-8); }
.grade-group__title {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  padding-bottom: var(--s-2);
  border-bottom: var(--border-firm);
  margin: 0 0 var(--s-4);
}
.topic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
@media (min-width: 40rem) { .topic-list { grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-6); } }
.topic-list li { margin: 0; padding-block: var(--s-2); border-bottom: var(--border-hair); }
.topic-list a { text-decoration: none; }
.topic-list a:hover { text-decoration: underline; }
.topic-list span[data-unpublished] { color: var(--c-ink-faint); }
.topic-list span[data-unpublished]::after {
  content: "soon"; font-family: var(--f-sans); font-size: var(--t-xs);
  margin-left: var(--s-2); color: var(--c-border-firm);
}

.note-list { list-style: none; margin: 0; padding: 0; }
.note-list li { border-top: var(--border-hair); padding-block: var(--s-5); }
.note-list li:last-child { border-bottom: var(--border-hair); }
.note-list h2 { font-size: var(--t-xl); margin: 0 0 var(--s-2); }
.note-list h2 a { text-decoration: none; color: var(--c-ink); }
.note-list h2 a:hover { color: var(--c-accent); }
.note-list p { margin: 0; color: var(--c-ink-soft); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   14. HOME
   -------------------------------------------------------------------------- */

.hero { padding-block: var(--s-9) var(--s-8); }
.hero h1 {
  font-size: var(--t-3xl);
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin-bottom: var(--s-5);
}
.hero__lede { font-size: var(--t-lg); color: var(--c-ink-soft); max-width: var(--w-text); margin: 0 0 var(--s-6); }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  border-top: var(--border-hair);
  margin-top: var(--s-10);
  padding-block: var(--s-7);
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8); justify-content: space-between; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.site-footer a { color: var(--c-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); text-decoration: underline; }
.site-footer__legal { font-size: var(--t-xs); color: var(--c-ink-faint); }

/* --------------------------------------------------------------------------
   16. PLACEHOLDER  — visible in dev, and a hard signal the page is not ready.
        Any page containing one MUST carry <meta name="robots" content="noindex">
        and MUST be absent from sitemap.xml. tools/check.mjs enforces both.
   -------------------------------------------------------------------------- */

[data-dls="placeholder"] {
  outline: 2px dashed var(--c-flag);
  outline-offset: 4px;
  position: relative;
}
[data-dls="placeholder"]::after {
  content: "PLACEHOLDER — replace with real data from the misconception log";
  display: block;
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-flag);
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}