:root {
    --bg: #090705;
    --maroon: #1c0707;
    --maroon-lt: #2a0f0f;
    --gold: #d4ae5c;
    --gold-deep: #c2953f;
    --gold-dim: #8a6f3a;
    --white: #f2ece0;
    --body: #b5ac9c;
    --line: rgba(212, 174, 92, .28);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

html {
    scroll-behavior: smooth;
    background: #090705
}

body {
    background: #090705;
    color: #B5AC9C;
    font-family: 'EB Garamond', serif;
    font-size: 17.5px;
    line-height: 1.65
}

body.museum-open {
    overflow: hidden
}

.wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px
}

h1,
h2,
h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    color: var(--white)
}

em.g {
    font-style: italic;
    color: var(--gold);
    font-weight: 500
}

a {
    color: inherit;
    text-decoration: none
}

.fell {
    font-family: 'IM Fell English SC', serif;
    letter-spacing: .26em;
    text-transform: uppercase
}

.eyebrow {
    font-family: 'IM Fell English SC', serif;
    font-size: .66rem;
    letter-spacing: .32em;
    color: var(--gold);
    text-transform: uppercase
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: none;
    background: linear-gradient(180deg, #e2c06e, var(--gold-deep));
    color: #221408;
    font-family: 'IM Fell English SC', serif;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 15px 26px;
    border-radius: 3px;
    transition: filter .2s
}

.btn-gold:hover {
    filter: brightness(1.1)
}

.btn-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--gold);
    font-family: 'IM Fell English SC', serif;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 15px 26px;
    border-radius: 3px;
    transition: all .25s
}

.btn-line:hover {
    border-color: var(--gold);
    background: rgba(212, 174, 92, .08)
}

@media (prefers-reduced-motion: reduce) {
    .doorstage {
        animation: none
    }

    .scrollcue .chev {
        animation: none
    }

    html {
        scroll-behavior: auto
    }
}

.btn-ghost {
    display: inline-block;
    background: rgba(12, 9, 7, .55);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: 'IM Fell English SC', serif;
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color .3s, background .3s, box-shadow .3s
}

.btn-ghost:hover,
.btn-ghost:active {
    border-color: var(--gold);
    background: rgba(212, 174, 92, .07);
    box-shadow: 0 0 24px rgba(212, 174, 92, .15)
}

/* ===== NAV ===== */
.navbar {
    position: absolute;
    top: 0;
    z-index: 60;
    padding: 14px 18px;
    background: transparent;
    width: 100%;
}

.nav-pill {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 22px;
    background: #0c0907;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand .seal {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center
}

.brand .seal img {
    height: 100%;
    width: auto;
    object-fit: contain
}

.brand .nm {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .15em;
    color: var(--white);
    font-size: 1.02rem;
    line-height: 1
}

@media(max-width:480px) {
    .brand .nm {
        font-size: .88rem;
        letter-spacing: .12em
    }

    .brand .nm small {
        font-size: .4rem;
        letter-spacing: .22em
    }
}

.brand .nm small {
    display: block;
    font-family: 'IM Fell English SC', serif;
    font-size: .46rem;
    letter-spacing: .28em;
    color: var(--gold);
    margin-top: 3px
}

.nav-links {
    display: flex;
    gap: 26px;
    font-family: 'IM Fell English SC', serif;
    font-size: .62rem;
    letter-spacing: .24em;
    text-transform: uppercase
}

.nav-links a {
    color: var(--body);
    transition: color .2s
}

.nav-links a:hover {
    color: var(--gold)
}

@media(max-width:900px) {
    .nav-links {
        display: none
    }
}

.menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1rem;
    cursor: pointer;
    background: none
}

@media(max-width:900px) {
    .menu-btn {
        display: flex
    }
}

#jumpmenu {
    position: fixed;
    top: 86px;
    left: 14px;
    right: 14px;
    z-index: 640;
    background: rgba(12, 9, 7, .97);
    border: 1px solid var(--gold-dim);
    border-radius: 10px;
    padding: 10px 0;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility 0s .3s;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .7)
}

#jumpmenu.show {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .3s, transform .3s
}

#jumpmenu a {
    display: block;
    cursor: pointer;
    padding: 15px 24px;
    font-family: 'IM Fell English SC', serif;
    font-size: .66rem;
    letter-spacing: .26em;
    color: var(--body);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(212, 174, 92, .1)
}

#jumpmenu a:last-child {
    border-bottom: none
}

#jumpmenu a:active,
#jumpmenu a:hover {
    color: var(--gold)
}

/* ===== 1. EXHIBIT OF THE DAY ===== */
.eod {
    position: relative;
    padding: 44px 0 72px;
    background: #090705;
}

.eod .wrap {
    width: 100%
}

@keyframes landfade {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.eod-fig {
    animation: landfade 1.1s ease both
}

.eod-body {
    animation: landfade 1.1s ease .18s both
}

.scrollcue {
    position: absolute;
    bottom: -63px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: .75
}

.sec-cue {
    text-align: center;
    margin-top: 46px;
    opacity: .75
}

.sec-cue .fell {
    display: block;
    font-size: .48rem;
    letter-spacing: .32em;
    color: var(--gold)
}

.sec-cue .chev {
    color: var(--gold);
    font-size: 1rem;
    animation: cuebob 2.4s ease-in-out infinite;
    display: block;
    margin-top: 4px
}

.scrollcue .fell {
    display: block;
    font-size: .48rem;
    letter-spacing: .32em;
    color: var(--gold)
}

.scrollcue .chev {
    color: var(--gold);
    font-size: 1rem;
    display: block;
    margin-top: 4px
}

@keyframes cuebob {

    0%,
    100% {
        transform: translateY(0);
        opacity: .5
    }

    50% {
        transform: translateY(5px);
        opacity: 1
    }
}

@media(max-width:880px) {
    .eod {
        min-height: 0;
        padding: 40px 0 40px
    }

    .scrollcue {
        position: static;
        transform: none;
        margin-top: 34px
    }
}

.eod-grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 60px;
}

@media(max-width:880px) {
    .eod-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }
}

.eod-fig {
    margin: 0 auto;
}

