/* The Mirrored Realms – a dark grimoire.
   Gold on aged black, teal for the mirror, Cinzel capitals and Garamond prose,
   and the furniture of a D&D table: stat blocks, ability scores, dice. */

@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel-latin-ext.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "EB Garamond";
    src: url("../fonts/eb-garamond-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "EB Garamond";
    src: url("../fonts/eb-garamond-latin-ext.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "EB Garamond";
    src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "EB Garamond";
    src: url("../fonts/eb-garamond-italic-latin-ext.woff2") format("woff2");
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

.mirrorgate-page {
    --serif: "EB Garamond", "Palatino Linotype", Georgia, serif;
    --caps: "Cinzel", "Trajan Pro", "Palatino Linotype", serif;
    --gold: var(--md-sys-color-primary);
    --gold-soft: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
    --teal: var(--md-sys-color-tertiary);
    /* The red of a stat block's rules, darkened for the night. */
    --ember: #c4533a;
    --page: min(1180px, calc(100vw - 48px));
    font-family: var(--serif);
    font-size: 19px;
}

/* A faint arcane circle and warm lamplight behind the whole page. */
body.mirrorgate-page::before {
    background:
        radial-gradient(48rem 34rem at 78% 4%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
        radial-gradient(40rem 34rem at 10% 60%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 72%);
}
.mirrorgate-page .site-grid { opacity: .45; background-size: 96px 96px; mask-image: radial-gradient(circle at 55% 18%, #000, transparent 62%); }

/* UI chrome stays in the site's sans; everything inside the book is serif. */
.mirrorgate-page .site-header,
.mirrorgate-page .site-footer { font-family: var(--font); }

.mirrorgate-page h1,
.mirrorgate-page h2,
.mirrorgate-page h3 { font-family: var(--caps); font-stretch: normal; font-weight: 600; letter-spacing: .01em; text-transform: none; }

/* Labels become engraved small capitals. */
.mirrorgate-page .section-label,
.mirrorgate-page .detail-badge,
.mirrorgate-page .journey-status,
.mirrorgate-page .ledger-status,
.mirrorgate-page .artwork-note > span,
.mirrorgate-page .detail-visual-label,
.mirrorgate-page .mirror-quote cite,
.mirrorgate-page .detail-stats span { font-family: var(--caps); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }

/* Chapters are numbered in Roman numerals (CSS counters keep the markup unchanged). */
.mirrorgate-page main { counter-reset: chapter; }
.mirrorgate-page .detail-section { counter-increment: chapter; }
/* The chapter number sits in a gold diamond, like the quest markers below.
   Cinzel capitals sit about .075em above the centre of their line box. */
.mirrorgate-page .section-label { gap: 14px; font-size: .8rem; }
.mirrorgate-page .section-label span { width: 50px; height: 50px; flex: none; place-content: center; color: #1d1405; background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 100%, #fff 18%), var(--gold) 55%, color-mix(in srgb, var(--gold) 80%, #5a3d0a)); clip-path: var(--shape-diamond); font-size: 0; }
.mirrorgate-page .section-label span::before { content: counter(chapter, upper-roman); font-family: var(--caps); font-size: .86rem; font-weight: 800; line-height: 1; letter-spacing: .02em; translate: 0 .075em; }

.mirrorgate-page .button,
.mirrorgate-page .button-ghost { font-family: var(--caps); font-size: .9rem; font-weight: 700; letter-spacing: .04em; }
.mirrorgate-page .button { color: #1d1405; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 100%, #fff 10%), color-mix(in srgb, var(--gold) 85%, #5a3d0a)); }
.mirrorgate-page .button-ghost { color: var(--gold); background: transparent; box-shadow: inset 0 0 0 1px var(--gold-soft); }
.mirrorgate-page .button-ghost:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.mirrorgate-page .detail-tags span { border-color: var(--gold-soft); color: var(--md-sys-color-on-surface-variant); font-family: var(--caps); font-size: .74rem; font-weight: 600; letter-spacing: .06em; }
.mirrorgate-page .detail-breadcrumb { font-family: var(--font); }

/* ─── Hero: the threshold ────────────────────────────────────────────────── */

.mirrorgate-page .detail-hero { padding: 58px 0 110px; grid-template-columns: 1fr; justify-items: center; gap: 48px; }
.mirrorgate-page .detail-copy { display: flex; width: min(100%, 950px); align-items: center; flex-direction: column; text-align: center; }
/* A slowly turning seal of runic ticks behind the title. */
.mirrorgate-page .detail-hero::after {
    position: absolute;
    top: 6%;
    right: 50%;
    width: min(46vw, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    background:
        repeating-conic-gradient(from 9deg, color-mix(in srgb, var(--teal) 45%, transparent) 0deg 1.2deg, transparent 1.2deg 40deg),
        conic-gradient(from 24deg, transparent 0 15%, color-mix(in srgb, var(--gold) 55%, transparent) 18%, transparent 22% 48%, color-mix(in srgb, var(--teal) 40%, transparent) 52%, transparent 57% 82%, color-mix(in srgb, var(--gold) 38%, transparent) 86%, transparent 91%);
    opacity: .55;
    pointer-events: none;
    -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 55.4% 56%, transparent 56.5% 68%, #000 68.5% 69.2%, transparent 69.7% 79%, #000 79.4% 80%, transparent 80.5%);
    mask: radial-gradient(circle, transparent 0 55%, #000 55.4% 56%, transparent 56.5% 68%, #000 68.5% 69.2%, transparent 69.7% 79%, #000 79.4% 80%, transparent 80.5%);
    transform: translateX(50%);
    animation: realm-seal 60s linear infinite;
}
@keyframes realm-seal { to { transform: translateX(50%) rotate(360deg); } }

.mirrorgate-page .detail-title { display: grid; justify-items: center; margin: 18px 0 8px; font-size: clamp(4.4rem, 11vw, 9.6rem); font-weight: 600; line-height: .86; }
/* German: "Spiegelreiche" is more than twice as long as "Realms" (about 7.4em
   wide), so on narrow screens the title follows the available width instead. */
@media (max-width: 920px) {
    html[lang="de"] .mirrorgate-page .detail-title { font-size: min(4.6rem, calc((100vw - 56px) * .13)); }
}
.mirrorgate-page .mirrored-title-prefix { color: var(--gold); font-size: .42em; font-weight: 700; letter-spacing: .14em; }
.mirrorgate-page .detail-title .outline { color: transparent; font-weight: 500; -webkit-text-stroke: 1.2px var(--teal); text-shadow: 0 0 40px color-mix(in srgb, var(--teal) 25%, transparent); }
/* Flourish: rule – diamond – rule. */
.realm-ornament {
    display: block;
    width: min(320px, 70%);
    height: 20px;
    margin: 6px auto 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 20'%3E%3Cg fill='none' stroke='%23e8c173' stroke-width='1.2'%3E%3Cpath d='M4 10h122M194 10h122' stroke-opacity='.6'/%3E%3Cpath d='M160 2l9 8-9 8-9-8z'/%3E%3Cpath d='M136 10l8-5v10zM184 10l-8-5v10z' fill='%23e8c173' fill-opacity='.7'/%3E%3Ccircle cx='128' cy='10' r='2' fill='%23e8c173'/%3E%3Ccircle cx='192' cy='10' r='2' fill='%23e8c173'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.mirrorgate-page .detail-lead { max-width: 760px; color: var(--ink-soft); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.55; }
.mirrorgate-page .detail-actions { justify-content: center; }
.mirrorgate-page .detail-tags { justify-content: center; }

/* Hero marks: what the setting is built for, each with a small engraved icon. */
.realm-marks { display: flex; margin: 30px 0 0; padding: 0; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; }
.realm-marks li { display: flex; min-height: 64px; padding: 8px 20px 8px 8px; align-items: center; gap: 14px; border-radius: var(--shape-full); background: color-mix(in srgb, var(--gold) 6%, var(--md-sys-color-surface-container-low)); box-shadow: inset 0 0 0 1px var(--gold-soft); text-align: left; }
.realm-mark-icon { display: grid; width: 48px; height: 48px; flex: none; place-items: center; border-radius: 50%; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
/* The official Obsidian mark keeps its own colours (brand rules: no recolouring). */
.realm-mark-logo { background: color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); }
.realm-mark-logo img { width: 30px; height: 30px; }
.realm-mark-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.realm-marks strong { display: block; color: var(--ink); font-family: var(--caps); font-size: .92rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.realm-marks small { display: block; margin-top: 2px; color: var(--muted); font-size: .9rem; line-height: 1.3; }

.mirrorgate-visual {
    width: min(100%, 980px);
    min-height: 660px;
    margin: 0;
    border-radius: 48% 48% var(--shape-xxl) var(--shape-xxl);
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 36%), linear-gradient(160deg, #13110c, #0b0d0d);
    box-shadow: inset 0 0 0 1px var(--gold-soft), var(--shadow);
}
.mirrorgate-visual::before { display: none; }
.mirror-portal { position: absolute; top: 40%; left: 50%; width: min(58%, 330px); aspect-ratio: .7; transform: translate(-50%, -50%); }
.mirror-arch { position: absolute; inset: 0; border-radius: 50% 50% 24% 24%; }
.mirror-arch-outer { border: 2px solid color-mix(in srgb, var(--gold) 80%, transparent); box-shadow: 0 0 0 16px color-mix(in srgb, var(--gold) 4%, transparent), 0 30px 80px rgb(0 0 0 / .4); }
.mirror-arch-inner { inset: 14px; border: 1px solid color-mix(in srgb, var(--teal) 50%, transparent); }
.mirror-surface { position: absolute; inset: 28px; overflow: hidden; border-radius: 50% 50% 24% 24%; background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--teal) 40%, transparent), rgb(5 15 16 / .96) 62%); box-shadow: inset 0 0 75px color-mix(in srgb, var(--teal) 14%, transparent); }
.mirror-surface::after { position: absolute; top: 5%; left: 50%; width: 20%; height: 80%; border-radius: 50%; content: ""; background: rgb(230 255 250 / .1); filter: blur(12px); transform: rotate(10deg); }
.mirror-surface i { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / .1) 49%, transparent 57%); animation: mirror-sheen 7s ease-in-out infinite; }
.mirror-star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 14px var(--teal); animation: blink 2.4s ease-in-out infinite alternate; }
.mirror-star-one { top: 12%; left: 5%; }
.mirror-star-two { top: 25%; right: 7%; animation-delay: -.7s; }
.mirror-star-three { right: 12%; bottom: 18%; animation-delay: -1.3s; }
.mirror-quote { position: absolute; right: 30px; bottom: 58px; left: 30px; margin: 0; color: var(--ink-soft); font-size: 1.2rem; font-style: italic; text-align: center; }
.mirror-quote cite { display: block; margin-top: 10px; color: var(--muted); font-style: normal; }
.mirrorgate-page .detail-visual-label { color: color-mix(in srgb, var(--gold) 60%, transparent); }
@keyframes mirror-sheen {
    0%, 24% { opacity: 0; transform: translateX(-90%); }
    30% { opacity: 1; }
    68% { opacity: 1; transform: translateX(90%); }
    74%, 100% { opacity: 0; transform: translateX(90%); }
}

/* The d20 resting at the foot of the mirror. */
.realm-d20 { width: 86px; height: 86px; overflow: visible; }
.realm-d20 .d20-face { fill: color-mix(in srgb, var(--gold) 16%, #120f0a); }
.realm-d20 .d20-edge { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; }
/* Sized to stay inside the centre triangle, also for two-digit rolls. */
.realm-d20 text { fill: var(--gold); font-family: var(--caps); font-size: 11.5px; font-weight: 800; text-anchor: middle; }
.mirrorgate-visual .realm-d20 {
    position: absolute;
    top: 64%;
    left: 50%;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 35%, transparent));
    transform: translate(-50%, -50%);
    animation: d20-hover 6s ease-in-out infinite;
}
@keyframes d20-hover { 50% { transform: translate(-50%, calc(-50% - 10px)) rotate(8deg); } }

/* ─── Ability scores (project facts) ─────────────────────────────────────── */

.mirrorgate-page .detail-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; background: transparent; box-shadow: none; }
.mirrorgate-page .detail-stats > div {
    position: relative;
    display: grid;
    min-height: 150px;
    padding: 26px 20px 22px;
    place-items: center;
    border-radius: var(--shape-xl);
    background: linear-gradient(180deg, var(--md-sys-color-surface-container-high), var(--md-sys-color-surface-container));
    box-shadow: inset 0 0 0 1px var(--gold-soft);
    text-align: center;
}
/* The small diamond that sits on top of a score box on a character sheet. */
.mirrorgate-page .detail-stats > div::before { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; content: ""; background: var(--gold); transform: translateX(-50%) rotate(45deg); }
.mirrorgate-page .detail-stats strong { color: var(--gold); font-family: var(--caps); font-size: 2.8rem; font-weight: 700; }
.mirrorgate-page .detail-stats span { margin-top: 6px; color: var(--muted); }

/* ─── Section heads with an illuminated initial ──────────────────────────── */

.mirrorgate-page .detail-section-head h2 { font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 600; line-height: 1.02; }
.mirrorgate-page .detail-section-head > p { font-size: 1.12rem; line-height: 1.6; }
#roadmap .detail-section-head > p::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    padding: 4px 10px 2px;
    border-radius: var(--shape-sm);
    color: #1d1405;
    background: var(--gold);
    font-family: var(--caps);
    font-size: 3.2em;
    font-weight: 700;
    line-height: .82;
}

/* ─── Journeys ───────────────────────────────────────────────────────────── */

.journey-grid,
.ledger-grid { display: grid; gap: 16px; }
.journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey-card {
    min-height: 340px;
    padding: 34px 30px 30px;
    border-radius: 50% 50% var(--shape-xl) var(--shape-xl) / 30% 30% var(--shape-xl) var(--shape-xl);
    background: var(--md-sys-color-surface-container);
    box-shadow: inset 0 0 0 1px var(--gold-soft);
    text-align: center;
}
.journey-card > strong {
    display: block;
    margin: 30px 0 6px;
    color: var(--gold);
    font-family: var(--caps);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
}
.journey-card h3 { margin: 10px 0 12px; color: var(--ink); font-size: 1.7rem; }
.journey-card p:last-child { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.journey-card-long { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 55%), var(--md-sys-color-surface-container); }
.mirrorgate-page .plan-note { border-radius: var(--shape-lg); background: color-mix(in srgb, var(--gold) 7%, var(--md-sys-color-surface-container-low)); font-size: 1rem; }
.mirrorgate-page .plan-note strong { color: var(--gold); font-family: var(--caps); font-size: .85rem; letter-spacing: .06em; }

/* ─── At a glance: the setting's stat block ──────────────────────────────── */

.realm-glance {
    display: grid;
    margin: 16px 0 0;
    padding: 26px 30px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 28px;
    border-radius: var(--shape-xl);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--ember) 70%, transparent), inset 0 0 0 1px var(--gold-soft);
}
.realm-glance dt { color: var(--gold); font-family: var(--caps); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.realm-glance dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.4; }

/* ─── Current production: the open quest log ─────────────────────────────── */

.production {
    display: grid;
    margin-top: 16px;
    padding: 34px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 32px;
    border-radius: var(--shape-xxl);
    background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 50%), var(--md-sys-color-surface-container);
    box-shadow: inset 0 0 0 1px var(--gold-soft);
}
.production-head h3 { margin: 14px 0 12px; color: var(--gold); font-size: 2rem; }
.production-head > p:last-child { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.production-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.production-card { display: flex; padding: 24px; flex-direction: column; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container-low); box-shadow: inset 3px 0 0 var(--gold-soft); }
.production-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.production-kind,
.production-work > span { color: var(--muted); font-family: var(--caps); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.production-card h4 { margin: 18px 0 16px; color: var(--ink); font-family: var(--caps); font-size: 1.45rem; font-weight: 600; line-height: 1.15; }
.production-bar { height: 6px; overflow: hidden; border-radius: var(--shape-full); background: color-mix(in srgb, var(--gold) 12%, transparent); }
/* Honest about how early this is: the fill is the real estimate, with a visible minimum. */
.production-bar span { display: block; width: max(var(--progress, 0%), 6px); height: 100%; border-radius: inherit; background: var(--gold); }
.production-figure { display: flex; margin: 12px 0 0; align-items: baseline; gap: 10px; color: var(--muted); font-size: .95rem; }
.production-figure strong { color: var(--gold); font-family: var(--caps); font-size: 1.5rem; font-weight: 700; }
.production-work { margin: 14px 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.production-work > span { display: block; margin-bottom: 4px; }

/* ─── Ledger: what the vault holds ───────────────────────────────────────── */

.ledger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ledger-card { min-height: 230px; padding: 28px; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container); box-shadow: inset 3px 0 0 var(--gold-soft); }
.ledger-card h3 { margin: 22px 0 10px; font-size: 1.6rem; }
.ledger-card p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.ledger-status { display: inline-flex; padding: 5px 12px; border-radius: var(--shape-full); }
.status-present { color: #a9e6de; background: rgb(75 155 146 / .18); }
.status-progress { color: #f1d795; background: rgb(180 134 40 / .18); }
.status-planned { color: #cfc6b3; background: rgb(180 170 150 / .1); }

/* ─── Entering the vault: a quest log ────────────────────────────────────── */

.vault-entry { display: grid; overflow: hidden; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); border-radius: var(--shape-xxl); background: var(--md-sys-color-surface-container); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.vault-entry-copy { padding: 36px; }
.vault-entry-copy h3 { margin: 16px 0; color: var(--gold); font-size: 2.4rem; }
.vault-entry-copy > p { color: var(--ink-soft); }
.mirrorgate-page .code-box { background: #0c0b08; box-shadow: inset 0 0 0 1px var(--gold-soft); }
.mirrorgate-page .code-box code { color: var(--gold); }
.mirrorgate-page .copy-code { color: #1d1405; background: var(--gold); font-family: var(--font); }
.vault-steps { margin: 0; padding: 8px 0; list-style: none; counter-reset: quest; background: var(--md-sys-color-surface-container-low); }
.vault-steps li { position: relative; display: flex; min-height: 120px; padding: 22px 26px 22px 80px; align-items: start; counter-increment: quest; }
.vault-steps li + li { border-top: 1px solid var(--line); }
/* A checkbox-diamond like a quest objective. */
.vault-steps li::before { position: absolute; top: 24px; left: 28px; display: grid; width: 32px; height: 32px; place-items: center; color: #1d1405; background: var(--gold); clip-path: var(--shape-diamond); content: counter(quest, upper-roman); font-family: var(--caps); font-size: .78rem; font-weight: 800; }
.vault-steps li > span { display: none; }
.vault-steps strong { font-family: var(--caps); font-size: 1.1rem; font-weight: 700; }
.vault-steps p { margin: 5px 0 0; color: var(--ink-soft); font-size: 1rem; }
.vault-steps code { color: var(--gold); font-size: .85em; overflow-wrap: anywhere; }
.artwork-note { display: grid; margin-top: 16px; padding: 22px 26px; grid-template-columns: 150px 1fr; gap: 24px; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container-low); }
.artwork-note > span { color: var(--gold); }
.artwork-note p { margin: 0; color: var(--ink-soft); font-size: 1rem; font-style: italic; }

/* ─── The Scriptorium: tools in use, tools on the horizon ────────────────── */

/* Tools in use stand in a row of three; planned ones wait, outlined, below. */
.tool-groups { display: grid; gap: 40px; }
.tool-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.tool-group-planned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mirrorgate-page .tool-group-title { display: flex; margin: 0 0 4px; grid-column: 1 / -1; align-items: center; gap: 16px; color: var(--gold); font-family: var(--caps); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mirrorgate-page .tool-group-title::after { height: 1px; flex: 1; content: ""; background: linear-gradient(90deg, var(--gold-soft), transparent); }
.tool-group-planned .tool-group-title { color: var(--muted); }
.tool-card {
    display: flex;
    min-width: 0;
    padding: 26px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--shape-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 5%, var(--md-sys-color-surface-container)), var(--md-sys-color-surface-container-low));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
    transition: border-radius var(--spring-default-duration) var(--spring-default), translate var(--spring-default-duration) var(--spring-default), box-shadow var(--effects-duration) var(--effects);
}
.tool-card:hover { border-radius: var(--shape-xxl); box-shadow: inset 0 0 0 1px var(--gold-soft), 0 18px 40px rgb(0 0 0 / .35); translate: 0 -3px; }
.tool-group-planned .tool-card { background: transparent; box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--gold) 22%, transparent); outline-offset: -1px; }
.tool-group-planned .tool-card:hover { background: color-mix(in srgb, var(--gold) 4%, transparent); box-shadow: none; }
.tool-card-top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
/* Each tool carries a line icon in a gold diamond that softens on hover. */
.tool-icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: none;
    place-items: center;
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    clip-path: var(--shape-diamond);
    transition: clip-path var(--spring-default-duration) var(--spring-default);
}
.tool-card:hover .tool-icon { clip-path: var(--shape-cookie9); }
.tool-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool-group-planned .tool-icon { color: var(--muted); background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.tool-card h4 { margin: 20px 0 10px; color: var(--ink); font-family: var(--caps); font-size: 1.5rem; font-weight: 600; }
.tool-card p { margin: 0 0 18px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.tool-badge { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 0 14px; }

/* The Atlas VTT compatibility badge under the hero tags. */
.atlas-badge { display: inline-block; width: min(100%, 300px); margin-top: 22px; border-radius: 14px; transition: translate var(--spring-fast-duration) var(--spring-fast), filter var(--effects-duration) var(--effects); }
.atlas-badge img { width: 100%; height: auto; }
.atlas-badge:hover { translate: 0 -2px; filter: drop-shadow(0 8px 18px rgb(0 0 0 / .45)); }
.atlas-badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.tool-link { margin-top: auto; padding: 4px 0; color: var(--gold); font-family: var(--caps); font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
.tool-link:hover { border-bottom-color: var(--gold); }
.tool-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ─── Closing invitation ─────────────────────────────────────────────────── */

.mirrorgate-cta { text-align: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 55%), var(--md-sys-color-surface-container-high); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.mirrorgate-cta::after { display: none; }
.mirrorgate-cta > p:not(.detail-badge) { margin-inline: auto; font-size: 1.1rem; }
.mirrorgate-cta .detail-actions { justify-content: center; }
/* Open source and the licence, at the foot of the invitation. */
.realm-license { display: flex; margin-top: 30px; padding-top: 24px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; border-top: 1px solid var(--gold-soft); }
.realm-license-chip { display: inline-flex; min-height: 40px; padding: 0 16px 0 10px; align-items: center; gap: 10px; border-radius: var(--shape-full); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--gold-soft); font-family: var(--caps); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.realm-license-chip > span { display: grid; color: var(--gold); }
.realm-license-chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
a.realm-license-chip:hover { color: var(--ink); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.realm-license-link { color: var(--gold); font-family: var(--caps); font-size: .8rem; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid var(--gold-soft); }
.realm-license-link:hover { border-bottom-color: var(--gold); }

/* Terms page: the attribution statement as a quotable block. */
.realm-attribution { margin: 18px 0; padding: 20px 24px; border-radius: var(--shape-lg); color: var(--ink); background: color-mix(in srgb, var(--gold) 7%, var(--md-sys-color-surface-container)); box-shadow: inset 3px 0 0 var(--gold); font-style: italic; }
/* Cinzel runs much wider than the condensed sans; keep the title inside its column. */
.realm-legal-page .legal-title { font-size: clamp(2.8rem, 5.6vw, 5.4rem); line-height: .95; overflow-wrap: anywhere; }
.realm-legal-page .legal-section-number { font-family: var(--caps); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.realm-d20-cta { width: 96px; height: 96px; margin: 0 auto 10px; animation: spin 40s linear infinite; }
/* The real 3D die that die3d.js puts in its place: press it to roll. */
.realm-die3d {
    display: block;
    width: 168px;
    height: 168px;
    margin: -18px auto 0;
    cursor: pointer;
    filter: drop-shadow(0 14px 22px rgb(0 0 0 / .45));
    touch-action: manipulation;
    transition: scale var(--spring-fast-duration) var(--spring-fast), filter var(--effects-duration) var(--effects);
    -webkit-tap-highlight-color: transparent;
}
.realm-die3d:hover { scale: 1.06; }
.realm-die3d:active { scale: .95; }
.realm-die3d:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
.realm-die3d.is-crit { filter: drop-shadow(0 0 28px var(--gold)); }
.realm-die3d.is-fumble { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--ember) 70%, transparent)); }

/* ─── The known world: Kagameru on a framed map ─────────────────────────── */

.realm-map { position: relative; margin: 0; }
.realm-map-frame {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--shape-xl);
    background: #0d0b08;
    box-shadow: inset 0 0 0 1px var(--gold-soft), var(--shadow);
}
/* Both maps share one cell and cross-fade. */
.realm-map-image { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; transition: opacity 420ms var(--effects); }
.realm-map-image.is-shown { opacity: 1; }
.realm-map-open {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 8px 16px;
    border-radius: var(--shape-full);
    color: #1d1405;
    background: var(--gold);
    font-family: var(--caps);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    opacity: .92;
}
.realm-map-switch {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: none;
    padding: 3px;
    border-radius: var(--shape-full);
    background: rgb(18 15 10 / .82);
    box-shadow: inset 0 0 0 1px var(--gold-soft);
    backdrop-filter: blur(8px);
}
.js .realm-map-switch { display: inline-flex; }
.realm-map-option {
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--shape-full);
    color: var(--ink-soft);
    background: transparent;
    cursor: pointer;
    font-family: var(--caps);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: color var(--effects-duration) var(--effects), background var(--effects-duration) var(--effects);
}
.realm-map-option[aria-pressed="true"] { color: #1d1405; background: var(--gold); }
.realm-map figcaption { margin-top: 14px; color: var(--ink-soft); font-size: 1rem; font-style: italic; line-height: 1.55; }
.realm-map figcaption strong { color: var(--gold); font-family: var(--caps); font-size: .85rem; font-style: normal; letter-spacing: .06em; }
.realm-map-facts { margin-top: 18px; }

/* Announced titles inside the journey cards. */
.journey-titles { display: grid; margin: 18px 0 0; padding: 16px 0 0; gap: 6px; border-top: 1px solid var(--gold-soft); list-style: none; }
.journey-titles li { color: var(--gold); font-family: var(--caps); font-size: .92rem; font-weight: 600; letter-spacing: .02em; }
.journey-titles li span { display: block; color: var(--muted); font-family: var(--font); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ─── Mirror shards ──────────────────────────────────────────────────────── */

/* Splinters of the broken mirror drift up through the page behind the content,
   turning and tilting so they catch the light. Only transform and opacity are animated. */
.realm-shards {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    perspective: 900px;
}
.realm-shards i {
    /* Per-shard values, set below: column, size, speed, start, spin (--ax), sway, strength. */
    --x: 50%;
    --size: 80px;
    --time: 40s;
    --start: 0s;
    --ax: .4;
   
    --sway: 6vw;
    --glow: .5;
    --y: 40vh;
    position: absolute;
    top: 0;
    left: var(--x);
    display: block;
    width: var(--size);
    height: calc(var(--size) * 1.35);
    /* A soft sheen that fades across the surface, over the teal-to-gold tint of the glass. */
    background:
        linear-gradient(112deg, rgb(255 255 255 / .34), transparent 34%, transparent 66%, rgb(255 255 255 / .1)),
        linear-gradient(200deg, color-mix(in srgb, var(--teal) 46%, transparent), color-mix(in srgb, var(--gold) 16%, transparent) 70%, transparent);
    clip-path: polygon(38% 0, 100% 22%, 78% 100%, 0 64%);
    opacity: 0;
    animation: shard-flow var(--time) linear var(--start) infinite;
    will-change: transform, opacity;
}
.realm-shards i:nth-child(3n + 1) { clip-path: polygon(50% 0, 100% 38%, 62% 100%, 0 72%, 14% 20%); }
.realm-shards i:nth-child(3n + 2) { clip-path: polygon(12% 0, 100% 10%, 58% 100%, 0 46%); }
.realm-shards i:nth-child(4n) { clip-path: polygon(64% 0, 100% 58%, 30% 100%, 0 28%); }

.realm-shards i:nth-child(1) { --x: 4%; --size: 96px; --time: 46s; --start: -4s; --ax: .3; --sway: 7vw; --glow: .5; --y: 18vh; }
.realm-shards i:nth-child(2) { --x: 14%; --size: 44px; --time: 34s; --start: -21s; --ax: .8; --sway: -5vw; --glow: .62; --y: 62vh; }
.realm-shards i:nth-child(3) { --x: 23%; --size: 130px; --time: 62s; --start: -38s; --ax: .2; --sway: 5vw; --glow: .34; --y: 80vh; }
.realm-shards i:nth-child(4) { --x: 33%; --size: 58px; --time: 39s; --start: -9s; --ax: .7; --sway: -8vw; --glow: .55; --y: 30vh; }
.realm-shards i:nth-child(5) { --x: 44%; --size: 36px; --time: 29s; --start: -17s; --ax: .5; --sway: 6vw; --glow: .66; --y: 52vh; }
.realm-shards i:nth-child(6) { --x: 54%; --size: 108px; --time: 55s; --start: -46s; --ax: .9; --sway: -6vw; --glow: .38; --y: 8vh; }
.realm-shards i:nth-child(7) { --x: 63%; --size: 50px; --time: 36s; --start: -27s; --ax: .4; --sway: 9vw; --glow: .58; --y: 70vh; }
.realm-shards i:nth-child(8) { --x: 72%; --size: 82px; --time: 48s; --start: -12s; --ax: .6; --sway: -7vw; --glow: .46; --y: 40vh; }
.realm-shards i:nth-child(9) { --x: 81%; --size: 40px; --time: 31s; --start: -2s; --ax: .2; --sway: 5vw; --glow: .64; --y: 88vh; }
.realm-shards i:nth-child(10) { --x: 90%; --size: 118px; --time: 58s; --start: -33s; --ax: .7; --sway: -5vw; --glow: .36; --y: 24vh; }
.realm-shards i:nth-child(11) { --x: 9%; --size: 62px; --time: 42s; --start: -30s; --ax: .9; --sway: 8vw; --glow: .5; --y: 46vh; }
.realm-shards i:nth-child(12) { --x: 48%; --size: 70px; --time: 44s; --start: -24s; --ax: .3; --sway: -9vw; --glow: .48; --y: 92vh; }
.realm-shards i:nth-child(13) { --x: 68%; --size: 32px; --time: 27s; --start: -14s; --ax: .6; --sway: 6vw; --glow: .7; --y: 14vh; }
.realm-shards i:nth-child(14) { --x: 95%; --size: 54px; --time: 37s; --start: -19s; --ax: .5; --sway: -6vw; --glow: .56; --y: 58vh; }

/* The shards spin in the plane and only tilt up to about 45 degrees, so they
   never turn fully edge-on (which would show them as a thin line). */
@keyframes shard-flow {
    0% { opacity: 0; transform: translate3d(0, 112vh, 0) rotateZ(0deg) rotateX(-40deg) rotateY(30deg); }
    10% { opacity: var(--glow); }
    50% { transform: translate3d(var(--sway), 46vh, 0) rotateZ(calc(var(--ax) * 200deg)) rotateX(44deg) rotateY(-36deg); }
    90% { opacity: var(--glow); }
    100% { opacity: 0; transform: translate3d(calc(var(--sway) * -.5), -24vh, 0) rotateZ(calc(var(--ax) * 400deg)) rotateX(-40deg) rotateY(30deg); }
}
}

/* The whole field slides a little against the scroll, so the shards feel like
   they hang in the room rather than on the page. */
@supports (animation-timeline: scroll()) {
    .realm-shards { animation: shard-parallax linear both; animation-timeline: scroll(root); }
    @keyframes shard-parallax { to { translate: 0 -14vh; } }
}

@media (max-width: 680px) {
    /* Fewer and smaller on phones. */
    .realm-shards i:nth-child(n + 8) { display: none; }
    .realm-shards i { width: calc(var(--size) * .7); height: calc(var(--size) * .95); }
}

@media (prefers-reduced-motion: reduce) {
    /* No drifting: the shards simply hang where they are. */
    .realm-shards { animation: none; }
    .realm-shards i { animation: none !important; opacity: calc(var(--glow) * .6); transform: translateY(var(--y)) rotate(calc(var(--ax) * 90deg)); }
}

/* ─── Atmosphere: mist, lantern light, and things half-seen ──────────────── */

/* Low mist drifts through the page behind the content. Only transforms move. */
.realm-mist { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.realm-mist i {
    position: absolute;
    width: 90vmax;
    height: 50vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 9%, transparent), color-mix(in srgb, #b9c2bf 4%, transparent) 45%, transparent);
    will-change: transform;
}
.realm-mist i:nth-child(1) { top: 55%; left: -30%; animation: mist-drift 70s ease-in-out infinite alternate; }
.realm-mist i:nth-child(2) { top: 10%; right: -40%; width: 110vmax; animation: mist-drift 95s ease-in-out -30s infinite alternate-reverse; }
.realm-mist i:nth-child(3) { bottom: -30%; left: 20%; height: 40vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 5%, transparent), transparent); animation: mist-drift 80s ease-in-out -50s infinite alternate; }
@keyframes mist-drift { from { transform: translate3d(-8vw, 2vh, 0) scale(1); } to { transform: translate3d(14vw, -4vh, 0) scale(1.15); } }

/* A lantern: the page is a little darker away from the light, which follows the
   pointer on desktop and rests above the middle of the screen elsewhere. It is
   moved with a transform, so following the pointer never repaints the page. */
.realm-lantern {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 260vmax;
    height: 260vmax;
    pointer-events: none;
    background: radial-gradient(closest-side, transparent 0 13%, rgb(4 3 2 / .16) 24%, rgb(4 3 2 / .38) 46%, rgb(4 3 2 / .42));
    transform: translate(calc(var(--pointer-x, 50vw) - 50%), calc(var(--pointer-y, 38vh) - 50%));
    transition: transform 1100ms var(--effects);
    will-change: transform;
}

/* An inscription circles the mirror, too faint to read at a glance. */
.mirror-inscription {
    position: absolute;
    top: 41%;
    left: 50%;
    width: min(78%, 500px);
    aspect-ratio: 1;
    overflow: visible;
    pointer-events: none;
    translate: -50% -50%;
    animation: inscription-turn 140s linear infinite;
}
.mirror-inscription text { fill: color-mix(in srgb, var(--gold) 42%, transparent); font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
@keyframes inscription-turn { to { rotate: 360deg; } }

/* Rings spread over the mirror's surface, as if something stirred behind it. */
.mirror-surface b {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 70%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent);
    border-radius: 50%;
    opacity: 0;
    translate: -50% -50%;
    animation: mirror-ripple 9s ease-out infinite;
}
.mirror-surface b + b { animation-delay: -4.5s; }
@keyframes mirror-ripple { 0% { opacity: 0; scale: .1; } 15% { opacity: .7; } 100% { opacity: 0; scale: 1.6; } }

/* Sections surface out of the mist instead of merely fading in. */
.js .mirrorgate-page .reveal { filter: blur(10px); transition: opacity 1100ms var(--effects), transform 1100ms var(--spring-slow), filter 1300ms var(--effects); }
.js .mirrorgate-page .reveal.is-visible { filter: none; }

/* Chapter diamonds glow like a candle behind glass: a soft halo behind the
   diamond (its own clip-path would cut a glow on the diamond itself away). */
.mirrorgate-page .section-label { position: relative; isolation: isolate; }
.mirrorgate-page .section-label::before {
    position: absolute;
    top: 50%;
    left: -15px;
    z-index: -1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 34%, transparent), transparent);
    translate: 0 -50%;
    animation: candle 5s ease-in-out infinite;
}
@keyframes candle {
    0%, 100% { opacity: .55; scale: .92; }
    40% { opacity: 1; scale: 1.06; }
    55% { opacity: .7; scale: .97; }
}

