/* =====================================================================
   NOVI BLOG  ·  novi-blog.css
   Shared chrome + components for the blog index and the article pages.
   Pairs with novi-system.css (tokens, type roles, .bracket, .reveal,
   .btn-primary, .link-arrow, .container). Nav + footer + the three-column
   layout shell are copied verbatim from the sibling core pages so every
   blog page renders pixel-identical to the rest of the site.
   ===================================================================== */

body { padding-top: 64px; }
main { padding-top: 0; }

/* ── Three-column layout shell (verbatim from the core pages) ──────── */
.layout {
    display: block; position: relative;
    max-width: 1440px; margin: 0 auto;
    min-height: calc(100vh - 64px);
}
@media (min-width: 1100px) {
    .layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr) 220px;
    }
    .layout::before, .layout::after {
        content: ""; position: absolute; top: 0; bottom: 0;
        width: 1px; background: var(--border); z-index: 1;
    }
    .layout::before { left: 240px; }
    .layout::after  { right: 220px; }
}
.layout-left, .layout-right { display: none; }
@media (min-width: 1100px) {
    .layout-left, .layout-right {
        display: block;
        position: sticky; top: 64px; align-self: start;
        max-height: calc(100vh - 64px); overflow-y: auto;
        padding: 40px 24px;
    }
}
.layout-main {
    min-width: 0;
    background-color: var(--bg);
    background-image:
        linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0;
}
@media (min-width: 1100px) {
    .layout-main .container { padding: 0 96px; max-width: none; }
}
@media (min-width: 1280px) {
    .layout-main .container { padding: 0 112px; }
}
/* Section borders + diamond markers at intersections */
@media (min-width: 1100px) {
    .layout-main > section + section { border-top: 1px solid var(--border); position: relative; }
    .layout-main > section + section::before,
    .layout-main > section + section::after {
        content: ""; position: absolute; top: -4px;
        width: 7px; height: 7px;
        background: var(--text-faint);
        transform: rotate(45deg);
        pointer-events: none;
    }
    .layout-main > section + section::before { left: -4px; }
    .layout-main > section + section::after  { right: -4px; }
}

/* ── Left sidebar ──────────────────────────────────────────────────── */
.side-block { margin-bottom: 40px; }
.side-block:last-child { margin-bottom: 0; }
.side-label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 16px;
}
.status-body {
    font-size: var(--fs-caption); color: var(--text-muted); line-height: var(--lh-caption);
    margin-bottom: 16px;
}
.status-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-small); font-weight: 500; color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 1px;
    transition: border-color 150ms ease-out;
}
.status-link:hover { border-color: var(--cta); }