.eod-fig .inner {
    /* aspect-ratio: 4/4.1; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    width: 388px;
    height: 426px;
}

.eod-fig .inner img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.eod-fig .cap {
    position: absolute;
    left: 6px;
    bottom: 2px
}

.eod-fig .cap .fell {
    font-size: .54rem;
    color: var(--gold)
}

.eod-fig .cap .t {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--white);
    margin-top: 5px
}

.eod-fig .no {
    position: absolute;
    right: 8px;
    bottom: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: var(--gold);
    opacity: .85
}

.eod-body h2 {
    font-size: 48px;
    line-height: 53px;
    margin: 14px 0 24px
}

.eod-body p {
    margin-bottom: 16px
}

.eod-body p.lead::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.1em;
    float: left;
    line-height: .82;
    padding-right: 10px;
    color: #B5AC9C;
}

.eod-cta {
    display: flex;
    justify-content: center;
    margin: 28px 0 34px
}

.eod-stats {
    display: flex;
    gap: 56px;
    border-top: 1px solid rgba(212, 174, 92, .2);
    padding-top: 24px;
    flex-wrap: wrap
}

.eod-stats .st .v {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    color: var(--gold)
}

.eod-stats .st .l {
    font-family: 'IM Fell English SC', serif;
    font-size: .52rem;
    letter-spacing: .24em;
    color: var(--body);
    margin-top: 4px;
    text-transform: uppercase
}

.eod-note {
    margin-top: 26px;
    font-style: italic;
    font-size: .94rem
}

.eod-note span {
    color: var(--gold);
    cursor: pointer;
    border-bottom: 1px solid rgba(212, 174, 92, .45);
    transition: color .2s
}

.goldlink {
    color: var(--gold);
    cursor: pointer;
    border-bottom: 1px solid rgba(212, 174, 92, .45);
    transition: color .2s;
    display: inline-block;
    position: relative;
    z-index: 2;
    padding: 2px 0
}

.goldlink:hover {
    color: #e2c06e
}

/* ===== 2. THE MUSEUM DOOR ===== */
.museum-sec {
    padding: 159px 0;
    background: #090705;
    text-align: center
}

.museum-sec h2 {
    font-size: 48px;
    margin: 12px 0 14px;
    line-height: 80px;
}

.museum-sec .lede {
    max-width: 520px;
    margin: 0 auto 44px;
    font-size: 1rem
}

.doorstage {
    position: relative;
    width: min(64vw, 300px);
    margin: 0 auto;
    cursor: pointer
}

.doorstage {
    perspective: 1100px;
    position: relative;
    width: min(88vw, 480px);
    aspect-ratio: 958/742;
    margin: 0 auto;
    cursor: pointer;
    animation: idle 5.5s ease-in-out infinite;
    transition: transform .95s cubic-bezier(.7, 0, .9, .6)
}

.doorstage.enter {
    transform: scale(6.2);
    opacity: 0;
    z-index: 550;
    pointer-events: none;
    transition: transform .85s cubic-bezier(.65, 0, .85, .55), opacity .4s ease .34s
}

@keyframes idle {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

.doorstage.spin {
    animation: none
}

.vopening {
    position: absolute;
    inset: 6% 10%;
    border-radius: 6px;
    background: #0a0a0d;
    z-index: 1
}

.doorstage.open {
    position: relative;
    z-index: 550
}

.doorstage.open .vopening {
    background: transparent;
    box-shadow: 0 0 0 200vmax #090705, inset 0 0 40px rgba(0, 0, 0, .55)
}

.vopening .vglow {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    transition: opacity .4s;
    background: radial-gradient(ellipse 75% 85% at 50% 46%, transparent 30%, rgba(5, 4, 3, .72) 100%)
}

.doorstage.open .vglow {
    opacity: 0
}

.vframe {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none
}

.vframe img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.vleaf {
    position: absolute;
    left: 11.328%;
    top: 0.456%;
    width: 77.344%;
    height: 98.951%;
    z-index: 4;
    transform-origin: 2% 50%;
    transform-style: preserve-3d;
    transition: transform 1.05s cubic-bezier(.65, 0, .28, 1);
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .75))
}

.vleaf .vbase {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.vleaf .vwheelimg {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;
    transform-origin: center
}

.doorstage.spin .vwheelimg {
    animation: vspin 1.05s cubic-bezier(.5, .05, .4, 1) forwards
}

.doorstage.open .vleaf {
    transform: rotateY(-108deg)
}

@keyframes vspin {
    to {
        transform: rotate(765deg)
    }
}

.door-hint {
    margin-top: 22px;
    font-size: .6rem;
    color: var(--gold);
    opacity: .75;
    animation: pulse 2.8s infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: .4
    }

    50% {
        opacity: .95
    }
}

.museum-sec .cta {
    margin-top: 30px
}

/* ===== 3. PUBLICATIONS ===== */
.pubs {
    padding: 96px 0;
    background: linear-gradient(180deg, #090705 0%, #1c0707 20%, #200909 50%, #1c0707 80%, #090705 100%)
}

.pubs-head {
    text-align: center
}

.pubs-head h2 {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.15;
    margin-top: 14px
}

.pubs-sub {
    text-align: center;
    max-width: 560px;
    margin: 18px auto;
    font-size: .98rem
}

.series-line {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 52px;
    font-style: italic;
    font-size: .92rem
}

.series-line strong {
    display: block;
    color: var(--white);
    font-style: normal;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    letter-spacing: .04em;
    margin-bottom: 6px
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

@media(max-width:1000px) {
    .book-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:560px) {
    .book-grid {
        grid-template-columns: 1fr
    }
}

.book {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #090705
}

.book .volpill {
    align-self: flex-start;
    font-family: 'IM Fell English SC', serif;
    font-size: .52rem;
    letter-spacing: .24em;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--gold);
    margin-bottom: 16px;
    text-transform: uppercase
}

.book .cover {
    height: 250px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent
}

.book .cover img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.book .cover.setimg img {
    object-fit: contain
}

.book h3 {
    font-size: 1.28rem;
    line-height: 1.15
}

.book .subtitle {
    font-style: italic;
    color: var(--gold);
    font-size: .95rem;
    margin: 3px 0
}

.book .by {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .26em;
    color: var(--body);
    margin-bottom: 12px;
    text-transform: uppercase
}

.book p {
    font-size: .9rem;
    flex-grow: 1
}

.book .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(212, 174, 92, .2)
}

.book .price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: var(--gold)
}

.book .buy {
    font-size: .58rem;
    padding: 11px 16px
}

.badge {
    display: inline-block;
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .2em;
    background: var(--gold);
    color: #221408;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 8px;
    text-transform: uppercase
}

.signed-note {
    text-align: center;
    margin-top: 36px;
    font-style: italic;
    font-size: .96rem
}

.signed-note b {
    color: var(--white);
    font-weight: 600
}

/* ===== 4. ABOUT ===== */
.about {
    padding: 96px 0;
    background: #090705;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: start
}

@media(max-width:880px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 38px
    }
}

.about h2 {
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
    line-height: 1.16;
    margin: 14px 0 26px
}

.about p {
    margin-bottom: 16px;
    font-size: .98rem
}

.about .tags {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-family: 'IM Fell English SC', serif;
    font-size: .56rem;
    letter-spacing: .26em;
    color: var(--gold);
    text-transform: uppercase
}

.svc {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 24px 26px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(165deg, #2a0f0f, #190808);
    margin-bottom: 16px;
    position: relative
}

.svc .ic {
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.1rem
}

.svc h3 {
    font-size: 1.25rem;
    margin-bottom: 6px
}

.svc p {
    font-size: .92rem;
    margin: 0
}

.svc .idx {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-dim);
    font-size: .9rem
}

.svc .soon {
    display: inline-block;
    margin-left: 10px;
    font-family: 'IM Fell English SC', serif;
    font-size: .46rem;
    letter-spacing: .2em;
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: 999px;
    padding: 3px 9px;
    vertical-align: middle;
    text-transform: uppercase
}

