:root {
    color-scheme: dark;
    --ink: #05080d;
    --midnight: #07121c;
    --panel: rgba(10, 22, 32, 0.9);
    --panel-light: rgba(19, 37, 49, 0.82);
    --gold: #d8b25c;
    --gold-light: #ffe09a;
    --cream: #f2ead9;
    --muted: #a8b0b4;
    --lapis: #224f84;
    --emerald: #3b9175;
    --warning: #c9874b;
    --border: rgba(216, 178, 92, 0.3);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    background:
        radial-gradient(circle at 50% -10%, #173a4f 0, transparent 42%),
        linear-gradient(180deg, #07131e 0%, var(--ink) 58%, #020406 100%);
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -3;
    content: "";
    opacity: 0.28;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 40px 40px;
}

a {
    color: inherit;
}

.page-glow {
    position: fixed;
    z-index: -2;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.16;
    pointer-events: none;
}

.page-glow-one {
    top: 12%;
    left: -180px;
    background: var(--lapis);
}

.page-glow-two {
    right: -200px;
    bottom: 8%;
    background: var(--gold);
}

.shell {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto;
    padding: 20px 0 70px;
}

.preview-banner {
    padding: 10px 16px;
    border: 1px solid rgba(216, 178, 92, 0.55);
    background: rgba(103, 67, 17, 0.34);
    text-align: center;
    font: 700 0.72rem/1.4 Arial, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--border);
}

.topbar .top-link:last-child {
    text-align: right;
}

.top-link {
    color: var(--gold-light);
    font: 700 0.78rem/1.3 Arial, sans-serif;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.top-mark {
    color: var(--muted);
    font: 600 0.75rem/1.3 "Cinzel", serif;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.hero {
    min-height: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.hero-kicker {
    margin-bottom: 8px;
    color: var(--gold);
    font: 700 clamp(1.8rem, 5vw, 3.6rem)/1.2 "Amiri", serif;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 22px;
    color: var(--gold-light);
    font: 600 clamp(3rem, 8vw, 7.2rem)/0.98 "Cinzel", serif;
    letter-spacing: -0.04em;
    text-shadow: 0 0 55px rgba(216, 178, 92, 0.24);
}

.hero-subtitle {
    max-width: 850px;
    margin-bottom: 28px;
    color: #d7dcdd;
    font-size: clamp(1.05rem, 2.1vw, 1.42rem);
    line-height: 1.8;
}

.separation-notice {
    max-width: 900px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(5, 10, 14, 0.66);
    color: var(--muted);
    line-height: 1.65;
}

.separation-notice strong {
    color: var(--gold-light);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    font: 700 0.82rem/1.2 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.button-gold {
    color: #091016;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
}

.button-outline {
    color: var(--gold-light);
    background: rgba(255, 255, 255, 0.025);
}

section {
    padding: 92px 22px;
    border-top: 1px solid rgba(216, 178, 92, 0.12);
}

.section-heading {
    max-width: 850px;
    margin: 0 auto 42px;
    text-align: center;
}

.section-heading.compact {
    margin-bottom: 30px;
}

.eyebrow {
    margin-bottom: 10px;
    color: var(--gold);
    font: 700 0.73rem/1.2 Arial, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h2 {
    margin-bottom: 14px;
    color: var(--gold-light);
    font: 600 clamp(2rem, 4vw, 3.7rem)/1.12 "Cinzel", serif;
}

.section-heading > p:last-child {
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.7;
}

.art-grid,
.collection-grid,
.status-grid {
    display: grid;
    gap: 18px;
}

.art-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.art-slot,
.collection-card,
.status-card,
.rule-card,
.reader-column,
.analysis-panel {
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(25, 47, 60, 0.68), rgba(6, 14, 20, 0.9));
    box-shadow: var(--shadow);
}

.art-slot {
    padding: 16px;
}

.art-number {
    margin-bottom: 10px;
    color: var(--gold);
    font: 700 0.72rem/1 Arial, sans-serif;
    letter-spacing: 0.16em;
}

.art-frame {
    min-height: 260px;
    display: grid;
    place-items: center;
    padding: 20px;
    border: 1px dashed rgba(216, 178, 92, 0.46);
    border-radius: 12px;
    background:
        radial-gradient(circle at center, rgba(47, 93, 120, 0.42), transparent 55%),
        linear-gradient(145deg, #111f29, #050b0f);
    color: var(--muted);
    font: 700 0.72rem/1.4 Arial, sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.art-slot h3 {
    margin: 18px 0 7px;
    color: var(--gold-light);
    font: 600 1rem/1.35 "Cinzel", serif;
}

.art-slot p {
    margin-bottom: 2px;
    color: var(--muted);
    line-height: 1.5;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.rule-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
}

.rule-number {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--gold);
    font: 700 0.75rem/1 Arial, sans-serif;
}

.rule-card p {
    margin-bottom: 0;
    color: #d5d9da;
    line-height: 1.58;
}

.collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collection-card {
    padding: 25px;
}

.collection-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.arabic-scholar {
    color: var(--gold);
    font: 700 1.55rem/1.25 "Amiri", serif;
}

.collection-card h3 {
    margin: 3px 0;
    color: var(--cream);
    font: 600 1.25rem/1.3 "Cinzel", serif;
}

.work-title {
    color: var(--muted);
    font-style: italic;
}

.collection-description {
    min-height: 88px;
    color: #cfd4d5;
    line-height: 1.62;
}

.source-note {
    padding: 15px;
    border-left: 3px solid var(--gold);
    background: rgba(0, 0, 0, 0.22);
}

.source-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--gold-light);
    font: 700 0.7rem/1.3 Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.source-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.52;
}

.collection-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.collection-stats span {
    padding: 6px 9px;
    border: 1px solid rgba(59, 145, 117, 0.45);
    border-radius: 999px;
    color: #bde5d7;
    background: rgba(59, 145, 117, 0.09);
    font: 700 0.68rem/1.2 Arial, sans-serif;
}

.status {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font: 700 0.62rem/1.15 Arial, sans-serif;
    letter-spacing: 0.075em;
    text-align: center;
    text-transform: uppercase;
}

.status-hold {
    color: #e3b27e;
    background: rgba(201, 135, 75, 0.1);
}

.status-source-acquired {
    color: #98dcc5;
    background: rgba(59, 145, 117, 0.11);
}

.status-attribution-pending {
    color: #d6bcf3;
    background: rgba(114, 74, 154, 0.14);
}

.status-ready-for-ingestion {
    color: #9fcaf2;
    background: rgba(34, 79, 132, 0.18);
}

.status-live {
    color: var(--gold-light);
    background: rgba(216, 178, 92, 0.12);
}

.status-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.status-card {
    padding: 20px;
}

.status-card p {
    margin: 15px 0 0;
    color: var(--muted);
    line-height: 1.52;
}

.source-layout {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 22px;
}

.source-ledger,
.source-analysis,
.reader-shell {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(5, 13, 19, 0.8);
    box-shadow: var(--shadow);
}

.source-ledger {
    padding: 25px;
}

.source-ledger dl {
    margin: 0;
}

.source-ledger dl > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(216, 178, 92, 0.12);
}

.source-ledger dl > div:last-child {
    border-bottom: 0;
}

.source-ledger dt {
    color: var(--muted);
}

.source-ledger dd {
    margin: 0;
    color: var(--cream);
}

.source-analysis {
    padding: 22px;
}

.analysis-panel {
    padding: 22px;
    box-shadow: none;
}

.analysis-panel + .analysis-panel {
    margin-top: 14px;
}

.analysis-panel h3 {
    color: var(--gold-light);
    font: 600 1.12rem/1.3 "Cinzel", serif;
}

.analysis-panel p {
    margin-bottom: 0;
    color: #ced4d5;
    line-height: 1.65;
}

.analysis-panel.warning {
    border-color: rgba(201, 135, 75, 0.48);
}

.safety-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.safety-list span {
    padding: 12px;
    border: 1px solid rgba(216, 178, 92, 0.15);
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.safety-list strong {
    color: var(--cream);
}

.reader-shell {
    overflow: hidden;
}

.reader-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.reader-controls label {
    color: var(--gold);
    font: 700 0.7rem/1.3 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reader-controls select,
.reader-controls button {
    width: 100%;
    min-height: 43px;
    margin-top: 7px;
    padding: 9px 11px;
    border: 1px solid rgba(216, 178, 92, 0.28);
    border-radius: 7px;
    color: var(--muted);
    background: #09121a;
}

.reader-controls button {
    align-self: end;
    color: #7f878a;
    font-weight: 700;
}

.reader-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    gap: 0;
}

.reader-column {
    min-height: 285px;
    padding: 28px;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

.reader-column:last-child {
    border-right: 0;
}

.column-label {
    margin-bottom: 24px;
    color: var(--gold);
    font: 700 0.67rem/1.2 Arial, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.reader-column h3 {
    color: var(--gold-light);
    font: 600 1.4rem/1.3 "Cinzel", serif;
}

.reader-column p {
    color: var(--muted);
    line-height: 1.72;
}

.quran-column {
    background: rgba(216, 178, 92, 0.035);
}

.tafsir-column {
    background: rgba(34, 79, 132, 0.055);
}

.provenance-column {
    background: rgba(59, 145, 117, 0.045);
}

.page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 35px 20px 5px;
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.page-footer p {
    margin: 0;
}

.page-footer a {
    flex: 0 0 auto;
    color: var(--gold-light);
    text-decoration: none;
}

@media (max-width: 1100px) {
    .art-grid,
    .collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .source-layout {
        grid-template-columns: 1fr;
    }

    .reader-controls {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .shell {
        width: min(100% - 18px, 1440px);
    }

    .topbar {
        grid-template-columns: 1fr 1fr;
    }

    .top-mark {
        display: none;
    }

    .hero {
        min-height: 620px;
        padding-inline: 10px;
    }

    section {
        padding: 68px 10px;
    }

    .art-grid,
    .rules-grid,
    .collection-grid,
    .status-grid {
        grid-template-columns: 1fr;
    }

    .collection-description {
        min-height: 0;
    }

    .collection-top {
        flex-direction: column;
    }

    .source-ledger dl > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .safety-list,
    .reader-controls,
    .reader-columns {
        grid-template-columns: 1fr;
    }

    .reader-column {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .reader-column:last-child {
        border-bottom: 0;
    }

    .page-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   AL-RAZI COLLECTION DETAIL
   ========================================================== */

.collection-link {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 10px 17px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(216, 178, 92, 0.06);
    font: 700 0.72rem/1.2 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.collection-link:hover {
    background: rgba(216, 178, 92, 0.14);
}

.collection-hero {
    position: relative;
    min-height: 720px;
    display: grid;
    overflow: hidden;
    align-items: end;
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(34, 79, 132, 0.38),
            transparent 55%
        ),
        #061019;
    box-shadow: var(--shadow);
}

.collection-hero-art,
.collection-hero-shade {
    position: absolute;
    inset: 0;
}

.collection-hero-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.collection-hero-shade {
    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 10, 0.18) 0%,
            rgba(3, 7, 10, 0.42) 42%,
            rgba(3, 7, 10, 0.96) 100%
        );
}

.collection-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 920px;
    padding: 60px;
}

.collection-arabic {
    margin-bottom: 8px;
    font-size: clamp(2rem, 5vw, 4rem);
}

.collection-hero h1 {
    margin-bottom: 10px;
    font-size: clamp(3rem, 8vw, 7rem);
}

.collection-work {
    margin-bottom: 20px;
    color: var(--gold);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-style: italic;
}

.collection-introduction {
    max-width: 760px;
    margin: 24px 0 0;
    color: #d7dcdd;
    font-size: 1.08rem;
    line-height: 1.75;
}

.collection-art-placeholder {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
    background:
        radial-gradient(
            circle at center,
            rgba(34, 79, 132, 0.34),
            transparent 52%
        ),
        linear-gradient(145deg, #102330, #04090d);
}

.collection-art-placeholder span {
    color: var(--gold);
    font: 700 0.68rem/1.2 Arial, sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.collection-art-placeholder strong {
    color: var(--gold-light);
    font: 600 1.2rem/1.3 "Cinzel", serif;
}

.collection-art-placeholder small {
    color: var(--muted);
}

.collection-summary-section {
    padding-top: 42px;
    padding-bottom: 42px;
}

.collection-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.summary-stat {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(6, 16, 24, 0.84);
    text-align: center;
}

.summary-stat span {
    display: block;
    margin-bottom: 9px;
    color: var(--muted);
    font: 700 0.68rem/1.2 Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.summary-stat strong {
    color: var(--gold-light);
    font: 600 1.6rem/1.2 "Cinzel", serif;
}

.volume-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.volume-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(19, 37, 49, 0.76),
            rgba(5, 12, 17, 0.94)
        );
}

.volume-number {
    color: var(--gold);
    font: 700 0.7rem/1 Arial, sans-serif;
    letter-spacing: 0.16em;
}

.volume-card h3 {
    margin: 15px 0 9px;
    color: var(--gold-light);
    font: 600 1.12rem/1.3 "Cinzel", serif;
}

.volume-card p {
    color: var(--muted);
    line-height: 1.58;
}

.volume-state {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid rgba(201, 135, 75, 0.46);
    border-radius: 999px;
    color: #e3b27e;
    font: 700 0.65rem/1.2 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collection-art-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.collection-art-card {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(6, 15, 21, 0.88);
    box-shadow: var(--shadow);
}

.collection-art-frame {
    min-height: 300px;
    overflow: hidden;
    border: 1px solid rgba(216, 178, 92, 0.26);
    border-radius: 13px;
    background: #071018;
}

.collection-art-frame img {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
}

.collection-art-card h3 {
    margin: 18px 4px 8px;
    color: var(--gold-light);
    font: 600 1rem/1.35 "Cinzel", serif;
}

.collection-art-card > p {
    margin: 0 4px 5px;
    color: var(--muted);
    line-height: 1.55;
}

.gate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.gate-card {
    padding: 23px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: rgba(5, 13, 19, 0.88);
}

.gate-card > span {
    color: var(--gold);
    font: 700 0.7rem/1 Arial, sans-serif;
    letter-spacing: 0.15em;
}

.gate-card h3 {
    margin: 15px 0 8px;
    color: var(--gold-light);
    font: 600 1rem/1.3 "Cinzel", serif;
}

.gate-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.gate-complete {
    border-color: rgba(59, 145, 117, 0.48);
}

.gate-pending {
    border-color: rgba(201, 135, 75, 0.5);
}

.gate-locked {
    opacity: 0.76;
}

@media (max-width: 1050px) {
    .collection-summary-grid,
    .volume-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-art-grid,
    .gate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .collection-hero {
        min-height: 650px;
    }

    .collection-hero-copy {
        padding: 38px 22px;
    }

    .collection-summary-grid,
    .volume-grid,
    .collection-art-grid,
    .gate-grid {
        grid-template-columns: 1fr;
    }

    .collection-art-frame,
    .collection-art-frame img {
        min-height: 260px;
        height: 260px;
    }
}

/* ==========================================================
   AL-RAZI VOLUME READER FOUNDATION
   ========================================================== */

.volume-card-link {
    position: relative;
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.volume-card-link:hover,
.volume-card-link:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(230, 190, 96, 0.76);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(230, 190, 96, 0.16);
}

.volume-card-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.volume-card-image {
    height: 170px;
    overflow: hidden;
    margin: -24px -24px 22px;
    border-bottom:
        1px solid rgba(216, 178, 92, 0.32);
    background: #071018;
}

.volume-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 300ms ease;
}

.volume-card-link:hover .volume-card-image img {
    transform: scale(1.035);
}

.volume-card-content {
    position: relative;
    z-index: 1;
}

.volume-reader-hero {
    position: relative;
    min-height: 700px;
    display: grid;
    overflow: hidden;
    align-items: end;
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #061019;
    box-shadow: var(--shadow);
}

.volume-reader-art,
.volume-reader-shade {
    position: absolute;
    inset: 0;
}

.volume-reader-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.volume-reader-shade {
    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 10, 0.18) 0%,
            rgba(3, 7, 10, 0.5) 45%,
            rgba(3, 7, 10, 0.97) 100%
        );
}

.volume-reader-placeholder {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(32, 79, 129, 0.42),
            transparent 48%
        ),
        linear-gradient(145deg, #102330, #03080c);
}

.volume-reader-placeholder > span {
    color: rgba(230, 190, 96, 0.16);
    font:
        600 clamp(8rem, 24vw, 18rem)/0.8
        "Cinzel",
        serif;
}

.volume-reader-placeholder strong {
    color: var(--gold-light);
    font: 600 1.3rem/1.3 "Cinzel", serif;
}

.volume-reader-placeholder small {
    color: var(--muted);
}

.volume-reader-copy {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 60px;
}

.volume-reader-arabic {
    margin-bottom: 8px;
    font-size: clamp(2rem, 5vw, 4rem);
}

.volume-reader-copy h1 {
    margin-bottom: 10px;
    font-size: clamp(4rem, 11vw, 8rem);
}

.volume-reader-status {
    display: inline-flex;
    padding: 8px 13px;
    border: 1px solid rgba(201, 135, 75, 0.7);
    border-radius: 999px;
    color: #edbc86;
    background: rgba(201, 135, 75, 0.08);
    font: 700 0.68rem/1.2 Arial, sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.volume-reader-introduction {
    max-width: 780px;
    margin-top: 24px;
    color: #d7dcdd;
    font-size: 1.08rem;
    line-height: 1.75;
}

.volume-progress-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.volume-progress-card {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: rgba(5, 13, 19, 0.9);
}

.volume-progress-card > span {
    color: var(--gold);
    font: 700 0.7rem/1 Arial, sans-serif;
    letter-spacing: 0.15em;
}

.volume-progress-card h3 {
    margin: 15px 0 9px;
    color: var(--gold-light);
    font: 600 1rem/1.3 "Cinzel", serif;
}

.volume-progress-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.volume-progress-card.complete {
    border-color: rgba(59, 145, 117, 0.5);
}

.volume-progress-card.pending {
    border-color: rgba(201, 135, 75, 0.54);
}

.volume-progress-card.locked {
    opacity: 0.76;
}

.volume-sequence-navigation {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    margin-top: 70px;
    padding: 25px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.volume-sequence-navigation > div:last-child {
    text-align: right;
}

.volume-sequence-link,
.volume-sequence-center {
    color: var(--gold-light);
    font: 600 0.78rem/1.3 "Cinzel", serif;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.volume-sequence-link:hover,
.volume-sequence-center:hover {
    color: white;
}

.volume-sequence-center {
    padding: 10px 15px;
    border: 1px solid rgba(216, 178, 92, 0.5);
    border-radius: 999px;
    text-align: center;
}

@media (max-width: 900px) {
    .volume-progress-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .volume-reader-hero {
        min-height: 650px;
    }

    .volume-reader-copy {
        padding: 38px 22px;
    }

    .volume-progress-grid {
        grid-template-columns: 1fr;
    }

    .volume-sequence-navigation {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .volume-sequence-navigation > div:last-child {
        text-align: center;
    }
}

/* ==========================================================
   VERIFIED VOLUME INVENTORY SHELVES
   ========================================================== */

.volume-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 16px;
}

.volume-card-facts span {
    display: inline-flex;
    padding: 5px 8px;
    border: 1px solid rgba(216, 178, 92, 0.25);
    border-radius: 999px;
    color: #b9c3c7;
    background: rgba(216, 178, 92, 0.04);
    font: 600 0.61rem/1.2 Arial, sans-serif;
    letter-spacing: 0.04em;
}

.volume-inventory-section {
    padding-top: 80px;
}

.inventory-shelf {
    margin-bottom: 36px;
    padding: 24px;
    border: 1px solid rgba(216, 178, 92, 0.26);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(10, 26, 36, 0.92),
            rgba(3, 9, 13, 0.96)
        );
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.28);
}

.inventory-shelf-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 19px;
    border-bottom: 1px solid rgba(216, 178, 92, 0.18);
}

.inventory-shelf-heading > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(216, 178, 92, 0.5);
    border-radius: 50%;
    color: var(--gold);
    font: 700 0.7rem/1 Arial, sans-serif;
    letter-spacing: 0.12em;
}

.inventory-shelf-heading h3 {
    margin: 0 0 7px;
    color: var(--gold-light);
    font: 600 1.28rem/1.3 "Cinzel", serif;
}

.inventory-shelf-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.inventory-shelf-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.inventory-item {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border: 1px solid rgba(150, 175, 188, 0.18);
    border-radius: 15px;
    background: rgba(4, 12, 18, 0.82);
}

.inventory-label {
    display: block;
    margin-bottom: 10px;
    color: var(--gold);
    font: 700 0.64rem/1.2 Arial, sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.inventory-item strong {
    overflow-wrap: anywhere;
    color: var(--gold-light);
    font: 600 0.97rem/1.45 "Cinzel", serif;
}

.inventory-item small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.45;
}

.inventory-item.verified {
    border-color: rgba(59, 145, 117, 0.42);
}

.inventory-item.pending {
    border-color: rgba(201, 135, 75, 0.48);
}

.inventory-item.locked {
    opacity: 0.76;
}

.inventory-external-link {
    color: var(--gold-light);
    font: 600 0.9rem/1.45 "Cinzel", serif;
    text-decoration: none;
}

.inventory-external-link:hover {
    color: white;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.inventory-wide-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.inventory-wide-item {
    padding: 23px;
    border: 1px solid rgba(150, 175, 188, 0.18);
    border-radius: 15px;
    background: rgba(4, 12, 18, 0.82);
}

.inventory-wide-item.warning {
    border-color: rgba(201, 135, 75, 0.5);
}

.inventory-wide-item strong {
    display: block;
    color: var(--gold-light);
    font: 600 1rem/1.45 "Cinzel", serif;
}

.inventory-wide-item p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.62;
}

.future-shelves-section {
    padding-top: 70px;
}

.future-shelf-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.future-shelf-card {
    min-height: 230px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 31, 41, 0.82),
            rgba(4, 11, 16, 0.94)
        );
}

.future-shelf-card > span {
    color: var(--gold);
    font: 700 0.7rem/1 Arial, sans-serif;
    letter-spacing: 0.15em;
}

.future-shelf-card h3 {
    margin: 17px 0 10px;
    color: var(--gold-light);
    font: 600 1rem/1.35 "Cinzel", serif;
}

.future-shelf-card p {
    color: var(--muted);
    line-height: 1.62;
}

.future-shelf-card > strong {
    display: inline-flex;
    margin-top: 10px;
    padding: 6px 9px;
    border: 1px solid rgba(201, 135, 75, 0.46);
    border-radius: 999px;
    color: #e3b27e;
    font: 700 0.63rem/1.2 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.future-shelf-card.pending {
    border-color: rgba(201, 135, 75, 0.48);
}

.future-shelf-card.locked {
    opacity: 0.74;
}

@media (max-width: 1050px) {
    .inventory-shelf-grid,
    .future-shelf-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .inventory-shelf {
        padding: 18px;
    }

    .inventory-shelf-grid,
    .inventory-wide-grid,
    .future-shelf-grid {
        grid-template-columns: 1fr;
    }

    .inventory-shelf-heading {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   CLICKABLE INFORMATION SHELVES
   ========================================================== */

.inventory-shelf-clickable {
    position: relative;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.inventory-shelf-clickable:hover {
    transform: translateY(-4px);
    border-color: rgba(230, 190, 96, 0.7);
    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(230, 190, 96, 0.12);
}

.inventory-shelf-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
}

.inventory-shelf-link-overlay > span {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid rgba(216, 178, 92, 0.5);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(3, 10, 15, 0.86);
    font: 700 0.62rem/1.2 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inventory-shelf-clickable
.inventory-shelf-heading,
.inventory-shelf-clickable
.inventory-shelf-grid,
.inventory-shelf-clickable
.inventory-wide-grid {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.inventory-shelf-clickable
.inventory-external-link {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.future-shelf-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.future-shelf-link:hover,
.future-shelf-link:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(230, 190, 96, 0.76);
    opacity: 1;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.42);
}

.future-shelf-link:focus-visible,
.inventory-shelf-link-overlay:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

.shelf-detail-hero {
    position: relative;
    min-height: 520px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 35px;
    overflow: hidden;
    margin-top: 18px;
    padding: 55px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(35, 83, 136, 0.45),
            transparent 48%
        ),
        linear-gradient(145deg, #102330, #03080c);
    box-shadow: var(--shadow);
}

.shelf-detail-number {
    color: rgba(230, 190, 96, 0.2);
    font:
        600 clamp(7rem, 18vw, 14rem)/0.78
        "Cinzel",
        serif;
}

.shelf-detail-copy {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.shelf-detail-copy h1 {
    margin-bottom: 20px;
    font-size: clamp(3rem, 7vw, 6.5rem);
}

.shelf-detail-copy > p:last-child {
    max-width: 760px;
    margin-top: 25px;
    color: #d6dcde;
    font-size: 1.08rem;
    line-height: 1.75;
}

.shelf-status {
    display: inline-flex;
    padding: 8px 13px;
    border-radius: 999px;
    font: 700 0.67rem/1.2 Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shelf-status-open {
    border: 1px solid rgba(59, 145, 117, 0.62);
    color: #82d7bb;
    background: rgba(59, 145, 117, 0.08);
}

.shelf-status-pending {
    border: 1px solid rgba(201, 135, 75, 0.68);
    color: #e5b27d;
    background: rgba(201, 135, 75, 0.08);
}

.shelf-status-locked {
    border: 1px solid rgba(153, 166, 172, 0.48);
    color: #bcc5c9;
    background: rgba(153, 166, 172, 0.06);
}

.shelf-record-section {
    padding-top: 75px;
}

.shelf-fact-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.shelf-fact-grid-two {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.shelf-fact {
    min-height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    border: 1px solid rgba(150, 175, 188, 0.2);
    border-radius: 16px;
    background: rgba(4, 12, 18, 0.86);
}

.shelf-fact > span {
    margin-bottom: 10px;
    color: var(--gold);
    font: 700 0.64rem/1.2 Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shelf-fact strong {
    overflow-wrap: anywhere;
    color: var(--gold-light);
    font: 600 1rem/1.45 "Cinzel", serif;
}

.shelf-fact small {
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.45;
}

.shelf-fact.verified {
    border-color: rgba(59, 145, 117, 0.46);
}

.official-record-button {
    display: inline-flex;
    margin-top: 24px;
    padding: 13px 18px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(216, 178, 92, 0.07);
    font: 700 0.72rem/1.2 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.official-record-button:hover {
    background: rgba(216, 178, 92, 0.16);
}

.shelf-warning-panel {
    margin-top: 18px;
    padding: 25px;
    border: 1px solid rgba(201, 135, 75, 0.55);
    border-radius: 17px;
    background: rgba(201, 135, 75, 0.06);
}

.shelf-warning-panel h3 {
    margin: 0 0 10px;
    color: var(--gold-light);
    font: 600 1.1rem/1.35 "Cinzel", serif;
}

.shelf-warning-panel p {
    margin: 0;
    color: #c9d0d3;
    line-height: 1.7;
}

.shelf-detail-lists {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 75px;
}

.shelf-list-panel {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(5, 13, 19, 0.9);
}

.shelf-list-panel h2 {
    font-size: 1.25rem;
}

.shelf-list-panel ul,
.shelf-list-panel ol {
    margin: 20px 0 0;
    padding-left: 22px;
    color: #c3cccf;
}

.shelf-list-panel li {
    margin-bottom: 13px;
    line-height: 1.6;
}

.verified-panel {
    border-color: rgba(59, 145, 117, 0.48);
}

.missing-panel {
    border-color: rgba(201, 135, 75, 0.52);
}

.next-panel {
    border-color: rgba(79, 121, 169, 0.5);
}

.shelf-lock-notice {
    margin-top: 65px;
    padding: 35px;
    border: 1px solid rgba(201, 135, 75, 0.54);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(45, 29, 18, 0.42),
            rgba(5, 12, 17, 0.94)
        );
    text-align: center;
}

.shelf-lock-notice > span {
    color: #e5b27d;
    font: 700 0.67rem/1.2 Arial, sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.shelf-lock-notice h2 {
    margin: 15px 0 12px;
}

.shelf-lock-notice p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.7;
}

.shelf-sequence-navigation {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    margin-top: 70px;
    padding: 25px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.shelf-sequence-navigation > div:last-child {
    text-align: right;
}

.shelf-sequence-link,
.shelf-sequence-center {
    color: var(--gold-light);
    font: 600 0.76rem/1.4 "Cinzel", serif;
    text-decoration: none;
}

.shelf-sequence-center {
    padding: 10px 15px;
    border: 1px solid rgba(216, 178, 92, 0.5);
    border-radius: 999px;
    text-align: center;
}

.shelf-sequence-link:hover,
.shelf-sequence-center:hover {
    color: white;
}

@media (max-width: 950px) {
    .shelf-detail-lists,
    .shelf-fact-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .inventory-shelf-link-overlay > span {
        top: 12px;
        right: 12px;
    }

    .shelf-detail-hero {
        min-height: 580px;
        grid-template-columns: 1fr;
        align-content: end;
        padding: 35px 22px;
    }

    .shelf-detail-number {
        font-size: 7rem;
    }

    .shelf-detail-lists,
    .shelf-fact-grid,
    .shelf-fact-grid-two {
        grid-template-columns: 1fr;
    }

    .shelf-sequence-navigation {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .shelf-sequence-navigation > div:last-child {
        text-align: center;
    }
}

/* ==========================================================
   OFFICIAL ACO BOOK VIEWER
   ========================================================== */

.volume-reader-header {
    position: relative;
    min-height: 300px;
    display: grid;
    overflow: hidden;
    align-items: end;
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(35, 83, 136, 0.42),
            transparent 48%
        ),
        linear-gradient(145deg, #102330, #03080c);
    box-shadow: var(--shadow);
}

.volume-reader-header-art,
.volume-reader-header-shade {
    position: absolute;
    inset: 0;
}

.volume-reader-header-art {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.volume-reader-header-shade {
    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 12, 0.96) 0%,
            rgba(3, 8, 12, 0.76) 55%,
            rgba(3, 8, 12, 0.42) 100%
        );
}

.volume-reader-header-copy {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 38px 45px;
}

.volume-reader-header-copy h1 {
    margin: 4px 0 8px;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.volume-reader-header-copy
.volume-reader-arabic {
    font-size: clamp(1.7rem, 4vw, 3rem);
}

.volume-reader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.volume-reader-meta span {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid rgba(216, 178, 92, 0.38);
    border-radius: 999px;
    color: #d7dcdd;
    background: rgba(4, 12, 18, 0.72);
    font: 700 0.65rem/1.2 Arial, sans-serif;
    letter-spacing: 0.06em;
}

.official-book-reader {
    padding-top: 42px;
}

.official-book-reader-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 25px;
    margin-bottom: 20px;
}

.official-book-reader-heading h2 {
    margin-bottom: 9px;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.official-book-reader-heading p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.official-reader-record-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(216, 178, 92, 0.07);
    font: 700 0.68rem/1.2 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.official-reader-record-link:hover {
    background: rgba(216, 178, 92, 0.16);
}

.official-book-reader-frame {
    height: min(82vh, 980px);
    min-height: 720px;
    overflow: hidden;
    border: 1px solid rgba(216, 178, 92, 0.48);
    border-radius: 18px;
    background: #05090c;
    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.48);
}

.official-book-reader-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: white;
}

.official-book-reader-note {
    margin-top: 16px;
    padding: 15px 18px;
    border: 1px solid rgba(59, 145, 117, 0.38);
    border-radius: 14px;
    color: #bfc9cc;
    background: rgba(59, 145, 117, 0.05);
    line-height: 1.65;
}

.official-book-reader-note strong {
    color: #86d8bd;
}

.official-reader-noscript {
    padding: 25px;
    color: white;
}

@media (max-width: 850px) {
    .official-book-reader-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .official-reader-record-link {
        justify-self: start;
    }

    .official-book-reader-frame {
        height: 760px;
        min-height: 760px;
    }
}

@media (max-width: 700px) {
    .volume-reader-header {
        min-height: 330px;
    }

    .volume-reader-header-copy {
        padding: 30px 22px;
    }

    .official-book-reader {
        padding-top: 30px;
    }

    .official-book-reader-frame {
        height: 650px;
        min-height: 650px;
        border-radius: 13px;
    }

    .official-reader-record-link {
        width: 100%;
    }
}

/* SAGE CONTAINED READING ROOM V1 START */

[hidden] {
    display: none !important;
}

.sage-rr-page {
    --rr-ink: #03070b;
    --rr-panel: rgba(7, 17, 24, 0.96);
    --rr-panel-soft: rgba(11, 27, 36, 0.9);
    --rr-gold: #d8b25c;
    --rr-gold-light: #f2d48f;
    --rr-cream: #f5ead0;
    --rr-muted: #adb8ba;
    --rr-border: rgba(216, 178, 92, 0.29);
    --rr-blue: #0e3347;

    height: 100vh;
    min-height: 720px;
    margin: 0;
    overflow: hidden;
    color: var(--rr-cream);
    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(28, 91, 115, 0.42),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #07141d 0%,
            #03070b 100%
        );
}

.sage-rr-page *,
.sage-rr-page *::before,
.sage-rr-page *::after {
    box-sizing: border-box;
}

.sage-rr-glow {
    position: fixed;
    z-index: 0;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: 0.18;
}

.sage-rr-glow-one {
    top: 5%;
    left: -160px;
    background: #217799;
}

.sage-rr-glow-two {
    right: -160px;
    bottom: 4%;
    background: #9a6a20;
}

.sage-rr-topbar {
    position: relative;
    z-index: 4;
    height: 58px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 0 28px;
    border-bottom: 1px solid var(--rr-border);
    background: rgba(3, 8, 12, 0.92);
    backdrop-filter: blur(18px);
}

.sage-rr-top-link {
    color: var(--rr-gold-light);
    font: 700 0.72rem/1.2 Arial, sans-serif;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.sage-rr-top-link:hover {
    color: #ffffff;
}

.sage-rr-top-link-right {
    text-align: right;
}

.sage-rr-top-title {
    color: var(--rr-cream);
    font: 600 0.82rem/1.2 "Cinzel", serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sage-rr-stage {
    position: relative;
    z-index: 2;
    width: min(100% - 28px, 1540px);
    height: calc(100vh - 72px);
    min-height: 630px;
    display: grid;
    grid-template-columns:
        minmax(135px, 170px)
        minmax(0, 1160px)
        minmax(135px, 170px);
    gap: 14px;
    margin: 14px auto 0;
}

.sage-rr-ad-rail {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sage-rr-ad-slot {
    width: 100%;
    height: min(600px, calc(100vh - 150px));
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(216, 178, 92, 0.2);
    border-radius: 14px;
    color: rgba(245, 234, 208, 0.48);
    background:
        linear-gradient(
            160deg,
            rgba(216, 178, 92, 0.045),
            rgba(9, 28, 38, 0.45)
        );
    box-shadow:
        inset 0 0 35px rgba(0, 0, 0, 0.42);
    text-align: center;
}

.sage-rr-ad-slot span {
    font: 700 0.64rem/1.2 Arial, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.sage-rr-ad-slot small {
    color: rgba(173, 184, 186, 0.38);
    font: 0.68rem/1.3 Arial, sans-serif;
}

.sage-rr-room {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--rr-border);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(13, 37, 49, 0.95),
            rgba(4, 11, 16, 0.98) 42%
        );
    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.48),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.sage-rr-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 14px 20px 13px;
    border-bottom: 1px solid var(--rr-border);
}

.sage-rr-header-copy {
    min-width: 0;
}

.sage-rr-eyebrow {
    margin: 0 0 6px;
    color: var(--rr-gold);
    font: 700 0.65rem/1.2 Arial, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sage-rr-arabic {
    float: right;
    margin: 0 0 3px 20px;
    color: rgba(242, 212, 143, 0.8);
    font: 700 1.15rem/1.3 "Amiri", serif;
}

.sage-rr-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sage-rr-title-row h1 {
    margin: 0;
    color: #fff8e8;
    font: 600 clamp(1.25rem, 2vw, 1.85rem)/1.1 "Cinzel", serif;
}

.sage-rr-work {
    margin: 3px 0 0;
    color: var(--rr-muted);
    font-size: 0.88rem;
    font-style: italic;
}

.sage-rr-volume-count {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--rr-border);
    border-radius: 999px;
    color: var(--rr-gold-light);
    font: 700 0.62rem/1 Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sage-rr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.sage-rr-meta span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #c9d2d3;
    background: rgba(255, 255, 255, 0.045);
    font: 0.68rem/1.1 Arial, sans-serif;
}

.sage-rr-volume-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sage-rr-volume-nav a,
.sage-rr-volume-nav-disabled {
    min-width: 92px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--rr-border);
    border-radius: 9px;
    color: var(--rr-gold-light);
    background: rgba(216, 178, 92, 0.055);
    font: 700 0.66rem/1.1 Arial, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
}

.sage-rr-volume-nav a:hover {
    color: #ffffff;
    background: rgba(216, 178, 92, 0.14);
}

.sage-rr-volume-nav-disabled {
    color: rgba(173, 184, 186, 0.34);
    border-color: rgba(173, 184, 186, 0.12);
}

.sage-rr-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--rr-border);
    background: rgba(0, 0, 0, 0.2);
}

.sage-rr-tab {
    min-width: 0;
    min-height: 43px;
    padding: 9px 8px;
    border: 0;
    border-right: 1px solid rgba(216, 178, 92, 0.12);
    color: #9fa9aa;
    background: transparent;
    cursor: pointer;
    font: 700 0.66rem/1.15 Arial, sans-serif;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.sage-rr-tab:last-child {
    border-right: 0;
}

.sage-rr-tab:hover {
    color: var(--rr-cream);
    background: rgba(255, 255, 255, 0.025);
}

.sage-rr-tab.is-active {
    color: #071018;
    background:
        linear-gradient(
            180deg,
            var(--rr-gold-light),
            var(--rr-gold)
        );
}

.sage-rr-tab-stage {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.sage-rr-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(20px, 2.2vw, 34px);
    overflow: auto;
}

.sage-rr-reader-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 9px;
    padding: 11px;
    overflow: hidden;
}

.sage-rr-reader-guide,
.sage-rr-reader-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 10px;
    color: var(--rr-muted);
    font: 0.72rem/1.3 Arial, sans-serif;
}

.sage-rr-reader-guide div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sage-rr-reader-guide strong {
    flex: 0 0 auto;
    color: var(--rr-gold-light);
}

.sage-rr-on-site-note {
    flex: 0 0 auto;
    color: #84b8c7;
    font-weight: 700;
}

.sage-rr-reader-frame {
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(216, 178, 92, 0.36);
    border-radius: 10px;
    background: #d7d1c6;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.42);
}

.sage-rr-reader-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: block;
    border: 0;
    background: #d7d1c6;
}

.sage-rr-reader-foot {
    padding-top: 2px;
    padding-bottom: 0;
    font-size: 0.65rem;
}

.sage-rr-noscript {
    margin: 20px;
    color: #231f18;
}

.sage-rr-story-layout,
.sage-rr-edition-layout,
.sage-rr-sources-layout {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.13fr 0.87fr;
    align-items: center;
    gap: clamp(24px, 4vw, 58px);
}

.sage-rr-story-lead,
.sage-rr-panel-heading {
    min-width: 0;
}

.sage-rr-panel h2,
.sage-rr-story-lead h2 {
    margin: 0 0 16px;
    color: #fff7e4;
    font: 600 clamp(1.5rem, 2.7vw, 2.55rem)/1.12 "Cinzel", serif;
}

.sage-rr-panel p {
    color: #cbd3d4;
    line-height: 1.68;
}

.sage-rr-large-copy {
    color: #e3e7e5 !important;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.75 !important;
}

.sage-rr-portrait-card,
.sage-rr-page-guide,
.sage-rr-citation-box {
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--rr-border);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(21, 54, 68, 0.75),
            rgba(5, 13, 18, 0.92)
        );
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.sage-rr-card-number {
    display: block;
    margin-bottom: 22px;
    color: var(--rr-gold);
    font: 700 0.72rem/1 Arial, sans-serif;
    letter-spacing: 0.17em;
}

.sage-rr-portrait-card h3,
.sage-rr-page-guide h3,
.sage-rr-citation-box h3 {
    margin: 17px 0 7px;
    color: var(--rr-gold-light);
    font: 600 1rem/1.3 "Cinzel", serif;
}

.sage-rr-portrait-card p,
.sage-rr-page-guide p,
.sage-rr-citation-box p {
    margin: 0;
    font-size: 0.9rem;
}

.sage-rr-panel-heading {
    max-width: 780px;
    margin-bottom: 22px;
}

.sage-rr-panel-heading p:last-child {
    max-width: 720px;
    margin-bottom: 0;
}

.sage-rr-idea-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sage-rr-idea-grid article {
    min-width: 0;
    padding: clamp(17px, 1.8vw, 25px);
    border: 1px solid var(--rr-border);
    border-radius: 13px;
    background: rgba(10, 28, 37, 0.74);
}

.sage-rr-idea-grid article > span {
    color: var(--rr-gold);
    font: 700 0.68rem/1 Arial, sans-serif;
    letter-spacing: 0.14em;
}

.sage-rr-idea-grid h3 {
    margin: 14px 0 9px;
    color: var(--rr-gold-light);
    font: 600 0.98rem/1.25 "Cinzel", serif;
}

.sage-rr-idea-grid p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.58;
}

.sage-rr-context-note {
    margin-top: 16px;
    padding: 10px 13px;
    border-left: 3px solid var(--rr-gold);
    color: var(--rr-muted);
    background: rgba(216, 178, 92, 0.055);
    font: 0.75rem/1.45 Arial, sans-serif;
}

.sage-rr-edition-ledger {
    margin: 0;
}

.sage-rr-edition-ledger > div {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(216, 178, 92, 0.13);
}

.sage-rr-edition-ledger dt {
    color: var(--rr-gold);
    font: 700 0.66rem/1.35 Arial, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sage-rr-edition-ledger dd {
    margin: 0;
    color: #dbe0df;
    font-size: 0.86rem;
    line-height: 1.4;
}

.sage-rr-page-guide ol {
    margin: 14px 0 20px;
    padding-left: 20px;
    color: #d1d7d7;
}

.sage-rr-page-guide li {
    margin: 0 0 10px;
    padding-left: 5px;
    line-height: 1.5;
}

.sage-rr-page-guide li::marker {
    color: var(--rr-gold);
    font-weight: 700;
}

.sage-rr-attribution-note {
    padding: 13px;
    border: 1px solid rgba(216, 178, 92, 0.22);
    border-radius: 9px;
    color: #cbd2d2;
    background: rgba(216, 178, 92, 0.055);
    font-size: 0.78rem;
    line-height: 1.52;
}

.sage-rr-attribution-note strong {
    color: var(--rr-gold-light);
}

.sage-rr-map-note {
    margin-top: 13px !important;
    color: var(--rr-muted) !important;
    font-size: 0.74rem !important;
}

.sage-rr-source-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.sage-rr-source-facts span {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px;
    border: 1px solid rgba(216, 178, 92, 0.16);
    border-radius: 9px;
    color: var(--rr-muted);
    background: rgba(255, 255, 255, 0.025);
    font: 0.68rem/1.3 Arial, sans-serif;
    text-transform: uppercase;
}

.sage-rr-source-facts strong {
    color: #e5e9e7;
    font-size: 0.78rem;
    text-transform: none;
}

.sage-rr-citation-box {
    align-self: center;
}

.sage-rr-citation-box > a {
    display: block;
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 2px solid var(--rr-gold);
    color: var(--rr-gold-light);
    background: rgba(216, 178, 92, 0.045);
    font: 700 0.78rem/1.3 Arial, sans-serif;
    text-decoration: none;
}

.sage-rr-citation-box > a:hover {
    color: #ffffff;
    background: rgba(216, 178, 92, 0.1);
}

.sage-rr-citation-box small {
    display: block;
    margin-top: 3px;
    color: var(--rr-muted);
    font-weight: 400;
}

@media (max-width: 1280px) {
    .sage-rr-stage {
        grid-template-columns:
            minmax(110px, 130px)
            minmax(0, 1fr)
            minmax(110px, 130px);
    }

    .sage-rr-ad-slot {
        min-height: 360px;
    }

    .sage-rr-meta span:nth-child(3),
    .sage-rr-meta span:nth-child(4) {
        display: none;
    }
}

@media (max-width: 1040px) {
    .sage-rr-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .sage-rr-ad-rail {
        display: none;
    }

    .sage-rr-idea-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sage-rr-page {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .sage-rr-topbar {
        height: auto;
        min-height: 56px;
        grid-template-columns: 1fr 1fr;
        padding: 11px 13px;
    }

    .sage-rr-top-title {
        display: none;
    }

    .sage-rr-stage {
        width: min(100% - 14px, 1540px);
        height: auto;
        min-height: 0;
        margin-top: 7px;
    }

    .sage-rr-room {
        min-height: calc(100vh - 70px);
        overflow: visible;
    }

    .sage-rr-header {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    .sage-rr-arabic {
        float: none;
        margin-left: 0;
    }

    .sage-rr-title-row {
        align-items: flex-start;
        justify-content: space-between;
    }

    .sage-rr-volume-count {
        white-space: nowrap;
    }

    .sage-rr-volume-nav {
        width: 100%;
    }

    .sage-rr-tabs {
        display: flex;
        overflow-x: auto;
    }

    .sage-rr-tab {
        flex: 0 0 150px;
    }

    .sage-rr-tab-stage {
        min-height: 650px;
    }

    .sage-rr-reader-panel {
        min-height: 650px;
    }

    .sage-rr-reader-guide,
    .sage-rr-reader-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .sage-rr-reader-guide div {
        align-items: flex-start;
        flex-direction: column;
    }

    .sage-rr-reader-frame {
        min-height: 520px;
    }

    .sage-rr-story-layout,
    .sage-rr-edition-layout,
    .sage-rr-sources-layout {
        height: auto;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .sage-rr-idea-grid,
    .sage-rr-source-facts {
        grid-template-columns: 1fr;
    }

    .sage-rr-panel {
        height: auto;
        min-height: 650px;
    }
}

/* SAGE CONTAINED READING ROOM V1 END */