/* ============================================================================
   anarand.css — the token contract realised
   Theme for @ti-engine/web-content. Drops into Site/themes/.

   Rules this file obeys:
   · no inline styles anywhere (CSP: nonces + Alpine CSP build)
   · every value comes from a token; nothing is inlined
   · --radius: 0 — sharp corners are deliberate
   · contrast roles enforced by naming (see §2)
   · all motion behind prefers-reduced-motion (§14)
   · fonts are loaded by fonts.css, not here

   Class vocabulary: flat kebab-case throughout. Ported components keep the
   names they already have in anarand-dark-theme.css so there is no seam.
   ========================================================================= */

/* ===========================================================================
   1. TOKENS
   ========================================================================= */

:root {
    /* --- Background layers, darkest to lightest ------------------------- */
    --bg-abyss: #06060a;
    --bg-deep: #0a0a10;
    --bg-mid: #0f0f17;
    --bg-surface: #14141e;
    --bg-elevated: #1a1a26;
    --bg-hover: #22222f;

    /* --- Text hierarchy ------------------------------------------------- */
    --text-primary: #e2ded6;      /* 14.7:1 — anything */
    --text-secondary: #a8a49c;    /*  7.9:1 — anything */
    --text-tertiary: #6e6b65;     /*  3.7:1 — LARGE TEXT ONLY (>=24px / >=19px bold) */
    --text-dim: #4a483f;          /*  2.2:1 — DECORATION ONLY */

    /* --- Scarlet: Ra'maen, danger, drama -------------------------------- */
    --accent-scarlet: #9b1b1b;            /* 2.4:1 — STRUCTURAL ONLY */
    --accent-scarlet-bright: #c42020;     /* 3.4:1 — large display text, borders, dots */
    --accent-scarlet-glow: #e63030;
    --accent-scarlet-dim: #5a1111;

    /* --- Gold: nobility, age, dividers ---------------------------------- */
    --accent-gold: #b8944f;               /* 6.9:1 — anything, incl. links */
    --accent-gold-bright: #d4ad5e;        /* 9.3:1 — anything */
    --accent-gold-dim: #7a6234;           /* 3.4:1 — borders, rules, decoration */

    /* --- Elemental: Overlord accents ------------------------------------ */
    --element-death: #5a7a9a;
    --element-life: #7a9a5a;
    --element-fire: #9a5a2a;
    --element-earth: #8a7a50;
    --element-water: #4a7a8a;
    --element-air: #7a7a9a;

    /* --- Per-release accent slots (overridden by a theme scope, §16) ---- */
    --accent-primary: var(--accent-scarlet);
    --accent-primary-bright: var(--accent-scarlet-bright);
    --accent-primary-dim: var(--accent-scarlet-dim);
    --accent-secondary: var(--accent-gold);
    --accent-secondary-bright: var(--accent-gold-bright);
    --accent-secondary-dim: var(--accent-gold-dim);

    /* --- Type families -------------------------------------------------- */
    --font-display: 'Cormorant Unicase', serif;
    --font-label: 'Cormorant SC', serif;
    --font-accent: 'Cormorant Garamond', serif;
    --font-body: 'Spectral', serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* --- Type scale ----------------------------------------------------- */
    --text-2xs: 0.6875rem;  /* 11px — AMENDMENT, see §17 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1.1875rem; /* 19px */
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-display: clamp(2.2rem, 5vw, 3.8rem);
    --text-display-sm: clamp(1.6rem, 3.2vw, 2.4rem); /* AMENDMENT */

    /* --- Weight --------------------------------------------------------- */
    --weight-body: 500;     /* Spectral at 500, not 400 — halation control */
    --weight-label: 500;
    --weight-strong: 600;

    /* --- Leading -------------------------------------------------------- */
    --leading-prose: 1.8;
    --leading-tight: 1.2;
    --leading-snug: 1.5;    /* AMENDMENT — cards, captions, meta */
    --leading-verse: 2.2;   /* AMENDMENT — verse blocks */

    /* --- Tracking ------------------------------------------------------- */
    --track-display: 0.06em;
    --track-label: 0.35em;
    --track-wide: 0.2em;
    --track-mid: 0.12em;
    --track-snug: 0.08em;
    --track-tight: 0.04em;

    /* --- Measure -------------------------------------------------------- */
    --measure-narrow: 31.25rem; /* 500px — AMENDMENT: closing text, audio player */
    --measure-prose: 34rem;
    --measure-wide: 54rem;
    --measure-page: 75rem;

    /* The whole-site box — the one value to change to widen or narrow the page.

       `--measure-page` already caps the CONTENT of a section at 75rem. What this adds is a cap on the section
       element itself, which is what a hero's image fills: it is full-bleed until the element it belongs to is
       bounded. A section's background layer is not held by it — see the band rule by the `bg-*` utilities.

       It also bounds the topbar and footer CONTENTS, so the whole page lines up on one column. The bands themselves
       stay full width on purpose — see the note by the rule below.

       Set it to `100%` for a full-bleed site; every rule that consumes it then resolves to no constraint at all. */
    --measure-site: 75rem;
    --measure-mark: 18rem;      /* AMENDMENT: sigil, cover marks */
    --measure-cover: 24rem;     /* AMENDMENT: book jacket in a centred hero */

    /* --- Structure ------------------------------------------------------ */
    --radius: 0;
    --rule-hairline: 1px solid rgba(184, 148, 79, 0.10);
    --rule-strong: 1px solid rgba(184, 148, 79, 0.35);
    --rule-scarlet: 1px solid rgba(155, 27, 27, 0.15);
    --transition: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* --- Spacing -------------------------------------------------------- */
    --space-section: clamp(80px, 9vw, 128px);
    --space-block: 2rem;
    --space-tight: 0.8rem;
    --space-page-x: clamp(1.25rem, 4vw, 3rem); /* AMENDMENT — gutter */
    --space-card: 1.5rem;                      /* AMENDMENT */
    --space-card-lg: 2.5rem;                   /* AMENDMENT */
    --space-gap: 1.2rem;                       /* AMENDMENT */

    /* --- Derived borders (never inlined) -------------------------------- */
    --border-gold-wash: rgba(184, 148, 79, 0.08);
    --border-gold-faint: rgba(184, 148, 79, 0.10);
    --border-gold-soft: rgba(184, 148, 79, 0.15);
    --border-gold-mid: rgba(184, 148, 79, 0.25);
    --border-scarlet-faint: rgba(155, 27, 27, 0.15);
    --border-scarlet-soft: rgba(155, 27, 27, 0.20);
    --border-neutral-faint: rgba(255, 255, 255, 0.04);
    --border-neutral-soft: rgba(255, 255, 255, 0.06);
    --border-neutral-mid: rgba(255, 255, 255, 0.08);

    /* --- Derived fills -------------------------------------------------- */
    --fill-gold-wash: rgba(184, 148, 79, 0.06);
    --fill-gold-hover: rgba(184, 148, 79, 0.10);
    --select-scarlet: rgba(155, 27, 27, 0.30);

    /* --- Atmospherics --------------------------------------------------- */
    --glow-scarlet-hero: rgba(155, 27, 27, 0.08);
    --glow-scarlet-section: rgba(155, 27, 27, 0.06);
    --glow-scarlet-center: rgba(155, 27, 27, 0.05);
    --glow-scarlet-prose: rgba(155, 27, 27, 0.04);
    --glow-gold-dot: rgba(184, 148, 79, 0.30);
    --glow-scarlet-dot: rgba(155, 27, 27, 0.40);
    --glow-light-faint: rgba(226, 222, 214, 0.03);
    --noise-opacity: 0.4;

    /* --- Layers --------------------------------------------------------- */
    --layer-overlay: 1;
    --layer-content: 2;
    --layer-topbar: 100;
    --layer-noise: 9999;

    /* --- Chrome --------------------------------------------------------- */
    --topbar-height: 3.5rem;

    /* --- Breakpoints (documentation + JS; @media needs literals) -------- */
    --bp-sm: 480px;   /* single column */
    --bp-md: 768px;   /* panels & cards stack, topbar collapses */
    --bp-lg: 1024px;  /* multi-column sections go two-up */
}

/* ===========================================================================
   2. RESET + BASE
   ========================================================================= */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-abyss);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-body);
    line-height: var(--leading-prose);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-gold-bright);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 2px;
}

::selection {
    background: var(--select-scarlet);
    color: var(--text-primary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--space-page-x);
    top: 0;
    transform: translateY(-200%);
    z-index: var(--layer-noise);
    background: var(--bg-surface);
    border: var(--rule-strong);
    color: var(--accent-gold);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    padding: var(--space-tight) var(--space-block);
    transition: transform var(--transition);
}

.skip-link:focus {
    transform: translateY(0);
}

/* --- Noise overlay — a proper layer, not a body::after hack ------------- */
.noise-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--layer-noise);
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ===========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */

.section {
    position: relative;
    padding: var(--space-section) var(--space-page-x);
}

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

