/* =========================================================
   hanah — blog styles (listing + article)
   Loaded only on /blog/ pages, on top of styles.css.
   ========================================================= */

/* ---------- listing ---------- */
.bloglist { max-width: 1180px; margin: 0 auto; padding: 64px 24px 96px; }
/* keep the left edge flush with the nav's .container, which drops to 20px gutters */
@media (max-width: 560px) { .bloglist { padding-right: 20px; padding-left: 20px; } }
.bloghero { max-width: 720px; margin: 0 0 40px; }
.bloghero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.05; margin: 0 0 14px; }
.bloghero p { font-size: 1.1rem; color: var(--muted); margin: 0; }
.bloghero__landing { margin-top: 24px; }

/* per-profession sections (/blog/<slug>/) — real links, unlike the filter below them */
.blogsections { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.blogsections__label { color: var(--muted); font-size: .9rem; margin-left: 4px; }
.blogsections a { padding: 6px 14px; border-radius: 999px; background: var(--sage); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: .88rem; font-weight: 500; transition: box-shadow .15s ease, color .15s ease; }
.blogsections a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.blogfilter { display: flex; gap: 8px; margin: 0 0 32px; flex-wrap: wrap; }
.blogfilter button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font-size: .9rem; font-weight: 500; transition: all .15s ease; }
.blogfilter button:hover { color: var(--ink); border-color: var(--ink); }
.blogfilter button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.bloggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.bcard { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--cream); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Full-bleed 100px band: the whole scene fits (contain), and the band is painted
   the scenes' own cream so the letterbox reads as image. max-width: none beats the
   global img rule, which otherwise stops the bleed short of the right edge. */
.bcard__img { display: block; width: calc(100% + 52px); max-width: none; height: 100px; margin: -26px -26px 4px; border-radius: 21px 21px 0 0; object-fit: contain; background: #faf0e3; }
.bcard__cat { align-self: flex-start; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; border-radius: 999px; }
.bcard__cat--article { background: var(--mint); color: var(--ink); }
.bcard__cat--update { background: var(--sage); color: var(--ink-2); border: 1px solid var(--line); }
.bcard__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.bcard__excerpt { color: var(--muted); font-size: .96rem; margin: 0; flex: 1; }
.bcard__date { color: var(--muted); font-size: .82rem; }
.blogempty { color: var(--muted); padding: 40px 0; }

/* ---------- article ---------- */
/* left-aligned inside .container so the column starts flush with the nav logo */
.post { max-width: 720px; margin: 0 auto; padding: 56px 0 40px; }
.post__back { display: inline-block; color: var(--muted); font-size: .9rem; margin: 0 0 28px; }
.post__back:hover { color: var(--ink); text-decoration: underline; }
.post__cat { display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; border-radius: 999px; background: var(--mint); color: var(--ink); margin: 0 0 16px; }
/* the post's profession section(s), beside the category */
.post__prof { display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; border-radius: 999px; background: var(--sage); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); margin: 0 2px 16px 0; }
.post__prof:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.post__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.08; margin: 0 0 14px; }
.post__meta { color: var(--muted); font-size: .92rem; margin: 0 0 28px; }

.post__body { font-size: 1.08rem; line-height: 1.7; }
.post__body > *:first-child { margin-top: 0; }
.post__body h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.6rem; letter-spacing: -0.01em; margin: 44px 0 14px; }
.post__body h3 { font-size: 1.2rem; font-weight: 600; margin: 32px 0 10px; }
.post__body p { margin: 0 0 18px; color: var(--ink); }
.post__body ul, .post__body ol { margin: 0 0 18px; padding-right: 22px; }
.post__body li { margin: 0 0 8px; }
.post__body a { color: var(--lime-2); text-decoration: underline; text-underline-offset: 2px; }
.post__body a:hover { color: var(--ink); }
.post__body blockquote { margin: 0 0 22px; padding: 4px 20px 4px 0; border-right: 3px solid var(--lime); color: var(--ink-2); font-style: italic; }
.post__body img { display: block; max-width: 100%; width: auto; height: auto; border-radius: var(--radius); margin: 8px auto 24px; }
.post__body video { width: 100%; border-radius: var(--radius); margin: 8px 0 24px; display: block; }
.post__body figure { margin: 0 0 24px; }
.post__body figcaption { color: var(--muted); font-size: .85rem; margin-top: 6px; }

