/* ============================================================
   blog.css: the blog. The index pages (post cards, the featured
   card, the pager) and the post itself (breadcrumbs, the reading
   column, the table of contents, sharing, the author block).

   Loads after index.css and page.css and borrows their vocabulary
   (.section, .section-head, .eyebrow, .page-hero, .prose, .stack-*).
   Tokens come from base.css and follow the theme and accessibility
   modes on their own.

   The reading column is sized in ch, so it follows the text-size
   control: a visitor who enlarges the text gets a wider column, not
   fewer words per line.
   ============================================================ */

/* ===================== CARDS ===================== */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:clamp(1rem,2.5vw,1.6rem); }

/* The heading is the card's only link, stretched over the whole card
   (.post-card__title a::after), so the card is one target with one name. The
   focus ring therefore has to be drawn on the card, where the target is, not
   around the words of the heading. */
.post-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section--alt .post-card{ background:var(--bg); }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--border-2); }
.post-card:focus-within{ outline:3px solid var(--focus-ring); outline-offset:3px; }
.post-card__title a:focus-visible{ outline:none; }
html[data-contrast="high"] .post-card:hover{ box-shadow:none; transform:none; }

.post-card__media img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; display:block; border-bottom:1px solid var(--border); }
.post-card__body{ display:flex; flex-direction:column; gap:0.6rem; padding:1.5rem 1.5rem 1.4rem; flex:1 1 auto; }

.post-card__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 0.55rem; color:var(--muted); font-size:0.9rem; font-weight:700; }
.post-card__kicker{ color:var(--accent-text); letter-spacing:0.08em; text-transform:uppercase; font-size:0.78rem; }

.post-card__title{ font-size:1.3rem; line-height:1.25; }
.post-card__title a{ color:inherit; text-decoration:none; }
.post-card__title a::after{ content:""; position:absolute; inset:0; }
.post-card:hover .post-card__title a{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.post-card__lang{ font-size:0.85em; font-weight:400; color:var(--muted); }
.post-card__excerpt{ color:var(--muted); }
/* Decorative: the heading already is the link. Hidden from assistive tech. */
.post-card__more{ margin-top:auto; padding-top:0.5rem; font-weight:700; color:var(--accent-text); }
.post-card__more::after{ content:"\2192"; display:inline-block; margin-left:0.35em; transition:transform .2s ease; }
.post-card:hover .post-card__more::after{ transform:translateX(4px); }

/* The newest post: the whole first row, bigger words, the picture beside
   them when there is one. On a narrow screen it is an ordinary card. */
.post-card--featured{ grid-column:1 / -1; }
.post-card--featured .post-card__body{ padding:clamp(1.6rem,4vw,2.6rem); }
.post-card--featured .post-card__title{ font-size:clamp(1.5rem,3.2vw,2.2rem); max-width:28ch; text-wrap:balance; }
.post-card--featured .post-card__excerpt{ font-size:1.08rem; max-width:62ch; }
@media (min-width: 760px){
  .post-card--featured.post-card--media{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .post-card--featured.post-card--media .post-card__media img{ height:100%; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--border); }
}

/* ===================== PAGER ===================== */
.pager{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:clamp(2rem,5vw,3rem); }
.pager__info{ color:var(--muted); font-weight:700; }

.blog__feed{ color:var(--muted); font-size:0.95rem; }

/* ===================== POST: FRAME ===================== */
.post{ --measure:70ch; }
.post__wrap{ max-width:1100px; }

.crumbs{ padding-top:clamp(1.2rem,3vw,2rem); font-size:0.92rem; }
.crumbs__list{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0; list-style:none; padding:0; margin:0; }
.crumbs__list li{ display:inline-flex; align-items:baseline; max-width:100%; }
.crumbs__sep{ color:var(--border-2); margin-inline:0.55rem; }
/* The post's own title closes the trail; on one line, so the trail stays a
   trail and not a second headline. Assistive tech still gets the full text. */
.crumbs__here{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(100%,40ch); }

.post__head{ max-width:var(--measure); padding-block:clamp(1.4rem,4vw,2.4rem) clamp(1rem,3vw,1.8rem); }
.post__head .eyebrow{ margin-bottom:1.1rem; }
.post__title{ font-size:clamp(1.9rem,4.6vw,2.9rem); line-height:1.12; margin-bottom:1rem; text-wrap:balance; }
.post__lead{ font-size:clamp(1.12rem,2vw,1.3rem); line-height:1.5; color:var(--muted); margin-bottom:1.3rem; }
.post__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 0.6rem; color:var(--muted); font-size:0.95rem; font-weight:700; }
.post__author{ color:var(--ink); }

