/* Blog and article pages. Loaded after styles.css. */
.page{background:var(--bg)}
.nav.solid{position:sticky;background:rgba(245,244,240,.86);color:var(--ink)}
.nav.solid::after{background:var(--line)}
.nav.solid .car-btn{display:none}

.article{max-width:720px;margin:0 auto;padding:clamp(40px,6vh,72px) var(--gutter) clamp(72px,10vh,120px)}
.crumbs{font-size:12px;color:var(--ink-2);margin-bottom:28px}
.crumbs span{margin:0 8px;opacity:.5}
.article-head{margin-bottom:34px}
.article-head .eyebrow{margin-bottom:14px}
.article h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5vw,58px);line-height:1.02;margin-bottom:18px}
.dek{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:620px}
.byline{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:18px}
.byline span{margin:0 6px;opacity:.5}

.article h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,36px);line-height:1.1;margin:44px 0 14px}
.article h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.article p{font-size:17px;line-height:1.65;margin-bottom:18px}
.article p strong{font-weight:600}
.article a:not(.post-card){border-bottom:1px solid rgba(23,23,22,.3)}
.article a:not(.post-card):hover{border-color:var(--accent);color:var(--accent)}

.article figure{margin:30px calc(-1 * clamp(0px,4vw,60px)) 34px}
.article figure img{display:block;width:100%;height:auto;border-radius:12px}
.article figure.lead-img{margin-top:0}
.article figcaption{font-size:12px;color:var(--ink-2);margin-top:10px;padding:0 4px}

ol.help{padding-left:22px;margin:0 0 22px}
ol.help li{font-size:17px;line-height:1.6;margin-bottom:12px}
.sources{margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.sources ul{padding-left:18px;margin:0}
.sources li{font-size:14px;line-height:1.5;margin-bottom:6px;color:var(--ink-2)}

/* listing */
.listing{max-width:900px}
.post-card{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:24px 0;border-top:1px solid var(--line)}
.post-card img{width:100%;height:auto;border-radius:12px;display:block}
.post-card h2{margin:6px 0 10px;transition:color .2s}
.post-card:hover h2{color:var(--accent)}
.post-card p{font-size:15px;color:var(--ink-2);margin-bottom:10px}
.post-card .byline{margin-top:4px}
.article figure.crop img{aspect-ratio:4/3;object-fit:cover;object-position:50% 70%}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px calc(-1 * clamp(0px,4vw,60px)) 34px}
.pair figure{margin:0}
.pair img{aspect-ratio:4/5;object-fit:cover}
.post-card img{aspect-ratio:4/3;object-fit:cover}

@media (max-width:860px){
  .post-card{grid-template-columns:1fr}
  .pair{margin-left:0;margin-right:0}
  .article figure{margin-left:0;margin-right:0}
}

/* ---- pre-order thank-you: hand-drawn tree grows behind the copy ---- */
.thanks{position:relative;max-width:none;min-height:max(560px,calc(100svh - 150px));display:grid;place-items:center;text-align:center;padding-top:16px;padding-bottom:0;overflow:hidden}
.thanks .tree-wrap{position:absolute;inset:0 0 26px;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.thanks .tree{height:min(96%,820px);width:auto;max-width:100%;flex:none;opacity:.7}
.thanks .article-head{position:relative;z-index:1;max-width:640px;margin:0;padding:28px 10px 24px}
.thanks .article-head::before{content:"";position:absolute;inset:-10px -30px;background:radial-gradient(closest-side,rgba(245,244,240,.92),rgba(245,244,240,.75) 60%,rgba(245,244,240,0));z-index:-1}
.thanks .dek{margin:0 auto}
.tree path{fill:none;stroke:#86806f;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:treegrow var(--t) linear var(--d) forwards}
.tree .l{stroke:#728462}
.tree .g{stroke:#a39c8e}
@keyframes treegrow{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.tree path{animation:none;stroke-dashoffset:0}}
@media (max-width:860px){.thanks{min-height:max(520px,calc(100svh - 120px))}.thanks .tree{height:90%;max-width:none;opacity:.55}}