/* Measure containers. min() means the prose measure needs no breakpoint —
   it collapses to the viewport with the page gutter intact. */
.wrap-prose {
    width: min(100%, var(--measure-prose));
    margin-inline: auto;
}

.wrap-wide {
    width: min(100%, var(--measure-wide));
    margin-inline: auto;
}

.wrap-page {
    width: min(100%, var(--measure-page));
    margin-inline: auto;
}

/* The site box.

   ONLY the content is boxed. The topbar and the footer stay full-bleed bands, because both carry a hairline rule and
   sit on a page of the SAME colour (`--bg-abyss` on each) — so the border is the only edge the eye can find, and
   stopping it mid-viewport reads as a broken layout rather than as a boundary. Their inner wraps take the same
   measure instead, which lines their contents up with the content column exactly.

   Set `--measure-site: 100%` and this resolves to no constraint, restoring the full-bleed page. */
main#content {
    width: min(100%, var(--measure-site));
    margin-inline: auto;
}

.stack > * + * {
    margin-top: var(--space-block);
}

.stack-tight > * + * {
    margin-top: var(--space-tight);
}

/* --- Background layer utilities ----------------------------------------- */
.bg-abyss { background-color: var(--bg-abyss); --band-color: var(--bg-abyss); }
.bg-deep { background-color: var(--bg-deep); --band-color: var(--bg-deep); }
.bg-mid { background-color: var(--bg-mid); --band-color: var(--bg-mid); }
.bg-surface { background-color: var(--bg-surface); --band-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); --band-color: var(--bg-elevated); }

/* A section's layer is a full-bleed band, although the section itself stays in the site box (`main#content`,
   `--measure-site`): the border image paints the layer's colour past both sides out to the viewport's edges, and
   the content keeps the measure of the section's wrap. An outset is ink, not layout — it takes no space, moves
   nothing and adds no scroll — and unlike a spread shadow it needs no clip-path, which would also cut off anything
   the section lets overflow. The hero is left boxed: its image is capped at the site width on purpose. */
.section:is(.bg-abyss, .bg-deep, .bg-mid, .bg-surface, .bg-elevated) {
    border-image: conic-gradient(var(--band-color) 0 0) fill 0 // 0 100vmax;
}

/* --- Atmospheric overlays ---------------------------------------------- */
.glow-scarlet,
.glow-scarlet-center,
.fade-top,
.vignette {
    position: relative;
    overflow: hidden;
}

.glow-scarlet::before,
.glow-scarlet-center::before,
.vignette::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.glow-scarlet::before {
    background: radial-gradient(ellipse at 50% 0%, var(--glow-scarlet-section) 0%, transparent 50%);
}

.glow-scarlet-center::before {
    background: radial-gradient(ellipse at center, var(--glow-scarlet-center) 0%, transparent 70%);
}

.vignette::before {
    background: radial-gradient(ellipse at center, transparent 40%, var(--bg-abyss) 100%);
}

.fade-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, var(--bg-abyss), transparent);
    pointer-events: none;
    z-index: var(--layer-overlay);
}

.glow-scarlet > *,
.glow-scarlet-center > *,
.fade-top > *,
.vignette > * {
    position: relative;
    z-index: var(--layer-content);
}

/* ===========================================================================
   4. TYPE ROLES
   ========================================================================= */

.anarand-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

.section-header {
    font-family: var(--font-label);
    font-weight: var(--weight-label);
    font-size: var(--text-2xl);
    letter-spacing: var(--track-snug);
    text-transform: uppercase;
    text-align: center;
    color: var(--text-primary);
    line-height: var(--leading-tight);
    margin: 0;
}

.section-eyebrow {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold);
    text-align: center;
    margin: 0 0 var(--space-block);
}

/* --text-tertiary is 3.7:1 — legal only at >=24px, so these are pinned to
   --text-xl. Never drop one of them to --text-lg; use --text-secondary instead. */
.section-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
    text-align: center;
    margin: var(--space-tight) 0 0;
}

.sub-header {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0 0 var(--space-tight);
}

.label-text {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.accent { color: var(--accent-gold); }
.text-secondary { color: var(--text-secondary); }
.text-gold { color: var(--accent-gold); }
/* Large-display use only — carries the size that makes 3.4:1 legal. */
.text-scarlet {
    color: var(--accent-scarlet-bright);
    font-size: var(--text-xl);
}

/* ===========================================================================
   5. SIGNATURE ELEMENTS — preserved verbatim
   ========================================================================= */

.divider-gold,
.divider-scarlet {
    width: 100%;
    height: 1px;
    border: 0;
    margin: var(--space-block) auto;
}

.divider-gold {
    background: linear-gradient(90deg, transparent, var(--accent-gold-dim), transparent);
}

.divider-scarlet {
    background: linear-gradient(90deg, transparent, var(--accent-scarlet-dim), transparent);
}

.divider-short {
    width: 80px;
}

/* A hero stacks two full-bleed overlays over its own box — `::before` for the scarlet glow and `::after` for the
   vignette, both `position: absolute; z-index: 0`. An unpositioned child paints in the block layer BENEATH them, so
   a rule dropped into a hero is drawn and then covered: present in the DOM, correct in the inspector, invisible on
   screen. `.hero-content` and `.hero-foot` each opt out with the content layer; the rule between them needs the
   same, and nothing about the element itself would ever suggest that.

   The rule closes the hero rather than underlining its title: wide and faint, where the image fades out, above the
   scroll hint. Under the title it was an 80px sliver drawn across the busiest part of the picture. Its fading ends
   let it take the full width on a phone. */
.section-hero .divider-gold,
.section-hero .divider-scarlet {
    position: absolute;
    z-index: var(--layer-content);
    left: 50%;
    bottom: var(--space-section);
    transform: translateX(-50%);
    width: min(100%, var(--measure-wide));
    margin: 0;
}

.ornament {
    text-align: center;
    color: var(--accent-gold-dim);
    font-size: var(--text-lg);
    letter-spacing: 0.5em;
    padding: var(--space-block) 0;
    line-height: 1;
}

.scroll-hint {
    font-family: var(--font-label);
    font-size: var(--text-2xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
    animation: pulse-fade 3s ease-in-out infinite;
}

@keyframes pulse-fade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* --- Scarlet status frame with pulsing dot ------------------------------
   A framed plate, not a chip: gold hairline outside, a faint inner rule with
   a mat gap between them, and two-tone content — the state, then the date.
   The label sits on --text-primary and the date on --accent-gold, so the
   scarlet lives in the dot and the rules, where 3.4:1 is legal. */
/* ---------------------------------------------------------------- draft ribbon

   The preview marker on an unpublished page. Fixed to the right, tucked under the topbar, and OUT OF FLOW: it was
   previously a section at the top of <main>, which pushed every draft down by its own height — so the author was
   reviewing a layout no reader would ever see. It annotates the page rather than being part of it.

   Below the topbar's layer, so a scrolled sticky header still passes over it rather than under. */

.draft-ribbon {
    position: fixed;
    top: calc(var(--topbar-height) + var(--space-tight));
    right: 0;
    z-index: calc(var(--layer-topbar) - 1);
    display: flex;
    align-items: baseline;
    gap: var(--space-tight);
    background-color: var(--bg-mid);
    border: 1px solid var(--border-scarlet-soft);
    /* Square against the viewport edge — it reads as attached to the window rather than floating in the page. */
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 0.45rem 0.9rem 0.45rem 0.8rem;
    max-width: min(22rem, 60vw);
    pointer-events: none;
}

.draft-ribbon-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--accent-scarlet-bright);
    flex: none;
    /* Nudged to sit on the text's optical centre rather than its baseline. */
    transform: translateY(-0.1rem);
}

.draft-ribbon-label {
    font-family: var(--font-label);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
}

/* The qualifier, not the headline — it may wrap, and it carries the only detail that matters if it does. */
.draft-ribbon-note {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-2xs);
    color: var(--text-secondary);
}

/* On a narrow screen the note is what goes: the label alone still says the page is not live. */
@media (max-width: 40rem) {
    .draft-ribbon-note {
        display: none;
    }
}

@media print {
    .draft-ribbon {
        display: none;
    }
}

.status-pill {
    display: inline-block;
    background-color: var(--bg-mid);
    border: 1px solid var(--border-gold-soft);
    border-radius: var(--radius);
    padding: 0.2rem;
}

.status-pill-inner {
    display: flex;
    align-items: center;
    gap: var(--space-gap);
    border: 1px solid var(--border-neutral-faint);
    padding: 0.65rem 1.4rem;
}

.status-pill-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-primary);
}

.status-pill-sep {
    color: var(--accent-gold-dim);
}

.status-pill-date {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent-gold);
}

.status-pill-dot {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-scarlet-bright);
    animation: status-pulse 2.4s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--glow-scarlet-dot); }
    50% { opacity: 0.55; box-shadow: 0 0 0 0.35rem transparent; }
}

/* ===========================================================================
   6. BUTTONS
   ========================================================================= */

