:root {
    --bg: #090909;
    --ui-neutral: #9b9691;
    --ui-heading: #c8c3bd;
    --text: var(--ui-neutral);
    --accent: #7c1717;
    --focus: #932813;
    --gold: #8f7652;
    --font-editorial: "Marcellus", "Iowan Old Style", serif;
    --font-title: var(--font-editorial);
    --font-body: var(--font-editorial);
    --font-title-weight: 700;
    --font-content-weight: 400;
    --font-nav-weight: 300;
    --mobile-shell-max-width: 1040px;
    --mobile-shell-header-height: 6.1rem;
    --mobile-shell-header-candle-width: clamp(6.66rem, 28.56vw, 6.9rem);
    --mobile-shell-header-candle-height: clamp(9.96rem, 42.84vw, 10.36rem);
    --mobile-shell-header-drip-overflow: clamp(1.32rem, 5.76vw, 1.98rem);
    --mobile-shell-header-candle-block-offset: 1.4rem;
    --mobile-shell-header-candle-inline-shift: 0px;
    --mobile-shell-header-candle-block-shift: 0px;
    --mobile-shell-header-wordmark-scale: .85;
    --mobile-shell-header-menu-icon-size: 3.825rem;
    --mobile-shell-header-menu-icon-color: #7c1717;
    --mobile-shell-header-menu-icon-distress: rgba(12, 7, 7, .3);
    --mobile-shell-header-clearance: calc(
        env(safe-area-inset-top, 0px) + var(--mobile-shell-header-height)
    );
    --mobile-shell-content-padding-top: calc(
        var(--mobile-shell-header-clearance) + .6rem
    );
    --mobile-home-shell-content-padding-top: calc(
        var(--mobile-shell-header-clearance) + .65rem
    );
    --mobile-shell-nav-content-height: 3.75rem;
    --mobile-shell-nav-clearance: calc(
        var(--mobile-shell-nav-content-height) + env(safe-area-inset-bottom, 0px)
    );
    --mobile-shell-nav-offset: 0px;
    --mobile-bottom-nav-overlay-opacity: .85;
    --mobile-bottom-nav-tint-opacity: .18;
    --mobile-bottom-nav-atmosphere-opacity: .06;
    --mobile-document-min-height: 100vh;
    --global-background-tint-rgb: 127, 16, 19;
    --global-background-tint-opacity: .25;
    --global-spatter-opacity: .25;
    --home-tonights-details-inline-shift: 15px;
    --home-yesterday-poster-inline-shift: clamp(0px, .55vw, 2px);
    --home-yesterday-poster-block-shift: clamp(-5px, -1.3vw, -2px);
    --global-scrim-mask-size: calc(var(--mobile-shell-header-candle-width) * 1.5);
    --global-scrim-mask-inline-end-effective: calc(
        var(--global-scrim-mask-inline-end) +
        var(--mobile-shell-header-candle-inline-shift)
    );
    --global-scrim-mask-inline-end: 0rem;
    --global-scrim-mask-block-start: 1.5rem;
    --global-candle-light-center-x: calc(
        100% - var(--global-scrim-mask-inline-end-effective) -
        var(--global-scrim-mask-size) * .45
    );
    --global-candle-light-center-y: calc(
        var(--global-scrim-mask-block-start) +
        var(--global-scrim-mask-size) * .3
    );
    --global-candle-light-ambient-size: calc(
        var(--global-scrim-mask-size) * 2.2
    );
    --global-candle-light-highlight-size: calc(
        var(--global-scrim-mask-size) * .65
    );
    --home-frame-brightness: .88;
    --home-secondary-frame-aspect-ratio: 1290 / 610;
}

@supports (height: 100lvh) {
    :root {
        --mobile-document-min-height: 100lvh;
    }
}

html.ios-standalone {
    --mobile-shell-nav-offset: 20px;
    --mobile-shell-nav-clearance: calc(
        var(--mobile-shell-nav-content-height) + var(--mobile-shell-nav-offset)
    );
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html {
    font-size: 16px;
    background-color: var(--bg);
    isolation: isolate;
}

html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Top-to-bottom: red tint, fixed brick plate. */
    background-image:
        linear-gradient(
            rgba(var(--global-background-tint-rgb), var(--global-background-tint-opacity)),
            rgba(var(--global-background-tint-rgb), var(--global-background-tint-opacity))
        ),
        url("images/brick-bg-plate.png");
    background-size: auto, cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: soft-light, normal;
}

body {
    display: flex;
    position: relative;
    justify-content: center;
    color: var(--text);
    font-family: var(--font-body);
    z-index: 1;
    background-color: transparent;
    isolation: isolate;
}

body:not(.debug-page)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(
            circle var(--global-candle-light-highlight-size)
                at var(--global-candle-light-center-x)
                var(--global-candle-light-center-y),
            rgba(255, 82, 38, .22) 0%,
            rgba(205, 39, 24, .1) 28%,
            transparent 72%
        ),
        radial-gradient(
            circle var(--global-candle-light-ambient-size)
                at var(--global-candle-light-center-x)
                var(--global-candle-light-center-y),
            rgba(105, 13, 18, .28) 0%,
            rgba(78, 8, 12, .13) 38%,
            transparent 78%
        ),
        url("images/bg-scrim.png");
    background-size: auto, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-blend-mode: screen, soft-light, normal;
    mask-image:
        url("images/bg-scrim-mask.png"),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0);
    mask-size:
        var(--global-scrim-mask-size) auto,
        100% var(--global-scrim-mask-block-start),
        100% calc(100% - var(--global-scrim-mask-block-start) - var(--global-scrim-mask-size)),
        calc(100% - var(--global-scrim-mask-inline-end-effective) - var(--global-scrim-mask-size)) var(--global-scrim-mask-size),
        var(--global-scrim-mask-inline-end-effective) var(--global-scrim-mask-size);
    mask-position:
        right var(--global-scrim-mask-inline-end-effective) top var(--global-scrim-mask-block-start),
        left top,
        left calc(var(--global-scrim-mask-block-start) + var(--global-scrim-mask-size)),
        left var(--global-scrim-mask-block-start),
        right var(--global-scrim-mask-block-start);
    mask-repeat: no-repeat;
    mask-composite: add;
    -webkit-mask-image:
        url("images/bg-scrim-mask.png"),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0);
    -webkit-mask-size:
        var(--global-scrim-mask-size) auto,
        100% var(--global-scrim-mask-block-start),
        100% calc(100% - var(--global-scrim-mask-block-start) - var(--global-scrim-mask-size)),
        calc(100% - var(--global-scrim-mask-inline-end-effective) - var(--global-scrim-mask-size)) var(--global-scrim-mask-size),
        var(--global-scrim-mask-inline-end-effective) var(--global-scrim-mask-size);
    -webkit-mask-position:
        right var(--global-scrim-mask-inline-end-effective) top var(--global-scrim-mask-block-start),
        left top,
        left calc(var(--global-scrim-mask-block-start) + var(--global-scrim-mask-size)),
        left var(--global-scrim-mask-block-start),
        right var(--global-scrim-mask-block-start);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
}

body:not(.debug-page)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--global-spatter-opacity);
    mix-blend-mode: normal;
    background: url("images/brick-bg-spatter-overlay.png") center / cover no-repeat;
}

.landing {
    position: relative;
    width: min(700px, 100%);
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding: 1.4rem 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.oracle {
    position: relative;
    z-index: 2;
}

.hero {
    margin-top: .4rem;
    margin-bottom: 1.65rem;
}

.logo {
    font-family: var(--font-title);
    color: var(--accent);
    font-size: clamp(2.65rem, 14vw, 3.7rem);
    font-weight: 500;
    letter-spacing: .26rem;
    text-shadow: 0 0 14px rgba(124, 23, 23, .45);
}

.hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: .75rem 0 1rem;
}

.hero-divider span {
    width: 82px;
    height: 2px;
    background: rgba(184, 160, 120, .45);
}

.hero-sigil {
    display: block;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    opacity: .85;
}

.oracle {
    max-width: 21.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oracle h2 {
    font-family: var(--font-body);
    font-size: clamp(1.9rem, 9vw, 2.45rem);
    line-height: 1.05;
    font-weight: 500;
    margin-bottom: .9rem;
}

.oracle p {
    font-size: 1.18rem;
    line-height: 1.22;
    margin: .50rem 0;
}

.landing-countdown-label {
    margin-top: 1.4rem;
    color: var(--text);
    font-size: .9rem;
    text-transform: uppercase;
}

.landing-countdown {
    color: var(--ui-heading);
    font-size: clamp(1.35rem, 6vw, 1.8rem);
    font-weight: 500;
}

.emphasis {
    color: var(--text);
    font-weight: 500;
}

.pause {
    margin-top: .75rem;
    font-size: 1.25rem;
    letter-spacing: .12rem;
}

.finale {
    margin-top: .25rem;
    color: #b79b73;
    font-family: var(--font-title);
    font-size: 1.18rem;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: .18rem 0;
}

.divider span {
    width: 48px;
    height: 1px;
    background: rgba(124, 23, 23, .45);
}

.landing-divider {
    margin: .7rem 0 1rem;
}

.sigil {
    color: rgba(150, 28, 28, .9);
    font-size: .68rem;
    line-height: 1;
}

.candle {
    position: absolute;
    left: -105px;
    bottom: -40px;
    width: 315px;
    opacity: .42;
    filter:
        brightness(.55)
        contrast(1.1)
        blur(.3px)
        drop-shadow(0 0 30px rgba(0, 0, 0, .65));
    pointer-events: none;
    z-index: 0;
}

body.admin-page,
body.category-page,
body.movie-page,
body.hall-page,
body.october-page {
    display: block;
    min-height: 100%;
    overflow-y: auto;
}

body.debug-page {
    display: block;
    min-height: 100%;
    overflow-y: auto;
    background-color: var(--bg);
}

.debug-shell {
    width: min(42rem, 100%);
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.debug-shell h1,
.debug-shell h2 {
    color: #d0b891;
    font-family: var(--font-title);
    font-weight: 500;
}

.debug-shell h1 {
    font-size: 1.35rem;
}

.debug-shell h2 {
    font-size: 1rem;
}

.debug-shell section {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid rgba(143, 118, 82, .3);
    background: rgba(10, 9, 9, .72);
}

.debug-current-user,
.debug-shell p {
    color: rgba(208, 184, 145, .84);
    line-height: 1.2;
}

.debug-preview-form {
    display: grid;
    gap: .7rem;
}

.debug-preview-form label,
.debug-shell form label {
    display: grid;
    gap: .35rem;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .76rem;
    letter-spacing: .06rem;
    text-transform: uppercase;
}

.debug-preview-form input,
.debug-preview-form select,
.debug-shell form input:not([type="hidden"]) {
    min-height: 42px;
    border: 1px solid rgba(143, 118, 82, .5);
    padding: .55rem .65rem;
    color: var(--text);
    font: inherit;
    background: #2c2929;
}

.debug-preview-form button,
.debug-shell form button {
    min-height: 42px;
}

html.mobile-app-document .landing {
    height: auto;
    min-height: var(--mobile-document-min-height);
    max-height: none;
    overflow: visible;
}

.mobile-shell-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    width: min(var(--mobile-shell-max-width), 100%);
    min-height: calc(
        env(safe-area-inset-top, 0px) + var(--mobile-shell-header-height)
    );
    margin: 0 auto;
    padding:
        max(.7rem, env(safe-area-inset-top, 0px))
        1rem
        .5rem;
    overflow: visible;
    isolation: isolate;
    z-index: 30;
}

.mobile-shell-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("images/brick-bg-plate.png");
    background-size: auto var(--mobile-document-min-height);
    background-position: center top;
    background-repeat: no-repeat;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .28),
        inset 0 -1px 0 rgba(143, 118, 82, .08);
    z-index: 0;
}

