/* Shared styles for the site's inner pages (blog, changelog). Tokens match index.html. */
:root {
  --ink: #111111; --paper: #F7F5F0; --canvas: #EDEAE3; --line: #DDD8CE; --dim: #66635D;
  --gold: #F6C445; --gold-p: #F9E3AD; --sky-p: #C2E3EF; --orange-p: #FDD3BD; --violet-p: #E4D3F0;
  --display: "Bricolage Grotesque", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.d { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; }
.eyebrow { font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
[data-release="live"] .pre-only, [data-release="pre"] .live-only { display: none !important; }

/* Floating pill nav */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; border-radius: 99px;
       background: rgba(247,245,240,.72); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
       box-shadow: 0 8px 30px -12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.06); width: max-content; max-width: calc(100vw - 24px); }
.nav .wm { font: 800 24px/1 var(--display); letter-spacing: -.05em; text-decoration: none; margin-right: 10px; }
.nav .wm span { color: var(--gold); }
.nav a.l { text-decoration: none; font: 500 14px/1 var(--body); padding: 9px 12px; border-radius: 99px; opacity: .75; }
.nav a.l:hover, .nav a.l[aria-current] { background: rgba(0,0,0,.06); opacity: 1; }
.nav .get { text-decoration: none; background: var(--ink); color: var(--paper); font: 600 14px/1 var(--body); padding: 10px 16px; border-radius: 99px; margin-left: 6px; white-space: nowrap; }
@media (max-width: 720px) { .nav a.l { display: none; } }

/* Page header */
.page-head { padding: 150px 0 56px; }
.page-head h1 { font-size: clamp(56px, 9vw, 120px); margin-top: 16px; }
.page-head p { font: 500 clamp(18px, 2vw, 21px)/1.5 var(--body); color: var(--dim); max-width: 44ch; margin-top: 20px; }

/* Footer */
footer.site { background: var(--ink); color: #a9a49a; font-size: 14px; padding: 56px 0 36px; margin-top: 120px; }
footer.site .top { display: flex; flex-wrap: wrap; gap: 36px 64px; }
footer.site .wm { color: var(--paper); font: 800 36px/1 var(--display); letter-spacing: -.05em; }
footer.site .wm span { color: var(--gold); }
footer.site .cols { display: flex; gap: 56px; flex-wrap: wrap; margin-left: auto; }
footer.site h4 { color: var(--paper); font: 600 13px/1 var(--body); margin-bottom: 12px; }
footer.site .cols a { display: block; text-decoration: none; margin: 8px 0; }
footer.site .cols a:hover { color: var(--paper); }
footer.site .bottom { border-top: 1px solid #262626; margin-top: 40px; padding-top: 20px; color: #77736a; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 14px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; }
.btn.soft { background: rgba(0,0,0,.07); color: var(--ink); }