.btn {
    display: inline-block;
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: var(--radius);
    padding: 0.7rem 1.8rem;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn-accept {
    background-color: var(--bg-elevated);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold-dim);
}

.btn-accept:hover {
    background-color: var(--fill-gold-hover);
    border-color: var(--accent-gold);
    color: var(--accent-gold-bright);
}

.btn-deny {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-neutral-mid);
}

.btn-deny:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-neutral-mid);
}

.btn-quiet {
    background: transparent;
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold-dim);
}

.btn-quiet:hover {
    background-color: var(--fill-gold-wash);
    color: var(--accent-gold-bright);
}

/* The filled CTA from the release and preorder pages. Scarlet is a background
   here, which is a permitted structural use — --text-primary on --accent-scarlet
   measures 6.1:1. It takes --accent-primary so a release palette re-tints it. */
.btn-primary {
    background-color: var(--accent-primary);
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
    font-weight: var(--weight-strong);
}

.btn-primary:hover {
    background-color: var(--accent-primary-bright);
    border-color: var(--accent-primary-bright);
    color: var(--text-primary);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-gap);
    justify-content: center;
}

/* Ported alias — pages built against the Elementor theme keep working. */
.enhanced-btn {
    display: inline-block;
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: var(--radius);
    padding: 0.7rem 1.8rem;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.enhanced-btn.accept {
    background-color: var(--bg-elevated);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold-dim);
}

.enhanced-btn.accept:hover {
    background-color: var(--fill-gold-hover);
    border-color: var(--accent-gold);
    color: var(--accent-gold-bright);
}

.enhanced-btn.deny {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-neutral-mid);
}

.enhanced-btn.deny:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* ===========================================================================
   7. CHROME — topbar, footer
   ========================================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--layer-topbar);
    background-color: var(--bg-abyss);
    border-top: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
}

.topbar-inner {
    width: min(100%, var(--measure-page), var(--measure-site));
    margin-inline: auto;
    min-height: var(--topbar-height);
    padding: 0 var(--space-page-x);
    display: flex;
    align-items: center;
    gap: var(--space-block);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    margin-right: auto;
}

.topbar-logo {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

.topbar-title {
    font-family: var(--font-label);
    font-size: var(--text-sm);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-snug);
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-block);
}

.topbar-link {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.topbar-link:hover,
.topbar-link-current {
    color: var(--accent-gold);
}

.topbar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
}

.site-footer {
    background-color: var(--bg-abyss);
    border-top: var(--rule-hairline);
    padding: var(--space-section) var(--space-page-x) var(--space-block);
    color: var(--text-secondary);
}

.footer-inner {
    width: min(100%, var(--measure-page), var(--measure-site));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-section) var(--space-block);
}

.footer-heading {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 var(--space-block);
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
}

.footer-nav a,
.footer-social a {
    color: var(--accent-gold);
    font-family: var(--font-accent);
    font-size: var(--text-sm);
}

.footer-nav a:hover,
.footer-social a:hover {
    color: var(--accent-gold-bright);
}

.footer-social {
    display: flex;
    gap: var(--space-gap);
}

.footer-tagline {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-block);
}

.footer-legal {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-neutral-faint);
    padding-top: var(--space-block);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-snug);
    color: var(--text-secondary);
}

/* ===========================================================================
   8. LANGUAGE SELECTOR — site-wide, EN · BG
   Not a per-page toggle: pages are separate records and a counterpart may
   not exist, so the control is a selector with an unavailable state.
   ========================================================================= */

/* ---------------------------------------------------------------- account menu

   The operator's sign-in control, immediately left of the language selector. It borrows the lang-select shape so the
   two read as one pair of topbar controls, and reuses the .field primitives so the form needs no inputs of its own.

   The trigger looks the SAME for everyone. The markup is identical for every viewer by design (the topbar rides on
   shared-cached pages), so nothing here may key off signed-in state at render time — .account-menu-authenticated is
   added by the client after it asks /session, and is the only hook that ever differs. */

.account-menu {
    position: relative;
}

.account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    color: var(--text-dim);
    /* Spectral carries U+25C6; the label face does not, so the mark would fall back to a system glyph. */
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.account-trigger:hover {
    border-color: var(--accent-gold-dim);
    background-color: var(--fill-gold-wash);
    color: var(--accent-gold);
}

/* Signed in is worth seeing at a glance without opening the panel. */
.account-menu-authenticated .account-trigger {
    color: var(--accent-gold);
    border-color: var(--accent-gold-dim);
}

.account-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    width: 16rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    padding: var(--space-tight);
    display: none;
    z-index: 20;
}

.account-panel-open {
    display: block;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
}

/* The panel is narrow, so the shared .field-input padding is dialled back rather than redefined. */
.account-panel .field-input {
    padding: 0.5rem 0.7rem;
    font-size: var(--text-sm);
    width: 100%;
}

.account-submit {
    background-color: var(--fill-gold-wash);
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    color: var(--accent-gold);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.account-submit:hover {
    border-color: var(--accent-gold-dim);
    background-color: var(--bg-hover);
}

.account-submit:disabled {
    cursor: progress;
    color: var(--text-secondary);
}

.account-federated {
    display: block;
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0.5rem 0.7rem;
}

.account-federated:hover {
    background-color: var(--bg-hover);
    color: var(--accent-gold);
}

/* The message IS the state, so it stays at full-contrast text. Scarlet marks errors elsewhere in the theme and is
   structural only — it can never carry the words (token contract §12). */
.account-error {
    margin-top: var(--space-tight);
    font-family: var(--font-label);
    font-size: var(--text-2xs);
    letter-spacing: var(--track-snug);
    text-transform: uppercase;
    color: var(--text-primary);
    border-left: 2px solid var(--accent-scarlet-bright);
    padding-left: 0.6rem;
}

.account-identity {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: var(--space-tight);
}

.lang-select {
    position: relative;
}

.lang-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    color: var(--accent-gold);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.lang-select-trigger:hover {
    border-color: var(--accent-gold-dim);
    background-color: var(--fill-gold-wash);
}

.lang-select-caret {
    color: var(--text-dim);
    font-size: var(--text-2xs);
    /* Cormorant has no U+25BE (the small caret), so inheriting --font-label from the trigger would fall back to a
       system face for this one glyph. Spectral carries it — keeps the designed mark instead of an approximation. */
    font-family: var(--font-body);
}

.lang-select-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 11rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    padding: 0.3rem;
    display: none;
}

.lang-select-menu-open {
    display: block;
}

.lang-select-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-tight);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0.5rem 0.7rem;
}

.lang-select-option:hover {
    background-color: var(--bg-hover);
    color: var(--accent-gold);
}

.lang-select-option-current {
    color: var(--accent-gold);
}

/* No counterpart record: the option is present but inert, and says why.
   It must stay legible — the sentence IS the state. */
.lang-select-option-unavailable {
    color: var(--text-secondary);
    cursor: not-allowed;
    pointer-events: none;
}

.lang-select-note {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-2xs);
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-secondary);
}

/* ===========================================================================
   9. HERO
   ========================================================================= */

.section-hero,
.home-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-section) var(--space-page-x);
}

.section-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, var(--glow-scarlet-hero) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.section-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at center, transparent 25%, var(--bg-abyss) 70%),
        linear-gradient(to right, var(--bg-abyss) 0%, transparent 15%, transparent 85%, var(--bg-abyss) 100%),
        linear-gradient(to bottom, var(--bg-abyss) 0%, transparent 12%, transparent 85%, var(--bg-abyss) 100%);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, black 30%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, black 30%, transparent 70%);
}

/* `margin-inline: auto`, because the hero's flex centring reaches only the section's direct child — and the renderer
   puts a `.wrap-page` there, around this. Without it the content sat on the wrap's left edge, and on any screen
   wider than the wide measure the title ran off-centre from its own divider and the image. */
.hero-content {
    position: relative;
    z-index: var(--layer-content);
    width: min(100%, var(--measure-wide));
    margin-inline: auto;
}

.hero-pretitle {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0 0 var(--space-block);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0 0 var(--space-block);
}

.hero-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-section);
}

.hero-tagline {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    letter-spacing: var(--track-tight);
    color: var(--text-secondary);
    margin: 0;
}

.hero-intro {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-secondary);
    width: min(100%, var(--measure-prose));
    margin-inline: auto;
}

.hero-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-block);
    z-index: var(--layer-content);
}

/* A jacket above the title, for a centred book hero. */
.hero-cover {
    width: min(100%, var(--measure-cover));
    margin-inline: auto;
    margin-bottom: var(--space-block);
}

/* .cover-plate resets the figure margin in §15, and both selectors are
   single-class — so source order would decide and the plate would win.
   The compound selector settles it regardless of order. */
.cover-plate.hero-cover {
    margin-inline: auto;
    margin-bottom: var(--space-block);
}

