/* ============================================================
   Yellow Robots — /blog index + /blog/<slug> post page layer
   (it-6 slice B, #70; the mood chip + Rosie-chimes-in callout, #74)
   Builds on site.css (tokens · reset · surfaces · .yr-eyebrow · .btn).
   No .yr-rays, no animated background layer; the one hover transition below
   is caught by site.css's global prefers-reduced-motion:reduce rule.
   ============================================================ */

.bl,
.bp{ padding-top:clamp(28px,6vw,56px); padding-bottom:clamp(56px,9vw,104px); }
.bl .bl__inner > * + *,
.bp .bp__inner > * + *{ margin-top:var(--yr-sp-8); }

/* ---- shared header ---- */
.bl .bl-head > * + *,
.bp .bp-head > * + *{ margin-top:var(--yr-sp-3); }
.bl .bl-title{ font-size:clamp(30px,5vw,42px); }
.bp .bp-title{ font-size:clamp(28px,4.4vw,38px); max-width:24ch; }

/* ---- post: back affordance (it-8 slice F, #126, spec criterion 19) ----
   The quiet ← Blog link now sits above the h1 (the bottom "← Back to the
   blog" link retires); .yr-muted (tokens/themes.css) already carries the
   dark/cream/no-JS-mirror triple this needs, so only the type scale and the
   gold hover are stated here. */
.bp .bp-back a{ font-weight:700; font-size:13px; }
.bp .bp-back a:hover{ color:var(--yr-gold); }

/* ---- index: header spacing (spec criterion 5) ----
   Under the border-row anatomy below, the visual row-to-row distance is the
   36px inter-row padding + the 1px rule = 37px; the header-to-first-row bar
   is >=1.5x that (~56px). The generic .bl__inner > * + * gap (32px) collapses
   with this margin (adjoining block margins take the larger, not the sum),
   so this is the one value that actually sets the visible gap; sized well
   past the 56px floor since the first row's own 18px top padding is part of
   the visually-measured text-to-text distance, not this margin alone. */
.bl .bl-head{ margin-bottom:var(--yr-sp-12); }
.bl .bl-legend{ font-weight:600; font-size:12.5px; max-width:34em; color:rgba(247,244,233,.45); }
.yr-cream .bl .bl-legend{ color:var(--yr-muted); }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bl .bl-legend{ color:var(--yr-muted); }
}

/* ---- index: empty state (#95) ----
   --yr-extrude-2 was designed for paper (9.97:1 on --yr-paper, 9.03:1 on
   --yr-cream) but the page's DEFAULT surface is .yr-dark's ink radial, where
   the same hex reads ~1.5-1.84:1 — a hard AA fail axe's gradient-aware
   contrast rule can't catch (incomplete, not violation). Default to the
   .yr-lead-weight on-dark blend (8.95:1+ against both radial stops); the
   cream twin + no-JS light-preference mirror restore --yr-extrude-2, same
   convention as the chime callout below. */
.bl .bl-empty{ font-weight:var(--yr-weight-regular); font-size:var(--yr-text-md); color:rgba(247,244,233,.72); }
.yr-cream .bl .bl-empty{ color:var(--yr-extrude-2); }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bl .bl-empty{ color:var(--yr-extrude-2); }
}

/* ---- index: rows (it-8 slice F, #126, spec criterion 18) ----
   Ruled border rows, replacing the paper-card surface: whole-row <a>
   targets, color:inherit (the global a{color:inherit} reset, site.css,
   already gives this — restated for clarity), no underline, 18px 0 padding,
   a 1px rule between rows. Hover tints the row via a same-colour box-shadow
   spread (bleeds 14px past the row edge, paints only — nothing reflows) and
   lifts the title colour; focus shows a wider-offset ring than the sitewide
   default (site.css's bare :focus-visible), since a full-bleed row needs
   more breathing room than a button/link. */
.bl .bl-rows{ list-style:none; margin:0; padding:0; }
.bl .bl-row__link{ display:block; color:inherit; text-decoration:none; padding:18px 0;
  border-bottom:1px solid rgba(252,199,43,.12);
  transition:box-shadow .15s ease; }
.yr-cream .bl .bl-row__link{ border-bottom-color:var(--yr-cream-2); }
.bl .bl-row__link:hover{ box-shadow:0 0 0 14px rgba(252,199,43,.05); }
.bl .bl-row__link:focus-visible{ outline-offset:5px; }
.bl .bl-row__link > * + *{ margin-top:var(--yr-sp-2); }
.bl .bl-row__link:hover .bl-row__title{ color:var(--yr-glow); }
.yr-cream .bl .bl-row__link:hover .bl-row__title{ color:var(--yr-ember); }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bl .bl-row__link{ border-bottom-color:var(--yr-cream-2); }
  :root:not([data-theme]) .bl .bl-row__link:hover .bl-row__title{ color:var(--yr-ember); }
}

