/* ==========================================================================
   The Saloon Back-Bar — home page world (see DESIGN.md). Loaded last, home only.
   Every rule is scoped to body[data-page="home"] so interior pages keep their
   finish until they are rebuilt. Materials: mahogany, brass, amber light, glass.
   ========================================================================== */

body[data-page="home"] {
    --sb-wall: #0b0805;
    --sb-mah-deep: #170b05;
    --sb-mah: #2c150a;
    --sb-mah-hi: #4a2412;
    --sb-grain: #5b2f16;
    --sb-brass-hi: #f0d18a;
    --sb-brass: #c9a054;
    --sb-brass-deep: #8c6626;
    --sb-brass-edge: #5e4318;
    --sb-brass-ink: #241703;
    --sb-amber: 255, 179, 64;
    --sb-cream: 255, 244, 214;
    --sb-ink: #f4e9d3;
    --sb-ink-soft: #d9cbab;
    --sb-muted: #b3a487;
    --sb-slate: #14100c;
    --sb-chalk: #e9dcbf;
    --sb-section: clamp(3.5rem, 6vw, 5.5rem);
    --sb-px: 0.5;   /* pointer x 0..1, set by JS */
    --sb-py: 0.4;
    background: var(--sb-wall);
    color: var(--sb-ink);
}

/* Nav sits over the cornice as the bar's own rail. */
body[data-page="home"] .main-nav {
    background: linear-gradient(180deg, rgba(11, 8, 5, 0.94), rgba(11, 8, 5, 0.78));
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
}

/* ---------- the wood ---------- */
body[data-page="home"] .sb-wood {
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(var(--sb-amber), 0.10), transparent 60%),
        linear-gradient(180deg, var(--sb-mah-hi) 0%, var(--sb-mah) 45%, var(--sb-mah-deep) 100%);
    position: relative;
    isolation: isolate;
}
body[data-page="home"] .sb-wood::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.18  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='600' height='600' filter='url(%23g)'/></svg>");
    background-size: 600px 600px;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* ==========================================================================
   HERO — the cabinet
   ========================================================================== */
body[data-page="home"] .sb-bar {
    position: relative;
    min-height: calc(100svh - 72px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    background: var(--sb-wall);
}

/* one lamp, hung from the cornice; its light is the only light */
body[data-page="home"] .sb-lamp {
    position: absolute;
    top: clamp(58px, 8vh, 92px);
    left: 50%;
    width: 2px;
    height: clamp(36px, 5vh, 56px);
    background: linear-gradient(180deg, #2a1c0a, #6f5326);
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
}
body[data-page="home"] .sb-lamp::before {
    /* the shade */
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    width: 84px;
    height: 36px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #5a3d16 0%, #3a270f 60%, #1c1207 100%);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}
body[data-page="home"] .sb-lamp::after {
    /* the flame */
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translateX(-50%);
    border-radius: 50% 50% 46% 46%;
    background: radial-gradient(circle at 50% 60%, #fff3c4 0%, #ffcf6a 32%, #e78354 68%, rgba(194, 87, 47, 0) 100%);
    filter: blur(0.6px);
    animation: sb-flicker 3.2s ease-in-out infinite;
}
body[data-page="home"] .sb-light {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 50% 12%, rgba(var(--sb-amber), 0.34), rgba(var(--sb-amber), 0.10) 38%, transparent 70%),
        radial-gradient(90% 40% at 50% 100%, rgba(var(--sb-amber), 0.08), transparent 70%);
    opacity: 0;
    animation: sb-lamp-on 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
@keyframes sb-lamp-on { 0% { opacity: 0; } 55% { opacity: 1.25; } 100% { opacity: 1; } }
@keyframes sb-flicker { 0%, 100% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.06, 0.96); } 70% { transform: translateX(-50%) scale(0.97, 1.05); } }

/* cornice */
body[data-page="home"] .sb-cornice {
    position: relative;
    z-index: 2;
    height: clamp(58px, 8vh, 92px);
    background:
        linear-gradient(180deg, #1c1007 0%, #3a1f0e 18%, #1a0e06 22%, #4a2412 30%, #2c150a 60%, #170b05 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(var(--sb-cream), 0.06);
}
body[data-page="home"] .sb-cornice::after {
    /* dentil moulding */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 10px;
    background: repeating-linear-gradient(90deg, #5b2f16 0 14px, #1a0d05 14px 22px);
    opacity: 0.75;
}

/* the cabinet body: bay | mirror | bay */
body[data-page="home"] .sb-cabinet {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 560px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    padding: clamp(0.6rem, 1.6vw, 1.4rem) clamp(0.6rem, 2.4vw, 2.4rem) 0;
}
body[data-page="home"] .sb-bay {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: clamp(0.8rem, 1.8vw, 1.6rem);
    padding: clamp(0.8rem, 1.6vw, 1.4rem);
    border-inline: 12px solid transparent;
    border-image: linear-gradient(180deg, #4a2412, #1a0d05 40%, #5b2f16 60%, #170b05) 1;
}
body[data-page="home"] .sb-bay::before,
body[data-page="home"] .sb-bay::after {
    /* fluted column highlights */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: repeating-linear-gradient(90deg, rgba(var(--sb-cream), 0.10) 0 2px, transparent 2px 5px);
    pointer-events: none;
}
body[data-page="home"] .sb-bay::before { left: -11px; }
body[data-page="home"] .sb-bay::after { right: -11px; }

/* a glass shelf holding two cards */
body[data-page="home"] .sb-shelf {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.8rem, 2vw, 1.8rem);
    padding: 0.6rem 0.4rem 14px;
    min-height: 0;
}
body[data-page="home"] .sb-shelf::after {
    /* the glass lip and its amber underglow */
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 0;
    height: 10px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, rgba(240, 209, 138, 0.55), rgba(var(--sb-cream), 0.12) 35%, #8c6626 100%);
    box-shadow:
        0 1px 0 rgba(var(--sb-cream), 0.35),
        0 10px 24px rgba(var(--sb-amber), 0.28),
        0 -28px 50px -4px rgba(var(--sb-amber), 0.26);
}
body[data-page="home"] .sb-shelf-card {
    filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.6));
    position: relative;
    z-index: 1;
    transform: translateY(-14px);
    opacity: 0;
    animation: sb-settle 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(0.35s + var(--sb-i, 0) * 0.07s);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sb-settle { to { transform: translateY(0); opacity: 1; } }
body[data-page="home"] .sb-shelf-card .gng-card-obj {
    --gco-w: clamp(96px, 10.4vw, 168px);
    box-shadow:
        0 18px 30px -8px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 22px 34px -4px rgba(var(--sb-amber), 0.18);
}
body[data-page="home"] .sb-shelf-card::after {
    /* backlight through the card's edges */
    content: "";
    position: absolute;
    inset: 12% -8% -4% -8%;
    z-index: -1;
    border-radius: 6px;
    background: radial-gradient(60% 70% at 50% 100%, rgba(var(--sb-amber), 0.40), transparent 70%);
    filter: blur(10px);
}
body[data-page="home"] .sb-shelf-card:hover,
body[data-page="home"] .sb-shelf-card:focus-within,
body[data-page="home"] .sb-shelf-card.is-lifted { transform: translateY(-10px) scale(1.04); z-index: 5; }

/* the mirror */
body[data-page="home"] .sb-mirror {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    text-align: center;
    padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1rem, 2.4vw, 2rem) clamp(4rem, 12vw, 9rem);
    margin: clamp(2.2rem, 4vw, 3.4rem) clamp(0.2rem, 1vw, 0.8rem) 0;
    border: 10px solid;
    border-image: linear-gradient(160deg, #f0d18a 0%, #8c6626 22%, #f0d18a 40%, #5e4318 58%, #d9ac54 78%, #6b4e1f 100%) 1;
    background:
        linear-gradient(160deg, rgba(190, 196, 204, 0.16), rgba(190, 196, 204, 0) 35%, rgba(190, 196, 204, 0.06) 70%, rgba(190, 196, 204, 0) 100%),
        #15120f;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.7),
        inset 0 0 60px rgba(0, 0, 0, 0.75),
        0 24px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    container-type: inline-size;
    min-width: 0;
}
body[data-page="home"] .sb-reflection {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: 50% 62%;
    opacity: 0.62;
    filter: saturate(0.9) brightness(1.15) blur(0.5px);
    transform: scale(1.08) translate(calc((var(--sb-px) - 0.5) * -14px), calc((var(--sb-py) - 0.5) * -8px));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,1) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,1) 100%);
}
body[data-page="home"] .sb-glare {
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(var(--sb-cream), 0.14) 47%, rgba(var(--sb-cream), 0.05) 52%, transparent 60%);
    transform: translateX(calc((var(--sb-px) - 0.5) * 36%)) translateY(calc((var(--sb-py) - 0.5) * 10%));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-page="home"] .sb-mirror > :not(.sb-reflection):not(.sb-glare) { position: relative; z-index: 2; min-width: 0; max-width: 100%; }
