/* wplight-20260815: default scheme aligned with WordPress journal */
/* The Masoretes — shared design system: blue, white, and faint gold (no rose cast on light) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;500;600&family=Alegreya:ital,wght@0,400;0,500;0,700;1,400&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Andada+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Assistant:wght@400;500;600;700&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Bodoni+Moda:ital,opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cardo:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=David+Libre:wght@400;500;700&family=DM+Sans:ital,opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=Epilogue:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Exo+2:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Faustina:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@400;500;700&family=Fraunces:ital,opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&family=Heebo:wght@400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inconsolata:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:ital,opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Josefin+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:ital,wght@0,400;0,700;1,400&family=Lexend:wght@400;500;600;700&family=Libertinus+Math&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Libre+Franklin:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Literata:ital,opsz,wght@14..72,400;14..72,500;14..72,600;14..72,700&family=Lora:ital,wght@0,400;0,500;0,700;1,400&family=Mako&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Neuton:ital,wght@0,400;0,700;1,400&family=Newsreader:ital,opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&family=PT+Sans:ital,wght@0,400;0,700;1,400&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Red+Hat+Text:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sora:wght@400;500;600;700&family=Sorts+Mill+Goudy:ital@0;1&family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Tinos:ital,wght@0,400;0,700;1,400&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Young+Serif&display=swap');

:root {
    --sidebar-width: 270px;

    /* Body typeface (overridden by data-font) */
    --font-body: 'Lora', Georgia, 'Times New Roman', serif;

    /* Thumbnail scale & margin slide rule tokens */
    --thumb-scale: 100%;
    --thumb-factor: 1;
    --content-max-width: 56rem;

    /* Blues */
    --blue-primary: #1E3A5F;
    --blue-bright: #0284C8;
    --blue-soft: #38BDF8;
    --blue-border: #BAE6FD;
    --blue-pale: #E0F2FE;
    --blue-mist: #F0F9FF;
    --blue-ghost: #F8FAFC;

    /* Golds */
    --gold: #D4AF37;
    --gold-dark: #B8860B;
    --gold-deep: #C5A028;
    --gold-light: #F9F1D8;
    --gold-pale: #FEF3C7;
    --gold-wash: rgba(212, 175, 55, 0.08);

    /* Soft accent tokens (cool blue-slate on light — not rose/red) */
    --magenta: #5B7C99;
    --magenta-soft: #8BA8C0;
    --magenta-pale: #E8F1F8;
    --magenta-light: #F3F8FC;
    --magenta-border: #D0E2F0;
    --magenta-wash: rgba(30, 58, 95, 0.05);
    --magenta-glow: rgba(2, 132, 200, 0.1);

    /* Neutrals */
    --ink: #1E293B;
    --slate: #334155;
    --muted: #475569;
    --subtle: #64748B;
    --cloud: #94A3B8;

    /* Theme-able surfaces (light default) */
    --bg-body: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-soft: var(--blue-mist);
    --bg-mute: var(--blue-ghost);
    --bg-paper: #F8FAFC;
    --text-main: var(--ink);
    --text-head: var(--blue-primary);
    --text-muted: var(--subtle);
    --border-color: var(--blue-border);
    --shadow-color: rgba(30, 58, 95, 0.1);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Radii */
    --radius-sm: 0.45rem;
    --radius-md: 0.65rem;
    --radius-lg: 0.85rem;
    --radius-xl: 1rem;
}

/* Base + optional user font-size (data-font-size on <html>, 10–30 px via JS/inline) */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}
html:not([data-font-size]) { font-size: 16px; }

*, *::before, *::after {
    font-family: var(--font-body) !important;
}

/* Preserve Font Awesome icon glyphs; the universal Lora rule would otherwise override the icon font on ::before. */
.fas, .far, .fal, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-brands,
.fas::before, .far::before, .fal::before, .fab::before,
.fa-solid::before, .fa-regular::before, .fa-light::before, .fa-brands::before,
.fa-solid::after, .fa-regular::after, .fa-brands::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

.hebrew, .hebrew * {
    font-family: 'Noto Sans Hebrew', 'Times New Roman', serif !important;
}

/* SVG graphics preserve their own coordinate-system text sizing so diagrams don't break */
svg, svg * {
    font-size: unset;
    line-height: initial;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    color: var(--text-head);
    line-height: 1.3;
    margin-bottom: 0.75rem;
    font-weight: bold !important;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

::selection {
    background: var(--magenta-pale);
    color: var(--blue-primary);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-body);
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.7;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--blue-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 100;
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* Layout */
.site-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.site-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    padding: 1.1rem 0.9rem 0;
    z-index: 40;
}
/* Scrollable Topics / nav — never covered by theme footer */
.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
}

.site-main { min-width: 0; }

/* Sidebar brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    text-decoration: none;
}

.sidebar-brand img,
.sidebar-brand-mark {
    width: 2.65rem;
    height: 2.65rem;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.12);
    background: var(--bg-paper);
    /* Circular brand mark */
    filter: none;
    opacity: 1;
    overflow: hidden;
}
.hub-page .hub-hero-title-with-mark {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.25;
}
.hub-page .hub-title-mark {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.12);
    background: var(--bg-paper);
    filter: none;
    opacity: 1;
    overflow: hidden;
}
@media (min-width: 768px) {
    .hub-page .hub-title-mark {
        width: 3.25rem;
        height: 3.25rem;
    }
}
.hub-page .hub-hero-title-text {
    min-width: 0;
}
.sidebar-brand-text { font-weight: 700; font-size: 1rem; color: var(--text-head); line-height: 1.2; }
.sidebar-badge {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    line-height: 1.2;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--gold-pale);
    color: var(--gold-dark);
    font-weight: 600;
    max-width: 100%;
    white-space: nowrap;
    border: 1px solid var(--gold);
    margin-top: 4px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    min-width: 0;
}

