:root {
  color-scheme: light;
  --ink: #18343b;
  --muted: #495f65;
  --paper: #f3f5f2;
  --panel: #ffffff;
  --line: #c7d3cf;
  --accent: #225b4d;
  --wash: #e1efe7;
  --amber: #704315;
  --amber-wash: #fff1da;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
body > header, body > footer, #workspace {
  width: min(1280px, calc(100% - 3rem));
  margin-inline: auto;
}
a { color: var(--accent); text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
a, summary { font-size: 1rem; }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
h1, h2, h3 { font-weight: 700; line-height: 1.18; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); letter-spacing: -0.045em; margin: 1rem 0 1.5rem; max-width: 20ch; }
h2 { font-size: clamp(1.5rem, 2.15vw, 2rem); letter-spacing: -0.025em; margin: 0 0 1.5rem; max-width: 38ch; }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; margin: 1rem 0; }
p { max-width: 72ch; margin: 0 0 1rem; }
strong { font-weight: 700; }
ul { padding-left: 1.5rem; }
li, dd, dt, figcaption { font-size: 1rem; }
li { margin-block: 0.5rem; }
section { scroll-margin-top: 1.5rem; }
h2:focus { outline: none; }
main:focus { outline: none; }

#skip { position: fixed; inset: 0.5rem auto auto 1.5rem; z-index: 5; padding: 0.75rem 1rem; min-height: 44px; background: var(--panel); transform: translateY(-160%); }
#skip:focus { transform: none; }
#masthead { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
#masthead > a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: var(--ink); }
#masthead > a strong { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.035em; }
#masthead > a span { font-family: var(--mono); font-size: 1rem; color: var(--muted); }
nav ul { list-style: none; padding: 0; margin: 0; }
nav li { margin: 0; }
#masthead nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#masthead nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
#masthead nav a:hover, #masthead nav a[aria-current] { background: var(--ink); color: white; }
#workspace { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem 4rem; align-items: start; }
#rail { position: sticky; top: 1.5rem; }
details { margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 8px; overflow: clip; background: var(--panel); }
summary { cursor: pointer; min-height: 48px; padding: 0.75rem 1rem; font-weight: 700; }
summary::marker { color: var(--accent); }
details[open] summary { border-bottom: 1px solid var(--line); }
#rail nav a { display: block; min-height: 44px; padding: 0.75rem 1rem; line-height: 1.5; text-decoration: none; color: var(--muted); border-left: 3px solid transparent; overflow-wrap: anywhere; }
#rail nav a:hover, #rail nav a[aria-current] { color: var(--accent); background: var(--wash); border-left-color: var(--accent); }
main { min-width: 0; }
main > header { padding: 1.5rem 2rem 2rem; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px; background: var(--panel); }
[data-eyebrow] { font-family: var(--mono); font-weight: 600; color: var(--accent); margin: 0; }
[data-lead] { font-size: 1.125rem; line-height: 1.6; max-width: 65ch; margin: 0; }
main > section { margin-top: 3rem; }
[data-caption], figcaption { color: var(--muted); max-width: 72ch; }
[data-status] { font-family: var(--mono); font-weight: 500; color: var(--accent); background: var(--wash); padding: 0.25rem 0.5rem; margin: 0; border-radius: 4px; display: inline-block; font-size: 1rem; line-height: 1.5; }
[data-panels] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
[data-panels] article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 1.5rem; display: flex; flex-direction: column; align-items: start; min-width: 0; }
[data-panels] article > p:not([data-status]) { flex: 1; }
[data-panels] a { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding-block: 0.5rem; font-weight: 700; }
[data-compare] { margin: 0; }
[data-compare] dl { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: clip; background: var(--panel); }
[data-compare] dl > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
[data-compare] dl > div:last-child { border-bottom: none; }
[data-compare] dt { grid-column: 1 / -1; background: #e9eeeb; padding: 0.75rem 1.5rem; font-family: var(--mono); font-weight: 600; }
[data-compare] dd { margin: 0; padding: 1.5rem; min-width: 0; }
[data-compare] dd + dd { border-left: 1px solid var(--line); }
[data-compare] dd > strong { display: block; color: var(--muted); font-weight: 500; margin-bottom: 0.75rem; }
[data-compare] dd p { margin: 0; }
figcaption { padding: 1rem 0 0; }
[data-evidence] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
[data-evidence] > article { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; border-bottom: 3px solid var(--accent); min-width: 0; display: flex; flex-direction: column; align-items: start; }
[data-evidence] > article:only-child { grid-column: 1 / -1; }
[data-evidence] > article p { max-width: 72ch; }
[data-evidence] > article p:last-of-type { margin-bottom: 0; }
[data-evidence] > article ul { margin-top: auto; padding-top: 1rem; }
[data-sources] { list-style: none; margin: 1rem 0 0; padding: 0; }
[data-sources] a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding-block: 0.5rem; }
[data-evidence] + [data-caption] { margin-top: 1rem; }
[data-prompt] { margin-top: 1.5rem; background: var(--wash); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 1.5rem; }
[data-prompt] p:first-child { color: var(--accent); }
[data-prompt] p:last-child { margin: 0; }
[data-routes] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
[data-routes] li { margin: 0; min-width: 0; }
[data-routes] a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; text-decoration: none; min-height: 44px; height: 100%; }
[data-routes] strong { font-size: 1.125rem; color: var(--ink); }
[data-routes] a > span { grid-column: 1; color: var(--muted); }
[data-routes] b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.5rem; font-weight: 400; }
[data-routes] a:hover { border-color: var(--accent); background: var(--wash); }
[data-questions] { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: clip; background: var(--panel); }
[data-questions] li { margin: 0; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
[data-questions] li:last-child { border: 0; }
[data-notice] { border: 1px solid #bb8c4a; border-left: 5px solid var(--amber); border-radius: 8px; background: var(--amber-wash); padding: 1.5rem; color: var(--amber); }
[data-notice] a { color: var(--amber); }
[data-notice] p:nth-of-type(2) { font-weight: 700; }
[data-next] { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
[data-next] p { color: var(--muted); font-family: var(--mono); margin: 0; }
[data-next] a { display: inline-flex; align-items: center; gap: 2rem; min-height: 44px; padding-block: 0.75rem; font-size: 1.125rem; }
body > footer { padding: 2rem 0 2.5rem; border-top: 1px solid var(--line); }
footer p { color: var(--muted); }
footer nav ul { display: flex; flex-wrap: wrap; gap: 0 2rem; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.75rem; }

@media (max-width: 1050px) {
  #workspace { grid-template-columns: 1fr; padding-top: 1.5rem; }
  #rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  #rail details { margin: 0; }
  #rail nav a { padding-block: 0.75rem; }
  [data-panels] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  #masthead { align-items: start; flex-direction: column; gap: 1rem; padding-block: 1.5rem 1rem; }
  #masthead nav { width: 100%; }
  #masthead nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
  #masthead nav a { padding: 0.5rem 0.25rem; }
  #workspace { gap: 1.5rem; padding-bottom: 2.5rem; }
  #rail { grid-template-columns: 1fr; gap: 0.75rem; }
  main > header { padding: 1.5rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.5rem; }
  main > section { margin-top: 2rem; }
  [data-panels], [data-evidence], [data-routes] { grid-template-columns: 1fr; }
  [data-panels] article, [data-evidence] article { padding: 1.5rem; }
  [data-compare] dl > div { grid-template-columns: 1fr; }
  [data-compare] dd + dd { border-left: none; border-top: 1px dashed var(--line); }
  [data-compare] dt { padding-inline: 1.5rem; }
  [data-lead] { font-size: 1rem; }
  footer nav ul { display: grid; grid-template-columns: 1fr; gap: 0; }
  footer nav a { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  a { transition: background-color 120ms ease, border-color 120ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation: none; transition: none; }
}
@media print {
  :root { color: #000; background: #fff; }
  #masthead, #rail, #skip, footer nav, [data-next] { display: none; }
  body > footer, #workspace { width: 100%; }
  #workspace { display: block; padding: 0; }
  main > header { border: 0; padding: 0; }
  [data-panels], [data-evidence], [data-routes] { display: block; }
  article, [data-compare] dl > div, [data-prompt] { break-inside: avoid; }
  h1 { font-size: 2.5rem; }
  a { color: #000; }
}