/* ═══════════════════════════════════════════════════════════════════
   blog-static — shared blog stylesheet ("Blacktop Editorial" system)
   Theme per client by overriding the --blog-* variables at the top.
   Copy this file to the client site root as blog.css; the build copies
   it to dist/blog/blog.css and every blog page links it AFTER the
   site's own chrome CSS.

   The agent block catalog at the bottom (callout / comparison /
   checklist / disclaimer) is a hard contract with the blog agent's
   rewrite step — every client blog must style all of it.

   DRIFT WARNING: each client's blog.css is a COPY of this file, not a
   reference to it. A fix made here does NOT reach clients already wired
   up. After changing this file, propagate to every clients/<slug>/blog.css
   and rebuild those sites, or the fix ships to new tenants only. (This bit
   us once: the h2/h3 spacing fix landed here and on LolliForce but silently
   skipped NPG and Paver.)
   ═══════════════════════════════════════════════════════════════════ */

.lf-blog {
  /* ── theme tokens: override these per client ─────────────────── */
  --blog-primary: #1c63b8;        /* links, primary buttons */
  --blog-primary-dark: #154f96;
  --blog-accent: #f0a500;         /* kickers, rules, highlights */
  --blog-accent-dark: #d4920a;
  --blog-ink: #0a0d14;            /* darkest surface (hero overlay base) */
  --blog-surface-dark: #1e2330;   /* quote blocks, dark bands */
  --blog-surface: #f4f6f9;        /* light section background */
  --blog-card: #ffffff;
  --blog-text: #1e2330;
  --blog-text-light: #5a6075;
  --blog-border: #e2e6ef;
  --blog-font-heading: 'Barlow Condensed', sans-serif;
  --blog-font-body: 'Barlow', sans-serif;
  --blog-radius: 6px;
  --blog-radius-lg: 12px;
  --blog-transition: 0.22s ease;
  --blog-max-width: 1200px;
  --blog-prose-width: 720px;
  /* heading treatment — uppercase suits condensed grotesques; set to
     none + adjust letter-spacing for serif/humanist brands */
  --blog-heading-transform: uppercase;
  --blog-heading-weight: 900;
}

/* ── scaffolding ─────────────────────────────────────────────────── */
#lf-blog-main { font-family: var(--blog-font-body); color: var(--blog-text); line-height: 1.65; }
#lf-blog-main *, #lf-blog-main *::before, #lf-blog-main *::after { box-sizing: border-box; }
.lf-blog :where(#lf-blog-main img) { max-width: 100%; height: auto; display: block; }
#lf-blog-main a { text-decoration: none; color: inherit; }
#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; }
/* Same ID-specificity trap as above — an unwrapped #lf-blog-main .container
   padding:0 24px silently beat `.art-hero .inner { padding: 140px ... }`
   (3 classes) on Paver, collapsing the article header into the fixed nav. */
.lf-blog :where(#lf-blog-main .container) { max-width: var(--blog-max-width); margin: 0 auto; padding: 0 24px; }

.lf-blog .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--blog-font-heading); font-size: 12px;
  font-weight: 800; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--blog-accent);
}
.lf-blog .eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--blog-accent); }

.lf-blog .kicker {
  display: inline-block; background: var(--blog-accent); color: var(--blog-ink);
  font-family: var(--blog-font-heading); font-size: 11.5px; font-weight: 900;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}
.lf-blog .kicker.blue { background: var(--blog-primary); color: #fff; }

.lf-blog .meta {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--blog-text-light);
}

.lf-blog .blog-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--blog-font-heading); font-size: 14px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 13px 26px; border-radius: var(--blog-radius);
  background: var(--blog-primary); color: #fff;
  transition: background var(--blog-transition), transform var(--blog-transition);
}
.lf-blog .blog-btn:hover { background: var(--blog-primary-dark); transform: translateY(-1px); }

/* ── LISTING: hero masthead ──────────────────────────────────────── */
.lf-blog .blog-hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--blog-surface-dark);
  padding: 96px 0 0;
}
.lf-blog .blog-hero .bg { position: absolute; inset: 0; }
.lf-blog .blog-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.lf-blog .blog-hero .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,13,20,.99) 10%, rgba(10,13,20,.86) 45%, rgba(10,13,20,.62) 100%);
}
.lf-blog .blog-hero .inner { position: relative; z-index: 1; }
.lf-blog .blog-hero h1 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(48px, 8vw, 104px); line-height: .87; letter-spacing: -1.5px;
  margin: 14px 0 0; max-width: 14ch;
}
.lf-blog .blog-hero .sub {
  max-width: 540px; margin-top: 34px; color: rgba(255,255,255,.72);
  font-size: 16.5px; line-height: 1.7;
}

/* featured card docked into hero bottom */
.lf-blog .feat-card {
  margin-top: 52px; display: grid; grid-template-columns: 1.25fr 1fr;
  background: var(--blog-card); color: var(--blog-text);
  border-radius: var(--blog-radius-lg) var(--blog-radius-lg) 0 0; overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0,0,0,.3);
}
/* Single-post state: no grid follows the card, so its squared bottom edge
   butts the footer and reads as cut off. Close the shape off; the rule
   stops applying the moment a second post exists. */