/* Sidebar sections */
.sidebar-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-head);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    border: 1px solid transparent;
}
.sidebar-link:hover {
    background: var(--gold-wash);
    color: var(--gold-deep);
}
.sidebar-link.active {
    background: var(--gold-light);
    color: var(--gold-dark);
    border-color: var(--gold);
    font-weight: 600;
}
.sidebar-link i { width: 14px; text-align: center; font-size: 0.75rem; opacity: 0.75; }
.sidebar-sublink { padding-left: 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.sidebar-sublink.featured { color: var(--gold-deep); font-weight: 600; }
.sidebar-section { margin-bottom: 1.1rem; }

/*
 * Hub menu (Explore, Timeline, …): keep full text/menu size;
 * only shrink the gold hover/active highlight plate.
 */
.sidebar-nav > .sidebar-link:not(.sidebar-sublink) {
    position: relative;
    z-index: 0;
    /* cancel full-row gold plate; highlight is drawn by ::before */
    background: transparent !important;
    border-color: transparent !important;
}
.sidebar-nav > .sidebar-link:not(.sidebar-sublink)::before {
    content: "";
    position: absolute;
    /* inset shrinks the gold plate without changing link hit box/text size */
    top: 0.28rem;
    right: 0.35rem;
    bottom: 0.28rem;
    left: 0.35rem;
    border-radius: 0.28rem;
    background: transparent;
    border: 1px solid transparent;
    z-index: -1;
    pointer-events: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-nav > .sidebar-link:not(.sidebar-sublink):hover {
    color: var(--gold-deep);
}
.sidebar-nav > .sidebar-link:not(.sidebar-sublink):hover::before {
    background: var(--gold-wash);
    border-color: rgba(212, 175, 55, 0.28);
}
.sidebar-nav > .sidebar-link:not(.sidebar-sublink).active {
    color: var(--gold-dark);
    font-weight: 600;
}
.sidebar-nav > .sidebar-link:not(.sidebar-sublink).active::before {
    background: var(--gold-light);
    border-color: var(--gold);
}

/* Sidebar filters */
.sidebar-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.sidebar-filters .filter-pill {
    font-size: 0.75rem;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-head);
    border-radius: 9999px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-filters .filter-pill.active,
.sidebar-filters .filter-pill:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

/* Compact Reset under Filter */
.sidebar-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: var(--bg-mute);
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-reset-btn:hover {
    background: var(--gold-wash);
    color: var(--gold-dark);
    border-color: var(--gold);
}

/* Standalone filter pill (used on search page category filters) */
.filter-pill {
    font-size: 0.75rem;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-head);
    border-radius: 9999px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filter-pill.active,
.filter-pill:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

/* Journal · Wikipedia strip removed; hide if any residual markup remains */
.sidebar-footer {
    display: none !important;
}

.theme-toggle {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-mute);
    color: var(--text-head);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover { background: var(--gold-wash); border-color: var(--gold); }

/* Multi-theme picker (sidebar footer) */
.theme-picker {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
}
.theme-picker-label {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.28rem;
}
.theme-picker-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.22rem;
    align-items: center;
}
.site-sidebar .font-picker-btn {
    font-size: 0.5rem;
    padding: 0.08rem 0.14rem;
    gap: 0.1rem;
    line-height: 1.1;
}
.site-sidebar .theme-picker-btn {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
}
/* Colour-only theme chips (labels via title / aria-label) */
.theme-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}
.theme-picker-btn:hover {
    transform: scale(1.12);
    border-color: var(--gold);
}
.theme-picker-btn.is-active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px var(--bg-card);
}
.theme-picker-btn .theme-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    border: none;
    box-sizing: border-box;
}
.theme-picker-btn[data-theme-set="light"] .theme-swatch { background: #ffffff; box-shadow: inset 0 0 0 1px #94a3b8; }
.theme-picker-btn[data-theme-set="dark"] .theme-swatch { background: #0B1220; }
.theme-picker-btn[data-theme-set="sepia"] .theme-swatch { background: #e8d5b5; }
.theme-picker-btn[data-theme-set="grey"] .theme-swatch { background: #e5e7eb; }
.theme-picker-btn[data-theme-set="warm"] .theme-swatch { background: #f5e6d3; }
.theme-picker-btn[data-theme-set="rose"] .theme-swatch { background: #f3d0da; }
.theme-picker-btn[data-theme-set="ocean"] .theme-swatch { background: #b8e0ec; }
.theme-picker-btn[data-theme-set="orange"] .theme-swatch { background: #fdba74; }
.theme-picker-btn[data-theme-set="yellow"] .theme-swatch {
    background: #fde047;
    box-shadow: inset 0 0 0 0.5px var(--blue-border, #BAE6FD);
}
.theme-picker-btn[data-theme-set="leaf"] .theme-swatch { background: #bbf7d0; }
.theme-picker-btn[data-theme-set="purple"] .theme-swatch { background: #d8b4fe; border-color: #7c3aed; }


/* Fixed theme picker — bottom-left; draggable + minimizable */
.theme-picker-fixed {
    position: fixed;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 140;
    width: min(20.5rem, calc(100vw - 1rem));
    max-height: min(70vh, 32rem);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    padding: 0.45rem 0.5rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 8px 28px var(--shadow-color);
    border-top: 1px solid var(--border-color);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.theme-panel-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin: -0.1rem -0.05rem 0.3rem;
    padding: 0.05rem 0 0.2rem;
    border-bottom: 1px solid var(--border-color);
    cursor: grab;
    user-select: none;
}
.theme-panel-chrome-title {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-panel-chrome-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}
.theme-panel-default-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.15rem;
    margin: 0;
    padding: 0 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: var(--bg-mute);
    color: var(--text-muted);
    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
}
.theme-panel-default-btn:hover {
    background: var(--gold-wash);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.theme-panel-default-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}
.theme-panel-min-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: var(--bg-mute);
    color: var(--text-head);
    font-size: 0.55rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
.theme-panel-min-btn:hover {
    background: var(--gold-wash);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.theme-panel-min-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}
.theme-picker-fixed.theme-picker-draggable {
    touch-action: none;
    cursor: grab;
}
.theme-picker-fixed.theme-picker-draggable .theme-picker-label,
.theme-picker-fixed.theme-picker-draggable .font-picker-label,
.theme-picker-fixed.theme-picker-draggable .theme-panel-chrome {
    cursor: grab;
    user-select: none;
}
.theme-picker-fixed.theme-picker-draggable button {
    cursor: pointer;
    touch-action: manipulation;
}
.theme-picker-fixed.is-dragging {
    cursor: grabbing;
    user-select: none;
    opacity: 0.96;
    box-shadow: 0 12px 36px var(--shadow-color);
}
/* Keep minimize control clickable while dragging starts elsewhere */
.theme-picker-fixed.is-dragging .theme-picker-options button,
.theme-picker-fixed.is-dragging .font-picker button,
.theme-picker-fixed.is-dragging .font-size-picker button {
    pointer-events: none;
}
.theme-picker-fixed.is-dragging .theme-panel-min-btn,
.theme-picker-fixed.is-dragging .theme-panel-default-btn {
    pointer-events: auto;
}
/* Minimized: compact chip; expand via top-right button */
.theme-picker-fixed.is-minimized {
    width: auto;
    min-width: 7.25rem;
    max-width: min(12.5rem, calc(100vw - 1rem));
    max-height: none;
    overflow: hidden;
    padding: 0.28rem 0.35rem;
}
.theme-picker-fixed.is-minimized .theme-panel-chrome {
    margin: 0;
    padding: 0;
    border-bottom: none;
}
.theme-picker-fixed.is-minimized .theme-panel-default-btn {
    /* keep Default available when minimized */
    display: inline-flex;
}
.theme-picker-fixed.is-minimized > .theme-picker-label,
.theme-picker-fixed.is-minimized > .theme-picker-options,
.theme-picker-fixed.is-minimized > .font-picker,
.theme-picker-fixed.is-minimized > .font-size-picker {
    display: none !important;
}
.theme-picker-fixed .theme-picker-label {
    margin-bottom: 0.25rem;
}
.theme-picker-fixed .theme-picker-options {
    max-height: none;
}
.theme-picker-fixed .font-picker-options {
    display: none !important;
}
.theme-picker-fixed .font-picker-select {
    font-size: 0.72rem;
    padding: 0.32rem 0.4rem;
}
.theme-picker-fixed .theme-picker-btn {
    width: 1.2rem;
    height: 1.2rem;
}
.theme-picker-fixed .theme-picker-options {
    flex-wrap: nowrap;
    gap: 0.2rem;
    width: 100%;
}
.theme-picker-fixed .font-picker-btn { display: none !important; }
/* Sit above back-to-top if both present; leave room on small screens */
@media (max-width: 640px) {
    .theme-picker-fixed {
        left: 0.35rem;
        bottom: 0.35rem;
        width: min(18.5rem, calc(100vw - 0.7rem));
        max-height: min(55vh, 22rem);
        padding: 0.4rem 0.45rem 0.45rem;
    }
    .theme-picker-fixed .theme-picker-btn {
        width: 1.05rem;
        height: 1.05rem;
    }
    .theme-picker-fixed .theme-picker-options {
        gap: 0.16rem;
    }
    .theme-picker-fixed .font-picker-btn {
        font-size: 0.45rem;
        padding: 0.06rem 0.1rem;
    }
}
/* Floating panel stays usable even when sidebar is open */
body.sidebar-open .theme-picker-fixed {
    opacity: 1;
    pointer-events: auto;
    z-index: 120;
}



/* =========================================================
   Font faces (data-font on <html>)
   ========================================================= */
/* Site / web fonts */
html[data-font="alegreya"] {
    --font-body: 'Alegreya', Georgia, serif;
}
html[data-font="alegreya-sans"] {
    --font-body: 'Alegreya Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="andada-pro"] {
    --font-body: 'Andada Pro', Georgia, serif;
}
html[data-font="arimo"] {
    --font-body: 'Arimo', Arial, Helvetica, sans-serif;
}
html[data-font="assistant"] {
    --font-body: 'Assistant', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="atkinson"] {
    --font-body: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="barlow"] {
    --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="baskerville"] {
    --font-body: 'Libre Baskerville', Baskerville, 'Times New Roman', serif;
}
html[data-font="be-vietnam"] {
    --font-body: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="bitter"] {
    --font-body: 'Bitter', Georgia, serif;
}
html[data-font="bodoni-moda"] {
    --font-body: 'Bodoni Moda', 'Times New Roman', serif;
}
html[data-font="bricolage"] {
    --font-body: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="cabin"] {
    --font-body: 'Cabin', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="cardo"] {
    --font-body: 'Cardo', 'Times New Roman', serif;
}
html[data-font="cormorant"] {
    --font-body: 'Cormorant Garamond', Garamond, Georgia, serif;
}
html[data-font="crimson"] {
    --font-body: 'Crimson Text', Georgia, serif;
}
html[data-font="crimson-pro"] {
    --font-body: 'Crimson Pro', Georgia, serif;
}
html[data-font="david-libre"] {
    --font-body: 'David Libre', Georgia, serif;
}
html[data-font="dm-sans"] {
    --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="domine"] {
    --font-body: 'Domine', Georgia, serif;
}
html[data-font="epilogue"] {
    --font-body: 'Epilogue', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="exo2"] {
    --font-body: 'Exo 2', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="faustina"] {
    --font-body: 'Faustina', Georgia, serif;
}
html[data-font="figtree"] {
    --font-body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="fira"] {
    --font-body: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="fira-code"] {
    --font-body: 'Fira Code', Consolas, monospace;
}
html[data-font="frank-ruhl"] {
    --font-body: 'Frank Ruhl Libre', Georgia, serif;
}
html[data-font="fraunces"] {
    --font-body: 'Fraunces', Georgia, serif;
}
html[data-font="future"] {
    --font-body: "Futura", "Futura PT", "Century Gothic", "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
    /* Prefer light/book cuts — system Futura often looks bold at 400+ */
    --font-weight-body: 300;
    --font-weight-head: 500;
}
html[data-font="future"] body,
html[data-font="future"] p,
html[data-font="future"] li,
html[data-font="future"] td,
html[data-font="future"] th,
html[data-font="future"] .text-body,
html[data-font="future"] .text-body-sm,
html[data-font="future"] .lede,
html[data-font="future"] .hero-intro,
html[data-font="future"] .sidebar-link,
html[data-font="future"] .sidebar-sublink,
html[data-font="future"] .content-link,
html[data-font="future"] .figure-caption,
html[data-font="future"] .fact-box,
html[data-font="future"] .info-card,
html[data-font="future"] .bib-entry,
html[data-font="future"] .site-main-footer,
html[data-font="future"] .hub-action-tile,
html[data-font="future"] .hub-action-tile-meta,
html[data-font="future"] .post-card,
html[data-font="future"] input,
html[data-font="future"] textarea,
html[data-font="future"] select,
html[data-font="future"] button:not(.fa-solid):not(.fa-regular) {
    font-weight: 300 !important;
    font-synthesis: none;
}
html[data-font="future"] h1,
html[data-font="future"] h2,
html[data-font="future"] h3,
html[data-font="future"] h4,
html[data-font="future"] h5,
html[data-font="future"] h6,
html[data-font="future"] .page-title,
html[data-font="future"] .section-title,
html[data-font="future"] .section-title-lg,
html[data-font="future"] .hub-hero-title,
html[data-font="future"] .hub-hero-title-text,
html[data-font="future"] .sidebar-brand-text,
html[data-font="future"] .hub-action-tile-label,
html[data-font="future"] .hub-spot-title,
html[data-font="future"] .eyebrow,
html[data-font="future"] .hub-hero-eyebrow {
    font-weight: 500 !important;
    font-synthesis: none;
}
html[data-font="future"] strong,
html[data-font="future"] b,
html[data-font="future"] .font-semibold,
html[data-font="future"] .font-bold {
    font-weight: 500 !important;
}
html[data-font="future"] .font-picker-btn[data-font-set="future"] {
    font-weight: 300 !important;
}
html[data-font="garamond"] {
    --font-body: 'EB Garamond', Garamond, 'Palatino Linotype', Palatino, serif;
}
html[data-font="gentium"] {
    --font-body: 'Gentium Plus', 'Times New Roman', serif;
}
html[data-font="heebo"] {
    --font-body: 'Heebo', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="ibm-plex-mono"] {
    --font-body: 'IBM Plex Mono', Consolas, monospace;
}
html[data-font="ibm-plex-sans"] {
    --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="ibm-plex-serif"] {
    --font-body: 'IBM Plex Serif', Georgia, serif;
}
html[data-font="inconsolata"] {
    --font-body: 'Inconsolata', Consolas, monospace;
}
html[data-font="instrument-sans"] {
    --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="inter"] {
    --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="jetbrains-mono"] {
    --font-body: 'JetBrains Mono', Consolas, monospace;
}
html[data-font="josefin"] {
    --font-body: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="jost"] {
    --font-body: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="karla"] {
    --font-body: 'Karla', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="lato"] {
    --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="lexend"] {
    --font-body: 'Lexend', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="libertinus"] {
    --font-body: 'Libertinus Math', 'Libertinus Serif', 'Times New Roman', serif;
}
html[data-font="libre-caslon"] {
    --font-body: 'Libre Caslon Text', 'Times New Roman', serif;
}
html[data-font="libre-franklin"] {
    --font-body: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="literata"] {
    --font-body: 'Literata', Georgia, serif;
}
html[data-font="lora"],
html:not([data-font]) {
    --font-body: 'Lora', Georgia, 'Times New Roman', serif;
}
html[data-font="mako"] {
    --font-body: 'Mako', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="manrope"] {
    --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="merriweather"] {
    --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;
}
html[data-font="montserrat"] {
    --font-body: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="mulish"] {
    --font-body: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="neuton"] {
    --font-body: 'Neuton', Georgia, serif;
}
html[data-font="newsreader"] {
    --font-body: 'Newsreader', Georgia, serif;
}
html[data-font="noto-sans"] {
    --font-body: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="noto-serif"] {
    --font-body: 'Noto Serif', Georgia, serif;
}
html[data-font="nunito"] {
    --font-body: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="old-standard"] {
    --font-body: 'Old Standard TT', 'Times New Roman', serif;
}
html[data-font="onest"] {
    --font-body: 'Onest', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="open-sans"] {
    --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="outfit"] {
    --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="playfair"] {
    --font-body: 'Playfair Display', Georgia, serif;
}
html[data-font="plus-jakarta"] {
    --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="poppins"] {
    --font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="pt-sans"] {
    --font-body: 'PT Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="pt-serif"] {
    --font-body: 'PT Serif', Georgia, serif;
}
html[data-font="public-sans"] {
    --font-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="quicksand"] {
    --font-body: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="raleway"] {
    --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="red-hat"] {
    --font-body: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="roboto"] {
    --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="roboto-mono"] {
    --font-body: 'Roboto Mono', Consolas, monospace;
}
html[data-font="rubik"] {
    --font-body: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-font="schibsted"] {
    --font-body: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="sora"] {
    --font-body: 'Sora', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="sorts-mill"] {
    --font-body: 'Sorts Mill Goudy', Georgia, serif;
}
html[data-font="source-code-pro"] {
    --font-body: 'Source Code Pro', Consolas, monospace;
}
html[data-font="source-sans"] {
    --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="source-serif"] {
    --font-body: 'Source Serif 4', Georgia, serif;
}
html[data-font="space-grotesk"] {
    --font-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="space-mono"] {
    --font-body: 'Space Mono', Consolas, monospace;
}
html[data-font="spectral"] {
    --font-body: 'Spectral', Georgia, serif;
}
html[data-font="tinos"] {
    --font-body: 'Tinos', 'Times New Roman', serif;
}
html[data-font="ubuntu-mono"] {
    --font-body: 'Ubuntu Mono', Consolas, monospace;
}
html[data-font="urbanist"] {
    --font-body: 'Urbanist', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="vollkorn"] {
    --font-body: 'Vollkorn', Georgia, serif;
}
html[data-font="work-sans"] {
    --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
html[data-font="young-serif"] {
    --font-body: 'Young Serif', Georgia, serif;
}

/* Office / system fonts */
html[data-font="american-typewriter"] { --font-body: 'American Typewriter', 'Courier New', serif; }
html[data-font="andale-mono"] { --font-body: 'Andale Mono', Monaco, 'Courier New', monospace; }
html[data-font="apple-chancery"] { --font-body: 'Apple Chancery', cursive; }
html[data-font="arial"] { --font-body: Arial, Helvetica, 'Helvetica Neue', sans-serif; }
html[data-font="arial-black"] { --font-body: 'Arial Black', Arial, Helvetica, sans-serif; }
html[data-font="arial-narrow"] { --font-body: 'Arial Narrow', Arial, Helvetica, sans-serif; }
html[data-font="avenir"] { --font-body: Avenir, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; }
html[data-font="avenir-next"] { --font-body: 'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif; }
html[data-font="bahnschrift"] { --font-body: Bahnschrift, 'DIN Alternate', 'Segoe UI', sans-serif; }
html[data-font="baskerville-sys"] { --font-body: Baskerville, 'Baskerville Old Face', 'Times New Roman', serif; }
html[data-font="big-caslon"] { --font-body: 'Big Caslon', 'Book Antiqua', 'Times New Roman', serif; }
html[data-font="book-antiqua"] { --font-body: 'Book Antiqua', Palatino, 'Palatino Linotype', 'Times New Roman', serif; }
html[data-font="bookman"] { --font-body: 'Bookman Old Style', Bookman, Georgia, serif; }
html[data-font="bradley-hand"] { --font-body: 'Bradley Hand', 'Bradley Hand ITC', cursive; }
html[data-font="brush-script"] { --font-body: 'Brush Script MT', cursive; }
html[data-font="calibri"] { --font-body: Calibri, 'Segoe UI', Candara, 'Helvetica Neue', Arial, sans-serif; }
html[data-font="cambria"] { --font-body: Cambria, 'Times New Roman', Times, serif; }
html[data-font="candara"] { --font-body: Candara, Calibri, 'Segoe UI', Arial, sans-serif; }
html[data-font="cantarell"] { --font-body: Cantarell, 'Segoe UI', sans-serif; }
html[data-font="cascadia-code"] { --font-body: 'Cascadia Code', Consolas, monospace; }
html[data-font="cascadia-mono"] { --font-body: 'Cascadia Mono', Consolas, monospace; }
html[data-font="century-gothic"] { --font-body: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; }
html[data-font="century-schoolbook"] { --font-body: 'Century Schoolbook', 'New Century Schoolbook', Georgia, serif; }
html[data-font="chalkduster"] { --font-body: Chalkduster, fantasy, cursive; }
html[data-font="comic-sans"] { --font-body: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif; }
html[data-font="consolas"] { --font-body: Consolas, 'Lucida Console', 'Courier New', monospace; }
html[data-font="constantia"] { --font-body: Constantia, 'Palatino Linotype', Palatino, Georgia, serif; }
html[data-font="copperplate"] { --font-body: Copperplate, 'Copperplate Gothic Light', Fantasy, serif; }
html[data-font="corbel"] { --font-body: Corbel, 'Segoe UI', Calibri, Arial, sans-serif; }
html[data-font="courier"] { --font-body: Courier, 'Courier New', monospace; }
html[data-font="courier-new"] { --font-body: 'Courier New', Courier, monospace; }
html[data-font="dejavu-sans"] { --font-body: 'DejaVu Sans', Arial, sans-serif; }
html[data-font="dejavu-serif"] { --font-body: 'DejaVu Serif', Georgia, serif; }
html[data-font="didot"] { --font-body: Didot, 'Bodoni MT', 'Times New Roman', serif; }
html[data-font="franklin-gothic"] { --font-body: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; }
html[data-font="futura-sys"] { --font-body: Futura, 'Century Gothic', 'Avenir Next', sans-serif; }
html[data-font="gadugi"] { --font-body: Gadugi, 'Segoe UI', sans-serif; }
html[data-font="garamond-sys"] { --font-body: Garamond, 'EB Garamond', 'Palatino Linotype', serif; }
html[data-font="geneva"] { --font-body: Geneva, Tahoma, Verdana, sans-serif; }
html[data-font="georgia"] { --font-body: Georgia, 'Times New Roman', Times, serif; }
html[data-font="gill-sans"] { --font-body: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif; }
html[data-font="helvetica"] { --font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif; }
html[data-font="helvetica-neue"] { --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html[data-font="herculanum"] { --font-body: Herculanum, fantasy, serif; }
html[data-font="hoefler"] { --font-body: 'Hoefler Text', 'Times New Roman', Georgia, serif; }
html[data-font="impact"] { --font-body: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
html[data-font="liberation-mono"] { --font-body: 'Liberation Mono', Consolas, monospace; }
html[data-font="liberation-sans"] { --font-body: 'Liberation Sans', Arial, sans-serif; }
html[data-font="liberation-serif"] { --font-body: 'Liberation Serif', 'Times New Roman', serif; }
html[data-font="lucida-console"] { --font-body: 'Lucida Console', Monaco, 'Courier New', monospace; }
html[data-font="lucida-grande"] { --font-body: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; }
html[data-font="lucida-sans"] { --font-body: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
html[data-font="malgun"] { --font-body: 'Malgun Gothic', 'Segoe UI', sans-serif; }
html[data-font="marker-felt"] { --font-body: 'Marker Felt', fantasy, cursive; }
html[data-font="meiryo"] { --font-body: Meiryo, 'Segoe UI', sans-serif; }
html[data-font="menlo"] { --font-body: Menlo, Monaco, Consolas, monospace; }
html[data-font="microsoft-yahei"] { --font-body: 'Microsoft YaHei', 'Segoe UI', sans-serif; }
html[data-font="monaco"] { --font-body: Monaco, Menlo, 'Courier New', monospace; }
html[data-font="ms-gothic"] { --font-body: 'MS Gothic', 'MS UI Gothic', sans-serif; }
html[data-font="mv-boli"] { --font-body: 'MV Boli', cursive; }
html[data-font="noteworthy"] { --font-body: Noteworthy, 'Segoe Print', cursive; }
html[data-font="noto-sans-sys"] { --font-body: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; }
html[data-font="noto-serif-sys"] { --font-body: 'Noto Serif', Georgia, serif; }
html[data-font="optima"] { --font-body: Optima, Candara, 'Segoe UI', sans-serif; }
html[data-font="palatino"] { --font-body: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; }
html[data-font="papyrus"] { --font-body: Papyrus, fantasy, serif; }
html[data-font="perpetua"] { --font-body: Perpetua, Baskerville, Georgia, serif; }
html[data-font="rockwell"] { --font-body: Rockwell, 'Courier New', Georgia, serif; }
html[data-font="segoe-print"] { --font-body: 'Segoe Print', 'Comic Sans MS', cursive; }
html[data-font="segoe-script"] { --font-body: 'Segoe Script', cursive; }
html[data-font="segoe-ui"] { --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
html[data-font="sf-mono"] { --font-body: 'SF Mono', ui-monospace, Menlo, monospace; }
html[data-font="sf-pro"] { --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; }
html[data-font="sitka"] { --font-body: Sitka, Georgia, serif; }
html[data-font="snell"] { --font-body: 'Snell Roundhand', cursive; }
html[data-font="system-ui"] { --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
html[data-font="tahoma"] { --font-body: Tahoma, Geneva, Verdana, sans-serif; }
html[data-font="times"] { --font-body: Times, 'Times New Roman', Georgia, serif; }
html[data-font="times-new-roman"] { --font-body: 'Times New Roman', Times, Baskerville, Georgia, serif; }
html[data-font="trebuchet"] { --font-body: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
html[data-font="ubuntu"] { --font-body: Ubuntu, 'Segoe UI', sans-serif; }
html[data-font="ui-mono"] { --font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html[data-font="ui-rounded"] { --font-body: ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; }
html[data-font="ui-sans"] { --font-body: ui-sans-serif, system-ui, sans-serif; }
html[data-font="ui-serif"] { --font-body: ui-serif, Georgia, serif; }
html[data-font="verdana"] { --font-body: Verdana, Geneva, Tahoma, sans-serif; }
html[data-font="yu-gothic"] { --font-body: 'Yu Gothic', 'Yu Gothic UI', sans-serif; }
html[data-font="zapfino"] { --font-body: Zapfino, cursive; }

/* Font picker — scrolling <select> menu (site + office fonts) */
.font-picker {
    margin-top: 0.3rem;
    padding-top: 0.28rem;
    border-top: 1px solid var(--border-color);
}
.font-picker-label {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
.font-picker-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    background: var(--bg-mute);
    color: var(--text-head);
    font-size: 0.72rem;
    line-height: 1.3;
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: menulist;
    max-height: 2.4rem;
    overflow: hidden;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.font-picker-select:hover {
    border-color: var(--gold);
    background: var(--gold-wash);
}
.font-picker-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}
.font-picker-select optgroup {
    font-weight: 700;
    font-style: normal;
    color: var(--text-muted);
}
.font-picker-select option {
    font-weight: 400;
    color: var(--text-head);
    padding: 0.2rem 0.35rem;
}
/* Legacy grid buttons (hidden if leftover in DOM) */
.font-picker-options {
    display: none !important;
}
.font-picker-btn {
    display: none !important;
}

.theme-picker-fixed .font-picker,
.theme-picker-fixed .font-size-picker {
    margin-top: 0.25rem;
    padding-top: 0.22rem;
}

/* Font size picker — same scrolling <select> interface as Font menu (10–30 px) */
.font-size-picker {
    margin-top: 0.3rem;
    padding-top: 0.28rem;
    border-top: 1px solid var(--border-color);
}
.font-size-picker-label {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
/* Hide legacy size button grid completely */
.font-size-picker-options,
.font-size-picker .font-size-picker-options {
    display: none !important;
}
.font-size-picker-btn,
.font-size-picker .font-size-picker-btn {
    display: none !important;
}
/* Size select shares .font-picker-select look; keep both class hooks */
.font-size-picker-select,
.font-size-picker .font-picker-select,
.font-size-picker .font-size-picker-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    background: var(--bg-mute);
    color: var(--text-head);
    font-size: 0.72rem;
    line-height: 1.3;
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: menulist;
}
.font-size-picker-select:hover,
.font-size-picker .font-picker-select:hover {
    border-color: var(--gold);
    background: var(--gold-wash);
}
.font-size-picker-select:focus,
.font-size-picker .font-picker-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}


/* Keep legacy class for print rules */
.theme-toggle { /* legacy single toggle; picker preferred */ }



/* Unified article typography (replaces Tailwind hex utilities) */
.eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--gold-dark);
    text-transform: uppercase;
}
.page-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-head);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-top: 0.5rem;
}
@media (min-width: 768px) {
    .page-title { font-size: 3rem; }
}
.lede {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--muted);
    max-width: 48rem;
}
.section-title {
    position: relative;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-head);
    margin-bottom: 1.25rem;
    margin-top: 0;
    line-height: 1.4;
    padding-left: 0.8rem;
}
.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.12em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--magenta-soft) 100%);
    opacity: 0.72;
}
.text-body {
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.625;
}
.text-body-sm {
    font-size: 0.875rem;
    color: var(--muted);
}
.confessional-banner {
    background: linear-gradient(135deg, var(--gold-pale) 0%, var(--magenta-pale) 100%);
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-top: 1rem;
    max-width: 48rem;
    box-shadow: inset 0 0 0 1px var(--magenta-wash);
}
.confessional-banner p {
    font-size: 0.75rem;
    color: var(--text-head);
    font-style: italic;
    line-height: 1.625;
    margin: 0;
}
.figure-caption {
    font-size: 0.6875rem;
    color: var(--subtle);
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--blue-pale);
    background: var(--bg-mute);
}
.pull-quote {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-left: 4px solid var(--gold);
    background: linear-gradient(90deg, var(--magenta-light) 0%, var(--blue-mist) 42%);
    border-radius: 0 0.25rem 0.25rem 0;
    font-style: italic;
    color: var(--muted);
    font-size: 0.875rem;
}
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}
.card-subtitle {
    font-weight: 700;
    color: var(--text-head);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}
.sidebar-current {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-head);
    padding: 0 0.5rem;
}
.fact-callout-title {
    font-weight: 600;
    color: var(--text-head);
}
.section-title-lg {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-head);
    margin-bottom: 1.5rem;
    margin-top: 0;
}

/* Theme-aware utilities (replace Tailwind arbitrary hex) */
.ui-head { color: var(--text-head); }
.ui-muted { color: var(--muted); }
.ui-subtle { color: var(--subtle); }
.ui-gold { color: var(--gold-dark); }
.ui-magenta { color: var(--magenta); }
.ui-bg-soft { background: var(--blue-mist); }
.ui-bg-mute { background: var(--bg-mute); }
.ui-bg-gold-pale { background: var(--gold-pale); }
.ui-bg-primary { background: var(--blue-primary); color: #fff; }
.ui-bg-primary:hover { background: var(--gold-deep); }
.ui-border { border-color: var(--border-color); }
.ui-border-pale { border-color: var(--blue-pale); }
.ui-border-gold { border-color: var(--gold); }
.ui-border-top { border-top: 2px solid var(--border-color); }
.ui-footer-bar {
    border-top: 2px solid var(--border-color);
    padding: 2rem 0;
    background: var(--blue-mist);
    margin-top: 2rem;
}
.ui-footer-text {
    font-size: 0.75rem;
    color: var(--text-head);
    text-align: center;
}

/* Presentation slide deck */
.deck-frame {
    background: #0f172a;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(30, 58, 95, 0.18);
    overflow: hidden;
}
.deck-slide {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #0f172a;
    display: block;
}
.deck-page .thumb {
    width: 88px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid transparent;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.deck-page .thumb:hover,
.deck-page .thumb.active {
    opacity: 1;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}
.deck-page .thumb-strip {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-x: auto;
    background: #111827;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) #1e293b;
}
.deck-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(186, 230, 253, 0.35);
    color: #e2e8f0;
    transition: all 0.15s ease;
}
.deck-btn:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.25);
    border-color: var(--gold);
    color: #fff;
}
.deck-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--blue-primary);
    color: #fff;
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.download-btn:hover { background: var(--gold-deep); }
.deck-fullscreen:fullscreen { background: #0f172a; padding: 0; }
.deck-fullscreen:fullscreen .deck-frame { border-radius: 0; border: none; }
.deck-fullscreen:fullscreen .deck-toolbar { border-radius: 0; }
.deck-fullscreen:fullscreen .thumb-strip { background: #0f172a; }

/* Main areas */
.site-main-header {
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    background-image: none;
}
.site-main-body { padding: 1.5rem 1.5rem 2rem; }

/* Article rhythm — generous spacing between headings, subheadings, and paragraphs */
.note-page .site-main-body section,
.note-page .site-main-body section.mb-8 {
    margin-bottom: 3rem;
}
.note-page .site-main-body section:last-child {
    margin-bottom: 0;
}

.note-page .site-main-header .page-title {
    margin-bottom: 0.75rem;
}
.note-page .site-main-header .lede {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.note-page .site-main-header .hub-confessional {
    margin-top: 1.25rem;
}

.note-page .site-main-body .section-title,
.note-page .site-main-body section > h2 {
    font-weight: 700 !important;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.note-page .site-main-body section h3 {
    font-weight: 700 !important;
    font-size: 1rem;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.note-page .site-main-body section > h3:first-child {
    margin-top: 0;
}

.note-page .site-main-body h4,
.note-page .site-main-body .fact-callout-title {
    font-weight: 700 !important;
}

.note-page .site-main-body p {
    margin-top: 0;
    margin-bottom: 0;
}
.note-page .site-main-body p + p,
.note-page .site-main-body section p + p,
.note-page .site-main-body article p + p {
    margin-top: 1.375rem;
}
.note-page .site-main-body p.text-body.mt-3,
.note-page .site-main-body p.text-body.mt-4,
.note-page .site-main-body p.mt-3,
.note-page .site-main-body p.mt-4 {
    margin-top: 1.375rem !important;
}

.note-page .site-main-body .section-title + p,
.note-page .site-main-body h2 + p,
.note-page .site-main-body h3 + p {
    margin-top: 0;
}

.note-page .site-main-body p + blockquote,
.note-page .site-main-body p + .pull-quote,
.note-page .site-main-body blockquote + p,
.note-page .site-main-body .pull-quote + p {
    margin-top: 1.5rem;
}
.note-page .site-main-body .pull-quote,
.note-page .site-main-body blockquote.pull-quote {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.note-page .site-main-body p + figure,
.note-page .site-main-body p + .ornate-card,
.note-page .site-main-body figure + p,
.note-page .site-main-body .ornate-card + p,
.note-page .site-main-body .fact-strip + figure,
.note-page .site-main-body figure + section {
    margin-top: 1.5rem;
}

.note-page .site-main-body .fact-strip {
    margin-bottom: 2rem;
}
.note-page .site-main-body figure.ornate-card,
.note-page .site-main-body figure.illus-card {
    margin-bottom: 2rem;
}

/* Hero crops tuned to keep a subject's face in frame */
figure.hero-figure-face img {
    object-position: center 22%;
}

figure.hero-figure-face.hero-figure-face-left img {
    object-position: 30% 20%;
}

figure.hero-figure-face.hero-figure-face-left-far img {
    object-position: 20% 22%;
}

figure.hero-figure-full img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

.note-page .site-main-body article.space-y-10 > * + * {
    margin-top: 2.5rem;
}
.note-page .site-main-body article.space-y-6 > * + * {
    margin-top: 1.75rem;
}
.note-page .site-main-body article.space-y-4 > * + * {
    margin-top: 1.375rem;
}
.site-main-footer {
    border-top: 1px solid var(--border-color);
    padding: 0.65rem 1.5rem;
    background: var(--bg-card);
    background-image: none;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Hub tabs */
.hub-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}
.hub-tab {
    font-size: 0.875rem;
    padding: 0.4rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: inherit;
    font-weight: 500;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.hub-tab:hover { color: var(--text-head); }
.hub-tab.active {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
    font-weight: 600;
    background: var(--bg-card);
}

.hub-panel { display: none; }
.hub-panel.active { display: block; }

/* Tables */
.notes-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.notes-table th {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-mute);
    font-weight: 700;
}
.notes-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--blue-pale);
    vertical-align: top;
}
.notes-table tr:hover td { background: linear-gradient(90deg, var(--magenta-wash) 0%, var(--gold-wash) 100%); }
.notes-table .read-link { color: var(--gold-deep); font-size: 0.875rem; white-space: nowrap; text-decoration: none; font-weight: 600; }
.notes-table .read-link:hover { color: var(--text-head); text-decoration: underline; }

/* Buttons and links */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--blue-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--blue-primary);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    color: var(--text-head);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-secondary:hover { background: var(--gold-light); border-color: var(--gold); }

/* In-article / prose links — dark navy, bold, no underline (template) */
.content-link,
.content-link:link,
.content-link:visited,
.content-link:hover,
.content-link:active,
.content-link:focus {
    color: var(--blue-primary) !important; /* dark navy #1E3A5F */
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: opacity var(--transition-fast);
}
.content-link:hover,
.content-link:focus {
    opacity: 0.88;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Cards */
.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}
.module-card:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 16px -4px var(--shadow-color), 0 0 0 1px var(--magenta-glow);
    transform: translateY(-2px);
}
.module-card.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-wash);
}
/* Fixed-ratio thumb frame so portrait/landscape assets fill evenly */
.module-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-mute);
    overflow: hidden;
    flex: 0 0 auto;
    /* Intrinsic image size must not drive flex item height */
    min-height: 0;
}
.module-card-tags {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    gap: 0.125rem;
    z-index: 1;
}
.module-card .thumb {
    /* Pull out of flow so portrait JPGs cannot stretch the frame */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}
/* SVG thumbs: cover the frame instead of letterboxing to intrinsic size */
.module-card .thumb[src$=".svg"],
.module-card .thumb[src*=".svg?"] {
    object-fit: cover;
    background: var(--bg-mute);
}
.module-card:hover .thumb {
    transform: scale(1.04);
}
.module-card .card-body {
    padding: 0.55rem 0.65rem 0.6rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.module-card .card-title {
    font-size: 0.9375rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em; /* two lines → even card rows */
}
.module-card .card-blurb {
    font-size: 0.875rem;
    line-height: 1.35;
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.7em;
}
.module-card .card-foot {
    margin-top: auto;
    padding-top: 0.3rem;
    font-size: 0.75rem;
}

.tag {
    font-size: 0.75rem !important;
    letter-spacing: 0.03em;
    padding: 2px 9px;
    border-radius: 9999px;
    background: var(--blue-mist);
    color: var(--blue-bright);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.tag:hover {
    background: var(--gold-pale);
    border-color: var(--gold);
    color: var(--gold-dark);
}

.fact-box {
    background: linear-gradient(135deg, var(--blue-mist) 0%, var(--magenta-light) 100%);
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    min-width: 0;
    align-self: start;
}
.fact-box:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--magenta-pale) 100%);
    border-color: var(--magenta-border);
    box-shadow: inset 0 0 0 1px var(--magenta-wash);
}

