/* ============================================================
   CiteOwl — Blog
   Chrome (nav, footer, agent-bg background, .landing-btn-primary,
   .skip-link) is REUSED from landing.css + components.css. This file
   only styles what the landing page doesn't have: the article reading
   surface and the index card grid. All values via variables.css tokens.
   ============================================================ */

/* Blog content sits above the #agent-bg canvas backdrop (js/agent-bg.js),
   exactly like the landing page's own sections. */
#main { position: relative; z-index: 2; }

/* The landing page's .nav-logo is a <div>; on the blog it's an <a> linking
   home, so it needs the anchor reset the div never required. Same look. */
.nav-logo { text-decoration: none; }

/* Nav prompt fade-in (replacing landing's 4s backstop) is shared by all static
   pages via `body.chrome-static nav` in landing.css — see there. */

.blog-wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--space-12); }

/* ============================================================
   INDEX
   ============================================================ */
.blog-index-hero {
    max-width: 900px; margin: 0 auto; padding: var(--space-27) var(--space-12) var(--space-20);
    text-align: center; position: relative; z-index: 2;
}
.blog-eyebrow {
    font: var(--font-eyebrow); letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--accent);
    display: block; margin-bottom: var(--space-9);
}
.blog-index-hero h1 {
    font: var(--font-section);   /* shared interior page-hero scale (matches pricing) */
    letter-spacing: var(--track-heading); color: var(--t1);
    margin: 0 0 var(--space-8);
    text-wrap: balance;
}
.blog-index-hero p {
    font: var(--font-lead); color: var(--t2);
    max-width: 56ch; margin: 0 auto;
}
.blog-index-hero p + p { margin-top: var(--space-6); }
/* Pillar-intro links wear the gold chrome accent, not the browser default. */
.blog-index-hero p a {
    color: var(--accent); text-decoration: none;
    border-bottom: 1px solid var(--accent-border);
    transition: border-color var(--dur) var(--ease);
}
.blog-index-hero p a:hover { border-bottom-color: var(--accent); }

/* Themed sections, each a heading over its own card grid. */
.blog-section {
    max-width: 980px; margin: 0 auto; padding: 0 var(--space-12);
    position: relative; z-index: 2;
}
.blog-section:first-of-type { padding-top: var(--space-15); }
.blog-section + .blog-section { margin-top: var(--space-24); }
.blog-section:last-of-type { padding-bottom: var(--space-25); }
/* Subcategory header over a card grid — sized to match the after-article
   section headers (.blog-faq h2 / .blog-readnext-label, both 30px) so every
   "label over a grid" on the blog reads at one rank, and to sit clearly above
   the 22px card titles rather than tying with them. A gold .accent phrase
   gilds the payoff tail, like the landing section headings; padding-right/
   -bottom give that gradient text-clip room (no right-edge or descender crop). */