/* ===== CONSULTATION PAGES ===== */
.svc-link {
    cursor: pointer;
    transition: border-color .25s, background .25s
}

.svc-link:hover,
.svc-link:active {
    border-color: var(--gold);
    background-image: none;
    background-color: #090705
}

.svc-go {
    display: inline-block;
    margin-top: 14px;
    font-size: .56rem;
    letter-spacing: .24em;
    color: var(--gold)
}

#relpage {
    position: fixed;
    inset: 0;
    z-index: 620;
    background: #090705;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s
}

#relpage.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s
}

.rel-date {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--gold);
    margin: 26px 0 8px
}

.rel-body p {
    font-size: 1rem;
    margin-bottom: 16px
}

.rel-boiler {
    margin-top: 30px;
    border-top: 1px solid rgba(212, 174, 92, .2);
    padding-top: 18px;
    font-size: .9rem;
    color: var(--body)
}

#legalpage {
    position: fixed;
    inset: 0;
    z-index: 620;
    background: #090705;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s
}

#legalpage.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s
}

.legal-h {
    font-family: 'IM Fell English SC', serif;
    font-size: .62rem;
    letter-spacing: .26em;
    color: var(--gold);
    text-transform: uppercase;
    margin: 30px 0 10px
}

.legal-p {
    font-size: .96rem;
    margin-bottom: 12px
}

.legal-link {
    cursor: pointer;
    color: var(--gold);
    display: inline-block;
    position: relative;
    z-index: 2;
    padding: 3px 0
}

#svcpage {
    position: fixed;
    inset: 0;
    z-index: 620;
    background: #090705;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s
}

#svcpage.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s
}

.svc-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 26px 90px
}

.svc-back {
    cursor: pointer;
    background: none;
    border: 1px solid var(--line);
    color: var(--gold);
    font-family: 'IM Fell English SC', serif;
    font-size: .6rem;
    letter-spacing: .22em;
    padding: 11px 20px;
    border-radius: 3px;
    text-transform: uppercase
}

.svc-back:hover {
    border-color: var(--gold)
}

.svc-wrap h2 {
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    margin: 34px 0 18px;
    line-height: 1.15
}

.svc-wrap .intro {
    font-size: 1.02rem;
    margin-bottom: 34px
}

.svc-form label {
    display: block;
    font-family: 'IM Fell English SC', serif;
    font-size: .56rem;
    letter-spacing: .24em;
    color: var(--gold);
    text-transform: uppercase;
    margin: 22px 0 8px
}

.svc-form input,
.svc-form textarea {
    width: 100%;
    background: rgba(20, 14, 11, .6);
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--white);
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    padding: 14px 15px;
    outline: none;
    transition: border-color .25s;
    box-sizing: border-box
}

.svc-form input:focus,
.svc-form textarea:focus {
    border-color: var(--gold)
}

.svc-form textarea {
    min-height: 130px;
    resize: vertical
}

.svc-price {
    margin: 26px 0;
    font-style: italic;
    font-size: .95rem;
    border-top: 1px solid rgba(212, 174, 92, .2);
    border-bottom: 1px solid rgba(212, 174, 92, .2);
    padding: 16px 2px
}

.svc-rates {
    margin: 6px 0 30px
}

.svc-rates .rate {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 22px;
    padding: 16px 0;
    border-top: 1px solid rgba(212, 174, 92, .16)
}

.svc-rates .rate:last-child {
    border-bottom: 1px solid rgba(212, 174, 92, .16)
}

.svc-rates .rl {
    font-family: 'IM Fell English SC', serif;
    font-size: .6rem;
    letter-spacing: .24em;
    color: var(--gold);
    text-transform: uppercase;
    align-self: center
}

.svc-rates .rp {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--white);
    text-align: right
}

.svc-rates .rn {
    grid-column: 1 / -1;
    font-size: .9rem;
    color: var(--body)
}

.svc-from {
    margin-top: 12px;
    font-style: italic;
    font-size: .9rem;
    color: var(--gold)
}

.svc-done {
    display: none;
    text-align: center;
    padding: 60px 0
}

.svc-done .big {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    color: var(--white);
    margin-bottom: 14px
}

#svcpage.sent .svc-form {
    display: none
}

#svcpage.sent .svc-done {
    display: block
}

/* ===== PRESS ROOM ===== */
.press {
    padding: 96px 0;
    background: linear-gradient(180deg, #090705 0%, #1c0707 20%, #200909 50%, #1c0707 80%, #090705 100%)
}

.press-head {
    text-align: center;
    margin-bottom: 50px
}

.press-head h2 {
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
    margin-top: 14px
}

.release {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 28px;
    padding: 26px 28px;
    align-items: start;
    background: #090705;
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 16px
}

@media(max-width:700px) {
    .release {
        grid-template-columns: 1fr;
        gap: 8px
    }
}

.release .date {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: var(--gold)
}

.release h3 {
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 8px
}

.release p {
    font-size: .94rem;
    margin-bottom: 10px
}

.release a {
    font-family: 'IM Fell English SC', serif;
    font-size: .58rem;
    letter-spacing: .22em;
    color: var(--gold);
    text-transform: uppercase
}

.release a:hover {
    color: #e2c06e
}

.media-block {
    margin-top: 44px;
    text-align: center;
    font-size: .94rem
}

.media-block .fell {
    display: block;
    font-size: .56rem;
    color: var(--gold);
    margin-bottom: 10px
}

.media-block a {
    color: var(--gold)
}

/* ===== FOOTER ===== */
footer {
    padding: 64px 0 34px;
    background: #090705;
}

.foot-center {
    max-width: 560px;
    margin: 0 auto;
    text-align: center
}

.foot-center .brand {
    justify-content: flex-start;
    text-align: left
}

.foot-line {
    font-size: .92rem;
    margin: 18px 0 26px
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin-bottom: 30px
}

.foot-links a {
    font-family: 'IM Fell English SC', serif;
    font-size: .58rem;
    letter-spacing: .22em;
    color: var(--body);
    text-transform: uppercase
}

.foot-links a:hover {
    color: var(--gold)
}

.foot-links span {
    color: var(--gold-dim);
    font-size: .7rem
}

.foot-news {
    margin-bottom: 26px
}

.foot-news .fell {
    font-size: .56rem;
    color: var(--gold);
    display: block;
    margin-bottom: 12px
}

.foot-news .sub-row {
    display: flex;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto
}

.foot-note {
    font-size: .82rem;
    font-style: italic;
    margin-top: 10px;
    color: var(--body)
}

.socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px
}

.foot-contact {
    font-size: .88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

.foot-contact a {
    color: var(--gold)
}

.foot-contact span {
    color: var(--gold-dim)
}

.foot-contact .legal-link {
    color: var(--gold)
}

.foot-bar {
    font-size: .72rem;
    color: rgba(200, 185, 160, .5);
    border-top: 1px solid rgba(212, 174, 92, .1);
    padding-top: 18px
}


/* ===== MUSEUM OVERLAY ===== */
@media(max-width:700px) {
    #museum {
        --doorX: 41vw;
        --exX: 43vw
    }

    .halldoor {
        width: 240px
    }

    .halldoor .arch {
        width: 200px;
        height: 300px
    }
}

