@layer reset, tokens, reading, components, responsive, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; border-radius: 0; }
  html { scroll-behavior: auto; }
  body, h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
  img { display: block; max-width: 100%; height: auto; }
  button, input, summary { font: inherit; }
  a { color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --c-canvas: #f5f8f8;
    --c-paper: #ffffff;
    --c-pane: #e5eef1;
    --c-line: #9bb0b9;
    --c-text: #203c49;
    --c-muted: #435f6c;
    --c-blue: #23658d;
    --c-deep: #164361;
    --c-action: #d9ad35;
    --c-reading: "Trebuchet MS", "Gill Sans", sans-serif;
  }
}

@layer reading {
  body { background: var(--c-canvas); color: var(--c-text); font: 400 1.1875rem/1.65 var(--c-reading); }
  h1, h2, h3, h4, h5, h6 { font-family: var(--c-reading); font-weight: 700; line-height: 1.16; color: var(--c-deep); text-wrap: balance; }
  h1 { font-size: clamp(2.4rem, 3.8vw, 3.6rem); letter-spacing: -.025em; max-width: 20ch; }
  h2 { font-size: clamp(1.55rem, 2.1vw, 2rem); }
  h3 { font-size: 1.3rem; }
  p, li, a { overflow-wrap: anywhere; }
  p + p { margin-top: 1rem; }
  a { color: var(--c-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
  a:hover { text-decoration-thickness: 3px; }
  :focus-visible { outline: 3px solid var(--c-deep); outline-offset: 4px; }
  ::selection { background: var(--c-action); color: var(--c-text); }
  [id] { scroll-margin-top: 1.5rem; }
}

@layer components {
  .c-skip { position: absolute; top: -7rem; left: 1rem; z-index: 4; min-height: 48px; padding: .65rem 1rem; background: var(--c-action); color: var(--c-text); }
  .c-skip:focus { top: 1rem; }
  .c-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem max(2rem, calc((100vw - 1280px) / 2)); background: var(--c-blue); color: #fff; border-bottom: 8px solid var(--c-action); }
  .c-header a { color: #fff; }
  .c-header :focus-visible { outline-color: var(--c-action); }
  .c-name { font-size: 1.25rem; line-height: 1.45; font-weight: 700; text-decoration: none; min-height: 52px; display: flex; flex-direction: column; justify-content: center; }
  .c-name span { font-size: 1rem; font-weight: 400; }
  .c-header-links { display: flex; gap: 1rem; font-size: 1rem; }
  .c-header-links a { min-height: 48px; display: flex; align-items: center; padding: .3rem .6rem; }
  .c-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 226px; max-width: 1366px; margin: 0 auto; }
  .c-rail { background: var(--c-pane); padding: 2.25rem 1.4rem; font-size: 1rem; min-width: 0; }
  .c-rail-inner { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; padding: .5rem .5rem 1rem; }
  .c-label { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--c-deep); }
  .c-rail-links { display: grid; margin-top: 1rem; }
  .c-rail-links a { min-height: 48px; padding: .75rem 0; display: flex; align-items: center; border-bottom: 1px solid var(--c-line); }
  .c-rail-links a:hover, .c-chapter-nav a:hover { background: #fff; }
  .c-chapters { margin-top: 2rem; border-top: 3px solid var(--c-deep); padding-top: .5rem; }
  .c-chapters summary { min-height: 48px; display: list-item; padding: .5rem 0; cursor: pointer; color: var(--c-deep); font-weight: 700; }
  .c-chapter-nav { display: grid; margin-top: .5rem; }
  .c-chapter-nav a { min-height: 48px; padding: .6rem .4rem; display: flex; align-items: center; }
  .c-chapter-nav a[aria-current="page"] { background: var(--c-action); color: var(--c-text); font-weight: 700; }
  .c-main { min-width: 0; padding: 0 2.75rem 3rem; background: var(--c-paper); }
  .c-main article { max-width: 68ch; margin: 0 auto; }
  .c-intro { margin: 0 -2.75rem; padding: 2.7rem 2.75rem 2.75rem; background: var(--c-blue); color: #fff; border-bottom: 8px solid var(--c-action); }
  .c-intro h1, .c-intro .c-label { color: #fff; }
  .c-intro .c-label { margin-bottom: 1.25rem; border-left: 6px solid var(--c-action); padding-left: .8rem; }
  .c-deck { font-size: 1.35rem; line-height: 1.55; margin-top: 1.4rem; }
  .c-date { font-size: 1rem; margin-top: 1.25rem; }
  .c-intro-art { max-width: 410px; margin: 2rem auto 0; padding: 1.75rem; background: var(--c-paper); border-bottom: 6px solid var(--c-action); }
  .c-intro-art img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; filter: grayscale(1); }
  .c-answer { padding: 2.7rem 0; border-bottom: 2px solid var(--c-line); }
  .c-answer h2 { margin-bottom: 1.25rem; }
  .c-answer ul { padding-left: 1.4rem; margin: 1rem 0 0; }
  .c-answer li + li { margin-top: .75rem; }
  .c-ask { margin-top: 1.6rem; padding: 1.3rem 1.5rem; border-left: 6px solid var(--c-action); background: var(--c-pane); }
  .c-ask .c-label { margin-bottom: .6rem; }
  .c-ask p { font-size: 1.1875rem; }
  .c-route-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .8rem 0; margin-top: 1.3rem; border-bottom: 3px solid var(--c-action); color: var(--c-deep); font-size: 1.0625rem; font-weight: 700; }
  .c-route-link::after { content: "→"; font-size: 1.5rem; flex-shrink: 0; }
  .c-paths { display: grid; margin-top: 1.6rem; border-top: 3px solid var(--c-deep); }
  .c-paths a { min-height: 68px; display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--c-line); font-weight: 700; }
  .c-paths a:hover { background: var(--c-pane); }
  .c-paths a span { color: var(--c-deep); flex-shrink: 0; }
  .c-notes { margin: 2.5rem -2.75rem 0; padding: 2.25rem 2.75rem; background: var(--c-action); }
  .c-notes h2 { font-size: 1.5rem; color: var(--c-text); }
  .c-notes ul { padding: 0; margin: 1.2rem 0 0; list-style: none; }
  .c-notes li { border-top: 1px solid var(--c-muted); padding: .35rem 0; }
  .c-notes a { min-height: 48px; display: flex; align-items: center; gap: .5rem; color: var(--c-text); font-size: 1.0625rem; overflow-wrap: anywhere; }
  .c-note-text { font-size: 1rem; margin-top: 1rem; }
  .c-context { background: var(--c-canvas); padding: 2.5rem 1.4rem; min-width: 0; font-size: 1rem; border-top: 8px solid var(--c-action); }
  .c-context figure { margin: 1.5rem 0; padding: 1.1rem; background: var(--c-paper); border-bottom: 3px solid var(--c-action); }
  .c-context img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; filter: grayscale(1); }
  .c-context figcaption { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 1rem; line-height: 1.5; }
  .c-context a { display: flex; align-items: center; min-height: 48px; padding: .8rem 0; border-bottom: 1px solid var(--c-line); }
  .c-context .c-backlinks { margin-top: 2rem; border-top: 3px solid var(--c-deep); padding-top: 1rem; }
  .c-backlinks p { margin-top: .8rem; }
  .c-next { margin-top: 2.25rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; font-size: 1rem; }
  .c-next a { display: flex; align-items: center; min-height: 56px; padding: 1rem; background: var(--c-pane); }
  .c-next .c-next-primary { background: var(--c-blue); color: #fff; font-weight: 700; }
  .c-next-primary:focus-visible { outline-color: var(--c-deep); }
  .c-footer { margin: 0 auto; padding: 2rem max(2rem, calc((100vw - 1280px) / 2)); font-size: 1rem; color: #fff; background: var(--c-blue); border-top: 8px solid var(--c-action); }
  .c-footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1rem; }
  .c-footer a { min-height: 48px; display: flex; align-items: center; padding: .3rem 0; color: #fff; }
  .c-footer :focus-visible { outline-color: var(--c-action); }
  body > .c-main { max-width: none; min-height: 58vh; padding: 3.5rem max(2rem, calc((100vw - 1100px) / 2)); background: var(--c-blue); color: #fff; }
  body > .c-main h1, body > .c-main .c-label, body > .c-main a { color: #fff; }
  body > .c-main h1 { margin-top: 1.3rem; }
  body > .c-main .c-route-link { max-width: 36rem; }
  body > .c-main :focus-visible { outline-color: var(--c-action); }
}

@layer responsive {
  @media (max-width: 1190px) {
    .c-layout { grid-template-columns: 200px minmax(0, 1fr); }
    .c-context { grid-column: 2; border-top: 8px solid var(--c-action); }
    .c-context-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
    .c-context figure { max-width: 320px; }
    .c-context .c-backlinks { margin: 0; }
  }
  @media (max-width: 760px) {
    .c-header { padding: 1rem 1.25rem; align-items: flex-start; flex-wrap: wrap; gap: .6rem; }
    .c-header-links { width: 100%; gap: .75rem; }
    .c-header-links a { padding: .3rem .25rem; }
    .c-layout { display: block; }
    .c-rail { padding: 1.3rem 1.25rem; border-bottom: 3px solid var(--c-line); }
    .c-rail-inner { position: static; max-height: none; overflow: visible; padding: 0; }
    .c-rail-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; margin-top: .6rem; }
    .c-rail-links a { padding: .65rem 0; }
    .c-chapters { margin-top: 1rem; padding-top: .25rem; border-top-width: 2px; }
    .c-main { padding: 0 1.25rem 2.25rem; }
    .c-intro { margin: 0 -1.25rem; padding: 2rem 1.25rem; }
    h1 { font-size: 2.4rem; }
    .c-deck { font-size: 1.25rem; }
    .c-intro-art { max-width: 360px; padding: 1.5rem; }
    .c-answer { padding: 2rem 0; }
    .c-ask { padding: 1.1rem; }
    .c-notes { margin: 2rem -1.25rem 0; padding: 2rem 1.25rem; }
    .c-context { padding: 2rem 1.25rem; }
    .c-context-inner { display: block; }
    .c-context .c-backlinks { margin-top: 2rem; }
    .c-context figure { max-width: 320px; padding: 1.5rem; }
    .c-next { grid-template-columns: 1fr; }
    .c-footer { padding: 2rem 1.25rem; }
    body > .c-main { padding: 2.5rem 1.25rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; animation: none; transition: none; }
  }
}

@layer print {
  @media print {
    body { color: #111; background: #fff; font-size: 12pt; }
    h1, h2, h3, h4, h5, h6 { color: #111; }
    .c-header, .c-rail, .c-context, .c-next, .c-footer nav, .c-skip { display: none; }
    .c-layout { display: block; }
    .c-main, body > .c-main { padding: 0; color: #111; background: #fff; }
    .c-intro, .c-notes { margin: 0; padding: 1rem 0; color: #111; background: #fff; border-color: #999; }
    .c-intro h1, .c-intro .c-label, body > .c-main h1, body > .c-main .c-label, body > .c-main a { color: #111; }
    .c-label, .c-note-text, .c-footer { color: #333; }
    .c-ask, .c-footer { background: #fff; border-color: #999; }
    .c-notes a { color: #222; font-size: 12pt; }
    .c-route-link, .c-paths a { background: #fff; color: #222; }
    .c-answer { break-inside: avoid; }
    .c-intro-art { max-width: 340px; }
  }
}