/* Doors not yet announced: a smudged line where a title will one day be. */
.journey-titles .journey-sealed { color: var(--muted); font-style: italic; }
.journey-sealed::before {
    display: inline-block;
    width: 4.2em;
    height: .5em;
    margin-right: .6em;
    border-radius: 3px;
    content: "";
    background: repeating-linear-gradient(90deg, var(--gold-soft) 0 7px, transparent 7px 10px);
    filter: blur(1.4px);
    vertical-align: middle;
}

/* Cards catch a glint of the mirror when the pointer passes over them. */
.journey-card,
.tool-card { position: relative; isolation: isolate; overflow: hidden; }
.journey-card::after,
.tool-card::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--teal) 14%, transparent) 48%, color-mix(in srgb, var(--gold) 10%, transparent) 52%, transparent 65%);
    transform: translateX(-110%);
    transition: transform 1200ms var(--effects);
}
.journey-card:hover::after,
.tool-card:hover::after { transform: translateX(110%); }

/* On phones the mirror is taller than any circle that fits around it. */
@media (max-width: 680px) {
    .mirror-inscription { display: none; }
}

@media (pointer: coarse) {
    /* No pointer to carry the lantern: keep a gentle, fixed vignette. */
    .realm-lantern { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .realm-mist i,
    .mirror-inscription,
    .mirror-surface b,
    .mirrorgate-page .section-label::before { animation: none !important; }
    .mirror-surface b { display: none; }
    .realm-lantern { transition: none; }
    .js .mirrorgate-page .reveal { filter: none; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1120px) {
    .production { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
    .journey-grid,
    .ledger-grid { grid-template-columns: 1fr; }
    .journey-card { min-height: 0; }
    .mirrorgate-visual { min-height: 580px; }
    .vault-entry { grid-template-columns: minmax(0, 1fr); }
    .realm-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tool-group,
    .tool-group-planned { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .mirrorgate-page { font-size: 17px; }
    .mirrorgate-page .detail-hero { padding: 36px 0 60px; gap: 34px; }
    .mirrorgate-page .detail-hero::after { top: 70px; width: min(118vw, 460px); }
    .mirrorgate-page .detail-title { font-size: clamp(3.2rem, 15vw, 4.6rem); }
    .mirrorgate-page .detail-lead { font-size: 1.12rem; }
    .mirrorgate-visual { min-height: 440px; border-radius: 38% 38% var(--shape-xl) var(--shape-xl); }
    .mirror-portal { width: min(56%, 220px); top: 38%; }
    .mirrorgate-visual .realm-d20 { top: 66%; width: 64px; height: 64px; }
    .mirror-quote { right: 18px; bottom: 44px; left: 18px; font-size: 1rem; }
    .mirrorgate-page .detail-stats { grid-template-columns: 1fr; }
    .vault-entry-copy { padding: 26px 22px; }
    .vault-steps li { padding-left: 72px; }
    .artwork-note { grid-template-columns: 1fr; }
    .realm-glance { padding: 22px; grid-template-columns: 1fr; }
    .production { padding: 24px 20px; }
    .production-grid { grid-template-columns: 1fr; }
}