/* ---------- Blog structure ----------
   Index: category filter + post cards (cards reuse .post from style.css) + year archive.
   Article: breadcrumb, header, prose, sources, update history, disclosure, related.
   Loaded only by blog.html and blog-*.html pages. */

/* Index: category filter. Hidden until blog.js finds two or more categories. */
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); }
.blog-filter button {
  font: 500 11px/1 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 2px;
  padding: 11px 16px; background: transparent; color: var(--ink); cursor: pointer;
  border: 1px solid rgba(7,7,7,.2); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-filter button:hover { border-color: var(--emerald); }
.blog-filter button[aria-pressed="true"] { background: var(--emerald); border-color: var(--emerald); color: var(--bone); }
.blog-filter button span { opacity: .6; margin-left: 6px; }
.post[hidden] { display: none; }
.post__meta time { color: inherit; }

/* Index: archive by year */
.blog-archive { margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid rgba(7,7,7,.14); }
.blog-archive h2 { font: 500 11px/1 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 2.5px; color: var(--grey); }
.blog-archive__year { display: grid; grid-template-columns: 90px 1fr; gap: 18px; margin-top: 22px; }
.blog-archive__year > b { font-size: 22px; letter-spacing: -.5px; }
.blog-archive ul { list-style: none; margin: 0; padding: 0; }
.blog-archive li { display: flex; gap: 18px; padding: 10px 0; border-bottom: 1px solid rgba(7,7,7,.08); }
.blog-archive li time { flex: 0 0 72px; font: 500 11px/1.9 "IBM Plex Mono", monospace; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--grey); }
.blog-archive li a { color: var(--ink); text-decoration: none; }
.blog-archive li a:hover { color: var(--emerald); }

/* ---------- Blueprint grid ----------
   The .bp / .bp--light pair paints the site's faint blueprint grid and lifts
   ".wrap" above it. An article uses .art-wrap, so it needs the same lift, and the
   notes sit inside that wrap rather than on their own surface. */
.bp > .art-wrap { position: relative; z-index: 1; }
.art-hero.bp::before, .art-body.bp::before { z-index: 0; }
/* The section default is a 56px square, which reads coarse behind a page of body
   copy. Use the 32px square the founder's letter plate uses: same drawing, finer
   pitch, and it matches the template a post sits next to. */
.art-hero.bp::before, .art-body.bp::before, .art-related.bp::before,
.art-coverband.bp::before { background-size: 32px 32px; }

/* The banner sits between the header and the body, so it needs its own grid
   surface: without it the page shows one plain band across the widest image. */
/* The figure's own top margin would collapse out of the band and leave a 40px
   strip with no grid, so the band owns the spacing instead. */
.art-coverband { background: var(--bone); padding-top: 40px; }
.art-coverband > .art-cover { position: relative; z-index: 1; margin-top: 0; }

/* ---------- Article ----------
   One width, 920px, a touch wider than the founder's letter at 880. Images sit
   at the column width, so the column also sets how large they read. Images stay inside the column rather than breaking
   out, and the left edge is a single unbroken line from the breadcrumb to the
   last footnote. */
:root { --art-measure: 920px; }

.art-hero { display: block; min-height: 0; background: var(--bone); color: var(--ink); padding: 128px 0 0; }
.art-wrap { max-width: var(--art-measure); margin: 0 auto; padding: 0 24px; }
.art-crumbs { font: 500 11px/1.6 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 2px; color: var(--grey); }
.art-crumbs a { color: var(--grey); text-decoration: none; }
.art-crumbs a:hover { color: var(--emerald); }
.art-cat { display: inline-block; margin-top: 30px; font: 600 11px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase; letter-spacing: 2.5px; color: var(--signal); text-decoration: none; }
.art-title { margin-top: 16px; font-size: clamp(32px, 4.6vw, 54px); font-weight: 700; letter-spacing: -1.8px; line-height: 1.07; }
.art-dek { margin-top: 20px; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.62; font-weight: 300; color: rgba(7,7,7,.66); }
.art-byline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; padding: 16px 0;
  border-top: 1px solid rgba(7,7,7,.14); border-bottom: 1px solid rgba(7,7,7,.14);
  font: 500 11px/1.6 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 1.6px; color: var(--grey); }
.art-byline b { color: var(--ink); font-weight: 600; }

