/*
 * Erapolis — main.css
 * Design system: system font stack, CSS custom properties for light/dark,
 * in-game material palette, WCAG 2.2 AA contrast everywhere.
 * No external fonts, no CDN, no frameworks.
 *
 * Table of contents
 * ─────────────────
 *  1. Reset & box model
 *  2. Design tokens (palette, type, spacing, motion, radius, shadow, z-index)
 *  3. Dark-mode overrides
 *  4. Reduced-motion override
 *  5. Base elements
 *  6. Focus / accessibility
 *  7. Skip link
 *  8. Container & layout grid
 *  9. Typography helpers
 * 10. Site header + primary nav
 * 11. Hero section
 * 12. Section common + section variants
 * 13. Buttons
 * 14. Cards
 * 15. Badge / tag
 * 16. Divider
 * 17. Era strip (decorative era-band motif)
 * 18. Leaderboard + postcard showcase specimens (E16-A-030)
 * 19. Feature sections (E16-C-003)
 * 20. Press-kit media frames
 * 21. Styleguide-specific helpers
 * 22. Wiki visual design surfaces (ERAPOLIS-1052)
 * 23. Wiki promo section — homepage entry point (ERAPOLIS-1078)
 * 24. Site footer
 * 25. Utilities
 *
 * ERAPOLIS-585 (WCAG 2.2 AA pass — E16-C-007):
 *  §2  --color-text-subtle light: #857d74 (4.1:1 on white) → #776f66 (4.6:1 on bg, 4.9:1 on white) ✓ AA
 *  §3  --color-text-subtle dark: #6e6659 (3.4:1 on dark bg) → #988e81 (4.8:1 on darkest dark surface) ✓ AA
 *  §7  Skip-link: clip-path hide/show added alongside top offset; motion-safe either way ✓
 *  §15 .badge--strong: text was #1a1714 on #5c6e3f = 3.2:1 → white (#fff = 5.6:1) ✓ AA
 *  §19 Styleguide .sg-section__title: rendered as <h3> in markup for coherent heading outline ✓
 */

/* ─── 1. Reset & box model ───────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── 2. Design tokens ───────────────────────────────────────────────────── */

:root {
    /*
     * Palette — light mode
     *
     * ERAPOLIS-1049 baseline: website brand tokens now mirror the in-game
     * room-kit/civic-ticker material language: warm wood/parchment surfaces,
     * dark ink outlines, teal civic structure, amber energy, and crisp seams.
     * Core text pairs stay WCAG 2.2 AA or better.
     */
    --color-bg:           #f2e4c8;
    --color-surface:      #fff4dc;
    --color-surface-2:    #ead3a7;   /* secondary surface, e.g. card on bg */
    --color-border:       #b8874f;
    --color-border-strong:#5a3b25;
    --color-text:         #23180f;
    --color-text-muted:   #59412d;
    --color-text-subtle:  #70563d;
    --color-accent:       #245a66;   /* civic teal, AA as text/link on bg */
    --color-accent-dark:  #163941;
    --color-accent-light: #d8edf0;
    --color-accent-mid:   #367c8b;   /* in-game glass/ops mid tone */
    --color-energy:       #f4c75b;
    --color-copper:       #d67a35;
    --color-outline:      #3f2b1e;
    --color-danger:       #b91c1c;   /* error, destructive */
    --color-focus:        #2563eb;   /* High-contrast focus ring (7.5:1 on white) */

    /*
     * Typography — system font stacks only, zero external requests.
     */
    --font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
    --font-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
                  Consolas, "DejaVu Sans Mono", monospace;

    /* Type scale — fluid via clamp(min, preferred, max) */
    --text-xs:   clamp(0.75rem,  0.72rem + 0.20vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.84rem + 0.22vw, 1rem);
    --text-base: clamp(1rem,     0.96rem + 0.22vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1.05rem + 0.40vw, 1.375rem);
    --text-xl:   clamp(1.375rem, 1.20rem + 0.90vw, 1.875rem);
    --text-2xl:  clamp(1.75rem,  1.40rem + 1.75vw, 2.75rem);
    --text-3xl:  clamp(2.25rem,  1.60rem + 3.25vw, 4rem);

    /* Spacing — 4 px base scale */
    --space-1:  0.25rem;   /*  4 px */
    --space-2:  0.5rem;    /*  8 px */
    --space-3:  0.75rem;   /* 12 px */
    --space-4:  1rem;      /* 16 px */
    --space-5:  1.25rem;   /* 20 px */
    --space-6:  1.5rem;    /* 24 px */
    --space-8:  2rem;      /* 32 px */
    --space-10: 2.5rem;    /* 40 px */
    --space-12: 3rem;      /* 48 px */
    --space-16: 4rem;      /* 64 px */
    --space-20: 5rem;      /* 80 px */
    --space-24: 6rem;      /* 96 px */

    /* Layout */
    --container-max:  68rem;
    --container-wide: 80rem;
    --container-pad:  clamp(1rem, 4vw, 2rem);
    --grid-cols:      12;
    --grid-gap:       clamp(1rem, 2.5vw, 1.5rem);

    /* Motion */
    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-out:      cubic-bezier(0, 0, 0.2, 1);
    --easing-in:       cubic-bezier(0.4, 0, 1, 1);

    /* Border radius */
    --radius-xs:   0.125rem;
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.5rem;
    --radius-xl:   0.75rem;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-sm:  0 2px 0 0 rgba(63, 43, 30, 0.18);
    --shadow-md:  0 4px 0 0 rgba(63, 43, 30, 0.18),
                  0 10px 20px -16px rgba(35, 24, 15, 0.45);
    --shadow-lg:  0 6px 0 0 rgba(63, 43, 30, 0.20),
                  0 18px 32px -22px rgba(35, 24, 15, 0.52);

    /* Z-index scale */
    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-sticky:   100;
    --z-overlay:  200;
    --z-modal:    300;
    --z-toast:    400;
}

/* ─── 3. Dark-mode overrides ─────────────────────────────────────────────── */

/*
 * Dark palette contrast analysis (WCAG 2.2 AA):
 *
 * Dark mode uses the synth/glass room-kit palette: ink panels, bright cyan
 * civic accents, amber energy, and light text pairs that exceed AA.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:           #0f1518;
        --color-surface:      #1b2328;
        --color-surface-2:    #263139;
        --color-border:       #3d5961;
        --color-border-strong:#8dbfc5;
        --color-text:         #e9dcc4;
        --color-text-muted:   #b8c8c9;
        --color-text-subtle:  #aeb7b1;
        --color-accent:       #68ccd2;
        --color-accent-dark:  #9de9ed;
        --color-accent-light: #18323a;
        --color-accent-mid:   #5eb8d2;
        --color-energy:       #ffd95e;
        --color-copper:       #eb8948;
        --color-outline:      #d2a870;
        --color-danger:       #f87171;
        --color-focus:        #60a5fa;

        --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.30),
                     0 1px 2px -1px rgba(0, 0, 0, 0.30);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.30),
                     0 2px 4px -2px rgba(0, 0, 0, 0.30);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.30),
                     0 4px 6px -4px rgba(0, 0, 0, 0.30);
    }
}

/* ─── 4. Reduced-motion override ─────────────────────────────────────────── */

@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;
    }
}

/* ─── 5. Base elements ───────────────────────────────────────────────────── */

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    color-scheme: light dark;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-accent);
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--easing-standard);
}

a:hover,
a:focus-visible {
    color: var(--color-accent-dark);
}