.blog-section-title {
    font: var(--font-subhead); letter-spacing: var(--track-heading);
    color: var(--t1); margin: 0 0 var(--space-14);
    padding-right: 0.18em; padding-bottom: 0.20em;
}
.blog-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-14);
}
@media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
    display: flex; flex-direction: column;
    /* Warm vertical body gradient (a touch lighter just under the illustration,
       fading to near-black) so the scene band and the text read as one
       continuous warm panel rather than art-on-flat-dark — the cohesive feel of
       the landing .why-card, kept opaque (no backdrop blur, per the project's
       --surface-glass-blur: none decision) with a faint white top sheen over it. */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.004) 100%),
        linear-gradient(180deg, #1d1912 0%, #16130d 100%);
    border: var(--surface-glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-13) var(--space-13) var(--space-11);
    text-decoration: none;
    /* Same panel material as landing's .why-card: an inset top sheen plus a
       soft deep drop shadow so the card floats above the starfield instead of
       sitting flat. Gold (the .why-card--us stele crown) is deliberately NOT
       borrowed — that crown is an anchor signal for "the recommended one", and
       repeating it across every article card would dilute it. */
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 24px 60px -28px rgba(0,0,0,0.6);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.blog-card:hover {
    border-color: var(--accent-border);
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 32px 72px -26px rgba(0,0,0,0.66);
}
.blog-card.blog-card--feature { grid-column: 1 / -1; }
.blog-card-title {
    font: 500 22px/1.25 var(--serif); letter-spacing: -0.015em;
    color: var(--t1); margin: 0 0 var(--space-5);
}
.blog-card--feature .blog-card-title { font-size: 28px; }
.blog-card-excerpt {
    font: 400 15px/1.6 var(--sans); color: var(--t2);
    margin: 0 0 var(--space-9);
}
.blog-card-meta {
    margin-top: auto;
    font: var(--font-ui-sm); color: var(--t3);
    display: flex; align-items: center; gap: var(--space-3);
}
.blog-card-meta .blog-dot { color: var(--t4); }

/* ============================================================
   CARD SCENES — each card carries a full self-contained animated SVG
   (its own <style>, namespaced s1-..s5-, with its own reduced-motion
   fallback). This file only frames the band; the SVG fills it.
   ============================================================ */
.blog-card { padding: 0; overflow: hidden; }
.scene {
    position: relative; height: 176px; overflow: hidden;
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%, rgba(var(--accent-rgb), 0.06), transparent 70%),
        linear-gradient(180deg, #211d16, #191510);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.blog-card--feature .scene { height: 216px; }
.scene::after {                       /* faint ruled-paper texture behind the art */
    content: ''; position: absolute; inset: 0; opacity: .35; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100% 24px;
}
.scene svg, .scene img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.blog-card-inner { padding: var(--space-12) var(--space-13) var(--space-11); display: flex; flex-direction: column; flex: 1; }

/* -- Listing entrance — staggered fade + rise on load. Pure CSS so the
   cards always end visible (no reliance on JS / no content hidden from
   crawlers); the rise uses the independent `translate` property so it never
   fights the card's `transform` hover-lift. Static under reduced-motion. -- */
@media (prefers-reduced-motion: no-preference) {
    .blog-index-hero h1,
    .blog-index-hero p,
    .blog-section-title,
    .blog-grid .blog-card {
        opacity: 0;
        animation: blog-rise 320ms var(--ease) both;
    }
    .blog-index-hero h1 { animation-delay: 0ms; }
    .blog-index-hero p  { animation-delay: 40ms; }
    .blog-section-title { animation-delay: 60ms; }
    .blog-grid .blog-card:nth-child(1) { animation-delay: 80ms; }
    .blog-grid .blog-card:nth-child(2) { animation-delay: 110ms; }
    .blog-grid .blog-card:nth-child(3) { animation-delay: 140ms; }
    .blog-grid .blog-card:nth-child(4) { animation-delay: 170ms; }
}
/* Pure fade — no vertical translate — so a refresh fades headings in without
   sliding them up into place. */
@keyframes blog-rise {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   ARTICLE
   ============================================================ */
.blog-article { padding: 110px 0 var(--space-17); position: relative; z-index: 2; }

.blog-breadcrumb {
    font: var(--font-ui-sm); color: var(--t3); margin-bottom: var(--space-11);
}
.blog-breadcrumb a { color: var(--t2); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--accent); }
.blog-breadcrumb span { color: var(--t4); margin: 0 var(--space-3); }

/* Title block lives INSIDE the papyrus (like the editor: the document title
   sits on the sheet, not above it), so it uses document ink/brick colors. */
.blog-article-head { margin: 0 0 var(--space-16); }
.blog-article-head h1 {
    /* The shared title rank (--font-title, also auth + panel titles), with a
       tighter line-height for a big article headline. */
    font: var(--font-title); line-height: 1.14;
    letter-spacing: var(--track-heading); color: var(--td1);
    margin: 0 0 var(--space-8);
}
.blog-article-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
    font: var(--font-ui-sm); color: var(--td3);
    padding-bottom: var(--space-14);
    border-bottom: 1px solid var(--doc-border);
}
.blog-article-meta .blog-dot { color: var(--td3); opacity: 0.6; }

/* -- The papyrus reading surface -- */
.blog-paper {
    margin: var(--space-15) 0 0;
    background: var(--doc-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-20) clamp(var(--space-12), 7vw, var(--space-23));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        var(--shadow-md);
    color: var(--td2);
    font: 400 18px/1.78 var(--serif);
}
.blog-paper > :first-child { margin-top: 0; }
.blog-paper > :last-child { margin-bottom: 0; }

.blog-paper p { margin: 0 0 var(--space-10); }
/* Lead-in paragraph: same size as the body (so Source Serif's optical-size
   axis doesn't shift the letterforms and read as a different font), set apart
   only by darker ink. */
.blog-paper .blog-lead { color: var(--td1); }
.blog-paper h2 {
    font: 500 28px/1.3 var(--serif); letter-spacing: -0.01em;
    color: var(--td1); margin: var(--space-18) 0 var(--space-8);
}
.blog-paper h3 {
    font: 600 20px/1.4 var(--serif);
    color: var(--td1); margin: var(--space-15) 0 var(--space-6);
}
/* Body links only — never the in-article CTA, which keeps its gold
   .landing-btn-primary chrome (dark text, no underline). */
.blog-paper a:not(.landing-btn-primary) {
    color: var(--doc-accent); text-decoration: none;
}
.blog-paper a:not(.landing-btn-primary):hover {
    text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
    text-decoration-color: var(--doc-accent);
}
.blog-paper strong { color: var(--td1); font-weight: 600; }
.blog-paper em { font-style: italic; }

.blog-paper ul, .blog-paper ol { margin: 0 0 var(--space-10); padding-left: var(--space-13); }
.blog-paper li { margin: 0 0 var(--space-5); }
.blog-paper li::marker { color: var(--td3); }

.blog-paper blockquote {
    margin: var(--space-12) 0; padding: var(--space-2) 0 var(--space-2) var(--space-11);
    border-left: 3px solid var(--doc-accent);
    color: var(--td2b); font-style: italic;
}
.blog-paper blockquote cite {
    display: block; margin-top: var(--space-4);
    font: var(--font-ui); font-style: normal; color: var(--td3);
}

.blog-paper hr {
    border: none; height: 1px; margin: var(--space-17) 0;
    background: var(--doc-border-strong);
}

.blog-paper code {
    font: 0.86em var(--mono);
    background: rgba(0, 0, 0, 0.06); color: var(--td1);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs);
}