/* Discretionary hover links for people & places in fact-boxes and info-cards */
.fact-box .hover-entity-link,
.info-card .hover-entity-link {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}
.fact-box:hover .hover-entity-link,
.info-card:hover .hover-entity-link,
.fact-box .hover-entity-link:hover,
.info-card .hover-entity-link:hover,
.fact-box .hover-entity-link:focus-visible,
.info-card .hover-entity-link:focus-visible {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
    outline: none;
}
.fact-box.has-entity-link:hover .hover-entity-link::after,
.info-card.has-entity-link:hover .hover-entity-link::after {
    content: ' \2197';
    font-size: 0.72em;
    opacity: 0.85;
}

.fact-box.compact {
    padding: 0.65rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.fact-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}
@media (min-width: 720px) {
    .fact-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.fact-strip > * { min-width: 0; }
.fact-strip .fact-box {
    height: 100%;
}

/* Info-card grids used in place of crude SVG maps on several NT pages */
.info-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}
.info-card-grid .info-card {
    align-self: stretch;
    height: 100%;
}
.info-card-grid.info-card-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .info-card-grid.info-card-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.65rem 0.75rem;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.05);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: grid;
    grid-template-columns: 1.65rem 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.65rem;
    row-gap: 0.12rem;
    align-items: start;
}
.info-card:hover {
    border-color: var(--magenta-border);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.08), 0 0 0 1px var(--magenta-wash);
}
.info-card .info-card-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--gold-pale) 0%, var(--magenta-pale) 100%);
    color: var(--gold-dark);
    font-size: 0.75rem;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
}
.info-card .info-card-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-head);
    margin-bottom: 0;
    grid-column: 2;
    grid-row: 1;
}
.info-card .info-card-body {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted);
    grid-column: 2;
    grid-row: 2;
}
.info-card .info-card-note {
    font-size: 0.7rem;
    color: var(--subtle);
    margin-top: 0;
    font-style: italic;
    grid-column: 2;
    grid-row: 3;
}

/* Compact summary grids inside article sections */
.site-main-body .grid[class*="grid-cols"] {
    align-items: start;
    gap: 0.5rem;
}
.site-main-body .grid[class*="grid-cols"] > .ornate-card,
.site-main-body .grid[class*="grid-cols"] > .fact-box,
.site-main-body .grid[class*="grid-cols"] > figure.illus-card {
    align-self: start;
}
.note-page .site-main-body .grid[class*="grid-cols"] > figure.illus-card {
    margin-bottom: 0;
}
.site-main-body .grid[class*="grid-cols"] > .text-body {
    align-self: start;
}
.site-main-body .grid[class*="grid-cols"] > p.text-body.drop-cap {
    align-self: start;
    margin-top: 0;
}
.site-main-body .grid[class*="grid-cols"] > .ornate-card.p-4,
.site-main-body .grid[class*="grid-cols"] > .ornate-card.p-5 {
    padding: 0.65rem 0.75rem;
}
.site-main-body .grid[class*="grid-cols"] > .ornate-card .ui-head.text-sm,
.site-main-body .grid[class*="grid-cols"] > .ornate-card .font-semibold.text-sm {
    font-size: 0.8125rem;
}
.site-main-body .grid[class*="grid-cols"] > .ornate-card .text-xs {
    font-size: 0.7rem;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.ornate-card:has(.info-card-grid) {
    padding: 1rem !important;
}
.ornate-card:has(.info-card-grid) .text-xs.font-semibold.ui-gold {
    margin-bottom: 0.5rem !important;
}
.ornate-card:has(.info-card-grid) .text-\[11px\].ui-subtle {
    margin-top: 0.5rem !important;
}
.info-card-grid--dense {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0.5rem;
    align-items: start;
}
.info-card--dense {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
}
.info-card--dense .info-card-icon {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.75rem;
    margin-bottom: 0;
    flex-shrink: 0;
}
.info-card--dense .info-card-title {
    font-size: 0.875rem;
    margin-bottom: 0.15rem;
}
.info-card--dense .info-card-body {
    font-size: 0.75rem;
    line-height: 1.4;
}

.ornate-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 14px var(--shadow-color);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    min-width: 0;
}
.ornate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--magenta-soft) 22%, var(--gold) 50%, var(--magenta-soft) 78%, transparent);
    opacity: 0.5;
    pointer-events: none;
}
.ornate-card:hover {
    border-color: var(--magenta-border);
    box-shadow: 0 6px 18px rgba(30, 58, 95, 0.1), 0 0 0 1px var(--magenta-wash);
}

/* Detail pane */
.detail-pane {
    background: var(--bg-card);
    border: 1px solid var(--gold-light);
    box-shadow: 0 4px 14px var(--shadow-color);
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-lg);
}

/* Masoretes / mini-timeline cards */
.masoretes-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.masoretes-card:hover { border-color: var(--gold); }

.mini-timeline .event {
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.3;
    background: var(--bg-card);
}
.mini-timeline .event .event-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}
.mini-timeline .event:hover { background: var(--gold-pale); border-color: var(--gold); }
.mini-timeline .event.active { background: var(--gold-light); border-color: var(--gold); }

/* Hub grid scrollbar */
.hub-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-mute);
}

/* Nav scrolled (reserved for future sticky nav) */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--blue-pale);
}

/* Copyable Hebrew */
.copyable {
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    border: 1px solid transparent;
}
.copyable:hover { background: var(--gold-pale); border-color: var(--gold); }

/* Scholarly text */
.scholarly { font-size: 1rem; line-height: 1.7; }

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--gold);
    background: var(--blue-mist);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

/* Subtle divider */
.subtle-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), var(--blue-border), var(--gold), transparent);
}

/* Section headers */
.section-header {
    font-family: var(--font-body);
    color: var(--text-head);
    position: relative;
    display: inline-block;
    font-weight: 700;
}
.section-header::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-pale), var(--gold), var(--blue-border), transparent);
}

/* Heading serif (hub headings) */
.heading-serif {
    font-family: var(--font-body);
    color: var(--text-head);
    font-weight: 700;
}

/* Bibliography entry */
.sources-jump ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sources-footer-links a {
    white-space: nowrap;
}

.bib-entry {
    border-left: 3px solid var(--gold);
    padding-left: 1rem;
    margin-bottom: 0.75rem;
    transition: background var(--transition-fast);
}
.bib-entry:hover {
    background: linear-gradient(90deg, var(--magenta-wash) 0%, var(--gold-wash) 100%);
}

/* Drop cap */
.drop-cap::first-letter {
    float: left;
    font-size: 3.5rem;
    line-height: 0.75;
    margin: 0.1em 0.15em 0 0;
    color: var(--text-head);
    font-family: var(--font-body);
    font-weight: 700;
}

/* Region cards used on diaspora hub and related pages */
.region-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}
.region-card:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.14);
}

/* Related Notes: even modular card grid */
.related-notes-section {
    margin-bottom: 2rem;
}
.related-notes-section > .section-title,
.related-notes-section > .section-title-lg {
    margin-bottom: 0.85rem;
}
.related-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr));
    gap: 0.55rem;
    align-items: stretch;
}
.related-notes-grid--roomy {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.65rem;
}
.related-note-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.75rem 0.85rem;
    min-height: 4.5rem;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
}
.related-note-card:hover {
    background: var(--gold-pale);
    border-color: var(--gold);
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.1);
    transform: translateY(-1px);
}
.related-note-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.related-note-card > i,
.related-note-card-icon {
    flex-shrink: 0;
    width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--gold-pale);
    color: var(--gold-deep);
    font-size: 0.65rem;
}
.related-note-card:hover > i,
.related-note-card:hover .related-note-card-icon {
    background: var(--bg-card);
}
.related-note-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-head);
    display: block;
}
.related-note-card-desc {
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--muted);
    display: block;
    margin: 0;
}
.related-notes-kicker {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 0.65rem;
}
/* When Related Notes sit inside an ornate shell, keep padding even */
.ornate-card.related-notes-shell {
    padding: 1.5rem 1.5rem 1.35rem;
}
.ornate-card.related-notes-shell > .section-title-lg,
.ornate-card.related-notes-shell > .section-title {
    margin-bottom: 0.85rem;
}
@media (min-width: 640px) {
    .related-notes-grid {
        grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    }
    .related-notes-grid--roomy {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }
}
@media (max-width: 480px) {
    .related-notes-grid,
    .related-notes-grid--roomy {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }
    .related-note-card {
        min-height: 4rem;
        padding: 0.65rem 0.7rem;
    }
}

/* Featured image + caption (used on survival pages) */
.featured-img {
    border: 3px solid var(--border-color);
    box-shadow: 4px 6px 12px rgba(30, 58, 95, 0.15);
}
.featured-img + .figure-caption,
.featured-img .figure-caption {
    font-style: italic;
    color: var(--text-head);
    font-size: 0.875rem;
    text-align: center;
    margin-top: 6px;
}

/* Illustrated card + caption (Golden Age Spain) */
.illus-card {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: 0 4px 14px var(--shadow-color);
}
.illus-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.illus-caption {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--blue-pale);
    background: var(--bg-mute);
}

/* Timeline item (Golden Age Spain) */
.timeline-item {
    border-left: 2px solid var(--gold);
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}
.site-main-body .grid .timeline-item {
    margin-bottom: 0.5rem;
}

/* Niqqud table (Nakdanim page) */
.niqqud-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.niqqud-table th {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-mute);
}
.niqqud-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--blue-pale);
    vertical-align: middle;
}
.niqqud-table tr:hover td { background: var(--blue-mist); }

/* Page body defaults — Lora everywhere, consistent size */
.note-page,
.hub-page {
    font-family: var(--font-body);
    background-color: var(--bg-body);
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.7;
}

/* Flat default light surface — matches WordPress journal */
.note-page {
    background-image: none;
    background-color: var(--bg-body);
}

/* Flat default light surface — matches WordPress journal (masoretes hub theme) */
.hub-page {
    background-image: none;
    background-color: var(--bg-body);
}

/* Hub hero: balanced two-column top + full-width lower band */
.hub-page .site-main-header {
    padding: 1.15rem 1.5rem 0.85rem;
}

/* Pull Explore Modules up: tighter hero chrome, larger module stage */
.hub-page .site-main-body {
    padding: 0.85rem 1.5rem 2rem;
}

.hub-page .hub-tabs {
    margin-bottom: 0.9rem;
    padding: 0.15rem 0 0;
    gap: 0.35rem;
    border-bottom-width: 1px;
}

.hub-page .hub-tab {
    font-size: 0.9375rem;
    padding: 0.55rem 1.05rem;
    letter-spacing: 0.02em;
}

.hub-page .hub-tab.active {
    font-weight: 700;
}

.hub-page .explore-modules-heading {
    margin-bottom: 0.55rem;
}

.hub-page #modules-grid.hub-grid {
    max-height: none;
    overflow: visible;
}

.hub-page #detail-pane.detail-pane {
    max-height: min(420px, 55vh);
    min-height: 220px;
}

/* Compact the band above Explore so modules sit higher in the viewport */
.hub-page .site-main-header .hub-hero-lower {
    gap: 0.65rem;
    padding-top: 0.15rem;
}

.hub-page .site-main-header .hub-hero-actions-foot {
    margin-top: 0.35rem;
    font-size: 0.6875rem;
}

.hub-page .hub-journal-banner {
    padding: 0.6rem 0.95rem;
    gap: 0.55rem 1rem;
}

.hub-page .hub-journal-banner-desc {
    display: none;
}

.hub-page .hub-journal-banner-title {
    font-size: 0.9rem;
}

.hub-page .hub-journal-banner-cta {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
}

.hub-page .site-main-header .hub-hero-quicklinks-label {
    margin-bottom: 0.35rem;
}

.hub-page .site-main-header .hub-hero-quicklinks-grid {
    gap: 0.4rem;
}

.hub-page .site-main-header .hub-quicklink {
    min-height: 0;
    padding: 0.45rem 0.55rem;
    align-items: center;
}

.hub-page .site-main-header .hub-quicklink-desc {
    display: none;
}

.hub-page .site-main-header .hub-quicklink > i {
    margin-top: 0;
}


.hub-page .site-main-header .hub-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2.25rem;
    width: 100%;
    max-width: none;
    align-items: start;
}

.hub-page .site-main-header .hub-hero-title {
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.hub-page .site-main-header .hero-intro {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 0.45rem;
    max-width: 40rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Our conviction — click popup (not hover) */
.site-main-header .hub-confessional {
    width: 100%;
    max-width: 40rem;
    margin-top: 0.65rem;
}

.site-main-header .hub-confessional-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: inherit;
    color: var(--text-head);
    background: var(--gold-pale);
    border: 1px solid var(--gold);
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    user-select: none;
}

.site-main-header .hub-confessional-tab:hover,
.site-main-header .hub-confessional-tab:focus-visible {
    background: var(--gold-light);
    border-color: var(--gold-deep);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.site-main-header .hub-confessional-tab:active {
    transform: translateY(1px);
}

.site-main-header .hub-confessional-tab i:first-child {
    color: var(--gold-deep);
    font-size: 0.625rem;
}

.hub-confessional-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.hub-confessional-modal[hidden] {
    display: none !important;
}

.hub-confessional-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
    border: 0;
    cursor: pointer;
}

.hub-confessional-dialog {
    position: relative;
    z-index: 1;
    width: min(32rem, 100%);
    max-height: min(80vh, 28rem);
    overflow: auto;
    padding: 0;
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg, 0.85rem);
    background: var(--bg-card, #fff);
    background-image: linear-gradient(180deg, var(--gold-pale) 0%, var(--bg-card, #fff) 42%);
    box-shadow: 0 18px 48px rgba(30, 58, 95, 0.22), 0 0 0 1px var(--magenta-glow, rgba(196,113,154,0.11));
    animation: hubConfessionalIn 0.2s ease;
}

@keyframes hubConfessionalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.hub-confessional-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem 0.65rem;
    border-bottom: 1px solid var(--gold);
}

.hub-confessional-dialog-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-head);
    letter-spacing: 0.02em;
}

.hub-confessional-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card, #fff);
    color: var(--text-head);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hub-confessional-close:hover {
    background: var(--gold-pale);
    border-color: var(--gold);
}

.hub-confessional-close-label { line-height: 1; }

.hub-confessional-dialog-body {
    padding: 1rem 1.15rem 1.25rem;
}

.hub-confessional-dialog-body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-head);
}

body.hub-confessional-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .hub-confessional-dialog { animation: none; }
}

.hub-page .site-main-header .hub-hero-download {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.hub-page .site-main-header .hub-hero-eyebrow-wrap {
    margin-bottom: 0.4rem;
}

.hub-page .site-main-header .hub-hero-eyebrow {
    margin-bottom: 0;
}

.hub-page .site-main-header .hub-hero-actions {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--blue-pale);
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 0 0 auto;
}

.hub-page .site-main-header .hub-hero-actions-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.hub-page .site-main-header .hub-hero-actions-link {
    color: var(--text-head);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.hub-page .site-main-header .hub-hero-actions-link:hover {
    color: var(--gold-deep);
    text-decoration: underline;
}

.hub-page .site-main-header .hub-hero-actions-dot {
    color: var(--gold);
    opacity: 0.85;
}

.hub-page .site-main-header .hub-hero-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.hub-page .site-main-header .hub-hero-actions-buttons .btn-secondary,
.hub-page .site-main-header .hub-hero-actions-buttons .btn-primary {
    font-size: 0.8125rem;
}

.hub-page .site-main-header .hub-hero-actions-foot {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}

/* Full-width band under text + figure */
.hub-page .site-main-header .hub-hero-lower {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.hub-page .site-main-header .hub-hero-quicklinks {
    margin-top: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hub-page .site-main-header .hub-hero-quicklinks-daily {
    font-weight: 400;
    opacity: 0.72;
    font-size: 0.85em;
    letter-spacing: 0.02em;
}
.hub-page .site-main-header .hub-hero-quicklinks-label {
    margin: 0 0 0.55rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.hub-page .site-main-header .hub-hero-quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    flex: 0 0 auto;
    align-content: start;
}

.hub-page .site-main-header .hub-quicklink {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 3.4rem;
}

.hub-page .site-main-header .hub-quicklink:hover {
    background: var(--gold-pale);
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.08);
}

.hub-page .site-main-header .hub-quicklink > i {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--gold-pale);
    color: var(--gold-deep);
    font-size: 0.5625rem;
    margin-top: 0.1rem;
}

.hub-page .site-main-header .hub-quicklink-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.hub-page .site-main-header .hub-quicklink-title {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-head);
}

.hub-page .site-main-header .hub-quicklink-desc {
    font-size: 0.625rem;
    line-height: 1.35;
    color: var(--muted);
}

.hub-page .site-main-header .hub-hero-text-col {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.hub-page .site-main-header .hub-hero-copy {
    margin-top: 0.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hub-page .site-main-header .hub-hero-figure-col {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
}

.hub-hero-figure {
    margin: 0;
    width: 100%;
    max-width: 22rem;
}

.hub-hero-figure picture {
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 28px rgba(30, 58, 95, 0.14);
    background: var(--bg-card);
}

.hub-hero-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 12rem;
    max-height: 18rem;
    object-fit: cover;
    /* Frame the elderly Masorete (left) fully — not the manuscript half */
    object-position: 12% 48%;
}

.hub-hero-figure-caption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 600;
}

/* Tablet+: text left, art right — graphic TOP flush with History badge */
@media (min-width: 900px) {
    .hub-page .site-main-header .hub-hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(15rem, 0.95fr);
        column-gap: 1.1rem;
        row-gap: 1.75rem;
        align-items: start;
    }

    .hub-page .site-main-header .hub-hero-text-col {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0;
        margin-top: 0;
    }

    .hub-page .site-main-header .hub-hero-eyebrow-wrap {
        margin-top: 0;
        padding-top: 0;
    }

    .hub-page .site-main-header .hub-hero-figure-col {
        grid-column: 2;
        grid-row: 1;
        /* Top-align with the History of Bible Transmission badge */
        align-self: start;
        position: relative;
        min-height: 0;
        height: auto;
        margin-top: 0;
        padding-top: 0;
        display: block;
    }

    .hub-page .site-main-header .hub-hero-lower {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 0.35rem;
        border-top: 1px solid var(--blue-pale);
    }

    /* Fill from badge top → bottom of action tiles (height set in JS) */
    .hub-hero-figure {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        display: block;
    }

    .hub-hero-figure picture {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 0.75rem;
    }

    .hub-hero-figure img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
        object-fit: cover;
        /* Keep full elderly scribe in frame (left scene); vertical center so head + desk show */
        object-position: 12% 48%;
    }

    /* Caption overlays the frame so the graphic bottom stays flush with actions */
    .hub-hero-figure-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.55rem;
        margin: 0;
        z-index: 1;
        color: #fff;
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.75), 0 0 10px rgba(15, 23, 42, 0.45);
        pointer-events: none;
    }

    .hub-page .site-main-header .hub-hero-quicklinks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    /* Keep popular entry points compact so Explore Modules sits higher */
    .hub-page .site-main-header .hub-quicklink {
        min-height: 0;
        padding: 0.45rem 0.6rem;
        align-items: center;
    }

    .hub-page .site-main-header .hub-quicklink-title {
        font-size: 0.75rem;
    }

    .hub-page .site-main-header .hub-quicklink-desc {
        display: none;
    }

    .hub-page .site-main-header .hub-hero-actions-foot {
        text-align: left;
    }
}

/* Wide main area: keep art subordinate to text column height */
@media (min-width: 1200px) {
    .hub-page .site-main-header .hub-hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
        column-gap: 1.25rem;
    }

    /* 8 popular entry points → two even rows of four */
    .hub-page .site-main-header .hub-hero-quicklinks-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Mid desktop: still prefer 4 columns for an 8-tile set */