.mobile-shell-header-divider {
    position: absolute;
    right: clamp(2rem, 10vw, 4rem);
    bottom: 0;
    left: clamp(2rem, 10vw, 4rem);
    height: auto;
    aspect-ratio: 1224 / 29;
    z-index: 1;
    pointer-events: none;
    background: url("images/dividers/header-stone-shelf.png") center bottom / contain no-repeat;
}

.mobile-shell-header-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(
        var(--global-background-tint-rgb),
        var(--global-background-tint-opacity)
    );
    mix-blend-mode: soft-light;
}

.mobile-shell-header-scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image:
        radial-gradient(
            circle var(--global-candle-light-highlight-size)
                at var(--global-candle-light-center-x)
                var(--global-candle-light-center-y),
            rgba(255, 82, 38, .22) 0%,
            rgba(205, 39, 24, .1) 28%,
            transparent 72%
        ),
        radial-gradient(
            circle var(--global-candle-light-ambient-size)
                at var(--global-candle-light-center-x)
                var(--global-candle-light-center-y),
            rgba(105, 13, 18, .28) 0%,
            rgba(78, 8, 12, .13) 38%,
            transparent 78%
        ),
        url("images/bg-scrim.png");
    background-size:
        auto,
        auto,
        auto var(--mobile-document-min-height);
    background-position: center, center, center top;
    background-repeat: no-repeat;
    background-blend-mode: screen, soft-light, normal;
    mask-image:
        url("images/bg-scrim-mask.png"),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0);
    mask-size:
        var(--global-scrim-mask-size) auto,
        100% var(--global-scrim-mask-block-start),
        100% calc(100% - var(--global-scrim-mask-block-start) - var(--global-scrim-mask-size)),
        calc(100% - var(--global-scrim-mask-inline-end-effective) - var(--global-scrim-mask-size)) var(--global-scrim-mask-size),
        var(--global-scrim-mask-inline-end-effective) var(--global-scrim-mask-size);
    mask-position:
        right var(--global-scrim-mask-inline-end-effective) top var(--global-scrim-mask-block-start),
        left top,
        left calc(var(--global-scrim-mask-block-start) + var(--global-scrim-mask-size)),
        left var(--global-scrim-mask-block-start),
        right var(--global-scrim-mask-block-start);
    mask-repeat: no-repeat;
    mask-composite: add;
    -webkit-mask-image:
        url("images/bg-scrim-mask.png"),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0);
    -webkit-mask-size:
        var(--global-scrim-mask-size) auto,
        100% var(--global-scrim-mask-block-start),
        100% calc(100% - var(--global-scrim-mask-block-start) - var(--global-scrim-mask-size)),
        calc(100% - var(--global-scrim-mask-inline-end-effective) - var(--global-scrim-mask-size)) var(--global-scrim-mask-size),
        var(--global-scrim-mask-inline-end-effective) var(--global-scrim-mask-size);
    -webkit-mask-position:
        right var(--global-scrim-mask-inline-end-effective) top var(--global-scrim-mask-block-start),
        left top,
        left calc(var(--global-scrim-mask-block-start) + var(--global-scrim-mask-size)),
        left var(--global-scrim-mask-block-start),
        right var(--global-scrim-mask-block-start);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
}

.mobile-shell-header-spatter {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: var(--global-spatter-opacity);
    mix-blend-mode: normal;
    background: url("images/brick-bg-spatter-overlay.png") center top /
        auto var(--mobile-document-min-height) no-repeat;
}

.mobile-shell-header-menu,
.mobile-shell-header-wordmark,
.mobile-shell-header-art {
    position: relative;
}

.mobile-shell-header-menu-wrap,
.mobile-shell-header-wordmark {
    z-index: 5;
}

.mobile-shell-header-art {
    z-index: 6;
}

.mobile-shell-header-menu-wrap {
    position: relative;
    width: 44px;
    height: 44px;
}

.mobile-shell-header-menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: var(--mobile-shell-header-menu-icon-color);
    background: transparent;
    box-shadow: none;
}

.mobile-shell-header-menu.participant-preview-read-only {
    color: #003ffe;
}

.mobile-shell-header-menu.participant-preview-read-write {
    color: #cb00fe;
}

.mobile-shell-header-menu:focus-visible,
.mobile-account-menu-logout:focus-visible,
.desktop-account-logout:focus-visible {
    outline: 1px solid rgba(208, 184, 145, .8);
    outline-offset: 2px;
}

.mobile-shell-header-menu-icon {
    display: block;
    width: var(--mobile-shell-header-menu-icon-size);
    height: var(--mobile-shell-header-menu-icon-size);
    background-color: currentColor;
    background-image: repeating-linear-gradient(
        115deg,
        transparent 0 8px,
        var(--mobile-shell-header-menu-icon-distress) 8px 9px,
        transparent 9px 16px
    );
    background-blend-mode: multiply;
    mask-image: var(--mobile-menu-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--mobile-menu-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.mobile-account-menu {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    min-width: 12.5rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid rgba(143, 118, 82, .24);
    background:
        linear-gradient(rgba(27, 18, 18, .98), rgba(10, 9, 9, .985)),
        rgba(10, 9, 9, .98);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

.mobile-account-menu[hidden] {
    display: none;
}

.mobile-account-menu-kicker {
    margin-bottom: .2rem;
    color: rgba(208, 184, 145, .68);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mobile-account-menu-user {
    margin-bottom: .8rem;
    color: #f4ead7;
    font-size: 1.1rem;
}

.mobile-account-menu-link,
.mobile-account-menu-logout {
    display: block;
    width: 100%;
    margin-top: .45rem;
    color: #d0b891;
}

.mobile-shell-header-wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-right: calc(var(--mobile-shell-header-candle-width) - 3rem);
}

.mobile-shell-header-wordmark img {
    display: block;
    width: min(100%, 18rem);
    height: auto;
    transform: scale(var(--mobile-shell-header-wordmark-scale));
    transform-origin: center;
}

.mobile-shell-header-art {
    position: absolute;
    right: .45rem;
    bottom: calc(-1 * (
        var(--mobile-shell-header-drip-overflow) +
        var(--mobile-shell-header-candle-block-offset) +
        .7rem
    ) + var(--mobile-shell-header-candle-block-shift));
    transform: translateX(calc(-1 * var(--mobile-shell-header-candle-inline-shift)));
    width: var(--mobile-shell-header-candle-width);
    height: var(--mobile-shell-header-candle-height);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    overflow: visible;
}

.mobile-shell-header-candle {
    display: block;
    width: 95%;
    height: 95%;
    object-fit: contain;
    object-position: center bottom;
    filter:
        drop-shadow(0 0 18px rgba(255, 102, 35, .16))
        drop-shadow(0 14px 24px rgba(0, 0, 0, .44));
}

.mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(var(--mobile-shell-max-width), 100%);
    margin: 0 auto;
    padding:
        .1rem
        max(.75rem, env(safe-area-inset-right, 0px))
        calc(.1rem + env(safe-area-inset-bottom, 0px))
        max(.75rem, env(safe-area-inset-left, 0px));
    background-image:
        linear-gradient(
            rgba(0, 0, 0, var(--mobile-bottom-nav-overlay-opacity)),
            rgba(0, 0, 0, var(--mobile-bottom-nav-overlay-opacity))
        ),
        linear-gradient(
            rgba(150, 21, 27, var(--mobile-bottom-nav-tint-opacity)),
            rgba(150, 21, 27, var(--mobile-bottom-nav-tint-opacity))
        ),
        radial-gradient(
            ellipse 110% 180% at 50% 120%,
            rgba(150, 21, 27, var(--mobile-bottom-nav-atmosphere-opacity)) 0%,
            transparent 72%
        ),
        url("images/nav/mobile-nav-stone-base.png");
    background-position: center, center, center, center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, cover;
    background-blend-mode: normal, soft-light, screen, normal;
    box-shadow:
        0 -10px 34px rgba(0, 0, 0, .46),
        inset 0 1px 0 rgba(143, 118, 82, .08);
}

html.ios-standalone .mobile-bottom-nav {
    padding-bottom: calc(.1rem + var(--mobile-shell-nav-offset));
}

.mobile-bottom-nav-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    list-style: none;
}

.mobile-bottom-nav-link {
    display: grid;
    justify-items: center;
    gap: .08rem;
    padding: .15rem .18rem .08rem;
    color: var(--ui-neutral);
    text-decoration: none;
}

.mobile-bottom-nav-link.is-active {
    color: #B51D20;
}

.mobile-bottom-nav.participant-preview-read-only .mobile-bottom-nav-link.is-active {
    color: #003ffe;
}

.mobile-bottom-nav.participant-preview-read-write .mobile-bottom-nav-link.is-active {
    color: #cb00fe;
}

.mobile-bottom-nav-icon {
    display: block;
    width: 2.55rem;
    height: 2.55rem;
    background-color: currentColor;
    mask-image: var(--mobile-nav-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--mobile-nav-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.mobile-bottom-nav-label {
    font-family: var(--font-title);
    font-size: .66rem;
    font-weight: var(--font-nav-weight);
    font-stretch: condensed;
    letter-spacing: .08rem;
    line-height: 1;
    text-transform: uppercase;
}

.mobile-nav-diagnostics {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 6.5rem);
    right: .4rem;
    z-index: 60;
    width: min(24rem, calc(100vw - .8rem));
    max-height: 44dvh;
    overflow: auto;
    padding: .45rem;
    border: 1px solid rgba(208, 184, 145, .68);
    color: #f4ead7;
    background: rgba(8, 8, 8, .9);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.mobile-nav-diagnostics pre {
    margin: 0;
    font: 600 9px/1.25 ui-monospace, "Cascadia Mono", monospace;
    white-space: pre-wrap;
}

.mobile-nav-diagnostics-probe {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 41;
    height: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
    border-top: 1px dashed rgba(80, 220, 174, .9);
    background: rgba(80, 220, 174, .16);
    pointer-events: none;
}

.mobile-nav-viewport-probe {
    position: fixed;
    top: 0;
    left: -9999px;
    width: 1px;
    visibility: hidden;
    pointer-events: none;
}

.mobile-nav-viewport-probe-dvh {
    height: 100dvh;
}

.mobile-nav-viewport-probe-lvh {
    height: 100lvh;
}

.mobile-nav-viewport-probe-vh {
    height: 100vh;
}

body.nav-diagnostics-enabled .mobile-shell-content {
    outline: 1px solid rgba(103, 174, 255, .9);
    outline-offset: -1px;
}

body.nav-diagnostics-enabled .mobile-bottom-nav {
    outline: 1px solid rgba(255, 99, 99, .95);
    outline-offset: -1px;
}

body.nav-diagnostics-enabled .mobile-bottom-nav-list {
    outline: 1px solid rgba(244, 210, 118, .95);
    outline-offset: -1px;
}

.admin-shell {
    position: relative;
    z-index: 2;
    width: min(960px, 100%);
    min-height: 100svh;
    margin: 0 auto;
    padding: 1.4rem 1.15rem 2rem;
}

.desktop-account-controls {
    position: fixed;
    top: 1rem;
    right: max(1rem, calc((100vw - 960px) / 2 + 1rem));
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .55rem .85rem;
    border: 1px solid rgba(143, 118, 82, .22);
    background:
        linear-gradient(rgba(24, 17, 17, .92), rgba(8, 8, 8, .96)),
        rgba(8, 8, 8, .94);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    z-index: 10;
}

.desktop-account-name {
    color: #f4ead7;
    font-size: .95rem;
}

.desktop-account-link,
.desktop-account-logout {
    color: #d0b891;
}

.admin-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.admin-kicker,
.admin-phase {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .82rem;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.admin-phase {
    margin-top: .5rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.admin-panel {
    min-height: 140px;
    padding: 1rem;
    border: 1px solid rgba(143, 118, 82, .42);
    background: rgba(9, 9, 9, .58);
}

.admin-panel h2 {
    margin-bottom: .75rem;
    color: #b79b73;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.admin-panel p {
    font-size: 1.08rem;
    line-height: 1.25;
}

.admin-panel p + p {
    margin-top: .5rem;
}

.platform-support-diagnostics {
    display: grid;
    gap: .45rem;
    font-size: .95rem;
}

.platform-support-diagnostics div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
}

.platform-support-diagnostics dt {
    color: var(--ui-neutral);
    text-transform: capitalize;
}

.platform-support-diagnostics dd {
    color: var(--ui-heading);
    overflow-wrap: anywhere;
    text-align: right;
}

.support-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .45rem .75rem;
    border-bottom: 1px solid rgba(124, 23, 23, .75);
    background: rgba(24, 9, 10, .96);
    color: var(--ui-heading);
    font-size: .85rem;
    text-align: center;
}

.support-mode-banner form {
    display: inline;
}

.support-mode-banner .text-button {
    color: var(--ui-heading);
}

html.mobile-app-document .support-mode-banner {
    top: auto;
    bottom: var(--mobile-shell-nav-clearance);
}

.admin-link {
    color: #d0b891;
    text-decoration: none;
}

.admin-list-panel {
    padding: 1rem;
    border: 1px solid rgba(143, 118, 82, .42);
    background: rgba(9, 9, 9, .62);
}

.admin-list-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .85rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: .72rem .55rem;
    border-bottom: 1px solid rgba(143, 118, 82, .24);
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    color: #b79b73;
    font-family: var(--font-title);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06rem;
    text-transform: uppercase;
}

.admin-table td {
    font-size: 1.04rem;
    line-height: 1.22;
}

.admin-table-action {
    text-align: right;
}

.admin-delete-button {
    min-height: 32px;
    padding: .38rem .55rem;
}

.admin-empty-state {
    color: rgba(180, 162, 139, .82);
    text-align: center;
}

.admin-form-panel {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(143, 118, 82, .42);
    background: rgba(9, 9, 9, .62);
}

.admin-form-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.admin-form-field > span:first-child {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .76rem;
    letter-spacing: .06rem;
    text-transform: uppercase;
}

.admin-form-field input,
.admin-form-field select {
    width: 100%;
    min-height: 44px;
    padding: .6rem .7rem;
    border: 1px solid rgba(143, 118, 82, .5);
    color: var(--text);
    font: inherit;
    background: rgba(0, 0, 0, .3);
}

.admin-form-field select {
    color: #d0b891;
    background: #2c2929;
}

.admin-form-field option {
    color: #d0b891;
    background: #2c2929;
}

.admin-form-error {
    min-height: 1.3rem;
    color: #d0b891;
    font-size: 1.04rem;
    text-align: center;
}

.invite-shell {
    gap: 1rem;
}

.invite-form-panel {
    margin: 0 auto;
}

.join-invitation-panel,
.join-invalid-panel {
    width: min(42rem, 100%);
    margin: 0 auto;
}

.join-invitation-panel h2 {
    margin: 0;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: clamp(1.35rem, 4vw, 1.6rem);
    font-weight: 500;
}

.join-kicker {
    letter-spacing: .1rem;
    text-transform: uppercase;
}

.join-offer {
    color: rgba(200, 195, 189, .94);
    font-size: 1.05rem;
}

.join-form-panel {
    margin-top: .25rem;
    text-align: left;
}

.join-mobile-content {
    padding-top: var(--mobile-shell-content-padding-top);
    padding-bottom: 2rem;
}

.invite-checkbox-field {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #f4ead7;
    font-size: 1.02rem;
}

.invite-checkbox-field[hidden] {
    display: none;
}

.invite-checkbox-field input {
    width: 1rem;
    height: 1rem;
    accent-color: #7a2d2d;
}

.invite-checkbox-field--stacked {
    margin-top: -.1rem;
    justify-content: flex-start;
}

.invite-result-panel {
    margin: 0 auto;
}

.invite-result-kicker,
.invite-result-meta {
    color: var(--gold);
    font-family: var(--font-title);
    letter-spacing: .06rem;
    text-transform: uppercase;
}

.invite-result-kicker {
    font-size: .78rem;
}

.invite-result-meta {
    margin-top: .45rem;
    font-size: .76rem;
}

.invite-result-url-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
}

.invite-result-url {
    display: block;
    flex: 1 1 18rem;
    max-width: 100%;
    padding: .75rem .9rem;
    border: 1px solid rgba(143, 118, 82, .28);
    color: #f4ead7;
    word-break: break-all;
    background: rgba(0, 0, 0, .34);
}

.invite-copy-button {
    color: #d0b891;
}

.invite-copy-feedback {
    min-height: 1.2rem;
    color: #d0b891;
}

.open-invitations {
    margin: 0 auto;
}

.open-invitations-header {
    display: grid;
    justify-items: center;
    gap: .25rem;
    margin-bottom: .25rem;
    text-align: center;
}

.open-invitations-header h2,
.open-invitation-item h3 {
    margin: 0;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-weight: 500;
}

.open-invitations-list {
    display: grid;
    gap: .75rem;
}

.open-invitation-item,
.open-invitations-empty {
    text-align: center;
}

.open-invitations-empty {
    display: grid;
    place-items: center;
    min-height: 7rem;
}

.mobile-shell-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: var(--mobile-document-min-height);
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
}