.lf-blog .feat-card.solo { border-radius: var(--blog-radius-lg); }

.lf-blog .feat-card .media { position: relative; min-height: 320px; display: block; }
.lf-blog .feat-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-blog .feat-card .media .kicker { position: absolute; top: 18px; left: 18px; z-index: 1; }
.lf-blog .feat-card .body { padding: 40px 44px 44px; display: flex; flex-direction: column; }
.lf-blog .feat-card .meta { margin-bottom: 12px; }
.lf-blog .feat-card h2 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(26px, 2.8vw, 38px); line-height: .98; letter-spacing: -.4px;
}
.lf-blog .feat-card h2 a:hover { color: var(--blog-primary); }
.lf-blog .feat-card p { color: var(--blog-text-light); font-size: 15.5px; line-height: 1.7; margin: 22px 0 24px; flex: 1; }
.lf-blog .feat-card .read {
  font-family: var(--blog-font-heading); font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--blog-primary);
  display: inline-flex; align-items: center; gap: 8px;
}
.lf-blog .feat-card .read::after { content: '→'; transition: transform var(--blog-transition); }
.lf-blog .feat-card .read:hover::after { transform: translateX(4px); }

/* ── LISTING: filter tabs ────────────────────────────────────────── */
.lf-blog .blog-filters { background: var(--blog-card); border-bottom: 1px solid var(--blog-border); position: sticky; top: 0; z-index: 50; }
.lf-blog .blog-filters .inner { display: flex; align-items: center; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.lf-blog .blog-filters .inner::-webkit-scrollbar { display: none; }
.lf-blog .filter {
  flex-shrink: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--blog-font-heading); font-size: 13.5px; font-weight: 800;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--blog-text-light);
  padding: 17px 0 14px; border-bottom: 3px solid transparent;
  transition: var(--blog-transition);
}
.lf-blog .filter:hover { color: var(--blog-text); }
.lf-blog .filter.on { color: var(--blog-text); border-bottom-color: var(--blog-accent); }

/* ── LISTING: magazine grid ──────────────────────────────────────── */
.lf-blog .blog-mag { padding: 72px 0 96px; background: var(--blog-surface); }
.lf-blog .mag-head { margin-bottom: 36px; }
.lf-blog .mag-head h2 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(28px, 3.2vw, 44px); line-height: .95; letter-spacing: -.5px; margin-top: 10px;
}
.lf-blog .cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.lf-blog .card {
  background: var(--blog-card); border-radius: var(--blog-radius-lg); overflow: hidden;
  display: flex; flex-direction: column; grid-column: span 4;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: transform var(--blog-transition), box-shadow var(--blog-transition);
}
.lf-blog .card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.12); }
.lf-blog .card .media { position: relative; overflow: hidden; display: block; }
.lf-blog .card .media img { width: 100%; object-fit: cover; transition: transform .5s ease; aspect-ratio: 16/9; }
.lf-blog .card:hover .media img { transform: scale(1.04); }
.lf-blog .card .media .kicker { position: absolute; top: 14px; left: 14px; }
.lf-blog .card .body { padding: 24px 26px; display: flex; flex-direction: column; flex: 1; }
.lf-blog .card h3 {
  font-family: var(--blog-font-heading); font-weight: 800;
  text-transform: var(--blog-heading-transform);
  line-height: 1.02; letter-spacing: -.2px; font-size: 24px;
}
.lf-blog .card h3 a:hover { color: var(--blog-primary); }
.lf-blog .card p { color: var(--blog-text-light); font-size: 14.5px; line-height: 1.66; margin: 16px 0 18px; flex: 1; }
.lf-blog .card .meta { margin-top: auto; }
.lf-blog .card.lg { grid-column: span 7; }
.lf-blog .card.lg .media img { aspect-ratio: 16/8.5; }
.lf-blog .card.lg h3 { font-size: clamp(26px, 2.6vw, 34px); }
.lf-blog .card.md { grid-column: span 5; }
.lf-blog .card.sm { grid-column: span 4; }

.lf-blog .blog-empty { text-align: center; padding: 80px 0; color: var(--blog-text-light); font-size: 17px; }

/* ── LISTING: entry list (layout: "list") ────────────────────────── */
/* Type-led alternative to the card grid. Shipped here so a tenant can pick
   layout:"list" in blog.config.json and get a styled page without writing
   its own listing CSS; clients then re-theme via the --blog-* tokens.
   Reference implementation: clients/lolliforce (The Brief). */