#museum {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #090705;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s, visibility 0s .8s
}

#museum.on {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s
}

.hallScene {
    position: absolute;
    inset: 0;
    perspective: 1000px;
    perspective-origin: 50% 46%;
    opacity: 0;
    transition: opacity 1s ease .3s
}

.hallScene.active {
    opacity: 1
}



/* the record and the objects are one thing, so they are set as one thing */
.rd-hero {
    padding: 60px 20px 0;
    text-align: center;
    background: radial-gradient(ellipse 62% 74% at 50% 42%, rgba(74, 51, 22, .36), rgba(9, 7, 5, 0) 74%)
}

.rd-hero img {
    max-width: 100%;
    max-height: 50vh;
    width: auto;
    object-fit: contain;
    box-shadow: 0 0 0 1px rgba(212, 174, 92, .3), 0 24px 58px rgba(0, 0, 0, .88)
}

.rd-h {
    font-family: 'IM Fell English SC', serif;
    font-size: .58rem;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    margin: 40px 0 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(212, 174, 92, .22)
}

.rd-body p {
    margin-bottom: 15px;
    line-height: 1.78;
    font-size: 1.02rem
}

.rd-fig {
    margin: 32px -6px 34px;
    text-align: center
}

.rd-fig img {
    max-width: 100%;
    max-height: 52vh;
    width: auto;
    object-fit: contain;
    box-shadow: 0 0 0 1px rgba(212, 174, 92, .3), 0 20px 50px rgba(0, 0, 0, .85)
}

.rd-fig .rres {
    max-width: 220px;
    margin: 0 auto;
    aspect-ratio: 4/5;
    border: 1px solid rgba(212, 174, 92, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: repeating-linear-gradient(45deg, rgba(212, 174, 92, .03) 0 9px, rgba(0, 0, 0, 0) 9px 18px)
}

.rd-fig .rres span {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .22em;
    color: var(--gold-dim);
    text-transform: uppercase;
    line-height: 2
}

.rd-fig figcaption {
    margin-top: 12px;
    padding: 0 10px
}

.rd-fig .pn {
    font-family: 'IM Fell English SC', serif;
    font-size: .48rem;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase
}

.rd-fig .pc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.02rem;
    color: var(--white);
    margin-top: 5px
}

.rd-fig .pk {
    font-family: 'IM Fell English SC', serif;
    font-size: .46rem;
    letter-spacing: .2em;
    color: var(--gold-dim);
    text-transform: uppercase;
    margin-top: 3px;
    line-height: 1.9
}

.rd-fig .pw {
    font-size: .86rem;
    font-style: italic;
    color: rgba(200, 185, 160, .5);
    margin-top: 6px;
    line-height: 1.6
}

.rd-q {
    margin: 32px 0;
    padding: 0 0 0 20px;
    border-left: 2px solid rgba(212, 174, 92, .5)
}

.rd-q p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    line-height: 1.52;
    color: var(--gold);
    font-style: italic;
    margin-bottom: 9px
}

.rd-q cite {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .2em;
    color: var(--gold-dim);
    text-transform: uppercase;
    font-style: normal
}

.rd-facts {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px
}

.rd-facts td {
    padding: 9px 0;
    border-bottom: 1px solid rgba(212, 174, 92, .14);
    vertical-align: top;
    font-size: .92rem
}

.rd-facts td:first-child {
    width: 38%;
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .18em;
    color: var(--gold-dim);
    text-transform: uppercase;
    padding-right: 14px;
    line-height: 2
}

/* an exhibit is a group. these are the plates inside it. */
.vplate.reserved {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px
}

.vres {
    width: 76%;
    max-width: 230px;
    aspect-ratio: 4/5;
    border: 1px solid rgba(212, 174, 92, .34);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    background: repeating-linear-gradient(45deg, rgba(212, 174, 92, .030) 0 9px, rgba(0, 0, 0, 0) 9px 18px)
}

.vres span {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .22em;
    color: var(--gold-dim);
    text-transform: uppercase;
    line-height: 2
}

/* the plate strip. it lives on the frame, because it belongs to the exhibit, not to the walk. */
.pstrip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    display: none;
    justify-content: center;
    gap: 7px;
    z-index: 4
}

.pstrip.on {
    display: flex
}

.pstrip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--gold-dim);
    cursor: pointer;
    transition: background .35s, border-color .35s;
    pointer-events: auto
}

.pstrip i.on {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 7px rgba(212, 174, 92, .8)
}

.pstrip i.res {
    border-style: dashed
}

.vcap .pof {
    display: block;
    font-size: .5rem;
    color: rgba(200, 185, 160, .42);
    letter-spacing: .2em;
    margin-top: 5px
}

/* in the entry, every plate is laid out in full, each with its own tombstone */
.rd-plates {
    margin-bottom: 34px
}

.rd-pl {
    margin-bottom: 26px;
    text-align: center
}

.rd-pl img {
    max-width: 100%;
    max-height: 44vh;
    width: auto;
    object-fit: contain;
    box-shadow: 0 0 0 1px rgba(212, 174, 92, .3), 0 22px 54px rgba(0, 0, 0, .85)
}

.rd-pl .rres {
    max-width: 230px;
    margin: 0 auto;
    aspect-ratio: 4/5;
    border: 1px solid rgba(212, 174, 92, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: repeating-linear-gradient(45deg, rgba(212, 174, 92, .03) 0 9px, rgba(0, 0, 0, 0) 9px 18px)
}

.rd-pl .rres span {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .22em;
    color: var(--gold-dim);
    text-transform: uppercase;
    line-height: 2
}

.rd-pl .pn {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    margin: 14px 0 5px
}

.rd-pl .pc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.06rem;
    color: var(--white)
}

.rd-pl .pk {
    font-family: 'IM Fell English SC', serif;
    font-size: .48rem;
    letter-spacing: .2em;
    color: var(--gold-dim);
    text-transform: uppercase;
    margin-top: 4px;
    line-height: 1.9
}

.rd-pl .pw {
    font-size: .88rem;
    font-style: italic;
    color: rgba(200, 185, 160, .5);
    margin-top: 6px;
    line-height: 1.6
}

/* ===== THE ENTRY. the room is the hook. this is the record. ===== */
#reader {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: #090705;
    display: none;
    overflow: hidden
}

#reader.show {
    display: block
}

.rd-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.rd-close {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 8;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(9, 7, 5, .9);
    border: 1px solid rgba(212, 174, 92, .34);
    color: var(--gold-dim);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer
}

.rd-close:hover {
    color: var(--gold);
    border-color: var(--gold)
}

.rd-plate {
    padding: 64px 20px 0;
    text-align: center;
    background:
        radial-gradient(ellipse 60% 70% at 50% 40%, rgba(74, 51, 22, .34), rgba(9, 7, 5, 0) 74%)
}

.rd-plate img {
    max-width: 100%;
    max-height: 46vh;
    width: auto;
    object-fit: contain;
    box-shadow: 0 0 0 1px rgba(212, 174, 92, .3), 0 22px 54px rgba(0, 0, 0, .85)
}