/* ── Right sidebar — On this page ──────────────────────────────────── */
.toc-wrap { border-left: 1px solid var(--border); padding-left: 0; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { padding: 0; }
.toc-list a {
    display: block; padding: 8px 0;
    font-size: var(--fs-small); color: var(--text-muted); text-decoration: none;
    border-left: 2.5px solid transparent;
    padding-left: 12px; margin-left: -2.5px;
    transition: color 150ms ease-out, border-color 150ms ease-out;
}
.toc-list a:hover { color: var(--text); }
.toc-list a.is-active { color: var(--text); border-left-color: var(--cta); }

/* ── Navigation (verbatim from the core pages) ─────────────────────── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease-out, background 200ms ease-out;
}
.nav.is-scrolled { border-bottom-color: var(--border); }
.nav-inner {
    max-width: 1440px; margin: 0 auto; height: 100%;
    display: flex; align-items: center; gap: 32px;
    padding: 0 24px;
}
@media (min-width: 768px)  { .nav-inner { padding: 0 48px; } }
@media (min-width: 1100px) {
    .nav-inner {
        display: grid; padding: 0;
        grid-template-columns: 240px minmax(0, 1fr) 220px;
        gap: 0; position: relative;
    }
    .nav-inner::before, .nav-inner::after {
        content: ""; position: absolute; top: 0; bottom: 0;
        width: 1px; background: var(--border);
    }
    .nav-inner::before { left: 240px; }
    .nav-inner::after  { right: 220px; }
    .nav-left, .nav-middle, .nav-right { height: 100%; display: flex; align-items: center; padding: 0 24px; }
    .nav-middle { justify-content: center; }
    .nav-right  { justify-content: flex-end; gap: 12px; }
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-right: auto; }
.logo-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 24px; height: 24px; flex-shrink: 0; }
.logo-grid > div { border-radius: 2px; }
.logo-text { font-weight: 600; font-size: var(--fs-small); letter-spacing: -0.01em; line-height: 1; }
.nav-links { display: none; gap: 24px; }
@media (min-width: 1024px) { .nav-links { display: flex; align-items: center; } }
.nav-links a {
    font-size: var(--fs-small); font-weight: 500; color: var(--text-muted);
    text-decoration: none; transition: color 150ms ease-out;
    position: relative; padding: 4px 0;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.is-current { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
@media (min-width: 1024px) { .nav-right { margin-left: 0; } }
.theme-toggle {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-muted); cursor: pointer;
    transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-cta {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-small); font-weight: 600;
    color: var(--cta-text); background: var(--cta); border: 1px solid var(--cta);
    text-decoration: none; padding: 8px 14px; border-radius: 4px;
    transition: background 150ms ease-out;
}
.nav-cta:hover { background: var(--cta-hover); }

/* ── Section base ──────────────────────────────────────────────────── */
section { padding: var(--space-9) 0; position: relative; }
@media (min-width: 768px) { section { padding: var(--space-10) 0; } }

/* ── Footer (verbatim from the core pages) ─────────────────────────── */
.footer { padding: 48px 0 32px; border-top: 1px solid var(--border); }
.footer .bracket::before, .footer .bracket::after,
.footer .bracket > .br-bl, .footer .bracket > .br-br { width: 12px; height: 12px; z-index: 1; }
.footer .bracket::before { border-top-width: 1.5px; border-left-width: 1.5px; }
.footer .bracket::after  { border-top-width: 1.5px; border-right-width: 1.5px; }
.footer .bracket > .br-bl { border-bottom-width: 1.5px; border-left-width: 1.5px; }
.footer .bracket > .br-br { border-bottom-width: 1.5px; border-right-width: 1.5px; }
.footer-master.bracket { border: 0; background: transparent; padding: 0; --accent: var(--text-faint); }
.footer-row { padding: 16px 24px; position: relative; }
.footer-row + .footer-row { border-top: 1px solid var(--border); }
.footer-row:first-child, .footer-row:last-child { background: var(--surface-2); }
.footer-row:not(:first-child):not(:last-child) { background: var(--surface); }
.footer-social { display: flex; align-items: center; gap: 24px; }
.footer-social a {
    color: var(--text-muted); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 150ms ease-out;
}
.footer-social a:hover { color: var(--text); }
.footer-social svg { width: 20px; height: 20px; }
.footer-grid-x { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 600px)  { .footer-grid-x { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid-x { grid-template-columns: repeat(4, 1fr); } }
.footer-col-title {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label); font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 8px 0; }
.footer-col a {
    font-size: var(--fs-caption); color: var(--text-muted); text-decoration: none;
    transition: color 150ms ease-out;
}
.footer-col a:hover { color: var(--text); }
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label); font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); text-decoration: none;
    transition: color 150ms ease-out;
}
.footer-legal a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-bottom span {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.footer-bottom .logo-grid {
    width: 16px; height: 16px; display: inline-grid;
    grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 2px; vertical-align: middle; margin-right: 8px;
}
.footer-bottom .logo-grid > div { border-radius: 2px; }
.footer-status { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.footer-status-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label); font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.footer-status-label .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-tell-on); }
.footer-status-metrics {
    display: inline-flex; flex-wrap: wrap; gap: 8px 20px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label); font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.footer-status-metrics strong { color: var(--text-muted); font-weight: 600; }
.footer-col a.is-featured {
    color: var(--cta-text); font-weight: 600;
    padding: 1px 6px; margin: 0 -4px;
    background:
        linear-gradient(96deg,
            transparent 1%,
            color-mix(in srgb, var(--cta) 55%, transparent) 5%,
            var(--cta) 11%, var(--cta) 90%,
            color-mix(in srgb, var(--cta) 55%, transparent) 95%,
            transparent 99%);
    background-repeat: no-repeat;
    background-position: center 60%;
    background-size: 102% 78%;
    border-radius: 7px 11px 8px 10px;
    transition: background-size 150ms ease-out, color 150ms ease-out;
}
.footer-col a.is-featured:hover { color: var(--cta-text); background-size: 104% 88%; }

/* ── Closing CTA band (shared) ─────────────────────────────────────── */
.cta-band { max-width: 720px; }
.cta-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text); }
.cta-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin-top: 16px; max-width: 56ch; }
.cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