.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(--blog-border); position: relative;
}
.lf-blog .entry::before {
  content: ''; position: absolute; left: -40px; right: -40px; top: 0; bottom: 0;
  background: var(--blog-surface); opacity: 0; border-radius: 4px;
  transition: opacity .4s var(--blog-transition); z-index: -1;
}
.lf-blog .entry:hover::before { opacity: 1; }
.lf-blog .entry-no {
  font-family: var(--blog-font-heading); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--blog-accent); padding-top: 9px;
}
.lf-blog .entry h2 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(26px, 2.7vw, 36px); line-height: 1.14; letter-spacing: -.02em;
}
.lf-blog .entry h2 a:hover { color: var(--blog-primary); }
.lf-blog .entry p {
  font-size: 16.5px; line-height: 1.6; color: var(--blog-text-light);
  margin-top: 14px; max-width: 62ch;
}
/* Column, not a text run: the pill and the date are separate lines. As inline
   flow the date wrapped around the pill and collided with it, because the two
   are emitted with no whitespace between them and `margin-bottom` on an
   inline-block buys leading, not a line break. */
.lf-blog .entry-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blog-text-light); padding-top: 11px; text-align: right; line-height: 2;
}
/* Category reads as a pill here, matching the kicker on cards and articles. */
.lf-blog .entry-meta .cat {
  line-height: 1.5;
  font-size: 10.5px; letter-spacing: .13em;
  color: var(--blog-ink); background: var(--blog-accent);
  padding: 5px 12px; border-radius: 999px;
}
.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; align-items: flex-start; padding-top: 22px; }
.lf-blog .entry.featured h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; }
.lf-blog .entry.featured p { font-size: 18.5px; max-width: 54ch; margin-top: 20px; }

/* Generated hero imagery. The lead item carries its hero above the headline;
   the rows below take a thumbnail in a fourth column that only exists on a row
   whose post actually has one, so an image-less entry keeps the original
   type-led three-column shape instead of leaving a hole in the grid. */
.lf-blog .entry.has-media:not(.featured) { grid-template-columns: 92px 1fr 168px 210px; }
.lf-blog .entry-hero,
.lf-blog .entry-thumb {
  display: block; overflow: hidden; border-radius: 4px;
  background: var(--blog-surface);
}
.lf-blog .entry-hero img,
.lf-blog .entry-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-blog .entry-hero { aspect-ratio: 16 / 7; margin-bottom: 30px; }
.lf-blog .entry-thumb { aspect-ratio: 16 / 10; }
.lf-blog .entry-hero img,
.lf-blog .entry-thumb img { transition: transform .7s var(--blog-transition); }
.lf-blog .entry:hover .entry-hero img,
.lf-blog .entry:hover .entry-thumb img { transform: scale(1.035); }

@media (max-width: 900px) {
  .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; align-items: flex-start; padding-top: 4px; }
  .lf-blog .entry.featured .entry-meta { grid-column: 1; }
  .lf-blog .entry::before { left: -24px; right: -24px; }
  .lf-blog .entry.has-media:not(.featured) { grid-template-columns: 1fr; }
  .lf-blog .entry-hero { aspect-ratio: 16 / 9; margin-bottom: 18px; }
  .lf-blog .entry-thumb { aspect-ratio: 16 / 9; margin-top: 4px; }
}

/* ── ARTICLE: hero ───────────────────────────────────────────────── */
.lf-blog .art-hero { position: relative; color: #fff; min-height: 62vh; display: flex; align-items: flex-end; background: var(--blog-surface-dark); }
.lf-blog .art-hero .bg { position: absolute; inset: 0; overflow: hidden; }
.lf-blog .art-hero .bg img, .lf-blog .art-hero .bg video { width: 100%; height: 100%; object-fit: cover; }
.lf-blog .art-hero .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,13,20,.99) 8%, rgba(10,13,20,.82) 52%, rgba(10,13,20,.58) 100%);
}
.lf-blog .art-hero .inner { position: relative; z-index: 1; width: 100%; padding: 120px 0 52px; }
.lf-blog .art-hero .crumbs {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 18px;
}
.lf-blog .art-hero .crumbs a:hover { color: var(--blog-accent); }
.lf-blog .art-hero h1 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(36px, 5.6vw, 76px); line-height: .9; letter-spacing: -1px;
  max-width: 17ch; margin: 14px 0 0;
}
/* Article standfirst (the post excerpt under the H1). The article template
   emits this on every layout; without a rule it inherits no margin and the
   full container width, so it crowds the headline and runs to an unreadable
   measure. Capped near 46ch so it wraps well before the hero edge. */
