/* Blog — the editorial variant of the site system (plan: blog-plan-2026-10-23.md).
   Same plum ground, palette, and mark; a lighter hand for reading.
   Loaded after /styles.css on blog pages only. */

.blog-wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.2rem 3rem; }

.blog-masthead { margin: 2.2rem 0 0.4rem; }
.blog-masthead .blog-title {
  font-family: var(--pixel); color: var(--pink);
  font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.25; margin: 0;
}
.blog-about { color: var(--grey); font-size: 0.95rem; line-height: 1.6; max-width: 62ch; }

/* ---- entry (post) typography ---- */
.entry { font-size: 1.0625rem; line-height: 1.65; }
.entry p { max-width: 66ch; margin: 0 0 1.15rem; }
.entry a { color: var(--green); }
.dateline {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em;
  color: var(--solar); text-transform: uppercase; margin: 0 0 0.7rem;
}
.entry-title {
  font-family: var(--sans); font-weight: 700; color: var(--cream);
  font-size: clamp(1.7rem, 5.4vw, 2.5rem); line-height: 1.15; margin: 0 0 0.8rem;
}
.standfirst {
  font-style: italic; color: var(--soft-pink); font-size: 1.13rem;
  line-height: 1.55; max-width: 62ch; margin: 0 0 1.6rem;
}
.kicker {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--solar); text-transform: uppercase;
}

/* ---- figures ---- */
.entry figure { margin: 1.6rem 0; }
.entry .media img { margin-inline: auto; }
.fig-shot { max-width: 30rem; margin-inline: auto; }
.fig-shot.tall { max-width: 22rem; }
.fig-shot.tall img, .fig-shot img { max-height: none; width: 100%; height: auto; }
.fignum { color: var(--solar); }

/* ---- the cover block (post hero) ---- */
.cover { text-align: center; margin: 1.8rem 0 2.2rem; }
.cover img {
  width: min(26rem, 88vw); height: auto; display: block; margin: 0 auto;
  border: 1px solid var(--gold); background: #000;
}
.cover-title {
  font-family: var(--sans); font-weight: 700; color: var(--cream);
  font-size: clamp(1.9rem, 6.5vw, 3rem); line-height: 1.1; margin: 1.2rem 0 0.35rem;
}
.cover-sub { color: var(--grey); font-size: 0.98rem; line-height: 1.55; max-width: 54ch; margin: 0 auto; }
.cover figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--grey); margin-top: 0.7rem; line-height: 1.55; }
.cover video {
  width: auto; max-width: 100%; max-height: 29rem; display: block; margin: 0 auto;
  border: 1px solid var(--gold); background: #000;
}

/* ---- pull quote ---- */
.pullquote {
  border-left: 3px solid var(--lime); margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 1.35rem; line-height: 1.45; color: var(--cream); max-width: 56ch;
}
.pullquote .attrib { display: block; font-family: var(--mono); font-style: normal; font-size: 0.75rem; color: var(--grey); margin-top: 0.5rem; }

/* ---- excerpt card (quoted snippets from an external page) ---- */
.excerpt {
  background: var(--panel); border: 1px solid #452138; border-left: 3px solid var(--gold);
  padding: 1rem 1.2rem; margin: 1.6rem 0; max-width: 62ch;
}
.excerpt p { font-style: italic; margin: 0 0 0.8rem; font-size: 1rem; }
.excerpt p:last-of-type { margin-bottom: 0.4rem; }
.excerpt .src { font-family: var(--mono); font-style: normal; font-size: 0.72rem; color: var(--grey); }
.excerpt .src a { color: var(--sage); }

/* ---- sources + colophon ---- */
.sources { margin-top: 2.4rem; border-top: 1px solid #452138; padding-top: 1rem; }
.sources h2 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--solar); text-transform: uppercase; margin: 0 0 0.6rem; }
.sources ol { margin: 0; padding-left: 1.3rem; color: var(--grey); font-size: 0.88rem; line-height: 1.6; }
.sources a { color: var(--sage); }
.colophon { font-family: var(--mono); font-size: 0.75rem; color: var(--grey); margin-top: 1.4rem; letter-spacing: 0.08em; }
.colophon a { color: var(--sage); }

/* ---- index cards ---- */
.card {
  display: block; text-decoration: none; background: var(--panel);
  border: 1px solid #452138; padding: 1.1rem 1.2rem; margin: 1.4rem 0;
}
.card:hover { border-color: var(--gold); }
.card .dateline { margin-bottom: 0.45rem; }
.card h2 { color: var(--cream); font-size: 1.35rem; line-height: 1.25; margin: 0 0 0.5rem; font-weight: 700; }
.card p { color: var(--grey); font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.6rem; }
.card .tag { font-family: var(--mono); font-size: 0.72rem; color: var(--solar); letter-spacing: 0.1em; }
.card img.thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; margin-bottom: 0.9rem; border: 1px solid #452138; }

@media (max-width: 44rem) {
  .entry { font-size: 1rem; }
  .fig-shot, .fig-shot.tall { max-width: 100%; }
  /* the masthead is absolutely positioned and stacks to two rows on
     phones; give the blog column the clearance the other pages get
     from their page-head blocks. Measured Nov 2, 2026: the stacked
     masthead is 120px tall and the article frame starts at the wrap's
     padding edge, so 5rem (80px) left the nav pill sitting on the
     frame with the dateline behind it. 8.5rem (136px) clears the
     masthead with a 16px gap. */
  .blog-wrap { padding-top: 8.5rem; }
}

/* ---- compact figures (added Oct 25, 2026 for the gesture post; additive
   only — the Pascal entry's classes are untouched). Research basis: body
   images at most one per ~300–400 words, sized to the reading column,
   never taller than the text is wide. ---- */
.entry .cover { margin: 0.4rem 0 1.6rem; }
.entry .cover img { width: auto; max-width: 100%; max-height: 29rem; }
.fig-row { display: flex; gap: 1rem; justify-content: center; align-items: flex-start; }
.fig-row img { height: 19rem; width: auto; max-width: 100%; }
@media (max-width: 44rem) {
  .fig-row { flex-direction: column; align-items: center; }
  .fig-row img { height: auto; width: 100%; max-height: 22rem; object-fit: contain; }
}

/* ---- phone figure sizing (Oct 28, 2026, Caitria's direction: blog images
   "cropped and smaller" on phone). Mobile only — desktop rendering is
   unchanged. The cover takes the same 3:2 band composition as the blog
   index card thumb; the Fig. 2 pair stacks as matched 4:3 crops instead of
   two unrelated contain-fits; Fig. 3 is height-capped, uncropped, so its
   baked-in caption survives. ---- */
@media (max-width: 44rem) {
  .entry .cover img {
    width: 100%; max-height: none; aspect-ratio: 3 / 2;
    object-fit: cover; object-position: center 45%;
  }
  .fig-row img {
    aspect-ratio: 4 / 3; object-fit: cover; max-height: none; height: auto;
  }
  .entry .fig-shot img {
    width: auto; max-width: 100%; max-height: 19rem;
  }
}