/* =====================================================================
   THE HATCHED MAT — the house convention for any framed image,
   used for both the index card media and the article banner.
   ===================================================================== */
.mat {
    position: relative;
    padding: 14px;
    background-color: var(--surface);
    background-image:
        linear-gradient(to top right, transparent 0%, var(--surface) 82%),
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--text) 9%, transparent) 0,
            color-mix(in srgb, var(--text) 9%, transparent) 1px,
            transparent 1px, transparent 7px);
    background-position: center, center;
    background-size: 100% 100%, auto;
    background-repeat: no-repeat, repeat;
}
.mat > img {
    display: block; width: 100%; height: auto; border-radius: 2px;
    box-shadow: 0 6px 16px -6px rgba(15,17,21,0.45);
}
[data-theme="dark"] .mat > img { box-shadow: 0 7px 20px -8px rgba(0,0,0,0.6); }

/* =====================================================================
   BLOG INDEX
   ===================================================================== */
.blog-hero { position: relative; overflow: hidden; padding: 64px 0 48px; }
@media (min-width: 768px) { .blog-hero { padding: 88px 0 60px; } }
.blog-glow {
    position: absolute; pointer-events: none; z-index: 0;
    top: -220px; right: -120px; width: 720px; height: 720px;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--accent-clara-on) 14%, transparent), transparent 70%);
    opacity: 0.8;
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero-head { max-width: 840px; }
.blog-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.blog-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-clara-on); }
.blog-name {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; color: var(--text);
}
@media (min-width: 768px) { .blog-name { font-size: 80px; } }
.blog-hero-lead {
    font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted);
    margin-top: 26px; max-width: 60ch;
}
@media (min-width: 768px) { .blog-hero-lead { font-size: 19px; } }

/* Category filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.filter-btn {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); background: transparent;
    border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px;
    cursor: pointer; transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
}
.filter-btn:hover { color: var(--text); border-color: var(--border-strong); }
.filter-btn.is-active { color: var(--cta-text); background: var(--cta); border-color: var(--cta); }

/* Section that holds the posts */
.posts { padding-top: 8px; }
@media (min-width: 768px) { .posts { padding-top: 12px; } }

/* Category dot + label, shared by cards */
.cat { display: inline-flex; align-items: center; gap: 8px; }
.cat::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--cat, var(--text-faint)); }
.cat span {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted);
}
.cat--foundation { --cat: var(--accent-model-on); }
.cat--product    { --cat: var(--accent-clara-on); }
.cat--fpa        { --cat: var(--accent-operate-on); }
.cat--story      { --cat: var(--accent-tell-on); }
/* Blog-only category colours extending the four brand accents, for the
   cross-cutting themes. Tailwind-400 family, to sit alongside the palette. */