/* -- Key-takeaway / aside callout -- */
/* "Card header" surface — reuses the landing comparison-card head
   (.why-card-head) and the app citation tooltip's byline divider (.cite-tip-byline):
   an eyebrow label sitting over a thin rule, content below, on lighter papyrus.
   Calm structure rather than a boxed alert; spans the full article column. */
/* "In short" answer box: borderless, lead-style, with a brick left-rule.
   Kept for featured-snippet / AI-overview capture (a 40-60 word direct answer),
   restyled so it reads as part of the article, not a boxed insert. */
.blog-callout {
    margin: var(--space-11) 0 var(--space-13);
    padding: var(--space-1) 0 var(--space-1) var(--space-11);
    border-left: 3px solid var(--doc-accent);
}
.blog-callout-label {
    font: var(--font-eyebrow-sm); letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--doc-accent);
    display: block; margin-bottom: var(--space-4);
}
.blog-callout p { margin: 0; font: 400 19px/1.65 var(--serif); color: var(--td1); }
.blog-callout strong { color: var(--td1); }

/* -- Comparison / data table -- */
.blog-table-wrap { margin: 0 0 var(--space-14); overflow-x: auto; }
.blog-paper table {
    width: 100%; border-collapse: collapse;
    margin: 0 0 var(--space-15);
    font: 400 15px/1.5 var(--sans); color: var(--td2);
}
.blog-paper th, .blog-paper td {
    text-align: left; padding: var(--space-5) var(--space-7);
    border-bottom: 1px solid var(--doc-border);
    vertical-align: top;
}
.blog-paper thead th {
    font-weight: 600; color: var(--td1);
    border-bottom: 2px solid var(--doc-border-strong);
    white-space: nowrap;
}
.blog-paper tbody tr:last-child td { border-bottom: none; }
.blog-paper td strong { color: var(--td1); }

/* ============================================================
   AFTER-ARTICLE — FAQ + Read next sit BELOW the papyrus, on the dark
   page (the same backdrop the landing sections use), aligned to the
   article column. Light-on-dark chrome tokens, like the /blog index
   grid; the footer anchors the zone so it reads as a deliberate end.
   ============================================================ */
.blog-after { margin: var(--space-25) 0 var(--space-17); }
.blog-after > section + section { margin-top: var(--space-24); }
/* The after-article zone is a bare child of #main, whose horizontal gutter is
   zeroed by .blog-article's `padding: 110px 0 40px` shorthand (the prose has
   its own padding via .blog-paper, so only this zone is affected). Restore a
   side gutter whenever #main is viewport-constrained (<=900px) so the FAQ and
   Read-next cards don't run to the screen edges. Desktop (main centered with
   its own margin) is untouched. */
@media (max-width: 900px) {
    .blog-after { padding-left: var(--space-12); padding-right: var(--space-12); }
    /* The floating nav shrinks to its pill row here (~60px tall), so the desktop
       110px article clearance leaves a big dead gap above the papyrus sheet —
       and the sheet's own 32px top margin already adds separation. Pull the top
       padding down so the sheet sits a tidy distance below the nav. The ≤600px
       block tightens this further for phones. */
    .blog-article { padding-top: var(--space-19); }
}

/* -- Section headers (FAQ + Read next) — set off by space, with a gold-tinted
   accent phrase like the landing section headings (the .accent gradient).
   padding-right/-bottom give the gradient text-clip room (no descender crop). -- */
.blog-faq h2,
.blog-readnext-label {
    font: var(--font-subhead); letter-spacing: -0.015em;
    color: var(--t1); margin: 0 0 var(--space-14);
    padding-right: 0.18em; padding-bottom: 0.20em;
}

/* -- FAQ — dark accordion, like the landing FAQ -- */
.blog-faq details {
    border-bottom: 1px solid var(--chrome-border);
    padding: var(--space-2) 0;
}
.blog-faq summary {
    list-style: none; cursor: pointer;
    font: 600 18px/1.5 var(--serif); color: var(--t1);
    padding: var(--space-10) var(--space-15) var(--space-10) 0; position: relative;
    transition: color var(--dur) var(--ease);
}
.blog-faq summary:hover { color: var(--accent); }
.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq summary::after {
    content: '+'; position: absolute; right: 4px; top: 18px;
    font: 300 24px/1 var(--sans); color: var(--accent);
    transition: transform var(--dur) var(--ease);
}
.blog-faq details[open] summary::after { content: '\2013'; }
.blog-faq details p {
    margin: 0 0 var(--space-8); font: 400 16px/1.7 var(--sans); color: var(--t2);
}
.blog-faq details p a { color: var(--accent); text-decoration: none; }
.blog-faq details p a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* -- In-article CTA (dark card on the papyrus) -- */
.blog-cta {
    margin: var(--space-17) 0 0; padding: var(--space-15) clamp(var(--space-12), 5vw, var(--space-18));
    background:
        radial-gradient(ellipse 80% 120% at 0% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%),
        var(--chrome-bg2);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-xl);
    text-align: center;
}
/* CTA headline is a <p class="blog-cta-head">, not an <h2>, so promotional copy
   stays out of the article's heading outline (SEO). Same look as a heading. */
.blog-cta h2, .blog-cta-head {
    font: 500 26px/1.3 var(--serif); color: var(--t1);
    margin: 0 0 var(--space-5); letter-spacing: -0.01em;
}
/* :not(.blog-cta-head) so this body rule never out-specifies the heading —
   otherwise `.blog-cta p` (0,1,1) would beat `.blog-cta-head` (0,1,0) and drag
   the title down to the muted body color. */