/* ─── 6. Focus / accessibility ───────────────────────────────────────────── */

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Remove default focus ring when :focus-visible is supported */
:focus:not(:focus-visible) {
    outline: none;
}

/* ─── 7. Skip link ───────────────────────────────────────────────────────── */

/*
 * Skip link — WCAG 2.4.1 (Bypass Blocks).
 *
 * Hidden off-screen until it receives focus, then snaps into view.
 * Two mechanisms used in tandem so the link is reliably visible under
 * both normal motion and prefers-reduced-motion:
 *   1. `top` offscreen → in-view (animated normally; collapses to 0.01ms
 *      under reduced-motion, which is an instant jump — still works).
 *   2. `clip-path` inset → none as a belt-and-suspenders guard: even if
 *      a browser paints the 0.01ms transition before the first frame, the
 *      unclipped state is immediately visible.
 *
 * Contrast: #fff on --color-focus (#2563eb) = 7.5:1 ✓ AAA (light mode)
 *           #fff on --color-focus (#60a5fa) = 2.9:1 — use outline instead
 *           In dark mode we keep background:#2563eb (same blue) so contrast
 *           stays 7.5:1 regardless of colour-scheme.
 */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background: #2563eb;   /* fixed to AA-passing blue in both modes */
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    clip-path: inset(0 0 100% 0);   /* visually hidden when not focused */
    transition: top var(--duration-fast) var(--easing-out),
                clip-path var(--duration-fast) var(--easing-out);
}

.skip-link:focus {
    top: var(--space-4);
    clip-path: inset(0);   /* fully revealed */
}

/* ─── 8. Container & layout grid ─────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: 42rem;
}

/* Auto-grid: equal columns, fluid min */
.grid {
    display: grid;
    gap: var(--grid-gap);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* ─── 9. Typography helpers ─────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    line-height: 1.25;
    color: var(--color-text);
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-base); font-family: var(--font-sans); font-weight: 600; }
h6 { font-size: var(--text-sm);  font-family: var(--font-sans); font-weight: 600; }

p {
    max-width: 68ch;
}

/* Prose block — comfortable reading measure with vertical rhythm */
.prose p + p {
    margin-top: var(--space-4);
}

.prose h2, .prose h3, .prose h4 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.prose ul, .prose ol {
    padding-inline-start: var(--space-6);
    max-width: 68ch;
}

.prose li + li {
    margin-top: var(--space-2);
}

.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

/* ─── 10. Site header + primary nav ─────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
}

.site-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.site-header__logo img {
    height: 2rem;
    width: auto;
}

/* Primary nav */
.primary-nav__list {
    display: flex;
    gap: var(--space-6);
    list-style: none;
}

.primary-nav__list a {
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text-muted);
    padding: var(--space-1) 0;
    border-bottom: 2px solid transparent;
    transition: color       var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}

.primary-nav__list a:hover,
.primary-nav__list a:focus-visible,
.primary-nav__list a[aria-current="page"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* Nav toggle (mobile) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: var(--radius-pill);
    transition: transform var(--duration-base) var(--easing-standard),
                opacity   var(--duration-base) var(--easing-standard);
}

@media (max-width: 640px) {
    .nav-toggle { display: flex; }

    .primary-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-4) var(--container-pad);
        display: none;
    }

    .primary-nav.is-open { display: block; }

    .primary-nav__list {
        flex-direction: column;
        gap: var(--space-4);
    }
}

/* ─── 11. Main / page ────────────────────────────────────────────────────── */

main {
    flex: 1;
    outline: none; /* tabindex="-1" skip-link target; no visible outline */
}

/* ─── 11b. Hero section ──────────────────────────────────────────────────── */

.hero {
    padding-block: var(--space-24) var(--space-16);
    text-align: center;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-accent-light) 42%, transparent), transparent 38%),
        var(--color-bg);
}

/*
 * Home-page hero variant — reduced top padding when key art precedes the text.
 */
.hero--home {
    padding-block-start: var(--space-16);
    overflow: hidden;
}

/* ── Hero key art (responsive ERAPOLIS-588 raster art) ─── */

.hero__art {
    margin-inline: auto;
    margin-bottom: var(--space-10);
    max-width: 60rem;
    width: 100%;
}

.hero__picture {
    display: block;
}

.hero__key-art {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    border: 3px solid var(--color-outline);
    box-shadow: var(--shadow-lg);
    background: var(--color-surface);
}

/* Reduced-motion: no animated effects on the hero art (handled globally in §4,
   but keep this explicit for any future CSS animation we add to .hero__art). */
@media (prefers-reduced-motion: reduce) {
    .hero__art * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Hero text elements ─── */

.hero__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
    padding: 0.25rem 0.7rem;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.hero__title {
    margin-bottom: var(--space-6);
}

.hero__lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-inline: auto;
    margin-bottom: var(--space-8);
    max-width: 52ch;
}

/* ── Hero CTA row ─── */

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/*
 * .hero__coming-soon
 * Non-link "Coming soon" affordance rendered when $appStoreUrl is null.
 * Visually matches .btn--primary dimensions but is a <span> (not focusable as
 * a link), with muted styling to signal it is not yet actionable.
 */
.hero__coming-soon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-10);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    white-space: nowrap;
    /* intentionally no hover/focus styles — not interactive */
    cursor: default;
}

/* At narrow widths, stack the CTA and the learn-more link */
@media (max-width: 420px) {
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .hero__coming-soon {
        justify-content: center;
    }
}

/* ── Pitch grid (four feature cards below the hero) ─── */

.pitch-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin-top: var(--space-8);
}

.pitch-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 78%, transparent), transparent),
        var(--color-surface-2);
    box-shadow: var(--shadow-sm);
}

.pitch-card__icon {
    width: 3rem;
    height: 3rem;
    margin-inline: auto;
    color: var(--color-accent);
}

.pitch-card__icon svg {
    width: 100%;
    height: 100%;
}

/* Left-align icon on wider grid where cards sit side-by-side */
@media (min-width: 640px) {
    .pitch-card__icon {
        margin-inline: 0;
    }
    .pitch-card {
        text-align: left;
    }
}

.pitch-icon-stroke { stroke: var(--color-accent); }
.pitch-icon-fill   { fill: var(--color-accent); }

.pitch-card__title {
    font-size: var(--text-lg);
    font-family: var(--font-serif);
    color: var(--color-text);
    line-height: 1.3;
}

.pitch-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.65;
    max-width: 42ch;
}

/* ── Era strip row (decorative divider wrapper) ─── */

.era-strip-row {
    padding-inline: var(--container-pad);
    max-width: var(--container-max);
    margin-inline: auto;
    padding-block: var(--space-4) 0;
}

/* ─── 12. Section common + variants ─────────────────────────────────────── */

.section {
    padding-block: var(--space-16);
}

.section--alt {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--color-border) 18%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-border) 18%, transparent) 0 1px, transparent 1px 100%),
        var(--color-surface);
    background-size: 32px 32px;
}

.section--accent {
    background: var(--color-accent-light);
}

.section--tight {
    padding-block: var(--space-8);
}

.section--spacious {
    padding-block: var(--space-24);
}

.section__header {
    margin-bottom: var(--space-8);
    text-align: center;
}

.section__header--left {
    text-align: left;
}

.section__kicker {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--space-2);
}

/* ─── 13. Buttons ────────────────────────────────────────────────────────── */