.rd-body {
    max-width: 640px;
    margin: 0 auto;
    padding: 30px 24px 40px
}

.rd-body .fell {
    display: block;
    font-family: 'IM Fell English SC', serif;
    font-size: .54rem;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px
}

.rd-body h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 9px
}

.rd-body .cat {
    font-family: 'IM Fell English SC', serif;
    font-size: .54rem;
    letter-spacing: .22em;
    color: var(--gold-dim);
    text-transform: uppercase;
    margin-bottom: 22px
}

.rd-body .lede {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.24rem;
    line-height: 1.5;
    color: var(--gold);
    border-left: 2px solid rgba(212, 174, 92, .4);
    padding-left: 16px;
    margin-bottom: 34px
}

.rd-sec {
    margin-bottom: 30px
}

.rd-sec h3 {
    font-family: 'IM Fell English SC', serif;
    font-size: .56rem;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    padding-bottom: 9px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(212, 174, 92, .2)
}

.rd-sec p {
    margin-bottom: 13px;
    line-height: 1.72
}

.rd-sec ol,
.rd-sec ul {
    list-style: none;
    padding: 0
}

.rd-sec li {
    padding: 9px 0 9px 15px;
    border-left: 1px solid rgba(212, 174, 92, .18);
    margin-bottom: 5px;
    line-height: 1.62;
    font-size: .94rem
}

.rd-trans {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.16rem;
    line-height: 1.85;
    color: var(--white);
    background: rgba(30, 21, 12, .5);
    border: 1px solid rgba(212, 174, 92, .2);
    padding: 20px 22px;
    text-align: center;
    font-style: italic
}

.rd-query {
    border: 1px solid rgba(170, 70, 50, .5);
    background: rgba(50, 18, 12, .34);
    padding: 18px 20px
}

.rd-query h3 {
    color: #d98a72;
    border-bottom-color: rgba(170, 70, 50, .4)
}

.rd-query p {
    font-size: .94rem;
    color: rgba(226, 200, 180, .9);
    margin-bottom: 0
}

.rd-status {
    font-family: 'IM Fell English SC', serif;
    font-size: .56rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-dim);
    line-height: 2
}

.rd-status b {
    color: var(--gold);
    font-weight: 400
}

.rd-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 38px;
    border-top: 1px solid rgba(212, 174, 92, .2);
    padding-top: 26px
}

.rd-nav button {
    cursor: pointer;
    background: rgba(20, 14, 11, .85);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'IM Fell English SC', serif;
    letter-spacing: .14em;
    font-size: .58rem;
    padding: 15px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    transition: all .25s;
    line-height: 1.4
}

.rd-nav button:hover:not(:disabled) {
    background: var(--gold);
    color: #221408
}

.rd-nav button:disabled {
    visibility: hidden
}

.ststrip {
    cursor: pointer;
    pointer-events: auto !important
}

#roomIndexBtn {
    display: none !important
}

/* ===== THE ROOM. ONE FRAME. ONE PIECE. ===== */
/* Her name and the piece's name live in the hud, which is always on screen.
   The room itself carries nothing but the frame. */
#roomM {
    z-index: 12;
    pointer-events: auto;
    transition: opacity .01s, clip-path .95s cubic-bezier(.5, 0, .2, 1)
}

.chamber {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 82px 16px 190px;
    /* replaced at runtime by fitRoom() */
    background:
        radial-gradient(ellipse 58% 40% at 50% 40%, rgba(74, 51, 22, .44), rgba(9, 7, 5, 0) 74%),
        radial-gradient(ellipse 130% 60% at 50% 118%, rgba(28, 19, 9, .6), rgba(9, 7, 5, 0) 72%),
        #090705;
    transform: scale(1);
    transition: transform 1.1s cubic-bezier(.5, 0, .2, 1);
    transform-origin: 50% 44%
}

.chamber.settling {
    transform: scale(1.07)
}

/* the great frame. it takes every pixel the room can spare. */
.vitrine {
    position: relative;
    width: min(360px, 92vw);
    flex: 0 0 auto;
    height: 60vh;
    cursor: pointer;
    transition: height .95s cubic-bezier(.5, 0, .2, 1)
}

.vitrine .vglow {
    position: absolute;
    left: 50%;
    top: -52px;
    transform: translateX(-50%);
    width: 150%;
    height: 76px;
    background: radial-gradient(ellipse at 50% 100%, rgba(212, 174, 92, .22), rgba(212, 174, 92, 0) 70%);
    pointer-events: none
}

.vfr {
    position: absolute;
    inset: 0;
    border: 13px solid #2b1d16;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(212, 174, 92, .42), 0 0 0 6px rgba(9, 7, 5, .9), 0 46px 90px rgba(0, 0, 0, .78),
        inset 0 0 0 1px rgba(212, 174, 92, .30);
    background: linear-gradient(150deg, #33231a, #1d1310 60%, #2b1d16);
    pointer-events: none
}

/* the mount board. a small piece sits on a mat, the way it would in a real frame. */
.vwin {
    position: absolute;
    inset: 13px;
    overflow: hidden;
    background: radial-gradient(ellipse 74% 64% at 50% 40%, #17100b, #0b0806 78%)
}

.vwin::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .40))
}

.vrail {
    position: absolute;
    inset: 0;
    width: 800%;
    display: flex;
    transition: transform 1.05s cubic-bezier(.5, 0, .2, 1)
}

.vplate {
    width: 12.5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    transition: opacity .75s ease
}

.vplate.lit {
    opacity: 1
}

.vplate img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: 0 0 0 1px rgba(212, 174, 92, .30), 0 18px 44px rgba(0, 0, 0, .85)
}

/* one line. the rest is on the placard behind the frame. */
.vcap {
    flex: 0 0 auto;
    margin-top: 15px;
    text-align: center;
    font-family: 'IM Fell English SC', serif;
    font-size: .52rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-dim);
    line-height: 1.7
}

.vcap b {
    color: var(--gold);
    font-weight: 400
}

.vcap .vread {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: .82rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(200, 185, 160, .4);
    font-style: italic;
    margin-top: 7px
}

/* the station strip rides inside the nav, so it can never collide with it */
.ststrip {
    display: flex;
    visibility: hidden;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    margin: 0 auto 12px;
    min-height: 25px
}

.ststrip.on {
    visibility: visible
}

.ststrip .st {
    width: 26px;
    text-align: center;
    font-family: 'IM Fell English SC', serif;
    font-size: .6rem;
    color: rgba(200, 185, 160, .2);
    border-top: 1px solid rgba(200, 185, 160, .13);
    padding-top: 8px;
    margin: 0 3px;
    transition: color .55s, border-color .55s, text-shadow .55s
}

.ststrip .st.done {
    color: var(--gold-dim);
    border-top-color: var(--gold-dim)
}

.ststrip .st.on {
    color: var(--gold);
    border-top-color: var(--gold);
    text-shadow: 0 0 9px rgba(212, 174, 92, .75)
}

