/*
 * SHU Cortex theme — branding overrides on top of Casper's screen.css.
 * Forked from TryGhost/Casper 5.11.1 (MIT). All rules here are
 * Cortex-specific; nothing in this file modifies Casper's defaults
 * destructively — the cascade just lets us layer SHU branding cleanly.
 */

/* --- Cortex dark theme (force, regardless of Casper color_scheme) -------- */
/*
 * The Cortex aesthetic is the dark, dense, card-based layout from the
 * original Observable Framework dashboard: #0b0b0b background, soft light
 * text, orange (#ff8f60) accent. Apply globally with high specificity so it
 * wins against Casper's light-theme defaults without needing to flip any
 * Ghost-admin color_scheme setting.
 */

:root {
    --ct-bg: #0b0b0b;
    --ct-bg-card: #131313;
    --ct-bg-card-hover: #161616;
    --ct-border: #2e2e2e;
    --ct-border-soft: #1e1e1e;
    --ct-text: #e8e8e8;
    --ct-text-soft: #b8b8b8;
    --ct-text-dim: #888;
    --ct-text-faint: #555;
    --ct-accent: #ff8f60;
    --ct-accent-soft: #ff8f6066;
    --ct-divergence: #ffb347;
    --ct-link: #88c0d0;
    --ct-link-hot: #d0ecf7;
}

html, body {
    background: var(--ct-bg) !important;
    color: var(--ct-text) !important;
    /* Override Ghost's site-wide accent color (defaults to hot-pink #FF1A75
     * on a fresh Ghost(Pro) install). Ghost injects this var at runtime via
     * ghost_head; we last-write-wins it here. */
    --ghost-accent-color: var(--ct-accent) !important;
}

/* Casper assigns serif fonts to article bodies (--font-serif) and sans to
 * the system (--font-system). Cortex uses ONE font everywhere — the
 * system-ui sans-serif from the homepage cards. Override both Casper vars
 * so every surface (cards, article title, article body, blockquotes,
 * details, headings) renders in the same family. */
:root {
    --font-cortex: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
    --font-serif: var(--font-cortex) !important;
    --font-system: var(--font-cortex) !important;
    --font-sans: var(--font-cortex) !important;
}
body { color-scheme: dark; font-family: var(--font-cortex) !important; }
.article,
.article-title,
.article-excerpt,
.article-byline,
.gh-canvas,
.gh-content,
.gh-content p,
.gh-content li,
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6,
.gh-content blockquote,
.gh-content details,
.gh-content summary,
.has-serif-title .article-title,
.has-sans-body .gh-content {
    font-family: var(--font-cortex) !important;
}

/* Casper writes its colors against `--color-darkgrey` etc. via custom props.
 * Override the ones that affect typography on the dark canvas. */
:root, .has-serif-title, .has-sans-body {
    --color-darkgrey: var(--ct-text);
    --color-midgrey: var(--ct-text-soft);
    --color-lightgrey: var(--ct-text-dim);
    --color-wash: var(--ct-border-soft);
    --color-whitegrey: var(--ct-border);
    --color-white: var(--ct-bg);
    --color-primary: var(--ct-accent);
}

/* Casper hides the site cover & banner behavior on Cortex pages — the hero
 * card IS the visual focal point. */
.cortex-home .site-header-content { display: none; }

/* --- Header layout fixes ------------------------------------------------- */
/*
 * Casper's `.gh-head-inner` is a 3-column flex (brand | menu | actions).
 * With our wider brand lockup (SHU vertical mark + "Cortex" wordmark) the
 * brand crowded the menu. Force opaque dark background, generous gap, and
 * proper vertical padding so content below doesn't bleed under the header.
 */

.gh-head {
    background: var(--ct-bg) !important;
    border-bottom: 1px solid var(--ct-border-soft);
    position: relative !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    z-index: 50;
}

.gh-head-inner {
    gap: 32px;
    align-items: center;
}

.gh-head-brand { padding-right: 16px; }