/* comparison tables — .post__table is the horizontal scroll surface on narrow screens */
.post__table { overflow-x: auto; margin: 8px 0 24px; }
.post__table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.post__table th, .post__table td { text-align: right; vertical-align: top; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--line); }
.post__table th { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.post__table td:first-child { font-weight: 600; }

.post__foot { max-width: 720px; margin: 0 auto; padding: 0 0 80px; }

/* ---------- article: sticky table of contents ---------- */
/* The reading column stays 720px and the TOC lives in the gutter beside it.
   Below 1040px there is no gutter to live in, so the TOC is dropped entirely
   and the column centres — the post reads as one column, as it always has.
   Built from the post's <h2>s at build time (postToc in .eleventy.js). */
.post__toc { display: none; }
@media (min-width: 1040px) {
  .postpage { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  /* margin-inline back to 0: an auto margin makes a grid item shrink to its
     content instead of filling its 720px track. */
  .postpage .post { grid-column: 1; grid-row: 1; margin-inline: 0; }
  .postpage .post__foot { grid-column: 1; grid-row: 2; margin-inline: 0; }
  .postpage .post__toc {
    display: block; grid-column: 2; grid-row: 1;
    position: sticky; top: 92px; margin-top: 124px;
    max-height: calc(100vh - 124px); overflow-y: auto;
    font-size: .9rem; line-height: 1.35;
  }
}
.post__toc-label { margin: 0 14px 12px 0; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.post__toc ol { list-style: none; margin: 0; padding: 0; }
.post__toc li { margin: 0; }
.post__toc a { display: block; padding: 6px 13px 6px 0; border-right: 1px solid var(--line); color: var(--muted); }
.post__toc a:hover { color: var(--ink); border-right-color: var(--ink-2); }
.post__toc a[aria-current="true"] { color: var(--ink); border-right: 2px solid var(--lime); padding-right: 12px; }

/* clears the sticky site nav when a TOC link jumps to a heading */
.post__body h2 { scroll-margin-top: 92px; }
.post__for { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 28px; font-size: 1.05rem; font-weight: 600; }
.post__for a { color: var(--lime-2); }
.post__for a:hover { color: var(--ink); text-decoration: underline; }
.post__cta { border-top: 1px solid var(--line); padding-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.post__cta p { margin: 0; font-size: 1.05rem; font-weight: 500; }
.post__cta a { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; background: var(--lime); color: #fff; font-weight: 600; }
.post__cta a:hover { background: var(--lime-2); }

/* Blog contract: ordinary Markdown sections, shared presentation. */
.post__breadcrumbs { margin-bottom: 24px; color: var(--muted); font-size: .85rem; }
.post__breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0; padding: 0; }
.post__breadcrumbs li + li::before { content: "/"; margin-left: 10px; }
.post__breadcrumbs a, .post__meta a, .post__review a, .post__author a, .post__editorial a { text-decoration: underline; text-underline-offset: 3px; }
.post__meta { line-height: 1.8; }
.post__review { margin: -12px 0 28px; color: var(--muted); font-size: .9rem; }
.post__takeaways { background: var(--sage); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin: 28px 0 36px; }
.post__body .post__takeaways h2 { margin: 0 0 14px; font-size: 1.35rem; }
.post__body .post__takeaways ul { margin-bottom: 0; }
.post__takeaways li:last-child { margin-bottom: 0; }
.post__sources, .post__author, .post__related { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.post__sources h2, .post__author h2, .post__related h2 { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; margin: 0 0 14px; }
.post__sources ul, .post__related ul { padding-right: 22px; }
.post__sources li, .post__related li { margin-bottom: 12px; overflow-wrap: anywhere; }
.post__sources a, .post__related a { color: var(--lime-2); text-decoration: underline; }
.post__sources span, .post__related p { color: var(--muted); font-size: .9rem; }
.post__related p { margin: 6px 0 0; }
.post__related { margin: 0 0 32px; }
.post__author p { font-size: .95rem; line-height: 1.7; }
.post__update-note, .post__editorial { color: var(--muted); font-size: .85rem; line-height: 1.6; }
@media (max-width: 1039px) {
  .post__takeaways { padding: 20px; }
}

/* Article images are centred even when older inline markup supplies margins. */
.post__body img { margin-inline: auto !important; }