.lf-blog .art-hero .standfirst {
  max-width: 46ch;
  margin-top: 30px;
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

.lf-blog .byline { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.lf-blog .byline .disc {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--blog-accent); color: var(--blog-ink);
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 17px;
  display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
}
.lf-blog .byline .who { line-height: 1.3; }
.lf-blog .byline .who strong { display: block; font-size: 15px; font-weight: 600; }
.lf-blog .byline .who span { font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ── ARTICLE: contents rail ──────────────────────────────────────── */
/* Present only when blog.config.json sets toc:true AND the article clears
   tocMinHeadings, so a tenant without it keeps the single-column article it
   has always had: the grid rules are scoped behind :has(.art-toc) rather than
   applied to .art-grid outright. */
.lf-blog .art-grid:has(.art-toc) {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px;
  gap: 0 56px; align-items: start;
}
/* A 13-item rail on a long guide is taller than the viewport, and a sticky
   box taller than its container simply stops sticking. Cap it and let the
   rail itself scroll; the scrollbar is hidden because the marker already
   tells the reader where they are. */
.lf-blog .art-toc {
  position: sticky; top: 120px; align-self: start;
  max-height: calc(100vh - 160px);
  overflow-y: auto; scrollbar-width: none;
}
.lf-blog .art-toc::-webkit-scrollbar { display: none; }
/* var(--blog-accent, var(--blog-primary)): not every theme defines an accent
   separate from its brand colour -- paver has only --blog-primary -- and an
   undefined token here made the numerals, eyebrow and active marker fall back
   to plain body text, which is the entire distinction the rail is made of. */
.lf-blog .art-toc-head {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blog-accent, var(--blog-primary)); margin-bottom: 12px;
}
/* The hairline is on the list and each link pulls its own 2px marker back
   over it, so the active marker replaces the rule instead of sitting beside
   it and the rail stays one pixel wide. */
.lf-blog .art-toc-list {
  list-style: none; margin: 0; padding: 0;
  border-left: 1px solid var(--blog-border);
}
.lf-blog .art-toc-list a {
  display: block; margin-left: -1px; border-left: 2px solid transparent;
  padding: 8px 14px; font-size: 13px; line-height: 1.35;
  color: var(--blog-text-light); transition: color .25s var(--blog-transition), border-color .25s var(--blog-transition);
}
.lf-blog .art-toc-list a:hover { color: var(--blog-primary); }
/* --blog-text, not --blog-ink: ink is the darkest SURFACE token, which on a
   dark-bodied theme (paver, jason-vanderground) is the background itself, so
   the active entry would have been near-invisible. --blog-text is the strong
   body/heading colour and is correct in both directions. */
.lf-blog .art-toc-list a.on {
  border-left-color: var(--blog-accent, var(--blog-primary)); color: var(--blog-text); font-weight: 600;
}
.lf-blog .art-toc-list .n {
  font-variant-numeric: tabular-nums; font-weight: 700;
  margin-right: 8px; color: var(--blog-accent, var(--blog-primary));
}
/* The overflow expander. It carries no left rule of its own so the rail reads
   as one continuous hairline whether it is open or closed. */
.lf-blog .art-toc-more > summary {
  cursor: pointer; list-style: none;
  padding: 9px 14px; margin-left: 1px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blog-text-light);
}
.lf-blog .art-toc-more > summary::-webkit-details-marker { display: none; }
.lf-blog .art-toc-more > summary:hover { color: var(--blog-primary); }
.lf-blog .art-toc-more[open] > summary { color: var(--blog-text); }
.lf-blog .art-toc-more .art-toc-list { border-left: 0; }

/* An anchor jump must not park the heading under the sticky site header. */
.lf-blog .article-body h2 { scroll-margin-top: 110px; }

/* Narrow: the rail becomes a <details> above the copy. It is markup that
   works with no JS, so the contents list survives a script failure. */
.lf-blog .art-toc-compact { display: none; }
@media (max-width: 1100px) {
  .lf-blog .art-grid:has(.art-toc) { display: block; }
  .lf-blog .art-toc { display: none; }
  .lf-blog .art-toc-compact {
    display: block; margin: 0 auto 34px; max-width: 680px;
    border: 1px solid var(--blog-border); border-radius: 8px; padding: 14px 18px;
    background: var(--blog-surface, var(--blog-card));
  }
  .lf-blog .art-toc-compact summary {
    cursor: pointer; list-style: none;
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--blog-accent, var(--blog-primary));
  }
  .lf-blog .art-toc-compact summary::-webkit-details-marker { display: none; }
  .lf-blog .art-toc-compact .art-toc-list { margin-top: 12px; border-left: 0; }
  .lf-blog .art-toc-compact .art-toc-list a { padding: 7px 0; border-left: 0; margin-left: 0; }
}

/* ── ARTICLE: body ───────────────────────────────────────────────── */
.lf-blog .art-body-wrap { padding: 68px 0 56px; background: var(--blog-card); }
.lf-blog .article-body {
  max-width: var(--blog-prose-width); margin: 0 auto;
  font-size: 17.5px; line-height: 1.8; color: #2a2f3c;
}
/* 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.2em; }
.lf-blog .article-body > section + section { margin-top: 1.9em; }
.lf-blog .article-body > p:first-child,
.lf-blog .article-body > section:first-child > p:first-child { font-size: 20.5px; line-height: 1.72; color: var(--blog-text); }
.lf-blog .article-body > p:first-child::first-letter,
.lf-blog .article-body > section:first-child > p:first-child::first-letter {
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 74px; line-height: .78;
  float: left; padding: 8px 12px 0 0; color: var(--blog-primary);
}
.lf-blog .article-body h2 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.02; letter-spacing: -.3px;
  color: var(--blog-text); margin-top: 2em;
  display: flex; align-items: baseline; gap: 14px;
}
.lf-blog .article-body h2::before {
  content: ''; flex-shrink: 0; align-self: center;
  width: 26px; height: 4px; background: var(--blog-accent);
}
.lf-blog .article-body h3 {
  font-family: var(--blog-font-heading); font-size: 23px; font-weight: 800;
  text-transform: var(--blog-heading-transform); letter-spacing: .2px;
  margin-top: 1.7em; color: var(--blog-text);
}
/* The generic `> * + *` rhythm is too tight directly beneath a section
   heading; give the first element after one its own, larger top margin. */
