/* Practice: Source Serif 4 only (optical sizes do the hierarchy). Split panels: the statement stays, the detail scrolls. */
@font-face { font-family: "Source Serif 4"; src: url(/fonts/source-serif-normal-300-700.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/fonts/source-serif-italic-300-700.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
:root {
  --color-bg: oklch(0.965 0.004 240);
  --color-panel: oklch(0.30 0.05 170);
  --color-text: oklch(0.22 0.02 240);
  --color-accent: oklch(0.42 0.08 165);
  --color-muted: oklch(0.48 0.015 240);
  --color-border: oklch(0.87 0.008 240);
}
@media (prefers-color-scheme: dark) { :root {
  --color-bg: oklch(0.19 0.01 240); --color-panel: oklch(0.27 0.05 170); --color-text: oklch(0.93 0.005 240);
  --color-accent: oklch(0.80 0.08 165); --color-muted: oklch(0.70 0.01 240); --color-border: oklch(0.32 0.01 240); } }
body { font-family: "Source Serif 4", Georgia, serif; font-optical-sizing: auto; }
.bar { display: flex; justify-content: space-between; gap: var(--grt-space-sm); padding: var(--grt-space-sm); border-bottom: 1px solid var(--color-border); }
.bar .name { color: var(--color-text); text-decoration: none; font-weight: 600; }
.split { display: grid; }
@media (min-width: 64rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .panel { position: sticky; top: 0; height: 100vh; overflow: auto; } }
.panel { background: var(--color-panel); color: oklch(0.96 0.01 170); padding: var(--grt-space-xl) var(--grt-space-md); }
.panel h1 { margin-top: 0; font-weight: 400; font-size: var(--grt-step-4); line-height: var(--grt-step-lh-4); }
.panel p { color: oklch(0.88 0.02 170); max-width: 30ch; }
.panel img { width: 8rem; margin-top: var(--grt-space-md); }
.detail { padding: var(--grt-space-lg) var(--grt-space-md); max-width: calc(var(--grt-content-width) + 2 * var(--grt-space-md)); }
.detail h2 { font-size: var(--grt-step-3); line-height: var(--grt-step-lh-3); font-weight: 400; margin-top: 0; }
.detail section + section { margin-top: var(--grt-space-xl); padding-top: var(--grt-space-lg); border-top: 1px solid var(--color-border); }
.detail h3 { font-size: var(--grt-step-1); line-height: var(--grt-step-lh-1); font-weight: 600; margin: var(--grt-space-md) 0 var(--grt-space-2xs); }
.steps { padding-left: 1.4em; }
.steps li::marker { color: var(--color-accent); font-weight: 600; }
.steps h3 { margin-top: var(--grt-space-sm); }
.case-meta { color: var(--color-muted); font-style: italic; margin-bottom: 0; }
.case-title { font-size: var(--grt-step-2) !important; line-height: var(--grt-step-lh-2) !important; font-weight: 400 !important; }
.voices figure { margin: 0 0 var(--grt-space-md); padding-top: var(--grt-space-sm); border-top: 1px solid var(--color-border); }
.voices blockquote { margin: 0; font-size: var(--grt-step-1); line-height: var(--grt-step-lh-1); font-style: italic; }
.voices blockquote p { margin: 0 0 var(--grt-space-xs); }
.voices figcaption { color: var(--color-muted); }
.button { display: inline-block; padding: var(--grt-space-2xs) var(--grt-space-sm); background: var(--color-accent); color: var(--color-bg); text-decoration: none; font-weight: 600; }