body[data-page="home"] .sb-plate {
    display: inline-block;
    font: 600 0.74rem/1 'Inter', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-brass-ink);
    background: linear-gradient(180deg, #f0d18a, #c9a054 55%, #8c6626);
    border-radius: 3px;
    padding: 0.42em 0.95em 0.36em;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.35);
}
body[data-page="home"] .sb-etched {
    margin: clamp(0.9rem, 2vw, 1.6rem) 0 0.6rem;
    font: 800 clamp(1.8rem, 11.2cqw, 4.6rem)/0.98 'Cinzel', serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(var(--sb-cream), 0.88);
    text-shadow:
        0 -1px 0 rgba(var(--sb-cream), 0.55),
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.6);
    text-wrap: balance;
}
body[data-page="home"] .sb-etched em {
    display: block;
    font-style: normal;
    font-size: 0.42em;
    letter-spacing: 0.32em;
    color: var(--sb-brass-hi);
    margin: 0.35em 0 0.1em;
}
body[data-page="home"] .sb-lead {
    margin: 0.4rem 0 0;
    max-width: 30ch;
    font: 400 clamp(1.05rem, 1.5vw, 1.25rem)/1.5 'Crimson Text', Georgia, serif;
    color: var(--sb-ink-soft);
    text-wrap: balance;
}
body[data-page="home"] .sb-lead strong { color: var(--sb-ink); font-weight: 600; }

/* counter with the taps and the scale card */
body[data-page="home"] .sb-counter {
    position: relative;
    z-index: 3;
    margin-top: clamp(0.8rem, 2vw, 1.6rem);
    padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.2rem);
    background:
        linear-gradient(180deg, #5b2f16 0%, #3a1f0e 6%, #2c150a 40%, #170b05 100%);
    border-top: 3px solid #a2793a;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(var(--sb-cream), 0.18);
}
body[data-page="home"] .sb-counter::before {
    /* lamp reflected in the polish */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(40% 60% at 50% 0%, rgba(var(--sb-amber), 0.22), transparent 70%);
    pointer-events: none;
}
body[data-page="home"] .sb-counter::after {
    /* brass foot rail */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    background: linear-gradient(180deg, #f0d18a 0%, #c9a054 45%, #5e4318 100%);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5);
}
body[data-page="home"] .sb-counter-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}
body[data-page="home"] .sb-taps {
    grid-column: 2;
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}
body[data-page="home"] .sb-tap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 54px;
    padding: 0 1.6rem 0 1.25rem;
    border-radius: 4px;
    font: 400 clamp(0.78rem, 1.2vw, 0.95rem)/1 'Rye', 'Cinzel', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
body[data-page="home"] .sb-tap::before {
    /* the pull ring */
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid currentColor;
    opacity: 0.75;
}
body[data-page="home"] .sb-tap--brass {
    color: var(--sb-brass-ink) !important;
    background: linear-gradient(180deg, #f0d18a 0%, #c9a054 48%, #8c6626 100%) !important;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.75), inset 0 -3px 0 rgba(60, 40, 10, 0.45), 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px #5e4318 !important;
    text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.45);
}
body[data-page="home"] .sb-tap--brass:hover { filter: brightness(1.08); transform: translateY(-1px); }
body[data-page="home"] .sb-tap--dark {
    color: var(--sb-brass-hi) !important;
    background: linear-gradient(180deg, rgba(20, 12, 6, 0.9), rgba(8, 5, 2, 0.9)) !important;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.12), 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px #6b4e1f !important;
}
body[data-page="home"] .sb-tap--dark:hover { color: #fff3c4 !important; transform: translateY(-1px); }
body[data-page="home"] .sb-tap:focus-visible { outline: 2px solid #fff3c4; outline-offset: 3px; }
body[data-page="home"] .sb-tap-note {
    grid-column: 3;
    justify-self: start;
    margin: 0;
    font: 400 0.95rem/1.5 'Crimson Text', Georgia, serif;
    color: var(--sb-muted);
    max-width: 24ch;
}
body[data-page="home"] .sb-tap-note b { color: var(--sb-ink-soft); font-weight: 600; }
body[data-page="home"] .sb-counter-card {
    grid-column: 1;
    justify-self: end;
    transform: rotate(-9deg) translateY(-6px);
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.6));
}
body[data-page="home"] .sb-counter-card .gng-card-obj { --gco-w: clamp(110px, 10vw, 150px); }

