/* ═══════════════════════════════════════════════════════════════════
   LolliForce — "The Brief"
   Type-led editorial listing (layout: "list" in blog.config.json).
   No photography: entries are numbered rows with hairline rules, and
   the article head is a paper-deep block rather than a photo hero, so
   a post without an image_url looks intentional rather than broken.

   Tokens mirror clients/lolliforce/index.html so the blog inherits the
   site's type system exactly. The agent block catalog at the bottom is
   a hard contract — the blog agent emits those classes.
   ═══════════════════════════════════════════════════════════════════ */

.lf-blog {
  --paper: #FFFFFF;
  --paper-deep: #F8F6F1;
  --ink: #0B2545;
  --ink-soft: #44577A;
  --muted: #8D8879;
  --accent: #E57056;
  --accent-dark: #C4573F;
  --gold: #B08A4F;
  --hairline: #E2DCCD;
  --hairline-dark: rgba(11,37,69,.16);
  --blush: #FBEDE4;
  --slate: #1E2A38;
  --serif: 'DM Serif Display', Georgia, serif;
  --serif-text: 'Newsreader', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1240px;
  /* The site nav is position:fixed, so it sits OUT of flow and overlaps the
     top of any page that starts at y=0. Blog pages must add their own
     clearance (a sticky nav, like NPG's, would not need this). */
  --nav-h: 92px;
}

/* ── SITE NAV on blog pages ──────────────────────────────────────────
   The homepage keeps the nav transparent over its hero and only paints it
   via JS (nav.classList.toggle('scrolled', scrollY > 24)). Blog pages don't
   carry that script, so the nav would stay transparent and article text
   would scroll underneath it. A blog page has no transparent-over-hero
   moment worth preserving, so paint it unconditionally. */
.lf-blog #nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline);
}

/* ── scaffolding ─────────────────────────────────────────────────── */
#lf-blog-main { font-family: var(--sans); color: var(--ink); font-size: 16px; line-height: 1.65; background: var(--paper); }
#lf-blog-main *, #lf-blog-main *::before, #lf-blog-main *::after { box-sizing: border-box; }
#lf-blog-main img { max-width: 100%; display: block; }
#lf-blog-main a { color: inherit; text-decoration: none; }
#lf-blog-main ul { list-style: none; margin: 0; padding: 0; }
/* Class-scoped, :where()-wrapped so this reset carries the specificity of a
   single class and never out-ranks the layout rules below. An ID-scoped reset
   (#lf-blog-main p) silently beat every `.lf-blog .x .sub { margin-top }`
   rule and collapsed the hero spacing. */
.lf-blog :where(#lf-blog-main h1, #lf-blog-main h2, #lf-blog-main h3, #lf-blog-main p) { margin: 0; }
#lf-blog-main .container { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }

.lf-blog .eyebrow {
  display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 26px;
}
.lf-blog .blog-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 19px 34px; border: 1px solid var(--ink); color: var(--ink);
  border-radius: 999px; position: relative; overflow: hidden;
  transition: color .45s var(--ease); z-index: 0;
}
.lf-blog .blog-btn::before {
  content: ''; position: absolute; inset: 0; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease); z-index: -1;
}
.lf-blog .blog-btn:hover { color: var(--paper); }
.lf-blog .blog-btn:hover::before { transform: scaleY(1); }

/* ── LISTING: masthead ───────────────────────────────────────────── */
.lf-blog .blog-hero {
  background: var(--paper-deep); border-bottom: 1px solid var(--hairline);
  padding: calc(var(--nav-h) + 76px) 0 82px;
}
.lf-blog .blog-hero .bg { display: none; }  /* type-led: never a photo */
.lf-blog .blog-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 8.4vw, 124px); line-height: .94; letter-spacing: -.03em;
}
.lf-blog .blog-hero .sub {
  font-family: var(--serif-text); font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5; color: var(--ink-soft); max-width: 38ch; margin-top: 38px;
}

