/* The blog's stylesheet. Tokens and header/footer lifted from index.html / terms.html so the blog
   reads as the same site. A file rather than an inline <style>, so the blog's CSP can say
   style-src 'self' and carry no 'unsafe-inline'.

   Shared by /blog and /build-log: both sections render through functions/_lib/blog.ts's layout. */
/* biome-ignore-all lint/style/noDescendingSpecificity: the `a` rules (.lede a, nav a, .post-card h2 a, .prose a, .back a, .foot a) style links in separate regions that never nest, so their order cannot make one override another. */
:root {
  --paper: #fbfbf9;
  --paper-deep: #f2f1ec;
  --panel: #ffffff;
  --ink: #17181c;
  --ink-70: #43454d;
  --muted: #797c85;
  --line: #17181c29;
  --line-soft: #17181c17;
  --blue: #0068f9;
  --blue-ink: #0165ff;
  --blue-wash: #eff4ff;
  --orange: #ff661f;
  --ink-on-blue: #ffffff;
  --shadow-sm: 0 1px 2px rgba(23, 24, 28, 0.04);
  --display: "Host Grotesk", "Segoe UI", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-wrap: anywhere;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}
.narrow {
  max-width: 46rem;
  padding-block: 64px;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  text-wrap: balance;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.032em;
}
p {
  margin: 0;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
.dot-accent {
  color: var(--orange);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.lede {
  font-size: 1.05rem;
  color: var(--ink-70);
  margin-top: 18px;
}
.lede a {
  color: var(--blue-ink);
}

header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
.hdr {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.brand svg {
  width: 30px;
  height: 30px;
  display: block;
}
.brand b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: -0.035em;
}
nav {
  display: flex;
  gap: 24px;
}
nav a {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
}
nav a:hover {
  color: var(--ink);
}
.btn {
  display: inline-block;
  background: var(--blue);
  color: var(--ink-on-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 7px;
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(1.08);
}

.posts {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.post-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.post-card h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.post-card h2 a {
  text-decoration: none;
}
.post-card h2 a:hover {
  color: var(--blue-ink);
}
.post-card p:last-child {
  color: var(--ink-70);
  font-size: 0.95rem;
}
.empty {
  margin-top: 40px;
  color: var(--muted);
}

.byline {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--muted);
}
.byline span {
  color: var(--ink);
  font-weight: 600;
}
.prose {
  margin-top: 36px;
}
.prose h2 {
  margin-top: 40px;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
}
.prose h3 {
  margin-top: 28px;
  font-size: 1.15rem;
}
.prose h4 {
  margin-top: 22px;
  font-size: 1rem;
}
.prose p,
.prose li {
  color: var(--ink-70);
  font-size: 1rem;
}
.prose p {
  margin-top: 14px;
}
.prose ul,
.prose ol {
  margin: 14px 0 0;
  padding-left: 1.3rem;
}
.prose li + li {
  margin-top: 6px;
}
.prose a {
  color: var(--blue-ink);
}
.prose blockquote {
  margin: 20px 0 0;
  padding: 4px 18px;
  border-left: 3px solid var(--blue);
  background: var(--blue-wash);
  border-radius: 0 8px 8px 0;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--paper-deep);
  padding: 1px 5px;
  border-radius: 4px;
}
.prose pre {
  margin-top: 16px;
  background: var(--paper-deep);
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
}
.prose pre code {
  background: none;
  padding: 0;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}
.post-note {
  margin-top: 36px;
  background: var(--paper-deep);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.86rem;
  color: var(--ink-70);
}
.author {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.author h2 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.author p {
  font-size: 0.92rem;
  color: var(--ink-70);
}
.back {
  margin-top: 28px;
}
.back a {
  color: var(--blue-ink);
}

footer {
  border-top: 1px solid var(--line);
  padding-block: 32px 44px;
  color: var(--muted);
  font-size: 0.82rem;
}
.foot {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.foot a {
  color: var(--muted);
}
.abn {
  font-family: var(--mono);
  font-size: 0.74rem;
}

@media (max-width: 600px) {
  .wrap {
    padding-inline: 16px;
  }
  .narrow {
    padding-block: 40px;
  }
  .hdr {
    gap: 14px;
  }
  .btn {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
  /* /build-log's second nav link. The brand mark already goes home, and on a phone the header has
     room for one nav link beside the brand and the button. */
  nav {
    gap: 14px;
  }
  .nav-home {
    display: none;
  }
}
/* The smallest phones: brand, one nav link and the button still fit on one line at 320px. */
@media (max-width: 380px) {
  .hdr {
    gap: 10px;
  }
  nav a {
    font-size: 0.84rem;
  }
  .btn {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}