@media (min-width: 900px) and (max-width: 1199.98px) {
    .hub-page .site-main-header .hub-hero-quicklinks-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 899.98px) {
    .hub-page .site-main-header .hub-hero-quicklinks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hub-hero-figure {
        max-width: none;
        margin-inline: 0;
        width: 100%;
    }
}

/* Hebrew text */
.hebrew {
    font-family: 'Noto Sans Hebrew', 'Times New Roman', serif;
    direction: rtl;
}

/* Back-to-top button */
.back-to-top {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue-primary);
    color: #fff;
    border: 1px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--transition-smooth), transform var(--transition-smooth), background var(--transition-fast);
    z-index: 50;
    pointer-events: none;
}
.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover { background: var(--gold-deep); }

/* Mobile sidebar */
.sidebar-toggle, .sidebar-overlay { display: none; }

@media (max-width: 1024px) {
    .site-layout { grid-template-columns: 1fr; }
.site-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform var(--transition-smooth);
    box-shadow: 4px 0 24px rgba(30, 58, 95, 0.14);
    width: var(--sidebar-width);
}
    .site-sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 35; }
    .sidebar-toggle {
        display: flex;
        position: fixed;
        bottom: 1.1rem;
        left: 1.1rem;
        z-index: 60;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--blue-primary);
        color: #fff;
        border: 1px solid var(--gold);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
        transition: background var(--transition-fast);
    }
    .sidebar-toggle:hover { background: var(--gold-deep); }
    .back-to-top { bottom: 1.1rem; right: 1.1rem; }
}


/* Greek Bible / article utilities */
.nt-timeline {
    position: relative;
    padding-left: 1rem;
    border-left: 2px solid var(--gold);
}
.nt-timeline .event {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.75rem;
}
.nt-timeline .event::before {
    content: '';
    position: absolute;
    left: -0.35rem;
    top: 0.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--bg-card);
}

.manuscript-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.manuscript-card:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 16px -4px var(--shadow-color);
}

.stat-card {
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem;
    text-align: center;
}
.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-head);
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.confessional-box {
    background: var(--gold-pale);
    border: 1px solid var(--gold);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: var(--text-head);
    font-style: italic;
}

/* =========================================================
   Dark mode
   ========================================================= */
html[data-theme="dark"] {
    color-scheme: dark;

    --bg-paper: #0F172A;

    --blue-primary: #93C5FD;
    --blue-bright: #38BDF8;
    --blue-soft: #7DD3FC;
    --blue-border: #1E3A5F;
    --blue-pale: #172554;
    --blue-mist: #0F172A;
    --blue-ghost: #0B1220;

    --gold: #E8C76B;
    --gold-dark: #F0D78A;
    --gold-deep: #E8C76B;
    --gold-light: rgba(212, 175, 55, 0.15);
    --gold-pale: rgba(212, 175, 55, 0.12);
    --gold-wash: rgba(212, 175, 55, 0.08);

    --magenta: #E8A8C8;
    --magenta-soft: #D487B0;
    --magenta-pale: rgba(196, 113, 154, 0.14);
    --magenta-light: rgba(196, 113, 154, 0.09);
    --magenta-border: rgba(196, 113, 154, 0.32);
    --magenta-wash: rgba(196, 113, 154, 0.07);
    --magenta-glow: rgba(196, 113, 154, 0.14);

    --ink: #E2E8F0;
    --slate: #CBD5E1;
    --muted: #94A3B8;
    --subtle: #94A3B8;
    --cloud: #64748B;

    --bg-body: #0B1220;
    --bg-card: #0F172A;
    --bg-soft: #172554;
    --bg-mute: #0F172A;
    --text-main: #E2E8F0;
    --text-head: #93C5FD;
    --text-muted: #94A3B8;
    --border-color: #1E3A5F;
    --shadow-color: rgba(0, 0, 0, 0.35);
}

/* Site default is light; OS dark preference does not auto-switch the site.
   html:not([data-theme]) keeps :root light tokens until JS sets data-theme. */

/* Explicit light — cool blue/white/gold, no rose or red cast */
html[data-theme="light"],
html:not([data-theme]) {
    color-scheme: light;

    /* Match WordPress journal default (Masoretes Hub theme) */
    --blue-primary: #1E3A5F;
    --blue-bright: #0284C8;
    --blue-soft: #38BDF8;
    --blue-border: #BAE6FD;
    --blue-pale: #E0F2FE;
    --blue-mist: #F0F9FF;
    --blue-ghost: #F8FAFC;

    --gold: #D4AF37;
    --gold-dark: #B8860B;
    --gold-deep: #C5A028;
    --gold-light: #F9F1D8;
    --gold-pale: #FEF3C7;
    --gold-wash: rgba(212, 175, 55, 0.08);

    --magenta: #5B7C99;
    --magenta-soft: #8BA8C0;
    --magenta-pale: #E8F1F8;
    --magenta-light: #F3F8FC;
    --magenta-border: #D0E2F0;
    --magenta-wash: rgba(30, 58, 95, 0.05);
    --magenta-glow: rgba(2, 132, 200, 0.1);

    --ink: #1E293B;
    --slate: #334155;
    --muted: #475569;
    --subtle: #64748B;
    --cloud: #94A3B8;

    --bg-body: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-soft: var(--blue-mist);
    --bg-mute: var(--blue-ghost);
    --bg-paper: #F8FAFC;
    --text-main: var(--ink);
    --text-head: var(--blue-primary);
    --text-muted: var(--subtle);
    --border-color: var(--blue-border);
    --shadow-color: rgba(30, 58, 95, 0.1);
}

/* =========================================================
   Sepia mode — parchment / aged paper
   ========================================================= */
html[data-theme="sepia"] {
    color-scheme: light;

    --blue-primary: #5C4033;
    --blue-bright: #8B6914;
    --blue-soft: #A67C52;
    --blue-border: #D4C4A8;
    --blue-pale: #EDE0C8;
    --blue-mist: #F5EBD9;
    --blue-ghost: #FAF4E8;

    --gold: #B8952A;
    --gold-dark: #8B6914;
    --gold-deep: #A67C00;
    --gold-light: #F0E2B8;
    --gold-pale: #F7ECD0;
    --gold-wash: rgba(184, 149, 42, 0.12);

    --magenta: #A66B7A;
    --magenta-soft: #C99AA6;
    --magenta-pale: #F5E6EA;
    --magenta-light: #FAF0F2;
    --magenta-border: #E8CFD6;
    --magenta-wash: rgba(166, 107, 122, 0.07);
    --magenta-glow: rgba(166, 107, 122, 0.12);

    --ink: #3D2B1F;
    --slate: #5C4033;
    --muted: #6B5344;
    --subtle: #7A6555;
    --cloud: #A08B78;

    --bg-body: #F4EBD8;
    --bg-card: #FAF3E3;
    --bg-soft: #EDE0C8;
    --bg-mute: #F7F0E0;
    --bg-paper: #F0E4C8;
    --text-main: #3D2B1F;
    --text-head: #5C4033;
    --text-muted: #7A6555;
    --border-color: #D4C4A8;
    --shadow-color: rgba(92, 64, 51, 0.12);
}

/* =========================================================
   Light grey mode — cool neutral slate
   ========================================================= */
html[data-theme="grey"] {
    color-scheme: light;

    --blue-primary: #374151;
    --blue-bright: #4B5563;
    --blue-soft: #6B7280;
    --blue-border: #D1D5DB;
    --blue-pale: #E5E7EB;
    --blue-mist: #F3F4F6;
    --blue-ghost: #F9FAFB;

    --gold: #A8A29E;
    --gold-dark: #78716C;
    --gold-deep: #8B8680;
    --gold-light: #E7E5E4;
    --gold-pale: #F5F5F4;
    --gold-wash: rgba(120, 113, 108, 0.08);

    --magenta: #9CA3AF;
    --magenta-soft: #D1D5DB;
    --magenta-pale: #F3F4F6;
    --magenta-light: #F9FAFB;
    --magenta-border: #E5E7EB;
    --magenta-wash: rgba(156, 163, 175, 0.08);
    --magenta-glow: rgba(156, 163, 175, 0.12);

    --ink: #1F2937;
    --slate: #374151;
    --muted: #4B5563;
    --subtle: #6B7280;
    --cloud: #9CA3AF;

    --bg-body: #F3F4F6;
    --bg-card: #FFFFFF;
    --bg-soft: #E5E7EB;
    --bg-mute: #F9FAFB;
    --bg-paper: #F3F4F6;
    --text-main: #1F2937;
    --text-head: #111827;
    --text-muted: #6B7280;
    --border-color: #D1D5DB;
    --shadow-color: rgba(17, 24, 39, 0.08);
}

/* Accent gold kept readable on grey theme for brand continuity */
html[data-theme="grey"] {
    --gold: #C4A35A;
    --gold-dark: #9A7B2F;
    --gold-deep: #B08D3A;
    --gold-light: #F0E8D4;
    --gold-pale: #F7F1E3;
    --gold-wash: rgba(196, 163, 90, 0.1);
}

/* =========================================================
   Warm light mode — cream / soft amber daylight
   ========================================================= */
html[data-theme="warm"] {
    color-scheme: light;

    --blue-primary: #4A3728;
    --blue-bright: #B45309;
    --blue-soft: #D97706;
    --blue-border: #EDD9B8;
    --blue-pale: #F8EBD7;
    --blue-mist: #FBF3E6;
    --blue-ghost: #FDF8F0;

    --gold: #D4A017;
    --gold-dark: #B8860B;
    --gold-deep: #C49212;
    --gold-light: #F8EAC0;
    --gold-pale: #FBF0D0;
    --gold-wash: rgba(212, 160, 23, 0.1);

    --magenta: #C17B8A;
    --magenta-soft: #E0B0BA;
    --magenta-pale: #F9E8EC;
    --magenta-light: #FCF4F6;
    --magenta-border: #F0D4DB;
    --magenta-wash: rgba(193, 123, 138, 0.07);
    --magenta-glow: rgba(193, 123, 138, 0.12);

    --ink: #2C2118;
    --slate: #4A3728;
    --muted: #6B5344;
    --subtle: #7D6A58;
    --cloud: #A89078;

    --bg-body: #FBF6EE;
    --bg-card: #FFFCF7;
    --bg-soft: #F8EBD7;
    --bg-mute: #FDF8F0;
    --bg-paper: #FBF0DC;
    --text-main: #2C2118;
    --text-head: #4A3728;
    --text-muted: #7D6A58;
    --border-color: #EDD9B8;
    --shadow-color: rgba(74, 55, 40, 0.1);
}


/* =========================================================
   Rose mode — soft rose-red tint
   ========================================================= */
html[data-theme="rose"] {
    color-scheme: light;

    --blue-primary: #7A2E45;
    --blue-bright: #BE185D;
    --blue-soft: #DB2777;
    --blue-border: #F0C4D0;
    --blue-pale: #F9DDE5;
    --blue-mist: #FDF0F4;
    --blue-ghost: #FEF7F9;

    --gold: #C9A227;
    --gold-dark: #A8841A;
    --gold-deep: #B8941F;
    --gold-light: #F6E9C0;
    --gold-pale: #FBF3DC;
    --gold-wash: rgba(201, 162, 39, 0.1);

    --magenta: #C44B6E;
    --magenta-soft: #E08AA3;
    --magenta-pale: #FBE4EB;
    --magenta-light: #FDF2F5;
    --magenta-border: #F0C4D0;
    --magenta-wash: rgba(196, 75, 110, 0.08);
    --magenta-glow: rgba(196, 75, 110, 0.14);

    --ink: #3F1D2A;
    --slate: #5C2A3A;
    --muted: #7A4558;
    --subtle: #8B5A6B;
    --cloud: #B08A98;

    --bg-body: #FDF5F7;
    --bg-card: #FFFCFD;
    --bg-soft: #F9DDE5;
    --bg-mute: #FEF7F9;
    --bg-paper: #FBE8EE;
    --text-main: #3F1D2A;
    --text-head: #7A2E45;
    --text-muted: #8B5A6B;
    --border-color: #F0C4D0;
    --shadow-color: rgba(122, 46, 69, 0.12);
}

/* =========================================================
   Ocean breeze mode — cool sea blues and airy aqua
   ========================================================= */
html[data-theme="ocean"] {
    color-scheme: light;

    --blue-primary: #0C4A6E;
    --blue-bright: #0284C7;
    --blue-soft: #38BDF8;
    --blue-border: #A5D8E8;
    --blue-pale: #CFF1FA;
    --blue-mist: #E8F7FC;
    --blue-ghost: #F3FBFD;

    --gold: #D4AF37;
    --gold-dark: #B8860B;
    --gold-deep: #C5A028;
    --gold-light: #F3E7C0;
    --gold-pale: #FAF3DE;
    --gold-wash: rgba(212, 175, 55, 0.1);

    --magenta: #5E9BA8;
    --magenta-soft: #9BC8D1;
    --magenta-pale: #E3F2F5;
    --magenta-light: #F0F9FB;
    --magenta-border: #B8DCE3;
    --magenta-wash: rgba(14, 116, 144, 0.06);
    --magenta-glow: rgba(14, 116, 144, 0.12);

    --ink: #0F2F3D;
    --slate: #164E63;
    --muted: #336B7C;
    --subtle: #4A7C8C;
    --cloud: #7BA8B5;

    --bg-body: #F0F9FC;
    --bg-card: #FBFEFF;
    --bg-soft: #E0F4FA;
    --bg-mute: #F5FBFD;
    --bg-paper: #E8F6FB;
    --text-main: #0F2F3D;
    --text-head: #0C4A6E;
    --text-muted: #4A7C8C;
    --border-color: #A5D8E8;
    --shadow-color: rgba(12, 74, 110, 0.12);
}



/* =========================================================
   Orange mode — ripe citrus / amber-orange daylight
   ========================================================= */
html[data-theme="orange"] {
    color-scheme: light;

    --blue-primary: #7C2D12;
    --blue-bright: #EA580C;
    --blue-soft: #F97316;
    --blue-border: #FDBA74;
    --blue-pale: #FED7AA;
    --blue-mist: #FFF7ED;
    --blue-ghost: #FFFBF5;

    --gold: #F97316;
    --gold-dark: #C2410C;
    --gold-deep: #EA580C;
    --gold-light: #FDBA74;
    --gold-pale: #FFEDD5;
    --gold-wash: rgba(249, 115, 22, 0.12);

    --magenta: #FB923C;
    --magenta-soft: #FDBA74;
    --magenta-pale: #FFEDD5;
    --magenta-light: #FFF7ED;
    --magenta-border: #FED7AA;
    --magenta-wash: rgba(234, 88, 12, 0.08);
    --magenta-glow: rgba(234, 88, 12, 0.14);

    --ink: #431407;
    --slate: #7C2D12;
    --muted: #9A3412;
    --subtle: #C2410C;
    --cloud: #EA580C;

    --bg-body: #FFF9F4;
    --bg-card: #FFFCFA;
    --bg-soft: #FFEDD5;
    --bg-mute: #FFF7ED;
    --bg-paper: #FED7AA;
    --text-main: #431407;
    --text-head: #7C2D12;
    --text-muted: #C2410C;
    --border-color: #FDBA74;
    --shadow-color: rgba(124, 45, 18, 0.1);
}

/* =========================================================
   Yellow mode — bright lemon / canary daylight
   ========================================================= */
html[data-theme="yellow"] {
    color-scheme: light;

    --blue-primary: #713F12;
    --blue-bright: #CA8A04;
    --blue-soft: #EAB308;
    --blue-border: #FDE68A;
    --blue-pale: #FEF08A;
    --blue-mist: #FEF9C3;
    --blue-ghost: #FFFBEB;

    --gold: #EAB308;
    --gold-dark: #A16207;
    --gold-deep: #CA8A04;
    --gold-light: #FDE047;
    --gold-pale: #FEF08A;
    --gold-wash: rgba(234, 179, 8, 0.14);

    --magenta: #FACC15;
    --magenta-soft: #FDE047;
    --magenta-pale: #FEF9C3;
    --magenta-light: #FFFBEB;
    --magenta-border: #FDE68A;
    --magenta-wash: rgba(202, 138, 4, 0.09);
    --magenta-glow: rgba(202, 138, 4, 0.15);

    --ink: #422006;
    --slate: #713F12;
    --muted: #854D0E;
    --subtle: #A16207;
    --cloud: #CA8A04;

    --bg-body: #FFFDF2;
    --bg-card: #FFFEF8;
    --bg-soft: #FEF08A;
    --bg-mute: #FEF9C3;
    --bg-paper: #FDE68A;
    --text-main: #422006;
    --text-head: #713F12;
    --text-muted: #A16207;
    --border-color: #FDE047;
    --shadow-color: rgba(113, 63, 18, 0.1);
}

/* =========================================================
   Purple mode — soft violet / amethyst light
   ========================================================= */
html[data-theme="purple"] {
    color-scheme: light;

    --blue-primary: #4C1D95;
    --blue-bright: #7C3AED;
    --blue-soft: #A78BFA;
    --blue-border: #DDD6FE;
    --blue-pale: #EDE9FE;
    --blue-mist: #F5F3FF;
    --blue-ghost: #FAF8FF;

    --gold: #C4B5FD;
    --gold-dark: #7C3AED;
    --gold-deep: #8B5CF6;
    --gold-light: #EDE9FE;
    --gold-pale: #F5F3FF;
    --gold-wash: rgba(124, 58, 237, 0.1);

    --magenta: #A78BFA;
    --magenta-soft: #C4B5FD;
    --magenta-pale: #EDE9FE;
    --magenta-light: #F5F3FF;
    --magenta-border: #DDD6FE;
    --magenta-wash: rgba(124, 58, 237, 0.08);
    --magenta-glow: rgba(124, 58, 237, 0.14);

    --ink: #2E1065;
    --slate: #4C1D95;
    --muted: #5B21B6;
    --subtle: #6D28D9;
    --cloud: #8B5CF6;

    --bg-body: #FAF8FF;
    --bg-card: #FDFCFF;
    --bg-soft: #EDE9FE;
    --bg-mute: #F5F3FF;
    --bg-paper: #EDE9FE;
    --text-main: #2E1065;
    --text-head: #4C1D95;
    --text-muted: #6D28D9;
    --border-color: #DDD6FE;
    --shadow-color: rgba(76, 29, 149, 0.12);
}

/* =========================================================
   Leaf mode — green foliage / botanical light
   ========================================================= */
html[data-theme="leaf"] {
    color-scheme: light;

    --blue-primary: #14532D;
    --blue-bright: #15803D;
    --blue-soft: #22C55E;
    --blue-border: #BBF7D0;
    --blue-pale: #DCFCE7;
    --blue-mist: #F0FDF4;
    --blue-ghost: #F7FEF9;

    --gold: #CA8A04;
    --gold-dark: #A16207;
    --gold-deep: #B45309;
    --gold-light: #FEF3C7;
    --gold-pale: #FEF9C3;
    --gold-wash: rgba(202, 138, 4, 0.1);

    --magenta: #4ADE80;
    --magenta-soft: #86EFAC;
    --magenta-pale: #DCFCE7;
    --magenta-light: #F0FDF4;
    --magenta-border: #BBF7D0;
    --magenta-wash: rgba(22, 163, 74, 0.07);
    --magenta-glow: rgba(22, 163, 74, 0.12);

    --ink: #052E16;
    --slate: #14532D;
    --muted: #166534;
    --subtle: #15803D;
    --cloud: #4ADE80;

    --bg-body: #F7FEF9;
    --bg-card: #FBFFFC;
    --bg-soft: #DCFCE7;
    --bg-mute: #F0FDF4;
    --bg-paper: #E8F8EE;
    --text-main: #052E16;
    --text-head: #14532D;
    --text-muted: #15803D;
    --border-color: #BBF7D0;
    --shadow-color: rgba(20, 83, 45, 0.1);
}


/* Shared light-theme image opacity (sepia / grey / warm stay at full opacity) */
html[data-theme="sepia"] img,
html[data-theme="grey"] img,
html[data-theme="warm"] img,
html[data-theme="rose"] img,
html[data-theme="ocean"] img,
html[data-theme="orange"] img,
html[data-theme="yellow"] img,
html[data-theme="leaf"] img,
html[data-theme="purple"] img,
html[data-theme="light"] img {
    opacity: 1;
}


/* Explicit dark-mode tweaks for elements not yet using variables */
html[data-theme="dark"] .site-sidebar,
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .site-sidebar { border-right-color: var(--border-color); }
}

html[data-theme="dark"] img,
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) img { opacity: 0.92; }
}

