/* One paper-and-ink visual system for the homepage and all reading pages.
 * The entrance defines its own forest/paper colors in index.html.
 * Loaded before React and by the standalone 404.
 */
:root {
  color-scheme: light;
  --background: 45.000 28.571% 97.255%; /* #FAF9F6 */
  --foreground: 45.000 7.692% 10.196%; /* #1C1B18 */
  --card: var(--background);
  --popover: var(--background);
  --secondary: var(--background);
  --muted: var(--background);
  --muted-foreground: var(--foreground);
  --accent: var(--foreground);
  --brand: var(--foreground);
  --mark: var(--foreground);
  --border: 45.000 6.452% 87.843%; /* quiet neutral rules */
  --destructive: var(--foreground);
  --code-background: var(--background);
  --code-foreground: var(--foreground);
  --code-muted: var(--foreground);
  --card-foreground: var(--foreground);
  --popover-foreground: var(--foreground);
  --primary: var(--foreground);
  --primary-foreground: var(--background);
  --secondary-foreground: var(--foreground);
  --accent-foreground: var(--background);
  --destructive-foreground: var(--background);
  --input: var(--border);
  --ring: var(--accent);
  --radius: 0rem;
  --sidebar-background: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--secondary);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}

html { background: hsl(var(--background)); color: hsl(var(--foreground)); }
::selection { background: hsl(var(--foreground) / .16); color: hsl(var(--foreground)); }
:focus-visible { outline: 2px solid hsl(var(--foreground)); outline-offset: 4px; }
.site-tools { display: flex; align-items: center; gap: 14px; flex: none; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-tag { color: hsl(var(--foreground)); padding: 0; border: 0; border-radius: 0; background: transparent; }
.site-tag + .site-tag::before { content: '·'; margin-right: 6px; }
.photo-lightbox { background: rgb(28 27 24 / .94); }
.photo-lightbox-close, .photo-lightbox-close:hover { color: #FAF9F6; }
.brand-mark { display: inline-block; background: hsl(var(--mark)); mask: url("/living-branch.svg?v=green-20260929") center / contain no-repeat; }
.home-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: hsl(var(--foreground)); text-decoration: none; }
.home-link .brand-mark { width: 28px; height: 28px; flex: none; }
.writing-language { display: inline-block; margin-left: 8px; color: hsl(var(--foreground)); font-size: 9px; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.notion-link:hover { text-decoration-thickness: 2px; }
@media (max-width: 520px) {
  .site-header { gap: 12px; align-items: flex-start; }
  .site-tools { gap: 9px; }
}
@media print {
  :root { --background: 0 0% 100%; --foreground: 0 0% 10%; --border: 0 0% 80%; }
}