/* Blog pages: the same quiet system as the home page (white ground,
   Helvetica Neue, small grey labels), set for long reading. */
:root {
  color-scheme: light;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #121316;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --gutter: clamp(24px, 3.65vw, 64px);
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid #2c5b9b; outline-offset: 4px; border-radius: 2px; }

.site-bar { display: flex; justify-content: space-between; align-items: center; max-width: 2200px; margin: 0 auto; padding: 32px var(--gutter) 0; }
.site-bar a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-name { font-size: 18px; letter-spacing: -.025em; }
.site-bar nav { display: flex; gap: clamp(24px, 3vw, 48px); font-size: 14px; }
.site-bar nav a:hover, .site-bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

.post, .blog-index { max-width: 680px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) 24px 96px; }
.post-kicker { margin: 0; padding-top: 14px; border-top: 1px solid #e3e4e6; font-size: 14px; color: #6b6e73; }
.post-rule { margin: 0; border: 0; border-top: 1px solid #e3e4e6; }
.post h1, .blog-index h1 { margin: 40px 0 48px; font-size: clamp(44px, 7.4vw, 76px); font-weight: 300; line-height: .95; letter-spacing: -.045em; }

.post p { margin: 0 0 1.15em; font-size: 19px; line-height: 1.65; letter-spacing: -.003em; }
.post sup { line-height: 0; }
.post sup a { margin-left: 1px; font-size: 13px; color: #6b6e73; text-decoration: none; }
.post figure { margin: 2.4em 0 2.6em; }
.post figure a { display: block; border-radius: 12px; }
.post figure img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px #0000000d; background: #f4f3ef; }
.post figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: #6b6e73; }

.notes { margin-top: 64px; padding-top: 20px; border-top: 1px solid #e3e4e6; }
.notes h2 { margin: 0 0 16px; font-size: 14px; font-weight: 400; color: #6b6e73; }
.notes ol { margin: 0; padding-left: 1.3em; }
.notes li { margin-bottom: .8em; font-size: 15px; line-height: 1.55; color: #3b3d42; }
.notes li a { text-underline-offset: 3px; }
.notes .back { margin-left: 4px; color: #6b6e73; text-decoration: none; }

.post-end { display: flex; justify-content: space-between; margin-top: 64px; padding-top: 14px; border-top: 1px solid #e3e4e6; font-size: 15px; }
.post-end a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #12131659; }

.blog-intro { margin: 0 0 56px; font-size: 19px; line-height: 1.5; color: #55585d; }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e3e4e6; }
.post-list a { display: grid; gap: 8px; padding: 28px 0; border-bottom: 1px solid #e3e4e6; text-decoration: none; }
.post-list time { font-size: 14px; color: #6b6e73; }
.post-title { font-size: clamp(28px, 4vw, 36px); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.post-list a:hover .post-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.post-summary { font-size: 16px; line-height: 1.5; color: #55585d; }

@media (max-width: 600px) {
  .site-bar { padding-top: max(28px, env(safe-area-inset-top)); }
  .post p { font-size: 18px; line-height: 1.62; }
  .post figure { margin-inline: -6px; }
}