/* Tailwind arbitrary-color overrides for dark mode */
html[data-theme="dark"] [class*="text-[#1E3A5F]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="text-[#1E3A5F]"] { color: var(--text-head) !important; }
}

html[data-theme="dark"] [class*="text-[#334155]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="text-[#334155]"] { color: var(--text-main) !important; }
}

html[data-theme="dark"] [class*="text-[#475569]"],
html[data-theme="dark"] [class*="text-[#64748B]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="text-[#475569]"],
    html:not([data-theme]) [class*="text-[#64748B]"] { color: var(--text-muted) !important; }
}

html[data-theme="dark"] [class*="bg-[#F0F9FF]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="bg-[#F0F9FF]"] { background-color: var(--bg-soft) !important; }
}

html[data-theme="dark"] [class*="bg-[#FEF3C7]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="bg-[#FEF3C7]"] { background-color: var(--gold-pale) !important; }
}

html[data-theme="dark"] [class*="border-[#BAE6FD]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="border-[#BAE6FD]"] { border-color: var(--border-color) !important; }
}

html[data-theme="dark"] [class*="border-[#D4AF37]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="border-[#D4AF37]"] { border-color: var(--gold) !important; }
}

html[data-theme="dark"] [class*="text-[#B8860B]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="text-[#B8860B]"] { color: var(--gold-dark) !important; }
}

html[data-theme="dark"] [class*="bg-[#1E3A5F]"],
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) [class*="bg-[#1E3A5F]"] { background-color: #172554 !important; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .module-card:hover, .region-card:hover { transform: none; }
    .module-card:hover .thumb { transform: none; }
    .site-sidebar { transition: none; }
    .back-to-top { transition: none; }
}

/* =========================================================
   Scholarship map
   ========================================================= */
.map-page .site-main-body.max-w-6xl {
    max-width: 72rem;
}

.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.map-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.map-filter-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.map-filter-btn:hover,
.map-filter-btn.map-filter-active {
    border-color: var(--gold);
    background: var(--gold-wash);
    color: var(--text-head);
}

.map-toolbar-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: start;
}

.map-main-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.scholarship-map-canvas {
    min-height: 460px;
    height: min(62vh, 620px);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--blue-ghost);
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.08);
}

/* Full individual menu below the map — never clipped by map overflow */
.map-individual-card {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    box-shadow: 0 8px 22px rgba(30, 58, 95, 0.1);
}
.map-individual-card.is-open {
    display: block;
}

.map-city-panel {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--bg-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(62vh, 620px);
}

.map-city-panel-header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 600;
}

#map-city-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
}

.map-index-section {
    list-style: none;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
}

.map-index-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem 0.4rem;
    margin: 0.15rem 0 0.2rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-card) 70%, transparent);
}

.map-index-heading-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.map-index-heading-count {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--blue-mist, rgba(2, 132, 200, 0.08));
    border-radius: 9999px;
    padding: 0.1rem 0.45rem;
    min-width: 1.4rem;
    text-align: center;
}

.map-index-section + li .map-city-item {
    margin-top: 0.1rem;
}

/* Space before the People block when it follows Cities */
.map-index-section:not(:first-child) {
    margin-top: 0.55rem;
    padding-top: 0.15rem;
}

.map-index-empty {
    list-style: none;
    padding: 1rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.map-city-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 0.75rem;
    padding: 0.55rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.map-city-item:hover,
.map-city-item.is-active {
    background: var(--blue-mist);
    border-color: var(--border-color);
}

.map-city-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    flex-shrink: 0;
}

.map-city-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.map-city-item-label {
    font-size: 0.85rem;
    color: var(--text-head);
    font-weight: 600;
}

.map-city-item-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.scholarship-map-marker-wrap {
    background: transparent;
    border: none;
}

.scholarship-map-marker-person {
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.map-city-item-dot.is-person {
    border-radius: 2px;
    transform: rotate(45deg);
}
.map-legend-swatch-person {
    border-radius: 2px;
    transform: rotate(45deg);
}
.scholarship-map-popup-place {
    font-size: 0.75rem;
    color: var(--ui-subtle, #64748b);
    margin: 0.15rem 0 0.4rem;
}
.scholarship-map-popup-place i {
    margin-right: 0.25rem;
    opacity: 0.8;
}
.scholarship-map-marker {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.35);
}

.scholarship-map-popup-pane .leaflet-popup-content-wrapper {
    border-radius: 0.85rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px rgba(30, 58, 95, 0.16);
}

/* Person popups: roomy but kept inside the map by framing + max bounds */
.scholarship-map-popup-pane--person .leaflet-popup-content-wrapper {
    max-width: min(340px, 48vw) !important;
    box-sizing: border-box;
    overflow: visible;
}
.scholarship-map-popup-pane--person .leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.scholarship-map-popup--person {
    display: flex;
    flex-direction: column;
    max-height: min(360px, 60vh);
}
.scholarship-map-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.scholarship-map-popup-footer {
    flex: 0 0 auto;
    padding-top: 0.4rem;
}
.scholarship-map-popup-pane .leaflet-popup-content {
    margin: 0.7rem 0.8rem;
}

.scholarship-map-popup {
    font-family: var(--font-body);
}

.scholarship-map-popup--person {
    max-width: 100%;
}

.scholarship-map-popup-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 0.25rem;
}

.scholarship-map-popup--person .scholarship-map-popup-eyebrow {
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
}

.scholarship-map-popup-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-head);
    margin: 0 0 0.35rem;
    line-height: 1.25;
}

.scholarship-map-popup--person .scholarship-map-popup-title {
    font-size: 1rem;
    margin: 0 0 0.3rem;
    line-height: 1.25;
}

.scholarship-map-popup-blurb {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
}

.scholarship-map-popup--person .scholarship-map-popup-blurb {
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0.3rem 0 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.scholarship-map-popup-link {
    font-size: 0.75rem;
    color: var(--blue-bright);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.15rem;
}

.scholarship-map-popup--person .scholarship-map-popup-link {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.scholarship-map-popup-link:hover {
    text-decoration: underline;
}

.scholarship-map-popup--person .scholarship-map-popup-place {
    font-size: 0.78rem;
    margin: 0.15rem 0 0.25rem;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 0.75rem;
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.map-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(30, 58, 95, 0.2);
}

.map-context-link {
    border-left: 4px solid var(--gold);
}

.map-load-error {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .map-layout {
        grid-template-columns: 1fr;
    }

    .map-city-panel {
        max-height: 240px;
    }

    .scholarship-map-canvas {
        min-height: 360px;
        height: 50vh;
    }
}



/* =========================================================
   Journal (WordPress) entry points
   ========================================================= */
.sidebar-link.journal-nav-link {
    /* plain menu entry — matches other sidebar links */
    font-weight: 400;
    margin-top: 0;
    box-shadow: none;
    background: transparent;
    border: 1px solid transparent;
}
.sidebar-link.journal-nav-link:hover {
    background: var(--gold-wash);
    border-color: transparent;
    color: var(--gold-deep);
}
.sidebar-link.journal-nav-link i {
    color: inherit;
    opacity: 0.75;
}
.sidebar-link.journal-nav-link.active,
a.sidebar-link.journal-nav-link[aria-current="page"] {
    background: var(--gold-light);
    color: var(--gold-dark);
    border-color: var(--gold);
    font-weight: 600;
}

.journal-footer-link {
    color: var(--gold-deep) !important;
    font-weight: 600;
    border-bottom-color: var(--gold) !important;
}
.journal-footer-link:hover {
    color: var(--text-head) !important;
}

.hub-journal-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.5rem;
    margin: 0;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gold);
    background:
        linear-gradient(135deg, var(--gold-wash) 0%, transparent 45%),
        linear-gradient(225deg, var(--magenta-wash) 0%, var(--blue-mist) 70%);
    box-shadow: 0 2px 10px var(--shadow-color);
}
.hub-journal-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: min(100%, 16rem);
}
.hub-journal-banner-kicker {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold-deep);
}
.hub-journal-banner-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-head);
    line-height: 1.3;
}
.hub-journal-banner-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 36rem;
}
.hub-journal-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    background: var(--blue-primary);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none !important;
    border: 1px solid var(--blue-primary);
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.hub-journal-banner-cta:hover {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    transform: translateY(-1px);
}
.hub-journal-banner-cta i {
    color: var(--gold-pale);
}

.hub-page .site-main-header .hub-quicklink.hub-quicklink-journal {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--gold-pale) 0%, var(--bg-card) 55%);
}
.hub-page .site-main-header .hub-quicklink.hub-quicklink-journal > i {
    color: var(--gold-deep);
    background: var(--gold-wash);
}
.btn-primary.journal-cta {
    background: linear-gradient(135deg, var(--blue-primary) 0%, #2a5080 100%);
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-wash), 0 2px 8px var(--shadow-color);
}
.btn-primary.journal-cta:hover {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
}

/* =========================================================
   Print styles
   ========================================================= */
@media print {
    .site-sidebar, .sidebar-toggle, .back-to-top, .hub-tabs, .theme-toggle, .theme-picker, .theme-picker-fixed, .font-picker, .skip-link { display: none !important; }
    .site-layout { grid-template-columns: 1fr; }
    body { background: #fff !important; color: #000 !important; }
    a { text-decoration: underline; color: #000 !important; }
    .detail-pane, .module-card, .ornate-card, .fact-box, .region-card { box-shadow: none !important; border: 1px solid #ccc !important; }
    img { opacity: 1 !important; }
}

.scholarship-map-popup-travels {
    margin: 0.35rem 0 0.45rem;
    padding: 0.45rem 0.55rem;
    background: rgba(124, 58, 237, 0.06);
    border-radius: 0.5rem;
    font-size: 0.75rem;
}
.scholarship-map-popup-travels-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7C3AED;
    margin-bottom: 0.2rem;
    font-size: 0.62rem;
}
.scholarship-map-popup-path {
    line-height: 1.4;
    color: var(--text-muted);
    max-height: 4.5rem;
    overflow-y: auto;
    word-break: break-word;
}
.scholarship-map-popup-path-count {
    opacity: 0.75;
    white-space: nowrap;
}
.scholarship-map-popup-path-sep {
    color: #7C3AED;
    opacity: 0.75;
    padding: 0 0.12rem;
    white-space: nowrap;
}
.scholarship-map-popup-travels ol {
    margin: 0;
    padding-left: 1.1rem;
}
.scholarship-map-popup-travels li {
    margin: 0.1rem 0;
}
.scholarship-map-popup-travel-years {
    opacity: 0.75;
}


/* Full Preservation Timeline: keep the whole graphic inside the module / detail pane */
.detail-pane .timeline-detail-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.detail-pane .timeline-detail-graphic,
.detail-pane .detail-timeline-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(260px, 40vh);
    object-fit: contain;
    object-position: center;
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-sizing: border-box;
}
.detail-pane .detail-timeline-picture {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
/* Card thumb: 16:9 frame already; cover the illustrated scene without overflow */
.module-card[data-id="timeline"] .module-card-thumb {
    aspect-ratio: 16 / 9;
}
.module-card[data-id="timeline"] .thumb {
    object-fit: cover;
    object-position: center center;
}

.detail-pane .timeline-detail-links a.content-link {
    font-weight: 600;
}
.detail-pane .timeline-detail-links > div {
    line-height: 1.45;
}


/* Note-page figures: properly proportioned 16:9 illustrations */
.note-page figure.ornate-card .article-figure-picture,
.note-page figure.ornate-card picture.article-figure-picture {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-mute);
    overflow: hidden;
}
.note-page figure.ornate-card .article-figure-img,
.note-page figure.ornate-card img.article-figure-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    max-height: none;
}
/* Fallback for plain figure imgs marked 16:9 */
.note-page figure.ornate-card img.w-full.article-figure-img {
    max-height: none;
}

.module-card[data-id="bible-atlantic-colonies"] .thumb,
.module-card[data-id="hampton-court-av"] .thumb {
    object-fit: cover;
    object-position: center center;
}
.detail-pane img.detail-atlantic-img,
.detail-pane img.detail-hampton-img {
    object-fit: cover !important;
    object-position: center center !important;
    max-height: min(280px, 40vh) !important;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-mute);
}

.module-card[data-id="hampton-court-av"] .thumb {
    object-fit: contain;
    object-position: center center;
    background: var(--bg-mute);
}

/* On-page contents index (Hampton Court and similar notes) */
.article-contents-index {
    background: linear-gradient(180deg, var(--gold-wash) 0%, var(--bg-card) 55%);
}
.article-contents-list {
    margin: 0;
    padding-left: 1.15rem;
}
.article-contents-list li {
    margin: 0.15rem 0;
}
.article-contents-list a.content-link {
    font-weight: 600;
}

/* Modular "On this page" panel (Hampton Court and reusable) */
.on-page-panel {
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg, 0.75rem);
    background:
        linear-gradient(135deg, var(--gold-wash) 0%, transparent 42%),
        var(--bg-card);
    box-shadow: 0 2px 12px var(--shadow-color);
    padding: 1rem 1.1rem 1.15rem;
}
.on-page-panel-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.75rem;
}
.on-page-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 768px) {
    .on-page-panel-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 1rem;
        align-items: start;
    }
}
.on-page-module {
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: var(--bg-card);
    padding: 0.85rem 0.95rem 1rem;
    box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
}
.on-page-module-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--blue-pale);
}
.on-page-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--gold-pale);
    color: var(--gold-deep);
    font-size: 0.7rem;
    flex-shrink: 0;
}
.on-page-module-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-head);
}
.on-page-toc {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-head);
}
.on-page-toc li { margin: 0.28rem 0; }
.on-page-toc a,
.on-page-toc a:link,
.on-page-toc a:visited,
.on-page-toc a:hover,
.on-page-toc a:active,
.on-page-toc a:focus {
    color: var(--blue-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
.on-page-toc a:hover,
.on-page-toc a:focus {
    opacity: 0.88;
    text-decoration: none !important;
    border-bottom: none !important;
}
.on-page-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.on-page-related-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    background: var(--bg-mute);
    text-decoration: none;
    color: var(--blue-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.on-page-related-card i {
    color: var(--gold-deep);
    font-size: 0.65rem;
    width: 0.9rem;
    text-align: center;
    flex-shrink: 0;
}
.on-page-related-card:link,
.on-page-related-card:visited,
.on-page-related-card:active,
.on-page-related-card:focus {
    color: var(--blue-primary) !important;
}
.on-page-related-card:hover {
    background: var(--gold-pale);
    border-color: var(--gold);
    box-shadow: 0 1px 4px rgba(30, 58, 95, 0.08);
}


/* Preservation note: PPTX cover thumb + full-slide gallery tiles */
.pptx-download-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 768px) {
    .pptx-download-panel {
        grid-template-columns: minmax(240px, 42%) 1fr;
        align-items: stretch;
    }
}
.pptx-thumb-link {
    position: relative;
    display: block;
    background: var(--bg-mute, #0f172a);
    overflow: hidden;
}
.pptx-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
}
.pptx-thumb-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    background: rgba(15, 23, 42, 0.88);
    color: #f8fafc;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.6rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(212, 175, 55, 0.45);
}
.pptx-thumb-badge i { color: #d4af37; margin-right: 0.3rem; }
.pptx-download-copy { display: flex; flex-direction: column; justify-content: center; }

.slide-gallery-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0b1220;
    overflow: hidden;
}
.slide-gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #0b1220;
}
.module-card[data-id="preservation-holy-bible"] .thumb {
    object-fit: cover;
    object-position: center center;
}


/* ============================================================
   Hub modular redesign (2026-07-21)
   Less listy hero · image-forward Start Here · full module gallery
   ============================================================ */

/* --- Hero action modules (replace dotted text nav) --- */
.hub-page .site-main-header .hub-hero-actions {
    margin-top: 0.85rem;
    padding-top: 0;
    border-top: none;
    display: block;
}

.hub-page .hub-hero-action-modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

@media (min-width: 560px) {
    .hub-page .hub-hero-action-modules {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .hub-page .hub-hero-action-modules {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 36rem;
    }
}

.hub-page .hub-action-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    min-height: 4.25rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.hub-page .hub-action-tile:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 16px -6px var(--shadow-color);
    transform: translateY(-1px);
    text-decoration: none;
}

.hub-page .hub-action-tile > i {
    color: var(--gold);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.hub-page .hub-action-tile-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--head);
    line-height: 1.2;
}

.hub-page .hub-action-tile-meta {
    font-size: 0.6875rem;
    color: var(--muted);
    line-height: 1.25;
}

.hub-page .hub-action-tile-primary {
    border-color: rgba(212, 175, 55, 0.45);
    background: linear-gradient(160deg, var(--gold-wash), var(--bg-card) 70%);
}

.hub-page .hub-action-tile-journal {
    border-color: rgba(2, 132, 200, 0.28);
}

/* Hide legacy list lead if present */
.hub-page .site-main-header .hub-hero-actions-lead,
.hub-page .site-main-header .hub-hero-actions-buttons {
    display: none;
}

/* --- Spotlight modular strip (Start here) --- */
.hub-page .hub-spotlight {
    width: 100%;
}

.hub-page .hub-spotlight-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin-bottom: 0.65rem;
}

.hub-page .hub-spotlight-title {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold);
}

.hub-page .hub-spotlight-sub {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.hub-page .hub-hero-quicklinks-daily-host {
    color: var(--subtle, var(--muted));
}

.hub-page .hub-spotlight-grid,
.hub-page .site-main-header .hub-hero-quicklinks-grid.hub-spotlight-grid,
.hub-page .site-main-header .hub-spotlight-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem !important;
}

@media (min-width: 720px) {
    .hub-page .hub-spotlight-grid,
    .hub-page .site-main-header .hub-spotlight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem !important;
    }
}

@media (min-width: 1100px) {
    .hub-page .hub-spotlight-grid,
    .hub-page .site-main-header .hub-spotlight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem !important;
    }
}

.hub-page .hub-spot-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hub-page .hub-spot-card:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 22px -10px var(--shadow-color), 0 0 0 1px var(--magenta-glow);
    transform: translateY(-2px);
    text-decoration: none;
}

.hub-page .hub-spot-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-mute);
    overflow: hidden;
}

.hub-page .hub-spot-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.hub-page .hub-spot-card:hover .hub-spot-media img {
    transform: scale(1.05);
}

.hub-page .hub-spot-media-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(2, 132, 200, 0.18), rgba(212, 175, 55, 0.12));
}

.hub-page .hub-spot-media-icon i {
    font-size: 1.55rem;
    color: var(--gold);
}

.hub-page .hub-spot-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.45rem 0.55rem 0.55rem;
    min-height: 3.2rem;
}

.hub-page .hub-spot-kicker {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #0284C8;
}

.hub-page .hub-spot-title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--head);
}

.hub-page .hub-spot-desc {
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-page .hub-spot-card-journal .hub-spot-media-icon {
    background: linear-gradient(145deg, rgba(2, 132, 200, 0.28), rgba(15, 23, 42, 0.06));
}

/* Compact lower band */
.hub-page .site-main-header .hub-hero-lower {
    gap: 0.75rem;
    padding-top: 0.35rem;
}

/* --- Full-width module gallery --- */
.hub-page .hub-explore-stage {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.hub-page .explore-modules-lead {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    max-width: 36rem;
}

.hub-page #modules-grid.hub-modules-gallery,
.hub-page #modules-grid.hub-grid.hub-modules-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0.25rem;
}

@media (min-width: 640px) {
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.55rem;
    }
}

@media (min-width: 900px) {
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.6rem;
    }
}

@media (min-width: 1100px) {
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.65rem;
    }
}

@media (min-width: 1400px) {
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.65rem;
    }
}

/* Thumbnail-first module cards on hub (~33% smaller again) */
.hub-page .module-card {
    border-radius: 0.65rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.hub-page .module-card-thumb {
    aspect-ratio: 16 / 9;
}

.hub-page .module-card .card-body {
    padding: 0.4rem 0.45rem 0.45rem;
}

.hub-page .module-card .card-title {
    font-size: 0.75rem;
    line-height: 1.22;
    min-height: 2.35em;
    -webkit-line-clamp: 2;
}

.hub-page .module-card .card-blurb {
    font-size: 0.68rem;
    line-height: 1.25;
    margin-top: 0.15rem;
    min-height: 0;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-page .module-card .card-foot {
    margin-top: 0.25rem;
    padding-top: 0.2rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hub-page .module-card .card-open-label {
    color: #0284C8;
}

.hub-page .module-card:hover .card-open-label {
    color: var(--gold);
}

/* Detail stage under the gallery */
.hub-page .hub-detail-stage {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.hub-page .hub-detail-pane.detail-pane,
.hub-page #detail-pane.hub-detail-pane {
    min-height: 320px;
    max-height: min(720px, 78vh);
}

/* Module detail image: dominant, fully visible, not cropped */
.hub-page .hub-detail-pane .detail-module-picture,
.hub-page .hub-detail-pane .detail-timeline-picture {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-mute);
    overflow: hidden;
    border-radius: var(--radius-md);
    margin-bottom: 0.65rem;
}
.hub-page .hub-detail-pane .detail-module-img,
.hub-page .hub-detail-pane .detail-timeline-img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center;
}

/* Detail pane bottom action menu: more dominant */
.hub-page .hub-detail-pane .detail-actions {
    padding-top: 0.85rem;
    margin-top: 0.85rem;
}
.hub-page .hub-detail-pane .detail-actions button,
.hub-page .hub-detail-pane .detail-actions a {
    font-size: 0.8rem !important;
    padding: 0.45rem 0.9rem !important;
    border-radius: var(--radius-md);
    min-height: 2rem;
}
.hub-page .hub-detail-pane .detail-actions i {
    font-size: 0.75rem !important;
}

/* When a module is selected, gently scroll detail into view is handled by JS if needed */

/* Tighter hero copy so gallery rises earlier */
.hub-page .site-main-header .hero-intro {
    -webkit-line-clamp: 2;
    max-width: 38rem;
}

.hub-page .site-main-header .hub-hero-download {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
}

@media (max-width: 639px) {
    .hub-page .hub-spot-desc {
        display: none;
    }
    .hub-page .hub-spot-meta {
        min-height: 2.6rem;
        padding: 0.45rem 0.55rem 0.55rem;
    }
    .hub-page .module-card .card-blurb {
        display: none;
    }
    .hub-page .module-card .card-title {
        min-height: 0;
        font-size: 0.875rem;
    }
}


/* Force hub thumbs visible even if Tailwind preflight sets img{height:auto} */
.hub-page .module-card .thumb,
.hub-page .hub-spot-media img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
}
.hub-page .module-card-thumb,
.hub-page .hub-spot-media {
    position: relative !important;
    overflow: hidden !important;
    background: var(--bg-mute);
    min-height: 3.5rem;
}
.hub-page .module-card-thumb {
    aspect-ratio: 16 / 9 !important;
}
.hub-page .hub-spot-media {
    aspect-ratio: 16 / 9 !important;
    max-height: 7.5rem;
}
.hub-page .hub-spot-meta {
    min-height: 2.6rem !important;
    padding: 0.35rem 0.45rem 0.4rem !important;
}
.hub-page .hub-spot-title {
    font-size: 0.72rem !important;
}
.hub-page .hub-spot-desc {
    font-size: 0.65rem !important;
}
.hub-page .hub-spot-card {
    border-radius: 0.65rem;
}
.hub-page .module-card .tag {
    font-size: 0.6rem !important;
    padding: 1px 6px !important;
}



