.blog-page { padding-top: 72px; }
.blog-shell { width: min(100% - 2.5rem, 1120px); margin: 0 auto; }
.blog-hero { min-height: 68vh; padding: 18vh 0 12vh; display: flex; flex-direction: column; justify-content: flex-end; }
.blog-hero h1 { max-width: 14ch; margin: 0; font-family: var(--serif); font-size: clamp(3rem,7vw,6.8rem); font-weight: 400; line-height: 1.2; letter-spacing: -.055em; }
.blog-hero>p:last-child { max-width: 40ch; margin: 2rem 0 0; color: color-mix(in srgb,var(--ink) 64%,transparent); }
.blog-list { margin: 0; padding: 0 0 15vh; border-top: 1px solid color-mix(in srgb,var(--ink) 24%,transparent); list-style: none; }
.blog-card { border-bottom: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.blog-card>a { display: grid; grid-template-columns: 4rem minmax(0,1fr) auto; gap: 2rem; align-items: start; padding: 8vh 0; }
.blog-number,.blog-card time { color: var(--terracotta); font-size: .65rem; letter-spacing: .12em; }
.blog-card h2 { max-width: 20ch; margin: .8rem 0 1rem; font-family: var(--serif); font-size: clamp(1.8rem,3.6vw,3.8rem); font-weight: 400; line-height: 1.35; letter-spacing: -.04em; }
.blog-summary { max-width: 40ch; margin: 0; color: color-mix(in srgb,var(--ink) 64%,transparent); }
.blog-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.blog-tag { padding: .2rem .7rem; border: 1px solid var(--terracotta); color: var(--terracotta); font-size: .65rem; }
.blog-arrow { color: var(--terracotta); font-size: 1.2rem; }
.blog-message { min-height: 45vh; padding: 15vh 0; color: color-mix(in srgb,var(--ink) 64%,transparent); text-align: center; }

.post-shell { width: min(100% - 2.5rem,680px); margin: 0 auto; padding: 11vh 0 15vh; }
.post-back { display: inline-block; margin-bottom: 9vh; padding-bottom: .35rem; border-bottom: 1px solid var(--terracotta); font-size: .72rem; letter-spacing: .05em; }
.post-head time,.post-meta { color: var(--terracotta); font-size: .72rem; letter-spacing: .08em; }
.post-head h1 { margin: 1rem 0 1.5rem; font-family: var(--serif); font-size: clamp(2.5rem,6vw,4.6rem); font-weight: 400; line-height: 1.35; letter-spacing: -.045em; }
.post-meta span+span:before { content: " · "; }
.post-rule { width: 3rem; margin: 3rem 0; border: 0; border-top: 2px solid var(--terracotta); }
.post-body { font-size: 1.02rem; line-height: 1.95; }
.post-body p { margin: 0 0 1.7em; }
.post-body h2,.post-faq h2 { margin: 2.6em 0 .9em; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; }
.post-body ul { margin: 0 0 1.7em 1.2em; padding: 0; }
.post-body li { margin-bottom: .5em; }
.post-body li::marker { color: var(--terracotta); }
.post-body a,.post-sources a { color: var(--terracotta); text-decoration: underline; text-underline-offset: .22em; }
.post-cta { margin: 9vh 0 0; padding: 2rem; border: 1px solid var(--terracotta); }
.post-cta p { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.6; }
.post-sources { margin-top: 8vh; padding-top: 2rem; border-top: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.post-sources h2 { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
.post-sources ul { margin: 0; padding-left: 1.2rem; color: color-mix(in srgb,var(--ink) 70%,transparent); font-size: .86rem; line-height: 1.8; }
.post-faq { margin-top: 10vh; }
.post-faq details { padding: 1rem 0; border-top: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.post-faq details:last-child { border-bottom: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.post-faq summary { cursor: pointer; font-weight: 500; list-style: none; }
.post-faq summary:before { content: "Q. "; color: var(--terracotta); }
.post-faq details p { margin: .8rem 0 0; color: color-mix(in srgb,var(--ink) 70%,transparent); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 12vh; padding-top: 2rem; border-top: 1px solid color-mix(in srgb,var(--ink) 18%,transparent); }
.post-nav a { min-width: 0; }
.post-nav .next { text-align: right; }
.post-direction { color: var(--terracotta); font-size: .65rem; letter-spacing: .12em; }
.post-nav-title { margin-top: .5rem; font-family: var(--serif); line-height: 1.5; }
.post-notfound { min-height: 58vh; display: grid; place-content: center; text-align: center; }
.post-notfound h1 { font-family: var(--serif); font-weight: 400; }

@media (max-width:820px){
  .blog-page { padding-top: 70px; }
  .blog-hero { min-height: 62vh; padding-top: 14vh; }
  .blog-card>a { grid-template-columns: 2.5rem minmax(0,1fr); gap: 1rem; }
  .blog-arrow { display: none; }
}
@media (max-width:420px){
  .blog-shell,.post-shell { width: min(100% - 2.5rem,680px); }
  .blog-hero h1 { font-size: 2.65rem; }
  .blog-card>a { padding: 6vh 0; }
  .blog-card h2 { font-size: 1.75rem; }
  .post-head h1 { font-size: 2.4rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
}