/* Know Your Home: full section stylesheet (page palette, pillars, glossary, quiz, hub).
   Extracted from Views/KnowYourHome/_KyhHead.cshtml — keep edits here, not inline. */

    body { --ih-page-bg: #f4f6f1; --ih-page-bg-blur: rgba(244, 246, 241, 0.88); }
    html[data-theme="dark"] body { --ih-page-bg: #11150f; --ih-page-bg-blur: rgba(17, 21, 15, 0.82); }

    .kyh {
        --bg: #f4f6f1; --surface: #ffffff; --ink: #1c241a; --ink-soft: #46513f; --ink-muted: #7c8a73;
        --rule: #dde3d6; --accent: #55a250; --accent-ink: #2f5e2c; --tint: #eef2e9;
        background: var(--bg); color: var(--ink);
        font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; line-height: 1.6;
        min-height: 100vh; width: 100%; box-sizing: border-box; padding-top: 1px;
    }
    html[data-theme="dark"] .kyh {
        --bg: #11150f; --surface: #181d15; --ink: #eef1e8; --ink-soft: #c3ccb9; --ink-muted: #899180;
        --rule: #2a3024; --accent: #6fb56a; --accent-ink: #9ccf98; --tint: #1c2218;
    }
    @media (prefers-color-scheme: dark) {
        html[data-theme="auto"] .kyh {
            --bg: #11150f; --surface: #181d15; --ink: #eef1e8; --ink-soft: #c3ccb9; --ink-muted: #899180;
            --rule: #2a3024; --accent: #6fb56a; --accent-ink: #9ccf98; --tint: #1c2218;
        }
    }
    .kyh *, .kyh *::before, .kyh *::after { box-sizing: border-box; }
    .kyh section, .kyh section:not(.hero) { padding: 0; overflow: visible; position: static; opacity: 1 !important; transform: none !important; transition: none; }
    .kyh-page { max-width: 920px; margin: 0 auto; padding: 0 20px 88px; }
    @media (min-width: 720px) { .kyh-page { padding: 0 32px 88px; } }

    .kyh a { color: var(--accent-ink); }
    .kyh h1, .kyh h2, .kyh h3 { font-family: "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; color: var(--ink); }
    .kyh-head { padding: 44px 0 8px; }
    .kyh-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
    .kyh-head h1 { font-weight: 600; font-size: clamp(34px, 6vw, 52px); line-height: 1.05; margin: 10px 0 14px; }
    .kyh-lead { font-size: 18px; color: var(--ink-soft); max-width: 640px; }
    /* Centered hub header (shared look with the blog). */
    .kyh-head-center { text-align: center; padding-top: 52px; }
    .kyh-head-center .kyh-lead { margin-left: auto; margin-right: auto; }

    /* breadcrumb */
    .kyh-crumb { font-size: 14px; color: var(--ink-muted); padding: 28px 0 0; }
    .kyh-crumb a { color: var(--ink-muted); text-decoration: none; }
    .kyh-crumb a:hover { color: var(--ink); }

    /* featured card */
    .kyh-featured { display: block; background: var(--accent); color: #fff; border-radius: 14px; padding: 28px 30px; text-decoration: none; margin: 24px 0 10px; transition: transform 120ms; }
    .kyh-featured:hover { transform: translateY(-2px); color: #fff; }
    .kyh-featured .ec { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: .9; }
    .kyh-featured h2 { color: #fff; font-size: 28px; margin: 6px 0 6px; }
    .kyh-featured p { margin: 0; opacity: .95; font-size: 15px; }

    /* quick-find — a full section (group header + blurb), with each situation
       as its own card in a grid below. Reuses .kyh-group-head / .kyh-group-blurb. */
    .kyh-qf { margin: 38px 0; }
    .kyh .kyh-qf { padding: 0 !important; }
    .kyh-qf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-top: 14px; }
    .kyh-qf-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 15px 18px; transition: border-color 120ms, transform 120ms; }
    .kyh-qf-card:hover { border-color: var(--accent); transform: translateY(-1px); }
    .kyh-qf-q { display: block; color: var(--ink); font-weight: 700; font-size: 15px; margin-bottom: 9px; line-height: 1.35; }
    .kyh-qf-links { display: flex; flex-direction: column; gap: 6px; }
    .kyh-qf-links a { font-size: 14px; color: var(--accent-ink); text-decoration: none; line-height: 1.3; display: inline-flex; align-items: baseline; gap: 6px; }
    .kyh-qf-links a::before { content: "›"; color: var(--ink-muted); font-weight: 600; }
    .kyh-qf-links a:hover { text-decoration: underline; }

    /* Start Here holds exactly four entry guides; force a 4-up row on desktop
       so they don't wrap 3 + 1. Falls back to the auto-fill grid on narrow screens. */
    @media (min-width: 720px) { .kyh-list.kyh-list-4 { grid-template-columns: repeat(4, 1fr); } }

    /* groups + pillar lists */
    .kyh-group { margin: 38px 0; scroll-margin-top: 90px; }
    .kyh-group-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 2px solid var(--rule); padding-bottom: 8px; margin-bottom: 14px; }
    .kyh-group-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .kyh-group-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--tint); }
    .kyh-group-head h2 { font-size: 24px; margin: 0; }
    .kyh-group-head .cnt { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
    .kyh-group-blurb { color: var(--ink-soft); font-size: 15px; margin: -6px 0 14px; }
    .kyh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
    .kyh-card { display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: var(--ink); transition: border-color 120ms, transform 120ms; }
    .kyh-card:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
    .kyh-card h3 { font-size: 17px; margin: 0 0 4px; }
    .kyh-card p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.45; }
    .kyh-card .stub { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; }

    /* search */
    .kyh-search { position: relative; margin: 26px 0 8px; }
    .kyh-search input { width: 100%; font: inherit; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); }
    .kyh-search input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
    .kyh-results { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; z-index: 30; left: 0; right: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.12); max-height: 360px; overflow: auto; }
    .kyh-results:empty { display: none; }
    .kyh-results li a { display: flex; gap: 9px; align-items: baseline; padding: 9px 12px; border-radius: 7px; text-decoration: none; color: var(--ink); }
    .kyh-results li a:hover, .kyh-results li a:focus { background: var(--tint); }
    .kyh-results .r-main { flex: 1; min-width: 0; }
    .kyh-results .r-title { display: block; font-weight: 600; }
    .kyh-results .r-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--ink-muted); margin-top: 1px; line-height: 1.45; }

    /* pillar */
    /* height:auto is required — the <img> carries width/height attributes (good for CLS), and
       without it the height attribute (675) wins over aspect-ratio, rendering a fixed 675px-tall
       image on mobile. With height:auto the 16/9 ratio drives the height from the fluid width. */
    .kyh-hero { width: 100%; height: auto; border-radius: 14px; margin: 8px 0 18px; aspect-ratio: 16/9; object-fit: cover; background: var(--tint); }
    .kyh-sub { font-size: 19px; color: var(--ink-soft); margin: 0 0 18px; }
    .kyh-tldr { background: var(--tint); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 18px 0; }
    .kyh-tldr h2 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 8px; }
    .kyh-tldr ul { margin: 0; padding-left: 20px; }
    .kyh-tldr li { margin: 4px 0; }
    .kyh-related-bar { font-size: 14px; color: var(--ink-muted); margin: 14px 0; }
    .kyh-related-bar a { margin: 0 2px; }
    .kyh-toc { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 20px; margin: 18px 0 26px; }
    .kyh-toc strong { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
    .kyh-toc ol { margin: 0; padding-left: 20px; }
    .kyh-toc li { margin: 4px 0; }
    .kyh-toc a { text-decoration: none; }
    .kyh-body { font-size: 17.5px; line-height: 1.72; }
    .kyh-body h2 { font-size: 27px; margin: 34px 0 12px; scroll-margin-top: 90px; }
    .kyh-body h3 { font-size: 20px; margin: 22px 0 8px; }
    /* The site reset is `* { margin:0 }`, so restore vertical rhythm explicitly:
       paragraphs need breathing room and lists need spacing + indent so they read
       as part of the flowing text, not crammed against neighbours. */
    .kyh-body p { color: var(--ink); margin: 0 0 16px; }
    .kyh-body ul, .kyh-body ol { margin: 16px 0 18px; padding-left: 26px; }
    .kyh-body li { color: var(--ink); margin: 7px 0; }
    .kyh-body > :last-child { margin-bottom: 0; }
    .kyh-body img { max-width: 100%; border-radius: 10px; }
    .wiki-table, .kyh-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
    .wiki-table th, .wiki-table td, .kyh-body th, .kyh-body td { border: 1px solid var(--rule); padding: 9px 12px; text-align: left; }
    .wiki-table th, .kyh-body th { background: var(--tint); font-weight: 600; }
    .wiki-term { border-bottom: 2px dotted var(--accent); cursor: help; }
    .kyh-faq { margin: 30px 0; }
    .kyh-faq h2 { font-size: 24px; margin: 0 0 12px; }
    .kyh-faq details { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 16px; margin: 8px 0; background: var(--surface); }
    .kyh-faq summary { font-weight: 600; cursor: pointer; }
    .kyh-faq p { margin: 8px 0 0; color: var(--ink-soft); }

    /* end-of-guide: keep reading + back-to-index */
    .kyh-next { margin: 76px 0 8px; padding-top: 32px; border-top: 1px solid var(--rule); }
    .kyh-next h2 { font-size: 20px; margin: 0 0 16px; }
    .kyh-next-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
    .kyh-next-card { display: block; border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
    .kyh-next-card:hover { border-color: var(--accent); transform: translateY(-2px); }
    .kyh-next-card h3 { font-size: 16px; margin: 0 0 5px; color: var(--ink); }
    .kyh-next-card p { font-size: 13px; margin: 0; color: var(--ink-muted); line-height: 1.5; }
    .kyh-next-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
    .kyh-next-back { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--tint); color: var(--accent-ink); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s ease, color .15s ease; }
    .kyh-next-back:hover { background: var(--accent); color: #fff; }
    .kyh-next-back svg { color: currentColor; }
    .kyh-next-more { color: var(--ink-muted); text-decoration: none; font-size: 14px; }
    .kyh-next-more:hover { color: var(--ink); }

    /* glossary */
    .gloss-explore { margin: 10px 0 26px; }
    .gloss-explore h2 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 12px; }
    .gloss-explore-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .gloss-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 6px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; transition: border-color .15s ease; }
    .gloss-chip:hover { border-color: var(--accent); }
    .gloss-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--tint); }

    .gloss-tools { position: sticky; top: 60px; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 0; margin-bottom: 6px; background: var(--bg); border-bottom: 1px solid var(--rule); }
    #glossFilter { flex: 1 1 240px; max-width: 360px; padding: 11px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px; }
    .gloss-az { display: flex; flex-wrap: wrap; gap: 2px; }
    .gloss-az a { padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); text-decoration: none; border-radius: 6px; }
    .gloss-az a:hover { background: var(--tint); color: var(--ink); }

    .gloss-letter { margin: 24px 0; scroll-margin-top: 120px; }
    .gloss-letter-h { font-size: 24px; color: var(--accent-ink); border-bottom: 2px solid var(--rule); padding-bottom: 6px; margin: 0 0 14px; }
    .gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
    .gloss-card { display: flex; align-items: center; gap: 16px; border: 1px solid var(--rule); border-radius: 12px; padding: 14px; background: var(--surface); color: inherit; text-decoration: none; scroll-margin-top: 120px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
    .gloss-card:hover { border-color: var(--accent); transform: translateY(-2px); }
    .gloss-card-img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; flex-shrink: 0; align-self: center; background: var(--tint); }
    /* "View all" tile that fills the last grid cell of the index glossary preview. */
    .gloss-card-all { justify-content: center; text-align: center; background: var(--tint); border-style: dashed; }
    .gloss-card-all:hover { background: var(--tint); border-style: solid; }
    .gloss-all-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .gloss-all-count { font-family: "Bricolage Grotesque", sans-serif; font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent-ink); }
    .gloss-all-inner strong { font-size: 16px; color: var(--ink); }
    .gloss-all-go { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
    .gloss-card-body { min-width: 0; }
    .gloss-card h3 { font-size: 17px; margin: 0 0 5px; color: var(--ink); }
    .gloss-card p { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--ink-soft); }
    .gloss-origin { margin-top: 8px !important; font-size: 12.5px !important; color: var(--ink-muted) !important; }
    .gloss-origin span { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--accent-ink); margin-right: 5px; }
    .gloss-anchor { opacity: 0; text-decoration: none; color: var(--accent); font-weight: 400; }
    .gloss-card h3:hover .gloss-anchor { opacity: 1; }
    .gloss-card.gloss-hit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
    .gloss-empty { text-align: center; color: var(--ink-muted); padding: 36px 0; }
    .kyh-results .r-tag { flex-shrink: 0; display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); background: var(--tint); border-radius: 5px; padding: 2px 6px; }

    /* single glossary term page */
    .kyh-term-shell { max-width: 760px; margin: 0 auto; }
    .kyh-term-hero { max-height: 360px; object-fit: cover; }
    .kyh-term-def { font-size: 20px; line-height: 1.55; color: var(--ink); font-weight: 500; margin: 18px 0; }
    /* Origin + examples: a matched pair of labeled tint boxes (same heading + padding).
       !important because `.kyh section:not(.hero)` (0,2,1) zeroes section padding. */
    .kyh-term-shell .kyh-term-origin,
    .kyh-term-shell .kyh-term-examples { background: var(--tint); border-radius: 12px; padding: 18px 22px !important; margin: 20px 0; }
    .kyh-term-origin h2,
    .kyh-term-examples h2 { font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; }
    .kyh-term-origin p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
    .kyh-term-examples ul { margin: 0; padding-left: 20px; }
    .kyh-term-examples li { margin: 8px 0; color: var(--ink-soft); line-height: 1.55; padding-left: 4px; }
    .gloss-xref { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
    .gloss-xref:hover { text-decoration-color: var(--accent); }

    /* ============================================================
       ARTICLE READING UX (pillar pages)
       Reading-progress bar · sticky affix ToC w/ scroll-spy ·
       hover anchor links. Mirrors the blog Article.cshtml pattern
       but built entirely from the .kyh token scope so it tracks the
       page's own light/dark palette.
       ============================================================ */

    /* The host layout sets `overflow-x: hidden` on html/body, which silently
       turns them into scroll containers and breaks `position: sticky`. `clip`
       prevents horizontal scrolling WITHOUT creating a scroll container, so the
       affix can stick. Same override the blog article uses. */
    html:has(.kyh-pillar), html:has(.kyh-pillar) body {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* Reading-progress bar — fixed sliver at the very top of the viewport,
       above the sticky nav (nav is z-index:50). Fills 0→100% across the body. */
    .kyh-progress {
        position: fixed; top: 0; left: 0; height: 3px; width: 0%;
        background: var(--accent);
        z-index: 60;
        transition: width 90ms linear;
        will-change: width;
    }

    /* Pillar shell: single centered column by default; on wide screens it
       becomes [reading column | sticky ToC]. The reading column is capped so
       the body's measure stays comfortable; the page max-width grows to make
       room for the rail. */
    .kyh-pillar-shell { position: relative; }

    @media (min-width: 1100px) {
        /* Widen just the pillar page so content keeps its measure and the rail
           sits beside it rather than squeezing the prose. */
        .kyh-pillar .kyh-page { max-width: 1180px; }
        .kyh-pillar-shell {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 240px;
            column-gap: 56px;
            align-items: start;
        }
        /* Everything that isn't the rail lives in the first column and keeps a
           readable measure regardless of the wider page. */
        .kyh-pillar-shell > :not(.kyh-affix) { grid-column: 1; max-width: 720px; }
        .kyh-pillar-shell > .kyh-hero { max-width: 100%; }
    }

    /* Sticky right rail. `align-self: start` + a grid cell that's as tall as the
       content column gives sticky a track to travel. */
    .kyh-affix {
        display: none;            /* shown only at >=1100px (below) */
        grid-column: 2;
        grid-row: 1 / 999;        /* span the whole content height */
        position: sticky;
        top: 112px;               /* sit well below the sticky header so "On this page" has breathing room */
        align-self: start;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        font-size: 14px;
    }
    @media (min-width: 1100px) { .kyh-affix { display: block; } }
    .kyh-affix::-webkit-scrollbar { width: 4px; }
    .kyh-affix::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
    .kyh-affix-title {
        font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--ink-muted); margin: 0 0 12px;
    }
    .kyh-affix ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
    .kyh-affix li { margin: 0; }
    .kyh-affix li a {
        display: block; padding: 6px 14px; margin-left: -2px;
        border-left: 2px solid transparent;
        color: var(--ink-muted); text-decoration: none; line-height: 1.4;
        transition: color 120ms, border-color 120ms;
    }
    .kyh-affix li a:hover { color: var(--accent-ink); }
    .kyh-affix li a.active {
        color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600;
    }

    /* The original inline .kyh-toc is now the MOBILE table of contents — a
       compact <details> that collapses on narrow screens and is hidden once the
       sticky rail takes over. */
    @media (min-width: 1100px) { .kyh-toc { display: none; } }
    .kyh-toc { padding: 0; }
    .kyh-toc > summary {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; gap: 8px;
        padding: 12px 18px;
        font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--ink-muted);
    }
    .kyh-toc > summary::-webkit-details-marker { display: none; }
    .kyh-toc > summary::before {
        content: "▸"; font-size: 11px; transition: transform 160ms; color: var(--ink-muted);
    }
    .kyh-toc[open] > summary::before { transform: rotate(90deg); }
    .kyh-toc ol { margin: 0; padding: 0 18px 14px 38px; }
    .kyh-toc li { margin: 6px 0; }
    .kyh-toc a { text-decoration: none; color: var(--ink-soft); }
    .kyh-toc a:hover { color: var(--accent-ink); }

    /* Hover-revealed heading anchor. JS appends `<a class="kyh-anchor">#</a>`
       to each body h2[id]. The heading is positioned relative so the anchor can
       sit just to its left without disturbing layout. */
    .kyh-body h2 { position: relative; }
    .kyh-anchor {
        position: absolute; left: -0.85em; top: 0;
        width: 0.85em;
        color: var(--ink-muted); text-decoration: none; font-weight: 400;
        opacity: 0; transition: opacity 120ms;
        line-height: inherit;
    }
    .kyh-body h2:hover .kyh-anchor,
    .kyh-anchor:focus { opacity: 0.7; }
    .kyh-anchor:hover { color: var(--accent); opacity: 1; }
    /* On touch / narrow screens there's no hover, and the negative-offset anchor
       would clip off the left edge — hide it there. */
    @media (max-width: 700px) { .kyh-anchor { display: none; } }

    /* Hover-revealed "Copy link" pill on the right of each section heading.
       JS appends `<button class="kyh-copy">` to every body h2[id]. Sits at the
       right edge of the heading, over a surface chip so it stays legible. */
    .kyh-copy {
        position: absolute; right: 0; top: 50%; transform: translateY(-50%);
        display: inline-flex; align-items: center; gap: 5px;
        font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
        color: var(--ink-muted); background: var(--surface);
        border: 1px solid var(--rule); border-radius: 999px;
        padding: 5px 11px; cursor: pointer;
        opacity: 0; transition: opacity 120ms, color 120ms, border-color 120ms;
    }
    .kyh-copy svg { width: 13px; height: 13px; }
    .kyh-body h2:hover .kyh-copy, .kyh-copy:focus-visible { opacity: 1; }
    .kyh-copy:hover { color: var(--accent-ink); border-color: var(--accent); }
    .kyh-copy.copied { color: var(--accent-ink); border-color: var(--accent); background: var(--tint); opacity: 1; }
    @media (max-width: 700px) { .kyh-copy { display: none; } }

    /* ============================================================
       REUSABLE BODY CONTENT COMPONENTS
       For AI-generated pillar bodies to drop in. All themed from the
       .kyh token scope so they're correct in light + dark.
       (.wiki-table already defined above.)
       ============================================================ */

    /* Simple CSS bar chart. Markup:
       <div class="wiki-chart">
         <div class="wiki-bar">
           <span class="lbl">Label</span>
           <span class="track"><span class="fill" style="width:70%"></span></span>
           <span class="val">$2,400</span>
         </div>
       </div>  */
    .wiki-chart {
        margin: 22px 0;
        padding: 18px 20px;
        background: var(--surface);
        border: 1px solid var(--rule);
        border-radius: 12px;
        display: grid;
        gap: 12px;
    }
    .wiki-bar {
        display: grid;
        grid-template-columns: minmax(90px, 28%) 1fr auto;
        align-items: center;
        gap: 12px;
        font-size: 14.5px;
    }
    .wiki-bar .lbl { color: var(--ink-soft); font-weight: 500; }
    .wiki-bar .track {
        position: relative;
        height: 14px;
        border-radius: 999px;
        background: var(--tint);
        overflow: hidden;
    }
    .wiki-bar .fill {
        position: absolute; inset: 0 auto 0 0;
        height: 100%;
        border-radius: 999px;
        background: var(--accent);
        min-width: 4px;
    }
    .wiki-bar .val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
    @media (max-width: 560px) {
        .wiki-bar { grid-template-columns: 1fr auto; }
        .wiki-bar .lbl { grid-column: 1 / -1; }
    }

    /* Centered figure with caption — for the multiple inline images per article. */
    .wiki-figure { margin: 26px 0; text-align: center; }
    .wiki-figure img {
        max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto;
    }
    .wiki-figure figcaption {
        margin-top: 8px; font-size: 14px; color: var(--ink-muted); line-height: 1.5;
    }

    /* Unfilled image placeholder. The Studio drops <figure class="wiki-figure pending"
       data-img-prompt="…"> markers that carry no <img> yet; a later image-fill pass swaps
       in the real picture and removes the `pending` class. Until then, render a dashed,
       tinted box so the spot reads as "illustration pending" rather than broken. */
    .wiki-figure.pending {
        background: var(--tint);
        border: 1px dashed var(--rule);
        border-radius: 12px;
        padding: 30px 20px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .wiki-figure.pending::before {
        content: "Illustration pending";
        font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-muted);
        margin-bottom: 6px;
    }
    .wiki-figure.pending figcaption { margin-top: 0; color: var(--ink-soft); }

    /* Callout / note box — left accent border, tinted background. Optional
       modifiers .wiki-callout--warn / --tip reuse the same shape with a hue. */
    .wiki-callout {
        margin: 22px 0;
        padding: 14px 18px;
        border-left: 4px solid var(--accent);
        border-radius: 0 10px 10px 0;
        background: var(--tint);
        color: var(--ink);
        font-size: 16px;
        line-height: 1.55;
    }
    .wiki-callout > :first-child { margin-top: 0; }
    .wiki-callout > :last-child { margin-bottom: 0; }
    .wiki-callout strong { color: var(--ink); }
    /* Both spellings supported: BEM (`--warn`/`--tip`) and the space-separated modifier
       (`.wiki-callout.warn`/`.tip`) that the Studio generator emits. */
    .wiki-callout--warn, .wiki-callout.warn { border-left-color: #d4a04c; background: rgba(212, 160, 76, 0.12); }
    html[data-theme="dark"] .wiki-callout--warn, html[data-theme="dark"] .wiki-callout.warn { background: rgba(212, 160, 76, 0.16); }
    .wiki-callout--tip, .wiki-callout.tip { border-left-color: var(--accent); background: var(--tint); }

    /* In-article glossary terms (auto-detected) + hover popover. */
    .gloss-term, .kyh-body a.gloss-xref {
        text-decoration: none; border-bottom: 1px dashed var(--ink-muted);
        color: inherit; cursor: help;
    }
    .gloss-term:hover, .kyh-body a.gloss-xref:hover { border-bottom-style: solid; border-bottom-color: var(--accent); color: var(--accent-ink); }
    .gloss-pop {
        /* The popover is appended to the page body, OUTSIDE the .kyh element, so
           the .kyh-scoped palette tokens never reach it and the card rendered
           see-through. Redeclare the few tokens it needs (light here; dark +
           auto overrides below) so the background is solid. */
        --surface: #ffffff; --rule: #dde3d6; --ink: #1c241a; --ink-soft: #46513f; --accent-ink: #2f5e2c;
        position: absolute; z-index: 9999; width: 320px; max-width: calc(100vw - 24px);
        background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
        box-shadow: 0 14px 36px rgba(0,0,0,0.22); overflow: hidden; color: var(--ink);
        animation: glossPopIn .12s ease;
    }
    html[data-theme="dark"] .gloss-pop {
        --surface: #181d15; --rule: #2a3024; --ink: #eef1e8; --ink-soft: #c3ccb9; --accent-ink: #9ccf98;
    }
    @media (prefers-color-scheme: dark) {
        html[data-theme="auto"] .gloss-pop {
            --surface: #181d15; --rule: #2a3024; --ink: #eef1e8; --ink-soft: #c3ccb9; --accent-ink: #9ccf98;
        }
    }
    @keyframes glossPopIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
    .gloss-pop img { width: 100%; height: 128px; object-fit: cover; display: block; }
    .gloss-pop-b { padding: 12px 14px; }
    .gloss-pop-b strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
    .gloss-pop-b p { margin: 0 0 9px; color: var(--ink-soft); line-height: 1.45; font-size: 13px; }
    .gloss-pop-b a { color: var(--accent-ink); font-weight: 600; text-decoration: none; font-size: 13px; }

    /* ============================================================
       BYLINE (pillar "By …" + term "Reviewed by …")
       ============================================================ */
    .kyh-byline { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 16px; line-height: 1.7; }
    .kyh-byline a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-muted); }
    .kyh-byline a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

    /* ============================================================
       BREADCRUMB ROW + COMPACT UNIFIED SEARCH
       Mobile-first: crumb stacked above a full-width search box;
       at >=700px the search becomes a right-aligned ~280px compact.
       ============================================================ */
    /* (The in-page crumb-row search was retired — search now lives behind the
       magnifier icon in the sticky site header on KYH subpages.) */

    /* ============================================================
       VOCABULARY CHIP ROW (pillar pages)
       ============================================================ */
    .kyh-vocab { margin: 34px 0 0; }
    .kyh-vocab h2 { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 12px; }
    .kyh-vocab-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .kyh-vocab-pill { display: inline-block; padding: 7px 15px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--accent-ink); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.3; transition: border-color .15s ease, background .15s ease, transform .12s ease; }
    .kyh-vocab-pill:hover { border-color: var(--accent); background: var(--tint); transform: translateY(-1px); }

    /* ============================================================
       SEND / SHARE PRIMARY BUTTON (term page + quiz score)
       ============================================================ */
    .kyh-send { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; }
    .kyh-send-btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--accent); border: none; border-radius: 999px; padding: 12px 22px; cursor: pointer; transition: opacity .15s ease, transform .12s ease; }
    .kyh-send-btn:hover { opacity: .92; transform: translateY(-1px); }
    .kyh-send-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
    .kyh-send-btn svg { flex-shrink: 0; }
    .kyh-send-done { font-size: 13px; font-weight: 600; color: var(--accent-ink); opacity: 0; transition: opacity .15s ease; }
    .kyh-send-done.show { opacity: 1; }

    /* ============================================================
       ALPHABETICAL PAGER (term page bottom)
       3-column grid: prev | browse-all + random | next.
       Collapses to a centered stack at <=560px.
       ============================================================ */
    .kyh-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 36px 0 8px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 14.5px; }
    .kyh-pager a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .kyh-pager a:hover { text-decoration: underline; }
    .kyh-pager-side { min-width: 0; }
    .kyh-pager-prev { justify-self: start; text-align: left; }
    .kyh-pager-next { justify-self: end; text-align: right; }
    .kyh-pager-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
    .kyh-pager-random { font-size: 13px; font-weight: 500 !important; color: var(--ink-muted) !important; }
    .kyh-pager-random:hover { color: var(--accent-ink) !important; }
    @media (max-width: 560px) {
        .kyh-pager { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
        .kyh-pager-prev, .kyh-pager-next { justify-self: center; text-align: center; }
    }

    /* ============================================================
       QUIZ (/know-your-home/quiz)
       One-question-at-a-time card flow. Correct = accent green;
       incorrect = muted red (no red token in the palette, so a
       #c0504d-family literal scoped to .kyh-quiz, lightened in dark).
       ============================================================ */
    .kyh-quiz { --good: var(--accent); --good-ink: var(--accent-ink); --bad: #c0504d; --bad-tint: rgba(192, 80, 77, 0.10); }
    html[data-theme="dark"] .kyh-quiz { --bad: #d98a86; --bad-tint: rgba(217, 138, 134, 0.14); }
    @media (prefers-color-scheme: dark) {
        html[data-theme="auto"] .kyh-quiz { --bad: #d98a86; --bad-tint: rgba(217, 138, 134, 0.14); }
    }
    .quiz-wrap { max-width: 640px; margin: 26px auto 0; }
    .quiz-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 28px 22px; animation: quizIn .25s ease; }
    .quiz-card[hidden] { display: none; }
    .quiz-fade { animation: quizIn .25s ease; }
    @keyframes quizIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .quiz-card, .quiz-fade { animation: none; } }
    @media (min-width: 560px) { .quiz-card { padding: 32px 30px; } }
    .quiz-intro { text-align: center; }
    .quiz-intro h1 { font-weight: 600; font-size: clamp(30px, 7vw, 42px); line-height: 1.08; margin: 8px 0 10px; }
    .quiz-sub { color: var(--ink-soft); font-size: 16px; margin: 0 0 22px; }
    .quiz-start { font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1; color: #fff; background: var(--accent); border: none; border-radius: 999px; padding: 15px 38px; cursor: pointer; transition: opacity .15s ease, transform .12s ease; }
    /* The result page renders this as an <a>; out-specificity `.kyh a` so the label
       stays white there too instead of accent-on-accent. */
    .kyh .quiz-start { color: #fff; text-decoration: none; }
    .quiz-start:hover { opacity: .92; transform: translateY(-1px); }
    /* Dark theme: the accent goes light (#6fb56a), so white labels lose contrast —
       flip the button text to the page-dark ink. Same for the Next button. */
    html[data-theme="dark"] .kyh .quiz-start, html[data-theme="dark"] .kyh .quiz-next { color: #11150f; }
    @media (prefers-color-scheme: dark) {
        html[data-theme="auto"] .kyh .quiz-start, html[data-theme="auto"] .kyh .quiz-next { color: #11150f; }
    }
    .quiz-start:focus-visible, .quiz-opt:focus-visible, .quiz-next:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
    .quiz-note { margin: 18px 0 0; font-size: 13px; color: var(--ink-muted); }
    .quiz-note a { color: var(--accent-ink); }
    .quiz-dots { display: flex; gap: 7px; justify-content: center; margin: 0 0 18px; }
    .quiz-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tint); border: 1px solid var(--rule); }
    .quiz-dot.cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
    .quiz-dot.good { background: var(--good); border-color: var(--good); }
    .quiz-dot.bad { background: var(--bad); border-color: var(--bad); }
    .quiz-ask { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); text-align: center; margin: 0 0 10px; }
    .quiz-def { font-size: 18.5px; line-height: 1.55; font-weight: 500; color: var(--ink); text-align: center; margin: 0 0 22px; }
    .quiz-opts { display: grid; gap: 10px; }
    .quiz-opt { min-height: 56px; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); background: var(--bg); border: 1.5px solid var(--rule); border-radius: 12px; padding: 12px 16px; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
    .quiz-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
    .quiz-opt:disabled { cursor: default; opacity: .65; }
    .quiz-opt .key { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink-muted); border: 1px solid var(--rule); border-radius: 6px; }
    .quiz-opt.good { border-color: var(--good); background: var(--tint); color: var(--good-ink); opacity: 1; }
    .quiz-opt.good .key { border-color: var(--good); color: var(--good-ink); }
    .quiz-opt.bad { border-color: var(--bad); background: var(--bad-tint); color: var(--bad); opacity: 1; }
    .quiz-opt.bad .key { border-color: var(--bad); color: var(--bad); }
    .quiz-reveal { margin: 18px 0 0; font-size: 15px; color: var(--ink-soft); text-align: center; line-height: 1.6; }
    .quiz-reveal[hidden] { display: none; }
    .quiz-reveal-ok { color: var(--good-ink); margin-right: 8px; }
    .quiz-reveal a { color: var(--accent-ink); font-weight: 600; }
    /* The term's glossary image, revealed with the answer — show what the thing IS. */
    .quiz-reveal-img { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 480 / 270; object-fit: cover; margin: 4px auto 10px; border-radius: 12px; border: 1px solid var(--rule); }
    .quiz-reveal-img[hidden] { display: none; }
    .quiz-reveal-line { margin: 0; }
    .quiz-next { display: block; margin: 18px auto 0; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; color: #fff; background: var(--accent); border: none; border-radius: 999px; padding: 13px 34px; cursor: pointer; transition: opacity .15s ease; }
    .quiz-next:hover { opacity: .92; }
    .quiz-next[hidden] { display: none; }
    .quiz-end { text-align: center; }
    /* Hank award illustration (per-score, from the quiz-awards manifest). Hero-sized:
       the award + big score carry the card, mirroring the share-card proportions. */
    .quiz-award { display: block; width: 260px; height: 260px; object-fit: cover; margin: 6px auto 20px; border-radius: 28px; border: 1px solid var(--rule); }
    @media (max-width: 480px) { .quiz-award { width: 210px; height: 210px; } }
    .quiz-award[hidden] { display: none; }
    .quiz-score-plain { font-family: "Bricolage Grotesque", sans-serif; font-size: 58px; font-weight: 700; line-height: 1; color: var(--accent-ink); margin: 4px 0 14px; }
    .quiz-score-plain[hidden] { display: none; }
    /* The result page's score (a direct child of .quiz-end, unlike the ring's nested
       one) gets the same hero scale. */
    .quiz-end > .quiz-score { font-size: 58px; margin: 4px 0 14px; }
    .quiz-end .quiz-band-t { font-size: 27px; }
    /* Share panel inside the final card: tighter than its blog default. */
    .quiz-end .ih-share { margin: 22px 0 18px; width: 100%; }
    .quiz-ring[hidden] { display: none; }
    /* The share panel's fallback palette resolves to the sitewide (navy-ish) tokens —
       on KYH pages pin it to the section's own surface/ink/accent so it matches the
       cards in both themes. */
    .kyh .ih-share {
        --shp-surface: var(--bg);
        --shp-border: var(--rule);
        --shp-bg: var(--surface);
        --shp-muted: var(--ink-muted);
        --shp-accent: var(--accent);
        --shp-accent-soft: var(--tint);
        --shp-text: var(--ink);
    }
    html[data-theme="dark"] .kyh .ih-share .ih-share-btn[data-net="native"] { color: #11150f; }
    @media (prefers-color-scheme: dark) {
        html[data-theme="auto"] .kyh .ih-share .ih-share-btn[data-net="native"] { color: #11150f; }
    }
    /* Result / final card rhythm — give the elements room to breathe. */
    .quiz-end { padding: 36px 26px 28px; }
    @media (min-width: 560px) { .quiz-end { padding: 44px 44px 32px; } }
    .quiz-end .kyh-kicker { margin-bottom: 6px; }
    .quiz-end .quiz-band-t { margin: 14px 0 10px; }
    .quiz-end .quiz-band-p { margin: 0 0 24px; }
    .quiz-end .quiz-start { margin: 2px 0 6px; }
    .quiz-end .quiz-note { margin-top: 16px; }
    /* Score ring: SVG circle whose stroke fills to score/10 (JS animates dashoffset). */
    .quiz-ring { position: relative; width: 160px; height: 160px; margin: 14px auto 16px; }
    .quiz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .quiz-ring-bg { fill: none; stroke: var(--rule); stroke-width: 10; }
    .quiz-ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 900ms cubic-bezier(.22,.8,.3,1); }
    .quiz-ring .quiz-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
    .quiz-score { font-family: "Bricolage Grotesque", sans-serif; font-size: 42px; font-weight: 700; line-height: 1; color: var(--accent-ink); margin: 8px 0 12px; }
    @media (prefers-reduced-motion: reduce) { .quiz-ring-fg { transition: none; } }
    .quiz-band-t { font-size: 24px; margin: 0 0 8px; }
    .quiz-band-p { color: var(--ink-soft); margin: 0 0 22px; }
    .quiz-end-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; font-size: 14.5px; }
    .quiz-end-links a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .quiz-end-links a:hover { text-decoration: underline; }

    /* ============================================================
       EDITORIAL POLICY (/know-your-home/editorial-policy)
       Team cards with #author-slug anchors the bylines link to.
       ============================================================ */
    .kyh-team { display: grid; gap: 14px; margin: 18px 0 24px; }
    @media (min-width: 700px) { .kyh-team { grid-template-columns: 1fr 1fr; } }
    .kyh-team article { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; scroll-margin-top: 100px; }
    .kyh-team h3 { margin: 0 0 2px; font-size: 18px; }
    .kyh-team .role { font-size: 13px; color: var(--ink-muted); margin: 0 0 8px; }
    .kyh-team p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
    .kyh-policy .kyh-next-actions { margin-top: 34px; }


    /* ============================================================
       HUB PAGES (index / section / glossary)
       Quiz promo banner · seasonal band · term-of-the-day strip ·
       read-progress badges + "continue" strip · glossary perf.
       (Appended by the hub-pages pass — everything above untouched.)
       ============================================================ */

    /* Quiz promo — accent banner under the index header. */
    .kyh-quiz-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; background: var(--tint); border: 1.5px solid var(--accent); border-radius: 14px; padding: 18px 22px; margin: 28px 0 8px; text-decoration: none; color: var(--ink); transition: transform 120ms, box-shadow 120ms; }
    .kyh-quiz-promo:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
    .kyh-quiz-promo-text { min-width: 0; }
    .kyh-quiz-promo-text strong { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 3px; }
    .kyh-quiz-promo-text span { font-size: 14.5px; color: var(--ink-soft); }
    .kyh-quiz-promo-btn { flex-shrink: 0; display: inline-block; font-size: 14.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--accent); border-radius: 999px; padding: 13px 26px; transition: opacity .15s ease; }
    .kyh-quiz-promo:hover .kyh-quiz-promo-btn { opacity: .92; }

    /* Seasonal band — "Right now at your house". `.kyh section:not(.hero)` (0,2,1)
       zeroes section padding, so the box padding needs the same !important escape
       the term-origin boxes use. */
    .kyh .kyh-seasonal { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px !important; margin: 16px 0 8px; }
    .kyh-seasonal h2 { font-size: 24px; margin: 6px 0 6px; }
    .kyh-seasonal-blurb { color: var(--ink-soft); font-size: 15px; margin: 0 0 14px; }
    .kyh-seasonal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
    .kyh-seasonal-grid .kyh-card { background: var(--bg); }
    /* Excerpt stays a one-liner so the three cards keep an even, compact height. */
    .kyh-seasonal-grid .kyh-card p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .kyh-seasonal-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
    .kyh-seasonal-terms-l { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
    .kyh-seasonal-go { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
    .kyh-seasonal-go:hover { text-decoration: underline; }

    /* Term of the day — full strip on the index glossary preview; .kyh-tod-slim
       variant on the glossary A-Z page (no definition, just term + random). */
    .kyh-tod { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0; padding: 14px 18px; margin: 0 0 14px; font-size: 14.5px; }
    .kyh-tod-img { flex: 0 0 auto; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--rule); }
    .kyh-tod-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .kyh-tod-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
    .kyh-tod-term { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; font-weight: 600; color: var(--ink); text-decoration: none; }
    .kyh-tod-term:hover { color: var(--accent-ink); }
    .kyh-tod-def { color: var(--ink-soft); line-height: 1.5; }
    .kyh-tod-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; align-items: baseline; }
    .kyh-tod-read { font-weight: 600; color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
    .kyh-tod-read:hover { text-decoration: underline; }
    .kyh-tod-random { font-size: 13px; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
    .kyh-tod-random:hover { color: var(--accent-ink); }
    @media (max-width: 560px) { .kyh-tod { gap: 12px; padding: 12px 14px; } .kyh-tod-img { width: 64px; height: 64px; align-self: flex-start; } }
    /* Glossary-hub variant: roomier strip with the definition and a proper
       Random pill button on the right. */
    .kyh-tod-slim { margin: 16px 0 6px; align-items: center; gap: 14px; padding: 14px 18px; }
    .kyh-tod-slim .kyh-tod-img { width: 72px; height: 72px; border-radius: 12px; }
    .kyh-tod-slim .kyh-tod-term { font-size: 18px; }
    .kyh-tod-slim .kyh-tod-def { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .kyh-tod-btn {
        margin-left: auto; flex: 0 0 auto;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 22px; border-radius: 999px;
        border: 1.5px solid var(--accent);
        color: var(--accent-ink); background: transparent;
        font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap;
        transition: background .15s ease, color .15s ease, transform .12s ease;
    }
    .kyh-tod-btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
    html[data-theme="dark"] .kyh .kyh-tod-btn:hover { color: #11150f; }
    @media (prefers-color-scheme: dark) {
        html[data-theme="auto"] .kyh .kyh-tod-btn:hover { color: #11150f; }
    }
    @media (max-width: 700px) {
        .kyh-tod-slim { flex-wrap: wrap; }
        .kyh-tod-btn { margin-left: 0; width: 100%; justify-content: center; }
    }

    /* Section pages: "Guide N of M" kicker on each card. */
    .kyh-card-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; }

    /* Read-progress chips (appended by kyhDecorateReadBadges below). */
    .kyh-read-badge { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--tint); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 8px; }
    .kyh-read-badge.kyh-read-partial { color: var(--ink-muted); background: transparent; border-color: var(--rule); text-transform: none; letter-spacing: 0; }

    /* "Pick up where you left off" strip (index, injected client-side). The
       negative bottom margin collapses with the first group's 38px top margin
       so the strip sits 22px above it instead of a full section gap away. */
    .kyh-continue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; background: var(--tint); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 18px; margin: 20px 0 -16px; font-size: 14.5px; text-decoration: none; color: var(--ink); transition: border-color 120ms; }
    .kyh-continue:hover { border-color: var(--accent); }
    .kyh-continue-k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
    .kyh-continue strong { color: var(--ink); }
    .kyh-continue-go { font-weight: 600; color: var(--accent-ink); }

    /* Glossary A-Z perf: skip layout/paint for off-screen letter sections
       (~320 cards on one page). Modern browsers handle anchor jumps into
       content-visibility:auto subtrees natively; the :target override is
       belt-and-braces for the sticky A-Z letter nav. */
    .gloss-letter { content-visibility: auto; contain-intrinsic-size: auto 600px; }
    .gloss-letter:target { content-visibility: visible; }