/* Shared tokens, reset, nav and layout */
:root {
  --bg: #fafafa;
  --ink: #1a1a1a;
  --mute: #6b6b6b;
  --line: #e5e5e5;
  --acc: #1a1a1a;
  --card: #eee;
  --glass: rgba(250, 250, 250, 0.78);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0b0c;
    --ink: #f2f2f3;
    --mute: #9a9a9f;
    --line: #2a2a2d;
    --acc: #f2f2f3;
    --card: #1c1c1e;
    --glass: rgba(11, 11, 12, 0.7);
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    100%/1.5 Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 1.5rem;
  padding: 0.875rem max(1.5rem, calc((100% - 64rem) / 2));
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-size: 0.875rem;
}
nav a {
  color: var(--mute);
  text-decoration: none;
  transition: color 100ms;
}
nav a:hover,
nav a:active {
  color: var(--acc);
}
nav .brand .logo { display: block; height: 22px; width: auto; }
nav .brand .logo-dark { display: none; }
:root[data-theme="dark"] nav .brand .logo-light { display: none; }
:root[data-theme="dark"] nav .brand .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) nav .brand .logo-light { display: none; }
  :root:not([data-theme]) nav .brand .logo-dark { display: block; }
}
nav .brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
  color: var(--ink);
}
main {
  max-width: 67rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mute);
}
@media (prefers-reduced-transparency: reduce) {
  nav {
    background: var(--bg);
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

:root[data-theme="light"]{color-scheme:light;--bg:#fafafa;--ink:#1a1a1a;--mute:#6b6b6b;--line:#e5e5e5;--acc:#1a1a1a;--card:#eee;--glass:rgba(250,250,250,.78)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#101113;--ink:#ececef;--mute:#a0a1a7;--line:#303136;--acc:#f2f2f3;--card:#1b1c20;--glass:rgba(16,17,19,.82)}
body{transition:background-color .2s ease,color .2s ease}

/* Footer shared by blog, privacy and 404 pages */
.site-footer{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;width:min(100% - 3rem,64rem);margin:0 auto;padding:16px 0 3rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--mute)}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--acc)}
.site-footer a:focus-visible,nav a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
.legal{max-width:42rem;margin:0 auto;padding-top:2rem}
.legal h1{font-size:clamp(1.8rem,5vw,2.4rem);letter-spacing:-.04em;line-height:1.1;margin:0 0 .6rem;font-weight:600}
.legal h2{font-size:1.05rem;margin:2rem 0 .5rem}
.legal p,.legal li{font-size:.95rem;line-height:1.7}
.legal .meta{color:var(--mute);font-size:.8rem}
.notfound{text-align:center;padding:5rem 0 3rem}
.notfound h1{font-size:clamp(2.4rem,9vw,4rem);letter-spacing:-.05em;margin:0 0 .5rem}
.notfound p{color:var(--mute)}
.notfound .go{display:inline-block;margin:.5rem .4rem;padding:.65rem 1rem;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:.85rem;font-weight:500}
.notfound .go.alt{background:var(--card);color:var(--ink)}
.footer-links{display:inline-flex;flex-wrap:wrap;gap:6px 16px}