/*
 * Button variants:
 *   .btn                — base (invisible without modifier)
 *   .btn--primary       — solid accent fill
 *   .btn--secondary     — outlined accent
 *   .btn--ghost         — no fill, text colour
 *   .btn--danger        — destructive action
 *
 * Sizes: default | .btn--sm | .btn--lg
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-6);
    transition: background     var(--duration-fast) var(--easing-standard),
                color          var(--duration-fast) var(--easing-standard),
                border-color   var(--duration-fast) var(--easing-standard),
                box-shadow     var(--duration-fast) var(--easing-standard),
                transform      var(--duration-fast) var(--easing-standard);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* Primary — civic panel teal */
.btn--primary {
    background: var(--color-accent);
    color: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--color-outline) 28%, transparent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-surface);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Secondary — outlined */
.btn--secondary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* Ghost — no border, text colour */
.btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--color-surface-2);
    color: var(--color-text);
}

/* Danger */
.btn--danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

.btn--danger:hover,
.btn--danger:focus-visible {
    filter: brightness(0.88);
}

/* Sizes */
.btn--sm {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
}

.btn--lg {
    font-size: var(--text-lg);
    padding: var(--space-4) var(--space-10);
}

/* Icon-only button: square, no pill padding */
.btn--icon {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    aspect-ratio: 1;
}

/* hero__cta alias (back-compat with existing markup) */
.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    background: var(--color-accent);
    color: #1a1714;
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: background  var(--duration-fast) var(--easing-standard),
                color       var(--duration-fast) var(--easing-standard),
                transform   var(--duration-fast) var(--easing-standard),
                box-shadow  var(--duration-fast) var(--easing-standard);
}

.hero__cta:hover,
.hero__cta:focus-visible {
    background: var(--color-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ─── 14. Cards ──────────────────────────────────────────────────────────── */

/*
 * .card             — base card container
 * .card--raised     — elevated (shadow)
 * .card--outlined   — border only, no shadow
 * .card--accent     — accent-light background
 * .card--interactive — hover lift (for clickable cards)
 *
 * Inner elements:
 *   .card__media    — top image area
 *   .card__body     — content padding
 *   .card__title    — heading inside body
 *   .card__desc     — description text
 *   .card__footer   — bottom actions row
 */

.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.card--raised {
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.card--outlined {
    box-shadow: none;
    border-color: var(--color-border);
}

.card--accent {
    background: var(--color-accent-light);
    border-color: transparent;
}

.card--interactive {
    text-decoration: none;
    color: inherit;
    transition: transform    var(--duration-base) var(--easing-out),
                box-shadow   var(--duration-base) var(--easing-out),
                border-color var(--duration-fast) var(--easing-standard);
    cursor: pointer;
}

.card--interactive:hover,
.card--interactive:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
    outline-offset: 4px;
}

.card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-2);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--easing-out);
}

.card--interactive:hover .card__media img,
.card--interactive:focus-visible .card__media img {
    transform: scale(1.04);
}

.card__body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.3;
    color: var(--color-text);
}

.card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: none;
}

.card__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ─── 15. Badge / tag ────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2em 0.65em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}

.badge--default {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.badge--accent {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border: 1px solid transparent;
}

/*
 * .badge--strong contrast:
 *   Light: #fff on #5c6e3f = 5.6:1 ✓ AA  (ERAPOLIS-585: was #1a1714 = 3.2:1 = FAIL for normal text)
 *   Dark:  #1a1714 on #8aab5c = 6.9:1 ✓ AA — dark mode btn text already uses dark, badge inherits same logic.
 *          In dark mode --color-accent = #8aab5c; white on that = 2.9:1 (insufficient for normal text),
 *          so we force #1a1714 explicitly for dark mode via the override block below.
 */
.badge--strong {
    background: var(--color-accent);
    color: #fff;   /* ERAPOLIS-585: was #1a1714 (3.2:1 on light accent); white = 5.6:1 ✓ AA */
    border: 1px solid transparent;
}

/* ─── 16. Divider ────────────────────────────────────────────────────────── */

.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-8);
}

.divider--strong {
    border-top-color: var(--color-border-strong);
    border-top-width: 2px;
}

/* ─── 17. Era strip ──────────────────────────────────────────────────────── */

/*
 * A decorative row of era-band blocks — echoes the tower-mark icon.
 * Each .era-band block fades progressively (oldest = faintest).
 * aria-hidden="true" on the container; no semantic meaning.
 */

.era-strip {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    height: 2.5rem;
}

.era-band {
    flex: 1;
    background: var(--color-accent);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.era-band:nth-child(1) { height: 100%;  opacity: 1.00; }
.era-band:nth-child(2) { height: 84%;   opacity: 0.85; }
.era-band:nth-child(3) { height: 68%;   opacity: 0.70; }
.era-band:nth-child(4) { height: 54%;   opacity: 0.55; }
.era-band:nth-child(5) { height: 42%;   opacity: 0.43; }
.era-band:nth-child(6) { height: 32%;   opacity: 0.33; }
.era-band:nth-child(7) { height: 22%;   opacity: 0.24; }
.era-band:nth-child(8) { height: 14%;   opacity: 0.16; }

/* ─── 18. Leaderboard + postcard showcase specimens (E16-A-030) ─────────── */

.showcase-specimen {
    --showcase-ink: var(--color-outline);
    --showcase-slab: #33261c;
    --showcase-wood: #9d7045;
    --showcase-stone: #f6edcf;
    --showcase-steel: #6f7f84;
    --showcase-glass: #8ecad4;
    --showcase-energy: var(--color-energy);
    --showcase-shadow: rgba(63, 43, 30, 0.24);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
    gap: var(--space-8);
    align-items: stretch;
    margin-bottom: var(--space-8);
}

.leaderboard-panel,
.postcard-showcase {
    margin: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.leaderboard-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-energy) 30%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 94%, white), var(--color-surface-2));
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-lg);
    box-shadow:
        0 6px 0 var(--showcase-shadow),
        inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 70%, white);
}

.leaderboard-panel::before,
.postcard-showcase::before {
    content: "";
    position: absolute;
    inset: var(--space-3);
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
    border-radius: var(--radius-md);
    pointer-events: none;
}

.leaderboard-panel::after {
    content: "";
    position: absolute;
    right: -2.5rem;
    top: -3.5rem;
    z-index: -1;
    width: 12rem;
    height: 12rem;
    background:
        linear-gradient(90deg, transparent 44%, color-mix(in srgb, var(--color-accent) 38%, transparent) 44% 56%, transparent 56%),
        linear-gradient(0deg, transparent 44%, color-mix(in srgb, var(--color-copper) 36%, transparent) 44% 56%, transparent 56%);
    transform: rotate(12deg);
    opacity: .55;
}

.leaderboard-panel__caption,
.postcard-showcase__caption {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.leaderboard-panel__title,
.postcard-showcase__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}

.leaderboard-panel__note,
.postcard-showcase__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 58ch;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) minmax(4.75rem, auto);
    gap: var(--space-4);
    align-items: center;
    position: relative;
    min-height: 5.35rem;
    padding: var(--space-4);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--showcase-wood) 26%, transparent), transparent 40%),
        color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 -4px 0 color-mix(in srgb, var(--showcase-slab) 14%, transparent),
        0 2px 0 var(--showcase-shadow);
    overflow: hidden;
}

.leaderboard-row::before {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .4rem;
    height: .35rem;
    background: color-mix(in srgb, var(--showcase-slab) 62%, transparent);
    border-radius: var(--radius-pill);
    opacity: .42;
}

.leaderboard-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: .55rem;
    background: var(--showcase-wood);
}