.gh-head-menu .nav,
.gh-head-menu ul {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gh-head-menu a {
    color: var(--ct-text-soft);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}
.gh-head-menu a:hover { color: var(--ct-text); }
.gh-head-menu .nav-current a { color: var(--ct-accent); }

.gh-head-actions { gap: 14px; }
.gh-head-actions .gh-head-link,
.gh-head-actions .gh-head-button {
    color: var(--ct-text-soft);
}
.gh-head-actions .gh-head-button {
    background: var(--ct-accent);
    color: #1a0a04 !important;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
}
.gh-head-actions .gh-head-button:hover {
    background: #ffa57a;
    color: #1a0a04 !important;
}

.gh-icon-btn { color: var(--ct-text-dim); }
.gh-icon-btn:hover { color: var(--ct-text); }

/* Casper renders a search button + burger inside .gh-head-brand for the
 * mobile-collapsed layout. On desktop they double up with the actions
 * column — hide the brand-internal copies above the mobile breakpoint. */
@media (min-width: 901px) {
    .gh-head-brand .gh-search,
    .gh-head-brand .gh-burger { display: none; }
}

/* Push main content clear of the header. Casper relies on the header taking
 * its own height in normal flow — true here, but Cortex pages need extra
 * breathing room before the byline/hero starts. */
.cortex-home .inner { padding-top: 28px; }
.site-content { padding-top: 0; }

a { color: var(--ct-link); }
a:hover { color: var(--ct-link-hot); }

/* --- Frontpage card grid (mirrors original Observable layout) ------------ */

.cortex-byline {
    color: var(--ct-text-dim);
    font-size: 13px;
    margin: 12px 0 24px;
}
.cortex-byline a { color: var(--ct-text-dim); border-bottom: 1px dotted currentColor; text-decoration: none; }
.cortex-byline a:hover { color: var(--ct-text); }

.cortex-home a { text-decoration: none; color: inherit; }

.ct-flag {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ct-accent);
    font-weight: 600;
}
.ct-stamp {
    font-size: 12px;
    color: var(--ct-text-dim);
    margin-top: 4px;
}

.ct-hero {
    display: block;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 32px;
    transition: border-color 0.15s, background 0.15s;
}
.ct-hero:hover {
    border-color: var(--ct-accent-soft);
    background: #161313;
}
.ct-hero-headline {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 14px 0 14px;
    color: #fefefe;
}
.ct-hero:hover .ct-hero-headline { color: var(--ct-accent); }
.ct-hero-hook {
    font-size: 16px;
    line-height: 1.65;
    color: #c8c8c8;
    margin: 0 0 16px;
    max-width: 880px;
}
.ct-hero-cta {
    display: inline-block;
    font-size: 13px;
    color: var(--ct-accent);
    border-bottom: 1px solid var(--ct-accent-soft);
    padding-bottom: 1px;
}

.ct-section { margin-bottom: 32px; }
.ct-section-hdr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ct-border-soft);
    margin-bottom: 16px;
}
.ct-section-title {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ct-text-dim);
    font-weight: 600;
}
.ct-section-link { font-size: 11px; color: var(--ct-text-dim); }
.ct-section-link:hover { color: var(--ct-text); }

.ct-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ct-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) {
    .ct-grid-3, .ct-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ct-grid-3, .ct-grid-4 { grid-template-columns: 1fr; }
}

.ct-card {
    display: block;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: 10px;
    padding: 16px 18px;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.ct-card:hover {
    border-color: #4a4a4a;
    background: var(--ct-bg-card-hover);
    transform: translateY(-1px);
}
.ct-card-tag {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ct-text-dim);
}
.ct-card-title {
    font-size: 15px;
    font-weight: 500;
    color: #f0f0f0;
    margin-bottom: 6px;
    line-height: 1.3;
}
.ct-card-body {
    font-size: 13px;
    color: var(--ct-text-soft);
    line-height: 1.5;
    margin: 0 0 8px;
}
.ct-card-meta { font-size: 11px; color: var(--ct-text-dim); margin-top: 4px; }
.ct-card-cta { font-size: 11px; color: var(--ct-link); }
.ct-card:hover .ct-card-cta { color: var(--ct-link-hot); }