/* Meta color: AA-derived against the page surface itself now the card is
   gone (the old --yr-extrude binding was only ever AA-safe against the
   white paper card it sat on). */
.bl .bl-row__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0 .6em; }
.bl .bl-row__date{ font-weight:700; font-size:12px; color:rgba(247,244,233,.55); }
.yr-cream .bl .bl-row__date{ color:rgba(32,28,22,.65); }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bl .bl-row__date{ color:rgba(32,28,22,.65); }
}

.bl .bl-row__title{ font-size:20px; font-weight:700; }
/* Excerpt reading colour: the same dark/cream pair as .bp-body's unified
   reading colour (below) — the row no longer sits on --yr-paper, so it needs
   the same AA-safe treatment as post-body prose. */
.bl .bl-row__excerpt{ font-weight:var(--yr-weight-regular); font-size:15.5px; line-height:1.62; color:rgba(247,244,233,.8); }
.yr-cream .bl .bl-row__excerpt{ color:#4a4339; }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bl .bl-row__excerpt{ color:#4a4339; }
}

/* ---- post: byline + body ---- */
/* Byline dark twin (it-8 slice G, spec criterion 22): the shipped unconditional
   #5A5247 (the cream ink-on-paper literal) read ~2.4:1 painted straight onto the
   dark radial — an AA fail no one caught because dark never got its own value.
   Field order is author · date · time · chip; no text-transform:capitalize per
   the drift-register ruling. Cream keeps #5A5247 (already AA-clean there),
   restated explicitly below + the no-JS light mirror, cream-twin lockstep. */
.bp .bp-byline{ font-weight:600; font-size:15px; line-height:1.9; color:rgba(247,244,233,.45); }
.yr-cream .bp .bp-byline{ color:#5A5247; }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bp .bp-byline{ color:#5A5247; }
}

.bp .bp-body{ font-weight:var(--yr-weight-regular); font-size:16px; line-height:1.7; }
.bp .bp-body > * + *{ margin-top:var(--yr-sp-4); }
/* Unified reading colour (spec criterion 7): paragraphs AND list items share
   one colour per theme — the bug this fixes is site.css's generic `p` rule
   never reaching `<li>`, so a post's bullets read at a different colour than
   its prose. Both values are new (not a reuse of site.css's .yr-dark/.yr-cream
   p tone), so both the dark default and the cream override are stated here,
   plus the no-JS light mirror in cream-twin lockstep. */
.bp .bp-body p,
.bp .bp-body li{ line-height:1.62; color:rgba(247,244,233,.8); }
.yr-cream .bp .bp-body p,
.yr-cream .bp .bp-body li{ color:#4a4339; }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bp .bp-body p{ color:#4a4339; }
  :root:not([data-theme]) .bp .bp-body li{ color:#4a4339; }
}

/* Post-prose links (design it-11, spec criterion 6): a rule under the text,
   never colour alone — scoped to .bp-body only, the global a{color:inherit;
   text-decoration:none} reset (site.css) stands everywhere else, including
   .bl-row__link (slice F). The underline never comes off in prose: only
   colour/rule properties transition, never text-decoration-line itself. */
.bp .bp-body a{ color:var(--yr-gold); text-decoration-line:underline;
  text-decoration-color:rgba(252,199,43,.42); text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .12s ease, text-decoration-color .12s ease, text-decoration-thickness .12s ease; }
.yr-cream .bp .bp-body a{ color:var(--yr-ink); text-decoration-color:var(--yr-ember); text-decoration-thickness:2px; }
.bp .bp-body a:hover{ color:var(--yr-glow); text-decoration-color:currentColor; }
.yr-cream .bp .bp-body a:hover{ text-decoration-color:var(--yr-amber); text-decoration-thickness:3px; }
.bp .bp-body a:focus-visible{ outline-offset:3px; }
.bp .bp-body a:active{ color:var(--yr-amber); }
.yr-cream .bp .bp-body a:active{ color:var(--yr-ember); }
/* Emphasis interplay (issue #125's real italic/weight faces land first, #127
   depends on them): inside <strong> the link keeps its own colour + the
   inherited 800 weight; inside <del> it surrenders the link colour to del's
   quieter retraction tone but keeps the underline rule. */
.bp .bp-body strong a{ font-weight:var(--yr-weight-bold); color:var(--yr-gold); }
.yr-cream .bp .bp-body strong a{ color:var(--yr-ink); }
.bp .bp-body del a{ color:inherit; }
/* .yr-cream .bp .bp-body a is (0,3,1) — beats .bp .bp-body del a's (0,2,2), so
   del must be reasserted at (0,3,2) here or the link keeps --yr-ink in cream. */
.yr-cream .bp .bp-body del a{ color:inherit; }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bp .bp-body a{ color:var(--yr-ink); text-decoration-color:var(--yr-ember); text-decoration-thickness:2px; }
  :root:not([data-theme]) .bp .bp-body a:hover{ text-decoration-color:var(--yr-amber); text-decoration-thickness:3px; }
  :root:not([data-theme]) .bp .bp-body a:active{ color:var(--yr-ember); }
  :root:not([data-theme]) .bp .bp-body strong a{ color:var(--yr-ink); }
  :root:not([data-theme]) .bp .bp-body del a{ color:inherit; }
}

