/* Read Aloud — the extension's own identity carried onto a page: warm paper, ink, a rust
   accent and a serif voice; a highlighter yellow for what is being read. */

:root {
  --page-bg: #f3eee4;
  --page-text: #27231d;
  --page-muted: #625a4d;
  --page-line: #dcd3c2;
  --page-accent: #9a3a24;
  --page-ui: "Literata", Georgia, serif;
  --display: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --surface: #faf6ee;
  --raise: #ebe3d4;
  --code-bg: #ebe3d4;
  --code-text: #5a2416;
  --strong: #1b1813;
  --hl: #f2dd57;
  --k-ink: #27231d; --k-accent: #9a3a24; --k-a: #b0702a; --k-b: #2f6f8f; --k-c: #4f7d3a;
  --k-d: #7a4fa0; --k-ok: #4f7d3a; --k-err: #b0352b; --k-muted: #958b7a; --k-file: #7d7262;
  color-scheme: light;
}

body { font-size: 17.5px; }
.hero h1 { font: 500 clamp(46px, 7vw, 92px)/1 var(--display); letter-spacing: -0.03em; }
mark { background: linear-gradient(transparent 12%, var(--hl) 12% 88%, transparent 88%); color: inherit; padding: 0 0.08em; }
.part > h2 { font: 500 clamp(28px, 3.4vw, 42px)/1.12 var(--display); letter-spacing: -0.015em; }
.part > h2::after { content: ""; display: block; width: 3.2em; height: 0.36em; margin-top: 8px; background: var(--hl); opacity: 0.85; }
.part h3 { font-family: var(--display); font-weight: 600; }
.shot img { border-radius: 8px; box-shadow: 0 14px 34px -18px #27231d66; }
.hero .popup { justify-self: center; max-width: 380px; }
.fig { padding: 18px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 6px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.dg text { font-family: "Onest", system-ui, sans-serif; }