.lf-blog .article-body h2 + * { margin-top: 1.5em; }
.lf-blog .article-body h3 + * { margin-top: 1.15em; }
.lf-blog .article-body a {
  color: var(--blog-primary); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blog-primary) 35%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: var(--blog-transition);
}
.lf-blog .article-body a:hover { text-decoration-color: var(--blog-primary); }
.lf-blog .article-body strong { font-weight: 600; color: var(--blog-text); }
.lf-blog .article-body ul { padding-left: 0; }
.lf-blog .article-body ul > li { position: relative; padding-left: 24px; margin-top: .55em; }
.lf-blog .article-body ul > li::before {
  content: ''; position: absolute; left: 2px; top: .66em;
  width: 7px; height: 7px; background: var(--blog-accent); border-radius: 1.5px;
  transform: rotate(45deg);
}
.lf-blog .article-body ol { list-style: none; counter-reset: lf-step; margin: 0; padding: 0; }
.lf-blog .article-body ol > li { counter-increment: lf-step; position: relative; padding-left: 44px; margin-top: .9em; }
.lf-blog .article-body ol > li::before {
  content: counter(lf-step, decimal-leading-zero);
  position: absolute; left: 0; top: .18em;
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 15px;
  color: var(--blog-primary); letter-spacing: 1px;
}
.lf-blog .article-body img { border-radius: var(--blog-radius-lg); margin: 2em 0; }
.lf-blog .article-body figure.article-figure { margin: 2em 0; }
.lf-blog .article-body figure.article-figure img { width: 100%; height: auto; margin: 0; }
.lf-blog .article-body figure.article-figure figcaption { margin-top: 0.6em; font-size: 0.875em; line-height: 1.5; text-align: center; color: inherit; opacity: 0.7; }
.lf-blog .article-body blockquote {
  margin: 2.1em -40px; padding: 34px 40px;
  background: var(--blog-surface-dark); color: #fff; border-radius: var(--blog-radius-lg);
  font-family: var(--blog-font-heading); font-size: 27px; font-weight: 700; font-style: italic;
  line-height: 1.22; text-transform: var(--blog-heading-transform); letter-spacing: -.2px;
  position: relative;
}
.lf-blog .article-body blockquote::before {
  content: '\201C'; position: absolute; top: -6px; left: 18px;
  font-size: 110px; color: var(--blog-accent); opacity: .5; font-style: normal;
}
.lf-blog .article-body blockquote p { margin: 0; }
.lf-blog .article-body code {
  font-size: .88em; background: var(--blog-surface);
  border: 1px solid var(--blog-border); border-radius: 3px; padding: 1px 5px;
}
.lf-blog .article-body pre {
  background: var(--blog-ink); color: #dfe4ee; padding: 20px 22px;
  border-radius: var(--blog-radius); overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.lf-blog .article-body pre code { background: none; border: 0; padding: 0; }

/* ── AGENT BLOCK CATALOG — hard contract with the blog agent ─────── */
.lf-blog .article-body .callout {
  border-radius: var(--blog-radius-lg); padding: 26px 30px; margin: 2em 0;
  background: color-mix(in srgb, var(--blog-primary) 8%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blog-primary) 18%, transparent);
  border: 0;
}
.lf-blog .article-body .callout::before {
  display: inline-block; font-family: var(--blog-font-heading); font-size: 12px;
  font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase;
  background: var(--blog-primary); color: #fff; border-radius: 3px;
  padding: 3px 10px; margin-bottom: 12px;
}
.lf-blog .article-body .callout > *:first-of-type { margin-top: 0; }
.lf-blog .article-body .callout-takeaway::before { content: 'Key Takeaway'; }
.lf-blog .article-body .callout-warning {
  background: #fdf1f1; box-shadow: inset 0 0 0 1px rgba(165,28,28,.2);
}
.lf-blog .article-body .callout-warning::before { content: '\26A0  Important'; background: #a51c1c; }
.lf-blog .article-body .callout-tip {
  background: color-mix(in srgb, var(--blog-accent) 11%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blog-accent-dark) 28%, transparent);
}
.lf-blog .article-body .callout-tip::before { content: 'Pro Tip'; background: var(--blog-accent); color: var(--blog-ink); }

.lf-blog .article-body .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 2em 0; }
.lf-blog .article-body .comparison-col {
  background: var(--blog-card); border: 1px solid var(--blog-border);
  border-top: 5px solid var(--blog-primary);
  border-radius: var(--blog-radius); padding: 24px 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.lf-blog .article-body .comparison-col + .comparison-col { border-top-color: var(--blog-accent); }
.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(--blog-font-heading); font-size: 19px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 12px; color: var(--blog-text);
}
.lf-blog .article-body .comparison-col p,
.lf-blog .article-body .comparison-col li { font-size: 15px; line-height: 1.62; }