/* ==========================================================================
   COUNTER SECTIONS — the table, the flip, the shelf, the chalkboard
   ========================================================================== */
body[data-page="home"] .sb-section {
    position: relative;
    padding: var(--sb-section) 0;
}
body[data-page="home"] .sb-section::before {
    /* each stretch of counter has its own lamp */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 34% at 50% 0%, rgba(var(--sb-amber), 0.07), transparent 70%);
}
body[data-page="home"] .sb-container {
    position: relative;
    width: min(1280px, calc(100% - 2 * clamp(1rem, 4vw, 3rem)));
    margin: 0 auto;
}
body[data-page="home"] .sb-head { max-width: 62ch; margin: 0 0 clamp(1.6rem, 3.5vw, 2.8rem); }
body[data-page="home"] .sb-head h2 {
    margin: 0.9rem 0 0.6rem;
    font: 700 clamp(1.9rem, 3.8vw, 3rem)/1.1 'Cinzel', serif;
    letter-spacing: 0.005em;
    color: var(--sb-ink);
    text-shadow: 0 -1px 0 rgba(var(--sb-cream), 0.22), 0 2px 0 rgba(0, 0, 0, 0.85);
    text-wrap: balance;
}
body[data-page="home"] .sb-head p:not(.sb-plate) {
    margin: 0;
    font: 400 1.1rem/1.65 'Crimson Text', Georgia, serif;
    color: var(--sb-ink-soft);
    max-width: 62ch;
}

/* the proof: the real table, big */
body[data-page="home"] .sb-proof-shot {
    position: relative;
    margin: 0;
    border: 8px solid;
    border-image: linear-gradient(160deg, #6b4e1f, #c9a054 30%, #5e4318 55%, #d9ac54 80%, #6b4e1f) 1;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(0, 0, 0, 0.7);
    background: #000;
}
body[data-page="home"] .sb-proof-shot img { display: block; width: 100%; height: auto; }
body[data-page="home"] .sb-proof-shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    white-space: nowrap;
    padding: 0.7rem 1rem;
    font: 600 0.74rem/1.3 'Inter', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-brass-hi);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
}
body[data-page="home"] .sb-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
body[data-page="home"] .sb-proof-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
body[data-page="home"] .sb-proof-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: baseline;
    font: 400 1.05rem/1.5 'Crimson Text', Georgia, serif;
    color: var(--sb-ink-soft);
}
body[data-page="home"] .sb-proof-list strong {
    font: 400 1.35rem/1 'Rye', 'Cinzel', serif;
    color: var(--sb-brass-hi);
    min-width: 2.2ch;
    text-align: right;
}

/* the board and the flip keep their components; the table under them is wood */
body[data-page="home"] .sb-table-layout,
body[data-page="home"] .sb-flip-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
body[data-page="home"] .sb-flip-layout { align-items: center; }
body[data-page="home"] .fp-board {
    background: linear-gradient(180deg, #24120a, #170b05);
    border: 1px solid rgba(var(--sb-cream), 0.10);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(var(--sb-cream), 0.08);
    border-radius: 6px;
}
body[data-page="home"] .sb-aside h3 {
    margin: 0 0 0.6rem;
    font: 700 1.1rem/1.3 'Cinzel', serif;
    color: var(--sb-brass-hi);
}
body[data-page="home"] .sb-aside p,
body[data-page="home"] .sb-aside dd {
    margin: 0 0 0.9rem;
    font: 400 1.02rem/1.55 'Crimson Text', Georgia, serif;
    color: var(--sb-ink-soft);
}
body[data-page="home"] .sb-aside dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.25rem;
    font: 600 0.78rem/1 'Inter', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-ink);
}
body[data-page="home"] .sb-aside .fp-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
body[data-page="home"] .sb-aside .fp-swatch--cyan { background: #58c9cf; }
body[data-page="home"] .sb-aside .fp-swatch--hatch { background: repeating-linear-gradient(45deg, #d9ac54 0 2px, transparent 2px 5px); }
body[data-page="home"] .sb-aside .fp-swatch--coral { background: #e78354; }
body[data-page="home"] .sb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font: 600 0.82rem/1 'Inter', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-brass-hi);
    text-decoration: none;
    border-bottom: 1px solid rgba(217, 172, 84, 0.45);
    padding-bottom: 2px;
}
body[data-page="home"] .sb-link:hover { color: #fff3c4; border-bottom-color: #fff3c4; }

/* the faction shelf */
body[data-page="home"] .sb-faction-shelf {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(0.6rem, 1.4vw, 1.2rem);
    padding: clamp(0.8rem, 1.6vw, 1.4rem) clamp(0.8rem, 1.6vw, 1.4rem) 20px;
    background: linear-gradient(180deg, #24120a, #170b05);
    border-radius: 6px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(var(--sb-cream), 0.08);
}
body[data-page="home"] .sb-faction-shelf::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 6px;
    height: 10px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, rgba(var(--sb-cream), 0.34), rgba(var(--sb-cream), 0.08) 40%, rgba(var(--sb-amber), 0.10));
    box-shadow: 0 1px 0 rgba(var(--sb-cream), 0.30), 0 8px 22px rgba(var(--sb-amber), 0.22), 0 -26px 40px -6px rgba(var(--sb-amber), 0.16);
}
body[data-page="home"] .sb-bottle {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--sb-ink);
    border-radius: 4px 4px 2px 2px;
    overflow: hidden;
    background: #0b0805;
    box-shadow: 0 16px 26px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 30px -4px rgba(var(--sb-amber), 0.14);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-page="home"] .sb-bottle img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4.2;
    object-fit: cover;
    object-position: 50% 18%;
    filter: saturate(0.9) contrast(1.05);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
body[data-page="home"] .sb-bottle::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--sb-cream), 0.10), transparent 30%, transparent 55%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}
body[data-page="home"] .sb-bottle span {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 10px;
    z-index: 1;
    text-align: center;
    font: 600 0.72rem/1.2 'Inter', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-brass-ink);
    background: linear-gradient(180deg, #f0d18a, #c9a054 55%, #8c6626);
    border-radius: 3px;
    padding: 0.4em 0.3em 0.34em;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.7), 0 3px 8px rgba(0, 0, 0, 0.5);
}
body[data-page="home"] .sb-bottle:hover,
body[data-page="home"] .sb-bottle:focus-visible { transform: translateY(-8px); }
body[data-page="home"] .sb-bottle:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.05); }
body[data-page="home"] .sb-bottle:focus-visible { outline: 2px solid #fff3c4; outline-offset: 3px; }

/* the chalkboard */
body[data-page="home"] .sb-chalk {
    position: relative;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(var(--sb-cream), 0.05), transparent 70%),
        #14100c;
    border: 10px solid;
    border-image: linear-gradient(180deg, #4a2412, #2c150a 50%, #170b05) 1;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(0, 0, 0, 0.5);
    color: var(--sb-chalk);
}
body[data-page="home"] .sb-chalk::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.86  0 0 0 0 0.75  0 0 0 0.10 0'/></filter><rect width='300' height='300' filter='url(%23c)'/></svg>");
    mix-blend-mode: screen;
}
body[data-page="home"] .sb-chalk-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr);
    gap: clamp(1.5rem, 4vw, 3rem);
}
body[data-page="home"] .sb-chalk h2 {
    margin: 0 0 0.4rem;
    font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.15 'Cinzel', serif;
    color: var(--sb-chalk);
    text-shadow: 0 0 1px rgba(233, 220, 191, 0.6);
}
body[data-page="home"] .sb-chalk h3 { margin: 0 0 0.5rem; font: 700 1.05rem/1.3 'Cinzel', serif; color: var(--sb-chalk); }
body[data-page="home"] .sb-chalk p { font: 400 1.05rem/1.5 'Crimson Text', Georgia, serif; color: rgba(233, 220, 191, 0.85); }
body[data-page="home"] .sb-chalk-rule { border: 0; border-top: 1px dashed rgba(233, 220, 191, 0.35); margin: 1.4rem 0; }

