/* Inherited color tokens animate gradients and structure lines together,
   without replacing the page's existing movement and reveal transitions. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #f5f3ef; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #292824; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #504e49; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #29282426; }
@property --grid-line { syntax: '<color>'; inherits: true; initial-value: #29282408; }
@property --surface-soft { syntax: '<color>'; inherits: true; initial-value: #e7e3dd; }
@property --surface-raised { syntax: '<color>'; inherits: true; initial-value: #faf9f6; }
@property --detail-ink { syntax: '<color>'; inherits: true; initial-value: #777168; }
:root { --surface-soft: #e7e3dd; --surface-raised: #faf9f6; --detail-ink: #777168; color-scheme: light; }
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #1c1d1c;
  --ink: #e4e1da;
  --muted: #b8b3a9;
  --line: #e4e1da29;
  --grid-line: #e4e1da0c;
  --surface-soft: #2a2b28;
  --surface-raised: #252623;
  --detail-ink: #aaa59a;
}
:root.theme-changing {
  transition: --paper 420ms ease, --ink 420ms ease, --muted 420ms ease,
    --line 420ms ease, --grid-line 420ms ease, --surface-soft 420ms ease,
    --surface-raised 420ms ease, --detail-ink 420ms ease;
}
.theme-toggle {
  flex: 0 0 44px; align-self: center; display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.theme-toggle .theme-icon-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .theme-icon-moon { display: block; }
/* Keep the full navigation usable on the narrowest supported screens. */
@media (max-width: 760px) { .main-nav { gap: 12px; } }
@media (max-width: 380px) {
  .main-nav { gap: 4px; }
  .site-header { gap: 8px; }
  .brand-name { font-size: 17px; letter-spacing: 2px; }
  .brand { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { :root.theme-changing { transition: none; } }