/* --- releaseState render states -----------------------------------------
   One template, three states. The server puts .state-<releaseState> on the
   article and the matching .on-* blocks survive; the others are removed from
   the render, so copy that only makes sense before release never leaks after. */
.state-announced .on-prerelease,
.state-announced .on-released,
.state-prerelease .on-announced,
.state-prerelease .on-released,
.state-released .on-announced,
.state-released .on-prerelease {
    display: none;
}

/* --- Awards ------------------------------------------------------------- */
.awards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.award {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid var(--border-gold-faint);
    border-top: 2px solid var(--accent-gold-dim);
    border-radius: var(--radius);
    padding: var(--space-gap) var(--space-block);
}

.award-name {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0;
}

.award-detail {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ===========================================================================
   10. PROSE PRIMITIVES — the editorial layer
   ========================================================================= */

.prose {
    width: min(100%, var(--measure-prose));
    margin-inline: auto;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-body);
    line-height: var(--leading-prose);
    color: var(--text-primary);
    text-wrap: pretty;
}

/* Browser margins off, at zero specificity and BEFORE the rhythm, so that the rhythm and then every component's own
   spacing override it by source order alone. Written as `.prose p` (0,1,1), with `.prose h2, h3` and `.prose ul, ol`
   beside it, the reset outranked both: paragraphs, headings, lists and quotes sat flush against the block before them
   on every page, and so did the margins the chapter opener, the epigraph and the footnote list declare for themselves. */
.prose :where(p, h2, h3, ul, ol, blockquote) {
    margin: 0;
}

.prose > * + * {
    margin-top: var(--space-block);
}

/* A heading belongs to what follows it, so that gap is the tight one. */
.prose > :where(h2, h3) + * {
    margin-top: var(--space-tight);
}

.prose h2,
.prose h3 {
    font-family: var(--font-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-snug);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); color: var(--accent-gold); }

.prose em { font-style: italic; }
.prose strong { font-weight: var(--weight-strong); color: var(--text-primary); }

.prose ul,
.prose ol {
    padding-left: var(--space-block);
    color: var(--text-secondary);
}

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

.prose a {
    color: var(--accent-gold);
    border-bottom: 1px solid var(--border-gold-soft);
}

.prose a:hover {
    color: var(--accent-gold-bright);
    border-bottom-color: var(--accent-gold-dim);
}

/* --- Lead paragraph ---------------------------------------------------- */
.prose-lead {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    font-style: italic;
    line-height: var(--leading-prose);
}

/* --- Drop cap ---------------------------------------------------------- */
.prose-drop-cap::first-letter {
    float: left;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 4.2em;
    line-height: 0.82;
    color: var(--accent-gold);
    padding-right: 0.08em;
    margin-top: 0.06em;
}

/* --- Chapter opener ---------------------------------------------------- */
.chapter-opener {
    text-align: center;
    padding: var(--space-section) 0 var(--space-block);
    border-bottom: var(--rule-hairline);
    margin-bottom: var(--space-section);
}

.chapter-number {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0 0 var(--space-block);
}

.chapter-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display-sm);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

.chapter-epigraph {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--text-tertiary);
    width: min(100%, var(--measure-prose));
    margin: var(--space-block) auto 0;
}

.chapter-epigraph-source {
    display: block;
    font-family: var(--font-label);
    font-style: normal;
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: var(--space-tight);
}

/* --- Section break within prose --------------------------------------- */
.prose-break {
    text-align: center;
    color: var(--accent-gold-dim);
    font-size: var(--text-lg);
    letter-spacing: 0.5em;
    padding: var(--space-block) 0;
    line-height: 1;
}

.prose-break-plain {
    letter-spacing: 0.8em;
    color: var(--text-dim);
}

/* --- Blockquote -------------------------------------------------------- */
/* No margin of its own: the prose reset zeroes the browser's, and a `margin: 0` here would outrank the rhythm. */
.prose-quote {
    padding-left: var(--space-block);
    border-left: 2px solid var(--accent-scarlet-dim);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.prose-quote-cite {
    display: block;
    font-family: var(--font-label);
    font-style: normal;
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: var(--space-tight);
}

/* --- Pull quote — breaks the measure ---------------------------------- */
.pull-quote {
    width: min(100%, var(--measure-wide));
    margin-inline: auto;
    margin-block: var(--space-section);
    text-align: center;
    border-top: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
    padding: var(--space-block) 0;
}

.pull-quote-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-2xl);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

.pull-quote-attribution {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: var(--space-block) 0 0;
}

/* --- Figure + caption -------------------------------------------------- */
.prose-figure {
    margin: var(--space-section) 0;
    width: min(100%, var(--measure-wide));
    margin-inline: auto;
}

.prose-figure img {
    width: 100%;
    border: 1px solid var(--border-neutral-faint);
    border-radius: var(--radius);
}

.prose-figcaption {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--space-tight);
}

.prose-figure-inset {
    width: min(100%, var(--measure-prose));
}

/* --- Footnotes --------------------------------------------------------- */
.footnote-ref {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    line-height: 0;
    vertical-align: super;
    color: var(--accent-gold);
    border-bottom: 0;
    padding-inline: 0.15em;
}

.footnote-ref:hover {
    color: var(--accent-gold-bright);
}

.footnote-list {
    width: min(100%, var(--measure-prose));
    margin: var(--space-section) auto 0;
    padding: var(--space-block) 0 0;
    border-top: var(--rule-hairline);
    list-style: none;
    counter-reset: footnote;
}

.footnote-item {
    display: flex;
    gap: var(--space-tight);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

.footnote-item + .footnote-item {
    margin-top: var(--space-tight);
}

.footnote-marker {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-snug);
    color: var(--accent-gold);
    flex: 0 0 1.6rem;
}

.footnote-backref {
    color: var(--accent-gold-dim);
    border-bottom: 0;
}

/* --- Anarandian / Et'el treatment ------------------------------------- */
.anarandian-text {
    font-family: var(--font-accent);
    font-weight: var(--weight-label);
    font-size: var(--text-lg);
    color: var(--accent-gold);
    letter-spacing: 0.02em;
    line-height: 1.9;
    margin: 0;
}

.anarandian-inline {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--accent-gold);
    letter-spacing: 0.03em;
}

.translation-text {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: var(--space-tight) 0 0;
}

.language-example {
    text-align: center;
    padding: var(--space-block);
    border-top: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
    margin: var(--space-block) 0;
}

/* --- Verse ------------------------------------------------------------- */
.verse {
    text-align: center;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-verse);
    color: var(--text-secondary);
    margin: 0;
}

.verse-last-line {
    color: var(--accent-scarlet-bright);
    font-size: var(--text-xl);
}

/* ===========================================================================
   11. LISTING + NAVIGATION
   ========================================================================= */

/* --- Archive header ---------------------------------------------------- */
.archive-header {
    text-align: center;
    padding-bottom: var(--space-block);
    border-bottom: var(--rule-hairline);
    margin-bottom: var(--space-section);
}

.archive-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display-sm);
    letter-spacing: var(--track-display);
    color: var(--text-primary);
    margin: 0;
}

.archive-count {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: var(--space-tight) 0 0;
}

/* --- Breadcrumb -------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-tight);
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
}

.breadcrumb-item {
    color: var(--text-secondary);
}

.breadcrumb-item a {
    color: var(--text-secondary);
}

.breadcrumb-item a:hover {
    color: var(--accent-gold);
}

.breadcrumb-current {
    color: var(--accent-gold);
}

.breadcrumb-sep {
    color: var(--text-dim);
}

/* --- Taxonomy pills ---------------------------------------------------- */
.term-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    list-style: none;
    margin: 0;
    padding: 0;
}

.term-pill {
    display: inline-block;
    background-color: var(--bg-mid);
    color: var(--accent-gold);
    border: 1px solid var(--border-gold-soft);
    border-radius: var(--radius);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.term-pill:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-gold-dim);
    color: var(--accent-gold-bright);
}

.term-pill-current {
    background-color: var(--bg-surface);
    border-color: var(--accent-gold-dim);
    color: var(--accent-gold-bright);
}

.term-pill-count {
    color: var(--text-secondary);
}

/* --- Post card: listing variant --------------------------------------- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-block);
}

.post-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-gold-wash);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition-slow), transform var(--transition);
}

.post-card:hover {
    border-color: var(--border-gold-mid);
    transform: translateY(-2px);
}

.post-card-media {
    position: relative;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

.post-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition-slow);
}

.post-card:hover .post-card-media img {
    opacity: 0.85;
}

.post-card-media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25%;
    background: linear-gradient(to bottom, transparent, var(--bg-elevated));
    pointer-events: none;
}

.post-card-body {
    padding: var(--space-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    flex: 1;
}

.post-card-term {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0;
}

.post-card-title {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    font-weight: var(--weight-label);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin: 0;
}

.post-card-title a {
    color: var(--text-primary);
}

.post-card-title a:hover {
    color: var(--accent-gold);
}

.post-card-excerpt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0;
}

.post-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-tight);
    margin-top: auto;
    padding-top: var(--space-tight);
}

.post-card-date {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-snug);
    color: var(--text-secondary);
}

.post-card-more {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--accent-gold);
}

/* --- Post card: featured variant -------------------------------------- */
.post-card-featured {
    grid-column: 1 / -1;
    flex-direction: row;
    background-color: var(--bg-surface);
    border-color: var(--border-gold-soft);
}