/* dispatch feed cards become chalk notices */
body[data-page="home"] .home-dispatch-cards { display: grid; gap: 1rem; }
body[data-page="home"] .dispatch-feed-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(233, 220, 191, 0.14);
    border-radius: 3px;
    padding: 0.7rem;
    color: var(--sb-chalk);
    text-decoration: none;
    box-shadow: none;
    transition: border-color 0.2s ease, transform 0.25s ease;
}
body[data-page="home"] .dispatch-feed-card:hover { border-color: rgba(240, 209, 138, 0.6); transform: translateX(3px); }
body[data-page="home"] .dispatch-feed-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; }
body[data-page="home"] .dispatch-feed-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="home"] .dispatch-feed-body { display: grid; gap: 0.2rem; }
body[data-page="home"] .dispatch-feed-category { font: 600 0.7rem/1.2 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-brass-hi); }
body[data-page="home"] .dispatch-feed-card h3 { margin: 0; font: 700 1.05rem/1.25 'Cinzel', serif; color: var(--sb-chalk); }
body[data-page="home"] .dispatch-feed-card p { margin: 0; font-size: 0.98rem; line-height: 1.45; color: rgba(233, 220, 191, 0.78); }
body[data-page="home"] .dispatch-feed-link { font: 600 0.72rem/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-brass-hi); }