.cat--epm3  { --cat: #22D3EE; }   /* EPM 3.0 — cyan */
.cat--agile { --cat: #F472B6; }   /* Agile Finance — pink */
.cat--dept  { --cat: #F87171; }   /* The FP&A Department — red */
[data-theme="dark"] .cat--epm3  { --cat: #67E8F9; }
[data-theme="dark"] .cat--agile { --cat: #F9A8D4; }
[data-theme="dark"] .cat--dept  { --cat: #FCA5A5; }

/* Series tag (ordered series) and topic badge (recurring theme) are first-class
   category chips — the same dot + uppercase-mono treatment as .cat, so they read
   as real categories rather than loose text. */
.series-tag, .topic {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap;
}
.series-tag::before, .topic::before {
    content: ""; width: 9px; height: 9px; border-radius: 2px;
    background: var(--chip, var(--text-faint));
}
.series-tag  { --chip: #F472B6; }   /* Agile Finance — pink */
.series-tag--dept { --chip: #F87171; }   /* The FP&A Department — red */
.topic--epm3 { --chip: #22D3EE; }   /* EPM 3.0 — cyan */
[data-theme="dark"] .series-tag  { --chip: #F9A8D4; }
[data-theme="dark"] .series-tag--dept { --chip: #FCA5A5; }
[data-theme="dark"] .topic--epm3 { --chip: #67E8F9; }

/* Card header row — holds the category chip and a series tag / topic badge side by side */
.post-card-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Featured (manifesto) card — image left, text right */
.featured {
    display: block; text-decoration: none; color: inherit;
    background: var(--surface);
    margin-bottom: 28px;
    transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.featured:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--text) 32%, transparent); }
@media (min-width: 920px) { .featured { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; } }
.featured .mat { display: flex; align-items: center; }
@media (min-width: 920px) { .featured .mat { padding: 18px; } }
.featured-body {
    padding: 26px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
@media (min-width: 920px) { .featured-body { padding: 40px 40px; border-top: 0; border-left: 1px solid var(--border); } }
.featured-flag {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent-model-on);
}
.featured-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text); }
.featured-excerpt { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); max-width: 52ch; }
.post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-faint);
}
.post-meta .sep { opacity: 0.5; }

/* Post grid */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
.post-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
    overflow: hidden;
    transition: box-shadow 200ms ease-out, transform 200ms ease-out, border-color 200ms ease-out;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--text) 30%, transparent); }
.post-card .mat { background-color: var(--surface-2); border-bottom: 1px solid var(--border); }
.post-card .mat > img { aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.post-card-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: var(--fs-statement); line-height: var(--lh-snug); color: var(--text); }
.post-card-excerpt { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); flex: 1 1 auto; }

/* =====================================================================
   ARTICLE PAGE
   ===================================================================== */
.article-wrap { padding: 56px 0 24px; }
@media (min-width: 768px) { .article-wrap { padding: 72px 0 32px; } }
.article { max-width: 720px; margin: 0 auto; }

.article-head { margin-bottom: 40px; }
.article-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.article-title {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: var(--text);
    text-wrap: balance;
}
@media (min-width: 768px) { .article-title { font-size: 60px; } }
.article-standfirst {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: -0.005em;
    color: var(--text-muted); margin-top: 22px; max-width: 40ch;
}
.article-byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}
.byline-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--text);
}
.byline-meta { display: flex; flex-direction: column; gap: 2px; }
.byline-name { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.byline-sub {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-faint);
}
.byline-meta .byline-sub .sep { opacity: 0.5; margin: 0 6px; }

/* Banner sits full reading-width, framed in the house mat */
.article-banner { margin: 0 0 44px; }
.article-banner .mat { background-color: var(--surface-2); border: 1px solid var(--border); }
.article-banner figcaption {
    margin-top: 12px; text-align: center;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.06em;
    color: var(--text-faint);
}

/* ── Prose ─────────────────────────────────────────────────────────── */
.prose { font-size: 18px; line-height: 1.72; color: var(--text); }
.prose > p { margin: 0 0 24px; }
.prose > p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--text); }
.prose em { font-style: italic; }
.prose a {
    color: var(--text); font-weight: 500;
    text-decoration: none; border-bottom: 1px solid var(--border-strong);
    padding-bottom: 1px; transition: border-color 150ms ease-out;
}
.prose a:hover { border-color: var(--cta); }
.prose h2 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 32px; line-height: 1.12; letter-spacing: -0.01em; color: var(--text);
    margin: 52px 0 18px; scroll-margin-top: 84px; text-wrap: balance;
}
@media (min-width: 768px) { .prose h2 { font-size: 38px; } }
.prose h3 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: var(--fs-statement); line-height: var(--lh-snug); color: var(--text);
    margin: 36px 0 14px; scroll-margin-top: 84px;
}
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 0; list-style: none; }
.prose ul > li, .prose ol > li {
    position: relative; padding-left: 30px; margin-bottom: 12px;
    color: var(--text); line-height: 1.65;
}
.prose ul > li::before {
    content: ""; position: absolute; left: 6px; top: 11px;
    width: 7px; height: 7px; border-radius: 2px; background: var(--accent-clara-on);
}
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; }
.prose ol > li::before {
    content: counter(li); position: absolute; left: 0; top: 1px;
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600;
    color: var(--text-faint);
}
.prose blockquote {
    margin: 32px 0; padding: 4px 0 4px 28px;
    border-left: 2px solid var(--cta);
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: -0.005em;
    color: var(--text);
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0; }
.prose img { border-radius: 2px; margin: 32px 0; }
.prose .lead { font-size: 21px; line-height: 1.6; color: var(--text); }

/* Pull quote — a full-width serif moment */
.pull-quote {
    margin: 48px 0;
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 30px; line-height: 1.22; letter-spacing: -0.01em;
    color: var(--text); text-align: left; text-wrap: balance;
    padding-left: 28px; border-left: 3px solid var(--cta);
}
@media (min-width: 768px) { .pull-quote { font-size: 36px; } }

