:root {
  --pb-ink: #10120d;
  --pb-bark: #2a2418;
  --pb-moss: #42684a;
  --pb-jade: #067060;
  --pb-mint: #bdf4d5;
  --pb-cream: #f8f2df;
  --pb-paper: #fffaf0;
  --pb-clay: #d96c43;
  --pb-gold: #d7b15d;
  --pb-blue: #16395f;
  --pb-line: rgba(42, 36, 24, .14);
  --pb-line-strong: rgba(42, 36, 24, .28);
  --pb-glass-bg: rgba(255, 250, 240, .78);
  --pb-glass-border: 1px solid rgba(255, 255, 255, .54);
  --pb-glass-shadow: 0 24px 80px rgba(27, 26, 18, .14);
  --pb-glass-filter: blur(18px) saturate(1.2);
  --pb-shadow-soft: var(--pb-glass-shadow);
  --pb-shadow-sharp: 9px 9px 0 rgba(16, 18, 13, .08);
  --pb-serif: "Fraunces", Georgia, serif;
  --pb-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --pb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pb-display: "Fraunces", Georgia, serif;
  --pb-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 0; scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }
/* Inherit the ink colour explicitly: iOS Safari renders <button>/<select> text
   in its system blue unless a colour is set, which made tabs, book names and
   the rest look wrong on mobile while desktop showed them black. */
button, input, select { font: inherit; color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(15, 143, 121, .55);
  outline-offset: 4px;
}
.pb-skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 99;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: var(--pb-ink);
  color: var(--pb-paper);
}
.pb-skip:focus { top: 1rem; }
/* Shared text wordmark — the brand, set in the editorial display face (Fraunces) */
.pb-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--pb-serif);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--pb-ink);
  text-decoration: none;
  white-space: nowrap;
}
.pb-wordmark__name { color: inherit; }
.pb-wordmark__brace { color: var(--pb-jade); font-weight: 650; }
.pb-wordmark__tld { color: var(--pb-jade); }
.pb-surface {
  border: var(--pb-glass-border);
  background: var(--pb-glass-bg);
  box-shadow: var(--pb-glass-shadow);
  backdrop-filter: var(--pb-glass-filter);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}