html.mobile-app-document,
html.mobile-app-document body {
    display: block;
    height: auto;
    min-height: var(--mobile-document-min-height);
    overflow-x: clip;
    overflow-y: visible;
}

html.mobile-app-document.mobile-viewport-height-dvh {
    --mobile-document-min-height: 100dvh;
}

html.mobile-app-document.mobile-viewport-height-lvh {
    --mobile-document-min-height: 100lvh;
}

html.mobile-app-document.mobile-viewport-height-vh {
    --mobile-document-min-height: 100vh;
}

html.application-document,
html.application-document body {
    display: block;
    height: auto;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

html.application-document body {
    min-height: var(--mobile-document-min-height);
}

.category-shell {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    min-height: 100svh;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

body.category-page .mobile-shell-content.category-shell {
    padding-top: var(--mobile-shell-content-padding-top);
}

.page-title {
    display: grid;
    justify-items: center;
    gap: .45rem;
    margin: .45rem auto 0.5rem;
    color: var(--gold);
    text-align: center;
}

.page-title__row {
    display: grid;
    grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
    align-items: center;
    width: min(100%, 42rem);
    gap: .6rem;
}

.page-title__heading {
    margin: 0;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: clamp(1.65rem, 6vw, 2.12rem);
    font-variant-caps: small-caps;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.08;
}

.page-title__icon {
    display: block;
    justify-self: end;
    width: clamp(1.5rem, 5.8vw, 1.85rem);
    aspect-ratio: 1;
    background-color: var(--accent);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .72));
    mask-image: var(--page-title-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--page-title-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.page-title__icon:last-child {
    justify-self: start;
}

.page-title__divider {
    display: block;
    width: min(95%, 30rem);
    height: 0.8px;
    background: var(--gold);
    mask-image: radial-gradient(ellipse 30% 180% at center, #000 0 15%, rgba(0, 0, 0, .8) 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 30% 180% at center, #000 0 15%, rgba(0, 0, 0, .8) 20%, transparent 100%);
}

.page-title__subtitle {
    max-width: 34rem;
    margin: 0;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: clamp(.96rem, 3.8vw, 1.08rem);
    line-height: 1.35;
}

.onboarding-shell {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.onboarding-shell--compact {
    width: min(100%, 42rem);
    margin: 0 auto;
}

.onboarding-form,
.onboarding-card,
.open-invitations {
    width: min(100%, 42rem);
}

.onboarding-card {
    position: relative;
    display: grid;
    gap: .65rem;
    padding: 1.4rem 1.25rem;
    border-radius: .5rem;
    isolation: isolate;
    overflow: hidden;
    background:
        url("images/panels/dark-ritual-slate-seamless-2048.png") center / 512px 512px repeat,
        rgba(9, 9, 9, .62);
}

.onboarding-card::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 24px solid transparent;
    border-image-source: url("images/frames/bronze-inlay-overlay-2048x3072.png");
    border-image-slice: 256;
    border-image-width: 24px;
    border-image-repeat: stretch;
    content: "";
    pointer-events: none;
}

.onboarding-card > * {
    position: relative;
    z-index: 1;
}

.onboarding-card--center {
    justify-items: center;
    text-align: center;
}

.onboarding-card__kicker {
    margin: 0;
    color: var(--accent);
    font-family: var(--font-title);
    font-size: .82rem;
    font-variant-caps: small-caps;
    letter-spacing: .08em;
}

.onboarding-card__body,
.onboarding-card__meta {
    margin: 0;
}

.onboarding-card__body {
    color: var(--ui-heading);
    line-height: 1.38;
}

.onboarding-card__meta {
    color: var(--ui-neutral);
}

.onboarding-card__copy-row {
    width: 100%;
}

.orientation-shell {
    max-width: 48rem;
}

.orientation-welcome {
    display: grid;
    gap: 1rem;
    width: min(100%, 42rem);
    margin: 0 auto;
    padding: 1.15rem 1.2rem 1.3rem;
    border: 1px solid rgba(143, 118, 82, .22);
    border-radius: .5rem;
    background: rgba(9, 9, 9, .48);
}

.orientation-welcome__intro,
.orientation-ritual p {
    margin: 0;
    color: var(--ui-neutral);
    line-height: 1.45;
    text-align: center;
}

.orientation-welcome__intro {
    color: var(--ui-heading);
}

.orientation-ritual {
    display: grid;
    gap: .35rem;
}

.orientation-ritual__heading {
    margin: 0;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: 1.08rem;
    font-variant-caps: small-caps;
    font-weight: 500;
    letter-spacing: .05em;
    text-align: center;
}

.orientation-ritual-divider {
    display: block;
    width: 82%;
    height: 1px;
    margin: 0 auto;
    background: var(--ui-neutral);
    mask-image: radial-gradient(ellipse 42% 180% at center, #000 0 18%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 42% 180% at center, #000 0 18%, transparent 100%);
    opacity: .5;
}

.orientation-welcome__actions {
    display: flex;
    justify-content: center;
    margin-top: .25rem;
}

.onboarding-form__notice {
    min-height: 0;
    margin: 0;
    color: var(--ui-neutral);
    font-size: .98rem;
    text-align: center;
}

.onboarding-form__notice:empty {
    display: none;
}

.category-header {
    margin-bottom: 1.25rem;
    text-align: center;
}

.category-count {
    margin-top: .45rem;
    color: var(--gold);
    font-size: 1.08rem;
}

.category-submission-tracker {
    position: relative;
    display: grid;
    place-items: center;
    width: min(70%, 32rem);
    aspect-ratio: 1640 / 400;
    margin: 0 auto;
    padding: 0% 1.5%;
    text-align: center;
    isolation: isolate;
}

.category-submission-tracker::before,
.category-add-control::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    z-index: 0;
}

.category-submission-tracker::before {
    background-color: var(--accent);
    mask-image: url("images/frames/engraved/frame-engraved-400.png");
    -webkit-mask-image: url("images/frames/engraved/frame-engraved-400.png");
}

.category-submission-tracker-content,
.category-add-control-content {
    position: relative;
    z-index: 1;
}

.category-submission-tracker-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.35rem, 1.8vw, .7rem);
    width: 100%;
    max-width: 100%;
}

.category-submission-tracker-pentagram {
    display: block;
    flex: 0 0 auto;
    width: clamp(2.95rem, 12.6vw, 3.825rem);
    aspect-ratio: 1;
    object-fit: contain;
}

.category-submission-tracker-copy {
    display: grid;
    flex: 0 1 auto;
    gap: .08rem;
    min-width: 0;
    text-align: left
}

.category-submission-tracker-heading {
    color: var(--accent);
    font-family: var(--font-title);
    font-size: clamp(1.18rem, 4.4vw, 1.35rem);
    font-variant-caps: small-caps;
    letter-spacing: .08em;
}

.category-submission-tracker-count {
    color: var(--ui-neutral);
    font-size: clamp(.9rem, 3.2vw, 1.12rem);
    line-height: 1.25;
}

.category-workspace {
    display: flex;
    flex-direction: column;
    margin: 0.75rem auto;
    gap: 0.75rem;
}
/*
.category-shell > .page-title + .category-workspace {
    margin-top: -.225rem;
}
*/
.category-instructions {
    margin: 0;
    color: var(--ui-neutral);
    font-family: var(--font-body);
    line-height: 1.35;
    text-align: center;
}

.category-diagnostic-panel {
    display: grid;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid rgba(103, 174, 255, .7);
    color: var(--ui-neutral);
    background: rgba(4, 10, 24, .86);
}

.category-diagnostic-panel summary {
    color: #a7c8ff;
    cursor: pointer;
    font-family: var(--font-title);
}

.category-diagnostic-panel p {
    line-height: 1.3;
}

.category-diagnostic-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.category-diagnostic-report {
    width: 100%;
    min-height: 15rem;
    max-height: 24rem;
    resize: vertical;
    border: 1px solid rgba(103, 174, 255, .5);
    padding: .55rem;
    color: #d8e6ff;
    background: rgba(0, 0, 0, .58);
    font: 12px/1.3 ui-monospace, "Cascadia Mono", monospace;
}

.category-actions {
    display: flex;
    justify-content: center;
}

.category-submission-tracker + .category-actions {
    margin-top: 0rem;
}

.category-add-control {
    position: relative;
    display: grid;
    place-items: center;
    width: min(70%, 30rem);
    aspect-ratio: 1728 / 240;
    border: 0;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: clamp(.95rem, 3.2vw, 1.17rem);
    font-variant-caps: small-caps;
    letter-spacing: .08em;
    background: url("images/panels/stone/panel-stone-145h-A.png") center / cover no-repeat;
    box-shadow: none;
    isolation: isolate;
}

.category-add-control-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.3rem, 1.5vw, .6rem);
    max-width: 100%;
}

.category-add-control-quill {
    display: block;
    flex: 0 0 auto;
    width: clamp(1.6rem, 6vw, 2rem);
    aspect-ratio: 1;
    background-color: var(--gold);
    mask-image: url("icons/raster/icon-quill-72.png");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("icons/raster/icon-quill-72.png");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.category-add-control-label {
    min-width: 0;
}

.category-add-control::after {
    background-color: var(--gold);
    mask-image: url("images/frames/engraved/frame-engraved-240.png");
    -webkit-mask-image: url("images/frames/engraved/frame-engraved-240.png");
}

.category-add-control:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.category-rankings-heading {
    display: grid;
    grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
    align-items: center;
    gap: clamp(.55rem, 2.5vw, 1rem);
    margin: 0.8rem 0 .2rem;
}

.category-rankings-heading__text {
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: clamp(1.1rem, 3.8vw, 1.2rem);
    font-variant-caps: small-caps;
    letter-spacing: .07em;
    white-space: nowrap;
}

.category-rankings-heading__line {
    height: 1px;
    background: var(--gold);
}

/* Strongest beside the title; softly fades toward the outer margins. */
.category-rankings-heading__line:first-child {
    -webkit-mask-image: radial-gradient(
        ellipse 100% 220% at 100% 50%,
        #000 0 35%,
        rgba(0, 0, 0, .75) 60%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 100% 220% at 100% 50%,
        #000 0 35%,
        rgba(0, 0, 0, .75) 60%,
        transparent 100%
    );
}

.category-rankings-heading__line:last-child {
    -webkit-mask-image: radial-gradient(
        ellipse 100% 220% at 0% 50%,
        #000 0 35%,
        rgba(0, 0, 0, .75) 60%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 100% 220% at 0% 50%,
        #000 0 35%,
        rgba(0, 0, 0, .75) 60%,
        transparent 100%
    );
}

.hex-button,
.text-button {
    border: 1px solid rgba(143, 118, 82, .62);
    color: #d0b891;
    font-family: var(--font-title);
    letter-spacing: .06rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background: rgba(9, 9, 9, .72);
}

.hex-button {
    min-height: 44px;
    padding: .72rem 1rem;
    font-size: .78rem;
}

.hex-button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.text-button {
    min-height: 38px;
    padding: .5rem .75rem;
    font-size: .72rem;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    list-style: none;
}

.category-card {
    border: 0;
    background: transparent;
    transition:
        background-color .16s ease,
        border-color .16s ease;
}

.category-item:nth-child(5n + 1) .category-row {
    --category-panel-stone: url("/static/images/panels/stone/panel-stone-145h-A.png");
}

.category-item:nth-child(5n + 2) .category-row {
    --category-panel-stone: url("/static/images/panels/stone/panel-stone-145h-B.png");
}

.category-item:nth-child(5n + 3) .category-row {
    --category-panel-stone: url("/static/images/panels/stone/panel-stone-145h-C.png");
}

.category-item:nth-child(5n + 4) .category-row {
    --category-panel-stone: url("/static/images/panels/stone/panel-stone-145h-D.png");
}

.category-item:nth-child(5n + 5) .category-row {
    --category-panel-stone: url("/static/images/panels/stone/panel-stone-145h-E.png");
}

.category-item.is-dragging .category-card {
    opacity: .78;
}

.rank-pointer-ghost {
    position: fixed;
    z-index: 100;
    margin: 0;
    pointer-events: none;
    opacity: .82;
    transform: scale(1.02);
    transform-origin: top left;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .42);
}

.category-row {
    display: grid;
    grid-template-columns: 11% 7% 60% 11% 11%;
    aspect-ratio: 1234 / 146;
    width: 100%;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
    background-image: var(--category-panel-stone);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.category-row > * {
    min-width: 0;
    width: 100%;
}

.drag-handle,
.category-toggle,
.category-move {
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 0;
}

.category-rank {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0;
    color: var(--ui-neutral);
    font-family: var(--font-title);
    font-size: .95rem;
    line-height: 1;
    opacity: 1;
    transition: opacity .16s ease;
}

.category-item.is-below-cutoff .category-rank {
    opacity: .46;
}

.drag-handle {
    position: relative;
    border-right: 0;
    color: var(--ui-neutral);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans Symbols 2", "Apple Symbols", "Arial Unicode MS", "Segoe UI Symbol", system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.drag-handle-glyph {
    position: absolute;
    opacity: 0;
}

/* Some system symbol fonts omit U+2E3D; retain it in the markup and show a six-pip Unicode fallback. */
.drag-handle-fallback {
    font-family: "Noto Sans Symbols 2", "Apple Symbols", "Segoe UI Symbol", system-ui, sans-serif;
}

.category-move {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-neutral);
    min-height: 100%;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    font-family: "Noto Sans Symbols 2", "Apple Symbols", "Arial Unicode MS", "Segoe UI Symbol", system-ui, sans-serif;
    font-size: 1.2rem;
    line-height: 1;
}

.category-move-up {
    position: relative;
}

.category-toggle {
    position: relative;
    border-right: 0;
    color: var(--ui-neutral);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 .75rem;
    text-align: left;
}

.category-item.is-selected-rank .category-rank {
    color: var(--gold);
}

.category-item.is-selected-rank .drag-handle,
.category-item.is-selected-rank .category-move {
    color: var(--accent);
}

.category-item.is-selected-rank .category-toggle {
    color: var(--ui-heading);
}

.category-rank::after,
.drag-handle::after,
.category-toggle::after,
.category-move-up::after {
    position: absolute;
    top: 4px;
    right: 0;
    bottom: 7px;
    width: 1px;
    background: #261f19;
    content: "";
    pointer-events: none;
}

html.rank-pointer-dragging,
html.rank-pointer-dragging body {
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
}

.category-toggle {
    min-width: 0;
    padding: .85rem .9rem;
    text-align: left;
    font-family: var(--font-title);
    font-size: .94rem;
    line-height: 1.2;
}

.category-toggle span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-description {
    padding: 0 .9rem .95rem 84px;
}

.category-description p {
    font-size: 1.08rem;
    line-height: 1.28;
}

.category-card-actions {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin-top: .8rem;
}

.category-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .9rem;
    border: 1px solid rgba(143, 118, 82, .42);
    background: rgba(9, 9, 9, .62);
}

.category-form[hidden] {
    display: none;
}

.edit-category-form {
    margin-top: .9rem;
}

.category-form label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.category-form span,
.category-submitter {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .76rem;
    letter-spacing: .06rem;
    text-transform: uppercase;
}

.category-form input,
.category-form textarea {
    width: 100%;
    border: 1px solid rgba(143, 118, 82, .5);
    color: var(--text);
    font: inherit;
    background: rgba(0, 0, 0, .3);
}

.category-form input {
    min-height: 42px;
    padding: .55rem .65rem;
}

.category-form textarea {
    min-height: 110px;
    padding: .65rem;
    resize: vertical;
}

.chalk-form {
    display: grid;
    position: relative;
    gap: .7rem;
    border: 0;
    border-radius: .5rem;
    padding: 1.75rem 1.5rem;
    isolation: isolate;
    overflow: hidden;
    background:
        url("images/panels/dark-ritual-slate-seamless-2048.png") center / 512px 512px repeat,
        rgba(9, 9, 9, .62);
}

.chalk-form::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 24px solid transparent;
    border-image-source: url("images/frames/bronze-inlay-overlay-2048x3072.png");
    border-image-slice: 256;
    border-image-width: 24px;
    border-image-repeat: stretch;
    content: "";
    pointer-events: none;
}

.chalk-form > * {
    position: relative;
    z-index: 1;
}

.chalk-form__header {
    display: grid;
    justify-items: center;
    gap: .35rem;
}

.chalk-form__title {
    margin: 0;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-variant-caps: small-caps;
    font-weight: var(--font-content-weight);
    letter-spacing: .06em;
    line-height: 1;
    /*mask-image: url("textures/texture-chalk-512.png");
    mask-mode: alpha;
    mask-position: 96px 64px;
    mask-repeat: repeat;
    mask-size: 512px 512px;
    -webkit-mask-image: url("textures/texture-chalk-512.png");
    -webkit-mask-position: 96px 64px;
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: 512px 512px;*/
}

.chalk-form__divider {
    position: relative;
    display: block;
    width: min(100%, 30rem);
    height: 2px;
    mask-image: radial-gradient(ellipse 30% 180% at center, #000 0 15%, rgba(0, 0, 0, .8) 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 30% 180% at center, #000 0 15%, rgba(0, 0, 0, .8) 20%, transparent 100%);
}

.chalk-form__divider::before {
    position: absolute;
    inset: 0;
    content: "";
    background-color: var(--ui-heading);
    mask-image: url("textures/texture-chalk-512.png");
    mask-mode: alpha;
    mask-position: 192px 128px;
    mask-repeat: repeat;
    mask-size: 512px 512px;
    -webkit-mask-image: url("textures/texture-chalk-512.png");
    -webkit-mask-position: 192px 128px;
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: 512px 512px;
}

.chalk-form .chalk-form__field {
    display: grid;
    gap: .35rem;
}

.chalk-form__control {
    --chalk-ring-color: var(--gold);
    position: relative;
    display: block;
    border-radius: .25rem;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    background-color: rgba(9, 9, 9, .82);
    overflow: hidden;
}

.chalk-form__control::before,
.chalk-form__button::before {
    position: absolute;
    inset: 0;
    border: 2px solid var(--chalk-ring-color);
    border-radius: inherit;
    content: "";
    pointer-events: none;
    mask-image: url("textures/texture-chalk-512.png");
    mask-mode: alpha;
    mask-repeat: repeat;
    mask-size: 512px 512px;
    -webkit-mask-image: url("textures/texture-chalk-512.png");
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: 512px 512px;
}

.chalk-form__control::before {
    mask-position: 320px 160px;
    -webkit-mask-position: 320px 160px;
}

.chalk-form__button::before {
    mask-position: 448px 256px;
    -webkit-mask-position: 448px 256px;
}

.chalk-form__field:focus-within .chalk-form__control {
    --chalk-ring-color: var(--focus);
    box-shadow: 0 0 0 2px rgba(147, 40, 19, .32);
}

.chalk-form__control input,
.chalk-form__control textarea,
.chalk-form__control select {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text);
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    background: transparent;
    border-radius: inherit;
}

.chalk-form__control input:focus-visible,
.chalk-form__control textarea:focus-visible,
.chalk-form__control select:focus-visible {
    outline: 1px solid var(--focus);
    outline-offset: -3px;
}

.chalk-form__actions {
    display: flex;
    justify-content: center;
    margin-top: .1rem;
}

.chalk-form__sigil {
    display: block;
    justify-self: end;
    width: auto;
    max-width: 100%;
    height: 5rem;
    margin: .1rem -2rem -1rem 0;
    object-fit: contain;
}

.chalk-form__button {
    --chalk-ring-color: var(--accent);
    position: relative;
    min-height: 2.7rem;
    border: 0;
    border-radius: .25rem;
    padding: .55rem 1.2rem;
    color: var(--accent);
    font-family: var(--font-title);
    font-size: .98rem;
    font-variant-caps: small-caps;
    letter-spacing: .07em;
    background-color: rgba(9, 9, 9, .82);
    overflow: hidden;
}

.chalk-form__button:focus-visible {
    outline: 1px solid var(--focus);
    outline-offset: 2px;
}

.category-submitter {
    margin-top: .7rem;
}

.save-button {
    width: 100%;
}

.category-workspace > form[data-ranking-form] {
    display: grid;
    justify-items: center;
    gap: .7rem;
}

.category-save-ranking-control {
    display: grid;
    width: min(90%, 38rem);
    aspect-ratio: 3276 / 390;
    place-items: center;
    border: 0;
    padding: 0;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: clamp(1rem, 3.4vw, 1.12rem);
    font-variant-caps: small-caps;
    letter-spacing: .08em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .78);
    background: url("images/buttons/button-oxblood-380.png") center / contain no-repeat;
    box-shadow: none;
}

.category-save-ranking-control:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: .2rem;
}

.category-save-ranking-control:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.save-message {
    min-height: 1.5rem;
    color: #b79b73;
    font-size: 1.08rem;
    text-align: center;
}

.save-message[data-save-message]:empty {
    display: none;
}

.category-ranking-memo {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 1640 / 400;
    place-items: center;
    margin: 0rem auto 0;
    padding: 3% 8%;
    isolation: isolate;
}

.category-ranking-memo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--ui-neutral);
    mask-image: url("images/frames/engraved/frame-engraved-400.png");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("images/frames/engraved/frame-engraved-400.png");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.category-ranking-memo-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: clamp(3.2rem, 20vw, 4.75rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.75rem, 12vw, 1.25rem);
    width: min(100%, 28rem);
}

.category-ranking-memo-seal {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.category-ranking-memo-copy {
    min-width: 0;
    text-align: left;
}

.category-ranking-memo-copy h2,
.category-ranking-memo-copy p {
    margin: 0;
}

.category-ranking-memo-copy h2 {
    color: var(--accent);
    font-family: var(--font-title);
    font-size: clamp(1.1rem, 4.9vw, 1.5rem);
    font-variant-caps: small-caps;
    letter-spacing: .08em;
}

.category-ranking-memo-copy p {
    margin-top: .12rem;
    color: var(--ui-heading);
    font-family: var(--font-body);
    font-size: clamp(.88rem, 3.1vw, 1.04rem);
    line-height: 1.3;
}

.movie-shell {
    position: relative;
    z-index: 2;
    width: min(610px, 100%);
    min-height: 100svh;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.movie-header {
    margin-bottom: 1.25rem;
    text-align: center;
}

.movie-context {
    margin-top: .45rem;
    color: var(--gold);
    font-size: 1.08rem;
}

.movie-search-shell {
    width: min(560px, 100%);
}

.movie-workspace {
    display: flex;
    flex-direction: column;
}

.movie-member-panel {
    border: 1px solid rgba(143, 118, 82, .42);
    background: rgba(9, 9, 9, .62);
}

.movie-member-header {
    padding: .85rem .9rem;
    border-bottom: 1px solid rgba(143, 118, 82, .26);
}

.movie-member-header h2 {
    color: #b79b73;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.movie-category-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: .9rem;
    list-style: none;
}

.movie-category-item {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid rgba(143, 118, 82, .26);
    background: rgba(10, 9, 9, .7);
}

.movie-category-item.is-hall-of-fame {
    background: #210d0d;
}

.movie-category-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .42rem;
    text-align: center;
}

.movie-category-rank {
    color: #d0b891;
    font-family: var(--font-title);
    font-size: .92rem;
    line-height: 1;
}

.movie-category-title {
    color: var(--text);
    font-family: var(--font-title);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.movie-category-description {
    max-width: 28rem;
    color: rgba(180, 162, 139, .86);
    font-size: .98rem;
    line-height: 1.22;
}

.movie-slot {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.movie-select-button {
    width: 100%;
}

.movie-remove-button {
    width: 100%;
}

.movie-controls {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.movie-poster-frame {
    width: 100%;
    border: 1px solid rgba(143, 118, 82, .5);
    background:
        linear-gradient(rgba(33, 13, 13, .22), rgba(10, 9, 9, .94)),
        rgba(0, 0, 0, .28);
    padding: .7rem;
}

.movie-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 208px;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(143, 118, 82, .35);
    background:
        linear-gradient(rgba(33, 13, 13, .84), rgba(10, 9, 9, .94)),
        #210d0d;
}

.movie-poster-placeholder.is-empty {
    background:
        linear-gradient(rgba(10, 9, 9, .58), rgba(10, 9, 9, .96)),
        rgba(0, 0, 0, .18);
}

.movie-poster-placeholder span {
    color: rgba(208, 184, 145, .72);
    font-family: var(--font-title);
    font-size: 1rem;
    letter-spacing: .12rem;
}

.movie-poster-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movie-selected-title {
    margin-top: .6rem;
    color: #d0b891;
    font-size: 1.06rem;
    line-height: 1.18;
    text-align: center;
}

html.mobile-app-document .movie-member-panel {
    border: 0;
    background: transparent;
}

html.mobile-app-document .movie-category-list {
    gap: 0;
    padding: 0;
}

html.mobile-app-document .movie-category-item {
    display: grid;
    grid-template-columns: minmax(4.25rem, 24%) minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
    min-height: 9.5rem;
    padding: 1rem .2rem;
    border: 0;
    background: transparent;
}

html.mobile-app-document .movie-category-item.is-hall-of-fame {
    background: transparent;
}

html.mobile-app-document .movie-category-item + .movie-category-item {
    position: relative;
    margin-top: .35rem;
    padding-top: 1.35rem;
}

html.mobile-app-document .movie-category-item + .movie-category-item::before {
    position: absolute;
    top: 0;
    right: 6%;
    left: 6%;
    height: 1px;
    background: var(--ui-neutral);
    content: "";
    mask-image: radial-gradient(ellipse 42% 180% at center, #000 0 18%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 42% 180% at center, #000 0 18%, transparent 100%);
    opacity: .5;
}

html.mobile-app-document .movie-category-emblem-stack {
    position: relative;
    display: block;
    width: min(100%, 5.75rem);
    aspect-ratio: 1;
    justify-self: center;
}

html.mobile-app-document .movie-category-triquetra {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

html.mobile-app-document .movie-category-emblem-stack.is-bound .movie-category-triquetra {
    inset: -9%;
    width: 118%;
    height: 118%;
}

html.mobile-app-document .movie-category-emblem {
    position: relative;
    display: block;
    position: absolute;
    inset: 0;
    border: 3px rgba(155, 150, 145, .4);
    border-style: groove ridge ridge groove;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25, 25, 25, .92), rgba(5, 5, 5, .98));
    box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .52), inset 0 0 .42rem rgba(0, 0, 0, .58);
    transform: rotate(var(--movie-medallion-tilt, 0deg));
}

html.mobile-app-document .movie-category-emblem-aperture {
    position: absolute;
    inset: 0rem;
    z-index: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #080808;
}

html.mobile-app-document .movie-category-emblem-outer-edge {
    position: absolute;
    inset: -.02rem;
    z-index: 0;
    border: 1px solid rgba(155, 150, 145, .32);
    border-radius: 50%;
    filter: blur(.45px);
    pointer-events: none;
}

html.mobile-app-document .movie-category-emblem-aperture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) contrast(1.35) brightness(.62);
}

html.mobile-app-document .movie-category-emblem-aperture .movie-category-emblem-highlight {
    position: absolute;
    inset: 0;
    opacity: .22;
    mix-blend-mode: screen;
    pointer-events: none;
}

html.mobile-app-document .movie-category-emblem-aperture .movie-category-emblem-relief-highlight,
html.mobile-app-document .movie-category-emblem-aperture .movie-category-emblem-relief-shadow {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .1;
    filter: grayscale(1) contrast(1.35) brightness(.62) blur(.55px);
    pointer-events: none;
}

html.mobile-app-document .movie-category-emblem-aperture .movie-category-emblem-relief-highlight {
    transform: translate(-.65px, -.65px);
    mix-blend-mode: screen;
}

html.mobile-app-document .movie-category-emblem-aperture .movie-category-emblem-relief-shadow {
    opacity: .16;
    transform: translate(.65px, .65px);
    mix-blend-mode: multiply;
}

html.mobile-app-document .movie-category-emblem.has-poster::before {
    position: absolute;
    inset: 0rem;
    z-index: 1;
    border: 1px solid rgba(124, 23, 23, .2);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

html.mobile-app-document .movie-category-emblem-aperture::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 
        inset -.1em .15em .1em rgba(0, 0, 0, .6), 
        inset .1em -.1em .1em rgba(0, 0, 0, .6);
    content: "";
    pointer-events: none;
}

html.mobile-app-document .movie-category-emblem-aperture::after {
    position: absolute;
    inset: 0;
    background: rgba(90, 12, 18, .48);
    mix-blend-mode: multiply;
    content: "";
    pointer-events: none;
}

html.mobile-app-document .movie-category-content {
    display: grid;
    gap: .42rem;
    min-width: 0;
}

html.mobile-app-document .movie-category-title {
    color: var(--gold);
    font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    font-variant-caps: small-caps;
    text-align: left;
}

html.mobile-app-document .movie-category-description {
    color: var(--ui-neutral);
    font-size: .88rem;
    line-height: 1.32;
    text-align: left;
}

html.mobile-app-document .movie-selected-title {
    margin: 0;
    color: var(--ui-heading);
    font-size: .96rem;
    text-align: left;
}

html.mobile-app-document .movie-offering-button {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--accent);
    border-right: 0;
    border-bottom: 1px solid var(--accent);
    border-left: 0;
    border-radius: 0;
    padding: .42rem .7rem;
    color: var(--ui-neutral);
    font-size: .9rem;
    text-decoration: none;
    text-align: center;
    font-variant-caps: small-caps;
    background: rgba(33, 13, 13, .2);
}

.movie-search-panel {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(143, 118, 82, .42);
    background: rgba(9, 9, 9, .62);
}

html.mobile-app-document .movie-search-panel {
    border: 0;
}

html.mobile-app-document .movie-search-category-header {
    border-bottom: 0;
}

.movie-search-category-header {
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(143, 118, 82, .22);
}

.movie-search-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.movie-search-field > .movie-search-label {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .76rem;
    letter-spacing: .06rem;
    text-transform: uppercase;
}

html.mobile-app-document .movie-search-control {
    min-height: 44px;
}

html.mobile-app-document .movie-search-icon {
    position: absolute;
    top: 50%;
    left: .85rem;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    background-color: var(--ui-neutral);
    mask-image: image-set(
        url("icons/raster/search-magnifying-glass-24.png") 1x,
        url("icons/raster/search-magnifying-glass-48.png") 2x,
        url("icons/raster/search-magnifying-glass-72.png") 3x
    );
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: image-set(
        url("icons/raster/search-magnifying-glass-24.png") 1x,
        url("icons/raster/search-magnifying-glass-48.png") 2x,
        url("icons/raster/search-magnifying-glass-72.png") 3x
    );
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transform: translateY(-58%);
    pointer-events: none;
}

html.mobile-app-document .movie-search-clear {
    position: absolute;
    top: 50%;
    right: .75rem;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background-color: var(--ui-neutral);
    mask-image: image-set(
        url("icons/raster/input-clear-circle-x-24.png") 1x,
        url("icons/raster/input-clear-circle-x-48.png") 2x,
        url("icons/raster/input-clear-circle-x-72.png") 3x
    );
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: image-set(
        url("icons/raster/input-clear-circle-x-24.png") 1x,
        url("icons/raster/input-clear-circle-x-48.png") 2x,
        url("icons/raster/input-clear-circle-x-72.png") 3x
    );
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transform: translateY(-50%);
}

html.mobile-app-document .movie-search-clear:focus-visible {
    outline: 1px solid var(--focus);
    outline-offset: 3px;
}

html.mobile-app-document .movie-offering-button::before {
    border-top: 2px solid var(--chalk-ring-color);
    border-right: 0;
    border-bottom: 2px solid var(--chalk-ring-color);
    border-left: 0;
    border-radius: 0;
}

.movie-search-field input {
    width: 100%;
    min-height: 44px;
    padding: .6rem .7rem;
    border: 1px solid rgba(143, 118, 82, .5);
    color: var(--text);
    font: inherit;
    background: rgba(0, 0, 0, .3);
}

html.mobile-app-document .movie-search-field input {
    min-height: 44px;
    padding-left: 2.45rem;
    padding-right: 2.45rem;
    border: 0;
    background: transparent;
}

html.mobile-app-document .movie-search-field input::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

html.mobile-app-document .movie-search-field input::-ms-clear {
    display: none;
}

html.mobile-app-document .movie-search-status:empty {
    min-height: 0;
    margin: 0;
}

.movie-search-status,
.movie-search-selection {
    min-height: 1.3rem;
    color: rgba(180, 162, 139, .88);
    font-size: 1.02rem;
    text-align: center;
}

.movie-search-selection {
    color: #d0b891;
}

.movie-search-results {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    list-style: none;
}

.movie-search-result {
    width: 100%;
    min-height: 42px;
    padding: .62rem .75rem;
    border: 1px solid rgba(143, 118, 82, .42);
    color: var(--text);
    font: inherit;
    text-align: left;
    background: rgba(10, 9, 9, .74);
}

.movie-search-result.is-selected {
    border-color: rgba(124, 23, 23, .85);
    background: #210d0d;
}

html.mobile-app-document .movie-search-result {
    display: grid;
    width: 100%;
    aspect-ratio: 5 / 1;
    min-height: 0;
    grid-template-columns: 17% minmax(0, 1fr) 15%;
    align-items: stretch;
    padding: 0;
    border: 0;
    color: var(--ui-heading);
    text-align: left;
    background-color: rgba(10, 9, 9, .82);
    background-image: var(--movie-result-panel-image);
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
}

html.mobile-app-document .movie-search-result-poster,
html.mobile-app-document .movie-search-result-title,
html.mobile-app-document .movie-search-result-arrow {
    position: relative;
    z-index: 1;
}

html.mobile-app-document .movie-search-result-poster {
    display: flex;
    justify-content: right; /* Centers horizontally */
    align-items: center;
    overflow: hidden; 
    padding-right: 6%;
}

html.mobile-app-document .movie-search-result-poster::after {
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 7px;
    width: 1px;
    background: #261f19;
    content: "";
    pointer-events: none;
}

html.mobile-app-document .movie-search-result-poster img {
    display: block;
    width: 75%;
    height: 75%;
    object-fit: cover;
    filter: grayscale(0.6) contrast(1.2) brightness(.8);
}

html.mobile-app-document .movie-search-result-title {
    display: -webkit-box;
    align-self: center;
    max-height: 2.6em;
    padding: 0 .7rem;
    overflow: hidden;
    font-family: var(--font-title);
    font-size: clamp(.78rem, 3.4vw, 1rem);
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html.mobile-app-document .movie-search-result-arrow {
    display: grid;
    place-items: center;
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 1.8rem;
}

html.mobile-app-document .movie-search-return {
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.movie-search-return {
    display: block;
}

.movie-detail-shell {
    position: relative;
    z-index: 2;
    width: min(860px, 100%);
    min-height: 100svh;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.movie-detail-card {
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(143, 118, 82, .34);
    background: rgba(10, 9, 9, .72);
    padding: 1rem;
}

.movie-detail-poster {
    display: grid;
    place-items: center;
    width: min(260px, 76vw);
    aspect-ratio: 2 / 3;
    justify-self: center;
    border: 1px solid rgba(143, 118, 82, .34);
    background: #0a0909;
    overflow: hidden;
}

.movie-detail-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movie-detail-poster span {
    color: rgba(143, 118, 82, .58);
    font-family: var(--font-title);
    font-size: .9rem;
    letter-spacing: .12rem;
}

.movie-detail-content {
    display: grid;
    gap: 1rem;
}

.movie-detail-content h2 {
    color: #d0b891;
    font-family: var(--font-title);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.12;
    text-align: center;
}

.movie-detail-list {
    display: grid;
    gap: .8rem;
}

.movie-detail-list div {
    border-top: 1px solid rgba(143, 118, 82, .2);
    padding-top: .65rem;
}

.movie-detail-list dt {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.movie-detail-list dd {
    margin-top: .2rem;
    color: rgba(232, 221, 205, .9);
    font-size: 1.05rem;
    line-height: 1.25;
}

.movie-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.watch-report-card {
    align-items: start;
}

.watch-report-form {
    display: grid;
    gap: .9rem;
}

.watch-rating-field {
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid rgba(143, 118, 82, .28);
    background: rgba(9, 9, 9, .5);
}

.watch-rating-field legend {
    padding: 0 .35rem;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.watch-rating-options {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .35rem;
}

.watch-rating-options label {
    display: grid;
    min-height: 42px;
    cursor: pointer;
}

.watch-rating-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.watch-rating-options span {
    display: grid;
    place-items: center;
    border: 1px solid rgba(143, 118, 82, .42);
    color: #d0b891;
    font-family: var(--font-title);
    background: rgba(10, 9, 9, .74);
}

.watch-rating-options input:checked + span {
    border-color: rgba(124, 23, 23, .85);
    background: #210d0d;
}

.watch-rating-description,
.watch-report-message {
    min-height: 1.3rem;
    color: #d0b891;
    font-size: 1.04rem;
    line-height: 1.22;
    text-align: center;
}

.watch-rating-reference {
    display: grid;
    gap: .22rem;
    color: rgba(180, 162, 139, .86);
    font-size: .96rem;
    line-height: 1.18;
    list-style: none;
}

.watch-confirmation {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: rgba(232, 221, 205, .9);
    font-size: 1.04rem;
    line-height: 1.22;
}

.watch-confirmation input {
    flex: 0 0 auto;
    margin-top: .18rem;
    accent-color: #7c1717;
}

.hall-shell {
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    min-height: 100svh;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.hall-header {
    margin-bottom: 1.25rem;
    text-align: center;
}

.hall-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.hall-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid rgba(143, 118, 82, .34);
    background: rgba(10, 9, 9, .72);
}

.hall-year {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .78rem;
    letter-spacing: .08rem;
    text-align: center;
    text-transform: uppercase;
}

.hall-poster-frame {
    width: 100%;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(143, 118, 82, .42);
    background:
        linear-gradient(rgba(33, 13, 13, .22), rgba(10, 9, 9, .94)),
        rgba(0, 0, 0, .28);
    overflow: hidden;
}

.hall-poster-frame img,
.hall-poster-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.hall-poster-frame img {
    object-fit: cover;
}

.hall-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(10, 9, 9, .58), rgba(10, 9, 9, .96)),
        rgba(0, 0, 0, .18);
}

.hall-poster-placeholder span {
    color: rgba(208, 184, 145, .72);
    font-family: var(--font-title);
    font-size: .95rem;
    letter-spacing: .12rem;
}

.hall-title {
    color: #d0b891;
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
}

.hall-empty {
    padding: 1.2rem;
    border: 1px solid rgba(143, 118, 82, .34);
    background: rgba(10, 9, 9, .72);
    text-align: center;
}

.hall-empty p {
    font-size: 1.15rem;
}

.october-shell {
    position: relative;
    z-index: 2;
    width: min(1040px, 100%);
    min-height: 100svh;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.october-header {
    margin-bottom: 1.25rem;
    text-align: center;
}

.october-calendar,
.october-now-playing,
.october-section {
    border: 1px solid rgba(143, 118, 82, .34);
    background: rgba(10, 9, 9, .72);
}

.october-now-playing {
    display: grid;
    gap: .75rem;
    justify-items: center;
    width: min(360px, 100%);
    margin: 0 auto 1rem;
    padding: 1rem;
    text-align: center;
}

.october-now-playing-kicker,
.october-now-playing-label,
.home-phase-kicker {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.october-now-playing-poster {
    display: grid;
    place-items: center;
    width: min(220px, 72vw);
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(143, 118, 82, .34);
    background: #0a0909;
    overflow: hidden;
}

.october-now-playing-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.october-now-playing-poster span {
    color: rgba(143, 118, 82, .58);
    font-family: var(--font-title);
    font-size: .86rem;
    letter-spacing: .12rem;
}

.october-now-playing h2 {
    color: #d0b891;
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.12;
}

.october-now-playing-submitter {
    color: rgba(180, 162, 139, .9);
    font-size: 1rem;
    line-height: 1.2;
}

.october-calendar {
    padding: .65rem;
}

.october-weekdays,
.october-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.october-weekdays {
    gap: .3rem;
    margin-bottom: .35rem;
}

.october-weekdays span {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .66rem;
    letter-spacing: .04rem;
    text-align: center;
    text-transform: uppercase;
}

.october-calendar-grid {
    gap: .35rem;
}

.october-day {
    min-height: 82px;
    padding: .38rem;
    border: 1px solid rgba(143, 118, 82, .22);
    background: rgba(9, 9, 9, .48);
}

.october-day.is-current-day {
    background: #210d0d;
}

.october-day.is-outside-month {
    opacity: .28;
}

.october-day-number {
    color: #d0b891;
    font-family: var(--font-title);
    font-size: .78rem;
    line-height: 1;
}

.october-today-label {
    margin-top: .2rem;
    color: rgba(208, 184, 145, .72);
    font-family: var(--font-title);
    font-size: .62rem;
    letter-spacing: .06rem;
    line-height: 1;
    text-transform: uppercase;
}

.october-calendar-item {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid rgba(143, 118, 82, .18);
}

.october-calendar-item p {
    font-size: .82rem;
    line-height: 1.08;
}

.october-calendar-title {
    color: #d0b891;
}

.october-calendar-title a,
.coven-slate-item a,
.october-category-card a,
.october-compact-list a,
.october-now-playing h2 a {
    color: inherit;
    text-decoration-color: rgba(143, 118, 82, .45);
    text-underline-offset: .18rem;
}

.mobile-calendar-agenda {
    display: grid;
    gap: .85rem;
    width: min(620px, 100%);
    margin: 0 auto;
}

.mobile-calendar-date-group {
    display: grid;
    gap: .45rem;
    scroll-margin-top: calc(var(--mobile-shell-header-clearance) + .65rem);
}

.mobile-calendar-date-group.is-current-day {
    padding: .5rem;
    border: 1px solid rgba(121, 34, 31, .78);
    background: #210d0d;
}

.mobile-calendar-date-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    color: var(--gold);
}

.mobile-calendar-date-heading h1 {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .04rem;
    line-height: 1.2;
}

.mobile-calendar-date-heading span {
    color: rgba(208, 184, 145, .72);
    font-family: var(--font-title);
    font-size: .62rem;
    letter-spacing: .06rem;
    text-transform: uppercase;
}

.mobile-calendar-agenda-list {
    display: grid;
    gap: .45rem;
}

.mobile-calendar-agenda-card {
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr) 1.55rem;
    gap: .65rem;
    min-height: 5.7rem;
    padding: .42rem;
    border: 1px solid rgba(143, 118, 82, .28);
    background: rgba(10, 9, 9, .72);
}

.mobile-calendar-agenda-poster {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #0a0909;
    color: rgba(143, 118, 82, .58);
    text-decoration: none;
}

.mobile-calendar-agenda-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-calendar-agenda-poster span {
    font-family: var(--font-title);
    font-size: .5rem;
    letter-spacing: .08rem;
}

.mobile-calendar-agenda-details {
    display: grid;
    align-content: center;
    gap: .22rem;
    min-width: 0;
}

.mobile-calendar-agenda-details h2 {
    color: #d0b891;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
}

.mobile-calendar-agenda-details p {
    color: rgba(180, 162, 139, .86);
    font-size: .84rem;
    line-height: 1.14;
}

.mobile-calendar-agenda-details a {
    color: inherit;
    text-decoration-color: rgba(143, 118, 82, .45);
    text-underline-offset: .16rem;
}

.mobile-calendar-watch-status {
    display: block;
    width: 1.55rem;
    height: 1.55rem;
    justify-self: end;
    background-color: var(--calendar-watch-status-color);
    mask-image: var(--calendar-watch-status-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--calendar-watch-status-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.mobile-calendar-watch-status.is-watched {
    --calendar-watch-status-color: #aa9a7c;
}

.mobile-calendar-watch-status.is-unwatched {
    --calendar-watch-status-color: #b51d20;
}

.mobile-calendar-empty {
    padding: 1rem;
    border: 1px solid rgba(143, 118, 82, .34);
    background: rgba(10, 9, 9, .72);
    color: rgba(180, 162, 139, .86);
    text-align: center;
}

.phase-calendar {
    width: min(100%, 34rem);
    margin: 0 auto;
    color: var(--text);
}

.phase-calendar-kicker {
    margin: 0 0 .35rem;
    color: var(--accent);
    font-size: .8rem;
    text-transform: uppercase;
}

.phase-calendar h1,
.phase-calendar h2 {
    margin: 0 0 .7rem;
    color: var(--ui-heading);
    font-size: 1.45rem;
}

.phase-calendar-timeline {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phase-calendar-timeline li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(143, 118, 82, .35);
    background: rgba(9, 9, 9, .32);
}

.phase-calendar-timeline strong {
    color: var(--ui-heading);
    font-weight: var(--font-title-weight);
    white-space: nowrap;
}

.phase-calendar--mobile {
    padding-top: .25rem;
}

.home-tonights-film {
    position: relative;
    width: min(940px, 100%);
    aspect-ratio: 1420 / 1108;
    margin: 1rem auto 1.25rem;
    overflow: visible;
    background: transparent;
    text-align: left;
}

.home-tonights-film-frame {
    --home-frame-mask: url("images/frames/hero-card-frame-mask.png");
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(var(--home-frame-brightness));
    mask-image: var(--home-frame-mask);
    mask-mode: alpha;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-image: var(--home-frame-mask);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    pointer-events: none;
    user-select: none;
}

.home-tonights-film-title {
    position: absolute;
    top: 2.2%;
    left: 50%;
    z-index: 2;
    margin: 0;
    padding: 0 .6rem;
    transform: translateX(-50%);
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: clamp(1.15rem, 3.3vw, 1.8rem);
    font-weight: var(--font-title-weight);
    letter-spacing: .08rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-tonights-film-content {
    position: absolute;
    inset: 12.5% 4.8% 8.5% 6%;
    z-index: 1;
    display: grid;
    grid-template-columns: 47% minmax(0, 1fr);
    gap: 7%;
    align-items: center;
}

.home-tonights-film-empty-poster {
    min-width: 0;
}

.home-tonights-film-poster {
    display: grid;
    place-items: center;
    width: min(88%, 238px);
    aspect-ratio: 2 / 3;
    justify-self: center;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.home-tonights-film-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-tonights-film-poster span {
    color: rgba(143, 118, 82, .58);
    font-family: var(--font-title);
    font-size: .86rem;
    letter-spacing: .12rem;
}

.home-tonights-film-details {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: .55rem;
    align-self: stretch;
    min-width: 0;
    padding: 7% 0 5%;
    transform: translateX(calc(-1 * var(--home-tonights-details-inline-shift)));
}

.home-tonights-film-details--pending {
    grid-template-rows: auto auto;
    align-content: start;
}

.home-tonights-film-details h3 {
    margin: 0;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: clamp(1.05rem, 2.5vw, 1.55rem);
    font-weight: var(--font-title-weight);
    line-height: 1.08;
}

.home-tonights-film-details h3 a,
.home-tonights-film-category a {
    color: inherit;
    text-decoration-color: rgba(143, 118, 82, .5);
    text-underline-offset: .16rem;
}

.home-tonights-film-summary,
.home-tonights-film-meta,
.home-tonights-film-category {
    color: var(--ui-neutral);
    font-family: var(--font-body);
    font-size: clamp(.82rem, 1.8vw, 1rem);
    font-weight: var(--font-content-weight);
    line-height: 1.2;
}

.home-tonights-film-summary {
    min-height: 0;
    overflow: hidden;
}

.home-tonights-film-meta {
    border-top: 1px solid rgba(143, 118, 82, .28);
    color: var(--ui-neutral);
    font-family: var(--font-body);
    font-size: clamp(.68rem, 1.5vw, .82rem);
    letter-spacing: .04rem;
    padding-top: .45rem;
}

.home-tonights-film-category {
    color: var(--accent);
    font-size: clamp(.82rem, 1.7vw, .96rem);
}

.home-tonights-film-button {
    display: inline-grid;
    width: min(100%, 13rem);
    min-height: 0;
    aspect-ratio: 1290 / 410;
    place-items: center;
    justify-self: start;
    margin-top: .15rem;
    padding: 0 .7rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #d0b891;
    font-size: clamp(.58rem, 1.8vw, .72rem);
    line-height: 1.1;
    white-space: nowrap;
    background: url("images/buttons/blank-oxblood-button.png") center / contain no-repeat;
}

.home-yesterday-rating {
    position: relative;
    width: min(940px, 100%);
    aspect-ratio: var(--home-secondary-frame-aspect-ratio);
    min-height: 0;
    margin: .35rem auto 1.15rem;
    overflow: visible;
    background: transparent;
}

.home-tonights-film + .home-yesterday-rating {
    margin-top: -1rem;
}

.home-yesterday-rating h2 {
    position: absolute;
    top: calc(4.8% - 3px);
    left: 50%;
    z-index: 2;
    margin: 0;
    padding: 0 .6rem;
    transform: translateX(-50%);
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: var(--font-title-weight);
    letter-spacing: .05rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-secondary-card-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(var(--home-frame-brightness));
    mask-image: var(--home-frame-mask);
    mask-mode: alpha;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-image: var(--home-frame-mask);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    pointer-events: none;
    user-select: none;
}

.home-yesterday-rating-content {
    position: absolute;
    inset: 20% 7% 10%;
    z-index: 1;
    display: grid;
    grid-template-columns: 35% minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
}

.home-yesterday-rating-poster {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    justify-self: center;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transform: translate(
        var(--home-yesterday-poster-inline-shift),
        var(--home-yesterday-poster-block-shift)
    );
}

.home-yesterday-rating-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Favor the upper poster art while allowing this compact card to crop. */
    object-position: center 22%;
}

.home-yesterday-rating-poster span {
    display: grid;
    height: 100%;
    place-items: center;
    border: 1px solid rgba(143, 118, 82, .3);
    color: rgba(143, 118, 82, .58);
    font-family: var(--font-title);
    font-size: .7rem;
    letter-spacing: .08rem;
}

.home-yesterday-rating-details {
    min-width: 0;
    transform: translateY(-5px);
}

.home-yesterday-rating-details h3 {
    margin: 0 0 .25rem;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: clamp(.9rem, 2.6vw, 1.12rem);
    font-weight: var(--font-title-weight);
    line-height: 1.08;
}

.home-yesterday-rating-details h3 a {
    color: inherit;
    text-decoration: none;
}

.home-yesterday-rating-prompt {
    margin: 0 0 .24rem;
    color: var(--ui-neutral);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: var(--font-content-weight);
    line-height: 1.08;
}

.movie-rating-widget {
    position: relative;
    min-width: 0;
}

.movie-rating-controls {
    display: flex;
    align-items: center;
    gap: .16rem;
}

.movie-rating-control {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(155, 150, 145, .48);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1.35rem;
    line-height: 1;
}

.movie-rating-zero {
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid rgba(155, 150, 145, .55);
    color: var(--ui-heading);
    font-size: 1.05rem;
}

.movie-rating-zero.is-selected {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
    transform: scale(1.08);
}

.movie-rating-star.is-filled {
    color: var(--accent);
}

.movie-rating-widget.is-error .movie-rating-controls {
    outline: 1px solid #d08d7d;
    outline-offset: 2px;
}

.movie-rating-control:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

.movie-rating-control:disabled {
    cursor: wait;
    opacity: .65;
}

.movie-rating-description,
.movie-rating-error {
    margin: .18rem 0 0;
    font-size: .72rem;
    line-height: 1.1;
}

.movie-rating-description {
    min-height: .8rem;
    color: var(--ui-neutral);
    font-family: var(--font-body);
    font-weight: var(--font-content-weight);
}

.movie-rating-error {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.movie-detail-rating {
    margin: .9rem 0;
    padding: .7rem;
    border: 1px solid rgba(121, 34, 31, .7);
    background: rgba(33, 13, 13, .72);
}

.movie-detail-rating h3 {
    margin: 0 0 .3rem;
    color: var(--accent);
    font-family: var(--font-title);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .05rem;
}

.movie-detail-rating > p {
    margin: 0 0 .48rem;
    color: rgba(208, 184, 145, .8);
    font-size: .84rem;
    line-height: 1.2;
}

.home-your-stats {
    position: relative;
    width: min(940px, 100%);
    aspect-ratio: var(--home-secondary-frame-aspect-ratio);
    min-height: 0;
    margin: .35rem auto 0;
    overflow: visible;
    background: transparent;
}

.home-yesterday-rating + .home-your-stats {
    margin-top: -1rem;
}

.home-your-stats h2 {
    position: absolute;
    top: calc(4.8% - 3px);
    left: 50%;
    z-index: 2;
    margin: 0;
    padding: 0 .6rem;
    transform: translateX(-50%);
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: var(--font-title-weight);
    letter-spacing: .05rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-your-stats-grid {
    position: absolute;
    inset: 20% 7% 10%;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    align-items: center;
    align-content: start;
}

.home-your-stat {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    text-align: center;
}

.home-your-stat-icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    background-color: var(--accent);
    mask-image: var(--home-stat-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--home-stat-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.home-your-stat strong {
    color: #AA9A7C;
    font-family: var(--font-title);
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1;
}

.home-your-stat span {
    color: var(--ui-neutral);
    font-family: var(--font-body);
    font-size: clamp(.7rem, 2.1vw, .8rem);
    font-weight: var(--font-content-weight);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-tonights-film-details h3 a,
.home-tonights-film-category a {
    text-decoration: none;
}

.home-tonights-film-title:focus-visible,
.home-tonights-film-details h3 a:focus-visible,
.home-tonights-film-category a:focus-visible,
.home-tonights-film-poster:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: .2rem;
}

.october-section {
    margin-top: 1rem;
    padding: .9rem;
}

.october-section h2 {
    margin-bottom: .75rem;
    color: #b79b73;
    font-family: var(--font-title);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.home-phase-state {
    display: grid;
    gap: .7rem;
    text-align: center;
}

.home-phase-state .hex-button {
    justify-self: center;
}

.hall-of-fame-vote-cta {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.hall-of-fame-winner-announcement {
    display: grid;
    justify-items: center;
    gap: .7rem;
    margin-top: 1rem;
    border: 1px solid rgba(143, 118, 82, .58);
    background: #210d0d;
    padding: 1rem;
    text-align: center;
}

.hall-of-fame-winner-announcement img {
    width: min(7rem, 34vw);
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.hall-of-fame-winner-announcement p {
    margin: 0;
    color: #d0b891;
}

.hall-of-fame-winner-kicker {
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hall-of-fame-voting-notice,
.hall-of-fame-vote-placeholder p {
    color: var(--ui-neutral);
    font-family: var(--font-body);
    text-align: center;
}

.hall-of-fame-voting-notice {
    margin: 1rem 0 0;
}

.hall-of-fame-vote-placeholder {
    display: grid;
    gap: .9rem;
    justify-items: center;
    text-align: center;
}

.hall-of-fame-vote-form {
    display: grid;
    gap: .9rem;
}

.hall-of-fame-vote-form h2 {
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-weight: var(--font-title-weight);
}

.hall-of-fame-vote-guidance {
    color: var(--ui-neutral);
    font-family: var(--font-body);
    font-weight: var(--font-content-weight);
    text-align: center;
}

.hall-of-fame-vote-list {
    display: grid;
    gap: .65rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hall-of-fame-vote-item.is-dragging {
    opacity: .55;
}

.hall-of-fame-vote-card {
    display: grid;
    grid-template-columns: auto auto 3.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    border: 1px solid rgba(143, 118, 82, .34);
    background: #210d0d;
    padding: .7rem;
}

.hall-of-fame-vote-rank {
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: var(--font-title-weight);
}

.hall-of-fame-vote-poster {
    width: 3.8rem;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #0a0909;
}

.hall-of-fame-vote-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hall-of-fame-vote-poster span {
    display: grid;
    height: 100%;
    place-items: center;
    color: #7f6a51;
    font-family: var(--font-title);
    font-size: .48rem;
}

.hall-of-fame-vote-details h3,
.hall-of-fame-vote-details p {
    margin: 0;
}

.hall-of-fame-vote-details h3 {
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: .82rem;
    font-weight: var(--font-title-weight);
    letter-spacing: 0;
}

.hall-of-fame-vote-details p {
    color: var(--ui-neutral);
    font-family: var(--font-body);
    font-weight: var(--font-content-weight);
    font-size: .95rem;
}

.hall-of-fame-vote-keyboard {
    display: grid;
    gap: .25rem;
}

.hall-of-fame-vote-keyboard button {
    border: 0;
    background: transparent;
    color: var(--ui-heading);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: var(--font-content-weight);
    font-size: .72rem;
    text-decoration: underline;
}

@media (max-width: 560px) {
    .hall-of-fame-vote-card {
        grid-template-columns: auto auto 3.4rem minmax(0, 1fr);
    }

    .hall-of-fame-vote-poster {
        width: 3.4rem;
    }

    .hall-of-fame-vote-keyboard {
        grid-column: 3 / -1;
        grid-template-columns: repeat(2, max-content);
        justify-content: end;
    }
}

.october-category-list,
.october-compact-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

.october-category-card,
.october-compact-list article {
    padding: .75rem;
    border: 1px solid rgba(143, 118, 82, .24);
    background: rgba(9, 9, 9, .5);
}

.coven-slate-list {
    display: grid;
    gap: .75rem;
}

.coven-slate-item {
    display: grid;
    gap: .35rem;
    padding: .75rem;
    border: 1px solid rgba(143, 118, 82, .24);
    background: rgba(9, 9, 9, .5);
}

.october-category-card h3,
.coven-slate-item h3,
.october-compact-list h3 {
    color: #d0b891;
    font-family: var(--font-title);
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.18;
}

.october-category-card ul {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .65rem;
    list-style: none;
}

.october-category-card li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    border-top: 1px solid rgba(143, 118, 82, .16);
    padding-top: .45rem;
}

.october-category-card small,
.coven-slate-item p,
.october-compact-list p,
.october-empty-note {
    color: rgba(180, 162, 139, .86);
    font-size: .98rem;
    line-height: 1.2;
}

html.mobile-app-document .mobile-shell-content {
    padding-top: var(--mobile-shell-content-padding-top);
}

body.mobile-bottom-nav-page .mobile-shell-content {
    padding-bottom: var(--mobile-shell-nav-clearance);
}

body.mobile-bottom-nav-page .mobile-shell-content.home-shell {
    padding-top: var(--mobile-home-shell-content-padding-top);
}

/* Compact onboarding surfaces size to content while retaining shell clearance. */
html.mobile-app-document .mobile-shell-content.onboarding-shell {
    min-height: 0;
    padding-top: var(--mobile-shell-content-padding-top);
}

html.mobile-app-document .mobile-shell-content.onboarding-shell.admin-shell {
    min-height: 0;
}

html.mobile-app-document .onboarding-shell {
    gap: .65rem;
}

html.mobile-app-document .onboarding-shell > .page-title {
    margin-top: .15rem;
    margin-bottom: .1rem;
}

html.mobile-app-document .onboarding-shell .onboarding-card {
    align-self: start;
    margin: 0 auto;
    padding: 1rem 1.05rem;
}

html.mobile-app-document .onboarding-shell .onboarding-card > p {
    margin: 0;
}

html.mobile-app-document .pwa-instructions {
    display: grid;
    gap: .7rem;
    width: min(100%, 42rem);
}

html.mobile-app-document .pwa-instructions__title {
    display: grid;
    grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
    align-items: center;
    gap: .6rem;
    margin: .15rem 0 .1rem;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-size: 1rem;
    font-variant-caps: small-caps;
    font-weight: 500;
    letter-spacing: .08em;
    text-align: center;
    text-transform: none;
}

html.mobile-app-document .pwa-instructions__title span {
    display: block;
    width: 1.35rem;
    aspect-ratio: 1;
    background: var(--accent);
    mask: var(--pwa-instructions-icon) center / contain no-repeat;
    -webkit-mask: var(--pwa-instructions-icon) center / contain no-repeat;
}

html.mobile-app-document .pwa-instructions__title span:last-child {
    justify-self: end;
}

html.mobile-app-document .pwa-instruction-cell {
    display: grid;
    gap: .45rem;
    padding: .7rem .8rem;
    border: 1px solid rgba(143, 118, 82, .2);
    background: rgba(9, 9, 9, .34);
}

html.mobile-app-document .pwa-instruction-cell__heading,
html.mobile-app-document .pwa-instruction-variant h4 {
    margin: 0;
    color: var(--ui-heading);
    font-family: var(--font-title);
    font-weight: 500;
    text-align: center;
}

html.mobile-app-document .pwa-instruction-cell__heading {
    font-size: 1.08rem;
}

html.mobile-app-document .pwa-instruction-variant h4 {
    font-size: .88rem;
    letter-spacing: .04em;
}

html.mobile-app-document .pwa-instruction-cell p,
html.mobile-app-document .pwa-instruction-variant p {
    margin: 0;
    color: var(--ui-neutral);
    font-size: .82rem;
    line-height: 1.3;
}

html.mobile-app-document .pwa-instruction-cell__variants {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .65rem;
    align-items: stretch;
}

html.mobile-app-document .pwa-instruction-variant {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

html.mobile-app-document .pwa-instruction-cell__variant-divider {
    width: 1px;
    background: linear-gradient(transparent, var(--ui-neutral), transparent);
    opacity: .55;
}

html.mobile-app-document .pwa-instruction-divider {
    display: block;
    width: 82%;
    height: 1px;
    margin: 0 auto;
    background: var(--ui-neutral);
    mask-image: radial-gradient(ellipse 42% 180% at center, #000 0 18%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 42% 180% at center, #000 0 18%, transparent 100%);
    opacity: .5;
}

html.mobile-app-document .pwa-instruction-placeholder {
    display: grid;
    min-height: 4.2rem;
    place-items: center;
    border: 1px dashed rgba(155, 150, 145, .45);
    color: var(--ui-neutral);
    font-size: .7rem;
    letter-spacing: .04em;
    text-align: center;
}

html.mobile-app-document .pwa-instruction-images {
    display: grid;
    gap: .35rem;
    justify-items: center;
}

html.mobile-app-document .pwa-instruction-images img {
    display: block;
    width: 100%;
    max-height: 8rem;
    object-fit: contain;
}

html.mobile-app-document .pwa-preference-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
}

html.mobile-app-document [data-pwa-image-region="ios-safari-share"] img:first-child {
    width: 40%;
}

html.mobile-app-document [data-pwa-image-region="ios-add-to-home"] img:last-child {
    width: 70%;
}

html.mobile-app-document [data-pwa-image-region="android-settings"]
    .pwa-instruction-image--android-ellipsis {
    transform: rotate(90deg);
}

.home-shell .home-tonights-film {
    margin: calc(.3rem - 10px) auto -.2rem;
}

.home-shell .home-tonights-film + .home-yesterday-rating,
.home-shell .home-yesterday-rating {
    margin: 0 auto -.2rem;
}

.home-shell .home-yesterday-rating + .home-your-stats,
.home-shell .home-your-stats {
    margin: 0 auto -.2rem;
}

@media (max-width: 719px) {
    :root {
        --mobile-shell-header-candle-inline-shift: clamp(3px, 1.3vw, 5px);
        --mobile-shell-header-candle-block-shift: clamp(8px, 2.6vw, 10px);
    }
}

.home-yesterday-rating .home-secondary-card-frame {
    --home-frame-mask: url("images/frames/yesterdays-omen-frame-mask.png");
}

.home-your-stats .home-secondary-card-frame {
    --home-frame-mask: url("images/frames/your-stats-frame-mask.png");
}

html.mobile-app-document .home-shell .home-yesterday-rating-poster {
    aspect-ratio: 1;
    height: auto;
    align-self: center;
}

html.mobile-app-document .home-shell .home-your-stat-icon {
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
}

@media (min-width: 720px) {
    .movie-category-list {
        padding: 1rem;
    }

    .movie-category-item {
        padding: 1rem;
    }

    .movie-detail-card {
        grid-template-columns: minmax(210px, 280px) 1fr;
        align-items: start;
    }

    .movie-detail-content h2 {
        text-align: left;
    }

    .movie-detail-actions {
        justify-content: flex-start;
    }

    .movie-poster-placeholder {
        min-height: 288px;
    }

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

    .october-calendar {
        padding: .9rem;
    }

    .october-day {
        min-height: 132px;
    }

    .october-calendar-item p {
        font-size: .9rem;
    }

    .october-category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 360px) {
    .home-tonights-film-button {
        white-space: normal;
    }
}