/* Flotsam — things that float. Deep-sea teal, sea-glass green, a pale foam line; Newsreader for
   headings like a ship's log, Instrument Sans for prose, IBM Plex Mono for keys. */

:root {
  --page-bg: #0e1a1f; --page-text: #dbe9ea; --page-muted: #96b0b3; --page-line: #1f3238;
  --page-accent: #7fd1b9; --strong: #f2fbfa; --surface: #12232a; --raise: #183038;
  --code-bg: #0b161a; --code-text: #cdeee6;
  --page-ui: "Instrument Sans", system-ui, sans-serif;
  --display: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --k-ink: #dbe9ea; --k-accent: #7fd1b9; --k-b: #8cc4ff; --k-c: #f2b880; --k-ok: #a6e3a1; --k-muted: #7e979a; --k-file: #96b0b3;
  color-scheme: dark;
}
.hero h1 { font: 600 clamp(58px, 8.5vw, 112px)/0.95 var(--display); font-style: italic; letter-spacing: -0.03em; }
.hero h1::after { content: ""; display: block; width: 220px; height: 12px; margin-top: 14px;
  background: radial-gradient(circle at 10px -4px, transparent 9px, var(--page-accent) 10px, var(--page-accent) 12px, transparent 13px) 0 0 / 20px 12px repeat-x; opacity: 0.8; }
.hero .shot { margin: 26px 0 0; }
.part > h2 { font: 600 clamp(30px, 3.6vw, 44px)/1.05 var(--display); font-style: italic; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--page-line); box-shadow: 0 18px 40px -20px #000; }
.shot.phone img { max-width: 320px; margin-left: auto; }
.shot figcaption { margin-top: 8px; font-size: 13.5px; color: var(--page-muted); }
.shot.phone figcaption { text-align: right; }
.fig { padding: 16px 12px; background: var(--surface); border-radius: 12px; border: 1px solid var(--page-line); }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
kbd { font: 500 12.5px/1 var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--raise); border: 1px solid #2c4850; border-bottom-width: 2px; color: var(--strong); white-space: nowrap; }