.post-card-featured .post-card-media {
    flex: 0 0 45%;
    aspect-ratio: auto;
}

.post-card-featured .post-card-media::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 80px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg-surface));
}

.post-card-featured .post-card-body {
    padding: var(--space-card-lg);
    justify-content: center;
    gap: var(--space-block);
}

.post-card-featured .post-card-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: var(--track-display);
}

.post-card-featured .post-card-excerpt {
    font-size: var(--text-base);
    line-height: var(--leading-prose);
}

/* --- Highlight card (curated "start here") ----------------------------- */
.highlight-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-gap);
}

.highlight-card {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-gold-wash);
    border-left: 2px solid var(--accent-gold-dim);
    border-radius: var(--radius);
    padding: 1.4rem var(--space-card);
    transition: background-color var(--transition), border-color var(--transition-slow), transform var(--transition);
}

.highlight-card:hover {
    background-color: var(--bg-hover);
    border-left-color: var(--accent-gold);
    border-color: var(--border-gold-soft);
    transform: translateY(-2px);
}

.highlight-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 0.4rem;
}

.highlight-title {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin: 0 0 0.5rem;
}

.highlight-title a { color: var(--accent-gold); }
.highlight-card:hover .highlight-title a { color: var(--accent-gold-bright); }

.highlight-desc {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0;
}

/* --- Pagination (?page=N) --------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-tight);
    list-style: none;
    margin: var(--space-section) 0 0;
    padding: 0;
    font-family: var(--font-label);
}

.pagination-link {
    display: inline-block;
    min-width: 2.75rem;
    text-align: center;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    letter-spacing: var(--track-snug);
    padding: 0.6rem 0.9rem;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.pagination-link:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold-dim);
    background-color: var(--bg-hover);
}

.pagination-current {
    color: var(--accent-gold-bright);
    border-color: var(--accent-gold-dim);
    background-color: var(--bg-surface);
}

.pagination-disabled {
    color: var(--text-dim);
    border-color: var(--border-neutral-faint);
    pointer-events: none;
}

.pagination-gap {
    color: var(--text-dim);
    padding-inline: 0.3rem;
}

/* --- Prev / next post ------------------------------------------------- */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-block);
    border-top: var(--rule-hairline);
    padding-top: var(--space-block);
    margin-top: var(--space-section);
}

.post-nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-card);
    background-color: var(--bg-mid);
    border: 1px solid var(--border-gold-wash);
    border-radius: var(--radius);
    transition: border-color var(--transition-slow), background-color var(--transition);
}

.post-nav-item:hover {
    border-color: var(--border-gold-soft);
    background-color: var(--bg-surface);
}

.post-nav-next {
    text-align: right;
}

.post-nav-dir {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.post-nav-title {
    font-family: var(--font-label);
    font-size: var(--text-base);
    font-weight: var(--weight-label);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    color: var(--accent-gold);
}

.post-nav-item:hover .post-nav-title {
    color: var(--accent-gold-bright);
}

/* ===========================================================================
   12. ARTICLE
   ========================================================================= */

.post-header {
    text-align: center;
    padding-bottom: var(--space-block);
    margin-bottom: var(--space-section);
    border-bottom: var(--rule-hairline);
}

.post-eyebrow {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0 0 var(--space-block);
}

.post-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

.post-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    margin: var(--space-block) 0 0;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-tight);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-snug);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: var(--space-block) 0 0;
}

.post-meta-sep {
    color: var(--text-dim);
}

.post-footer {
    width: min(100%, var(--measure-prose));
    margin: var(--space-section) auto 0;
    padding-top: var(--space-block);
    border-top: var(--rule-hairline);
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

/* ===========================================================================
   13. GATE + FORMS
   ========================================================================= */

/* The teaser-to-body cut. Reads as an invitation, not an error. */
.gate-teaser {
    position: relative;
}

.gate-cut {
    position: relative;
    height: 8rem;
    margin-top: calc(-1 * 8rem);
    background: linear-gradient(to bottom, transparent, var(--bg-abyss));
    pointer-events: none;
}

.gate-panel {
    width: min(100%, var(--measure-prose));
    margin-inline: auto;
    text-align: center;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-gold-soft);
    border-top: 2px solid var(--accent-gold-dim);
    border-radius: var(--radius);
    padding: var(--space-card-lg) var(--space-card);
}

.gate-eyebrow {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0 0 var(--space-block);
}

.gate-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-2xl);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0 0 var(--space-tight);
}

.gate-body {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0 0 var(--space-block);
}

.gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-gap);
    justify-content: center;
}

.gate-alt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: var(--space-block) 0 0;
    padding-top: var(--space-block);
    border-top: 1px solid var(--border-neutral-faint);
}

/* --- Capture form ------------------------------------------------------ */
.capture-form {
    width: min(100%, var(--measure-prose));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.field-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.field-input {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 0.7rem 1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.field-input::placeholder {
    color: var(--text-dim);
}

.field-input:focus {
    border-color: var(--accent-gold-dim);
    outline: none;
    box-shadow: 0 0 0 1px var(--border-gold-soft);
}

.field-hint {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.field-error {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-snug);
    text-transform: uppercase;
    color: var(--text-primary);
}

/* Scarlet marks the error; it never spells it out. The words stay legible,
   the colour stays on the mark and the input border — both structural uses. */
.field-error-mark {
    color: var(--accent-scarlet-bright);
}

.field-invalid .field-input {
    border-color: var(--accent-scarlet-bright);
}

.field-invalid .field-input:focus {
    box-shadow: 0 0 0 1px var(--border-scarlet-soft);
}

.field-consent {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-tight);
}

.field-checkbox {
    width: 1rem;
    height: 1rem;
    margin-top: 0.45rem;
    flex: 0 0 auto;
    accent-color: var(--accent-gold-dim);
}

.field-consent-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

/* --- Capture panel — the reserve/preorder composition ------------------ */
.capture-panel {
    width: min(100%, var(--measure-wide));
    margin-inline: auto;
    background-color: var(--bg-surface);
    border: var(--rule-hairline);
    border-bottom: 1px solid var(--border-scarlet-faint);
    border-radius: var(--radius);
    padding: var(--space-card-lg) var(--space-card);
}

.capture-intro {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    text-align: center;
    width: min(100%, var(--measure-wide));
    margin: 0 auto var(--space-block);
}

/* Centred variant: label above a full-width input, everything on the axis. */
.capture-form-centered .field {
    text-align: center;
    align-items: stretch;
}

.capture-form-centered .field-label {
    text-align: center;
}

.capture-form-centered .field-hint,
.capture-form-centered .field-error {
    justify-content: center;
    text-align: center;
}

.field-label-note {
    font-size: var(--text-2xs);
    letter-spacing: var(--track-mid);
    color: var(--text-secondary);
}

/* --- Choice group — backs capture.edition ------------------------------ */
.choice-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    text-align: center;
}

.choice-group-question {
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin: 0;
}

.choice-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-gap);
}

.choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.choice-face {
    display: block;
    background-color: transparent;
    border: 1px solid var(--border-neutral-soft);
    border-radius: var(--radius);
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: var(--track-mid);
    color: var(--text-secondary);
    padding: 0.7rem 0.9rem;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.choice:hover .choice-face {
    border-color: var(--accent-gold-dim);
    color: var(--accent-gold);
}

.choice-input:checked + .choice-face {
    background-color: var(--fill-gold-wash);
    border-color: var(--accent-gold-dim);
    color: var(--accent-gold-bright);
}

.choice-input:focus-visible + .choice-face {
    outline: 1px solid var(--accent-gold);
    outline-offset: 2px;
}

.choice-hint {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0;
}

/* --- Fine-print consent ------------------------------------------------ */
.field-consent-fine {
    justify-content: center;
}

.field-consent-fine .field-consent-text {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    text-align: center;
}

.field-consent-fine .field-consent-text a {
    color: var(--accent-gold);
    border-bottom: 1px solid var(--border-gold-soft);
}

/* --- Form + page states ----------------------------------------------- */
.form-status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-tight);
    border: 1px solid var(--border-neutral-soft);
    border-left-width: 2px;
    border-radius: var(--radius);
    background-color: var(--bg-mid);
    padding: var(--space-card);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

.form-status-mark {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    line-height: 1;
}

