/* Blog-only rules. Tokens, nav, menu, buttons and footer come from /assets/site.css,
   which the blog pages load first. No new colours or fonts here. */

/* short pages (one post on the list) keep the footer at the bottom of a tall screen
   instead of leaving bare paper under it. Every child spans the width it had before. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body>*{width:100%}
.foot{margin-top:auto}

/* headings break evenly instead of leaving one word on the last line */
.list-head h1,.card h2,.post h1,.post h2,.post h3{text-wrap:balance}

/* the logo keeps its aspect ratio however narrow the nav gets */
.nav-logo{flex-shrink:0}
.menu-list a[aria-current="page"]{color:var(--blue)}

/* ---------- list page ---------- */
.blog-list{padding:clamp(56px,8vw,96px) 0 clamp(80px,10vw,120px)}
.list-head{max-width:960px;margin:0 auto clamp(32px,4vw,48px);padding:0 clamp(20px,4vw,32px)}
.list-head h1{font-stretch:115%;font-size:clamp(40px,6vw,64px);font-weight:900;letter-spacing:-.035em;line-height:1.05}
.list-head .lede{color:var(--slate);font-size:17px;margin-top:16px;max-width:36em}

.cats{max-width:960px;margin:0 auto clamp(28px,3.6vw,40px);padding:0 clamp(20px,4vw,32px);display:flex;gap:10px;flex-wrap:wrap}
.cat-btn{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;padding:8px 16px;border:1px solid var(--hair);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cat-btn:hover{border-color:var(--ink)}
.cat-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.cards{max-width:960px;margin:0 auto;padding:0 clamp(20px,4vw,32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:12px;padding:28px 26px;border:1px solid var(--ink);background:var(--paper);transition:background .22s,color .22s}
.card:hover,.card:focus-visible{background:var(--ink);color:var(--paper)}
.card .meta{color:var(--slate)}
.card:hover .meta,.card:focus-visible .meta{color:var(--blue)}
.card h2{font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.3}
.card .summary{font-size:15px;opacity:.8;line-height:1.65}
.card .go{margin-top:auto;padding-top:10px;font-weight:700;font-size:13px}
.card .go::after{content:" →"}
@media (max-width:720px){.cards{grid-template-columns:minmax(0,1fr)}}

.empty{max-width:960px;margin:0 auto;padding:40px clamp(20px,4vw,32px);color:var(--slate)}

/* ---------- post page ---------- */
.post{max-width:720px;margin:0 auto;padding:clamp(56px,8vw,96px) clamp(20px,4vw,32px) 0;overflow-wrap:break-word}
.post .meta{color:var(--slate);margin-bottom:14px}
.post h1{font-size:clamp(32px,5vw,48px);font-weight:850;letter-spacing:-.035em;line-height:1.15;margin-bottom:28px}
.post img{max-width:100%;height:auto;display:block}
.post .cover{width:100%;margin-bottom:32px}
.post .video{position:relative;padding-top:56.25%;margin:0 0 32px;background:var(--ink)}
.post .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post h2{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:40px 0 16px;line-height:1.3}
.post h3{font-size:22px;font-weight:800;letter-spacing:-.025em;margin:36px 0 14px;line-height:1.35}
.post p{margin:0 0 20px}
.post ul,.post ol{margin:0 0 20px 22px}
.post li{margin-bottom:8px}
.post blockquote{border-left:3px solid var(--blue);padding-left:18px;color:var(--slate);margin:0 0 24px}
.post hr{border:0;border-top:1px solid var(--hair);margin:36px 0}
.post p a,.post li a,.post blockquote a{text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;overflow-wrap:anywhere}
.post p a:hover,.post li a:hover,.post blockquote a:hover{color:var(--blue);text-decoration-color:var(--blue)}
.post .disclaimer{margin-top:32px;padding-top:20px;border-top:1px solid var(--hair);color:var(--slate);font-size:14px}
.post .cta{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 clamp(56px,8vw,88px)}

.recent{max-width:720px;margin:0 auto;padding:0 clamp(20px,4vw,32px) clamp(80px,10vw,120px)}
.recent h2{color:var(--slate);margin-bottom:16px}
.recent ul{list-style:none;border-top:1px solid var(--hair)}
.recent li{border-bottom:1px solid var(--hair)}
.recent a{display:block;padding:16px 0;font-size:15.5px;font-weight:600}
.recent a:hover{color:var(--blue)}