.post__hero{ margin:0 0 clamp(1.5rem,4vw,2.5rem); }
.post__hero img{ width:100%; height:auto; border-radius:var(--radius-media); border:1px solid var(--border); }
.post__hero figcaption{ margin-top:0.6rem; color:var(--muted); font-size:0.9rem; }

/* Text first, table of contents beside it once there is room for both. The
   aside sticks while the article scrolls past, and scrolls on its own if it
   is taller than the window. Below the breakpoint it sits above the text,
   where blog.js collapses it so it does not push the first paragraph away. */
.post__layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,4vw,2.5rem); }
.post__aside{ max-width:var(--measure); }
@media (min-width: 1100px){
  .post__layout{ grid-template-columns:minmax(0,1fr) 15rem; gap:clamp(2rem,5vw,4rem); align-items:start; }
  .post__aside{ order:2; max-width:none; position:sticky; top:calc(var(--header-h) + 1.25rem); max-height:calc(100vh - var(--header-h) - 2.5rem); overflow:auto; }
}

/* ===================== POST: THE TEXT ===================== */
/* index.css zeroes paragraph margins and strips lists for the landing page;
   running text needs both back. */
.post__body{ max-width:var(--measure); font-size:1.08rem; line-height:1.7; }
.post__body > * + *{ margin-top:1.15rem; }
.post__body h2{ font-size:clamp(1.45rem,3vw,1.85rem); line-height:1.2; margin-top:2.6rem; scroll-margin-top:calc(var(--header-h) + 1.25rem); }
.post__body h3{ font-size:clamp(1.2rem,2.4vw,1.4rem); line-height:1.25; margin-top:2.1rem; scroll-margin-top:calc(var(--header-h) + 1.25rem); }
.post__body h4{ font-size:1.1rem; margin-top:1.8rem; scroll-margin-top:calc(var(--header-h) + 1.25rem); }
.post__body h2 + *, .post__body h3 + *, .post__body h4 + *{ margin-top:0.75rem; }
/* Links in running text are underlined whatever the panel says: colour alone
   is not enough to tell a link from its sentence (WCAG 1.4.1). */
.post__body a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.post__body a:hover{ text-decoration-thickness:2.5px; }
.post__body strong{ color:var(--ink); }
.post__body ul{ list-style:disc; padding-left:1.4rem; }
.post__body ol{ list-style:decimal; padding-left:1.5rem; }
.post__body ul ul{ list-style:circle; }
.post__body li + li{ margin-top:0.55rem; }
.post__body li::marker{ color:var(--accent-text); }
.post__body blockquote{ margin:1.6rem 0; padding:0.4rem 0 0.4rem 1.2rem; border-left:4px solid var(--accent); font-size:1.12rem; }
.post__body blockquote > * + *{ margin-top:0.8rem; }
.post__body figure{ margin:1.8rem 0; }
.post__body img{ width:100%; height:auto; border-radius:var(--radius-media); }
.post__body figcaption{ margin-top:0.6rem; color:var(--muted); font-size:0.9rem; }
.post__body hr{ border:0; border-top:1px solid var(--border); margin:2.4rem 0; }
.post__body table{ display:block; overflow-x:auto; border-collapse:collapse; width:100%; }
.post__body th, .post__body td{ border:1px solid var(--border); padding:0.6rem 0.8rem; text-align:left; vertical-align:top; }
.post__body th{ background:var(--surface); }
.post__body code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.92em; background:var(--surface-2); padding:0.1em 0.35em; border-radius:var(--radius); }
.post__body pre{ overflow-x:auto; padding:1rem 1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); line-height:1.5; }
.post__body pre code{ background:none; padding:0; font-size:0.9em; }
/* A highlighted aside inside a post: <div class="callout">…</div> in the Markdown. */
.post__body .callout{ background:var(--accent-tint); border-left:3px solid var(--accent); padding:1rem 1.2rem; border-radius:var(--radius); }
html[data-spacing="wide"] .post__body{ line-height:1.95; }
html[data-spacing="wide"] .post__body > * + *{ margin-top:1.4rem; }