.leaderboard-row--first {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--showcase-energy) 34%, transparent), transparent 48%),
        color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
}

.leaderboard-row--second,
.leaderboard-row--third {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--showcase-steel) 30%, transparent), transparent 44%),
        color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
}

.leaderboard-row--first::after {
    background: var(--showcase-energy);
}

.leaderboard-row--second::after {
    background: var(--showcase-steel);
}

.leaderboard-row--third::after {
    background: var(--showcase-glass);
}

.leaderboard-row__rank {
    display: grid;
    place-items: center;
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    color: var(--color-text);
    z-index: 1;
}

.leaderboard-row__rank::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--showcase-energy) 70%, white), var(--showcase-energy));
    border: 3px solid var(--showcase-ink);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 0 var(--showcase-shadow);
}

.leaderboard-row--second .leaderboard-row__rank::before {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--showcase-steel) 72%, white), var(--showcase-steel));
    border-radius: var(--radius-sm);
    transform: rotate(45deg) scale(.84);
}

.leaderboard-row--third .leaderboard-row__rank::before {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--showcase-glass) 68%, white), var(--showcase-glass));
    clip-path: polygon(50% 4%, 96% 28%, 86% 86%, 14% 86%, 4% 28%);
    border-radius: 0;
}

.leaderboard-row__rank-number {
    position: relative;
    z-index: 1;
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1;
    color: #23180f;
}

.leaderboard-row__rank-mark {
    position: absolute;
    right: -0.55rem;
    bottom: -0.25rem;
    z-index: 1;
    min-width: 1.3rem;
    padding: 0.05rem 0.25rem;
    background: var(--color-surface);
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.leaderboard-row__identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    z-index: 1;
}

.leaderboard-row__name {
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.leaderboard-row__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.leaderboard-row__score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    min-width: 4.8rem;
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-surface) 82%, var(--showcase-stone));
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.2;
    z-index: 1;
}

.leaderboard-row__score strong {
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1;
}

.postcard-showcase {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 94%, white), var(--color-surface-2));
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-lg);
    box-shadow:
        0 6px 0 var(--showcase-shadow),
        inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 70%, white);
}

.postcard-frame {
    position: relative;
    isolation: isolate;
    aspect-ratio: 32 / 21;
    overflow: hidden;
    padding: var(--space-4);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-energy) 30%, transparent), transparent 42%),
        color-mix(in srgb, var(--color-surface-2) 88%, var(--color-bg));
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-md);
    box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--showcase-slab) 14%, transparent);
}

.postcard-frame::before {
    content: "";
    position: absolute;
    inset: var(--space-2);
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--color-border-strong) 64%, transparent);
    border-radius: var(--radius-sm);
}

.postcard-frame::after {
    content: "";
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 3rem;
    height: 3rem;
    background:
        radial-gradient(circle at 50% 50%, var(--showcase-energy) 0 32%, transparent 34%),
        linear-gradient(90deg, transparent 44%, var(--showcase-ink) 44% 56%, transparent 56%),
        linear-gradient(0deg, transparent 44%, var(--showcase-ink) 44% 56%, transparent 56%);
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-sm);
    opacity: .94;
}

.postcard-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--showcase-ink);
    box-shadow: 0 4px 0 var(--showcase-shadow);
}

.postcard-frame__caption {
    position: absolute;
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    border: 2px solid var(--showcase-ink);
    border-radius: var(--radius-sm);
    box-shadow: 0 3px 0 var(--showcase-shadow);
}

.postcard-frame__caption span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0;
}

.postcard-frame__caption strong {
    font-family: var(--font-serif);
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    .showcase-specimen {
        --showcase-ink: var(--color-outline);
        --showcase-slab: #000;
        --showcase-wood: #d67a35;
        --showcase-stone: #e9dcc4;
        --showcase-steel: #7c9198;
        --showcase-glass: #68ccd2;
        --showcase-energy: var(--color-energy);
        --showcase-shadow: rgba(0, 0, 0, 0.45);
    }

    .leaderboard-panel,
    .postcard-showcase {
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 38%),
            linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
        box-shadow:
            0 6px 0 rgba(0, 0, 0, 0.55),
            inset 0 0 0 1px color-mix(in srgb, var(--color-border-strong) 24%, transparent);
    }

    .leaderboard-row {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--showcase-wood) 22%, transparent), transparent 42%),
            color-mix(in srgb, var(--color-surface) 90%, #000);
    }

    .leaderboard-row--first {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--showcase-energy) 20%, transparent), transparent 50%),
            color-mix(in srgb, var(--color-surface) 92%, #000);
    }

    .leaderboard-row--second,
    .leaderboard-row--third {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--showcase-glass) 16%, transparent), transparent 45%),
            color-mix(in srgb, var(--color-surface) 90%, #000);
    }

    .leaderboard-row__score,
    .postcard-frame__caption {
        background: color-mix(in srgb, var(--color-surface) 92%, #000);
    }

    .postcard-frame {
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 44%),
            color-mix(in srgb, var(--color-surface-2) 92%, #000);
    }
}

.leaderboard-rules {
    max-width: 100%;
}

