/* Harbour — a harbour at blue hour. Deep night-blue water, lantern gold for what's live, aurora violet and frost
   for the apps around it; a lighthouse beam under the title. Fraunces for headings, Manrope for prose,
   JetBrains Mono for what you type. */

:root {
  --page-bg: #0b1322; --page-text: #e3e8f2; --page-muted: #9aa6bd; --page-line: #1c2a42;
  --page-accent: #f2c879; --strong: #fbf6ea; --surface: #101b30; --raise: #15233d;
  --code-bg: #0a1220; --code-text: #f3e2b8;
  --aurora: #b48ead; --frost: #88c0d0;
  --page-ui: "Manrope", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --k-ink: #e3e8f2; --k-accent: #f2c879; --k-b: #88c0d0; --k-c: #b48ead; --k-ok: #a3be8c; --k-muted: #7d8aa3; --k-file: #9aa6bd;
  color-scheme: dark;
}

/* A faint aurora over the top of the page and the night water below it. */
html { background:
  radial-gradient(1200px 520px at 18% -8%, color-mix(in srgb, var(--aurora) 26%, transparent), transparent 70%),
  radial-gradient(900px 420px at 82% -4%, color-mix(in srgb, var(--frost) 20%, transparent), transparent 70%),
  var(--page-bg); background-repeat: no-repeat; }

.hero h1 { font: 640 clamp(60px, 9vw, 120px)/0.92 var(--display); letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 60; color: var(--strong); }
/* The lighthouse beam: a gold lamp with its light fanning out along the horizon. */
.hero h1::after { content: ""; display: block; height: 14px; margin-top: 18px; max-width: 520px;
  background:
    radial-gradient(circle at 7px 7px, var(--page-accent) 0 4px, color-mix(in srgb, var(--page-accent) 40%, transparent) 5px, transparent 8px) 0 0 / 14px 14px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 85%, transparent), color-mix(in srgb, var(--page-accent) 0%, transparent)) 18px 6px / calc(100% - 18px) 2px no-repeat; }
.hero .kicker { color: color-mix(in srgb, var(--page-accent) 70%, var(--page-muted)); }
.part > h2 { font: 620 clamp(30px, 3.6vw, 46px)/1.04 var(--display); font-variation-settings: "opsz" 96, "SOFT" 50;
  color: var(--strong); }
.part > h2::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 14px 0.22em 0; border-radius: 50%;
  background: var(--page-accent); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--page-accent) 55%, transparent); vertical-align: middle; }

/* The film, framed like a window on the harbour. */
.film { margin: 30px 0 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #060b14;
  border: 1px solid var(--page-line); box-shadow: 0 30px 70px -30px #000, 0 0 0 1px color-mix(in srgb, var(--page-accent) 12%, transparent); }
.film figcaption { margin-top: 10px; font-size: 14px; color: var(--page-muted); max-width: 72ch; }
.film figcaption b { color: var(--page-text); }

.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--page-line);
  box-shadow: 0 18px 44px -22px #000; }
.shot.phone img { max-width: 300px; }
.shot figcaption { margin-top: 8px; font-size: 13.5px; color: var(--page-muted); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pair .shot.phone img { max-width: none; }
@media (max-width: 720px) { .pair { gap: 10px; } }

.fig { padding: 16px 12px; background: var(--surface); border-radius: 14px; border: 1px solid var(--page-line); }
.fig figcaption { margin-top: 8px; font-size: 13.5px; color: var(--page-muted); }
.fig figcaption b { color: var(--page-text); }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
table td code { white-space: nowrap; }