/* ===================== TABLE OF CONTENTS ===================== */
.toc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:0.2rem 1.2rem 0.3rem; }
.section--alt .toc{ background:var(--bg); }
.toc__summary{
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  min-height:44px; cursor:pointer; list-style:none;
  font-family:var(--font-body); font-weight:700; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-text);
}
.toc__summary::-webkit-details-marker{ display:none; }
.toc__summary::after{ content:""; flex:0 0 auto; width:0.5em; height:0.5em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-right:0.2em; transition:transform .2s ease; }
.toc__details[open] .toc__summary::after{ transform:rotate(-135deg); margin-top:0.3em; }
.toc__list{ list-style:decimal; margin:0.2rem 0 0.9rem; padding-left:1.4rem; display:grid; gap:0.4rem; font-size:0.95rem; line-height:1.4; }
.toc__list li::marker{ color:var(--accent-text); font-weight:700; }
.toc__list a{ color:var(--link); text-decoration:none; }
.toc__list a:hover{ text-decoration:underline; }
/* The section being read, set by blog.js. Weight and the underline carry it
   as much as the colour does. */
.toc__list a[aria-current="true"]{ color:var(--accent-text); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

/* ===================== POST: FOOT ===================== */
.post__foot{ max-width:var(--measure); padding-bottom:clamp(2.5rem,6vw,4rem); }
.post__topics{ margin-top:clamp(2rem,5vw,3rem); color:var(--muted); }
.post__topics-label{ font-weight:700; color:var(--ink); }

.share{ margin-top:1.6rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.share__title{ font-family:var(--font-body); font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.8rem; }
.share__list{ display:flex; flex-wrap:wrap; gap:0.6rem; list-style:none; padding:0; margin:0; }
.share__btn{
  display:inline-flex; align-items:center; gap:0.5rem; min-height:44px; padding:0.5rem 0.95rem;
  background:transparent; color:var(--ink); border:2px solid var(--border-control); border-radius:var(--radius);
  font-family:var(--font-body); font-weight:700; font-size:0.95rem; text-decoration:none; line-height:1.2;
  transition:border-color .18s ease, background .18s ease;
}
.share__btn:hover{ border-color:var(--ink); background:color-mix(in oklab,var(--ink),transparent 94%); }
.share__btn svg{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
.share__status{ margin-top:0.7rem; font-weight:700; color:var(--accent-text); overflow-wrap:anywhere; }
.share__status:empty{ display:none; }

.author{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem 1.2rem; align-items:start;
  margin-top:2rem; padding:1.4rem 1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
}
/* .brand__logo so theme.js swaps in the white mark on the dark theme; its own
   size, because the header's 32px is too small for a byline. */
.author .author__logo{ width:56px; height:56px; border-radius:12px; }
.author__label{ font-family:var(--font-body); font-weight:700; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.2rem; }
.author__name{ font-family:var(--font-display); font-weight:700; font-size:1.12rem; }
.author__bio{ color:var(--muted); font-size:0.97rem; margin-top:0.4rem; }
.author__links{ display:flex; flex-wrap:wrap; gap:0.4rem 1.2rem; margin-top:0.7rem; font-weight:700; }

@media (max-width: 480px){
  .author{ grid-template-columns:1fr; }
}