/* ── LISTING: filters ────────────────────────────────────────────── */
.lf-blog .blog-filters {
  border-bottom: 1px solid var(--hairline); background: var(--paper);
  position: sticky; top: var(--nav-h); z-index: 40;
}
.lf-blog .blog-filters .inner { display: flex; gap: 10px; overflow-x: auto; padding: 16px 0; scrollbar-width: none; }
.lf-blog .blog-filters .inner::-webkit-scrollbar { display: none; }
.lf-blog .filter {
  flex-shrink: 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 17px; border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--ink-soft); background: none; cursor: pointer;
  transition: .3s var(--ease);
}
.lf-blog .filter:hover { border-color: var(--ink); color: var(--ink); }
.lf-blog .filter.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── LISTING: numbered entry list ────────────────────────────────── */
.lf-blog .blog-entries { padding: 10px 0 100px; }
.lf-blog .entry {
  display: grid; grid-template-columns: 92px 1fr 210px; gap: 40px;
  align-items: start; padding: 44px 0; border-bottom: 1px solid var(--hairline);
  position: relative;
}
.lf-blog .entry::before {
  content: ''; position: absolute; left: -40px; right: -40px; top: 0; bottom: 0;
  background: var(--paper-deep); opacity: 0; border-radius: 4px;
  transition: opacity .4s var(--ease); z-index: -1;
}
.lf-blog .entry:hover::before { opacity: 1; }
.lf-blog .entry-no { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); padding-top: 9px; }
.lf-blog .entry h2 {
  font-family: var(--serif-text); font-weight: 400;
  font-size: clamp(26px, 2.7vw, 36px); line-height: 1.14; letter-spacing: -.02em;
}
.lf-blog .entry h2 a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 92%;
  transition: background-size .45s var(--ease);
}
.lf-blog .entry:hover h2 a { background-size: 100% 1px; }
.lf-blog .entry p {
  font-family: var(--serif-text); font-size: 17.5px; line-height: 1.6;
  color: var(--ink-soft); margin-top: 14px; max-width: 62ch;
}
.lf-blog .entry-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 11px; text-align: right; line-height: 2;
}
.lf-blog .entry-meta .cat {
  display: inline-block; margin-bottom: 11px;
  font-size: 10.5px; letter-spacing: .13em; line-height: 1.5;
  color: var(--accent-dark); background: var(--blush);
  padding: 5px 12px; border-radius: 999px;
}

/* the newest post reads as the lead item */
.lf-blog .entry.featured { grid-template-columns: 92px 1fr; padding: 56px 0 52px; }
.lf-blog .entry.featured .entry-meta { grid-column: 2; text-align: left; padding-top: 22px; }
.lf-blog .entry.featured h2 { font-family: var(--serif); font-size: clamp(38px, 4.6vw, 62px); line-height: 1.02; }
.lf-blog .entry.featured p { font-size: 20px; max-width: 54ch; margin-top: 20px; }

.lf-blog .blog-empty {
  padding: 100px 0; text-align: center;
  font-family: var(--serif-text); font-size: 19px; color: var(--ink-soft);
}

/* ── ARTICLE: head block (no photo hero) ─────────────────────────── */
.lf-blog .art-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper-deep); border-bottom: 1px solid var(--hairline);
  padding: calc(var(--nav-h) + 62px) 0 66px;
  color: var(--ink); min-height: 0; display: block;
}
/* Brand-kit illustration, laid into the right half of the hero at full
   strength. It is decoration, not the post's hero image — the per-post
   image_url still lives in .bg (hidden in this layout) and on the OG card, so
   this stays identical on every article and never competes with it.
   No mask, no blend mode, no opacity: the panel is the artwork as drawn. What
   keeps that from reading as a pasted-on rectangle is that the file it points
   at is a WHITE-BALANCED derivative — `site/blog-hero-…`, not the endcard in
   brand-kit/. The endcard's paper is a warm #F6EFDC; the derivative's is
   corrected to exactly --paper-deep, luminance-weighted so only the paper
   moves and the navy/terracotta/gold survive untouched. The panel's inward
   edge therefore lands paper-on-paper and disappears with no fade needed.
   Recipe in brain/Decisions/2026-07-28-blog-hero-illustration.md.
   Do NOT repoint this at the brand-kit original: --paper-deep also carries the
   listing masthead, inline code and blockquotes, so the fix is to rebalance a
   new derivative, never to warm the token up to match an illustration.
   scaleX(-1): the endcard illustrations carry their weight on the LEFT of the
   frame, which is backwards for a right-anchored panel. Mirroring puts the
   dense hatching against the viewport edge and leaves the artwork's own blank
   cream margin facing inward, which is exactly the side that needs to vanish.
   The flip reverses this layer's coordinate space, so background-position is
   authored in LOCAL terms where left = screen-right: `right` overflows that
   left-hand margin off the screen's right edge, so the panel meets the
   viewport in hatching rather than blank paper.
   Size is `auto 118%`, not `cover`: the hero grows with the headline, and
   sizing off the HEIGHT guarantees the layer always fills it while still
   leaving horizontal slack for that crop. `cover` leaves no slack (the margin
   comes back), and a width-based size leaves the artwork floating in a band
   whenever the hero is taller than the image scales to. */