.form-status-title {
    display: block;
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.form-status-success {
    border-left-color: var(--element-life);
}

.form-status-success .form-status-mark,
.form-status-success .form-status-title {
    color: var(--element-life);
}

.form-status-duplicate {
    border-left-color: var(--accent-gold-dim);
}

.form-status-duplicate .form-status-mark,
.form-status-duplicate .form-status-title {
    color: var(--accent-gold);
}

.form-status-error {
    border-left-color: var(--accent-scarlet);
}

.form-status-error .form-status-mark {
    color: var(--accent-scarlet-bright);
}

.form-status-error .form-status-title {
    color: var(--text-primary);
}

/* --- Empty / 404 / loading -------------------------------------------- */
.state-panel {
    width: min(100%, var(--measure-prose));
    margin-inline: auto;
    text-align: center;
    padding: var(--space-section) var(--space-card);
}

.state-mark {
    font-family: var(--font-display);
    font-size: var(--text-display);
    line-height: 1;
    letter-spacing: var(--track-display);
    color: var(--accent-scarlet-bright);
    margin: 0 0 var(--space-block);
}

.state-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-2xl);
    letter-spacing: var(--track-display);
    color: var(--text-primary);
    margin: 0 0 var(--space-tight);
}

.state-body {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0 0 var(--space-block);
}

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

.skeleton {
    background-image: linear-gradient(90deg, var(--bg-mid), var(--bg-elevated), var(--bg-mid));
    background-size: 200% 100%;
    border: 1px solid var(--border-neutral-faint);
    border-radius: var(--radius);
    animation: skeleton-sweep 1.6s ease-in-out infinite;
}

.skeleton-line {
    height: 0.85rem;
}

.skeleton-line-short { width: 35%; }
.skeleton-line-mid { width: 70%; }
.skeleton-block { height: 9rem; }

@keyframes skeleton-sweep {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===========================================================================
   14. SECTION COMPONENTS — ported from anarand-dark-theme.css
   ========================================================================= */

/* --- prose section ---------------------------------------------------- */
.section-prose {
    position: relative;
}

.section-prose::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--glow-scarlet-prose) 0%, transparent 50%);
    pointer-events: none;
}

.section-prose > * {
    position: relative;
    z-index: var(--layer-content);
}

.prose-excerpt {
    padding-left: var(--space-block);
    border-left: 1px solid var(--accent-scarlet-dim);
    line-height: 2;
}

/* --- character cards -------------------------------------------------- */
.character-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

.character-card {
    display: flex;
    flex-direction: row;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition-slow);
}

.character-card:hover {
    border-color: var(--border-gold-mid);
}

.character-image {
    flex: 0 0 280px;
    max-width: 280px;
    position: relative;
    overflow: hidden;
}

.character-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.character-image::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg-elevated));
    pointer-events: none;
}

.character-text {
    flex: 1;
    padding: var(--space-card-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}

.card-accent-scarlet { border-left: 3px solid var(--accent-scarlet); }
.card-accent-gold { border-left: 3px solid var(--accent-gold-dim); }
.card-accent-neutral { border-left: 3px solid var(--element-air); }

.character-name {
    font-family: var(--font-label);
    font-size: var(--text-xl);
    font-weight: var(--weight-label);
    letter-spacing: var(--track-display);
    color: var(--text-primary);
    margin: 0;
}

.character-title {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--accent-gold);
    margin: 0;
}

.character-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: var(--space-tight) 0 0;
}

.character-quote {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    padding-top: var(--space-tight);
    border-top: 1px solid var(--border-neutral-soft);
    margin: var(--space-tight) 0 0;
}

.character-quote::before { content: '\201C'; color: var(--accent-scarlet-bright); }
.character-quote::after { content: '\201D'; color: var(--accent-scarlet-bright); }

/* --- age panels ------------------------------------------------------- */
.age-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-gap);
}

.age-panel {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-neutral-faint);
    border-top-width: 2px;
    border-radius: var(--radius);
    padding: 1.8rem var(--space-card);
    transition: border-color var(--transition-slow), background-color var(--transition);
}

.age-panel:hover { background-color: var(--bg-hover); }

.age-faithless { border-top-color: var(--element-death); }
.age-liranarand { border-top-color: var(--accent-gold-dim); }
.age-lasthope { border-top-color: var(--accent-scarlet); }

/* Era labels take --text-secondary; the era's colour lives on the panel's
   top border, which is where a 2.9:1 hue is legal. */
.age-era-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

.age-era-name {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-display);
    color: var(--text-primary);
    margin: 0 0 0.6rem;
}

.age-era-desc {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0 0 var(--space-block);
}

.age-era-notation {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    padding-top: var(--space-tight);
    border-top: 1px solid var(--border-neutral-faint);
    margin: 0;
}

/* --- timeline --------------------------------------------------------- */
.timeline {
    position: relative;
    padding-left: 3rem;
    margin: 0;
    list-style: none;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--accent-gold-dim), var(--accent-scarlet-dim), transparent);
}

.timeline-entry {
    position: relative;
    padding-left: var(--space-card);
    margin-bottom: var(--space-card-lg);
}

.timeline-entry::before {
    content: '';
    position: absolute;
    left: -3.27rem;
    top: 0.5rem;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--accent-gold-dim);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--glow-gold-dot);
}

.timeline-entry-major::before {
    width: 0.8rem;
    height: 0.8rem;
    left: -3.36rem;
    background: var(--accent-scarlet);
    box-shadow: 0 0 12px var(--glow-scarlet-dot);
}

.timeline-year {
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: var(--track-mid);
    color: var(--accent-gold);
    margin: 0 0 0.3rem;
}

.timeline-event-title {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    font-weight: var(--weight-label);
    letter-spacing: var(--track-tight);
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.timeline-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0;
}

/* --- time strip (generic form of the day-cycle strip) ----------------- */
.time-strip {
    margin: var(--space-block) 0;
}

.time-strip-label {
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 var(--space-gap);
}

.time-strip-track {
    display: flex;
    width: 100%;
    height: 48px;
    border: 1px solid var(--border-neutral-soft);
    overflow: hidden;
}

.time-strip-partition {
    flex: 1;
    position: relative;
    border-right: 1px solid var(--border-neutral-faint);
}

.time-strip-partition:last-child { border-right: 0; }

.phase-daylight { background: linear-gradient(to bottom, var(--accent-gold-bright), var(--accent-gold-dim)); }
.phase-blood { background: linear-gradient(to bottom, var(--accent-scarlet-dim), var(--bg-mid)); }
.phase-moonlight { background: linear-gradient(to bottom, var(--bg-elevated), var(--bg-surface)); }
.phase-dark { background-color: var(--bg-abyss); }

.time-strip-legend {
    display: flex;
    justify-content: space-between;
    gap: var(--space-tight);
    margin-top: var(--space-tight);
}

/* Same rule as the era labels: the strip carries the colour coding, the
   labels underneath it carry the words. */
.time-strip-phase {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* --- audio section ---------------------------------------------------- */
.section-audio {
    text-align: center;
    position: relative;
    border-top: var(--rule-scarlet);
    border-bottom: var(--rule-scarlet);
}

.section-audio::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--glow-scarlet-center) 0%, transparent 70%);
    pointer-events: none;
}

.section-audio > * {
    position: relative;
    z-index: var(--layer-content);
}

.audio-title {
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 var(--space-block);
}

.audio-player {
    width: min(100%, var(--measure-narrow));
    margin-inline: auto;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-gold-faint);
    border-radius: var(--radius);
    padding: var(--space-tight) var(--space-gap);
    display: flex;
    align-items: center;
    gap: var(--space-gap);
}

.audio-play {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--accent-gold-dim);
    border-radius: var(--radius);
    color: var(--accent-gold);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.audio-play:hover {
    background-color: var(--fill-gold-hover);
    color: var(--accent-gold-bright);
}

.audio-rail {
    flex: 1;
    height: 4px;
    background-color: var(--bg-hover);
    position: relative;
    overflow: hidden;
}

.audio-rail-progress {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: var(--accent-scarlet);
    /* The one genuinely runtime value on the page. The contract routes a progress percentage through a token rather
       than an inline width, so the player script sets --audio-progress and never touches the style attribute. */
    width: var(--audio-progress, 0%);
}

.audio-time {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-tight);
    color: var(--text-secondary);
    flex: 0 0 auto;
}

/* --- gallery ---------------------------------------------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-gap);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-neutral-faint);
    border-radius: var(--radius);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity var(--transition-slow);
}

.gallery-item:hover img { opacity: 0.85; }

.gallery-caption {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-tight);
    margin: 0;
}

/* --- featured card ---------------------------------------------------- */
.featured-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-gold-soft);
    border-left: 3px solid var(--accent-gold);
    border-radius: var(--radius);
    padding: var(--space-block);
}

.featured-card-title {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-snug);
    color: var(--accent-gold);
    margin: 0 0 var(--space-tight);
}

.featured-card-body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0;
}

/* --- about / closing -------------------------------------------------- */
.section-about {
    text-align: center;
    border-top: var(--rule-hairline);
}

.about-body {
    width: min(100%, var(--measure-prose));
    margin-inline: auto;
    color: var(--text-secondary);
}

.section-closing { text-align: center; }