@media (max-width: 860px) {
    .showcase-specimen {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .leaderboard-panel,
    .postcard-showcase {
        padding: var(--space-4);
    }

    .leaderboard-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .leaderboard-row__score {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
        min-width: 0;
    }

    .postcard-frame__caption {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .leaderboard-panel *,
    .postcard-showcase * {
        animation: none !important;
        transition: none !important;
    }
}

/* ─── 19. Feature sections (E16-C-003) ──────────────────────────────────── */

/*
 * .feature-section         — pillar section (two-column layout on wide viewports)
 * .feature-section--reversed — art on right, body on left (alternating)
 * .feature-section--homage — centred single-column homage teaser
 *
 * .feature-section__layout — flex row wrapper
 * .feature-section__art    — SVG illustration column
 * .feature-section__body   — heading + text column
 * .feature-section__heading — section h2
 * .feature-section__lead   — lead paragraph
 *
 * .feature-list            — bullet list with accent markers
 * .feature-list__item
 * .feature-list__marker
 *
 * .homage-pillars          — 3-column grid inside homage section
 * .homage-pillar
 * .homage-pillar__icon
 * .homage-pillar__title
 * .homage-pillar__desc
 */

/* Layout: two columns (art + body), stacked on mobile */
.feature-section__layout {
    display: grid;
    gap: var(--space-12);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .feature-section__layout {
        grid-template-columns: 1fr 1fr;
    }

    /* Reversed: swap art and body order visually */
    .feature-section--reversed .feature-section__layout {
        direction: rtl;
    }

    .feature-section--reversed .feature-section__layout > * {
        direction: ltr;
    }
}

/* Centred single-column variant for homage section */
.feature-section__layout--centered {
    grid-template-columns: 1fr;
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
}

/* Art column: illustration container */
.feature-section__art {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

.feature-art-svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Body column */
.feature-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.feature-section__body--centered {
    align-items: center;
}

.feature-section__heading {
    margin-block: var(--space-2) 0;
}

.feature-section__lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 52ch;
}

.feature-section__body--centered .feature-section__lead {
    max-width: 60ch;
    text-align: center;
}

/* Feature bullet list */
.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.feature-list__marker {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-accent);
    border-radius: 50%;
    margin-top: 0.5em;
}

/* ── SVG colour tokens for feature art illustrations ─── */

/* Shared gradient stops */
.feat-grad-top { stop-color: var(--color-accent-light); }
.feat-grad-bot { stop-color: var(--color-surface); }

/* Era-bar chart (Pillar 1) */
.era-bar         { fill: var(--color-accent); }
.era-bar--1      { fill: var(--color-accent); opacity: 0.30; }
.era-bar--2      { fill: var(--color-accent); opacity: 0.42; }
.era-bar--3      { fill: var(--color-accent); opacity: 0.54; }
.era-bar--4      { fill: var(--color-accent); opacity: 0.65; }
.era-bar--5      { fill: var(--color-accent); opacity: 0.74; }
.era-bar--6      { fill: var(--color-accent); opacity: 0.83; }
.era-bar--7      { fill: var(--color-accent); opacity: 0.92; }
.era-bar--8      { fill: var(--color-accent); opacity: 1.00; }

.era-bar-label {
    fill: var(--color-text-muted);
    font-size: 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    text-anchor: middle;
}

.era-bar-label--final {
    fill: var(--color-accent-dark);
    font-weight: 700;
}

.feat-baseline { fill: var(--color-border-strong); }

/* Building interior art (Pillar 2) */
.int-facade      { fill: var(--color-surface-2); stroke: var(--color-border); stroke-width: 1.5; }
.int-roof        { fill: var(--color-accent); opacity: 0.65; }
.int-floor-line  { stroke: var(--color-border); stroke-width: 1.5; }
.int-door-frame  { fill: var(--color-border); }
.int-door-glow   { fill: var(--color-accent-light); }
.int-door-arch   { stroke: var(--color-accent); stroke-width: 2; fill: none; }
.int-window      { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1; }
.int-window--lit { fill: var(--color-accent-light); }
.int-pane        { stroke: var(--color-border); stroke-width: 1; }
.int-furniture   { fill: var(--color-accent); opacity: 0.70; }
.int-figure      { fill: var(--color-text-subtle); opacity: 0.75; }
.int-path        { fill: var(--color-surface-2); }

/* Chronicle art (Pillar 3) */
.chr-spine       { fill: var(--color-accent-dark); opacity: 0.70; }
.chr-page        { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1; }
.chr-line        { stroke: var(--color-border-strong); stroke-width: 1.5; opacity: 0.60; }
.chr-line--short { stroke-width: 1.5; opacity: 0.40; }
.chr-initial     { fill: var(--color-accent-light); stroke: var(--color-accent); stroke-width: 1; }
.chr-quill-shaft { stroke: var(--color-accent-mid); stroke-width: 1.5; fill: none; }
.chr-quill-tip   { fill: var(--color-accent); opacity: 0.85; }
.chr-quill-plume { fill: var(--color-accent-light); stroke: var(--color-accent-mid); stroke-width: 1; }
.chr-shadow      { fill: var(--color-border); opacity: 0.35; }

/* Homage section pillar icons */
.homage-icon-fill        { fill: var(--color-accent); }
.homage-icon-fill--dim   { fill: var(--color-accent-light); }
.homage-icon-stroke      { stroke: var(--color-accent); stroke-width: 2; fill: none; stroke-linejoin: round; }
.homage-icon-stroke--thin{ stroke-width: 1.25; }

/* Dark-mode: adjust feature art gradient stops */
@media (prefers-color-scheme: dark) {
    .feat-grad-top { stop-color: var(--color-accent-light); }
    .feat-grad-bot { stop-color: var(--color-surface); }
    .int-window--lit { fill: var(--color-accent-light); }
    .int-door-glow   { fill: var(--color-accent-light); }
}

/* Dark-mode badge--strong: --color-accent is #8aab5c in dark; white on that = 2.9:1 (fail).
 * Use dark text (#1a1714) instead: 6.9:1 ✓ AA  (ERAPOLIS-585) */
@media (prefers-color-scheme: dark) {
    .badge--strong {
        color: #1a1714;
    }
}

/* Reduced motion: no animation on feature SVGs (global §4 covers transitions;
   this block guards any future keyframe animations explicitly) */
@media (prefers-reduced-motion: reduce) {
    .feature-art-svg * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Homage pillars grid ─── */

.homage-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--grid-gap);
    margin-top: var(--space-8);
    width: 100%;
}

.homage-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.homage-pillar__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.homage-pillar__icon svg {
    width: 100%;
    height: 100%;
}

.homage-pillar__title {
    font-size: var(--text-base);
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.homage-pillar__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 28ch;
}

/* ─── 20. Press-kit media frames ─────────────────────────────────────────── */

.press-kit-layout,
.media-frame-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 18rem), 0.85fr);
    gap: var(--space-8);
    align-items: start;
}

.device-frame-specimen {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.device-frame-specimen__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}

.device-frame-specimen__caption {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.press-kit-sidebar {
    display: grid;
    gap: var(--space-5);
}

.press-kit-sidebar h2,
.media-preset-section h2,
.media-preset h3 {
    font-family: var(--font-serif);
    color: var(--color-text);
    line-height: 1.25;
}

.press-kit-sidebar h2,
.media-preset-section h2 {
    font-size: var(--text-xl);
}

.asset-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
}

.asset-list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
}

.media-rule-list {
    display: grid;
    gap: var(--space-3);
}

.media-rule {
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    padding-left: var(--space-3);
}

.media-preset-section {
    margin-top: var(--space-12);
}

.media-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--grid-gap);
    margin-top: var(--space-5);
}

.media-preset {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
}

.media-preset h3 {
    font-size: var(--text-base);
}

.media-preset p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.media-preset__size {
    color: var(--color-accent-dark) !important;
    font-family: var(--font-mono);
    font-size: var(--text-xs) !important;
    font-weight: 700;
}

.media-preset__caption {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

@media (max-width: 760px) {
    .press-kit-layout,
    .media-frame-showcase {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .device-frame-specimen__image {
        transition: none !important;
    }
}

/* ─── 21. Styleguide-specific helpers ────────────────────────────────────── */

.sg-section {
    padding-block: var(--space-12);
    border-bottom: 1px solid var(--color-border);
}

.sg-section:last-child {
    border-bottom: none;
}

.sg-section__title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.brand-baseline-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
    gap: var(--grid-gap);
    align-items: stretch;
}

.brand-key-art {
    margin: 0;
}

.brand-key-art img {
    width: 100%;
    height: auto;
    display: block;
    border: 3px solid var(--color-outline);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    background: var(--color-surface);
}

.brand-key-art figcaption {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.brand-baseline-notes {
    display: grid;
    gap: var(--space-3);
}

.material-chip {
    padding: var(--space-4);
    border: 2px solid var(--color-outline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.material-chip span,
.material-chip strong {
    display: block;
}

.material-chip span {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

.material-chip strong {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-text);
}

.material-chip--wood { background: #d8a46f; }
.material-chip--stone { background: #d0ccbc; }
.material-chip--glass { background: #bcebee; }

.material-chip--wood span,
.material-chip--wood strong,
.material-chip--stone span,
.material-chip--stone strong,
.material-chip--glass span,
.material-chip--glass strong {
    color: #23180f;
}

.material-chip--synth {
    background: #263139;
}

.material-chip--synth span,
.material-chip--synth strong {
    color: #e9dcc4;
}

.brand-readiness-table {
    margin-top: var(--space-6);
}

@media (max-width: 760px) {
    .brand-baseline-grid {
        grid-template-columns: 1fr;
    }
}

/* Swatch grid */
.sg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.sg-swatch {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 7rem;
}

.sg-swatch__color {
    height: 4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.sg-swatch__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    line-height: 1.4;
}

.sg-swatch__name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

/* Token table */
.sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.sg-table th,
.sg-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: baseline;
}

.sg-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
}

.sg-table code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

/* Row of component examples */
.sg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Type scale specimen */
.sg-type-specimen {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sg-type-specimen__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: var(--space-4);
}

.sg-type-specimen__sample {
    flex: 1;
    color: var(--color-text);
    line-height: 1.3;
}

.sg-type-specimen__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* Dark preview panel */
.sg-dark-preview {
    background: #111009;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    border: 1px solid #302d24;
    margin-top: var(--space-6);
}

.sg-dark-preview p {
    color: #f0ece4;
}

.sg-dark-preview .sg-swatch__color {
    border-color: #302d24;
}

/* ─── 22. Wiki visual design surfaces (ERAPOLIS-1052) ───────────────────── */

.wiki-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-16) var(--space-12);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--color-border) 16%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-border) 14%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-accent-light) 54%, transparent), transparent 58%),
        var(--color-bg);
    background-size: 32px 32px, 32px 32px, auto, auto;
}

