:root {
  --radius: 0.75rem;
  --font-heading: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;

  /* Customizable variable defaults (seeds). tokens.css may override these
     after load; never read seeds outside this block or the dark block. */
  --_primary: #3b82f6;
  --_secondary: var(--_primary);
  --_action: var(--_primary);
  --_surface: #eef2f7;
  --_surface: color-mix(in srgb, var(--_primary) 20%, #fff);
  --_canvas: #f8fafc;
  --_canvas: color-mix(in srgb, var(--_primary) 5%, #fff);

  /* Public palette — identity mapping in light mode. */
  --primary: var(--_primary);
  --secondary: var(--_secondary);
  --action: var(--_action);
  --surface: var(--_surface);
  --canvas: var(--_canvas);

  /* Theme internals. Static fallbacks first; contrast-color() upgrades them
     at the end of the file where supported. */
  --ink: #171714;
  --surface-ink: #171714;
  --action-ink: #ffffff;
  --band: var(--canvas);
  --success: #22c55e;
  --success: oklch(from var(--_primary) clamp(0.5, l, 0.8) clamp(0.08, c, 0.16) 145);
  --info: #3b82f6;
  --info: oklch(from var(--_primary) clamp(0.5, l, 0.8) clamp(0.08, c, 0.16) 230);
  --warning: #f59e0b;
  --warning: oklch(from var(--_primary) clamp(0.55, l, 0.85) clamp(0.08, c, 0.16) 70);
  --danger: #ef4444;
  --danger: oklch(from var(--_primary) clamp(0.5, l, 0.8) clamp(0.08, c, 0.18) 25);
}
[data-theme="dark"] {
  --primary: var(--_primary);
  --secondary: var(--_secondary);
  --action: var(--_action);
  --surface: #1e293b;
  --surface: color-mix(in srgb, var(--_primary) 20%, #000);
  --canvas: #0f172a;
  --canvas: color-mix(in srgb, var(--_primary) 5%, #000);
  --ink: #f5f5f4;
  --surface-ink: #f5f5f4;
  --action-ink: #ffffff;
  --band: var(--canvas);
}
@supports (color: contrast-color(red)) {
  :root {
    --ink: contrast-color(var(--canvas));
    --surface-ink: contrast-color(var(--surface));
    --action-ink: contrast-color(var(--action));
  }
}
:root body { color: var(--ink); background: var(--canvas); }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
}
.site-topbar { background: var(--surface); color: var(--surface-ink); border-bottom: 1px solid color-mix(in srgb, var(--surface-ink) 12%, transparent); }
.site-topbar-inner { max-width: 980px; margin: 0 auto; padding: 0.5rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.site-topbar-social { display: flex; gap: 1rem; font-size: 1.25rem; }
.site-topbar-social a { color: var(--surface-ink); }
.site-topbar-social a:hover { color: var(--action); }
.site-topbar .theme-toggle { margin-left: auto; }
.site-header {
  background: var(--surface);
  color: var(--surface-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-ink) 12%, transparent);
  position: sticky; top: 0; z-index: 10;
}
.site-header-inner {
  max-width: 980px; margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav {
  max-width: 980px; margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--primary); text-decoration: none; }
.brand-logo { height: 2rem; width: auto; }
.nav-links { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--action); }
.site-main { max-width: 980px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.site-footer { max-width: 980px; margin: 0 auto; padding: 2rem 1.25rem; color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 0.875rem; }
.hero { text-align: center; padding: 3rem 0 2.5rem; }
.hero-title { font-family: var(--font-heading); font-size: 2.75rem; margin: 0 0 0.5rem; color: var(--primary); }
.hero-subtitle { font-size: 1.2rem; color: color-mix(in srgb, var(--ink) 70%, transparent); margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; }
a { color: var(--action); }
.prose { font-size: 1.05rem; }
.prose img { max-width: 100%; border-radius: var(--radius); }
.prose blockquote { border-left: 4px solid var(--secondary); margin: 1.5rem 0; padding: 0.25rem 1rem; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.prose pre { background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 1rem; border-radius: var(--radius); overflow: auto; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.post-list { list-style: none; padding: 0; }
.recent-posts .post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.recent-posts .post-item { padding: 0; border-bottom: none; }
.post-item { padding: 1.2rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.post-item a { font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.post-item time { display: block; color: color-mix(in srgb, var(--ink) 55%, transparent); font-size: 0.85rem; margin-top: 0.25rem; }
.post-cover { width: 100%; border-radius: var(--radius); margin: 1rem 0; }

/* post image slideshow (horizontal scroll-snap carousel) */
.post-slideshow { position: relative; margin: 1rem 0; max-height: 70vh; overflow: hidden; }
.slideshow-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--radius); background: var(--band); }
.slideshow-track::-webkit-scrollbar { display: none; }
.slideshow-track:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.slideshow-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.slideshow-slide img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.slideshow-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink); box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 25%, transparent); cursor: pointer; transition: opacity 0.15s; }
.slideshow-btn:hover { background: var(--surface); }
.slideshow-btn:disabled { opacity: 0; pointer-events: none; }
.slideshow-prev { left: 0.6rem; }
.slideshow-next { right: 0.6rem; }
.slideshow-dots { position: absolute; left: 0; right: 0; bottom: 0.7rem; display: flex; justify-content: center; gap: 0.4rem; pointer-events: none; }
.slideshow-dot { width: 0.55rem; height: 0.55rem; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--canvas) 65%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); cursor: pointer; pointer-events: auto; }
.slideshow-dot.is-active { background: var(--primary); box-shadow: none; }
.more-link { display: inline-block; margin-top: 1rem; font-weight: 600; }
.recent-posts h2, .blog-title { font-size: 1.6rem; }
button, .button { font-family: var(--font-body); background: var(--action); color: var(--action-ink); border: none; padding: 0.6rem 1.2rem; border-radius: var(--radius); cursor: pointer; font-weight: 600; }
input:user-invalid, textarea:user-invalid { border-color: var(--danger); }
.theme-toggle { background: none; border: 1px solid color-mix(in srgb, var(--surface-ink) 15%, transparent); color: var(--surface-ink); padding: 0.4rem; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.theme-toggle:hover { border-color: var(--action); color: var(--action); }
[data-theme="dark"] .theme-toggle-icon-light { display: none; }
[data-theme="light"] .theme-toggle-icon-dark, :root:not([data-theme]) .theme-toggle-icon-dark { display: none; }

/* Newsletter */
.newsletter { width: 100%; padding: 1.25rem; background: color-mix(in srgb, var(--primary) 5%, transparent); border-radius: var(--radius); margin-bottom: 1rem; }
.newsletter-label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
.newsletter-row { display: flex; gap: 0.5rem; }
.newsletter-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); border-radius: var(--radius); background: transparent; color: var(--ink); font-size: 0.9rem; }
.newsletter-input::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.newsletter-button { background: var(--action); color: var(--action-ink); border: none; padding: 0.5rem 1rem; border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.newsletter-hp { position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; opacity: 0; pointer-events: none; }
.newsletter-status { margin-top: 0.5rem; font-size: 0.9rem; }
.newsletter-status.newsletter-error { color: var(--danger); }