.closing-text {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    line-height: 1.9;
    color: var(--text-tertiary);
    width: min(100%, var(--measure-narrow));
    margin: 0 auto var(--space-block);
}

.closing-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: var(--track-snug);
    color: var(--accent-gold);
    margin: 0;
}

.welcome-text {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: 1.9;
    color: var(--text-secondary);
    text-align: center;
}

.author-signature {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    letter-spacing: var(--track-display);
    color: var(--accent-gold);
    margin: 0;
}

/* --- book entries ----------------------------------------------------- */
.book-entry {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border-neutral-faint);
}

.book-entry:last-child { border-bottom: 0; }

.book-number {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 0.2rem;
}

.book-title {
    font-family: var(--font-label);
    font-size: var(--text-lg);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-display);
    color: var(--accent-gold);
    margin: 0 0 0.3rem;
}

.book-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
}

.book-status {
    display: inline-block;
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    padding: 0.15rem 0.6rem;
    margin-top: 0.4rem;
    border-radius: var(--radius);
}

.book-status-completed {
    color: var(--text-secondary);
    border: 1px solid var(--border-neutral-soft);
}

.book-status-in-dev {
    color: var(--text-primary);
    border: 1px solid var(--border-scarlet-soft);
}

/* ===========================================================================
   15. RELEASE PAGE COMPONENTS
   Form and composition from the Scarlet Requiem mockup; canonical values only.
   ========================================================================= */

.release-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-section);
    padding: var(--space-section) var(--space-page-x);
    min-height: calc(100vh - var(--topbar-height));
}

.release-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 30%, var(--glow-scarlet-hero) 0%, transparent 60%);
    pointer-events: none;
}

.release-hero-body {
    position: relative;
    z-index: var(--layer-content);
    width: min(100%, var(--measure-prose));
    margin-left: auto;
}

.release-eyebrow {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin: 0 0 var(--space-tight);
}

.release-ornament {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    letter-spacing: var(--track-tight);
    margin: 0 0 var(--space-block);
}

.release-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0 0 var(--space-block);
}

.release-line {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    margin: var(--space-block) 0;
}

.release-blurb {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-prose);
    color: var(--text-secondary);
    margin: 0 0 var(--space-block);
}

.release-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-gap);
    margin-top: var(--space-block);
    padding-top: var(--space-block);
    border-top: var(--rule-hairline);
}

.release-platforms-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.release-platform {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--accent-secondary);
    border-bottom: 1px solid var(--border-gold-faint);
}

.release-cover {
    position: relative;
    z-index: var(--layer-content);
}

/* --- Cover plate — a framed object, caption inside the frame -----------
   Double gold rule with a mat gap, and the caption occupies a band at the
   bottom of the frame with hairlines running out to both edges. */
.cover-plate {
    background-color: var(--bg-abyss);
    border: 1px solid var(--border-gold-soft);
    border-radius: var(--radius);
    padding: 0.35rem;
    margin: 0;
}

.cover-plate-frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap);
    border: 1px solid var(--border-gold-faint);
    padding: var(--space-gap);
}

.cover-plate-frame img {
    width: 100%;
    border: 1px solid var(--border-neutral-faint);
}

.cover-plate-caption {
    display: flex;
    align-items: center;
    gap: var(--space-gap);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent-gold);
    text-align: center;
    margin: 0;
}

.cover-plate-caption::before,
.cover-plate-caption::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold-dim));
}

.cover-plate-caption::after {
    background: linear-gradient(90deg, var(--accent-gold-dim), transparent);
}

/* --- track cards ------------------------------------------------------ */
.tracks {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

.track {
    display: flex;
    flex-direction: row;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-gold-wash);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition-slow);
}

.track:hover { border-color: var(--border-gold-mid); }

.track-media {
    flex: 0 0 260px;
    max-width: 260px;
    position: relative;
    overflow: hidden;
}

.track-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.track-media::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg-elevated));
    pointer-events: none;
}

.track-numeral {
    position: absolute;
    top: var(--space-tight);
    left: var(--space-tight);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: var(--track-display);
    color: var(--accent-secondary);
    line-height: 1;
    z-index: var(--layer-content);
}

.track-body {
    flex: 1;
    padding: var(--space-card-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
}

.track-role {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.track-title {
    font-family: var(--font-label);
    font-size: var(--text-xl);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-snug);
    color: var(--text-primary);
    margin: 0;
}

.track-lyric {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--accent-secondary);
    border-left: 2px solid var(--accent-primary-dim);
    padding-left: var(--space-gap);
    margin: 0;
}

.track-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0;
}

.track-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-gap);
    margin-top: var(--space-tight);
    padding-top: var(--space-tight);
    border-top: 1px solid var(--border-neutral-faint);
}

.track-status {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* --- sigil ------------------------------------------------------------ */
.sigil {
    width: min(100%, var(--measure-mark));
    margin-inline: auto;
}

.sigil img { width: 100%; }

.sigil-caption {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
    margin: var(--space-tight) 0 0;
}

/* --- credits grid ----------------------------------------------------- */
.credits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-block);
    border-top: var(--rule-hairline);
    padding-top: var(--space-block);
}

.credit-role {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 0.3rem;
}

.credit-name {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--accent-secondary);
    margin: 0;
}

/* ===========================================================================
   16. DICTIONARY — section type `dictionary` on a `page`
   Requires one line in content/schema.js: add "dictionary" to SECTION_TYPES.
   Every entry is a collapsible row: a four-column header bar that is itself
   the toggle, and a detail panel holding pronunciation, an optional
   declension table and an optional usage note.
   ========================================================================= */

.section-dictionary {
    position: relative;
}

/* --- Toolbar ------------------------------------------------------------ */
.dictionary-toolbar {
    position: sticky;
    top: var(--topbar-height);
    z-index: var(--layer-topbar);
    background-color: var(--bg-deep);
    border-bottom: var(--rule-hairline);
    padding-bottom: var(--space-gap);
}

/* Both controls are unlabelled and share one type size, so their boxes are
   the same height and their baselines agree without hand-tuned offsets. */
.dictionary-controls {
    display: flex;
    align-items: stretch;
    gap: var(--space-gap);
    padding: var(--space-gap) 0;
}

.dictionary-search {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--bg-mid);
    color: var(--text-primary);
    border: 1px solid var(--border-neutral-soft);
    border-radius: var(--radius);
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    padding: 0.9rem 1.2rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dictionary-search::placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

.dictionary-search:focus {
    border-color: var(--accent-gold-dim);
    outline: none;
    box-shadow: 0 0 0 1px var(--border-gold-soft);
}

.dictionary-select {
    flex: 0 0 14rem;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-mid);
    /* The caret is painted on the control, so it stays centred at any height.
       The fill is literal because an SVG in a data URI cannot read a custom
       property — same exception as the noise overlay. Value is --text-secondary. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8a49c' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 0.7rem auto;
    color: var(--text-primary);
    border: 1px solid var(--border-neutral-soft);
    border-radius: var(--radius);
    font-family: var(--font-label);
    font-size: var(--text-lg);
    letter-spacing: var(--track-tight);
    padding: 0.9rem 3rem 0.9rem 1.2rem;
}

.dictionary-select:focus {
    border-color: var(--accent-gold-dim);
    outline: none;
}

/* --- Jump index --------------------------------------------------------- */
.dictionary-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
}

.dictionary-jump-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.dictionary-index {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A populated letter is a square chip with a standing hairline. */
.dictionary-index-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: normal;
    color: var(--accent-gold);
    background-color: transparent;
    border: 1px solid var(--border-gold-mid);
    border-radius: var(--radius);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.dictionary-index-link:hover {
    background-color: var(--fill-gold-hover);
    border-color: var(--accent-gold-dim);
    color: var(--accent-gold-bright);
}

/* An empty letter keeps its slot so the index never reflows as the filter
   narrows, but loses the chip. --text-dim is legal: an inactive mark. */
.dictionary-index-link-empty {
    color: var(--text-dim);
    border-color: transparent;
    background-color: transparent;
    pointer-events: none;
}

/* --- Count + groups ---------------------------------------------------- */
.dictionary-count {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin: var(--space-section) 0 0;
}

.dictionary-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
    margin-top: var(--space-block);
}

.dictionary-group-letter {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-2xl);
    letter-spacing: var(--track-display);
    line-height: 1;
    color: var(--accent-gold);
    text-align: center;
    margin: var(--space-block) 0;
}

.dictionary-entries {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    margin: 0;
}

/* --- Entry row --------------------------------------------------------- */
.dictionary-entry {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-neutral-faint);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition);
}

.dictionary-entry:hover {
    border-color: var(--border-gold-faint);
}

/* An entry carrying extra forms shows a gold edge, so the reader can see
   there is something behind it before opening anything. */
.dictionary-entry-rich {
    border-left: 2px solid var(--accent-gold-dim);
}

/* The header row IS the toggle — a real button, full width, reset. */
.dictionary-entry-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) 2rem;
    align-items: center;
    gap: var(--space-gap);
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    text-align: left;
    padding: var(--space-gap) var(--space-card);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color var(--transition);
}

