/* ==========================================================================
   Famestate — editorial / blog.

   One stylesheet for the whole publication: index, article, author page.
   These templates do not include header.twig (the panel shell), so the nav
   and footer live here too — same approach and the same visual language as
   seo-page.css, but a separate file: this is ~14KB against that file's 54KB
   of article/calculator/table CSS the blog never uses.

   Palette differs from the marketing pages in exactly one deliberate way: the
   canvas is warm (#FBFAF8) rather than the cool #f2f4fa. An editorial surface
   is read for minutes at a time, and the warm ground takes the glare off long
   body copy while staying in the same family as the rest of the site. Ink,
   accent and border all stay on the site palette.
   ========================================================================== */

:root{
  --bg:#FBFAF8;          /* warm off-white canvas */
  --card:#FFFFFF;
  --ink:#0F2942;         /* dark navy — headlines, body */
  --ink-2:#33506E;       /* secondary text */
  --muted:#4F7290;       /* 5.07:1 on white; meta, captions */
  --line:#E8E3DB;        /* warm hairline */
  --line-2:#F1EDE6;      /* lighter rule, inside cards */
  --primary:#4F46E5;     /* Famestate indigo */
  --primary-2:#7C3AED;
  --primary-bg:#F1F0FE;
  --r:10px; --r-sm:6px; --r-pill:999px;
  --e1:0 1px 2px rgba(15,41,66,.05);
  --e2:0 6px 20px -8px rgba(15,41,66,.12);
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hanken Grotesk",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);letter-spacing:-.02em;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
/* Reserves the box before the image decodes, so a late-loading hero does not
   shove the headline down the page. */
img[width][height]{height:auto}

/* ── shell: nav ─────────────────────────────────────────────────────────── */
.mkt-nav{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line)}
.mkt-nav__in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:58px;display:flex;align-items:center;gap:26px}
.mkt-brand{display:flex;align-items:center;gap:.55rem}
.mkt-mark{flex:none;width:30px;height:30px;border-radius:8px;box-shadow:0 3px 10px -4px rgba(79,70,229,.55);transition:transform .15s ease}
.mkt-brand:hover .mkt-mark{transform:translateY(-1px)}
.mkt-type{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.mkt-type .s{color:var(--primary)}
.mkt-links{display:flex;gap:20px;margin-right:auto}
.mkt-links a{font-size:.9rem;font-weight:600;color:var(--muted)}
.mkt-links a:hover,.mkt-links a[aria-current]{color:var(--primary)}
.mkt-signin{font-size:.87rem;font-weight:700;color:var(--muted);white-space:nowrap}
.mkt-signin:hover{color:var(--primary)}
.mkt-cta{padding:8px 16px;border-radius:var(--r-sm);background:var(--primary);color:#fff;font-size:.87rem;font-weight:700;white-space:nowrap}
.mkt-cta:hover{filter:brightness(1.08);color:#fff}
/* flex:none is load-bearing, not decoration: without it the brand + Login +
   CTA overflow the bar at 390px and flex shrinks this button to 24px — half
   the 44px minimum touch target, on the only navigation control a phone
   visitor has. */
.mkt-burger{display:none;flex:none;width:44px;height:44px;padding:12px;margin-right:-10px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.mkt-burger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.mkt-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.mkt-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mkt-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ── layout ─────────────────────────────────────────────────────────────── */
.bl{max-width:var(--wrap);margin:0 auto;padding:0 24px 64px}
.bl-skip{position:absolute;left:-9999px}
.bl-skip:focus{left:24px;top:8px;z-index:60;background:var(--card);padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--primary)}

/* ── masthead ───────────────────────────────────────────────────────────── */
.bl-mast{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:34px 0 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bl-mast h1{font-size:2.1rem;line-height:1.1;font-weight:800}
.bl-mast p{margin:6px 0 0;color:var(--muted);font-size:.95rem;max-width:56ch}
.bl-search{display:flex;align-items:center;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 2px 2px 14px;min-width:250px}
.bl-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.bl-search svg{flex:none;color:var(--muted)}
.bl-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:8px;font:inherit;font-size:.9rem;color:var(--ink)}
.bl-search button{flex:none;border:0;cursor:pointer;background:var(--primary);color:#fff;
  border-radius:var(--r-pill);padding:7px 15px;font:inherit;font-size:.85rem;font-weight:700}
.bl-search button:hover{filter:brightness(1.08)}

/* ── category chips ─────────────────────────────────────────────────────── */
.bl-cats{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--line)}
.bl-chip{font-size:.83rem;font-weight:650;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 13px;white-space:nowrap}
.bl-chip:hover{border-color:var(--primary);color:var(--primary)}
.bl-chip.is-on{background:var(--primary);border-color:var(--primary);color:#fff}
.bl-chip i{font-style:normal;opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}

/* ── featured ───────────────────────────────────────────────────────────── */
.bl-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;
  padding:32px 0;border-bottom:1px solid var(--line)}
.bl-feat__media{border-radius:var(--r);overflow:hidden;background:var(--line-2);aspect-ratio:16/10}
.bl-feat__media img{width:100%;height:100%;object-fit:cover}
.bl-feat h2{font-size:2rem;line-height:1.15;font-weight:800;margin:10px 0 0}
.bl-feat h2 a:hover{color:var(--primary)}
.bl-feat p{color:var(--ink-2);font-size:1rem;margin:10px 0 0;max-width:52ch}
/* No hero image on this article. The row stays two columns but carries
   headline | excerpt+byline instead of headline | picture, so the lead still
   fills the measure. Top-aligned because two text blocks centred against each
   other read as misaligned. */
.bl-feat--noimg{align-items:start}
.bl-feat__side{display:flex;flex-direction:column;justify-content:center;height:100%}
.bl-feat__side p{margin:0}
.bl-feat--noimg .bl-by{margin-top:16px}

/* ── eyebrow (category + flag) ──────────────────────────────────────────── */
.bl-eyebrow{display:flex;align-items:center;gap:9px;font-size:.74rem;font-weight:750;
  letter-spacing:.07em;text-transform:uppercase;color:var(--primary)}
.bl-eyebrow .bl-ai{color:var(--muted);font-weight:650;letter-spacing:.04em}
.bl-eyebrow .bl-ai::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:currentColor;vertical-align:middle;margin:0 8px 3px 0}

/* ── byline ─────────────────────────────────────────────────────────────── */
.bl-by{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:.83rem;color:var(--muted);flex-wrap:wrap}
.bl-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:750;font-size:.76rem;font-family:"Bricolage Grotesque",sans-serif;letter-spacing:0}
.bl-av--lg{width:64px;height:64px;font-size:1.5rem}
/* Photo variant of the byline avatar. object-fit keeps a square crop from
   distorting; the monogram rules above still apply when no portrait exists. */