/* Hero graphic: top edge locked to History of Bible Transmission badge */
@media (min-width: 900px) {
    .hub-page .site-main-header .hub-hero-text-col,
    .hub-page .site-main-header .hub-hero-figure-col {
        align-self: start;
    }
    .hub-page .site-main-header .hub-hero-figure-col {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .hub-page .site-main-header .hub-hero-eyebrow-wrap {
        margin-top: 0 !important;
    }
    .hub-page .hub-hero-figure {
        top: 0 !important;
    }
}


/* Brand mark: no rose/magenta wash on top-left logo box */
.sidebar-brand,
.site-sidebar .sidebar-brand {
    background: transparent !important;
    background-image: none !important;
    border-bottom-color: var(--border-color) !important;
    box-shadow: none;
}
.sidebar-brand img,
.sidebar-brand-mark,
.hub-page .hub-title-mark {
    filter: none !important;
}
html[data-theme="dark"] .sidebar-brand img,
html[data-theme="dark"] .sidebar-brand-mark,
html[data-theme="dark"] .hub-page .hub-title-mark {
    opacity: 1 !important;
    filter: none !important;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .sidebar-brand img,
    html:not([data-theme]) .sidebar-brand-mark,
    html:not([data-theme]) .hub-page .hub-title-mark {
        opacity: 1 !important;
        filter: none !important;
    }
}


/* ---- Site-wide second PPTX CTA (Preservation of the Holy Bible) ---- */
/* Sidebar PPTX + Journal: same look as ordinary menu entries */
.site-sidebar .sidebar-nav a.sidebar-pptx-link,
.site-sidebar .sidebar-nav a.sidebar-pptx-masoretes,
.site-sidebar .sidebar-nav a.sidebar-pptx-jesus,
.site-sidebar .sidebar-nav a.journal-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 0.6rem !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    color: var(--text-head) !important;
    text-decoration: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    transform: none !important;
}
.site-sidebar .sidebar-nav a.sidebar-pptx-link:hover,
.site-sidebar .sidebar-nav a.sidebar-pptx-masoretes:hover,
.site-sidebar .sidebar-nav a.sidebar-pptx-jesus:hover,
.site-sidebar .sidebar-nav a.journal-nav-link:hover {
    background: var(--gold-wash) !important;
    background-image: none !important;
    color: var(--gold-deep) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.site-sidebar .sidebar-nav a.sidebar-pptx-link i,
.site-sidebar .sidebar-nav a.sidebar-pptx-masoretes i,
.site-sidebar .sidebar-nav a.sidebar-pptx-jesus i,
.site-sidebar .sidebar-nav a.journal-nav-link i {
    width: 14px !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    opacity: 0.75 !important;
    color: inherit !important;
}

.site-pptx-cta {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.7rem 0.95rem;
    border-radius: 0.85rem;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 55%, #16324f 100%);
    border: 1px solid rgba(212, 175, 55, 0.65);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(212, 175, 55, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-pptx-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.34), 0 0 0 1px rgba(212, 175, 55, 0.35);
    color: #fff;
    text-decoration: none;
}
.site-pptx-cta > i {
    font-size: 1.35rem;
    color: #f0c14b;
    flex-shrink: 0;
}
.site-pptx-cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.site-pptx-cta-label {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.site-pptx-cta-sub {
    font-size: 0.65rem;
    opacity: 0.88;
    line-height: 1.25;
}
.footer-pptx-link i {
    color: var(--gold);
    margin-right: 0.2rem;
}
@media (max-width: 640px) {
    .site-pptx-cta {
        right: 0.65rem;
        bottom: 0.65rem;
        padding: 0.6rem 0.75rem;
    }
    .site-pptx-cta-sub {
        display: none;
    }
}
/* Keep clear of mobile sidebar toggle (bottom-left) */
@media (max-width: 1024px) {
    .site-pptx-cta {
        bottom: 4.25rem;
    }
}


/* Masoretes first PPTX pill — solid gold border */
.hub-page .hub-hero-download.hub-pptx-masoretes,
.hub-page a.hub-pptx-masoretes {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35);
}
.hub-page .hub-hero-download.hub-pptx-masoretes:hover,
.hub-page a.hub-pptx-masoretes:hover {
    border-color: var(--gold-deep, var(--gold)) !important;
    background: var(--gold-pale);
}


/* Two stacked PPTX CTAs (Masoretes + Bible Since Jesus) */
.site-pptx-cta-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 55;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: min(44rem, calc(100vw - 2rem));
}
.site-pptx-cta-stack .site-pptx-cta {
    position: static;
    right: auto;
    bottom: auto;
    max-width: none;
    width: 100%;
}

.site-pptx-cta-masoretes {
    border-color: rgba(212, 175, 55, 0.85) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(212, 175, 55, 0.35);
}
@media (max-width: 640px) {
    .site-pptx-cta-stack {
        right: 0.65rem;
        bottom: 0.65rem;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .hub-page .hub-hero-cta-row {
        gap: 0.45rem;
    }
    .hub-page .hub-hero-cta-row .hub-hero-download {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
}
@media (max-width: 1024px) {
    .site-pptx-cta-stack {
        bottom: 4.25rem;
    }
}


/* Hub: conviction + PPTX pills in one horizontal row */
.hub-page .hub-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.65rem;
    margin-top: 0.65rem;
    max-width: 100%;
}
.hub-page .hub-hero-cta-row .hub-confessional {
    width: auto;
    max-width: none;
    margin-top: 0;
}
.hub-page .hub-hero-cta-row .hub-hero-download {
    margin-top: 0;
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Floating PPTX stack not needed on hub hero */
.hub-page .site-pptx-cta-stack {
    display: none !important;
}


/* Bring hub hero graphic closer to the copy */
@media (min-width: 900px) {
    .hub-page .site-main-header .hub-hero-grid {
        column-gap: 1rem !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(15rem, 0.95fr) !important;
    }
    .hub-page .site-main-header .hub-hero-figure-col {
        justify-content: flex-start !important;
        padding-left: 0;
        margin-left: 0;
    }
    .hub-page .hub-hero-figure {
        max-width: none !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }
}
@media (min-width: 1100px) {
    .hub-page .site-main-header .hub-hero-grid {
        column-gap: 1.15rem !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(16rem, 0.92fr) !important;
    }
}


/* level-with-history-badge: graphic top flush with History of Bible Transmission tab */
@media (min-width: 900px) {
    .hub-page .site-main-header .hub-hero-text-col,
    .hub-page .site-main-header .hub-hero-figure-col {
        align-self: start;
    }
    .hub-page .site-main-header .hub-hero-eyebrow-wrap {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .hub-page .site-main-header .hub-hero-figure-col {
        margin-top: 0; /* JS may set exact offset to match badge */
        padding-top: 0 !important;
    }
    .hub-page .hub-hero-figure {
        top: 0 !important;
        margin-top: 0 !important;
    }
    .hub-page .hub-hero-figure img {
        /* Match base framing: full elderly man visible */
        object-position: 12% 48% !important;
    }
}


/* PPTX links sit at bottom of the primary sidebar menu (no extra spacing) */
.site-sidebar .sidebar-nav > .sidebar-pptx-link,
.site-sidebar .sidebar-nav > a.sidebar-pptx-masoretes,
.site-sidebar .sidebar-nav > a.sidebar-pptx-jesus {
    margin-top: 0;
}


/* PPTX floating/hero labels: normal weight */
.hub-page .hub-hero-cta-row .hub-hero-download,
.hub-page .hub-hero-cta-row .hub-hero-download span,
.site-pptx-cta-label {
    font-weight: 400 !important;
}


/* =========================================================
   Sitewide note heroes: fill image box, never stretch
   (undo letterboxing / max-height crop damage)
   ========================================================= */
.note-page figure.ornate-card {
    overflow: hidden;
}
.note-page figure.ornate-card > picture,
.note-page figure.ornate-card > .article-figure-picture,
.note-page figure.ornate-card picture.article-figure-picture {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-mute);
    overflow: hidden;
    line-height: 0;
}
.note-page figure.ornate-card > picture img,
.note-page figure.ornate-card img.article-figure-img,
.note-page figure.ornate-card img.w-full,
.note-page figure.ornate-card > img,
.note-page figure.hero-figure-full img,
.note-page figure.ornate-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
}
/* Picture must size the box; img fills it */
.note-page figure.ornate-card > picture {
    height: auto;
}
.note-page figure.ornate-card > picture img {
    min-height: 100%;
}

/* Topic link cards (medieval studies and reusable) */
.topic-link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .topic-link-grid {
        grid-template-columns: 1fr 1fr;
    }
}
a.topic-link-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.topic-link-card:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.topic-link-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-wash) 100%);
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: var(--gold-dark);
    font-size: 1rem;
}
a.topic-link-card:hover .topic-link-icon {
    background: var(--gold-pale);
    border-color: var(--gold);
}
.topic-link-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-head);
    line-height: 1.25;
    margin-bottom: 0.25rem;
}
a.topic-link-card:hover .topic-link-title {
    color: var(--gold-deep, var(--gold-dark));
}
.topic-link-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted);
}
.topic-link-desc a.content-link {
    font-weight: 600;
}

/* Nested fact strips inside sections: cleaner spacing */
.note-page .site-main-body section .fact-strip {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Linked fact-boxes / info-cards (blue “buttons” that navigate) */
.fact-box.is-linked-box,
.info-card.is-linked-box {
    cursor: pointer;
}
.fact-box.is-linked-box:hover,
.info-card.is-linked-box:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.fact-box.is-linked-box:focus-visible,
.info-card.is-linked-box:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Hub front page: theme/font chip sits near top hero (between badge and graphic) */
.hub-page .theme-picker-fixed:not([style*="left"]) {
    /* JS sets left/top; fallback before JS runs */
    left: auto;
    right: max(0.75rem, calc((100vw - min(72rem, 100%)) / 2 + 0.5rem));
    top: 0.65rem;
    bottom: auto;
}
.hub-page .theme-picker-fixed.theme-picker-hub-placed {
    bottom: auto;
}
.hub-page .theme-picker-fixed.is-minimized {
    box-shadow: 0 4px 14px var(--shadow-color);
}
@media (max-width: 1024px) {
    .hub-page .theme-picker-fixed:not([style*="left"]) {
        right: 0.5rem;
        top: 0.5rem;
        left: auto;
    }
}

/* Dragging must stay available when minimized or hub-placed */
.theme-picker-fixed.theme-picker-draggable {
    touch-action: none;
    cursor: grab;
    user-select: none;
}
.theme-picker-fixed.theme-picker-draggable.is-minimized {
    cursor: grab;
}
.theme-picker-fixed.theme-picker-draggable.is-minimized .theme-panel-chrome {
    cursor: grab;
}
.theme-picker-fixed.theme-picker-draggable .theme-panel-chrome-title {
    cursor: grab;
    flex: 1 1 auto;
    min-width: 2.5rem;
    /* Larger hit target for drag when chrome is compact */
    padding: 0.2rem 0.15rem;
}
.theme-picker-fixed.theme-picker-draggable button,
.theme-picker-fixed.theme-picker-draggable a,
.theme-picker-fixed.theme-picker-draggable input,
.theme-picker-fixed.theme-picker-draggable select {
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}
.theme-picker-fixed.is-dragging {
    cursor: grabbing !important;
    opacity: 0.97;
    z-index: 200;
}
.theme-picker-fixed.theme-picker-hub-placed {
    /* left/top set by JS — never pin with right/bottom after drag setup */
    right: auto !important;
    bottom: auto !important;
}


/* ── Categorized Topics menu ───────────────────────────────────────── */
.topics-section-categorized {
    margin-bottom: 0.75rem;
}
.topics-section-categorized > .sidebar-label {
    margin-bottom: 0.4rem;
}
.topics-cat-tools {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.5rem 0.1rem;
    flex-wrap: wrap;
}
.topics-tool-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.8;
    line-height: 1.2;
}
.topics-tool-btn:hover {
    color: var(--gold-deep);
    opacity: 1;
}
.topics-tool-sep {
    color: var(--text-muted);
    opacity: 0.45;
    font-size: 0.625rem;
}
.sidebar-nav.topics-categorized {
    gap: 0.45rem;
}
.topics-cat + .topics-cat {
    margin-top: 0.2rem;
}
.topics-cat {
    margin: 0 0 0.15rem 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
/* Category headers: same visual weight as sidebar-label, not big menu buttons */
.topics-cat-toggle,
.hub-cat-toggle,
.sidebar-label-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.48rem 0.4rem;
    margin: 0.1rem 0;
    border: none;
    border-radius: 0.25rem;
    background: transparent !important;
    cursor: pointer;
    font: inherit;
    color: var(--text-muted);
    text-align: left;
    line-height: 1.25;
    min-height: 0;
    box-shadow: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.hub-cat-toggle {
    padding: 0.35rem 0.4rem 0.35rem 0.2rem;
    margin-bottom: 0.25rem;
}

.hub-cat-toggle .sidebar-label,
.sidebar-label-toggle .sidebar-label {
    margin-bottom: 0 !important;
    cursor: pointer;
}

.hub-cat-chevron {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.15s ease;
}

.hub-cat-toggle:hover .hub-cat-chevron,
.sidebar-label-toggle:hover .hub-cat-chevron {
    color: var(--text-heading, #1e3a5f);
}

.hub-sidebar-section.is-collapsed .hub-cat-chevron,
.sidebar-section-collapsible.is-collapsed .hub-cat-chevron {
    transform: rotate(-90deg);
}

.hub-sidebar-section.is-collapsed .hub-sidebar-nav,
.sidebar-section-collapsible.is-collapsed .sidebar-nav {
    display: none;
}
.topics-cat-toggle:hover {
    background: transparent !important;
    border: none;
    color: var(--gold-deep);
}
.topics-cat-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: inherit;
    line-height: 1.25;
}
.topics-cat-toggle:hover .topics-cat-label {
    color: var(--gold-deep);
}
/* Counts removed — hide any leftover markup */
.topics-cat-count,
.topics-cat-meta .topics-cat-count {
    display: none !important;
}
.topics-cat-meta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.25rem;
}
.topics-cat-chevron {
    font-size: 0.5rem;
    opacity: 0.55;
    transition: transform 0.15s ease;
    color: var(--text-muted);
}
.topics-cat-toggle:hover .topics-cat-chevron {
    opacity: 0.85;
    color: var(--gold-deep);
}
.topics-cat.is-collapsed .topics-cat-chevron {
    transform: rotate(-90deg);
}
.topics-cat-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 0 0.2rem 0;
}
.topics-cat.is-collapsed .topics-cat-links {
    display: none;
}



/* Place parent groups (e.g. Cambridge -> Tyndale House), collapsible
   Cambridge label flush with sibling place links; chevron in left gutter. */
.topics-place-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}
.topics-place-row {
    position: relative;
    display: block;
    min-width: 0;
}
.topics-place-toggle {
    position: absolute;
    left: 0.05rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
}
.topics-place-toggle:hover {
    background: var(--gold-wash);
    color: var(--gold-deep);
}
.topics-place-chevron {
    font-size: 0.6rem;
    transition: transform 0.15s ease;
    display: inline-block;
}
.topics-place-group.is-collapsed .topics-place-chevron {
    transform: rotate(-90deg);
}
.topics-place-group:not(.is-collapsed) .topics-place-chevron {
    transform: rotate(0deg);
}
/* Same padding/type as every other Places sublink */
.topics-cat-links .topics-place-row > .topics-place-parent.sidebar-sublink,
.topics-place-row > .topics-place-parent.sidebar-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.28rem 0.45rem 0.28rem 1.15rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}
.topics-place-children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 0 0.1rem 0;
    padding: 0;
    border-left: 1px solid var(--border, rgba(2, 132, 199, 0.18));
    margin-left: 1.15rem;
}
.topics-place-group.is-collapsed > .topics-place-children {
    display: none;
}
.topics-cat-links .topics-place-child.sidebar-sublink,
.topics-place-children .sidebar-link.sidebar-sublink {
    padding-left: 1.15rem !important;
    font-size: 0.78rem;
    opacity: 0.95;
}

/* Topic links: match normal sidebar sublink scale */
.topics-cat-links .sidebar-link.sidebar-sublink,
.sidebar-nav.topics-categorized .sidebar-sublink {
    padding: 0.28rem 0.45rem 0.28rem 1.15rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 400;
    border-radius: var(--radius-sm);
    /* default: no gold plate */
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
}
.topics-cat-links .sidebar-sublink:hover {
    background: var(--gold-wash);
    color: var(--gold-deep);
    border-color: transparent;
    font-weight: 400;
}
/*
 * Only ONE active topic gets the gold highlighter.
 * Open category headers and non-active links stay plain.
 */
.topics-cat:not(.is-collapsed) .topics-cat-label {
    color: var(--text-muted);
    font-weight: 700;
}
/* Topics: no sticky .active plate — highlight only on hover (one item at a time) */
.sidebar-nav.topics-categorized .sidebar-sublink.active,
.topics-cat-links .sidebar-sublink.active,
.topics-cat-links .sidebar-link.active,
.sidebar-nav.topics-categorized .sidebar-link.active {
    background: transparent !important;
    color: var(--muted) !important;
    border-color: transparent !important;
    font-weight: 400 !important;
}
.topics-cat-links .sidebar-sublink:hover,
.topics-cat-links .sidebar-link.sidebar-sublink:hover,
.sidebar-nav.topics-categorized .sidebar-sublink:hover {
    background: var(--gold-wash) !important;
    color: var(--gold-deep) !important;
    border-color: transparent !important;
    font-weight: 400 !important;
}
/* Never gold-plate category toggles as if they were the active topic */
.topics-cat-toggle.active,
.topics-cat-toggle:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}
.topics-cat-toggle:focus-visible {
    outline: 1px solid rgba(212, 175, 55, 0.45);
    outline-offset: 1px;
}

/* Learning Course hub shortcut */
.hub-page .hub-action-tile-course {
    border-color: rgba(212, 175, 55, 0.35);
}
.hub-page .hub-action-tile-course > i {
    color: var(--gold-deep);
}

/* Hebrew & Greek Bibles hub shortcut */
.hub-page .hub-action-tile-hebrew-greek {
    border-color: rgba(212, 175, 55, 0.35);
}
.hub-page .hub-action-tile-hebrew-greek > i {
    color: var(--gold-deep);
}

/* Homepage H1 brand + subtitle (SEO: visible "The Masoretes") */
.hub-page .hub-hero-title-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--text-muted);
}

/* Kill general sidebar-link.active styles inside Topics menu */
.topics-section-categorized .sidebar-link.active,
.topics-categorized .sidebar-link.active {
    background: transparent !important;
    color: var(--muted) !important;
    border-color: transparent !important;
    font-weight: 400 !important;
}
.topics-section-categorized .sidebar-link:hover,
.topics-categorized .sidebar-link.sidebar-sublink:hover {
    background: var(--gold-wash) !important;
    color: var(--gold-deep) !important;
}