/* ---- mood chip (#74; ruled key-value pill, it-8 slice F, #126, spec
   criterion 9) ----
   Real spans, never ::before: a quiet "mood" key, a stretched ink hairline,
   then the value on the DS mood-accent background (tokens/colors.css
   --yr-mood-*) with ink text — the value's own contrast never depends on the
   surface it lands on (every mood token reads >=7.5:1 against --yr-ink),
   AA-safe by construction, no cream twin needed for the value. The key has
   no colour of its own — it rides color:inherit from whichever surface-safe
   ancestor renders it (.bl-row__date's twin on the index, .bp-byline's twin
   on post pages) at a quiet opacity, so it never needs a third colour pin. */
.mood-chip{ font-family:var(--yr-font-body); white-space:nowrap; }
.mood-chip__key{ font-weight:700; font-size:11px; text-transform:lowercase; opacity:.68; }
.mood-chip__hairline{ display:inline-block; width:1px; height:1.4em; margin:0 6px;
  background:rgba(32,28,22,.3); vertical-align:middle; }
.mood-chip__value{ display:inline-block; font-weight:800; font-size:11.5px; color:var(--yr-ink);
  padding:3px 10px; border-radius:var(--yr-radius-pill); vertical-align:-3px; }
.mood-chip__value--great{ background:var(--yr-mood-great); }
.mood-chip__value--good{ background:var(--yr-mood-good); }
.mood-chip__value--okay{ background:var(--yr-mood-okay); }
.mood-chip__value--rough{ background:var(--yr-mood-rough); }

/* ---- Rosie-chimes-in callout (#74) ----
   Set off from the author's prose with a full rule + a gradient-tinted panel
   (it-8 slice G, spec criterion 22 — the earlier left-bar drops in favour of
   the same anatomy as /privacy's .pv-chime, public/styles/privacy.css, so the
   two chimes read as one family). Unlike the chip, this sits directly on the
   raw page surface (.bp-body has no background of its own), so its accent
   DOES depend on which DS surface is active — cream twin + the no-JS
   light-preference mirror stay in lockstep with each other and with
   tokens/themes.css, same convention as site.css.
   NO avatar, no face, no mood-expression: the tag is the only label. */
.bp .chime{ margin:0; padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,24px);
  border-radius:var(--yr-radius-lg); border:1px solid rgba(252,199,43,.26);
  background:linear-gradient(180deg, rgba(252,199,43,.12), rgba(252,199,43,.03)); }
.bp .chime__tag{ margin:0 0 8px; font-family:var(--yr-font-body); font-weight:900;
  font-size:11px; letter-spacing:var(--yr-tracking-caps); text-transform:uppercase; color:var(--yr-gold); }
/* True italic (issue #125) - the aside is one of the two brand devices the
   italic face exists for (with .cp-card__problem, capabilities.css:33). */
.bp .chime__body{ font-weight:500; font-style:italic; font-size:16px; line-height:1.7; }
.bp .chime__body > * + *{ margin-top:var(--yr-sp-3); }

.yr-cream .bp .chime{ background:#FFF3D0; border-color:rgba(242,165,22,.3); }
.yr-cream .bp .chime__tag{ color:var(--yr-extrude-2); }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bp .chime{ background:#FFF3D0; border-color:rgba(242,165,22,.3); }
  :root:not([data-theme]) .bp .chime__tag{ color:var(--yr-extrude-2); }
}

/* ---- signup colophon (it-8 slice H, #128, spec criterion 23) ----
   Once per post, after the last paragraph, before the footer: the post's
   end-rule hairline, a Jost 700 15px lead-in, the shared .capture row (pill
   input + gold button, byte-identical anatomy to the home hero's form), and
   the two-line microcopy — all centred, the row capped at the same 30rem the
   hero uses. No privacy link of its own: the shared footer's /privacy link
   is the point-of-collection link here (the home form keeps its full note
   string with its own link, untouched). */
.bp-colophon{ text-align:center; }
.bp-colophon__rule{ border:none; border-top:1px solid rgba(252,199,43,.16); margin:0 0 var(--yr-sp-8); }
.yr-cream .bp-colophon__rule{ border-top-color:var(--yr-cream-2); }

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .bp-colophon__rule{ border-top-color:var(--yr-cream-2); }
}

.bp-colophon__lead{ font-family:var(--yr-font-heading); font-weight:700; font-size:15px; margin:0 0 var(--yr-sp-5); }
.bp-colophon .capture{ max-width:30rem; margin-inline:auto; text-align:left; }
.bp-colophon .capture__status,
.bp-colophon .capture__announce{ text-align:center; }
.bp-colophon .capture__note{ max-width:30rem; margin-left:auto; margin-right:auto; }