.bl-av--img{display:block;object-fit:cover;background:none;padding:0}
/* The base .bl-av centres a letter with display:grid; on an <img> that is
   meaningless and leaves the picture as a grid item rather than filling the
   circle, so the photo variant resets it to block. */

.bl-by__n{font-weight:700;color:var(--ink-2)}
.bl-by__n:hover{color:var(--primary)}
.bl-by time,.bl-by span{white-space:nowrap}
.bl-by .sep{opacity:.45}

/* ── two-column body ────────────────────────────────────────────────────── */
.bl-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;padding-top:32px;align-items:start}
.bl-sec__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.bl-sec__h h2{font-size:1.12rem;font-weight:750;letter-spacing:-.01em}
.bl-sec__h span{font-size:.83rem;color:var(--muted)}

/* ── article cards ──────────────────────────────────────────────────────── */
.bl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 26px}
/* Three across where the grid has the full width to itself (author page,
   related strip) rather than sharing the row with the sidebar. */
.bl-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-card{display:flex;flex-direction:column;min-width:0}
.bl-card__media{border-radius:var(--r-sm);overflow:hidden;background:var(--line-2);aspect-ratio:16/9;margin-bottom:13px}
.bl-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.bl-card:hover .bl-card__media img{transform:scale(1.03)}
.bl-card h3{font-size:1.06rem;line-height:1.32;font-weight:700;margin:8px 0 0}
.bl-card:hover h3{color:var(--primary)}
.bl-card p{margin:7px 0 0;font-size:.9rem;line-height:1.55;color:var(--muted)}