.wiki-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.25rem;
    z-index: -1;
    background:
        linear-gradient(90deg,
            var(--color-accent) 0 12%,
            color-mix(in srgb, var(--color-accent) 82%, var(--color-surface)) 12% 23%,
            color-mix(in srgb, var(--color-accent) 66%, var(--color-surface)) 23% 35%,
            color-mix(in srgb, var(--color-accent) 52%, var(--color-surface)) 35% 48%,
            color-mix(in srgb, var(--color-accent) 40%, var(--color-surface)) 48% 62%,
            color-mix(in srgb, var(--color-accent) 30%, var(--color-surface)) 62% 76%,
            color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)) 76% 88%,
            color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)) 88% 100%);
    border-block: 2px solid var(--color-border-strong);
}

.wiki-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
    gap: var(--space-10);
    align-items: center;
}

.wiki-hero__copy {
    display: grid;
    gap: var(--space-5);
}

.wiki-hero__lead {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    max-width: 52ch;
}

.wiki-hero__signals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wiki-hero__signals span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.65rem;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wiki-hero__art {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.wiki-hero__art img {
    width: 100%;
    height: auto;
    border: 3px solid var(--color-outline);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.wiki-hero__art figcaption {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.wiki-surface {
    padding-block: var(--space-12) var(--space-16);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent 26rem),
        var(--color-bg);
}

.wiki-surface__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 25rem), 0.62fr);
    gap: var(--space-6);
    align-items: end;
    margin-bottom: var(--space-8);
}

.wiki-search-panel {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 88%, transparent), transparent),
        var(--color-surface-2);
    box-shadow: var(--shadow-sm);
}

.wiki-search-panel__label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wiki-search-panel__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
}

.wiki-search-panel input {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
}

.wiki-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 0.32fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.wiki-index-panel,
.wiki-article-panel,
.wiki-thumbnail-section {
    position: relative;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.wiki-index-panel::before,
.wiki-article-panel::before,
.wiki-thumbnail-section::before {
    content: "";
    position: absolute;
    inset: var(--space-2);
    pointer-events: none;
    border: 1px dashed color-mix(in srgb, var(--color-border-strong) 64%, transparent);
    border-radius: var(--radius-md);
}

.wiki-index-panel {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
}

.wiki-panel-heading {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
}

.wiki-panel-heading h3,
.wiki-panel-heading h4 {
    font-family: var(--font-serif);
    line-height: 1.25;
}

.wiki-panel-heading__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 2.5rem;
    min-height: 2.25rem;
    padding-inline: var(--space-2);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 900;
}

.wiki-category-rail {
    display: grid;
    gap: var(--space-3);
}

.wiki-category-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 3.75rem;
    padding: var(--space-3);
    color: inherit;
    text-decoration: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--color-accent-light) 56%, transparent), transparent 58%),
        var(--color-surface-2);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}

.wiki-category-chip:hover,
.wiki-category-chip:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.wiki-category-chip__mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 900;
}

.wiki-category-chip:nth-child(2) .wiki-category-chip__mark {
    border-radius: var(--radius-sm);
}

.wiki-category-chip:nth-child(3) .wiki-category-chip__mark {
    clip-path: polygon(50% 3%, 96% 28%, 86% 88%, 14% 88%, 4% 28%);
    border-radius: 0;
}

.wiki-category-chip:nth-child(4) .wiki-category-chip__mark {
    border-radius: var(--radius-sm) var(--radius-sm) 50% 50%;
}

.wiki-category-chip__label {
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-weight: 800;
    line-height: 1.2;
}

.wiki-category-chip__count {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
}

.wiki-material-note {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 2px dashed var(--color-border);
}

.wiki-material-note span {
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wiki-material-note p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.wiki-article-panel {
    overflow: hidden;
}

.wiki-era-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.42fr);
    gap: var(--space-5);
    align-items: end;
    padding: var(--space-6);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-accent-light) 68%, transparent), transparent 42%),
        linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
    border-bottom: 2px solid var(--color-border-strong);
}

.wiki-era-header__copy {
    display: grid;
    gap: var(--space-2);
}

.wiki-era-header__eyebrow {
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wiki-era-header__copy p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.wiki-era-header__bands {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: end;
    min-height: 5rem;
    padding: var(--space-3);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface) 86%, var(--color-bg));
}

.wiki-era-band {
    display: block;
    min-height: 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--color-surface-2);
}

.wiki-era-band:nth-child(1) { height: 1.25rem; }
.wiki-era-band:nth-child(2) { height: 1.65rem; }
.wiki-era-band:nth-child(3) { height: 2.05rem; }
.wiki-era-band:nth-child(4) { height: 2.45rem; }
.wiki-era-band:nth-child(5) { height: 2.85rem; }
.wiki-era-band:nth-child(6) { height: 3.25rem; }
.wiki-era-band:nth-child(7) { height: 3.65rem; }
.wiki-era-band:nth-child(8) { height: 4.05rem; }

.wiki-era-band--active {
    background: var(--color-accent);
    border-color: var(--color-border-strong);
    box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--color-outline) 34%, transparent);
}

.wiki-entry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.38fr);
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-6);
}

.wiki-entry {
    min-width: 0;
}

.wiki-entry h4 {
    font-size: var(--text-lg);
}

.wiki-entry li::marker {
    color: var(--color-accent);
}

.wiki-infobox {
    overflow: hidden;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, transparent), transparent),
        var(--color-surface-2);
    box-shadow: var(--shadow-sm);
}

.wiki-infobox__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-bottom: 2px solid var(--color-border-strong);
    background: var(--color-surface);
}

.wiki-infobox__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.wiki-stat-list {
    display: grid;
    gap: var(--space-2);
}

.wiki-stat-list div {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.42fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.wiki-stat-list dt {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wiki-stat-list dd {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
}

.wiki-live-signal {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    margin-inline-end: var(--space-1);
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-energy);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-energy) 62%, transparent);
    animation: wiki-signal-pulse 1800ms var(--easing-standard) infinite;
    vertical-align: -0.08em;
}

@keyframes wiki-signal-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-energy) 62%, transparent);
    }
    55% {
        box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--color-energy) 0%, transparent);
    }
}

.wiki-thumbnail-section {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);
    padding: var(--space-6);
}

.wiki-thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--grid-gap);
}

.wiki-thumbnail-card {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}

.wiki-thumbnail-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.wiki-thumbnail-card figcaption {
    display: grid;
    gap: var(--space-1);
    min-height: 3.5rem;
}

.wiki-thumbnail-card strong {
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: 1.25;
}

.wiki-thumbnail-card span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