.lf-blog .art-hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: 0; right: 0; bottom: 0; width: min(700px, 50%);
  background: url('https://pub-ed84551ce88640e09dff403b5c78d403.r2.dev/site/blog-hero-signal-through-noise.jpg') right center / auto 118% no-repeat;
  transform: scaleX(-1);
}
/* Below ~1000px the headline wraps to the full column width and runs straight
   through the panel, so drop the artwork rather than fight it. The hero falls
   back to the plain --paper-deep block it was before. */
@media (max-width: 1000px) {
  .lf-blog .art-hero::before { display: none; }
}
.lf-blog .art-hero .bg { display: none; }
.lf-blog .art-hero .inner { position: relative; z-index: 1; padding: 0; }
.lf-blog .art-hero .crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 34px;
}
.lf-blog .art-hero .crumbs a:hover { color: var(--accent); }
.lf-blog .art-hero .kicker {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-dark); background: var(--blush);
  padding: 6px 12px; border-radius: 999px;
}
.lf-blog .art-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.025em;
  max-width: 20ch; margin-top: 20px;
}
.lf-blog .art-hero .standfirst {
  font-family: var(--serif-text); font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.52; color: var(--ink-soft); max-width: 56ch; margin-top: 26px;
}
.lf-blog .byline {
  display: flex; align-items: center; gap: 15px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--hairline-dark);
}
.lf-blog .byline .disc {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-family: var(--serif-text); font-size: 17px;
}
.lf-blog .byline .who strong { display: block; font-weight: 500; font-size: 15.5px; color: var(--ink); }
.lf-blog .byline .who span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* ── ARTICLE: body ───────────────────────────────────────────────── */
.lf-blog .art-body-wrap { padding: 76px 0 40px; background: var(--paper); }
.lf-blog .article-body {
  max-width: 680px; margin: 0 auto;
  font-family: var(--serif-text); font-size: 19px; line-height: 1.72; color: #1a2b42;
}
/* Agent output wraps runs of copy in <section>, so a direct-child rhythm
   (`> * + *`) only ever reaches the sections themselves and every paragraph
   inside one loses its spacing entirely. Match one level deeper too, and give
   consecutive sections a slightly larger gap so the structure still reads. */
.lf-blog .article-body > * + *,
.lf-blog .article-body > section > * + * { margin-top: 1.15em; }
.lf-blog .article-body > section + section { margin-top: 1.9em; }
.lf-blog .article-body > p:first-child::first-letter,
.lf-blog .article-body > section:first-child > p:first-child::first-letter {
  font-family: var(--serif); font-size: 76px; line-height: .82;
  float: left; padding: 8px 14px 0 0; color: var(--accent);
}
.lf-blog .article-body h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink); margin-top: 1.9em; padding-top: .8em;
  border-top: 1px solid var(--hairline);
}
.lf-blog .article-body h3 {
  font-family: var(--serif-text); font-weight: 500; font-size: 23px;
  line-height: 1.25; margin-top: 1.7em; color: var(--ink);
}
/* The generic `> * + *` rhythm (1.15em) is too tight directly beneath a
   section heading, so the copy bumps into it. Give the first element after
   a heading its own, larger top margin. */
.lf-blog .article-body h2 + * { margin-top: 1.6em; }
.lf-blog .article-body h3 + * { margin-top: 1.2em; }
.lf-blog .article-body a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--accent); text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.lf-blog .article-body a:hover { color: var(--accent-dark); }
.lf-blog .article-body strong { font-weight: 500; color: var(--ink); }
.lf-blog .article-body ul { padding: 0; }
.lf-blog .article-body ul > li { position: relative; padding-left: 26px; margin-top: .6em; }
.lf-blog .article-body ul > li::before {
  content: ''; position: absolute; left: 3px; top: .78em;
  width: 9px; height: 1px; background: var(--accent);
}
.lf-blog .article-body ol { list-style: none; counter-reset: lf-s; margin: 0; padding: 0; }
.lf-blog .article-body ol > li { counter-increment: lf-s; position: relative; padding-left: 46px; margin-top: .9em; }
.lf-blog .article-body ol > li::before {
  content: counter(lf-s, decimal-leading-zero);
  position: absolute; left: 0; top: .28em;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--accent);
}
.lf-blog .article-body blockquote {
  margin: 2em 0; padding-left: 30px; border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: 27px; line-height: 1.28; color: var(--ink);
}
.lf-blog .article-body blockquote p { margin: 0; }
.lf-blog .article-body img { margin: 2em 0; border-radius: 2px; }
.lf-blog .article-body code {
  font-family: var(--mono); font-size: .82em; background: var(--paper-deep);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 1px 6px;
}
.lf-blog .article-body pre {
  font-family: var(--mono); font-size: 13.5px; background: var(--slate);
  color: #e8ecf2; padding: 22px 24px; border-radius: 3px; overflow-x: auto; line-height: 1.6;
}
.lf-blog .article-body pre code { background: none; border: 0; padding: 0; color: inherit; }