/* Tag-typed accents for cards on the homepage. */
.ct-card-tag-prediction { color: #cc9966; }
.ct-card-tag-theme { color: #88c0d0; }
.ct-card-tag-radar { color: var(--ct-accent); }

/* Movement direction colors — match the per-entity rule above */
.ct-mv-up,    .ct-mv-label-up    { color: #5cba47; font-weight: 700; }
.ct-mv-down,  .ct-mv-label-down  { color: #e95757; font-weight: 700; }
.ct-mv-cool,  .ct-mv-label-cool  { color: #9ca785; font-weight: 700; }
.ct-mv-breakout, .ct-mv-label-breakout { color: #ffb347; font-weight: 700; }
.ct-mv-arrow { font-size: 14px; line-height: 1; vertical-align: -1px; }

/* Movement card border picks up the direction color */
.ct-card-mv-up    { border-left: 3px solid #5cba47; }
.ct-card-mv-down  { border-left: 3px solid #e95757; }
.ct-card-mv-cool  { border-left: 3px solid #9ca785; }
.ct-card-mv-breakout { border-left: 3px solid #ffb347; }
.ct-card-mv-up:hover    { border-color: #5cba47; }
.ct-card-mv-down:hover  { border-color: #e95757; }

/* Retrospective cards get an extra orange left border and warm tint to
 * distinguish them from live briefings. */
.ct-card-retro {
    border-left: 3px solid var(--ct-accent);
}
.ct-card-retro:hover {
    border-color: var(--ct-accent);
    border-left-color: var(--ct-accent);
}

/* Divergence callout (used inside post body when Phase 3b lands the partial). */
.ct-divergence {
    display: block;
    background: var(--ct-bg-card-hover);
    border-left: 3px solid var(--ct-divergence);
    border-radius: 0 6px 6px 0;
    padding: 16px 20px;
    margin: 24px 0;
}
.ct-divergence p { margin: 8px 0 10px; font-size: 14px; color: var(--ct-text-soft); line-height: 1.55; }

/* --- Article (post.hbs) — card-style article wrapper matching homepage ---
 *
 * Casper renders posts as full-bleed Medium-style articles. We restyle to
 * the Cortex card aesthetic: contained width, dark card background, rounded
 * outline like the hero card on the homepage. Color-code the primary tag
 * pill + body content per entity type via the body's `tag-{slug}` class
 * (Casper applies this automatically based on the post's primary tag).
 *
 * Color palette per entity type:
 *   briefing       → orange (#ff8f60) — the hero accent
 *   prediction     → amber  (#cc9966) — calibration colors live here
 *   theme          → cyan   (#88c0d0) — concept/abstraction
 *   movement       → red    (#ff5a5a) — direction-driven
 *   radar          → orange (#ff8f60) — pre-seed CTA color
 *   watch          → green  (#9ca)    — forward-looking observable
 *   retrospective  → amber  (#ffb347) — reflective accent
 */

/* Entity-color CSS variables — single source of truth */
:root {
    --ent-briefing: #ff8f60;
    --ent-prediction: #cc9966;
    --ent-theme: #88c0d0;
    --ent-movement: #ff5a5a;
    --ent-radar: #ff8f60;
    --ent-watch: #9ca785;
    --ent-retrospective: #ffb347;
}

/* Per-tag accent color (applied via the article's body.tag-{slug} class) */
body.tag-briefing       { --ent-color: var(--ent-briefing); }
body.tag-prediction     { --ent-color: var(--ent-prediction); }
body.tag-theme          { --ent-color: var(--ent-theme); }
body.tag-movement       { --ent-color: var(--ent-movement); }
body.tag-radar          { --ent-color: var(--ent-radar); }
body.tag-watch          { --ent-color: var(--ent-watch); }
body.tag-retrospective  { --ent-color: var(--ent-retrospective); }
body { --ent-color: var(--ent-briefing); }  /* default */

/* Movement direction overrides — secondary tag refines the color.
 * Up (accelerating) = green; down (decelerating) = red; cooling = neutral
 * gray-green; breakout = bright orange. */
body.tag-movement.tag-accelerating { --ent-color: #5cba47; }
body.tag-movement.tag-decelerating { --ent-color: #e95757; }
body.tag-movement.tag-cooling      { --ent-color: #9ca785; }
body.tag-movement.tag-breakout     { --ent-color: #ffb347; }

/* Article container — card-style wrapper, matches homepage hero */
.article {
    background: var(--ct-bg-card) !important;
    border: 1px solid var(--ct-border) !important;
    border-left: 3px solid var(--ent-color) !important;
    border-radius: 12px !important;
    padding: 32px 40px !important;
    margin: 28px auto 32px !important;
    max-width: 880px !important;
}
@media (max-width: 700px) {
    .article { padding: 22px 18px !important; }
}

.gh-canvas {
    background: transparent !important;
    color: var(--ct-text);
}

.article-title {
    color: #fefefe !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.18 !important;
    font-size: 32px !important;
    margin: 18px 0 14px !important;
}

.article-excerpt {
    color: var(--ct-text-soft) !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}

.article-byline,
.article-byline-meta,
.author-name,
.byline-meta-content,
.byline-meta-content time {
    color: var(--ct-text-dim) !important;
}

.byline-meta-content { font-size: 12px; letter-spacing: 0.04em; }

/* Primary tag pill (top of article) — color-coded per entity type */
.article-tag .post-card-primary-tag {
    display: inline-block;
    font-size: 11px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    background: rgba(0, 0, 0, 0);
    border: 1px solid var(--ent-color);
    color: var(--ent-color) !important;
    border-radius: 999px;
    padding: 4px 12px;
}
.article-tag .post-card-primary-tag a {
    color: var(--ent-color) !important;
    text-decoration: none;
}
.post-card-featured { color: var(--ent-color) !important; }

/* Body content typography */
.gh-content {
    color: var(--ct-text);
    font-size: 16px;
    line-height: 1.65;
}
.gh-content p,
.gh-content li {
    color: var(--ct-text-soft);
}
.gh-content > p:first-of-type {
    color: var(--ct-text);
    font-size: 17px;
}
.gh-content h2 {
    color: #f4f4f4 !important;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 22px;
    margin-top: 36px;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ct-border-soft);
}
.gh-content h3 {
    color: var(--ent-color) !important;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.01em;
    margin-top: 26px;
    margin-bottom: 8px;
}
.gh-content strong { color: #f0f0f0; font-weight: 600; }
.gh-content em { color: var(--ct-text-soft); }
.gh-content a {
    color: var(--ent-color);
    border-bottom: 1px solid color-mix(in srgb, var(--ent-color) 40%, transparent);
    text-decoration: none;
}
.gh-content a:hover {
    color: #fff;
    border-bottom-color: var(--ent-color);
}

/* Divergence callout — orange-bordered blockquote */
.gh-content blockquote {
    background: var(--ct-bg-card-hover);
    border-left: 4px solid var(--ct-divergence) !important;
    border-radius: 0 6px 6px 0;
    padding: 14px 18px !important;
    margin: 22px 0 !important;
}
.gh-content blockquote p {
    color: var(--ct-text-soft) !important;
    font-size: 15px;
    margin: 6px 0;
}
.gh-content blockquote strong { color: var(--ct-divergence); }

/* Lists */
.gh-content ul,
.gh-content ol {
    padding-left: 22px;
}
.gh-content ul li::marker { color: var(--ent-color); }
.gh-content ol li::marker { color: var(--ent-color); font-weight: 700; }

/* Horizontal rule */
.gh-content hr {
    border: 0;
    border-top: 1px dashed var(--ct-border-soft);
    margin: 26px 0;
}

/* The 5-Whys footnote (rendered as <details>) */
.gh-content details {
    background: var(--ct-bg-card-hover) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 18px 0;
}
.gh-content details summary {
    cursor: pointer;
    color: var(--ent-color);
    font-weight: 600;
    font-size: 13px;
}
.gh-content details p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ct-text-soft);
}

/* Receipts block — emit by ghost_sync as `<hr><p><strong>Receipts ...</strong></p><ul>...` */
.gh-content hr + p > strong:first-child {
    display: inline-block;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--ent-color);
    color: var(--ent-color);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --- Per-entity body content treatments ------------------------------- */

/* Prediction body has these meaningful elements:
 *   <p>{prediction text}</p>
 *   <p><strong>Why this prediction</strong></p>
 *   <p>{rationale}</p>
 *   <p><strong>Why this confidence level</strong></p>
 *   <p>{confidence justification}</p>
 *   <p><em>Horizon: ~14d · Confidence: high · Topic: foo</em></p>
 *   <hr><p><strong>Resolved · Score X/10 · status</strong></p>  (only if scored)
 *   <p><strong>Why this score</strong></p>
 *   <p><em>{validation_notes}</em></p>
 *   <hr><p><strong>Receipts ...</strong></p><ul>...
 *   <hr><p><em>From the briefing: ...</em></p>
 *
 * We use ":has()" + nth-of-type to color-code without class hooks (Ghost
 * sanitizes class attrs in post body). Modern browsers support :has() now.
 */
body.tag-prediction .gh-content > p:nth-of-type(1) {
    font-size: 18px;
    color: #fefefe;
    line-height: 1.5;
    padding: 14px 18px;
    background: var(--ct-bg-card-hover);
    border-left: 3px solid var(--ent-prediction);
    border-radius: 0 6px 6px 0;
    margin-bottom: 22px;
}

/* "Why this prediction" / "Why this confidence level" / "Why this score"
 * headings — bolded leading <strong>. Distinguish them from the inline
 * "Resolved · Score X/10" badge. */
body.tag-prediction .gh-content p > strong:only-child {
    color: var(--ent-prediction);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13px;
    background: none;
    border: none;
    padding: 0;
}

/* The score badge */
body.tag-prediction .gh-content hr + p > strong:first-child {
    /* Inline pill — already styled by .gh-content hr + p > strong rule above.
     * Override color based on whether status invalidated/validated/etc. by
     * leveraging the fact that the badge text contains the score. */
    background: rgba(0,0,0,0.3);
    color: #f0f0f0;
    border-color: var(--ent-color);
    font-size: 12px;
}

/* Meta line (italic single line with horizon/confidence/topic) */
body.tag-prediction .gh-content p > em:only-child {
    display: inline-block;
    color: var(--ct-text-dim);
    font-size: 13px;
    font-style: normal;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 4px 10px;
    border: 1px solid var(--ct-border-soft);
}

/* Theme body has h3 sections, projects line, briefing list */
body.tag-theme .gh-content > p:first-of-type { font-size: 17px; color: #fefefe; }
body.tag-theme .gh-content p > strong { color: var(--ent-theme); }

/* Movement body */
body.tag-movement .gh-content > p:first-child > strong:first-child {
    display: inline-block;
    background: rgba(255, 90, 90, 0.1);
    color: var(--ent-movement);
    border: 1px solid var(--ent-movement);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.04em;
}

/* Radar body */
body.tag-radar .gh-content h3 { color: var(--ent-radar); }

/* Watch body */
body.tag-watch .gh-content > p:first-of-type {
    background: var(--ct-bg-card-hover);
    border-left: 3px solid var(--ent-watch);
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    color: #fefefe;
    font-size: 17px;
}

/* Hide Casper's clutter on Cortex articles */
.gh-button-share,
.byline-reading-time { display: none !important; }
.author-list { display: none !important; }  /* SHU byline is sufficient — we already cite authorship in tag */
.read-more-wrap,
aside.read-more-wrap,
.read-more { display: none !important; }
.footer-cta,
section.footer-cta { display: none !important; }
.site-header-content,
.site-header-cover { display: none !important; }  /* Hide Casper hero banner on individual posts too */
article.image-full .article-image,
.article-image { display: none !important; }  /* No feature image — articles are prose-first */

/* Q&A blocks (rendered as <h4> question + <p> answer pairs).
 * Each Q&A pair gets a card-style frame that mirrors the homepage cards.
 *
 * The h4 selector pattern is "h4 inside .gh-content" — we use first-of-type
 * tricks because we can't add classes (Ghost sanitizer strips them). */
.gh-content h4 {
    color: var(--ent-color);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    margin: 22px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--ct-border-soft);
}
.gh-content h4 em {
    display: inline-block;
    background: rgba(0,0,0,0.3);
    color: var(--ent-color);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: 1px;
}
.gh-content h4 + p {
    margin-top: 4px;
    color: var(--ct-text-soft);
    padding-left: 0;
}

/* Tooltip glossary: dotted-underline + native browser tooltip via title attr.
 * Ghost strips <abbr> from post bodies but preserves <a title> reliably,
 * so glossary tags emit <a data-glossary="slug" title="...">term</a>. CSS
 * targets the data-glossary attribute. Tooltips appear on hover (browser
 * native title behavior). Future: per-concept page at /concepts/{slug}/. */
/* Glossary links — proper-noun mentions linked to per-concept Ghost pages.
 * Slug-prefix pattern (`/concept-{slug}/`) since Ghost strips title attrs
 * from body anchors and we can't get hover tooltips without JS. The dotted
 * underline + click-through to the dedicated concept page IS the affordance. */
/* Match both relative `/concept-...` and absolute `https://.../concept-...`
 * forms since Ghost auto-rewrites internal links to absolute URLs after
 * the post becomes resolvable. The popover behavior is added by
 * cortex-glossary.js which intercepts clicks (preventDefault) so the link
 * never navigates — it pops a hover/click tooltip with the concept's
 * short_def + long_def. */
.gh-content a[href^="/concept-"],
.gh-content a[href*="/concept-"] {
    text-decoration: none;
    border-bottom: 1px dotted var(--ent-color);
    cursor: help;
    color: inherit;
}
.gh-content a[href^="/concept-"]:hover,
.gh-content a[href*="/concept-"]:hover {
    border-bottom-style: solid;
    color: var(--ent-color);
    background: rgba(255, 143, 96, 0.08);
}

/* The hover/pin popover that cortex-glossary.js attaches to <body>. Card
 * styling matches the rest of Cortex (dark, rounded, accent-bordered). */
.cortex-popover {
    position: absolute;
    z-index: 9999;
    max-width: 360px;
    min-width: 220px;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-left: 3px solid var(--ent-color);
    border-radius: 8px;
    padding: 14px 16px 14px 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(0, 0, 0, 0.4);
    font-family: var(--font-cortex);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ct-text);
    pointer-events: auto;
}

.cortex-popover-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 18px;
    background: none;
    border: 0;
    color: var(--ct-text-dim);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s;
}
.cortex-popover.is-pinned .cortex-popover-close { opacity: 1; }
.cortex-popover-close:hover { color: var(--ct-text); }

.cortex-popover-term {
    color: var(--ent-color);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
    padding-right: 18px;
}

.cortex-popover-short {
    color: var(--ct-text);
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.45;
}

.cortex-popover-long {
    color: var(--ct-text-soft);
    font-size: 13px;
    line-height: 1.55;
    border-top: 1px dashed var(--ct-border-soft);
    padding-top: 8px;
    margin-top: 4px;
}

/* --- Header brand lockup ------------------------------------------------- */

.shu-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    line-height: 1;
}

.shu-brand-mark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.shu-brand-img {
    height: 44px;
    width: auto;
    display: block;
}

/* Cortex is permanently dark, so always show the white-on-dark variant. */
.shu-brand-img-light { display: none; }
.shu-brand-img-dark { display: block; }

.shu-brand-cortex {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: inherit;
    border-left: 1px solid currentColor;
    padding-left: 14px;
    opacity: 0.85;
}

.shu-brand-cortex:hover { opacity: 1; }

@media (max-width: 600px) {
    .shu-brand-img { height: 36px; }
    .shu-brand-cortex { font-size: 1.2rem; padding-left: 10px; }
}

/* --- Footer (replaces Casper's slim copyright row) ----------------------- */

.shu-footer {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 6vmin;
    padding-bottom: 6vmin;
    margin-top: 8vmin;
}

html.dark-mode .shu-footer { border-top-color: rgba(255,255,255,0.1); }

.shu-footer-inner {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    gap: 32px 48px;
    align-items: start;
}

@media (max-width: 700px) {
    .shu-footer-inner { grid-template-columns: 1fr; }
}

.shu-footer-brand img {
    height: 56px;
    width: auto;
    display: block;
}

.shu-footer-img-light { display: none; }
.shu-footer-img-dark { display: block; }

.shu-footer-blurb p {
    margin: 0 0 0.6em 0;
    font-size: 1.5rem;
    line-height: 1.5;
}

.shu-footer-blurb strong { font-weight: 700; }

.shu-footer-links a {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    margin: 0 2px;
}

.shu-footer-meta {
    grid-column: 1 / -1;
    border-top: 1px dashed rgba(0,0,0,0.12);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 1.3rem;
    opacity: 0.75;
}

html.dark-mode .shu-footer-meta { border-top-color: rgba(255,255,255,0.15); }

.shu-footer-address { margin: 0; }

.shu-footer-meta a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }