/* One expanding sidebar, rather than a separate rail and drawer. */
:root { --rail-width: 76px; --sidebar-open-width: 326px; }
.site-header, body:not(.template-homepage):not(.template-section-index) .site-header {
    width: var(--rail-width); overflow: hidden; border-right-color: #665038;
    transition: width 320ms var(--editorial-ease);
}
.site-header.site-header--menu-open, body:not(.template-homepage):not(.template-section-index) .site-header.site-header--menu-open { width: var(--sidebar-open-width); box-shadow: 12px 0 40px rgb(0 0 0 / 16%); }
.site-header .site-header__inner { width: var(--sidebar-open-width); height: 100%; padding: 16px 0; align-items: stretch; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.site-header:not(.site-header--menu-open) .site-header__inner { overflow-y: hidden; }
.site-header .site-header__brand { display: flex; align-items: center; gap: 14px; width: calc(var(--sidebar-open-width) - 12px); margin: 0 6px; border-radius: 2px; text-decoration: none; }
.site-header__brand-media { position: relative; display: block; flex: 0 0 64px; width: 64px; height: 64px; --logo-media-size: 80px; --logo-media-offset: -8px; overflow: hidden; border-radius: 50%; background: #030102; }
.site-header .site-header__brand-media img, .site-header__logo-video, .site-header__logo-canvas { position: absolute; inset: auto; top: var(--logo-media-offset); left: var(--logo-media-offset); width: var(--logo-media-size); height: var(--logo-media-size); object-fit: contain; transform: none; }
.site-header__logo-video, .site-header__logo-canvas { opacity: 0; pointer-events: none; }
.site-header__logo-video[data-playing] + .site-header__logo-canvas[data-ready], .site-header__logo-video[data-playing][data-native-renderer] { opacity: 1; }
.site-header__brand-name { font: 400 19px/1.3 Georgia, serif; color: #f3dbac; opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms; }
.site-header__brand-name > span { display: block; }
.site-header.site-header--menu-open .site-header__brand-name { opacity: 1; visibility: visible; }
.site-header .menu-button { align-self: flex-start; width: 52px; min-height: 64px; margin: 16px 12px 18px; padding: 8px 0; font-size: 11px; gap: 10px; }
.site-header--menu-open .menu-button { width: calc(var(--sidebar-open-width) - 40px); margin-inline: 20px; flex-direction: row; justify-content: flex-start; min-height: 52px; gap: 16px; font-size: 13px; }
.site-header .primary-nav { position: static; inset: auto; width: auto; flex: 0 0 auto; margin: 0 22px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; justify-content: flex-start; }
.site-header[data-nav-ready] .primary-nav { visibility: hidden; opacity: 0; transform: translateX(-12px); transition: opacity 200ms ease, transform 300ms ease, visibility 300ms; }
.site-header[data-nav-ready].site-header--menu-open .primary-nav { visibility: visible; opacity: 1; transform: none; transition: opacity 220ms ease, transform 300ms ease; }
.site-header .primary-nav__heading { margin: 0 0 12px; font-size: 10px; letter-spacing: .16em; }
.site-header .primary-nav__link { gap: 14px; padding: 13px 0; min-height: 54px; font-size: 24px; line-height: 1.25; }
.site-header .primary-nav__link::before { min-width: 18px; font-size: 10px; }
.site-header .primary-nav__link:hover, .site-header .primary-nav__link:focus-visible { padding-left: 5px; }
.site-header__extras { width: calc(var(--sidebar-open-width) - 44px); margin: auto 22px 36px; padding-top: 28px; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 300ms; }
.site-header--menu-open .site-header__extras { opacity: 1; visibility: visible; transition: opacity 220ms ease; }
.site-header__extras > p { margin: 0 0 8px; color: #bba589; font-size: 11px; letter-spacing: .08em; }
.site-header__socials { display: flex; gap: 24px; }
.site-header__socials a { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; color: #f3dbac; text-underline-offset: 5px; }
.site-header__extras .site-motion-toggle { min-height: 36px; margin-top: 8px; padding-block: 4px; font-size: 12px; }
.back-to-top { position: fixed; z-index: 40; right: 12px; bottom: max(20px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #9a7a43; border-radius: 50%; color: #ffe18a; background: #160f0a; text-decoration: none; font-size: 24px; line-height: 1; transition: background-color 180ms ease; }
.back-to-top:hover { background: #302115; }
#main-content:focus { outline: none; box-shadow: none; }
/* Keep the chapter markers clear of the separate top button on short screens. */
@media (min-width: 961px) and (max-height: 600px) {
    .chapter-nav a { height: 32px; }
    .chapter-nav__number, .chapter-nav__total { padding-block: 5px; }
    .chapter-nav__track { top: 43px; bottom: 43px; }
    .site-header .site-header__inner { padding-block: 10px; }
    .site-header .menu-button { margin-top: 8px; margin-bottom: 10px; }
    .site-header .primary-nav__link { padding-block: 10px; min-height: 46px; }
    .site-header__extras { padding-top: 16px; }
}
@media (max-width: 960px) {
    :root { --rail-width: 0px; --sidebar-open-width: 100vw; }
    .site-header, body:not(.template-homepage):not(.template-section-index) .site-header { width: 100%; height: 78px; transition: none; }
    .site-header.site-header--menu-open, body:not(.template-homepage):not(.template-section-index) .site-header.site-header--menu-open { width: 100%; height: 100dvh; }
    .site-header .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 58px minmax(0, 1fr) auto; gap: 0; width: 100%; padding: 10px 20px; overflow: hidden; }
    .site-header .site-header__brand { grid-column: 1; grid-row: 1; width: auto; margin: 0; gap: 10px; }
    .site-header__brand-media { width: 52px; height: 52px; flex-basis: 52px; --logo-media-size: 66px; --logo-media-offset: -7px; }
    .site-header__brand-name { font-size: 15px; opacity: 1; visibility: visible; }
    .site-header .menu-button, .site-header--menu-open .menu-button { grid-column: 2; grid-row: 1; align-self: center; width: auto; min-height: 44px; margin: 0; padding: 8px; flex-direction: row; gap: 10px; font-size: 12px; }
    .site-header .primary-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 24px 4px; overflow-y: auto; overscroll-behavior: contain; }
    .site-header .primary-nav__link { min-height: 58px; font-size: clamp(23px, 5vw, 30px); padding-block: 16px; }
    .site-header__extras { grid-column: 1 / -1; grid-row: 3; width: 100%; margin: 0; padding: 16px 4px max(34px, env(safe-area-inset-bottom)); border-top: 1px solid #493626; }
    .site-header__socials a, .site-header__extras .site-motion-toggle { min-height: 44px; }
    .back-to-top { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}
/* Links remain available if scripting is disabled. */
.site-header:not([data-nav-ready]) .site-header__brand-name, .site-header:not([data-nav-ready]) .site-header__extras { display: none; }
.site-header:not([data-nav-ready]) .primary-nav { position: static; width: calc(var(--rail-width) - 12px); margin: 20px 6px 0; padding: 0; opacity: 1; visibility: visible; transform: none; }
.site-header:not([data-nav-ready]) .primary-nav__link { font: 12px/1.4 Inter, Arial, sans-serif; padding: 12px 0; overflow-wrap: anywhere; }
@media (max-width: 960px) {
    .site-header:not([data-nav-ready]) { position: relative; height: auto; }
    .site-header:not([data-nav-ready]) .site-header__inner { display: block; }
    .site-header:not([data-nav-ready]) .site-header__brand { width: fit-content; }
    .site-header:not([data-nav-ready]) .primary-nav { width: 100%; margin: 10px 0 0; display: flex; flex-flow: row wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header, .site-header *, .back-to-top { transition: none !important; }
    .site-header__logo-video, .site-header__logo-canvas { display: none; }
}
[data-motion-disabled] .site-header__logo-video, [data-motion-disabled] .site-header__logo-canvas { display: none; }

[data-motion-disabled] .site-header, [data-motion-disabled] .site-header *, [data-motion-disabled] .back-to-top { transition: none !important; }

/* Fine lettering needs a larger displayed badge, not just more source pixels. */
@media(min-width:961px) {
    .site-header .site-header__brand { width: calc(var(--sidebar-open-width) - 4px); margin-inline: 2px; }
    .site-header__brand-media { width: 72px; height: 72px; flex-basis: 72px; --logo-media-size: 92px; --logo-media-offset: -10px; }
    .site-header--menu-open .site-header__brand { width: calc(var(--sidebar-open-width) - 16px); margin-inline: 8px; }
    .site-header--menu-open .site-header__brand-media { width: 112px; height: 112px; flex-basis: 112px; --logo-media-size: 144px; --logo-media-offset: -16px; }
    .site-header--menu-open .site-header__brand-name { font-size: 18px; }
}
@media(min-width:961px) and (max-height:760px) {
    .site-header--menu-open .site-header__brand-media { width: 96px; height: 96px; flex-basis: 96px; --logo-media-size: 124px; --logo-media-offset: -14px; }
    .site-header--menu-open .menu-button { margin-top: 10px; margin-bottom: 10px; min-height: 44px; }
    .site-header--menu-open .site-header__extras { padding-top: 16px; }
}

.site-footer__support { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: 12px; color: #f3dbac; font-size: 16px; text-underline-offset: 5px; }

.site-footer .site-footer__support { text-decoration: none; }
.site-footer__support-label { text-decoration: underline; }

/* Match the support marker to the heart in the footer. */
.site-header .primary-nav__link[href="/support/"]::before { content: "♡"; font-size: 16px; line-height: 1; letter-spacing: 0; color: #f3dbac; }

/* A raised arrow makes the closed desktop rail's opening direction clear. */
.site-header__expand { display: none; }
@media (min-width: 961px) {
    .site-header[data-nav-ready]:not(.site-header--menu-open) .site-header__expand:not([hidden]) {
        position: absolute; left: calc((var(--rail-width) - 44px) / 2); bottom: 48px;
        display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
        color: var(--color-gold-light); background: transparent; border: 0; cursor: pointer;
    }
    .site-header__expand:hover { color: #fff4cf; }
    .site-header__expand:focus-visible { outline: 1px solid var(--color-gold-light); outline-offset: 2px; }
}