/* The journal extends the existing Stayhabit system without changing other pages. */
.blog-intro { padding-block:66px 56px; max-width:1248px; }
.blog-intro h1 { max-width:850px; font-size:clamp(48px,5.5vw,80px); letter-spacing:-.065em; line-height:1.08; margin:24px 0; }
.blog-intro h1 em { color:var(--coral-ink); font-style:normal; }
.blog-intro>p { color:var(--muted); font-size:19px; line-height:1.85; max-width:620px; margin-bottom:0; }
.blog-feature { margin-bottom:72px; }
.post-featured { display:grid; grid-template-columns:1.1fr 1fr; background:var(--sand-soft); border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.post-image { display:block; overflow:hidden; aspect-ratio:1.6; border-radius:16px; background:var(--sand); }
.post-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.post-card:hover .post-image img { transform:scale(1.025); }
.post-featured .post-image { aspect-ratio:auto; min-height:380px; border-radius:0; }
.post-copy { padding-block:24px; }
.post-featured .post-copy { align-self:center; padding:40px; }
.post-kicker { font-size:12px; font-weight:600; color:var(--coral-ink); margin-bottom:14px; }
.post-card h2 { font-size:25px; line-height:1.35; letter-spacing:-.035em; margin:0 0 14px; }
.post-card h2 a:hover { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.post-featured h2 { font-size:clamp(28px,2.6vw,38px); }
.post-excerpt { font-size:15px; line-height:1.85; color:var(--muted); margin-bottom:22px; }
.post-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:12px; }
.post-read { display:inline-flex; gap:24px; align-items:center; min-height:44px; margin-top:14px; font-size:13px; font-weight:550; }
.post-read span { font-size:20px; color:var(--coral-ink); }
.blog-library { padding-bottom:64px; }
.blog-library-head { display:flex; align-items:end; justify-content:space-between; gap:32px; padding-top:32px; border-top:1px solid var(--line); }
.blog-library-head h2,.blog-related>h2 { font-size:32px; letter-spacing:-.04em; }
.blog-search { width:min(100%,320px); }
.blog-search label { display:block; font-size:12px; margin-bottom:8px; color:var(--muted); }
.blog-search input { width:100%; min-height:46px; border:1px solid var(--line); border-radius:8px; background:transparent; padding:10px 14px; color:var(--navy); }
.blog-filters { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 16px; }
.blog-filters button { font-size:13px; min-height:44px; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:30px; padding:10px 18px; }
.blog-filters button[aria-pressed=true] { color:white; background:var(--navy); border-color:var(--navy); }
.blog-result-count { color:var(--muted); font-size:12px; margin-bottom:26px; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.post-grid .post-card { min-width:0; border-bottom:1px solid var(--line); }
.post-grid .post-card[hidden] { display:none; }
.blog-empty { padding:40px 24px; border:1px dashed var(--line); border-radius:12px; }
.article-header { max-width:900px; padding-block:60px 40px; text-align:center; }
.article-header h1 { font-size:clamp(36px,4.2vw,60px); letter-spacing:-.055em; line-height:1.2; margin-bottom:24px; }
.article-deck { font-size:19px; color:var(--muted); line-height:1.85; max-width:700px; margin:0 auto 26px; }
.article-header .post-meta { justify-content:center; }
.article-cover { margin-block:0 60px; }
.article-cover img { width:100%; aspect-ratio:2.4; height:auto; object-fit:cover; border-radius:22px; }
.article-layout { display:grid; grid-template-columns:240px minmax(0,720px); justify-content:space-between; gap:60px; padding-bottom:64px; }
.article-aside { align-self:start; position:sticky; top:120px; max-height:calc(100svh - 145px); overflow:auto; }
.article-toc { border-top:1px solid var(--line); padding-top:20px; }
.article-toc p { font-size:12px; font-weight:600; color:var(--muted); }
.article-toc a { display:block; padding-block:10px; font-size:13px; line-height:1.6; border-bottom:1px solid var(--line); }
.article-toc a:hover,.article-back:hover { color:var(--coral-ink); }
.article-back { display:inline-flex; min-height:44px; align-items:center; font-size:13px; margin-top:16px; }
.article-prose { min-width:0; font-size:18px; line-height:1.95; overflow-wrap:anywhere; }
.article-prose h2 { font-size:30px; line-height:1.3; margin:48px 0 20px; letter-spacing:-.035em; }
.article-prose h2:first-child { margin-top:0; }
.article-prose h3 { font-size:23px; margin:32px 0 16px; }
.article-prose p,.article-prose ul,.article-prose ol { margin-bottom:24px; }
.article-prose li { margin-bottom:12px; padding-left:5px; }
.article-prose a { color:var(--coral-ink); text-decoration:underline; text-underline-offset:4px; }
.article-prose img { border-radius:12px; height:auto; }
.article-prose blockquote { border-left:3px solid var(--coral-ink); margin:32px 0; padding:16px 24px; background:var(--sand-soft); }
.article-prose blockquote p:last-child { margin-bottom:0; }
.article-prose pre { padding:20px; overflow:auto; background:var(--sand-soft); border-radius:8px; font-size:14px; }
.article-prose table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; font-size:15px; }
.article-prose td,.article-prose th { padding:12px; border:1px solid var(--line); text-align:left; }
.article-author { display:flex; gap:20px; align-items:start; padding-top:28px; border-top:1px solid var(--line); margin-top:40px; font-size:14px; }
.article-author p { color:var(--muted); margin:4px 0; font-size:14px; }
.author-mark { display:grid; place-items:center; width:52px; height:52px; flex-shrink:0; border-radius:50%; background:var(--sand-soft); color:var(--coral-ink); font-size:26px; font-weight:600; letter-spacing:-.075em; }
.article-updated { font-size:12px; color:var(--muted); }
.blog-related { padding-block:36px 64px; border-top:1px solid var(--line); }
.blog-related>h2 { margin-bottom:32px; }
@media(max-width:1000px) {
  .post-featured .post-copy { padding:28px; }
  .post-featured .post-image { min-height:360px; }
  .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .article-layout { grid-template-columns:180px minmax(0,1fr); gap:36px; }
}
@media(max-width:650px) {
  .blog-intro { padding-block:40px; }
  .blog-intro h1 { font-size:48px; }
  .blog-intro>p,.article-deck { font-size:17px; }
  .post-featured { grid-template-columns:1fr; border-radius:18px; }
  .post-featured .post-image { min-height:0; aspect-ratio:1.5; }
  .post-featured .post-copy { padding:24px; }
  .post-featured h2 { font-size:28px; }
  .blog-feature { margin-bottom:40px; }
  .blog-library-head { align-items:start; flex-direction:column; gap:24px; }
  .blog-search { width:100%; }
  .post-grid { grid-template-columns:1fr; gap:28px; }
  .article-header { padding-block:40px 28px; text-align:left; }
  .article-header .post-meta { justify-content:start; }
  .article-header h1 { font-size:36px; }
  .article-cover { margin-bottom:32px; }
  .article-cover img { aspect-ratio:1.5; border-radius:14px; }
  .article-layout { grid-template-columns:1fr; gap:32px; padding-bottom:40px; }
  .article-aside { position:static; max-height:none; }
  .article-back { display:none; }
  .article-prose { font-size:17px; line-height:1.9; }
  .article-prose h2 { font-size:27px; }
  .blog-related { padding-bottom:40px; }
}
@media(prefers-reduced-motion:reduce) { .post-image img { transition:none; } }