/* ── AGENT BLOCK CATALOG — hard contract ─────────────────────────── */
.lf-blog .article-body .callout {
  background: var(--paper-deep); border-left: 2px solid var(--ink);
  padding: 26px 30px; margin: 2em 0; border-radius: 0;
}
.lf-blog .article-body .callout::before {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 11px;
}
.lf-blog .article-body .callout > *:first-of-type { margin-top: 0; }
.lf-blog .article-body .callout p { font-size: 17.5px; }
.lf-blog .article-body .callout-takeaway::before { content: 'The short version'; }
.lf-blog .article-body .callout-warning { background: #FDF2EF; border-left-color: var(--accent-dark); }
.lf-blog .article-body .callout-warning::before { content: 'Worth flagging'; color: var(--accent-dark); }
.lf-blog .article-body .callout-tip { background: var(--blush); border-left-color: var(--gold); }
.lf-blog .article-body .callout-tip::before { content: 'In practice'; color: var(--gold); }

.lf-blog .article-body .comparison {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 2.2em 0; border-top: 1px solid var(--ink);
}
.lf-blog .article-body .comparison-col { padding: 26px 28px 28px 0; background: none; border: 0; border-radius: 0; }
.lf-blog .article-body .comparison-col + .comparison-col { padding-left: 28px; border-left: 1px solid var(--hairline); }
.lf-blog .article-body .comparison-col > *:first-child { margin-top: 0; }
.lf-blog .article-body .comparison-col h3,
.lf-blog .article-body .comparison-col h4 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 15px; padding: 0; border: 0;
}
.lf-blog .article-body .comparison-col p,
.lf-blog .article-body .comparison-col li { font-size: 16.5px; line-height: 1.6; }

.lf-blog .article-body ul.checklist { margin: 1.9em 0; padding: 0; }
.lf-blog .article-body ul.checklist > li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 15px 0; margin: 0; border-bottom: 1px solid var(--hairline);
  font-size: 17.5px;
}
.lf-blog .article-body ul.checklist > li:first-child { border-top: 1px solid var(--hairline); }
.lf-blog .article-body ul.checklist > li::before {
  content: '\002B'; position: static; flex: none;
  width: auto; height: auto; background: none; border-radius: 0;
  font-family: var(--mono); font-size: 15px; color: var(--accent);
}

.lf-blog .article-body .disclaimer {
  margin-top: 2.6em; padding: 20px 0 0; background: none; border-radius: 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.65; color: var(--muted);
}
.lf-blog .article-body .disclaimer::before {
  display: block; content: 'Note';
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 8px;
}

/* ── ARTICLE: related ────────────────────────────────────────────── */
.lf-blog .art-related { padding: 100px 0 120px; background: var(--paper); border-top: 1px solid var(--hairline); }
.lf-blog .art-related .mag-head { margin-bottom: 20px; }
.lf-blog .art-related .mag-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; margin-top: 8px;
}
/* related items reuse the card markup; render them as list rows to match */
.lf-blog .art-related .cards { display: block; }
.lf-blog .art-related .card { display: block; padding: 32px 0; border-bottom: 1px solid var(--hairline); }
.lf-blog .art-related .card .media { display: none; }
.lf-blog .art-related .card h3 {
  font-family: var(--serif-text); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 29px); line-height: 1.16; letter-spacing: -.02em;
}
.lf-blog .art-related .card h3 a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 94%; transition: background-size .45s var(--ease); }
.lf-blog .art-related .card:hover h3 a { background-size: 100% 1px; }
.lf-blog .art-related .card p { font-family: var(--serif-text); font-size: 17px; line-height: 1.58; color: var(--ink-soft); margin-top: 10px; max-width: 62ch; }
.lf-blog .art-related .card .meta {
  display: block; margin-top: 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lf-blog { --nav-h: 74px; }
  #lf-blog-main .container { padding: 0 24px; }
  .lf-blog .entry, .lf-blog .entry.featured { grid-template-columns: 1fr; gap: 12px; }
  .lf-blog .entry-no { padding-top: 0; }
  .lf-blog .entry-meta { text-align: left; padding-top: 4px; }
  .lf-blog .entry.featured .entry-meta { grid-column: 1; }
  .lf-blog .entry::before { left: -24px; right: -24px; }
  .lf-blog .article-body .comparison { grid-template-columns: 1fr; }
  .lf-blog .article-body .comparison-col { padding-right: 0; }
  .lf-blog .article-body .comparison-col + .comparison-col {
    padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); padding-top: 24px;
  }
}