.lf-blog .article-body ul.checklist { margin: 1.8em 0; }
.lf-blog .article-body ul.checklist > li {
  background: var(--blog-card); border: 1px solid var(--blog-border); border-radius: var(--blog-radius);
  padding: 14px 18px 14px 48px; margin-top: 8px; font-size: 16px;
}
.lf-blog .article-body ul.checklist > li::before {
  content: '\2713'; width: auto; height: auto; background: none; transform: none;
  left: 18px; top: 13px;
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 17px;
  color: var(--blog-accent-dark);
}

.lf-blog .article-body .disclaimer {
  background: var(--blog-surface); border-radius: var(--blog-radius);
  padding: 18px 22px; margin: 2.4em 0 0;
  font-size: 13.5px; line-height: 1.65; color: var(--blog-text-light);
}
.lf-blog .article-body .disclaimer::before {
  display: block; content: 'Disclaimer';
  font-family: var(--blog-font-heading); font-size: 11px; font-weight: 800;
  letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 6px;
}

/* ── ARTICLE: related ────────────────────────────────────────────── */
.lf-blog .art-related { padding: 72px 0 96px; background: var(--blog-surface); }
.lf-blog .art-related .cards .card { grid-column: span 4; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lf-blog .card.lg, .lf-blog .card.md, .lf-blog .card.sm,
  .lf-blog .art-related .cards .card { grid-column: span 6; }
  .lf-blog .article-body blockquote { margin-inline: 0; }
}
@media (max-width: 768px) {
  .lf-blog .feat-card { grid-template-columns: 1fr; }
  .lf-blog .feat-card .media { min-height: 230px; }
  .lf-blog .feat-card .body { padding: 28px 26px 32px; }
  .lf-blog .card.lg, .lf-blog .card.md, .lf-blog .card.sm,
  .lf-blog .art-related .cards .card { grid-column: span 12; }
  .lf-blog .blog-hero { padding-top: 72px; }
  .lf-blog .article-body .comparison { grid-template-columns: 1fr; }
  .lf-blog .art-hero .inner { padding: 96px 0 40px; }
}

/* ═══ WedgeHR blog theme: "Front Line" (cards, image-forward) ═══════════
   Layered after the shared blog-static stylesheet. Tokens come from the
   site's own Webflow variables (wedge orange, Fraunces + Inter, 8/16px radii)
   and the look follows The Front Line and Hiring Sidekick pages. */