@media (prefers-color-scheme: dark) {
    .wiki-hero,
    .wiki-surface {
        background-color: var(--color-bg);
    }

    .wiki-hero__art img,
    .wiki-infobox__image,
    .wiki-thumbnail-card img {
        background: var(--color-surface-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wiki-category-chip,
    .wiki-live-signal {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 920px) {
    .wiki-hero__layout,
    .wiki-layout,
    .wiki-entry-grid,
    .wiki-surface__header {
        grid-template-columns: 1fr;
    }

    .wiki-era-header {
        grid-template-columns: 1fr;
    }

    .wiki-index-panel {
        position: static;
    }
}

@media (max-width: 560px) {
    .wiki-hero {
        padding-block-start: var(--space-10);
    }

    .wiki-search-panel__control {
        grid-template-columns: 1fr;
    }

    .wiki-index-panel,
    .wiki-era-header,
    .wiki-entry-grid,
    .wiki-thumbnail-section {
        padding: var(--space-4);
    }

    .wiki-era-header__bands {
        gap: var(--space-1);
        min-height: 4.25rem;
        padding: var(--space-2);
    }

    .wiki-stat-list div {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* ─── 24. Site footer ────────────────────────────────────────────────────── */

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-8);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.site-footer__copy {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: none;
}

.site-footer__nav ul {
    display: flex;
    gap: var(--space-6);
    list-style: none;
}

.site-footer__nav a {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
    color: var(--color-text);
}

/* ─── 25. Utilities ──────────────────────────────────────────────────────── */

/* Visually hidden (accessible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Text helpers */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-muted    { color: var(--color-text-muted); }
.text-accent   { color: var(--color-accent); }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.text-lg       { font-size: var(--text-lg); }
.text-serif    { font-family: var(--font-serif); }
.text-mono     { font-family: var(--font-mono); }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.uppercase     { text-transform: uppercase; letter-spacing: 0.08em; }

/* Spacing helpers */
.mt-auto  { margin-top: auto; }
.mt-6     { margin-top: var(--space-6); }
.mb-0     { margin-bottom: 0; }
.gap-2    { gap: var(--space-2); }
.gap-4    { gap: var(--space-4); }
.gap-6    { gap: var(--space-6); }

/* Display helpers */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* Surface helpers */
.surface      { background: var(--color-surface); }
.surface-2    { background: var(--color-surface-2); }

/* Border helpers */
.rounded      { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }

/* Shadow helpers */
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }

/* ════════════════════════════════════════════════════════════════════════════
   WIKI PROMO SECTION  (ERAPOLIS-1078)
   Homepage section promoting the wiki knowledge base.
   Full light/dark + reduced-motion + responsive support.
   Token-only: no hard-coded colours, no transitions that ignore
   prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Lead paragraph ───────────────────────────────────────────────────────── */

.wiki-promo__lead {
    max-width: 52rem;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.75;
    margin-block: 0 var(--space-10);
}

/* ── Card grid ────────────────────────────────────────────────────────────── */

.wiki-promo__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 40rem) {
    .wiki-promo__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 60rem) {
    .wiki-promo__cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Individual card ──────────────────────────────────────────────────────── */

.wiki-promo__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--duration-fast) var(--easing-out),
                border-color var(--duration-fast) var(--easing-out),
                transform var(--duration-fast) var(--easing-out);
}

/* Reduced-motion: disable transform + slow transitions on hover */
@media (prefers-reduced-motion: reduce) {
    .wiki-promo__card {
        transition: none;
    }
}

.wiki-promo__card:hover,
.wiki-promo__card:focus-visible {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .wiki-promo__card:hover,
    .wiki-promo__card:focus-visible {
        transform: none;
    }
}

.wiki-promo__card:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* "Full width" variant — spans all columns on the widest breakpoint so the
   "Explore the full Wiki" card acts as a clear CTA row beneath the two
   category cards. At narrower widths it simply stacks like the others. */
@media (min-width: 60rem) {
    .wiki-promo__card--full {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
    }

    .wiki-promo__card--full .wiki-promo__card-icon { flex-shrink: 0; }
    .wiki-promo__card--full .wiki-promo__card-title { margin-top: 0; }
    .wiki-promo__card--full .wiki-promo__card-cta { margin-top: auto; margin-left: auto; }
}

/* ── Card internals ───────────────────────────────────────────────────────── */

.wiki-promo__card-icon {
    color: var(--color-accent);
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wiki-promo__card-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.wiki-promo__card-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.wiki-promo__card-cta {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    margin-top: var(--space-2);
}

/* Dark-mode accent shifts are handled by the design-token overrides in §3;
   no hard-coded colour values are needed here — the card inherits correctly. */

/* ════════════════════════════════════════════════════════════════════════════
   WIKI ARTICLE  (ERAPOLIS-592)
   Constrained-markup renderer output + accessible article template.
   Uses existing design tokens only; full light/dark + print support.
   ════════════════════════════════════════════════════════════════════════════ */

.wiki-section {
    padding-block: var(--space-10);
}

.wiki-article {
    /* Two-column grid on wide screens: body + infobox aside. */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 56rem) {
    .wiki-article {
        grid-template-columns: minmax(0, 1fr) 18rem;
        grid-template-areas:
            "header  header"
            "body    infobox"
            "cats    infobox"
            "meta    meta";
    }
    .wiki-article__header     { grid-area: header; }
    .wiki-article__body       { grid-area: body; }
    .wiki-infobox             { grid-area: infobox; align-self: start; }
    .wiki-article__categories { grid-area: cats; }
    .wiki-article__meta       { grid-area: meta; }
}

.wiki-article__header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-3);
}

.wiki-article__title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: 1.15;
    margin: 0;
}

.wiki-article__body {
    min-width: 0; /* allow long words / <pre> to wrap within the grid cell */
}

/* ── Infobox ─────────────────────────────────────────────────────────────── */

.wiki-infobox {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.wiki-infobox__title {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.wiki-infobox__list { margin: 0; }

.wiki-infobox__row {
    display: grid;
    grid-template-columns: minmax(6rem, 40%) 1fr;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}
.wiki-infobox__row:last-child { border-bottom: 0; }

.wiki-infobox__label {
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
}
.wiki-infobox__value { margin: 0; }

/* ── Internal links + red links ──────────────────────────────────────────── */

.wiki-link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.wiki-link:hover,
.wiki-link:focus-visible { color: var(--color-accent-dark); }

/* Red link: page-does-not-exist. Distinct colour + dotted underline so it is
   obvious without relying on colour alone (also carries title + data attr). */
.wiki-link--new {
    color: var(--color-danger);
    text-decoration-style: dotted;
}
.wiki-link--new::after {
    content: " ?";
    font-size: 0.85em;
    vertical-align: super;
    opacity: 0.8;
}
.wiki-link--new:hover,
.wiki-link--new:focus-visible { color: var(--color-danger); }

/* ── Category footer + edited line ───────────────────────────────────────── */

.wiki-article__categories {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}
.wiki-categories__label {
    font-weight: 600;
    color: var(--color-text-muted);
    margin-right: var(--space-2);
}
.wiki-categories__list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.wiki-categories__list li::after {
    content: "·";
    margin-left: var(--space-2);
    color: var(--color-text-subtle);
}
.wiki-categories__list li:last-child::after { content: ""; margin: 0; }

.wiki-article__meta {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}
.wiki-article__history-link { margin-left: var(--space-2); }

/* ── Missing-page notice ─────────────────────────────────────────────────── */

.wiki-missing-notice {
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

/* ── Print-friendly: drop the infobox shadow, expand to one column, show URLs
      for internal links so a printed article is self-describing. ─────────── */

@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .nav-toggle { display: none !important; }

    .wiki-article {
        display: block;
        color: #000;
    }
    .wiki-infobox {
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid;
        margin-bottom: var(--space-4);
    }
    .wiki-link { color: #000; text-decoration: underline; }
    .wiki-link--new::after { content: " (page does not exist)"; }
}

/* ── Search page (ERAPOLIS-595) ──────────────────────────────────────────── */

.wiki-search-page {
    padding: var(--space-8) 0;
}

.wiki-search-page__header {
    margin-bottom: var(--space-6);
}

/* Search form */
.wiki-search-form {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 88%, transparent), transparent),
        var(--color-surface-2);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-8);
}