#mhud.room .mmap {
    display: none
}

#mhud.room .mhint {
    display: none
}

#mhud.room .mwalk button {
    font-size: .62rem;
    letter-spacing: .16em
}

@media(max-height:700px) {
    .vcap .vread {
        display: none
    }

    .vplaq .vread {
        display: none
    }
}

#roomIndexBtn {
    display: none;
    position: absolute;
    top: 96px;
    left: 16px;
    z-index: 30;
    background: rgba(12, 9, 7, .72);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: 'IM Fell English SC', serif;
    font-size: .55rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding: 9px 16px;
    border-radius: 3px;
    cursor: pointer
}

#roomIndexBtn.on {
    display: block
}

.ri-mov {
    font-family: 'IM Fell English', serif;
    color: var(--gold-dim);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    margin: 14px 0 6px;
    text-align: left
}

.ri-yr {
    float: right;
    color: var(--gold-dim);
    font-size: 12px
}

#roomIndex {
    position: fixed;
    inset: 0;
    z-index: 640;
    background: rgba(5, 4, 3, .9);
    display: none;
    align-items: center;
    justify-content: center
}

#roomIndex.show {
    display: flex
}

.ri-card {
    background: #120d0a;
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    padding: 26px 30px;
    max-width: 320px;
    width: 86%
}

.ri-card .fell {
    display: block;
    font-size: .55rem;
    letter-spacing: .28em;
    color: var(--gold);
    margin-bottom: 14px;
    text-transform: uppercase;
    font-family: 'IM Fell English SC', serif
}

.ri-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(212, 174, 92, .12);
    color: var(--body);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    padding: 10px 2px;
    cursor: pointer
}

.ri-item:hover {
    color: var(--gold)
}

.cu-roombtn {
    margin: 18px 0 8px
}

.cu-roombtn .goldlink {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid var(--gold);
    border-radius: 3px;
    font-family: 'IM Fell English SC', serif;
    font-size: .6rem;
    letter-spacing: .26em;
    text-transform: uppercase
}

.hidden {
    display: none !important
}

.world {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 1.5s cubic-bezier(.55, 0, .25, 1);
    pointer-events: none
}

.hallScene {
    pointer-events: none
}

.halldoor,
.exhibit,
.m-pedestal {
    pointer-events: auto
}

.plane {
    position: absolute;
    transform-style: preserve-3d;
    pointer-events: none
}

.floor {
    left: 50%;
    top: 50%;
    width: 700px;
    height: 2600px;
    background: repeating-linear-gradient(0deg, rgba(212, 174, 92, .06) 0 1px, transparent 1px 150px), linear-gradient(180deg, #141010, #0b0808);
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(-260px) scale(2) translateY(-1000px);
    backface-visibility: hidden
}

.ceiling {
    left: 50%;
    top: 50%;
    width: 700px;
    height: 2600px;
    background: linear-gradient(180deg, #0b0808, #070505);
    transform: translate(-50%, -50%) rotateX(-90deg) translateZ(-300px) scale(2) translateY(-1000px);
    backface-visibility: hidden
}

.wallL,
.wallR {
    top: 50%;
    width: 2600px;
    height: 280px;
    background: repeating-linear-gradient(90deg, rgba(212, 174, 92, .05) 0 1px, transparent 1px 450px), linear-gradient(180deg, #1c1313, #120d0d 70%, #0d0909);
    backface-visibility: hidden
}

.wallL {
    left: 50%;
    transform: translate(-50%, -50%) rotateY(90deg) translateZ(620px) scale(2) translateX(975px)
}

.wallR {
    left: 50%;
    transform: translate(-50%, -50%) rotateY(-90deg) translateZ(620px) scale(2) translateX(-975px)
}

.backwall {
    left: 50%;
    top: 50%;
    width: 1400px;
    height: 560px;
    backface-visibility: hidden;
    background: linear-gradient(180deg, #1c1313, #120d0d);
    transform: translate(-50%, -50%) translateZ(-4460px);
    display: flex;
    align-items: center;
    justify-content: center
}

.backwall .crest {
    text-align: center;
    padding: 0 40px
}

.backwall .crest .fell {
    font-size: .9rem;
    color: var(--gold)
}

.backwall .crest .h {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 2.3rem;
    color: var(--white);
    margin-top: 10px;
    line-height: 1.1
}

.exhibit {
    position: absolute;
    width: 340px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: filter .3s
}

.exhibit:hover {
    filter: brightness(1.25)
}

.exhibit .frame {
    border: 10px solid #2b1d16;
    outline: 1px solid var(--gold-dim);
    background: radial-gradient(ellipse at 50% 40%, #1c1310, #0d0908);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .8);
    aspect-ratio: 4/3.4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px
}

.exhibit .frame svg {
    width: 78%;
    height: auto
}

.exhibit .frame.photo {
    padding: 12px
}

.exhibit .frame.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    filter: sepia(.15)
}

.exhibit .plaque {
    margin: 14px auto 0;
    width: 78%;
    text-align: center;
    padding: 9px 10px 10px;
    background: linear-gradient(160deg, #241811, #150e0a);
    border: 1px solid var(--gold-dim)
}

.exhibit .plaque .t {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    line-height: 1.15;
    color: var(--white)
}

.exhibit .plaque .c {
    font-size: .52rem;
    color: var(--gold);
    margin-top: 4px;
    font-family: 'IM Fell English SC', serif;
    letter-spacing: .2em
}

.spot {
    position: absolute;
    left: 50%;
    top: -135px;
    transform: translateX(-50%);
    width: 200%;
    height: 150px;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 100% at 50% 0%, rgba(240, 222, 180, .10), transparent 70%)
}

.halldoor {
    position: absolute;
    width: 300px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: filter .3s
}

.halldoor:hover {
    filter: brightness(1.3)
}

.halldoor::after {
    content: "";
    position: absolute;
    inset: -26px
}

.exhibit::after {
    content: "";
    position: absolute;
    inset: -20px
}

.halldoor .arch {
    width: 230px;
    height: 340px;
    margin: 0 auto;
    border-radius: 105px 105px 3px 3px;
    background: linear-gradient(165deg, #1c1310, #0b0807 65%, #130d0b);
    border: 1.5px solid var(--gold-dim);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .9), 0 20px 50px rgba(0, 0, 0, .7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 24px 14px 22px;
    transition: border-color .3s, box-shadow .3s
}

.halldoor .doorname {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--white);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9)
}

.halldoor .doorsub {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .26em;
    color: var(--gold);
    text-transform: uppercase
}

.halldoor .portrait {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0
}

.halldoor .portrait img {
    max-width: 88%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .85))
}

.halldoor .portrait svg {
    width: 82%;
    height: auto;
    max-height: 100%;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .85))
}

.halldoor:hover .arch {
    border-color: var(--gold);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .9), 0 0 60px rgba(212, 174, 92, .2)
}