/* ── sidebar ────────────────────────────────────────────────────────────── */
.bl-side{display:flex;flex-direction:column;gap:26px;position:sticky;top:82px}
.bl-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.bl-panel > h2{font-size:.78rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.bl-trend{list-style:none;margin:0;padding:0;counter-reset:t}
.bl-trend li{counter-increment:t;display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.bl-trend li:first-child{padding-top:0;border-top:0}
.bl-trend li::before{content:counter(t);flex:none;width:20px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:.95rem;color:var(--line);line-height:1.35}
.bl-trend b{display:block;font-weight:650;font-size:.9rem;line-height:1.35;color:var(--ink)}
.bl-trend a:hover b{color:var(--primary)}
.bl-trend small{display:block;margin-top:3px;font-size:.76rem;color:var(--muted)}
.bl-contrib{display:flex;flex-direction:column;gap:2px}
.bl-contrib a{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-2)}
.bl-contrib a:first-child{border-top:0}
.bl-contrib b{display:block;font-size:.88rem;font-weight:650;color:var(--ink)}
.bl-contrib a:hover b{color:var(--primary)}
.bl-contrib small{display:block;font-size:.75rem;color:var(--muted)}

/* ── newsletter / CTA ───────────────────────────────────────────────────── */
.bl-cta{background:var(--ink);border-radius:var(--r);padding:22px;color:#fff}
.bl-cta h2{color:#fff;font-size:1.05rem;font-weight:750;margin:0 0 7px;letter-spacing:-.01em}
.bl-cta p{margin:0 0 15px;font-size:.87rem;line-height:1.5;color:#B9CBDD}
.bl-cta a{display:block;text-align:center;background:var(--primary);color:#fff;font-weight:700;
  font-size:.88rem;padding:10px 16px;border-radius:var(--r-sm)}
.bl-cta a:hover{filter:brightness(1.1)}
.bl-cta small{display:block;margin-top:10px;font-size:.76rem;color:#8FA6BC;text-align:center}

/* ── pagination ─────────────────────────────────────────────────────────── */
.bl-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:40px 0 0;
  margin-top:36px;border-top:1px solid var(--line)}
.bl-pager a{font-size:.88rem;font-weight:700;color:var(--ink-2);border:1px solid var(--line);
  background:var(--card);border-radius:var(--r-sm);padding:8px 15px}
.bl-pager a:hover{border-color:var(--primary);color:var(--primary)}
.bl-pager span{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── empty / error states ───────────────────────────────────────────────── */
.bl-empty{text-align:center;padding:64px 24px;border:1px dashed var(--line);
  border-radius:var(--r);background:var(--card)}
.bl-empty svg{color:var(--line);margin-bottom:14px}
.bl-empty h2{font-size:1.15rem;font-weight:750;margin:0 0 7px}
.bl-empty p{margin:0 auto 18px;color:var(--muted);font-size:.92rem;max-width:44ch}
.bl-empty a{display:inline-block;font-size:.87rem;font-weight:700;color:#fff;background:var(--primary);
  padding:9px 18px;border-radius:var(--r-sm)}
.bl-empty a:hover{filter:brightness(1.08)}

/* Shown when the only published article is already in the featured slot, so
   the main column has nothing left to list. Quieter than .bl-empty — this is
   a normal state, not a missing one. */
.bl-more{padding:22px 0 4px;color:var(--muted);font-size:.92rem}
.bl-more p{margin:0 0 10px}
.bl-more a{font-weight:700;color:var(--primary)}
.bl-more a:hover{text-decoration:underline}

/* ── breadcrumbs ────────────────────────────────────────────────────────── */
.bl-crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:18px 0 0;
  font-size:.82rem;color:var(--muted)}
.bl-crumb a:hover{color:var(--primary)}
.bl-crumb svg{opacity:.5;flex:none}
.bl-crumb [aria-current]{color:var(--ink-2);font-weight:600}

/* ══════════════════════════════════════════════════ ARTICLE ═════════════ */
.bl-art{max-width:var(--wrap);margin:0 auto;padding:0 24px 64px}
.bl-art__head{max-width:760px;padding:22px 0 26px}
.bl-art__head h1{font-size:2.5rem;line-height:1.12;font-weight:800;margin:12px 0 0}
.bl-art__lede{font-size:1.12rem;line-height:1.6;color:var(--ink-2);margin:14px 0 0}
.bl-art__meta{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);font-size:.86rem;color:var(--muted);flex-wrap:wrap}
/* Width is capped to the article's own content measure (the 220px contents
   rail + 56px gap + 720px prose below it) rather than running the full 1240px
   wrapper: full-bleed at this wrapper width renders a 1240x620 slab that
   pushes the opening paragraph off the first screen entirely. 21/9 for the
   same reason — 2/1 was still 100px taller than it needed to be. */
.bl-art__hero{border-radius:var(--r);overflow:hidden;background:var(--line-2);margin:0 0 8px;
  max-width:996px;aspect-ratio:21/9}
.bl-art__hero img{width:100%;height:100%;object-fit:cover}
.bl-art__cap{font-size:.78rem;color:var(--muted);padding:8px 2px 0;margin:0 0 26px;max-width:996px}

.bl-art__cols{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
.bl-toc{position:sticky;top:82px;max-height:calc(100vh - 110px);overflow-y:auto}
.bl-toc h2{font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.bl-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.bl-toc li a{display:block;padding:6px 0 6px 15px;margin-left:-1px;border-left:2px solid transparent;
  font-size:.84rem;line-height:1.4;color:var(--muted)}
.bl-toc li a:hover{color:var(--ink)}
.bl-toc li a.is-on{color:var(--primary);border-left-color:var(--primary);font-weight:650}
.bl-toc .lvl3 a{padding-left:26px;font-size:.8rem}

/* ── prose ──────────────────────────────────────────────────────────────── */
.bl-prose{max-width:720px;font-size:1.06rem;line-height:1.75;color:var(--ink)}
.bl-prose > *:first-child{margin-top:0}
.bl-prose p{margin:0 0 1.15em}
.bl-prose h2{font-size:1.6rem;line-height:1.25;font-weight:750;margin:2em 0 .55em;scroll-margin-top:82px}
.bl-prose h3{font-size:1.22rem;line-height:1.3;font-weight:700;margin:1.7em 0 .45em;scroll-margin-top:82px}
.bl-prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(79,70,229,.35)}
.bl-prose a:hover{text-decoration-color:var(--primary)}
.bl-prose ul,.bl-prose ol{margin:0 0 1.15em;padding-left:1.35em}
.bl-prose li{margin:0 0 .45em}
.bl-prose img{border-radius:var(--r-sm);margin:1.6em 0}
.bl-prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--primary);
  color:var(--ink-2);font-size:1.1rem;line-height:1.6}
.bl-prose blockquote p:last-child{margin-bottom:0}
.bl-prose code{background:var(--primary-bg);color:var(--primary);border-radius:4px;
  padding:.12em .38em;font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bl-prose pre{background:var(--ink);color:#E6EDF5;border-radius:var(--r-sm);padding:16px 18px;
  overflow-x:auto;font-size:.87rem;line-height:1.6;margin:0 0 1.4em}
.bl-prose pre code{background:none;color:inherit;padding:0}
.bl-prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:.94rem}
.bl-prose th,.bl-prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.bl-prose th{background:var(--line-2);font-weight:700}
.bl-prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

/* ── author card ────────────────────────────────────────────────────────── */
.bl-authorbox{display:flex;gap:16px;align-items:flex-start;max-width:720px;margin:44px 0 0;
  padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.bl-authorbox b{display:block;font-size:1rem;font-weight:750;color:var(--ink)}
.bl-authorbox a:hover b{color:var(--primary)}
.bl-authorbox em{display:block;font-style:normal;font-size:.8rem;font-weight:650;color:var(--primary);
  margin-top:2px}
.bl-authorbox p{margin:9px 0 0;font-size:.89rem;line-height:1.6;color:var(--muted)}

/* Transparency note — these bylines are editorial personas, not people, and
   the interface says so rather than implying a human wrote the piece. */
.bl-disclosure{max-width:720px;margin:16px 0 0;padding:11px 14px;background:var(--primary-bg);
  border:1px solid #DDD9FB;border-radius:var(--r-sm);font-size:.82rem;line-height:1.55;color:#413AA8}

/* ── related ────────────────────────────────────────────────────────────── */
.bl-rel{max-width:var(--wrap);margin:56px auto 0;padding:36px 24px 0;border-top:1px solid var(--line)}
.bl-rel h2{font-size:1.12rem;font-weight:750;margin:0 0 20px}
.bl-rel .bl-cards{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── author page ────────────────────────────────────────────────────────── */
.bl-ahead{display:flex;gap:20px;align-items:flex-start;padding:28px 0 26px;border-bottom:1px solid var(--line)}
.bl-ahead h1{font-size:1.85rem;font-weight:800;line-height:1.15}
.bl-ahead em{display:block;font-style:normal;font-size:.88rem;font-weight:650;color:var(--primary);margin-top:4px}
.bl-ahead p{margin:12px 0 0;font-size:.98rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.bl-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.bl-tags span{font-size:.76rem;font-weight:650;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px}

/* ── shell: footer ──────────────────────────────────────────────────────── */
.mkt-foot{margin-top:56px;border-top:1px solid var(--line);background:var(--card)}
.mkt-foot__in{max-width:var(--wrap);margin:0 auto;padding:34px 24px 26px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.mkt-foot__in b{display:block;margin-bottom:10px;font-size:.78rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mkt-foot__in > div > b{font-size:1.02rem;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.mkt-foot__in p{margin:0;font-size:.86rem;line-height:1.6;color:var(--muted);max-width:34ch}
.mkt-foot__in nav a{display:block;padding:4px 0;font-size:.87rem;color:var(--muted)}
.mkt-foot__in nav a:hover{color:var(--primary)}
.mkt-foot__bar{max-width:var(--wrap);margin:0 auto;padding:14px 24px 22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;font-size:.82rem;color:var(--muted)}
.mkt-foot__bar a:hover{color:var(--primary)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .bl-art__cols{grid-template-columns:minmax(0,1fr);gap:0}
  /* The contents list stops being a rail and becomes a collapsed summary above
     the article — sticky positioning has nothing to stick to in one column. */
  .bl-toc{position:static;max-height:none;margin:0 0 30px;padding:14px 16px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
  .bl-toc ol{border-left:0}
  .bl-toc li a{padding-left:0;border-left:0}
  .bl-toc li a.is-on{border-left:0}
  .bl-toc .lvl3 a{padding-left:14px}
}
@media (max-width:900px){
  .bl-cols{grid-template-columns:minmax(0,1fr);gap:40px}
  .bl-side{position:static}
  .bl-feat{grid-template-columns:minmax(0,1fr);gap:20px}
  .bl-feat__media{order:-1}
  .bl-rel .bl-cards,.bl-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkt-foot__in{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:760px){
  .mkt-burger{display:flex}
  /* Tighten the bar so brand + Login + CTA + burger fit at 390px without any
     of them being compressed below their intended size. */
  .mkt-nav__in{gap:12px;padding:0 18px}
  .mkt-brand{margin-right:auto}
  .mkt-cta{padding:8px 13px}
  .mkt-links{position:absolute;top:58px;left:0;right:0;flex-direction:column;gap:0;margin:0;
    padding:0 24px;background:var(--card);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .22s ease;z-index:51}
  .mkt-links.open{max-height:240px;padding:6px 24px 12px;box-shadow:0 12px 24px -12px rgba(0,0,0,.35)}
  .mkt-links a{padding:10px 0}
  /* Same gap the main-site nav (fs-nav2.twig) had: the panel sat over
     whatever the article/page already had at that spot with nothing
     marking it as an open overlay. Used on both blog.twig (_blog-nav.twig)
     and seo-page.twig, which share this stylesheet. */
  .mkt-backdrop{display:none;position:fixed;inset:0;background:rgba(10,8,20,0);z-index:49;
    transition:background .2s ease;pointer-events:none}
  .mkt-backdrop.show{display:block;background:rgba(10,8,20,.45);pointer-events:auto}
  .bl,.bl-art,.bl-rel{padding-left:18px;padding-right:18px}
  .bl-mast{padding-top:26px}
  .bl-mast h1{font-size:1.7rem}
  .bl-search{width:100%}
  .bl-feat h2{font-size:1.5rem}
  .bl-art__head h1{font-size:1.85rem}
  .bl-art__lede{font-size:1.02rem}
  .bl-prose{font-size:1.02rem}
  .bl-prose h2{font-size:1.35rem}
  .bl-cards,.bl-rel .bl-cards,.bl-cards--3{grid-template-columns:minmax(0,1fr);gap:26px}
  .bl-authorbox{flex-direction:column;gap:12px}
  .bl-ahead{flex-direction:column;gap:14px}
  .mkt-foot__in{grid-template-columns:1fr}
  .mkt-foot__bar{flex-direction:column;gap:6px}
}

/* Honour the OS setting rather than animating regardless. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .bl-card:hover .bl-card__media img{transform:none}
}