/* Custom RGB colour picker in theme panel */
.theme-rgb-picker {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}
.theme-rgb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    width: 100%;
    box-sizing: border-box;
}
.theme-rgb-color {
    -webkit-appearance: none;
    appearance: none;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.theme-rgb-color::-webkit-color-swatch-wrapper {
    padding: 2px;
}
.theme-rgb-color::-webkit-color-swatch {
    border: none;
    border-radius: 1px;
}
.theme-rgb-color::-moz-color-swatch {
    border: none;
    border-radius: 1px;
}
.theme-rgb-preview {
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 2px;
    border: 1.5px solid var(--border-color);
    flex: 0 0 auto;
    box-sizing: border-box;
}
.theme-rgb-field {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-head);
    flex: 1 1 auto;
    min-width: 3.6rem;
    max-width: 4.6rem;
}
.theme-rgb-field span {
    flex: 0 0 auto;
    min-width: 0.7rem;
    color: var(--text-muted);
    font-size: 0.62rem;
}
.theme-rgb-field input[type="number"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 2.6rem;
    max-width: 3.4rem;
    height: 1.55rem;
    min-height: 1.55rem;
    padding: 0.2rem 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--bg-body, #fff);
    color: var(--text-main, #1e293b) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
    text-align: center;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
/* Hide spinners so 3-digit values (255) fit cleanly */
.theme-rgb-field input[type="number"]::-webkit-outer-spin-button,
.theme-rgb-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    height: 0;
}
.theme-rgb-field input[type="number"]:focus {
    outline: none;
    border-color: var(--gold-deep, #C5A028);
    box-shadow: 0 0 0 2px var(--gold-wash, rgba(212, 175, 55, 0.15));
    color: var(--text-main, #1e293b) !important;
    background: var(--bg-card, #fff);
}
.theme-picker-fixed .theme-rgb-picker {
    min-width: 0;
}
.theme-picker-fixed .theme-rgb-row {
    gap: 0.32rem;
}
.theme-picker-btn[data-theme-set="custom"] .theme-swatch {
    background: #0284C8;
    background-image: linear-gradient(135deg, #f43f5e 0%, #eab308 45%, #0284C8 100%);
}
html[data-theme="custom"] {
    color-scheme: light;
}
.theme-picker-fixed.is-minimized > .theme-rgb-picker {
    display: none !important;
}
.theme-picker-btn[data-theme-set="custom"] .theme-swatch {
    background: #0284C8;
    background-image: linear-gradient(135deg, #f43f5e 0%, #eab308 45%, #0284C8 100%);
}
html[data-theme="custom"] {
    color-scheme: light;
}
.theme-picker-fixed.is-minimized > .theme-rgb-picker {
    display: none !important;
}

/* ---------- Appearance Slide Rules (Thumbnail Scale & Margins) ---------- */
.theme-picker-fixed.is-minimized > .slide-rule-picker {
    display: none !important;
}

.slide-rule-picker {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--border-color);
}
.slide-rule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.15rem;
}
.slide-rule-label {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.slide-rule-badge {
    font-size: 0.52rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-weight: 600;
    padding: 0.05rem 0.25rem;
    border-radius: 0.2rem;
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
    color: var(--gold-dark);
}
.slide-rule-track-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.slide-rule-input {
    flex: 1 1 auto;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--gold);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.slide-rule-input::-webkit-slider-runnable-track {
    height: 0.35rem;
    border-radius: 0.2rem;
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
}
.slide-rule-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--blue-primary);
    margin-top: -0.22rem;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.slide-rule-input::-moz-range-track {
    height: 0.35rem;
    border-radius: 0.2rem;
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
}
.slide-rule-input::-moz-range-thumb {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--blue-primary);
    cursor: grab;
}
.slide-rule-reset-btn {
    font-size: 0.48rem;
    padding: 0.08rem 0.25rem;
    border-radius: 0.2rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    font-weight: 600;
}
.slide-rule-reset-btn:hover {
    background: var(--gold-wash);
    border-color: var(--gold);
    color: var(--gold-dark);
}

/* Dynamic Reading Margins & Width */
.site-main-body.max-w-4xl,
.site-main-header,
.note-page .site-main-body,
.note-page .site-main-header {
    max-width: var(--content-max-width, 56rem) !important;
    transition: max-width 100ms ease-out;
}



/* Theme/font selector size + one-line colours (20260804picker2) */
.theme-picker-btn,
.theme-picker-fixed .theme-picker-btn,
.site-sidebar .theme-picker-btn,
.theme-picker-options .theme-picker-btn {
    border-radius: 2px !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
}
.theme-picker-btn .theme-swatch,
.theme-picker-fixed .theme-picker-btn .theme-swatch,
.theme-picker-options .theme-swatch {
    border-radius: 2px !important;
}
.theme-picker-options,
.theme-picker-fixed .theme-picker-options {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
    align-items: center;
}
.theme-picker-fixed {
    width: min(20.5rem, calc(100vw - 1rem)) !important;
}
.theme-picker-btn[data-theme-set="yellow"] .theme-swatch {
    box-shadow: inset 0 0 0 0.5px var(--blue-border, #BAE6FD) !important;
}
.theme-picker-fixed .font-picker-btn {
    font-size: 0.58rem !important;
    padding: 0.18rem 0.2rem !important;
    min-height: 1.65rem;
}
@media (max-width: 640px) {
    .theme-picker-fixed {
        width: min(18.5rem, calc(100vw - 0.7rem)) !important;
    }
    .theme-picker-btn,
    .theme-picker-fixed .theme-picker-btn {
        width: 1.05rem !important;
        height: 1.05rem !important;
    }
}

/* Topics: single alphabetical list (no category groups) */
.sidebar-nav.topics-alpha {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    padding-bottom: 0.5rem;
}
.sidebar-nav.topics-alpha .sidebar-link.sidebar-sublink {
    padding: 0.28rem 0.45rem 0.28rem 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 400;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
}
.sidebar-nav.topics-alpha .sidebar-link.sidebar-sublink:hover {
    background: var(--gold-wash) !important;
    color: var(--gold-deep) !important;
    border-color: transparent !important;
}
.sidebar-nav.topics-alpha .sidebar-link.sidebar-sublink.active {
    background: var(--gold-wash);
    color: var(--gold-deep);
    border-color: transparent;
    font-weight: 600;
}
/* Hide leftover category chrome if HTML still ships it before JS runs */
.topics-cat-tools { display: none !important; }


/* Circular brand logo + favicon display consistency */
.sidebar-brand img,
.sidebar-brand-mark,
.hub-page .hub-title-mark,
img.sidebar-brand-mark,
img.hub-title-mark {
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1;
}
/* brand-circular-20260729 */


/* Floating panel: font select full width */
.theme-picker-fixed .font-picker {
    width: 100%;
}
.theme-picker-fixed .font-picker-select {
    width: 100%;
    pointer-events: auto;
}
.theme-picker-fixed.is-dragging .font-picker-select {
    pointer-events: none;
}
/* font-picker-select-menu 202608 */


/* Font size — scrolling select (10–30 px) */
.font-size-picker-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    background: var(--bg-mute);
    color: var(--text-head);
    font-size: 0.72rem;
    line-height: 1.3;
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: menulist;
}
.font-size-picker-select:hover {
    border-color: var(--gold);
    background: var(--gold-wash);
}
.font-size-picker-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}
.font-size-picker-options {
    display: none !important;
}
.font-size-picker-btn {
    display: none !important;
}
.theme-picker-fixed .font-size-picker-select {
    width: 100%;
    pointer-events: auto;
}
.theme-picker-fixed.is-dragging .font-size-picker-select {
    pointer-events: none;
}
/* font-size-select-30 20260810 */


/* === Size menu = same scrolling select as Font (force) === */
.theme-picker-fixed .font-size-picker-options,
.font-size-picker-options {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.theme-picker-fixed .font-size-picker-btn,
.font-size-picker-btn {
    display: none !important;
}
.theme-picker-fixed .font-size-picker .font-picker-select,
.theme-picker-fixed .font-size-picker-select,
.font-size-picker-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}
/* font-size-same-scroll-menu 20260810b */


/* =========================================================
   Educational Videos library
   ========================================================= */
.edu-videos-page .edu-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82em;
    background: var(--bg-soft);
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 0.08em 0.35em;
}
.edu-videos-page .edu-flash {
    border-left: 4px solid var(--blue-bright);
    border-radius: 0.65rem;
    font-size: 0.92rem;
}
.edu-videos-page .edu-flash-ok {
    background: var(--blue-ghost);
    color: var(--text-main);
}
.edu-videos-page .edu-flash-err {
    border-left-color: #b45309;
    background: #fff7ed;
    color: #7c2d12;
}

/* Manage shell */
.edu-videos-page .edu-manage-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.edu-videos-page .edu-manage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    padding-bottom: 0.15rem;
}
.edu-videos-page .edu-manage-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.edu-videos-page .edu-manage-title {
    margin: 0 0 0.3rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-head);
    line-height: 1.25;
}
.edu-videos-page .edu-manage-sub {
    margin: 0;
    max-width: 36rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.edu-videos-page .edu-manage-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.edu-videos-page .edu-btn-sm {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    border-radius: 999px !important;
}
.edu-videos-page .edu-inline-form { display: inline; margin: 0; }

/* Login */
.edu-videos-page .edu-login-card {
    max-width: 26rem;
    margin: 0.25rem auto 0;
    padding: 1.5rem 1.35rem 1.35rem;
    text-align: center;
    background: var(--bg-card);
}
.edu-videos-page .edu-login-icon {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-ghost);
    color: var(--blue-primary);
    font-size: 1rem;
    border: 1px solid var(--blue-border);
}
.edu-videos-page .edu-login-title {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-head);
}
.edu-videos-page .edu-login-help {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.edu-videos-page .edu-login-form { text-align: left; }
.edu-videos-page .edu-login-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.edu-videos-page .edu-login-row .edu-input {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Cards */
.edu-videos-page .edu-upload-card,
.edu-videos-page .edu-library-card {
    background: var(--bg-card);
    padding: 1.1rem 1.15rem 1.15rem;
}
.edu-videos-page .edu-card-head {
    margin-bottom: 0.9rem;
}
.edu-videos-page .edu-card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.edu-videos-page .edu-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-head);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.edu-videos-page .edu-card-title i {
    color: var(--blue-bright);
    font-size: 0.95rem;
}
.edu-videos-page .edu-card-help {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.edu-videos-page .edu-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--blue-ghost);
    border: 1px solid var(--blue-border);
    color: var(--blue-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

/* Fields */
.edu-videos-page .edu-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.28rem;
}
.edu-videos-page .edu-input,
.edu-videos-page .edu-textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-body);
    color: var(--text-main);
    padding: 0.5rem 0.7rem;
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edu-videos-page .edu-input:focus,
.edu-videos-page .edu-textarea:focus {
    outline: none;
    border-color: var(--blue-soft);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.edu-videos-page .edu-textarea {
    resize: vertical;
    min-height: 2.4rem;
}
.edu-videos-page .edu-field { margin-bottom: 0.75rem; }
.edu-videos-page .edu-field-last { margin-bottom: 0; }
.edu-videos-page .edu-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
@media (min-width: 700px) {
    .edu-videos-page .edu-field-grid { grid-template-columns: 1.25fr 0.85fr; }
}

/* File chooser */
.edu-videos-page .edu-file-drop {
    position: relative;
    margin-bottom: 0.85rem;
}
.edu-videos-page .edu-input-file-hidden {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.edu-videos-page .edu-file-drop-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 7.5rem;
    padding: 1.1rem 1rem;
    border: 1.5px dashed var(--blue-border);
    border-radius: 0.75rem;
    background: var(--blue-ghost);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.edu-videos-page .edu-file-drop:hover .edu-file-drop-label,
.edu-videos-page .edu-file-drop:focus-within .edu-file-drop-label {
    border-color: var(--blue-soft);
    background: var(--blue-mist);
}
.edu-videos-page .edu-file-drop-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--blue-border);
    color: var(--blue-primary);
    font-size: 1rem;
}
.edu-videos-page .edu-file-drop-text {
    font-size: 0.92rem;
    color: var(--text-head);
}
.edu-videos-page .edu-file-drop-or {
    color: var(--text-muted);
    font-weight: 400;
}
.edu-videos-page .edu-file-drop-name {
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edu-videos-page .edu-file-drop-name.is-set {
    color: var(--blue-primary);
    font-weight: 600;
}

/* Optional labels accordion */
.edu-videos-page .edu-optional-details {
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: var(--bg-soft);
    margin-bottom: 0.9rem;
    overflow: hidden;
}
.edu-videos-page .edu-optional-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-head);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    user-select: none;
}
.edu-videos-page .edu-optional-details > summary::-webkit-details-marker { display: none; }
.edu-videos-page .edu-optional-details > summary::before {
    content: "▸";
    color: var(--gold-deep);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}
.edu-videos-page .edu-optional-details[open] > summary::before {
    transform: rotate(90deg);
}
.edu-videos-page .edu-optional-hint {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.edu-videos-page .edu-optional-body {
    padding: 0 0.85rem 0.85rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.85rem;
}

.edu-videos-page .edu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: center;
}
.edu-videos-page .edu-actions-note {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Library list */
.edu-videos-page .edu-library-empty {
    margin: 0;
    padding: 0.35rem 0 0.15rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.edu-videos-page .edu-manage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.edu-videos-page .edu-manage-item {
    position: relative;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    background: var(--bg-body);
    display: grid;
    gap: 0.65rem;
}
.edu-videos-page .edu-manage-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-right: 4.5rem;
}
.edu-videos-page .edu-manage-title {
    font-size: 0.98rem;
    color: var(--text-head);
}
.edu-videos-page .edu-manage-file {
    font-size: 0.74rem;
    color: var(--text-muted);
    word-break: break-all;
}
.edu-videos-page .edu-relabel-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}
@media (min-width: 720px) {
    .edu-videos-page .edu-relabel-fields {
        grid-template-columns: 1.2fr 0.8fr;
    }
    .edu-videos-page .edu-field-desc {
        grid-column: 1 / -1;
    }
}
.edu-videos-page .edu-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.edu-videos-page .edu-delete-form {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    margin: 0;
}
.edu-videos-page .edu-btn-danger {
    background: transparent;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.edu-videos-page .edu-btn-danger:hover {
    background: #fef2f2;
}

/* Public page bits */
.edu-videos-page .edu-manage-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.88rem;
}
.edu-videos-page .edu-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-soft);
    color: var(--text-head);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
}
.edu-videos-page .edu-manage-link:hover {
    border-color: var(--blue-soft);
    background: var(--blue-ghost);
    color: var(--blue-primary);
}
.edu-videos-page .edu-library-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.edu-videos-page .edu-filter-input {
    max-width: 16rem;
}
/* Default (few videos): original full-width player + native poster */
.edu-videos-page .edu-video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.edu-videos-page .edu-video-card {
    overflow: hidden;
    background: var(--bg-card);
}
.edu-videos-page .edu-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    overflow: hidden;
}
.edu-videos-page .edu-video-el {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0f172a;
}

/* Expanded library: compact thumbnail grid (3+ videos) */
.edu-videos-page.is-thumb-grid .edu-video-grid {
    gap: 1.15rem;
}
@media (min-width: 640px) {
    .edu-videos-page.is-thumb-grid .edu-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .edu-videos-page.is-thumb-grid .edu-video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.edu-videos-page.is-thumb-grid .edu-video-card {
    min-width: 0;
}
.edu-videos-page.is-thumb-grid .edu-video-el {
    object-fit: cover;
    object-position: center;
}
.edu-videos-page.is-thumb-grid .edu-video-title {
    font-size: 0.98rem;
}
.edu-videos-page.is-thumb-grid .edu-video-desc-short {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edu-videos-page.is-thumb-grid .edu-video-body {
    padding: 0.75rem 0.9rem 0.9rem;
}
.edu-videos-page .edu-video-body {
    padding: 0.9rem 1.05rem 1.05rem;
}
.edu-videos-page .edu-video-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-head);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}
.edu-videos-page .edu-video-desc {
    font-size: 0.9rem;
    color: var(--text-main);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}
.edu-videos-page .edu-video-meta {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.edu-videos-page .edu-empty-icon {
    font-size: 2rem;
    color: var(--gold-deep);
    margin-bottom: 0.75rem;
}
.edu-videos-page .edu-howto-list {
    margin: 0.5rem 0 0 1.1rem;
    padding: 0;
}
.edu-videos-page .edu-howto-list li { margin: 0.35rem 0; }
.edu-videos-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* Editor: comment + delete under each video */
.edu-videos-page .edu-editor-grid {
    gap: 1.5rem;
}
.edu-videos-page .edu-editor-card {
    border: 1px solid var(--blue-border);
}
.edu-videos-page .edu-editor-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.edu-videos-page .edu-comment-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.edu-videos-page .edu-delete-under {
    position: static;
    margin: 0;
    padding-top: 0.15rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.65rem;
}
.edu-videos-page .edu-editor-body .edu-manage-file {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    word-break: break-all;
}
.edu-videos-page .edu-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.15rem;
}
.edu-videos-page.edu-videos-manage .edu-video-meta {
    display: none;
}


/* Educational videos: idle poster state (no “already playing” scrubber look) */
.edu-videos-page .edu-video-frame {
    position: relative;
    background: #0b1220;
}
.edu-videos-page .edu-video-el {
    background: #0b1220;
}
.edu-videos-page .edu-video-el:not(:fullscreen) {
    /* Keep frame clean; poster fills until play */
    object-fit: contain;
}
/* Soft play cue only while paused / no activity */
.edu-videos-page .edu-video-frame::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.1rem;
    height: 3.1rem;
    margin: -1.55rem 0 0 -1.55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1;
    /* triangle */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 7.5v9l8-4.5-8-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 55% 50%;
    background-size: 1.35rem 1.35rem;
}
.edu-videos-page .edu-video-frame.is-idle {
    cursor: pointer;
}
.edu-videos-page .edu-video-frame.is-idle::after {
    opacity: 1;
}
.edu-videos-page .edu-video-frame.is-idle:hover::after {
    background-color: rgba(2, 132, 200, 0.55);
    border-color: #fff;
}
.edu-videos-page .edu-video-frame.is-idle .edu-video-el {
    /* Some browsers still paint a thin control strip; dark edge softens it */
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}