.blog-cta p:not(.blog-cta-head) { font: 400 16px/1.6 var(--sans); color: var(--t2); margin: 0 0 var(--space-11); }

/* -- Read next — index-style glass cards on the dark page -- */
.blog-readnext-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10);
}
.blog-readnext-card {
    display: flex; flex-direction: column;
    /* Same warm gradient + floating material as .blog-card (see there) so the
       index grid and the after-article "Read next" grid read as one family. */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.004) 100%),
        linear-gradient(180deg, #1d1912 0%, #16130d 100%);
    border: var(--surface-glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-13) var(--space-13) var(--space-11);
    text-decoration: none;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 24px 60px -28px rgba(0,0,0,0.6);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.blog-readnext-card:hover {
    border-color: var(--accent-border);
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 32px 72px -26px rgba(0,0,0,0.66);
}
.blog-readnext-card .rn-title {
    font: 500 20px/1.28 var(--serif); letter-spacing: -0.015em;
    color: var(--t1); margin-bottom: var(--space-5);
}
.blog-readnext-card .rn-excerpt {
    font: 400 15px/1.6 var(--sans); color: var(--t2); margin-bottom: var(--space-9);
}
.blog-readnext-card .rn-meta {
    margin-top: auto; font: var(--font-ui-sm); color: var(--t3);
}
@media (max-width: 620px) {
    .blog-readnext-grid { grid-template-columns: 1fr; }
}

/* -- Mobile: the after-article zone (CTA + FAQ + Read next) is spaced for
   desktop (96/88px bands, 30px headers). On a phone that reads loose and
   disconnected, so tighten the vertical rhythm and step the type down. -- */
@media (max-width: 600px) {
    /* Hero nav-clearance, shared across every page: the fixed nav's bottom edge
       sits at ~62px on phones, so the first hero element clears it by ~34px on
       the landing (96px top). Match it here. The blog-index hero never had a
       mobile padding override (it kept its desktop 140px top), and the article's
       breadcrumb cleared the nav by only ~22px — both now align to 96px. */
    .blog-index-hero { padding: var(--space-25) var(--space-7) var(--space-17); }
    /* Hero title (--font-section) and subtitle (--font-lead) take their phone
       sizes straight from the shared clamp tokens — matching the landing +
       pricing heroes — so no per-breakpoint font-size lives here. */
    /* The article's first child is the papyrus sheet, which carries its own
       32px top margin (.blog-paper) — so unlike the hero we must NOT also pad a
       full nav-clearance here or the nav-to-sheet gap doubles into dead space.
       40px + the sheet's 32px margin sits the sheet ~12px below the nav pill,
       a tight tidy gap (tablets keep a touch more via the ≤900px block). */
    .blog-article { padding: var(--space-17) 0 var(--space-15); }
    /* Clear separation between the after-article sections without the airy
       desktop bands: a distinct break above the FAQ and between FAQ / Read
       next, and stacked Read-next cards that don't read as touching. */
    .blog-after { margin: var(--space-22) 0 var(--space-17); }
    .blog-after > section + section { margin-top: var(--space-21); }
    .blog-readnext-grid { gap: var(--space-14); }
    /* font-size is clamp-driven (--font-subhead); only the gap tightens here. */
    .blog-faq h2,
    .blog-readnext-label { margin-bottom: var(--space-12); }
    .blog-faq summary { font-size: 17px; padding: var(--space-8) var(--space-14) var(--space-8) 0; }
    .blog-faq summary::after { top: 14px; }
    .blog-faq details p { font-size: 15px; }
    .blog-cta { padding: var(--space-13) var(--space-11); margin-top: var(--space-15); }
    .blog-cta h2, .blog-cta-head { font-size: 22px; }
    .blog-cta p:not(.blog-cta-head) { font-size: 15px; }   /* shared 15px body size, was 16px */
    .blog-readnext-card { padding: var(--space-11) var(--space-11) var(--space-9); }
    .blog-readnext-card .rn-title { font-size: 18px; }
    .blog-readnext-card .rn-excerpt { font-size: 15px; margin-bottom: var(--space-7); }
}