.wiki-search-form__label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
}

.wiki-search-form__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
}

.wiki-search-form__control input[type="search"] {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--easing-standard);
}

.wiki-search-form__control input[type="search"]:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-color: var(--color-accent);
}

/* Category filter chips row */
.wiki-search-form__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.wiki-search-form__filter-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.wiki-search-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: border-color var(--duration-fast), color var(--duration-fast),
                background var(--duration-fast);
}

.wiki-search-filter-chip:hover,
.wiki-search-filter-chip:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.wiki-search-filter-chip:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.wiki-search-filter-chip--active {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    color: var(--color-accent);
}

/* Result count live region */
.wiki-search-count {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    min-height: 1.5em; /* prevents layout shift when count updates */
}

/* Rate-limit error */
.wiki-search-rate-limit {
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
    color: var(--color-danger);
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

/* Results list */
.wiki-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

.wiki-search-result__card {
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}

.wiki-search-result__card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.wiki-search-result__title {
    font-size: var(--text-lg);
    font-weight: 800;
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.wiki-search-result__title .wiki-link {
    text-decoration: none;
    color: var(--color-text);
}

.wiki-search-result__title .wiki-link:hover,
.wiki-search-result__title .wiki-link:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
}

.wiki-search-result__category {
    display: inline-flex;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    text-decoration: none;
}

.wiki-search-result__snippet {
    margin: var(--space-2) 0 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.wiki-search-result__snippet mark {
    background: color-mix(in srgb, var(--color-energy) 30%, transparent);
    color: inherit;
    border-radius: var(--radius-xs);
    padding: 0 0.15em;
    font-weight: 700;
}

/* Empty-state */
.wiki-search-empty {
    padding: var(--space-8) var(--space-5);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
/* ─── 25. Leaderboard pages (ERAPOLIS-602) ───────────────────────────────── */

/* ── Hub grid ──────────────────────────────────────────────────────────────── */

.lb-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.lb-hub-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.lb-hub-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lb-hub-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}

.lb-hub-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
    max-width: 48ch;
}

.lb-hub-card__footer {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */

.lb-breadcrumb {
    color: var(--color-accent);
    text-decoration: none;
}
.lb-breadcrumb:hover,
.lb-breadcrumb:focus-visible {
    text-decoration: underline;
}

/* ── Metric switcher tabs ─────────────────────────────────────────────────── */

.lb-metric-switcher {
    margin-top: var(--space-6);
}

.lb-metric-switcher__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.lb-metric-switcher__tab {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--duration-fast) var(--easing-out),
                color var(--duration-fast) var(--easing-out);
}

.lb-metric-switcher__tab:hover,
.lb-metric-switcher__tab:focus-visible {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    outline-offset: 2px;
}

.lb-metric-switcher__tab--active {
    background: var(--color-accent);
    border-color: var(--color-accent-dark);
    color: var(--color-surface);
}
.lb-metric-switcher__tab--active:hover {
    background: var(--color-accent-dark);
}

@media (prefers-color-scheme: dark) {
    .lb-metric-switcher__tab--active {
        color: var(--color-bg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-metric-switcher__tab {
        transition: none;
    }
}

/* ── Board table ───────────────────────────────────────────────────────────── */

.lb-board-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.lb-board-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--color-surface);
}

.lb-board-table__th {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border-bottom: 2px solid var(--color-border-strong);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
    white-space: nowrap;
}

.lb-board-table__th--rank  { width: 5rem;  }
.lb-board-table__th--era   { width: 4rem;  }
.lb-board-table__th--age   { width: 5rem;  }
.lb-board-table__th--score { width: 9rem; text-align: right; }

.lb-board-row {
    border-bottom: 1px solid var(--color-border);
    transition: background var(--duration-fast) var(--easing-out);
}
.lb-board-row:last-child {
    border-bottom: 0;
}
.lb-board-row:hover {
    background: color-mix(in srgb, var(--color-accent-light) 60%, transparent);
}

/* Top-3 accent stripes (same material palette as the specimen cards) */
.lb-board-row.leaderboard-row--first {
    background: color-mix(in srgb, var(--color-energy) 12%, var(--color-surface));
}
.lb-board-row.leaderboard-row--second,
.lb-board-row.leaderboard-row--third {
    background: color-mix(in srgb, var(--color-accent-light) 25%, var(--color-surface));
}

@media (prefers-reduced-motion: reduce) {
    .lb-board-row { transition: none; }
}

.lb-board-row td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    color: var(--color-text);
}

.lb-board-row__rank {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    font-weight: 700;
}

.lb-board-row__rank-num {
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--color-text);
    min-width: 1.75rem;
    text-align: right;
}

.lb-board-row__rank-mark {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.08rem 0.3rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.lb-board-row__handle {
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
}

.lb-board-row__era {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}

.lb-board-row__age {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.lb-board-row__score {
    text-align: right;
    white-space: nowrap;
}

.lb-board-row__score strong {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

.lb-board-row__unit {
    display: block;
    font-size: var(--text-xs);
    margin-top: 0.1rem;
}

/* ── Empty / error state ──────────────────────────────────────────────────── */

.lb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

.wiki-search-empty strong {
    color: var(--color-text);
}

/* Responsive: stack the search form control on small screens */
@media (max-width: 480px) {
    .wiki-search-form__control {
        grid-template-columns: 1fr;
    }
    .wiki-search-form__control button { width: 100%; }
}

/* Print: expand search results, drop chips */
@media print {
    .wiki-search-form,
    .wiki-search-filter-chip { display: none; }
    .wiki-search-result__card { border: 1px solid #999; box-shadow: none; }
    .wiki-search-result__snippet mark { background: none; font-weight: bold; }
}
.lb-empty-state--inline {
    padding: var(--space-6) var(--space-4);
}

.lb-empty-state__icon {
    opacity: 0.55;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.lb-empty-state__heading {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.lb-empty-state__body {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 48ch;
    margin: 0;
    line-height: 1.6;
}

.lb-empty-state__body--sm {
    font-size: var(--text-xs);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.lb-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.lb-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.lb-pagination__page,
.lb-pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-3);
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--duration-fast) var(--easing-out);
}

.lb-pagination__page:hover,
.lb-pagination__btn:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
}

.lb-pagination__page--current {
    background: var(--color-accent);
    border-color: var(--color-accent-dark);
    color: #fff;
    cursor: default;
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .lb-pagination__page--current {
        color: var(--color-bg);
    }
}

.lb-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.lb-pagination__summary {
    margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
    .lb-pagination__page,
    .lb-pagination__btn { transition: none; }
}

@media (max-width: 560px) {
    .lb-board-table__th--age,
    .lb-board-row__age {
        display: none;
    }
}