/* Banner and inline figures sit at the text width, like everything else */
.art-cover { max-width: var(--art-measure); margin: 40px auto 0; padding: 0 24px; }
.art-cover img { width: 100%; height: auto; display: block; }
.art-body { background: var(--bone); padding: 40px 0 clamp(64px, 9vw, 112px); }

.prose > * + * { margin-top: 22px; }
.prose p, .prose li { font-size: 17.5px; line-height: 1.8; color: #23231f; }
/* The opening paragraph carries the piece: a size up, and no indent games. */
.prose > p:first-child { font-size: 19.5px; line-height: 1.7; color: #1a1a17; }
.prose h2 { margin-top: 64px; font-family: "Space Grotesk", sans-serif; font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600; letter-spacing: -.5px; line-height: 1.2; color: var(--ink); }
/* The same emerald mark the founder's letter puts before its headings, same
   geometry, so a post and the letter read as one family. */
.prose h2::before { content: ''; display: inline-block; vertical-align: middle;
  width: 42px; height: 3px; margin-right: 18px; background: var(--signal); }
.prose h2 + p { margin-top: 18px; }
.prose h3 { margin-top: 40px; font-size: 20px; letter-spacing: -.3px; color: var(--ink); }
.prose a { color: var(--emerald); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose blockquote { margin: 38px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--signal);
  font-size: 20px; line-height: 1.55; color: var(--ink); }
.prose blockquote cite { display: block; margin-top: 10px; font: 500 11px/1.6 "IBM Plex Mono", monospace;
  font-style: normal; text-transform: uppercase; letter-spacing: 1.6px; color: var(--grey); }
.prose sup a { text-decoration: none; font: 600 11px/1 "IBM Plex Mono", monospace; }

/* Figures stay inside the column */
.prose figure { width: 100%; margin: 36px 0; }
.prose figure img { width: 100%; height: auto; display: block; }
.art-cover figcaption, .prose figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--grey); }

/* Sources, updates, disclosure: the parts that keep every claim traceable.
   These are <section> elements, so they inherit the site's full-viewport rule
   (display:flex, centred, 100vh). Opt out the same way .sec-faq and .sec-blog do,
   or the heading floats beside the list instead of sitting above it. */
.art-notes { display: block; min-height: 0; align-items: initial;
  margin-top: 64px; padding: 26px 0 0; border-top: 1px solid rgba(7,7,7,.14); }
.art-notes + .art-notes { margin-top: 30px; }
.art-notes > h2 { display: block; margin: 0 0 16px; font: 600 11px/1 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 2.5px; color: var(--grey); }
.art-notes ol, .art-notes ul { margin: 0; padding-left: 22px; }
.art-notes li { font-size: 13.5px; line-height: 1.7; color: rgba(7,7,7,.66); }
.art-notes li + li { margin-top: 8px; }
.art-notes time { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.art-disclosure { margin-top: 30px; padding: 20px 22px; background: var(--oat-pale);
  font-size: 12.5px; line-height: 1.65; color: rgba(7,7,7,.66); }

.art-related { display: block; min-height: 0; background: var(--oat); padding: clamp(56px, 7vw, 88px) 0; }
.art-related h2 { font: 600 11px/1 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--grey); margin-bottom: 26px; }

@media (max-width: 860px) {
  .prose figure { margin: 28px 0; }
  .art-cover { margin-top: 30px; }
}
@media (max-width: 560px) {
  .art-hero { padding-top: 104px; }
  .prose h2::before { width: 28px; margin-right: 13px; }
  .art-title { letter-spacing: -1.2px; }
  .blog-archive__year { grid-template-columns: 1fr; gap: 6px; }
}

/* Photo credit inside a caption */
.art-credit { display: inline-block; margin-left: 6px; font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: rgba(7,7,7,.42); }

/* The nav is sticky, so a jump to a footnote or back to the text would land
   underneath it. Push every jump target clear of the bar. */
.prose h2[id], .prose sup a, .art-notes li[id], .prose p[id], .prose [id] { scroll-margin-top: 96px; }
.art-notes li:target { background: var(--oat-pale); box-shadow: 0 0 0 6px var(--oat-pale); }

/* ---------- Post card with a photo ----------
   The photo fills the plate and the kicker and title sit over it, under a wash
   that goes emerald at the top and near-black at the foot, so the type stays
   legible whatever the photograph is doing underneath. */
.post__cover--photo { position: relative; isolation: isolate; }
.post__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.post__cover--photo::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 73, 56, .58) 0%, rgba(7, 7, 7, .80) 100%); }