/* Comment formatting toolbar (editor) */
.edu-videos-page .edu-fmt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    margin: 0 0 0.4rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--bg-soft);
}
.edu-videos-page .edu-fmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text-head);
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.edu-videos-page .edu-fmt-btn:hover,
.edu-videos-page .edu-fmt-btn:focus {
    background: #fff;
    border-color: var(--blue-border);
    color: var(--blue-primary);
    outline: none;
}
.edu-videos-page .edu-fmt-btn:active {
    background: var(--blue-ghost);
}
.edu-videos-page .edu-fmt-sep {
    width: 1px;
    height: 1.2rem;
    background: var(--border-color);
    margin: 0 0.15rem;
}
.edu-videos-page .edu-fmt-textarea {
    min-height: 6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.45;
}
.edu-videos-page .edu-fmt-hint {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}
/* Public formatted comments */
.edu-videos-page .edu-video-desc {
    font-size: 0.92rem;
    color: var(--text-main);
    margin: 0.15rem 0 0;
    line-height: 1.55;
}
.edu-videos-page .edu-video-desc p {
    margin: 0 0 0.55rem;
}
.edu-videos-page .edu-video-desc p:last-child {
    margin-bottom: 0;
}
.edu-videos-page .edu-video-desc ul,
.edu-videos-page .edu-video-desc ol {
    margin: 0.35rem 0 0.55rem 1.2rem;
    padding: 0;
}
.edu-videos-page .edu-video-desc li {
    margin: 0.2rem 0;
}
.edu-videos-page .edu-video-desc a,
.edu-videos-page .edu-video-desc a:link,
.edu-videos-page .edu-video-desc a:visited,
.edu-videos-page .edu-video-desc a:hover,
.edu-videos-page .edu-video-desc a:active,
.edu-videos-page .edu-video-desc a:focus {
    color: var(--blue-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
.edu-videos-page .edu-video-desc strong,
.edu-videos-page .edu-video-desc b {
    font-weight: 700;
    color: var(--text-head);
}
.edu-videos-page .edu-video-desc em,
.edu-videos-page .edu-video-desc i {
    font-style: italic;
}
.edu-videos-page .edu-video-desc u {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.edu-videos-page .edu-video-desc s,
.edu-videos-page .edu-video-desc strike {
    text-decoration: line-through;
    opacity: 0.9;
}


/* Visual (WYSIWYG) comment editor */
.edu-videos-page .edu-visual-editor {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.edu-videos-page .edu-visual-surface {
    min-height: 7.5rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: #fff;
    color: var(--text-main);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
}
.edu-videos-page .edu-visual-surface:focus {
    border-color: var(--blue-soft);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.edu-videos-page .edu-visual-surface.is-empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
    font-style: italic;
}
.edu-videos-page .edu-visual-surface p {
    margin: 0 0 0.5rem;
}
.edu-videos-page .edu-visual-surface p:last-child {
    margin-bottom: 0;
}
.edu-videos-page .edu-visual-surface ul,
.edu-videos-page .edu-visual-surface ol {
    margin: 0.35rem 0 0.5rem 1.25rem;
    padding: 0;
}
.edu-videos-page .edu-visual-surface a,
.edu-videos-page .edu-visual-surface a:link,
.edu-videos-page .edu-visual-surface a:visited,
.edu-videos-page .edu-visual-surface a:hover,
.edu-videos-page .edu-visual-surface a:active,
.edu-videos-page .edu-visual-surface a:focus {
    color: var(--blue-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
.edu-videos-page .edu-visual-surface strong,
.edu-videos-page .edu-visual-surface b {
    font-weight: 700;
}
.edu-videos-page .edu-visual-surface em,
.edu-videos-page .edu-visual-surface i {
    font-style: italic;
}
.edu-videos-page .edu-visual-surface u {
    text-decoration: underline;
}
.edu-videos-page .edu-fmt-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
}
/* Hide mono textarea styling leftovers */
.edu-videos-page .edu-fmt-textarea {
    font-family: inherit;
}


/* Wikipedia-style link picker for comment editor */
.edu-link-picker {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 2rem;
}
.edu-link-picker[hidden] {
    display: none !important;
}
.edu-link-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
}
.edu-link-picker-panel {
    position: relative;
    z-index: 1;
    width: min(28rem, 100%);
    max-height: min(70vh, 32rem);
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dbe4ee);
    border-radius: 0.85rem;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}
.edu-link-picker-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--border-color, #e5eef6);
    font-weight: 700;
    color: var(--text-head, #1e3a5f);
    font-size: 0.95rem;
}
.edu-link-picker-head i {
    color: var(--blue-bright, #0284c8);
}
.edu-link-picker-close {
    margin-left: auto;
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
}
.edu-link-picker-close:hover {
    background: var(--bg-soft, #f1f5f9);
    color: var(--text-head);
}
.edu-link-picker-label {
    display: block;
    padding: 0.55rem 0.9rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.edu-link-picker-input {
    display: block;
    width: calc(100% - 1.8rem);
    margin: 0 0.9rem 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color, #dbe4ee);
    border-radius: 0.5rem;
    font: inherit;
    font-size: 0.95rem;
    background: var(--bg-body, #fff);
    color: var(--text-main);
}
.edu-link-picker-input:focus {
    outline: none;
    border-color: var(--blue-soft, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.edu-link-picker-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 8rem;
    max-height: 16rem;
    border-top: 1px solid var(--border-color, #eef2f7);
    border-bottom: 1px solid var(--border-color, #eef2f7);
}
.edu-link-picker-item {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.edu-link-picker-item:hover,
.edu-link-picker-item.is-active {
    background: var(--blue-ghost, #f0f9ff);
    border-left-color: var(--blue-bright, #0284c8);
}
.edu-link-picker-item-title {
    font-weight: 600;
    color: var(--text-head, #1e3a5f);
    font-size: 0.92rem;
    line-height: 1.3;
}
.edu-link-picker-item-title mark {
    background: #fef08a;
    color: inherit;
    border-radius: 0.15rem;
    padding: 0 0.1em;
}
.edu-link-picker-item-sub {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edu-link-picker-empty {
    padding: 1rem 0.9rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
}
.edu-link-picker-foot {
    padding: 0.35rem 0 0.75rem;
    background: var(--bg-soft, #f8fafc);
}
.edu-link-picker-ext-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0 0.9rem;
}
.edu-link-picker-ext-row .edu-link-picker-input {
    width: auto;
    flex: 1 1 auto;
    margin: 0;
}
body.edu-link-picker-open {
    overflow: hidden;
}


/* Link picker source badges (site / Wikipedia / web) */
.edu-link-picker-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.edu-link-picker-badge {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-soft);
    white-space: nowrap;
}
.edu-link-picker-badge.is-site {
    color: #0f4c81;
    background: #e0f2fe;
    border-color: #bae6fd;
}
.edu-link-picker-badge.is-wikipedia {
    color: #1e3a5f;
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.edu-link-picker-badge.is-web {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}
.edu-link-picker-item.is-site.is-active,
.edu-link-picker-item.is-site:hover {
    border-left-color: #0284c8;
}
.edu-link-picker-item.is-wikipedia.is-active,
.edu-link-picker-item.is-wikipedia:hover {
    border-left-color: #64748b;
}
.edu-link-picker-item.is-web.is-active,
.edu-link-picker-item.is-web:hover {
    border-left-color: #16a34a;
}
.edu-link-picker-label {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
}


/* =========================================================
   Note-page prose links — dark navy template (all article entries)
   Light blue (--blue-bright) is reserved for UI chrome, not body links.
   ========================================================= */
.note-page .site-main-body a.content-link,
.note-page .site-main-body a.content-link:link,
.note-page .site-main-body a.content-link:visited,
.note-page .site-main-body a.content-link:hover,
.note-page .site-main-body a.content-link:active,
.note-page .site-main-body a.content-link:focus,
.note-page .site-main-body .on-page-toc a,
.note-page .site-main-body .on-page-toc a:link,
.note-page .site-main-body .on-page-toc a:visited,
.note-page .site-main-body .on-page-toc a:hover,
.note-page .site-main-body .on-page-toc a:active,
.note-page .site-main-body .on-page-toc a:focus,
.note-page .site-main-body .article-contents-list a,
.note-page .site-main-body .article-contents-list a:link,
.note-page .site-main-body .article-contents-list a:visited,
.note-page .site-main-body .article-contents-list a:hover,
.note-page .site-main-body p > a:not([class]),
.note-page .site-main-body p > a:not([class]):link,
.note-page .site-main-body p > a:not([class]):visited,
.note-page .site-main-body p > a:not([class]):hover,
.note-page .site-main-body li > a:not([class]),
.note-page .site-main-body li > a:not([class]):link,
.note-page .site-main-body li > a:not([class]):visited,
.note-page .site-main-body li > a:not([class]):hover,
.note-page .site-main-body .bib-entry a,
.note-page .site-main-body .bib-entry a:link,
.note-page .site-main-body .bib-entry a:visited,
.note-page .site-main-body .bib-entry a:hover,
.note-page .site-main-body .hover-entity-link,
.note-page .site-main-body .hover-entity-link:link,
.note-page .site-main-body .hover-entity-link:visited,
.note-page .site-main-body .hover-entity-link:hover,
.note-page .site-main-body .hover-entity-link:focus-visible,
.note-page .site-main-footer a.content-link,
.note-page .site-main-footer a.content-link:link,
.note-page .site-main-footer a.content-link:visited,
.note-page .site-main-footer a.content-link:hover {
    color: var(--blue-primary) !important; /* dark navy #1E3A5F */
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
.note-page .site-main-body a.content-link:hover,
.note-page .site-main-body .on-page-toc a:hover,
.note-page .site-main-body .bib-entry a:hover,
.note-page .site-main-body p > a:not([class]):hover,
.note-page .site-main-footer a.content-link:hover {
    opacity: 0.88;
    text-decoration: none !important;
    border-bottom: none !important;
}
.note-page .fact-box .hover-entity-link,
.note-page .info-card .hover-entity-link,
.note-page .fact-box .hover-entity-link:link,
.note-page .info-card .hover-entity-link:link,
.note-page .fact-box .hover-entity-link:visited,
.note-page .info-card .hover-entity-link:visited,
.note-page .fact-box:hover .hover-entity-link,
.note-page .info-card:hover .hover-entity-link,
.note-page .fact-box .hover-entity-link:hover,
.note-page .info-card .hover-entity-link:hover {
    color: var(--blue-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}


/* Educational videos: justified prose, no end-of-line hyphenation */
.edu-videos-page .site-main-header .lede,
.edu-videos-page .edu-video-desc,
.edu-videos-page .edu-video-desc p,
.edu-videos-page .edu-video-desc li,
.edu-videos-page .edu-video-body,
.edu-videos-page .edu-empty p,
.edu-videos-page .edu-manage-sub,
.edu-videos-page .edu-card-help,
.edu-videos-page .edu-login-help,
.edu-videos-page .edu-library-empty,
.edu-videos-page .edu-visual-surface,
.edu-videos-page .edu-visual-surface p,
.edu-videos-page .edu-visual-surface li,
.edu-videos-page .edu-video-card.ornate-card,
.edu-videos-page .edu-video-card {
    text-align: justify;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
}
/* Keep titles left-aligned (not justified) */
.edu-videos-page .edu-video-title,
.edu-videos-page .page-title,
.edu-videos-page .section-title,
.edu-videos-page .edu-manage-title,
.edu-videos-page .edu-card-title,
.edu-videos-page .edu-login-title {
    text-align: left;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}
/* Short desc under thumbnails in grid modes */
.edu-videos-page .edu-video-desc-short {
    text-align: justify;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal;
    word-break: normal;
}


/* ── Educational videos: Grid / List view with thumbnails ── */
.edu-videos-page .edu-library-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.edu-videos-page .edu-library-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.edu-videos-page .edu-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-soft);
}
.edu-videos-page .edu-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.edu-videos-page .edu-view-btn i {
    font-size: 0.85rem;
}
.edu-videos-page .edu-view-btn:hover {
    color: var(--blue-primary);
    background: var(--blue-ghost);
}
.edu-videos-page .edu-view-btn.is-active {
    background: var(--blue-primary);
    color: #fff;
}
.edu-videos-page .edu-view-btn:focus-visible {
    outline: 2px solid var(--blue-soft);
    outline-offset: 2px;
    z-index: 1;
}

/* Thumbnail image under idle video */
.edu-videos-page .edu-video-frame {
    position: relative;
}
.edu-videos-page .edu-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    background: #0b1220;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.edu-videos-page .edu-video-frame.is-playing .edu-video-thumb,
.edu-videos-page .edu-video-frame:not(.is-idle) .edu-video-thumb {
    opacity: 0;
    visibility: hidden;
}
.edu-videos-page .edu-video-playcue {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.edu-videos-page .edu-video-frame.is-idle .edu-video-playcue {
    opacity: 1;
}
.edu-videos-page .edu-video-frame.is-idle:hover .edu-video-playcue {
    background: rgba(2, 132, 200, 0.55);
}
.edu-videos-page .edu-video-el {
    position: relative;
    z-index: 0;
}

/* GRID view (default) */
.edu-videos-page.is-view-grid .edu-video-grid,
.edu-videos-page.is-thumb-grid .edu-video-grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .edu-videos-page.is-view-grid .edu-video-grid,
    .edu-videos-page.is-thumb-grid .edu-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .edu-videos-page.is-view-grid .edu-video-grid,
    .edu-videos-page.is-thumb-grid .edu-video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.edu-videos-page.is-view-grid .edu-video-card,
.edu-videos-page.is-thumb-grid .edu-video-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.edu-videos-page.is-view-grid .edu-video-el,
.edu-videos-page.is-thumb-grid .edu-video-el {
    object-fit: cover;
    object-position: center;
}
.edu-videos-page.is-view-grid .edu-video-title,
.edu-videos-page.is-thumb-grid .edu-video-title {
    font-size: 0.98rem;
}
.edu-videos-page.is-view-grid .edu-video-desc-grid,
.edu-videos-page.is-thumb-grid .edu-video-desc-grid {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: justify;
    hyphens: none !important;
}
.edu-videos-page.is-view-grid .edu-video-desc-list,
.edu-videos-page.is-thumb-grid .edu-video-desc-list {
    display: none !important;
}
.edu-videos-page.is-view-grid .edu-video-body,
.edu-videos-page.is-thumb-grid .edu-video-body {
    padding: 0.75rem 0.9rem 0.9rem;
}

/* LIST view — thumbnail row + text */
.edu-videos-page.is-view-list .edu-video-grid {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.edu-videos-page.is-view-list .edu-video-card {
    display: grid;
    grid-template-columns: minmax(8.5rem, 14rem) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-width: 0;
}
@media (max-width: 560px) {
    .edu-videos-page.is-view-list .edu-video-card {
        grid-template-columns: 1fr;
    }
}
.edu-videos-page.is-view-list .edu-video-frame {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: 100%;
    max-height: 10.5rem;
}
@media (max-width: 560px) {
    .edu-videos-page.is-view-list .edu-video-frame {
        max-height: none;
    }
}
.edu-videos-page.is-view-list .edu-video-el,
.edu-videos-page.is-view-list .edu-video-thumb {
    object-fit: cover;
}
.edu-videos-page.is-view-list .edu-video-body {
    padding: 0.85rem 1rem 0.95rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.edu-videos-page.is-view-list .edu-video-title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}
.edu-videos-page.is-view-list .edu-video-desc-grid {
    display: none !important;
}
.edu-videos-page.is-view-list .edu-video-desc-list {
    display: block;
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: justify;
    hyphens: none !important;
}


/* Video popup window (player + comments) */
.edu-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.edu-video-modal[hidden] {
    display: none !important;
}
.edu-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(3px);
}
.edu-video-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(52rem, 100%);
    max-height: min(92vh, 56rem);
    overflow: auto;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dbe4ee);
    border-radius: 0.9rem;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
}
.edu-video-modal-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 3;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.edu-video-modal-close:hover {
    background: rgba(2, 132, 200, 0.85);
}
.edu-video-modal-player-wrap {
    background: #0b1220;
    border-radius: 0.9rem 0.9rem 0 0;
    overflow: hidden;
}
.edu-video-modal-player {
    display: block;
    width: 100%;
    max-height: min(58vh, 28rem);
    aspect-ratio: 16 / 9;
    background: #0b1220;
    object-fit: contain;
}
.edu-video-modal-body {
    padding: 1rem 1.15rem 1.25rem;
}
.edu-video-modal-title {
    margin: 0 0 0.65rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-head, #1e3a5f);
    line-height: 1.3;
    text-align: left;
    padding-right: 2rem;
}
.edu-video-modal-comments {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-main);
    text-align: justify;
    hyphens: none !important;
}
.edu-video-modal-comments a {
    color: var(--blue-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.edu-video-modal-no-comment {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
    text-align: left;
}
.edu-videos-page .edu-video-card[data-edu-open="1"] {
    cursor: pointer;
}
.edu-videos-page .edu-video-open-hint {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--blue-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.edu-videos-page.is-view-grid .edu-video-open-hint {
    font-size: 0.68rem;
}
body.edu-video-modal-open {
    overflow: hidden;
}
@media (max-width: 640px) {
    .edu-video-modal {
        padding: 0.5rem;
        align-items: flex-end;
    }
    .edu-video-modal-dialog {
        max-height: 94vh;
        border-radius: 0.85rem 0.85rem 0.5rem 0.5rem;
    }
    .edu-video-modal-player {
        max-height: 42vh;
    }
}


/* Share buttons (video popup + cards) */
.edu-share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
}
.edu-share-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.15rem;
}
.edu-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-soft);
    color: var(--blue-primary) !important;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.edu-share-btn:hover,
.edu-share-btn:focus {
    background: var(--blue-ghost);
    border-color: var(--blue-soft);
    color: var(--blue-primary) !important;
    text-decoration: none !important;
    outline: none;
}
.edu-share-btn:focus-visible {
    outline: 2px solid var(--blue-soft);
    outline-offset: 2px;
}
.edu-share-btn i {
    font-size: 0.85rem;
}
.edu-share-btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
}
.edu-share-btn-icon span {
    display: none;
}
.edu-share-bar-card {
    margin: 0.5rem 0 0;
}
.edu-share-status {
    margin: -0.35rem 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-primary);
}
.edu-videos-page.is-view-grid .edu-share-bar-card .edu-share-btn-icon {
    width: 1.85rem;
    height: 1.85rem;
}
@media (max-width: 520px) {
    .edu-share-btn span {
        /* icons only on very small screens for modal? keep labels for modal */
    }
    #edu-video-modal-share .edu-share-btn span {
        display: none;
    }
    #edu-video-modal-share .edu-share-btn {
        width: 2.15rem;
        height: 2.15rem;
        padding: 0;
        justify-content: center;
    }
}

/* ── Educational videos: sort control ── */
.edu-videos-page .edu-library-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    margin-left: auto;
}
.edu-videos-page .edu-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}
.edu-videos-page .edu-sort-text {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.edu-videos-page .edu-sort-select {
    min-width: 11.5rem;
    max-width: 16rem;
    padding: 0.4rem 1.75rem 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1.4 1.4L6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.65rem;
}
.edu-videos-page .edu-sort-select:focus {
    outline: 2px solid var(--blue-soft);
    outline-offset: 2px;
}
@media (max-width: 640px) {
    .edu-videos-page .edu-library-toolbar-right {
        width: 100%;
        margin-left: 0;
    }
    .edu-videos-page .edu-sort-label {
        flex: 1 1 auto;
    }
    .edu-videos-page .edu-sort-select {
        flex: 1 1 auto;
        max-width: none;
    }
    .edu-videos-page .edu-filter-label {
        flex: 1 1 100%;
    }
}


/* =========================================================
   Hub Modular Gallery Grid (Multi-column Pattern, Resizable Margins & Fonts)
   ========================================================= */
.hub-page .site-main,
.hub-page .site-main-header,
.hub-page .site-main-body,
.hub-page .hub-panel,
.site-main,
.site-main-header,
.site-main-body,
.note-page .site-main-body,
.content-wrap {
    max-width: var(--content-max-width, 56rem) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: max-width 100ms ease-out;
}

.hub-page #modules-grid,
.hub-page #modules-grid.hub-grid,
.hub-page #modules-grid.hub-modules-gallery,
.hub-page .hub-modules-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    padding-bottom: 1rem;
}

@media (min-width: 640px) {
    .hub-page #modules-grid,
    .hub-page #modules-grid.hub-grid,
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
}

@media (min-width: 900px) {
    .hub-page #modules-grid,
    .hub-page #modules-grid.hub-grid,
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }
}

@media (min-width: 1200px) {
    .hub-page #modules-grid,
    .hub-page #modules-grid.hub-grid,
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.95rem !important;
    }
}

@media (min-width: 1500px) {
    .hub-page #modules-grid,
    .hub-page #modules-grid.hub-grid,
    .hub-page #modules-grid.hub-modules-gallery {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
}

.hub-page .module-card {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.65rem !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hub-page .module-card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 8px 20px -6px var(--shadow-color), 0 0 0 1px var(--magenta-glow) !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

.hub-page .module-card-thumb,
.module-card-thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: var(--bg-mute) !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

.hub-page .module-card-thumb img.thumb,
.hub-page .module-card .thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.4s ease;
}

.hub-page .module-card:hover .thumb {
    transform: scale(1.05);
}

.hub-page .module-card .card-body {
    padding: 0.5rem 0.6rem 0.55rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.hub-page .module-card .card-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--text-head) !important;
    min-height: 2.3em !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}

.hub-page .module-card .card-blurb {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    color: var(--muted) !important;
    margin-top: 0.2rem !important;
    min-height: 2.6em !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}

.hub-page .module-card .card-foot {
    margin-top: auto !important;
    padding-top: 0.35rem !important;
    border-top: 1px solid var(--border-color) !important;
}


/* =========================================================
   Balanced Hero Section (Pill Buttons & Feature Pillars)
   ========================================================= */
.hub-hero-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.38rem 0.75rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: var(--text-head) !important;
    background: var(--bg-card, #fff) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.hub-hero-pill-btn:hover {
    background: var(--gold-pale) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.hub-hero-pillar {
    background: var(--bg-card, #fff) !important;
    border: 1px solid var(--border-color) !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.hub-hero-pillar:hover {
    background: var(--gold-pale) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}


/* =========================================================
   Straight Symmetrical Grid for Popular Entry Points (4x2 or 2x4)
   ========================================================= */
.hub-page .site-main-header .hub-hero-quicklinks {
    margin-top: 1.15rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--blue-pale) !important;
    width: 100% !important;
}

.hub-page .site-main-header .hub-hero-quicklinks-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .hub-page .site-main-header .hub-hero-quicklinks-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem !important;
    }
}

.hub-page .site-main-header .hub-quicklink.hub-quicklink-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.65rem !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
    min-height: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.hub-page .site-main-header .hub-quicklink.hub-quicklink-card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 8px 20px -6px var(--shadow-color), 0 0 0 1px var(--magenta-glow) !important;
    transform: translateY(-2px) !important;
    background: var(--bg-card) !important;
}

.hub-page .site-main-header .hub-quicklink-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: var(--bg-mute) !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.hub-page .site-main-header .hub-quicklink-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.hub-page .site-main-header .hub-quicklink.hub-quicklink-card:hover .hub-quicklink-img {
    transform: scale(1.06) !important;
}

.hub-page .site-main-header .hub-quicklink-badge {
    position: absolute !important;
    top: 0.3rem !important;
    right: 0.3rem !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    background: rgba(15, 23, 42, 0.78) !important;
    color: #fff !important;
    backdrop-filter: blur(4px) !important;
    padding: 0.12rem 0.4rem !important;
    border-radius: 0.3rem !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.hub-page .site-main-header .hub-quicklink-badge i {
    color: var(--gold) !important;
    font-size: 0.55rem !important;
}

.hub-page .site-main-header .hub-quicklink-body {
    padding: 0.45rem 0.55rem 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
}

.hub-page .site-main-header .hub-quicklink-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--text-head) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hub-page .site-main-header .hub-quicklink-desc {
    display: block !important;
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* =========================================================
   Appearance Slide Rules (Dynamic Thumbnail Scaling & Margins)
   ========================================================= */
.theme-picker-fixed.is-minimized > .slide-rule-picker {
    display: none !important;
}

.slide-rule-picker {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--border-color);
}
.slide-rule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.15rem;
}
.slide-rule-label {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.slide-rule-badge {
    font-size: 0.52rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-weight: 600;
    padding: 0.05rem 0.25rem;
    border-radius: 0.2rem;
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
    color: var(--gold-dark);
}
.slide-rule-track-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.slide-rule-input {
    flex: 1 1 auto;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--gold);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.slide-rule-input::-webkit-slider-runnable-track {
    height: 0.35rem;
    border-radius: 0.2rem;
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
}
.slide-rule-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--blue-primary);
    margin-top: -0.22rem;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.slide-rule-input::-moz-range-track {
    height: 0.35rem;
    border-radius: 0.2rem;
    background: var(--bg-mute);
    border: 1px solid var(--border-color);
}
.slide-rule-input::-moz-range-thumb {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--blue-primary);
    cursor: grab;
}
.slide-rule-reset-btn {
    font-size: 0.48rem;
    padding: 0.08rem 0.25rem;
    border-radius: 0.2rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    font-weight: 600;
}
.slide-rule-reset-btn:hover {
    background: var(--gold-wash);
    border-color: var(--gold);
    color: var(--gold-dark);
}

/* Dynamic Reading Margins & Width on Article/Note Pages */
.note-page .site-main-body,
.note-page .site-main-header,
.site-main-body.max-w-4xl,
.content-wrap {
    max-width: var(--content-max-width, 56rem) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: max-width 100ms ease-out;
}

/* Dynamic Thumbnail & Illustration Scaling across the site */
.hub-page .module-card-thumb,
.module-card-thumb {
    max-height: calc(8.5rem * var(--thumb-factor, 1)) !important;
    transition: max-height 100ms ease-out;
}

.hub-page .site-main-header .hub-quicklink-media,
.hub-quicklink-media {
    max-height: calc(5.5rem * var(--thumb-factor, 1)) !important;
    transition: max-height 100ms ease-out;
}

.hub-hero-figure,
.hub-page .hub-hero-figure {
    max-width: calc(22rem * var(--thumb-factor, 1)) !important;
    transition: max-width 100ms ease-out;
}

.note-page figure.ornate-card,
.note-page figure.hero-figure-full,
.note-page figure.illus-card,
.note-page .article-figure,
.article-figure-picture,
.article-figure-img,
.content-figure,
.hero-figure-full picture,
.hero-figure-full img,
figure.ornate-card picture,
figure.ornate-card img,
figure.illus-card picture,
figure.illus-card img,
.edu-video-thumb {
    max-width: var(--thumb-scale, 100%) !important;
    width: var(--thumb-scale, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    transition: max-width 100ms ease-out, width 100ms ease-out;
}