/* newsletter on the board */
body[data-page="home"] .home-signup-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }
body[data-page="home"] .home-signup-form .gx-input {
    flex: 1 1 200px;
    min-height: 48px;
    padding: 0 0.9rem;
    font: 400 1rem/1 'Crimson Text', Georgia, serif;
    color: var(--sb-chalk);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(233, 220, 191, 0.28);
    border-radius: 3px;
}
body[data-page="home"] .home-signup-form .gx-input::placeholder { color: rgba(233, 220, 191, 0.55); }
body[data-page="home"] .home-signup-form .gx-input:focus-visible { outline: 2px solid #fff3c4; outline-offset: 2px; }
body[data-page="home"] .home-signup-form .gx-btn-gold {
    min-height: 48px;
    padding: 0 1.3rem;
    font: 400 0.82rem/1 'Rye', 'Cinzel', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
}
body[data-page="home"] .dispatch-signup-status { margin: 0.5rem 0 0; min-height: 1.2em; font: 400 0.95rem/1.4 'Crimson Text', Georgia, serif; color: var(--sb-brass-hi); }
body[data-page="home"] .dispatch-signup-status--error { color: #e78354; }
body[data-page="home"] .sb-chalk small { display: block; margin-top: 0.4rem; font: 400 0.9rem/1.4 'Crimson Text', Georgia, serif; color: rgba(233, 220, 191, 0.6); }

/* tonight's card (card of the day) */
body[data-page="home"] .sb-tonight { margin-top: 1.6rem; }
body[data-page="home"] .cotd-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
body[data-page="home"] .cotd-layout { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; text-align: left; }
body[data-page="home"] .cotd-obj .gng-card-obj { --gco-w: 128px; box-shadow: 0 16px 26px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 30px -4px rgba(var(--sb-amber), 0.18); }
body[data-page="home"] .cotd-name { font: 700 1.2rem/1.2 'Cinzel', serif; color: var(--sb-chalk); }
body[data-page="home"] .cotd-ability, body[data-page="home"] .cotd-flavor { color: rgba(233, 220, 191, 0.85); }
body[data-page="home"] .cotd-loading { color: rgba(233, 220, 191, 0.6); font: 400 1rem/1.4 'Crimson Text', Georgia, serif; }

/* last call */
body[data-page="home"] .sb-last-call {
    text-align: center;
    padding-bottom: calc(var(--sb-section) * 0.8);
}
body[data-page="home"] .sb-last-call h2 {
    margin: 0.8rem auto 0.6rem;
    font: 800 clamp(2rem, 5vw, 3.8rem)/1.05 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(var(--sb-cream), 0.9);
    text-shadow: 0 -1px 0 rgba(var(--sb-cream), 0.4), 0 2px 0 rgba(0, 0, 0, 0.9);
}
body[data-page="home"] .sb-last-call p { max-width: 48ch; margin: 0 auto 1.6rem; font: 400 1.1rem/1.6 'Crimson Text', Georgia, serif; color: var(--sb-ink-soft); }
body[data-page="home"] .sb-last-call .sb-taps { justify-content: center; }
body[data-page="home"] .sb-steam-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.2rem;
}
body[data-page="home"] .sb-steam-foot img { height: 26px; width: auto; opacity: 0.85; }
body[data-page="home"] .sb-steam-foot small { font: 400 0.8rem/1.4 'Inter', sans-serif; color: var(--sb-muted); }

/* ---------- motion gates ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-page="home"] .sb-light { animation: none; opacity: 1; }
    body[data-page="home"] .sb-shelf-card { animation: none; opacity: 1; transform: none; }
    body[data-page="home"] .sb-lamp::after { animation: none; }
    body[data-page="home"] .sb-reflection, body[data-page="home"] .sb-glare { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    body[data-page="home"] .sb-cabinet { grid-template-columns: minmax(0, 1fr) minmax(320px, 1.3fr) minmax(0, 1fr); }
    body[data-page="home"] .sb-bay { grid-template-rows: 1fr; }
    body[data-page="home"] .sb-bay .sb-shelf:nth-child(2) { display: none; }
    body[data-page="home"] .sb-shelf-card .gng-card-obj { --gco-w: clamp(92px, 11vw, 130px); }
    body[data-page="home"] .sb-counter-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    body[data-page="home"] .sb-taps, body[data-page="home"] .sb-tap-note { grid-column: auto; justify-self: center; text-align: center; max-width: none; }
    body[data-page="home"] .sb-counter-card { display: none; }
    body[data-page="home"] .sb-faction-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    body[data-page="home"] .sb-bar { min-height: 0; }
    body[data-page="home"] .sb-cabinet { grid-template-columns: 1fr; padding-inline: 0.6rem; }
    body[data-page="home"] .sb-bay { border-inline: 0; padding: 0; }
    body[data-page="home"] .sb-bay::before, body[data-page="home"] .sb-bay::after { display: none; }
    body[data-page="home"] .sb-bay--left {
        order: 2;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0.4rem 0 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body[data-page="home"] .sb-bay--left::-webkit-scrollbar { display: none; }
    body[data-page="home"] .sb-bay--right { display: none; }
    body[data-page="home"] .sb-bay--left .sb-shelf:nth-child(2) { display: flex; }
    body[data-page="home"] .sb-bay--left .sb-shelf {
        flex: 0 0 auto;
        justify-content: flex-start;
        padding: 0.8rem 0.5rem 16px;
        gap: 0.9rem;
    }
    body[data-page="home"] .sb-bay--left .sb-shelf::after { left: 2%; right: 2%; }
    body[data-page="home"] .sb-shelf-card { scroll-snap-align: center; flex: 0 0 auto; }
    body[data-page="home"] .sb-shelf-card .gng-card-obj { --gco-w: min(124px, 32vw); }
    body[data-page="home"] .sb-lamp::before, body[data-page="home"] .sb-lamp::after { display: none; }
    body[data-page="home"] .sb-lamp { height: 0; }
    body[data-page="home"] .sb-mirror { order: 1; margin: 0.4rem 0 0; border-width: 8px; }
    body[data-page="home"] .sb-lead { max-width: 34ch; }
    body[data-page="home"] .sb-proof-grid, body[data-page="home"] .sb-table-layout, body[data-page="home"] .sb-flip-layout, body[data-page="home"] .sb-chalk-grid { grid-template-columns: 1fr; }
    body[data-page="home"] .sb-faction-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-page="home"] .dispatch-feed-card { grid-template-columns: 96px 1fr; }
    body[data-page="home"] .sb-proof-shot figcaption span:last-child { display: none; }
    body[data-page="home"] .sb-proof-shot figcaption { font-size: 0.68rem; }
}
@media (max-width: 520px) {
    body[data-page="home"] .sb-taps { flex-direction: column; align-items: stretch; width: 100%; }
    body[data-page="home"] .sb-tap { justify-content: center; }
    body[data-page="home"] .sb-cornice { height: 52px; }
}

/* ---------- light theme: the same saloon by day ---------- */
html[data-theme="light"] body[data-page="home"] {
    --sb-ink: #2a2115;
    --sb-ink-soft: #4d3d24;
    --sb-muted: #6b5a3d;
    background: #efe3c8;
}
html[data-theme="light"] body[data-page="home"] .sb-bar,
html[data-theme="light"] body[data-page="home"] .sb-counter,
html[data-theme="light"] body[data-page="home"] .sb-cornice { color: #f4e9d3; }
html[data-theme="light"] body[data-page="home"] .sb-bar { background: #2c150a; }
html[data-theme="light"] body[data-page="home"] .sb-lead, html[data-theme="light"] body[data-page="home"] .sb-tap-note { color: #d9cbab; }
html[data-theme="light"] body[data-page="home"] .sb-lead strong, html[data-theme="light"] body[data-page="home"] .sb-tap-note b { color: #f4e9d3; }
html[data-theme="light"] body[data-page="home"] .sb-etched { color: rgba(255, 244, 214, 0.9); }
html[data-theme="light"] body[data-page="home"] .sb-head h2 { text-shadow: none; }
html[data-theme="light"] body[data-page="home"] .sb-aside h3, html[data-theme="light"] body[data-page="home"] .sb-link, html[data-theme="light"] body[data-page="home"] .sb-proof-list strong { color: #7d4f12; }
html[data-theme="light"] body[data-page="home"] .sb-link { border-bottom-color: rgba(125, 79, 18, 0.5); }
html[data-theme="light"] body[data-page="home"] .sb-last-call h2 { color: #2a2115; text-shadow: none; }

/* rarity plates on the chalkboard: brass, never teal or violet (teal is board position only) */
body[data-page="home"] .cotd-rarity--uncommon { color: var(--sb-brass); }
body[data-page="home"] .cotd-rarity--legendary { color: var(--sb-brass-hi); }
body[data-page="home"] .cotd-faction-badge { border-color: rgba(240, 209, 138, 0.5); color: var(--sb-brass-hi); }

/* by day the chalkboard and the board stay night islands */
html[data-theme="light"] body[data-page="home"] :is(.sb-chalk, .fp-board, .sb-faction-shelf) {
    --sb-ink: #f4e9d3;
    --sb-ink-soft: #d9cbab;
    --sb-muted: #b3a487;
    color: var(--sb-chalk);
}
html[data-theme="light"] body[data-page="home"] .sb-chalk .sb-link { color: var(--sb-brass-hi); border-bottom-color: rgba(240, 209, 138, 0.5); }
html[data-theme="light"] body[data-page="home"] .cotd-stat, html[data-theme="light"] body[data-page="home"] .cotd-name, html[data-theme="light"] body[data-page="home"] .cotd-ability, html[data-theme="light"] body[data-page="home"] .cotd-flavor { color: var(--sb-chalk); }

/* the flip demo deals real cards */
body[data-page="home"] .fp-flip-face:has(.fp-flip-obj) {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-areas: "obj kicker" "obj name" "obj stats" "obj text";
    align-content: start;
    column-gap: 1.3rem;
    row-gap: 0.45rem;
}
body[data-page="home"] .fp-flip-obj { grid-area: obj; align-self: start; }
body[data-page="home"] .fp-flip-obj .gng-card-obj { --gco-w: 150px; }
body[data-page="home"] .fp-flip-face .fp-flip-kicker { grid-area: kicker; }
body[data-page="home"] .fp-flip-face .fp-flip-name { grid-area: name; }
body[data-page="home"] .fp-flip-face .fp-flip-stats { grid-area: stats; }
body[data-page="home"] .fp-flip-face .fp-flip-text { grid-area: text; }
@media (max-width: 520px) {
    body[data-page="home"] .fp-flip-face:has(.fp-flip-obj) { grid-template-columns: 1fr; grid-template-areas: "obj" "kicker" "name" "stats" "text"; justify-items: start; }
}
body[data-page="home"] .footer-valve-notice { display: none; }

/* ==========================================================================
   THE REST OF THE SALOON — every interior page.
   Loaded after gng-gallery.css on all pages; `body ` prefixes win the
   specificity ties the old layer set up. The bar's grammar carries over:
   the wall, mahogany counters, brass plates and taps, gilt mirror frames
   around art, glass shelves under cards, the chalkboard for notices.
   ========================================================================== */

body {
    --sb-mah-deep: #170b05;
    --sb-mah: #2c150a;
    --sb-mah-hi: #4a2412;
    --sb-brass-hi: #f0d18a;
    --sb-brass: #c9a054;
    --sb-brass-deep: #8c6626;
    --sb-brass-ink: #241703;
    --sb-amber: 255, 179, 64;
    --sb-cream: 255, 244, 214;
    --sb-gilt: linear-gradient(160deg, #f0d18a 0%, #8c6626 22%, #f0d18a 40%, #5e4318 58%, #d9ac54 78%, #6b4e1f 100%);
    background:
        radial-gradient(70% 34% at 50% 0%, rgba(255, 179, 64, 0.10), transparent 70%),
        #0b0805;
}
body::after { opacity: 0.04; }
html[data-theme="light"] body { background: radial-gradient(70% 34% at 50% 0%, rgba(255, 179, 64, 0.16), transparent 70%), #efe3c8; }

/* ---------- the rail every page hangs from: a mahogany cornice under the nav ---------- */
@media (min-width: 900px) {
    body:not([data-page="home"]) main::before {
        top: 68px;
        height: 16px;
        background: linear-gradient(180deg, #1c1007 0%, #4a2412 30%, #2c150a 70%, #170b05 100%);
        border-bottom: 3px solid #a2793a;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        opacity: 1;
    }
}

/* ---------- plates replace every eyebrow, kicker and chip label ---------- */
body .gx-eyebrow,
body .gng-smallcaps,
body .tg-plaque,
body .gng-kicker,
body .play-poster-eyebrow,
body .store-live-kicker,
body .dsp-cat,
body .related-posts-kicker,
body .fpd-section-head .gx-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.42em 0.95em 0.36em;
    border: 0;
    border-radius: 3px;
    font: 600 0.74rem/1.2 'Inter', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-brass-ink) !important;
    background: linear-gradient(180deg, #f0d18a, #c9a054 55%, #8c6626);
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.35);
    margin-bottom: 1rem;
}
body .gx-eyebrow::before, body .gx-eyebrow::after,
body .gng-smallcaps::before, body .gng-smallcaps::after,
body .tg-plaque::before, body .tg-plaque::after,
body .gng-kicker::before, body .gng-kicker::after { content: none; }
body .gng-kicker { font-family: 'Rye', 'Cinzel', serif; font-weight: 400; font-size: 0.82rem; letter-spacing: 0.1em; }

/* ---------- headings are engraved in the glass ---------- */
body .gx-section-title, body .gng-sechead h2, body .gx-hero h1, body .dsp-masthead-title, body .dsp-hero h1, body .play-hero h1, body .rules-heading, body .fpd-section-head h2 {
    letter-spacing: 0.005em;
    text-shadow: 0 -1px 0 rgba(var(--sb-cream), 0.22), 0 2px 0 rgba(0, 0, 0, 0.85);
}
body .gx-ornament::before, body .gx-ornament::after { background: linear-gradient(90deg, transparent, #c9a054, transparent); height: 2px; }
body .gx-ornament span { background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a054 55%, #8c6626); }

/* ---------- content heroes are the mirror behind the bar ---------- */
body .gx-hero:not(.home-hero):not(.tg-hero),
body .dsp-hero,
body .dsp-masthead {
    position: relative;
    margin: 96px clamp(10px, 2.2vw, 30px) 0;
    padding-top: clamp(3rem, 6vw, 4.6rem);
    border: 10px solid;
    border-image: var(--sb-gilt) 1;
    border-radius: 0;
    background: #15120f;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7), inset 0 0 90px rgba(0, 0, 0, 0.7), 0 24px 50px rgba(0, 0, 0, 0.6);
    min-height: clamp(380px, 52vh, 600px);
    isolation: isolate;
    overflow: hidden;
}
body .gx-hero-bg img, body .dsp-hero-bg img, body .dsp-masthead-bg img {
    opacity: 0.78;
    filter: saturate(0.9) brightness(1.02);
    transform: none;
}
body .gx-hero-scrim, body .dsp-hero-scrim, body .dsp-masthead-scrim, body .fpd-hero-scrim {
    background:
        linear-gradient(180deg, rgba(7, 5, 3, 0.30) 0%, rgba(7, 5, 3, 0.22) 40%, rgba(7, 5, 3, 0.78) 82%, rgba(7, 5, 3, 0.92) 100%),
        radial-gradient(60% 50% at 50% 0%, rgba(var(--sb-amber), 0.16), transparent 70%);
}
/* glass glare across the mirror */
body .gx-hero:not(.home-hero)::after, body .dsp-hero::after, body .dsp-masthead::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(var(--sb-cream), 0.10) 48%, rgba(var(--sb-cream), 0.03) 53%, transparent 60%);
}
body .gx-hero:not(.home-hero) > .gx-container, body .gx-hero:not(.home-hero) > .store-hero-shell, body .gx-hero:not(.home-hero) > .fpd-hero-inner, body .dsp-hero-inner { position: relative; z-index: 1; }
body .gx-hero h1, body .dsp-masthead-title, body .dsp-hero h1 { color: rgba(var(--sb-cream), 0.92); }
@media (max-width: 899px) {
    body .gx-hero:not(.home-hero):not(.tg-hero), body .dsp-hero, body .dsp-masthead { margin: 68px 0 0; border-width: 8px 0; }
}

/* ---------- the play page: the game sits in the mirror, the button is the tap ---------- */
body .play-hero { padding-top: calc(68px + clamp(2rem, 5vw, 3.6rem)); background: linear-gradient(180deg, #170b05, #0b0805); }
body .play-trust span {
    padding: 0.4em 0.9em;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(240, 209, 138, 0.28);
    color: #d9cbab;
}
body .play-stage {
    border: 10px solid;
    border-image: var(--sb-gilt) 1;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7), 0 30px 60px rgba(0, 0, 0, 0.65);
}
body .play-stage.is-live { border: 0; }
body .play-launch-btn {
    font: 400 clamp(1rem, 1.8vw, 1.25rem)/1 'Rye', 'Cinzel', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-brass-ink);
    background: linear-gradient(180deg, #f0d18a 0%, #c9a054 48%, #8c6626 100%);
    border: 0;
    border-radius: 4px;
    padding: 1.05em 2.2em;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.75), inset 0 -3px 0 rgba(60, 40, 10, 0.45), 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px #5e4318;
    text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.45);
}
body .play-launch-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.75), inset 0 -3px 0 rgba(60, 40, 10, 0.45), 0 12px 26px rgba(0, 0, 0, 0.6), 0 0 0 1px #5e4318; }
body .play-band--alt, body .gx-section[style*="background: rgba(8"], body .gx-section[style*="background:rgba(8"], body .gx-section-tight[style*="background: var(--gx-bg-1)"] {
    background: linear-gradient(180deg, #24120a 0%, #170b05 100%) !important;
    border-block: 3px solid #5e4318 !important;
    box-shadow: inset 0 2px 0 rgba(var(--sb-cream), 0.10);
}

/* ---------- taps: every gold button, every ghost ---------- */
body .gx-btn-gold, body .btn-primary, body .ore-item-btn, body .store-hero-actions .gx-btn-gold, body .dsp-wire-form button {
    font-family: 'Rye', 'Cinzel', serif !important;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.86rem;
    min-height: 50px;
    border-radius: 4px !important;
    color: var(--sb-brass-ink) !important;
    background: linear-gradient(180deg, #f0d18a 0%, #c9a054 48%, #8c6626 100%) !important;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.75), inset 0 -3px 0 rgba(60, 40, 10, 0.45), 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px #5e4318 !important;
    text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.45);
}
body .gx-btn-gold:hover, body .btn-primary:hover { filter: brightness(1.08); background: linear-gradient(180deg, #f0d18a 0%, #c9a054 48%, #8c6626 100%) !important; }
body .gx-btn-ghost, body .btn-secondary {
    font-family: 'Rye', 'Cinzel', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.86rem;
    min-height: 50px;
    border-radius: 4px;
    color: var(--sb-brass-hi);
    background: linear-gradient(180deg, rgba(20, 12, 6, 0.9), rgba(8, 5, 2, 0.9));
    border: 1px solid #6b4e1f;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.12), 0 6px 16px rgba(0, 0, 0, 0.5);
}
body .gx-btn-ghost:hover, body .btn-secondary:hover { color: #fff3c4; background: linear-gradient(180deg, rgba(28, 17, 8, 0.95), rgba(10, 6, 3, 0.95)); }
body .gx-btn:focus-visible, body .play-launch-btn:focus-visible { outline: 2px solid #fff3c4; outline-offset: 3px; }

/* ---------- counter panels: text tiles sit on the wood ---------- */
body .gx-card, body .gx-panel, body .tg-label, body .fpd-feature, body .fpd-keyword, body .keyword-item,
body .dsp-stack, body .dsp-toc, body .dsp-colophon, body .dsp-wire, body .dsp-dealin, body .dsp-trail,
body .gng-app-panel, body .online-status-card, body .store-product-card, body .fpd-card, body .play-feature,
body .home-server-card, body .home-signup, body .home-quick-link, body .dispatch-feed-empty, body .store-live-card, body .rules-jumpbar {
    border-radius: 6px;
    border: 1px solid rgba(var(--sb-cream), 0.10);
    background: linear-gradient(180deg, #24120a, #170b05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--sb-cream), 0.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body .gx-card:hover, body .fpd-keyword:hover, body .home-quick-link:hover, body .store-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(240, 209, 138, 0.45);
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(var(--sb-cream), 0.10);
}
body .gx-card::before, body .gx-corners::after { display: none; }

/* ---------- gilt frames around anything that carries art ---------- */
body .play-shot, body .dispatch-feed-card, body .dsp-card, body .dsp-lead, body .dsp-adj, body .card-type-art, body:not([data-page="home"]) .cotd-card, body .faction-block picture, body .faction-block > img, body .fpd-lore img, body .home-showcase-shot {
    border: 8px solid;
    border-image: var(--sb-gilt) 1;
    border-radius: 0;
    background: #000;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7), 0 24px 50px rgba(0, 0, 0, 0.6);
}
body .dsp-card:hover, body .dsp-lead:hover, body .dsp-adj:hover, body a.dispatch-feed-card:hover { transform: translateY(-4px); border-image: var(--sb-gilt) 1; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7), 0 34px 60px rgba(0, 0, 0, 0.66); }
body .play-shot figcaption, body .home-showcase-shot figcaption {
    background: linear-gradient(180deg, #f0d18a, #c9a054 55%, #8c6626);
    color: var(--sb-brass-ink);
    font: 600 0.74rem/1.3 'Inter', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.4);
}

/* ---------- the cards wall is a wall of shelves: every card backlit ---------- */
body .gallery-card, body .fpd-cards .gng-card-obj, body .gallery-grid .gng-card-obj {
    box-shadow: 0 18px 30px -8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 22px 34px -4px rgba(var(--sb-amber), 0.20);
}
body .gallery-grid { row-gap: clamp(2rem, 4vw, 3rem); }
body .gallery-card:hover { transform: translateY(-8px); box-shadow: 0 26px 40px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 44px -4px rgba(var(--sb-amber), 0.30); }

/* ---------- faction portraits become bottles on the lower shelf ---------- */
body .home-faction-tile { border: 0; border-radius: 4px 4px 2px 2px; background: #0b0805; box-shadow: 0 16px 26px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 30px -4px rgba(var(--sb-amber), 0.14); }
body .home-faction-tile span { background: linear-gradient(180deg, #f0d18a, #c9a054 55%, #8c6626); color: var(--sb-brass-ink); font: 600 0.72rem/1.2 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px; padding: 0.4em 0.5em 0.34em; box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.7), 0 3px 8px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.35); }

/* ---------- status chips and badges: brass or dark glass, never teal/emerald ---------- */
body .gx-badge, body .status-chip, body .dsp-chip, body .gallery-stat-pill, body .store-currency-badge, body .fpd-pip, body .gc-type-badge {
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(240, 209, 138, 0.35);
    color: var(--sb-brass-hi);
}
body .status-chip--live, body .gx-badge-teal, body .gx-badge-green { background: linear-gradient(180deg, #f0d18a, #c9a054 55%, #8c6626); color: var(--sb-brass-ink); border-color: #5e4318; }

/* ---------- chalk for the newsletter and mail-in panels ---------- */
body .dsp-wire, body .home-signup {
    background: radial-gradient(80% 60% at 50% 0%, rgba(var(--sb-cream), 0.05), transparent 70%), #14100c;
    border: 10px solid;
    border-image: linear-gradient(180deg, #4a2412, #2c150a 50%, #170b05) 1;
    border-radius: 0;
    color: #e9dcbf;
}
body .dsp-wire input, body .home-signup input, body .gx-input { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(233, 220, 191, 0.28); border-radius: 3px; color: #e9dcbf; min-height: 48px; }

/* ---------- nav and footer: the bar's rails ---------- */
body .main-nav { background: linear-gradient(180deg, rgba(11, 8, 5, 0.96), rgba(11, 8, 5, 0.86)); border-bottom: 0; box-shadow: none; }
body .nav-play-link, body .main-nav .nav-play-link {
    font-family: 'Rye', 'Cinzel', serif !important;
    font-weight: 400;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #f0d18a, #c9a054 48%, #8c6626) !important;
    color: var(--sb-brass-ink) !important;
    border: 0;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.75), inset 0 -2px 0 rgba(60, 40, 10, 0.45), 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px #5e4318 !important;
}
body .site-footer-v2, body .site-footer {
    border-top: 12px solid;
    border-image: linear-gradient(180deg, #f0d18a 0%, #c9a054 45%, #5e4318 100%) 1;
    background: linear-gradient(180deg, #3a1f0e 0%, #2c150a 30%, #170b05 100%);
    box-shadow: inset 0 2px 0 rgba(var(--sb-cream), 0.18);
}
body .site-footer-v2::before { display: none; }
body .footer-col h4, body .footer-col-heading, body .footer-factions-label { color: var(--sb-brass-hi); font-family: 'Cinzel', serif; letter-spacing: 0.08em; }

/* ---------- light theme: the saloon by day ---------- */
html[data-theme="light"] body .gx-card, html[data-theme="light"] body .gx-panel, html[data-theme="light"] body .tg-label, html[data-theme="light"] body .fpd-feature, html[data-theme="light"] body .fpd-keyword, html[data-theme="light"] body .keyword-item,
html[data-theme="light"] body .dsp-stack, html[data-theme="light"] body .dsp-toc, html[data-theme="light"] body .dsp-colophon, html[data-theme="light"] body .dsp-dealin, html[data-theme="light"] body .dsp-trail,
html[data-theme="light"] body .gng-app-panel, html[data-theme="light"] body .online-status-card, html[data-theme="light"] body .store-product-card, html[data-theme="light"] body .fpd-card, html[data-theme="light"] body .play-feature,
html[data-theme="light"] body .home-server-card, html[data-theme="light"] body .home-quick-link, html[data-theme="light"] body .store-live-card, html[data-theme="light"] body .rules-jumpbar {
    background: linear-gradient(180deg, #f7efdd, #e9dcc0);
    border-color: rgba(125, 79, 18, 0.25);
    box-shadow: 0 14px 30px rgba(60, 40, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #2a2115;
}
html[data-theme="light"] body .play-band--alt, html[data-theme="light"] body .gx-section[style*="background: rgba(8"], html[data-theme="light"] body .gx-section[style*="background:rgba(8"], html[data-theme="light"] body .gx-section-tight[style*="background: var(--gx-bg-1)"] {
    background: linear-gradient(180deg, #e9dcc0, #e0d0ae) !important;
    border-block-color: #b48853 !important;
}
html[data-theme="light"] body .play-hero { background: linear-gradient(180deg, #e9dcc0, #efe3c8); }
html[data-theme="light"] body .play-trust span { background: rgba(255, 255, 255, 0.35); border-color: rgba(125, 79, 18, 0.35); color: #4d3d24; }
html[data-theme="light"] body .gx-hero h1, html[data-theme="light"] body .dsp-masthead-title, html[data-theme="light"] body .dsp-hero h1 { color: rgba(var(--sb-cream), 0.92); }
html[data-theme="light"] body .gx-hero .gx-lead, html[data-theme="light"] body .gx-hero p, html[data-theme="light"] body .dsp-hero p, html[data-theme="light"] body .dsp-masthead-sub { color: #d9cbab; }
html[data-theme="light"] body .gx-badge, html[data-theme="light"] body .status-chip, html[data-theme="light"] body .dsp-chip, html[data-theme="light"] body .gallery-stat-pill, html[data-theme="light"] body .fpd-pip, html[data-theme="light"] body .gc-type-badge { background: rgba(255, 255, 255, 0.4); border-color: rgba(125, 79, 18, 0.4); color: #7d4f12; }
html[data-theme="light"] body .dsp-wire, html[data-theme="light"] body .home-signup { color: #e9dcbf; }
html[data-theme="light"] body .gx-btn-ghost, html[data-theme="light"] body .btn-secondary { color: #7d4f12; background: rgba(255, 255, 255, 0.35); border-color: #927039; }
html[data-theme="light"] body .gx-section-title, html[data-theme="light"] body .gng-sechead h2, html[data-theme="light"] body .rules-heading, html[data-theme="light"] body .fpd-section-head h2 { text-shadow: none; }

/* ---------- plate labels lose their trailing rivet; no gradient text anywhere ---------- */
body .gx-eyebrow.gx-eyebrow-line::after, body .gx-eyebrow.gx-eyebrow-line::before { content: none; }
body .gx-hero h1, body .store-hero h1, body .lore-hero h1, body .hy-hero h1, body .gx-section-title, body .gng-steam-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    filter: none;
}
/* ---------- the cards wall: filters and chips in brass and dark glass ---------- */
body .filter-btn, body .gallery-filters button {
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(20, 12, 6, 0.9), rgba(8, 5, 2, 0.9));
    border: 1px solid rgba(240, 209, 138, 0.3);
    color: var(--sb-brass-hi);
}
body .filter-btn.active, body .filter-btn[aria-pressed="true"], body .gallery-filters button.active {
    background: linear-gradient(180deg, #f0d18a, #c9a054 55%, #8c6626);
    color: var(--sb-brass-ink);
    border-color: #5e4318;
    text-shadow: 0 1px 0 rgba(var(--sb-cream), 0.4);
}
body .gc-online-status, body .gc-badges span, body .gc-badges .gc-faction, body .gc-type-badge, body .gc-rarity {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(240, 209, 138, 0.35) !important;
    color: var(--sb-brass-hi) !important;
    border-radius: 3px;
}
body .gc-online-status--legal, body .gc-badges .gc-rarity--legendary { border-color: #c9a054 !important; color: #fff3c4 !important; }
body .filter-btn.active::before { display: none; }
body .filter-btn.active { color: var(--sb-brass-ink) !important; }
body .btn-secondary {
    background: linear-gradient(180deg, rgba(20, 12, 6, 0.9), rgba(8, 5, 2, 0.9)) !important;
    color: var(--sb-brass-hi) !important;
    border: 1px solid #6b4e1f !important;
    box-shadow: inset 0 1px 0 rgba(var(--sb-cream), 0.12), 0 6px 16px rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-theme="light"] body .btn-secondary { background: rgba(255, 255, 255, 0.35) !important; color: #7d4f12 !important; border-color: #927039 !important; box-shadow: none !important; }