/* Callout — the generic bracketed aside (insight / note / verdict) */
.callout {
    --accent: var(--text-faint);
    margin: 40px 0; padding: 26px 28px;
}
.callout .br-bl, .callout .br-br { z-index: 1; }
.callout-label {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint);
}
.callout-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.callout h3 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: var(--fs-statement); line-height: var(--lh-snug); color: var(--text); margin: 0 0 10px;
}
.callout p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin: 0 0 12px; }
.callout p:last-child { margin-bottom: 0; }
.callout p strong { color: var(--text); }
.callout--model   { --accent: var(--accent-model-on); }
.callout--operate { --accent: var(--accent-operate-on); }
.callout--tell    { --accent: var(--accent-tell-on); }
.callout--clara   { --accent: var(--accent-clara-on); }

/* Feature grid — small cards (building blocks, value matrix, templates) */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 36px 0; }
@media (min-width: 640px) { .feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
    --accent: var(--text-faint);
    padding: 22px 22px 24px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 3px;
}
.feature-card .sq { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); margin-bottom: 16px; }
.feature-card h4 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 22px; line-height: var(--lh-snug); color: var(--text); margin: 0 0 8px;
}
.feature-card p { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); margin: 0 0 10px; }
.feature-card p:last-child { margin-bottom: 0; }
.feature-card p strong { color: var(--text); }
.feature-card--dict { --accent: var(--icon-dictionary-color); }
.feature-card--table { --accent: var(--icon-table-color); }
.feature-card--link { --accent: var(--icon-link-color); }

/* Formula display — D + T + L = Any Model */
.formula {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px;
    margin: 36px 0; padding: 30px 24px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
    font-family: 'Instrument Serif', serif; font-size: 26px; line-height: 1; text-align: center;
}
@media (min-width: 768px) { .formula { font-size: 30px; } }
.formula .op { color: var(--text-faint); }
.formula .b-d { color: var(--icon-dictionary-color); }
.formula .b-t { color: var(--icon-table-color); }
.formula .b-l { color: var(--icon-link-color); }
.formula .b-r { color: var(--text); }

/* Numbered steps — the three layers */
.steps { display: flex; flex-direction: column; gap: 14px; margin: 36px 0; counter-reset: step; }
.step {
    position: relative; padding: 22px 24px 22px 64px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
    counter-increment: step;
}
.step::before {
    content: counter(step); position: absolute; left: 22px; top: 22px;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border-strong);
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--text);
}
.step h4 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 22px; line-height: var(--lh-snug); color: var(--text); margin: 0 0 6px; }
.step p { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); margin: 0; }

/* Comparison table */
.cmp { margin: 36px 0; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.cmp table { width: 100%; border-collapse: collapse; }
.cmp th {
    text-align: left; padding: 14px 20px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-faint); background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.cmp th + th, .cmp td + td { border-left: 1px solid var(--border); }
.cmp td { padding: 14px 20px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp td:last-child { color: var(--text); }
.cmp th:last-child { color: var(--accent-tell-on); }

/* Interview Q&A */
.qa { margin: 32px 0; }
.qa-q {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: var(--fs-statement); line-height: var(--lh-snug); color: var(--text);
    margin: 0 0 16px; padding-left: 22px; border-left: 2px solid var(--border-strong);
}
.qa-a { padding-left: 22px; border-left: 2px solid var(--accent-tell-on); }
.qa-a p { margin: 0 0 16px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }
.qa-a p:last-child { margin-bottom: 0; }
.qa-a p strong { color: var(--text); }

/* Tags */
.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--border); }
.article-tags .tags-label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint); margin-right: 4px;
}
.tag {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.04em;
    color: var(--text-muted); text-decoration: none;
    border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
    transition: color 150ms ease-out, border-color 150ms ease-out;
}
.tag:hover { color: var(--text); border-color: var(--border-strong); }

/* Article footer CTA + share + related */
.article-foot { margin-top: 48px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.share-label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint);
}
.share a {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-muted); text-decoration: none;
    transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
}
.share a:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.share a svg { width: 17px; height: 17px; }

.related { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border); }
.related-label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 22px;
}
.related-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
.related-card {
    display: block; text-decoration: none; color: inherit;
    padding: 20px 22px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 3px;
    transition: transform 200ms ease-out, border-color 200ms ease-out;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.related-card h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 21px; line-height: var(--lh-snug); color: var(--text); margin: 0 0 8px; }
.related-card p { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); margin: 0; }