.halldoor .mini-wheel {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    position: relative;
    background: radial-gradient(circle, #171009 30%, #0b0807);
    box-shadow: 0 0 18px rgba(212, 174, 92, .2), inset 0 0 12px rgba(0, 0, 0, .7)
}

.halldoor .mini-wheel::before {
    content: "";
    position: absolute;
    inset: 27%;
    border: 1.5px solid var(--gold);
    border-radius: 50%
}

.halldoor .mini-wheel::after {
    content: "";
    position: absolute;
    inset: 44%;
    background: var(--gold);
    border-radius: 50%
}

.halldoor .plate {
    margin: 14px auto 0;
    width: 82%;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid var(--gold-dim);
    background: linear-gradient(160deg, #241811, #140e0a)
}

.halldoor .plate .nm {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--white)
}

.halldoor .plate .sb {
    font-family: 'IM Fell English SC', serif;
    font-size: .5rem;
    letter-spacing: .22em;
    color: var(--gold);
    margin-top: 4px;
    text-transform: uppercase
}

.halldoor.sealed {
    opacity: .72
}

.halldoor.sealed .plate .nm {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--body)
}

.m-pedestal {
    position: absolute;
    transform-style: preserve-3d;
    cursor: pointer;
    text-align: center;
    width: 300px;
    transition: filter .3s
}

.m-pedestal:hover {
    filter: brightness(1.2)
}

.m-pedestal .obj {
    width: 200px;
    height: 170px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(212, 174, 92, .16), transparent 70%)
}

.m-pedestal .obj img {
    max-width: 86%;
    max-height: 100%;
    object-fit: contain
}

.m-pedestal .base {
    width: 180px;
    height: 120px;
    margin: -6px auto 0;
    background: linear-gradient(180deg, #1c1310, #0d0908);
    border: 1px solid var(--gold-dim);
    border-top: 3px solid var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px
}

.m-pedestal .base .fell {
    font-size: .5rem;
    color: var(--gold)
}

.m-pedestal .base .b {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.15;
    color: var(--white)
}

#curtain {
    position: absolute;
    inset: 0;
    background: #090705;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 60
}

#curtain.on {
    opacity: 1
}

.world {
    will-change: transform
}

@media(max-width:700px) {
    .exhibit {
        width: 250px
    }

    .exhibit .plaque .t {
        font-size: .92rem
    }

    #museum {
        --exX: 36vw
    }
}

#mhud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 80
}

.hud-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(9, 7, 5, .9), transparent)
}

.hud-brand .name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    letter-spacing: .16em;
    color: var(--white)
}

.hud-brand .fell {
    display: block;
    font-size: .46rem;
    color: var(--gold);
    margin-top: 3px
}

.hud-loc {
    text-align: right;
    padding-right: 46px
}

.hud-loc .fell {
    font-size: .56rem;
    color: var(--gold)
}

.hud-loc .stop-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    margin-top: 3px;
    color: var(--white)
}

.mmap {
    position: absolute;
    top: 84px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 12px 10px;
    border: 1px solid var(--line);
    background: rgba(9, 7, 5, .65)
}

.mmap .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    transition: background .4s
}

.mmap .dot.on {
    background: var(--gold);
    box-shadow: 0 0 8px rgba(212, 174, 92, .8)
}

/* Three ranks of control, and they never share a shape or a place.
   1. Walking      the rail at the bottom. two fixed cells. never moves.
   2. Up one level a quiet line beneath it.
   3. Leaving      a mark in the corner, alone. */
.mnav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 20px 26px;
    display: block;
    text-align: center;
    background: linear-gradient(0deg, rgba(9, 7, 5, .95), rgba(9, 7, 5, .74) 62%, transparent)
}

.mwalk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 380px;
    margin: 0 auto
}

.wc {
    display: flex;
    min-height: 48px
}

.mnav button {
    pointer-events: auto;
    cursor: pointer;
    background: rgba(20, 14, 11, .85);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'IM Fell English SC', serif;
    letter-spacing: .18em;
    font-size: .64rem;
    padding: 14px 12px;
    transition: all .25s;
    border-radius: 3px;
    text-transform: uppercase
}

.mnav .mwalk button {
    width: 100%
}

.mnav button:hover:not(:disabled) {
    background: var(--gold);
    color: #221408
}

.mnav button:disabled {
    display: none
}

/* the control goes. the space it stood in stays. */

/* rank two. the way up is a line, not a button. */
.mnav .uplink {
    display: block;
    visibility: hidden;
    margin: 13px auto 0;
    background: none;
    border: none;
    border-radius: 0;
    color: rgba(200, 185, 160, .5);
    font-size: .54rem;
    letter-spacing: .26em;
    padding: 9px 14px
}

.mnav .uplink.on {
    visibility: visible
}

.mnav button.uplink:hover:not(:disabled) {
    background: none;
    color: var(--gold)
}

/* rank three. leaving lives in the corner and touches nothing. */
.mclose {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 44;
    pointer-events: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(9, 7, 5, .8);
    border: 1px solid rgba(212, 174, 92, .34);
    color: var(--gold-dim);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: all .25s
}

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

.mhint {
    position: absolute;
    bottom: 98px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .85rem;
    font-style: italic;
    color: var(--body);
    transition: opacity .6s;
    padding: 0 30px
}

.mhint.hide {
    opacity: 0
}

#closeup {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(7, 5, 4, .9);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s, visibility 0s .45s
}

#closeup.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s
}

.cu-card {
    position: relative;
    max-width: 520px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    background: linear-gradient(165deg, #191110, #0d0908);
    border: 1px solid var(--gold);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .9);
    transform: scale(.92);
    transition: transform .45s cubic-bezier(.2, .9, .3, 1.2);
    border-radius: 4px
}

#closeup.show .cu-card {
    transform: scale(1)
}

.cu-img {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(ellipse at 50% 45%, rgba(212, 174, 92, .14), transparent 70%)
}

.cu-img svg,
.cu-img img {
    max-width: 60%;
    max-height: 88%;
    object-fit: contain
}

.cu-body {
    padding: 26px 28px
}

.cu-body .fell {
    font-size: .56rem;
    color: var(--gold)
}

.cu-body h3 {
    font-size: 1.6rem;
    margin: 8px 0 4px;
    line-height: 1.15
}

.cu-body .cat {
    font-family: 'IM Fell English SC', serif;
    font-size: .58rem;
    letter-spacing: .22em;
    color: var(--gold-dim);
    margin-bottom: 14px;
    text-transform: uppercase
}

.cu-body p {
    font-size: .96rem
}

.cu-body .prov {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-style: italic;
    font-size: .88rem
}

/* exits live on the frame of the screen, never on the object. */
.cu-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 38px;
    height: 38px;
    line-height: 1;
    cursor: pointer;
    background: rgba(9, 7, 5, .72);
    border: 1px solid rgba(212, 174, 92, .32);
    color: var(--gold-dim);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    border-radius: 50%;
    padding: 0;
    transition: all .25s
}

.cu-close:hover {
    color: var(--gold);
    border-color: var(--gold)
}

/* GRAND ENTRANCE */
#entrance {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px 62px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    /* background: radial-gradient(ellipse at 50% 38%, #16100b 0%, #090705 72%); */
}