.lf-blog {
  --blog-primary: #cc6c00;        /* wedge-orange-dark: link text that passes contrast on white */
  --blog-primary-dark: #663600;
  --blog-accent: #ff8700;         /* wedge-orange */
  --blog-accent-dark: #cc6c00;
  --blog-ink: #0d0700;
  --blog-surface-dark: #251f19;
  --blog-surface: #fff3e5;        /* wedge-orange-lightest */
  --blog-card: #ffffff;
  --blog-text: #0d0700;
  --blog-text-light: #55514c;
  --blog-border: #0d070026;
  --blog-font-heading: "Fraunces Variable", "Times New Roman", serif;
  --blog-font-body: Inter, sans-serif;
  --blog-radius: 8px;
  --blog-radius-lg: 16px;
  --blog-max-width: 1280px;
  --blog-prose-width: 720px;
  --blog-heading-transform: none;
  --blog-heading-weight: 400;
}
#lf-blog-main { line-height: 1.5; }
.lf-blog :where(#lf-blog-main .container) { padding: 0 5%; }

/* labels: the site's .tag, not an uppercase kicker */
.lf-blog .kicker, .lf-blog .kicker.blue {
  background: #0d07000d; color: #0d0700; backdrop-filter: blur(10px);
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none; padding: 4px 10px; border-radius: 6px;
}
.lf-blog .card .media .kicker, .lf-blog .feat-card .media .kicker { background: #ffffffd9; }
.lf-blog .eyebrow { font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #0d0700; }
.lf-blog .eyebrow::before { display: none; }
.lf-blog .meta { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #55514c; }

/* listing masthead: light, centred, like The Front Line */
.lf-blog .blog-hero { background: #fff; color: #0d0700; padding: 112px 0 0; text-align: center; }
.lf-blog .blog-hero .bg { display: none; }
.lf-blog .blog-hero h1 {
  font-size: clamp(56px, 6vw, 80px); line-height: 1; letter-spacing: -4px;
  max-width: none; margin: 0 auto;
}
.lf-blog .blog-hero .eyebrow { display: none; }
.lf-blog .blog-hero .sub { color: #0d0700; font-size: 18px; line-height: 1.25; max-width: 760px; margin: 24px auto 0; }

.lf-blog .feat-card {
  margin-top: 72px; text-align: left; box-shadow: none; border-radius: 16px;
  background: #fff3e5; gap: 0;
}
.lf-blog .feat-card .media { margin: 20px; border-radius: 12px; overflow: hidden; background: #ffe7cc; }
.lf-blog .feat-card .body { padding: 44px 44px 44px 24px; justify-content: center; }
.lf-blog .feat-card h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -1px; }
.lf-blog .feat-card p { font-size: 18px; line-height: 1.4; color: #55514c; }
.lf-blog .feat-card .read, .lf-blog .card .read { font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #0d0700; }

/* filters: the Front Line category row */
.lf-blog .blog-filters { border-bottom: 0; background: #fffffff2; backdrop-filter: blur(10px); }
.lf-blog .blog-filters .inner { justify-content: center; gap: 32px; padding: 0 5%; }
.lf-blog .filter {
  font-family: Inter, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: #55514c; padding: 22px 0 16px; border-bottom-width: 2px;
}
.lf-blog .filter.on { color: #0d0700; border-bottom-color: #ff8700; }

/* card grid */
.lf-blog .blog-mag { background: #fff; padding: 64px 0 112px; }
.lf-blog .mag-head h2 { font-size: clamp(36px, 3.6vw, 52px); letter-spacing: -1px; line-height: 1.05; }
.lf-blog .cards { gap: 48px 32px; }
.lf-blog .card { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.lf-blog .card:hover { transform: none; box-shadow: none; }
.lf-blog .card .media { border-radius: 16px; background: #ffe7cc; }
.lf-blog .card .media img { aspect-ratio: 16/10; }
.lf-blog .card.lg .media img { aspect-ratio: 16/10; }
.lf-blog .card .body { padding: 24px 0 0; }
.lf-blog .card h3 { font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -.3px; }
.lf-blog .card.lg h3 { font-size: clamp(30px, 2.8vw, 40px); }
.lf-blog .card h3 a:hover { color: #0d0700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lf-blog .card p { font-size: 16px; line-height: 1.5; color: #55514c; margin: 12px 0 16px; }

/* article: cream masthead, image framed below the headline */
.lf-blog .art-hero {
  display: flex; flex-direction: column-reverse; align-items: stretch;
  min-height: 0; background: #fff3e5; color: #0d0700;
}
.lf-blog .art-hero .bg {
  position: relative; inset: auto; width: min(1280px, 90%); margin: 0 auto -1px;
  aspect-ratio: 16/7; border-radius: 16px 16px 0 0; background: #ffe7cc;
}
.lf-blog .art-hero .bg:empty { display: none; }
.lf-blog .art-hero .bg::after { display: none; }
.lf-blog .art-hero .inner { padding: 112px 0 56px; }
.lf-blog .art-hero .crumbs { color: #55514c; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.lf-blog .art-hero .crumbs a:hover { color: #0d0700; text-decoration: underline; }
.lf-blog .art-hero h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -2px; max-width: 20ch; }
.lf-blog .art-hero .standfirst { color: #55514c; font-size: 20px; line-height: 1.4; max-width: 52ch; }
.lf-blog .byline .disc { background: #ff8700; color: #fff; font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; }
.lf-blog .byline .who span { color: #55514c; letter-spacing: 0; text-transform: none; font-size: 14px; }

/* A centered row clips its first tabs once it overflows on a phone. */
@media (max-width: 900px) {
  .lf-blog .blog-filters .inner { justify-content: flex-start; }
}

/* ═══ WedgeHR article body + agent block catalog (both concepts) ═══ */
/* Webflow's own .container (cream panel, 48px padding, flex column) shares a
   name with the blog template's .container. Undo it inside the blog; the
   template's more specific layout rules still apply on top. */
.lf-blog .container {
  display: block; background-color: transparent; border-radius: 0; grid-row-gap: normal;
  flex-direction: row; justify-content: normal; align-items: normal;
  width: 100%; max-width: var(--blog-max-width); margin-left: auto; margin-right: auto;
  padding-top: 0; padding-bottom: 0; padding-left: 5%; padding-right: 5%;
}
.lf-blog .blog-filters .inner { display: flex; }
.lf-blog .blog-hero .inner, .lf-blog .art-hero .inner { padding-left: 5%; padding-right: 5%; }
/* Webflow's element defaults that would otherwise bleed into article copy. */
.lf-blog .article-body li { margin-bottom: 0; }
.lf-blog .article-body blockquote { border-left: 0; }
.lf-blog .art-body-wrap { padding: 72px 0 64px; }
.lf-blog .article-body { font-size: 18px; line-height: 1.65; color: #251f19; }
.lf-blog .article-body > p:first-child,
.lf-blog .article-body > section:first-child > p:first-child { font-size: 20px; line-height: 1.6; color: #0d0700; }
/* The site sets no drop caps anywhere; neither does its blog. */
.lf-blog .article-body > p:first-child::first-letter,
.lf-blog .article-body > section:first-child > p:first-child::first-letter { all: unset; }
.lf-blog .article-body h2 { display: block; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -.8px; margin-top: 2em; }
.lf-blog .article-body h2::before { display: none; }
.lf-blog .article-body h3 { font-family: Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 0; }
.lf-blog .article-body ul > li::before { width: 6px; height: 6px; border-radius: 50%; transform: none; top: .7em; background: #ff8700; }
.lf-blog .article-body ol > li::before { font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; color: #cc6c00; letter-spacing: 0; }
.lf-blog .article-body blockquote {
  background: #fff3e5; color: #0d0700; font-family: "Fraunces Variable", serif; font-weight: 400;
  font-style: normal; font-size: 28px; line-height: 1.25; letter-spacing: -.4px; text-transform: none;
  border-radius: 16px;
}
.lf-blog .article-body blockquote::before { color: #ff8700; opacity: 1; }
.lf-blog .article-body .callout { background: #fff3e5; box-shadow: none; border-radius: 16px; }
.lf-blog .article-body .callout::before {
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  background: #ff8700; color: #fff; border-radius: 6px; padding: 4px 10px;
}
.lf-blog .article-body .callout-warning { background: #6d0e340d; box-shadow: none; }
.lf-blog .article-body .callout-warning::before { background: #6d0e34; }
.lf-blog .article-body .callout-tip { background: #0d94880f; box-shadow: none; }
.lf-blog .article-body .callout-tip::before { background: #0d9488; color: #fff; }
.lf-blog .article-body .comparison-col { border: 0; border-radius: 16px; background: #f2f2f2; border-top: 0; box-shadow: none; padding: 28px; }
.lf-blog .article-body .comparison-col:first-child { background: #fff3e5; }
.lf-blog .article-body .comparison-col h3,
.lf-blog .article-body .comparison-col h4 { font-family: "Fraunces Variable", serif; font-weight: 400; text-transform: none; letter-spacing: -.2px; font-size: 24px; }
.lf-blog .article-body ul.checklist > li { border-radius: 12px; border-color: #0d070026; }
.lf-blog .article-body ul.checklist > li::before { font-family: Inter, sans-serif; color: #ff8700; }
.lf-blog .article-body .disclaimer { background: #f2f2f2; border-radius: 12px; }
.lf-blog .article-body .disclaimer::before { font-family: Inter, sans-serif; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 13px; }
.lf-blog .art-toc-head { font-family: Inter, sans-serif; letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 600; color: #0d0700; }
.lf-blog .art-toc-list a.on { border-left-color: #ff8700; }
.lf-blog .art-toc-list .n { color: #cc6c00; }
.lf-blog .art-related { background: #fff3e5; }

/* ── Author box and byline photo (platform/templates/blog-static, Section C4).
   Neutral on purpose: text inherits the theme, rules are translucent, the
   link takes the theme's link color. ─────────────────────────────────── */
.lf-blog-article .disc-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lf-blog-article .art-author {
  display: flex; gap: 18px; align-items: flex-start;
  margin: 48px 0 8px; padding: 24px 0 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}
.lf-blog-article .art-author-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lf-blog-article .art-author-text { min-width: 0; }
.lf-blog-article .art-author-eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }
.lf-blog-article .art-author-name { margin: 0; font-size: 18px; font-weight: 600; }
.lf-blog-article .art-author-name a { color: var(--blog-primary, var(--accent, inherit)); text-decoration: none; }
.lf-blog-article .art-author-name a:hover { text-decoration: underline; }
.lf-blog-article .art-author-title { margin: 2px 0 0; font-size: 14px; opacity: 0.75; }
.lf-blog-article .art-author-bio { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.lf-blog-article .art-author-creds { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; opacity: 0.8; }
@media (max-width: 600px) { .lf-blog-article .art-author { flex-direction: column; } }

/* ── End-of-article call to action (clients.blog_cta). Tokens only, so each
   tenant's own --blog-* overrides give it that site's look: the light
   surface as a tint, an accent rule, the heading font, and the site's
   primary-button color for the button. The button is keyed on the
   #lf-blog-main id so it outranks the scaffolding's
   `#lf-blog-main a { color: inherit }`. ─────────────────────────────── */
.lf-blog .blog-cta {
  margin: 48px 0 8px; padding: 36px 36px 38px;
  background: var(--blog-surface); color: var(--blog-text);
  border-top: 4px solid var(--blog-accent);
  border-radius: var(--blog-radius-lg);
}
.lf-blog .blog-cta__heading {
  margin: 0; font-family: var(--blog-font-heading);
  font-weight: var(--blog-heading-weight); text-transform: var(--blog-heading-transform);
  font-size: clamp(24px, 3.2vw, 30px); line-height: 1.15; color: var(--blog-text);
}
.lf-blog .blog-cta__text { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--blog-text-light); max-width: 56ch; }
#lf-blog-main .blog-cta__button {
  display: inline-flex; align-items: center; margin-top: 22px;
  font-family: var(--blog-font-heading); font-size: 15px; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 14px 28px; border-radius: var(--blog-radius);
  background: var(--blog-primary); color: #fff;
  transition: background var(--blog-transition), transform var(--blog-transition);
}
#lf-blog-main .blog-cta__button:hover { background: var(--blog-primary-dark); color: #fff; transform: translateY(-1px); }
#lf-blog-main .blog-cta__button:focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .lf-blog .blog-cta { padding: 26px 22px 28px; }
  #lf-blog-main .blog-cta__button { display: flex; justify-content: center; text-align: center; }
}