.dictionary-entry-toggle:hover {
    background-color: var(--bg-hover);
}

.dictionary-entry-word {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-tight);
    min-width: 0;
}

/* Apostrophe-linked headwords are single words: never break inside them. */
.dictionary-headword {
    font-family: var(--font-label);
    font-size: var(--text-base);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-snug);
    text-transform: uppercase;
    color: var(--text-primary);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.dictionary-translit {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--accent-gold);
}

.dictionary-marker {
    color: var(--accent-gold-dim);
    font-size: var(--text-sm);
}

.dictionary-entry-role {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-align: center;
}

.dictionary-entry-gloss {
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    text-align: center;
    text-wrap: pretty;
}

.dictionary-entry-caret {
    justify-self: end;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1;
    transition: transform var(--transition);
}

/* Authored glyph is ▼ (closed invites opening); open rotates it to ▲. */
.dictionary-entry-toggle[aria-expanded="true"] .dictionary-entry-caret {
    transform: rotate(180deg);
}

/* --- Entry detail ------------------------------------------------------ */
.dictionary-entry-detail {
    background-color: var(--bg-mid);
    border-top: 1px solid var(--border-neutral-faint);
    padding: var(--space-card) var(--space-card) var(--space-block);
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

.dictionary-entry-detail[hidden] {
    display: none;
}

.dictionary-pronunciation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-gap);
    margin: 0;
}

.dictionary-pronunciation-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.dictionary-pronunciation {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--text-primary);
}

/* --- Declension table ------------------------------------------------- */
.dictionary-forms {
    margin: 0;
}

.dictionary-forms-caption {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 var(--space-gap);
}

.dictionary-forms-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dictionary-forms-table th {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-label);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-neutral-faint);
    padding: var(--space-tight) var(--space-gap);
}

.dictionary-forms-table td {
    border: 1px solid var(--border-neutral-faint);
    padding: var(--space-tight) var(--space-gap);
    vertical-align: top;
}

.dictionary-forms-row-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    background-color: var(--bg-surface);
}

.dictionary-form {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--accent-gold);
    margin: 0;
}

.dictionary-form-ipa {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
}

/* --- Usage note -------------------------------------------------------- */
.dictionary-note {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-neutral-faint);
    border-left: 2px solid var(--accent-scarlet);
    border-radius: var(--radius);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-gap) var(--space-card);
    margin: 0;
}

.dictionary-gloss {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-prose);
    color: var(--text-primary);
    margin: 0;
}

.dictionary-etymology {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    margin: 0;
}

.dictionary-crossref {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--track-mid);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.dictionary-entry[hidden],
.dictionary-group[hidden],
.dictionary-groups[hidden] {
    display: none;
}

/* ===========================================================================
   17. PER-RELEASE PALETTES — scoped token overrides, not forks
   ========================================================================= */

.theme-scarlet-requiem {
    --accent-primary: var(--accent-scarlet);
    --accent-primary-bright: var(--accent-scarlet-bright);
    --accent-primary-dim: var(--accent-scarlet-dim);
    --accent-secondary: var(--accent-gold);
    --accent-secondary-bright: var(--accent-gold-bright);
    --accent-secondary-dim: var(--accent-gold-dim);
}

/* An Echo of Scarlet Song — the book. Same two hues as the album, assigned
   differently: the structure recedes (scarlet-dim borders and button fill,
   archival rather than hot) and the voice brightens (gold-bright on lyric
   lines and credits). Deeper and quieter than the release page. */
.theme-echo-of-scarlet-song {
    --accent-primary: var(--accent-scarlet-dim);
    --accent-primary-bright: var(--accent-scarlet);
    --accent-primary-dim: var(--accent-scarlet-dim);
    --accent-secondary: var(--accent-gold-bright);
    --accent-secondary-bright: var(--accent-gold-bright);
    --accent-secondary-dim: var(--accent-gold-dim);
}

/* Speculative third — an Overlord-of-Death release. Element token, no new hue. */
.theme-elian-karras {
    --accent-primary: var(--element-death);
    --accent-primary-bright: var(--element-air);
    --accent-primary-dim: var(--element-death);
    --accent-secondary: var(--element-air);
    --accent-secondary-bright: var(--element-air);
    --accent-secondary-dim: var(--element-death);
}

/* ===========================================================================
   17. REVEAL CHOREOGRAPHY
   Class-based only: behaviour lives in an external script that adds
   .reveal-in. Without JS the content is visible (no display:none).

   The hidden state is gated on `.js`, which a tiny inline script in <head> adds
   to <html>. That is what makes the promise above true rather than aspirational:
   `opacity: 0` with no script to lift it leaves content invisible forever, so a
   blocked, disabled or errored script must never be able to hide anything.

   `:where()` contributes no specificity, so the gate is invisible to the
   cascade — `.reveal-in` and the reduced-motion override below still win purely
   on source order, exactly as they did before the gate existed.
   ========================================================================= */

:where(.js) .reveal {
    opacity: 0;
    transform: translateY(1.2rem);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Belt and braces: if the boot script is ever removed, this still keeps the
   content visible wherever scripting is switched off. */
@media (scripting: none) {
    .reveal {
        opacity: 1;
        transform: none;
    }
}

.reveal-in {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ===========================================================================
   18. RESPONSIVE — the breakpoints Elementor used to supply invisibly
   The prose measure needs none: min() collapses it against the gutter.
   ========================================================================= */

@media (max-width: 1024px) {
    .release-hero {
        grid-template-columns: 1fr;
        gap: var(--space-block);
    }

    .release-hero-body {
        margin-left: 0;
        width: 100%;
    }

    .age-panels {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    body { font-size: var(--text-base); }

    .age-panels,
    .footer-inner,
    .post-nav {
        grid-template-columns: 1fr;
    }

    .character-card,
    .track,
    .post-card-featured {
        flex-direction: column;
    }

    .character-image,
    .track-media,
    .post-card-featured .post-card-media {
        flex: 0 0 auto;
        max-width: 100%;
        height: 250px;
    }

    .character-image::after,
    .track-media::after,
    .post-card-featured .post-card-media::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        background: linear-gradient(to bottom, transparent, var(--bg-elevated));
    }

    .character-text,
    .track-body,
    .post-card-featured .post-card-body {
        padding: var(--space-card);
    }

    .topbar-nav {
        display: none;
    }

    .topbar-nav-open {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-gap);
        background-color: var(--bg-surface);
        border-bottom: var(--rule-hairline);
        padding: var(--space-card) var(--space-page-x);
    }

    .topbar-toggle {
        display: inline-block;
    }

    .prose-excerpt {
        padding-left: var(--space-gap);
    }

    .timeline {
        padding-left: var(--space-block);
    }

    .timeline-entry::before { left: -2.35rem; }
    .timeline-entry-major::before { left: -2.45rem; }

    .post-nav-next { text-align: left; }

    .time-strip-legend { display: none; }
}

@media (max-width: 768px) {
    .dictionary-toolbar {
        position: static;
    }

    .dictionary-controls {
        flex-direction: column;
    }

    .dictionary-select {
        flex: 0 0 auto;
    }

    /* The row becomes a stack: word, role, gloss, with the caret pinned. */
    .dictionary-entry-toggle {
        grid-template-columns: minmax(0, 1fr) 2rem;
        align-items: start;
        gap: var(--space-tight) var(--space-gap);
    }

    .dictionary-entry-role,
    .dictionary-entry-gloss {
        grid-column: 1;
        text-align: left;
    }

    .dictionary-entry-caret {
        grid-row: 1;
        grid-column: 2;
    }

    .dictionary-forms-table,
    .dictionary-forms-table tbody,
    .dictionary-forms-table tr,
    .dictionary-forms-table td {
        display: block;
        width: 100%;
    }

    .dictionary-forms-table thead {
        display: none;
    }

    .dictionary-forms-table td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-label);
        font-size: var(--text-xs);
        letter-spacing: var(--track-wide);
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-bottom: 0.2rem;
    }
}

@media (max-width: 480px) {
    .age-panels,
    .highlight-cards,
    .gallery,
    .credits {
        grid-template-columns: 1fr;
    }

    .btn-row,
    .gate-actions {
        flex-direction: column;
    }

    .btn { width: 100%; }
}

/* ===========================================================================
   19. MOTION — every animation off under prefers-reduced-motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }

    .scroll-hint { opacity: 0.6; }
    .status-pill-dot { opacity: 1; }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .post-card:hover,
    .highlight-card:hover {
        transform: none;
    }

    .skeleton { background-position: 0 0; }
}

/* ===========================================================================
   20. PRINT
   ========================================================================= */

@media print {
    .noise-layer,
    .topbar,
    .site-footer,
    .scroll-hint,
    .pagination,
    .post-nav,
    .gate-panel,
    .capture-form { display: none; }

    body {
        background: #fff;
        color: #000;
    }

    .prose { width: auto; }
}