/* ==========================================================================
   articles-index.css — styling for the Knowledge Base catalog page.
   ==========================================================================
   Shared by BOTH renders of /articles so they cannot drift:
     * articles_index.html        — logged-in (extends base.html, has sidebar)
                                    and the in-shell embed browse view
     * articles_index_public.html — anonymous (extends public_base.html)

   Extracted byte-for-byte from the former inline <style> in
   articles_index.html on 2026-07-20. Carries NO :root / reset / body rules:
   the in-app render inherits those from base.html, the public render from
   public-shell.css. Duplicating them here would create a third copy to drift.
   ========================================================================== */

.articles-layout {
    display: flex;
    min-height: 100vh;
}
.articles-main {
    flex: 1;
    /* No wrapper chrome by default (embed browse view + logged-out page).
       The logged-in standalone fallback adds it back below. */
    margin-left: 0;
    padding: 0;
    background: var(--surface-reading);   /* softer reading surface, matches article.html */
    min-height: 100vh;
}
body.embed-iframe,
body.embed-iframe .articles-layout { background: var(--surface-reading); }
/* Logged-in standalone render (refresh / direct link): clear the wrapper
   sidebar + fixed ribbon. */
body.articles-with-shell .articles-main {
    margin-left: var(--sidebar-width);
    margin-top: 123px;
}
.articles-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 48px 96px;
}
/* Sticky category jump-nav — turns "hunt through dropdowns" into one click
   to any group. Sits at the top of the scroll area; chips link to the
   per-category anchors below. */
.articles-jumpnav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: 6px;
    padding: 14px 0 15px;
    margin-bottom: 40px;
    background: var(--surface-reading);
    border-bottom: 1px solid var(--border-primary);
}
/* Plain text links, no capsule. The count trails the name as a superior
   figure the way a contents page sets a folio, so it reads as part of the
   entry rather than as a badge stuck onto it. */
.articles-jumplink {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.articles-jumplink:hover { color: #3fae7f; }
.articles-jumplink span {
    font-size: 0.62rem;
    line-height: 1.1;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.articles-category-section { scroll-margin-top: 76px; }
.articles-header {
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-primary);
}
.articles-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}
.articles-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.articles-breadcrumb a:hover { color: var(--text-primary); }
.articles-breadcrumb svg { width: 14px; height: 14px; stroke: var(--text-tertiary); }
/* .articles-eyebrow is GONE (2026-08-10) — the accent-tinted uppercase pill
   above the h1 said "Articles" a third time after the breadcrumb and the
   heading, and was this page's only use of emerald as a fill. The rule is
   removed rather than hidden so nothing can reintroduce it by adding the
   span back. */
.articles-title {
    /* Space Grotesk is the face research-reading.css:177-182 retired BY NAME as
       one of the two most associated with generated design, and /articles is
       the page a reader meets before any article. It also had 'Inter' behind
       it, which has no @font-face anywhere in this repo — harmless only because
       Space Grotesk resolved first.
       Cormorant Garamond is the same display face the article title now uses,
       already vendored, already loaded on this page via public_base.html:51.
       3.05rem, not 2.6rem, is the floor: through the shell's 0.8 zoom that is
       48.8 device px, where the Garamond's measured 0.0220em hairline lands at
       1.07 device px. At 2.6rem it would have been 0.73px and the title would
       have bloomed on the dark ground.
       WEIGHT 600 AND CREAM (founder 2026-08-17), replacing 500 in the cool
       --text-primary. The note this supersedes argued 600 "widens stroke
       contrast without helping": true, the hairline does not grow with the
       stem — but that is a risk only where the hairline is already near the
       device pixel, and at 3.05rem it sits at 1.07px with room to spare. 600
       is also a REAL vendored Cormorant face (fonts-local.css declares
       400/500/600 discretely), so nothing is synthesised. */
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 3.05rem;
    font-weight: 600;
    color: var(--paper-cream);
    line-height: 1.1;
    margin: 0 0 16px;
}
.articles-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 720px;
    line-height: 1.55;
}
.articles-category-section {
    margin-bottom: 56px;
}
.articles-category-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-secondary, rgba(255,255,255,0.08));
}
.articles-category-title {
    /* The second Space Grotesk on this page — and unlike .articles-title this
       one CANNOT take the Garamond: 1.35rem is 17.3 device px through the 0.8
       zoom, where the 0.0220em hairline is 0.38px and would drop out. Section
       headings rank by size and weight in the body sans, exactly as the article
       h2/h3 do. Named explicitly rather than inherited because the in-app
       render of this page comes through base.html:76, which still leads
       'Calibri' — a font with no @font-face in this project. */
    font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    /* Cream, matching the shelf headings on /research. Already 600, so colour
       is the whole change here — the sans keeps the weight legible where the
       Garamond could not hold its hairline (see the note above). */
    color: var(--paper-cream);
    margin: 0;
    letter-spacing: -0.01em;
}
.articles-category-count {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
/* ── The register ───────────────────────────────────────────────────────────
   Rows on hairlines, not boxes on a grid. Title in a fixed left column so all
   113 titles align down the page and the eye can run the column; the article's
   own opening sentence in the right column, set smaller and quieter, doing the
   job the read-time never did.

   The row is the hit area, so it takes the padding and the hover — there is no
   card border to light up, which is the point: the page is a list, and a list
   is held together by alignment and rules, not by outlines. */
.articles-register {
    border-top: 1px solid var(--border-secondary, rgba(255,255,255,0.08));
}
.article-row {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    column-gap: 32px;
    align-items: baseline;
    padding: 13px 12px 13px 2px;
    border-bottom: 1px solid var(--border-secondary, rgba(255,255,255,0.08));
    text-decoration: none;
    transition: background 0.14s ease, padding-left 0.14s ease;
}
.article-row:hover {
    background: rgba(255,255,255,0.025);
    padding-left: 8px;
}
.article-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    transition: color 0.14s ease;
}
.article-row:hover .article-row-title { color: #3fae7f; }
.article-row-summary {
    font-size: 0.86rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    /* Two lines is the ceiling: past that the rows stop being scannable and
       the register turns back into a wall. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 768px) {
    body.articles-with-shell .articles-main { margin-left: 0; margin-top: 56px; }
    .articles-container { padding: 28px 20px 64px; }
    /* Cormorant is set optically, so the phone step is smaller than the old 2rem:
       the face carries a ~0.386em x-height against DM Sans's ~0.504em, so matching
       apparent size means a larger point size, not a smaller one. This block is
       LATER in the file than the title rule above and @media adds no specificity,
       so it wins on order — the value has to change here, not be appended after. */
    .articles-title { font-size: 2.4rem; }
    /* One column: the title takes its own line and the summary sits under it,
       still a ruled row, just stacked. The two-column alignment is what breaks
       on a phone, not the register itself. */
    .article-row {
        grid-template-columns: 1fr;
        row-gap: 4px;
        padding: 12px 0;
    }
    .article-row:hover { padding-left: 0; }
    .articles-jumpnav { display: none; }
}