#entrance .ent-kicker {
    font-size: 28px;
    line-height: 35px;
    letter-spacing: .36em;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .95), 0 0 30px rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: "Cormorant Garamond", serif;
}

#entrance h1.ent-name {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    color: var(--white);
    font-size: clamp(46px, 15vw, 104px);
    line-height: .94;
    letter-spacing: .01em;
    margin: 0;
    text-shadow: 0 4px 34px rgba(0, 0, 0, .92), 0 1px 3px rgba(0, 0, 0, .9);
    max-width: 100%;
}

#entrance h1.ent-name .l1,
#entrance h1.ent-name .l2 {
    display: block;
}

#entrance h1.ent-name .l2 {
    color: var(--gold);
}

#entrance .ent-rule {
    position: relative;
    width: 120px;
    height: 14px;
    margin: 20px auto 20px;
}

#entrance .ent-rule::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold);
    opacity: .5;
}

#entrance .ent-rule::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 12px rgba(212, 174, 92, .7);
}

#entrance .ent-promise {
    font-family: 'EB Garamond', serif;
    color: #fff;
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
}

#entrance .ent-promise .soft {}

#entrance .ent-sub {
    font-family: 'EB Garamond', serif;
    color: var(--gold);
    margin-top: 26px;
    letter-spacing: .02em;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    font-style: italic;
}

#entrance .ent-scroll {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-top: 50px;
    font-weight: 600;
    font-family: "EB Garamond", serif;
}

#entrance .ent-scroll .arr {
    font-size: 18px;
    line-height: 1;
    display: block;
}

@keyframes entpulse {

    0%,
    100% {
        opacity: .5;
        transform: translateX(-50%) translateY(0)
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(5px)
    }
}


/* GRAND ENTRANCE */

#entrance .ent-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* filter: contrast(1.03); */
    transform: scale(1.06);
    /* animation: entdrift 26s ease-in-out infinite alternate; */
}

@keyframes entdrift {
    from {
        transform: scale(1.06) translateY(0)
    }

    to {
        transform: scale(1.14) translateY(-14px)
    }
}

#entrance .ent-veil {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(9, 7, 5, .42) 0%, rgba(9, 7, 5, .30) 34%, rgba(9, 7, 5, .58) 66%, rgba(9, 7, 5, .95) 100%),
        radial-gradient(ellipse at 50% 40%, rgba(9, 7, 5, 0) 0%, rgba(9, 7, 5, .72) 100%); */
    background: linear-gradient(180deg, rgba(9, 7, 5, 0) 7.11%, #090705 91.48%), radial-gradient(50% 50% at 50% 50%, rgba(45, 39, 26, 0.32) 0%, rgba(45, 39, 26, 0.8) 100%);
}

#entrance .ent-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
    margin-top: 91px;
}



#entrance .ent-logo {
    width: 100%;
    height: 100%;
}

@keyframes logofloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

#entrance .ent-logo-wrap {
    position: relative;
}

#entrance .ent-logo-glow {
    position: absolute;
    top: 52%;
    left: 50%;
    width: 82%;
    height: 70%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(212, 174, 92, .34) 0%, rgba(212, 174, 92, .10) 45%, rgba(212, 174, 92, 0) 72%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}



#eod .eod-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 22px 0 16px;
}





#eod .eod-topline {
    font-family: 'EB Garamond', serif;
    text-align: center;
    color: var(--gold);
    font-size: 14px;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 600;
}

/* EXHIBIT OF THE DAY READER */
.eodr {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(9, 7, 5, .97);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
    overflow: hidden;
}

.eodr.show {
    opacity: 1;
    visibility: visible;
}

.eodr-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.eodr-x {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(9, 7, 5, .7);
    border: 1px solid var(--line);
    color: var(--gold);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.eodr-hero {
    width: 100%;
    max-height: 56vh;
    overflow: hidden;
    position: relative;
    background: #0c0906;
    border-bottom: 1px solid var(--line);
}

.eodr-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.82) contrast(1.03);
}

.eodr-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 7, 5, 0) 55%, rgba(9, 7, 5, .9) 100%);
}

.eodr-body {
    max-width: 680px;
    margin: 0 auto;
    padding: 34px 24px 90px;
}

.eodr-body .fell {
    display: block;
    font-size: .5rem;
    letter-spacing: .34em;
    color: var(--gold);
    margin-bottom: 14px;
}

.eodr-body h1 {
    font-family: 'EB Garamond', serif;
    font-size: clamp(30px, 7vw, 46px);
    line-height: 1.06;
    color: var(--white);
    font-weight: 600;
    margin: 0 0 8px;
}

.eodr-cat {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--gold);
    font-size: 16px;
    margin-bottom: 24px;
    letter-spacing: .02em;
}

.eodr-lede {
    font-family: 'EB Garamond', serif;
    font-size: clamp(19px, 4.4vw, 24px);
    line-height: 1.5;
    color: var(--white);
    margin-bottom: 30px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.eodr-body p {
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    line-height: 1.72;
    color: var(--body);
    margin: 0 0 18px;
}

.eodr-h {
    font-family: 'EB Garamond', serif;
    font-size: .5rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 32px 0 14px;
}

.eodr-body blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--gold);
}

.eodr-body blockquote p {
    font-style: italic;
    color: var(--white);
    font-size: 19px;
}

.eodr-body blockquote cite {
    font-style: normal;
    color: var(--gold);
    font-size: 14px;
    letter-spacing: .04em;
}

.eodr-trans {
    font-family: 'EB Garamond', serif;
    background: rgba(212, 174, 92, .06);
    border: 1px solid var(--line);
    padding: 18px 20px;
    margin: 22px 0;
    color: var(--white);
    font-size: 16px;
    line-height: 1.7;
    border-radius: 2px;
}

.eodr-exits {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eodr-exits-label {
    font-family: 'EB Garamond', serif;
    text-align: center;
    color: var(--gold);
    font-size: .5rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.eodr-exit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 16px 20px;
    cursor: pointer;
    background: rgba(212, 174, 92, .05);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: .2s;
}

.eodr-exit:hover {
    background: rgba(212, 174, 92, .12);
    border-color: var(--gold);
}

.eodr-exit .ee-t {
    font-family: 'EB Garamond', serif;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
}

.eodr-exit .ee-s {
    font-family: 'EB Garamond', serif;
    color: var(--body);
    font-size: 14px;
    font-style: italic;
}




#eod .eod-idline {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

#eod .eod-id {
    text-align: center;
}

#eod .eod-id-v {
    font-family: 'EB Garamond', serif;
    color: var(--gold);
    font-size: 12px;
    letter-spacing: .06em;
    font-weight: 600;
}

#eod .eod-id-l {
    font-family: 'EB Garamond', serif;
    color: var(--body);
    font-size: 8px;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: .7;
}


#reader .rd-nav-btn:hover {
    background: rgba(212, 174, 92, .16);
    border-color: var(--gold);
}


#reader .rd-nav-top {
    margin-top: 0;
    margin-bottom: 22px;
    padding-top: 0;
    padding-bottom: 22px;
    border-top: none;
    border-bottom: 1px solid rgba(212, 174, 92, .2);
}