/* ════════════════════════════════════════════════════════════════
   GOBLINS & GUNSLINGERS — THE TINTYPE GALLERY (2026-09)
   Loads LAST on every page. Authoritative finish over main /
   frontier-redesign / site-polish / gng-2026 / frontier-press /
   gng-awards / gng-dispatch. Vocabulary: tg-* here; gx-* and gng-*
   remain valid primitives and are re-dressed below.

   THESIS: every card, faction and scene is a hung object — framed,
   cased, labelled on brass — on a velvet wall. Refused: the painted
   vista with copy-left, the eyebrow over every section.
   OWN-WORLD: velvet ink wall, gilt frame rings, brass plaques,
   oxblood union cases, glass glare. Gold = action + metal. Ember =
   heat. Cyan = position only.
   STORY: sitting room → the cased card → play free → the table under
   glass, the flip, the rogues' gallery → join.
   FIRST VIEWPORT: copy left (plaque, wordmark, lead, gold CTA, brass
   plate); right, the open union case with Marshal Colt McRae, a framed
   mesa painting behind, two small cased portraits at its shoulder; the
   case pulls back from too-close on load.
   FORM: grounded direction 7 (tintype gallery) with the cropped-giant
   staging as an entrance, seed d05f9e55.
   ════════════════════════════════════════════════════════════════ */

:root {
    --tg-wall: #0b0805;
    --tg-wall-2: #120d08;
    --tg-mat: #16110b;
    --tg-brass-ink: #241703;
    --tg-brass: linear-gradient(180deg, #e8c77c 0%, #c39a52 55%, #96702f 100%);
    --tg-brass-hi: linear-gradient(180deg, #f3d27a 0%, #d3aa55 45%, #a97d2d 100%);
    --tg-gilt-1: #6b4e1f;
    --tg-gilt-2: #b8924a;
    --tg-gilt-3: #4a3312;
    --tg-gilt-4: #d9ac54;
    --tg-gilt-5: #2a1c08;
    --tg-case: #2a1408;
    --tg-case-edge: #4a2a12;
    --tg-velvet: #1d0d08;
    --tg-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* one frame ring, reused by every hung object */
    --tg-ring:
        0 0 0 1px var(--tg-gilt-1),
        0 0 0 4px var(--tg-gilt-2),
        0 0 0 5px var(--tg-gilt-3),
        0 0 0 7px var(--tg-gilt-4),
        0 0 0 8px var(--tg-gilt-5);
    --tg-ring-shadow: 0 22px 44px rgba(0, 0, 0, 0.62), 0 4px 10px rgba(0, 0, 0, 0.5);
    --tg-ring-inset: inset 0 0 0 1px rgba(243, 207, 117, 0.28);
    /* the lighter weight: a wall label (text-only tiles) — a thin dark ring, no gilt */
    --tg-ring-thin: 0 0 0 1px var(--tg-gilt-1), 0 0 0 2px var(--tg-gilt-5);
    --tg-label-shadow: 0 10px 24px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ── The wall ──────────────────────────────────────────────────── */

body {
    background:
        radial-gradient(1200px 640px at 50% -12%, rgba(217, 172, 84, 0.13), transparent 62%),
        radial-gradient(900px 520px at 100% 100%, rgba(194, 87, 47, 0.07), transparent 65%),
        repeating-linear-gradient(115deg, rgba(255, 244, 214, 0.034) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #110c08 0%, var(--tg-wall) 48%, #070503 100%);
    background-attachment: scroll;
}
body::after { opacity: 0.06; }

/* ── Plaques replace eyebrows ──────────────────────────────────── */

.gx-eyebrow,
.gng-smallcaps,
.tg-plaque,
.related-posts-kicker,
.fp-deck .gx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4em 0.95em 0.36em;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--tg-brass-ink) !important;
    background: var(--tg-brass);
    border: 1px solid rgba(96, 66, 22, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 214, 0.7),
        inset 0 -1px 0 rgba(90, 60, 18, 0.65),
        0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
    margin-bottom: 0.9rem;
}
/* rivets */
.gx-eyebrow::before,
.gx-eyebrow::after,
.gng-smallcaps::before,
.gng-smallcaps::after,
.tg-plaque::before,
.tg-plaque::after {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8a6430, #3a2508 70%);
    box-shadow: 0 1px 0 rgba(255, 244, 214, 0.35);
    opacity: 1;
}
.gng-sechead .gng-smallcaps::before,
.gng-sechead .gng-smallcaps::after { width: 5px; height: 5px; background: radial-gradient(circle at 35% 30%, #8a6430, #3a2508 70%); }
.gng-sechead .gng-smallcaps { color: var(--tg-brass-ink); }
.gx-eyebrow.gx-eyebrow-line::after { width: 5px; height: 5px; background: radial-gradient(circle at 35% 30%, #8a6430, #3a2508 70%); }

/* Poster kicker: Rye engraved on a wider plate */
.gng-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5em 1.15em 0.42em;
    border-radius: 3px;
    font-family: 'Rye', 'Cinzel', serif;
    font-size: clamp(0.82rem, 1.2vw, 0.92rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tg-brass-ink);
    background: var(--tg-brass);
    border: 1px solid rgba(96, 66, 22, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 214, 0.7),
        inset 0 -1px 0 rgba(90, 60, 18, 0.65),
        0 3px 8px rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
    margin-bottom: 1.1rem;
}
@media (min-width: 1100px) { .tg-hero-copy .gng-kicker { white-space: nowrap; font-size: 0.82rem; } }
.gng-kicker::before,
.gng-kicker::after {
    content: "";
    width: 5px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8a6430, #3a2508 70%);
    box-shadow: 0 1px 0 rgba(255, 244, 214, 0.35);
}

/* Section titles are engraved, and the ornament becomes a brass bar. */
.gx-section-title,
.gng-sechead h2,
h2.gx-section-title {
    text-shadow: 0 1px 0 rgba(255, 236, 190, 0.12), 0 -1px 0 rgba(0, 0, 0, 0.6), 0 6px 22px rgba(0, 0, 0, 0.5);
}
.gx-ornament { margin: 1.2rem 0 1.8rem; gap: 0.7rem; }
.gx-ornament::before,
.gx-ornament::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(217, 172, 84, 0.55), rgba(217, 172, 84, 0.55), transparent);
}
.gx-ornament span {
    width: 11px; height: 11px;
    transform: none;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9ae, #d9ac54 55%, #7a5420);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.gng-sechead .gng-smallcaps::before,
.gng-sechead .gng-smallcaps::after { background: radial-gradient(circle at 35% 30%, #8a6430, #3a2508 70%); }

/* ── Frames: everything hung on the wall ──────────────────────── */

/* Wall labels: text-only tiles get the thin ring, so a gilt frame keeps meaning "an object worth hanging". */
body .tg-label,
body .gx-card,
body .gx-panel,
body .home-server-card,
body .home-signup,
body .home-quick-link,
body .dispatch-feed-empty,
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 {
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: var(--tg-mat);
    box-shadow: var(--tg-ring-thin), var(--tg-label-shadow), var(--tg-ring-inset);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Hung objects: anything that carries art, a board, or a card gets the gilt ring. */
body .tg-frame,
body .home-pillar,
body .home-showcase-shot,
body .dispatch-feed-card,
body .cotd-card,
body .fp-board,
body .dsp-card,
body .dsp-lead,
body .dsp-adj {
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: var(--tg-mat);
    box-shadow: var(--tg-ring), var(--tg-ring-shadow), var(--tg-ring-inset);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* the old top gradient line and corner marks are frame-work now */
.gx-card::before { display: none; }
.gx-corners::after { display: none; }
body .gx-card:hover,
body .home-quick-link:hover,
body .fpd-keyword:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: var(--tg-ring-thin), 0 18px 34px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45), var(--tg-ring-inset);
}
body .dsp-card:hover,
body .dsp-lead:hover,
body .dsp-adj:hover,
body .home-pillar:hover,
body a.dispatch-feed-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: var(--tg-ring), 0 30px 60px rgba(0, 0, 0, 0.66), 0 8px 16px rgba(0, 0, 0, 0.5), var(--tg-ring-inset);
}
/* frames need room for their ring */
.gx-grid, .gx-grid-2, .gx-grid-3, .gx-grid-4, .dsp-grid, .home-dispatch-cards, .related-posts-grid { gap: clamp(1.6rem, 3vw, 2.4rem); }
.gx-section .gx-container > .gx-grid-4,
.gx-section .gx-container > .gx-grid-3,
.gx-section .gx-container > .gx-grid-2 { padding: 8px; }

/* glass glare on hover for framed art */
.tg-glare { position: relative; }
.tg-glare::after,
.home-pillar-media::after,
.home-showcase-shot::after,
.dsp-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 214, 0.14) 48%, rgba(255, 244, 214, 0.05) 54%, transparent 62%);
    background-size: 260% 100%;
    background-position: 120% 0;
    transition: background-position 0.9s var(--tg-ease);
}
.gx-card:hover .home-pillar-media::after,
.home-showcase-shot:hover::after,
.dsp-card:hover .dsp-art::before,
.dsp-lead:hover .dsp-art::before,
.tg-glare:hover::after { background-position: -60% 0; }

/* ── Brass buttons ─────────────────────────────────────────────── */

.gx-btn, .btn {
    min-height: 46px;
    border-radius: 3px;
    letter-spacing: 0.12em;
}
.gx-btn-gold, .btn-primary, .hero-actions .btn-primary,
.gx-btn-gold:hover, .btn-primary:hover {
    background: var(--tg-brass-hi) !important;
    color: var(--tg-brass-ink) !important;
    border: 1px solid #6b4e1f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 220, 0.75),
        inset 0 -2px 0 rgba(90, 60, 18, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 0 rgba(255, 246, 220, 0.55);
    font-weight: 700 !important;
}
.gx-btn-gold:hover, .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 220, 0.85),
        inset 0 -2px 0 rgba(90, 60, 18, 0.35),
        0 14px 26px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(217, 172, 84, 0.28),
        0 0 0 1px rgba(0, 0, 0, 0.4) !important;
}
.gx-btn-ghost, .btn-secondary,
.gx-btn-ghost:hover, .btn-secondary:hover {
    color: var(--gx-gold-hi);
    background: rgba(20, 14, 8, 0.72);
    border: 1px solid rgba(217, 172, 84, 0.55);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(243, 207, 117, 0.12), 0 4px 12px rgba(0, 0, 0, 0.45);
}
.gx-btn-ghost:hover, .btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--gx-gold-hi);
    background: rgba(28, 20, 10, 0.85);
}
.gx-btn-rust { border-radius: 3px; }

/* ── Nav: the brass rail ───────────────────────────────────────── */

.main-nav {
    background: linear-gradient(180deg, rgba(14, 10, 6, 0.97), rgba(11, 8, 5, 0.92));
    border-bottom: 1px solid rgba(217, 172, 84, 0.42);
    box-shadow: 0 1px 0 rgba(255, 236, 190, 0.06) inset, 0 12px 40px rgba(0, 0, 0, 0.5);
}
.main-nav .nav-inner { box-sizing: border-box; }
.main-nav .nav-links > li > a,
.fp-nav-more > button {
    font-size: 0.84rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0;
}
.nav-play-link,
.main-nav .nav-play-link {
    border-radius: 3px;
    background: var(--tg-brass-hi) !important;
    color: var(--tg-brass-ink) !important;
    border: 1px solid #6b4e1f;
    box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.75), inset 0 -2px 0 rgba(90, 60, 18, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 1px 0 rgba(255, 246, 220, 0.5);
}
.theme-toggle, .nav-toggle { min-width: 44px; min-height: 44px; border-radius: 3px; }
@media (max-width: 720px) {
    .main-nav .nav-inner {
        width: 100%;
        max-width: 100%;
        padding: 0 14px;
        gap: 0.6rem;
    }
    .nav-logo { min-width: 0; }
    .nav-logo img, .nav-logo-wordmark { max-width: min(46vw, 190px); }
}

/* ── The sitting room: home hero ───────────────────────────────── */

.tg-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(68px + clamp(2.6rem, 6vw, 4.6rem)) 0 clamp(3rem, 6vw, 4.8rem);
    min-height: clamp(600px, 88vh, 820px);
    display: flex;
    align-items: center;
    background:
        radial-gradient(58% 60% at 66% 22%, rgba(217, 172, 84, 0.20), transparent 68%),
        radial-gradient(42% 46% at 14% 88%, rgba(194, 87, 47, 0.14), transparent 70%),
        repeating-linear-gradient(115deg, rgba(255, 244, 214, 0.034) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #14100a 0%, var(--tg-wall) 60%, #070503 100%);
    border-bottom: 1px solid rgba(217, 172, 84, 0.35);
}
/* the picture rail: a brass line just under the nav that everything hangs from */
.tg-hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 84px;
    height: 3px;
    background: linear-gradient(180deg, #d9ac54, #7a5420);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    opacity: 0.9;
}
/* gallery spotlight cone */
.tg-hero-light {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(640px 900px at 68% -18%, rgba(255, 228, 160, 0.16), rgba(255, 228, 160, 0.05) 45%, transparent 70%);
    mix-blend-mode: screen;
}
.tg-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(320px, 1.02fr);
    gap: clamp(1.6rem, 4vw, 3.6rem);
    align-items: center;
}
.tg-hero-copy { max-width: 600px; }
.tg-hero-copy h1 {
    font-size: var(--gx-display-xl);
    line-height: 1.02;
    margin: 0.2rem 0 1rem;
    text-shadow: 0 1px 0 rgba(255, 236, 190, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.6);
}
.tg-hero-copy .gx-lead { max-width: 46ch; text-shadow: none; }
.tg-hero-copy .gx-actions { margin-top: 1.5rem; }
.tg-hero-copy .gng-plate { margin-top: 1.7rem; }

/* the salon at the right: painting behind, two small cased portraits, the open case in front */
.tg-sitting {
    position: relative;
    height: clamp(420px, 44vw, 560px);
    perspective: 1400px;
}
.tg-hang {
    position: absolute;
    margin: 0;
    background: var(--tg-mat);
    border-radius: 2px;
    box-shadow: var(--tg-ring), var(--tg-ring-shadow);
}
.tg-hang--vista {
    left: 4%;
    top: 0;
    width: 72%;
    aspect-ratio: 1280 / 990;
    overflow: hidden;
    transform: rotate(-1.2deg);
}
.tg-hang--vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-hang--vista::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7, 5, 3, 0.05), rgba(7, 5, 3, 0.35));
}
.tg-hang--a, .tg-hang--b {
    padding: 8px;
    --gco-w: clamp(84px, 8.4vw, 118px);
}
.tg-hang--a { right: 2%; top: 6%; transform: rotate(2deg); }
.tg-hang--b { left: 0; right: auto; bottom: 2%; transform: rotate(-2.5deg); }
.tg-hang .gng-card-obj { box-shadow: none; }

.tg-case {
    position: absolute;
    left: 24%;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: min(100%, clamp(400px, 40vw, 520px));
    padding: 12px;
    border-radius: 12px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 220, 160, 0.08), transparent 55%),
        repeating-linear-gradient(35deg, rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 8px),
        linear-gradient(160deg, #3a1d0d, var(--tg-case) 55%, #1c0d05);
    border: 1px solid #5a3818;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 160, 0.16),
        0 40px 70px rgba(0, 0, 0, 0.7),
        0 10px 22px rgba(0, 0, 0, 0.55);
    transform-origin: 60% 60%;
}
/* the hinge */
.tg-case::before {
    content: "";
    position: absolute;
    left: calc(50% - 3px);
    top: 10%;
    bottom: 10%;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, #7a5420, #d9ac54 20%, #7a5420 40%, #d9ac54 60%, #7a5420 80%, #d9ac54);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
    z-index: 2;
}
.tg-case-leaf {
    position: relative;
    border-radius: 6px;
    min-height: 100%;
    background:
        repeating-linear-gradient(115deg, rgba(255, 244, 214, 0.03) 0 2px, transparent 2px 6px),
        radial-gradient(90% 70% at 50% 40%, #2b120a, var(--tg-velvet) 75%);
    box-shadow: inset 0 0 0 1px rgba(217, 172, 84, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.7);
}
.tg-case-leaf--left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.2rem 1rem;
    text-align: center;
}
.tg-case-medallion {
    display: grid;
    place-items: center;
    width: clamp(64px, 7vw, 84px);
    height: clamp(64px, 7vw, 84px);
    border-radius: 50%;
    font-family: 'Rye', 'Cinzel', serif;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    color: var(--tg-brass-ink);
    background: radial-gradient(circle at 32% 28%, #ffe9ae, #d9ac54 58%, #7a5420);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(217, 172, 84, 0.55), 0 8px 18px rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 0 rgba(255, 246, 220, 0.5);
}
.tg-case-plate {
    margin: 0;
    font-family: 'Rye', 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tg-brass-ink);
    background: var(--tg-brass);
    padding: 0.4em 0.8em 0.32em;
    border-radius: 2px;
    border: 1px solid rgba(96, 66, 22, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.65), 0 2px 5px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
}
.tg-case-note {
    margin: 0;
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--gx-muted);
    line-height: 1.4;
}
.tg-case-leaf--right {
    display: grid;
    place-items: center;
    padding: 12px;
}
.tg-case-mat {
    position: relative;
    padding: 10px;
    border-radius: 4px;
    background: linear-gradient(160deg, #d9ac54, #8a6423 40%, #f3cf75 60%, #a87c2e);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 236, 190, 0.35), 0 10px 20px rgba(0, 0, 0, 0.55);
}
.tg-case-mat .gng-card-obj {
    --gco-w: clamp(150px, 15vw, 200px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.tg-case-mat .gng-card-obj:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); }
/* glass over the tintype */
.tg-case-mat::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: calc(var(--gco-w, 200px) * 0.055);
    pointer-events: none;
    z-index: 6;
    background: linear-gradient(118deg, transparent 40%, rgba(255, 244, 214, 0.16) 50%, rgba(255, 244, 214, 0.04) 56%, transparent 64%);
    background-size: 260% 100%;
    background-position: 120% 0;
    transition: background-position 1s var(--tg-ease);
}
.tg-case:hover .tg-case-mat::after { background-position: -60% 0; }

/* Entrance: the case starts too close and pulls back to rest; the small frames follow. */
body.gx-motion .tg-case { animation: tg-pullback 1.15s var(--tg-ease) both; }
body.gx-motion .tg-hang--a,
body.gx-motion .tg-hang--b { animation: tg-hang-in 0.8s var(--tg-ease) both; animation-delay: 0.75s; }
body.gx-motion .tg-hang--vista { animation: tg-fade 0.9s var(--tg-ease) both; animation-delay: 0.35s; }
@keyframes tg-pullback {
    from { transform: scale(2.15) translate(-14%, 8%); opacity: 0; }
    to { transform: scale(1) translate(0, 0); opacity: 1; }
}
@keyframes tg-hang-in {
    from { opacity: 0; transform: translateY(14px) rotate(0deg); }
}
@keyframes tg-fade { from { opacity: 0; } }
.home-scroll-hint { bottom: 1rem; }

@media (max-width: 1060px) {
    .tg-hero { min-height: 0; padding-bottom: 2.4rem; }
    .tg-hero-layout { grid-template-columns: 1fr; gap: 2.4rem; }
    .tg-hero-copy { max-width: 640px; }
    .tg-sitting { height: clamp(380px, 78vw, 520px); max-width: 620px; margin-inline: auto; width: 100%; }
    .tg-case { left: 10%; width: min(80%, 480px); }
    .tg-hang--vista { left: 0; width: 70%; }
    .tg-hang--a { right: 0; }
    .tg-hang--b { left: 0; right: auto; bottom: 0; }
    .home-scroll-hint { display: none; }
}
@media (max-width: 560px) {
    .tg-hero::before { top: 68px; }
    .tg-sitting { height: 400px; }
    .tg-hang--vista { width: 76%; left: 0; }
    .tg-hang--a, .tg-hang--b { --gco-w: 78px; padding: 6px; }
    .tg-hang--a { right: 0; top: 2%; }
    .tg-hang--b { display: none; }
    .tg-case { left: 4%; width: 92%; padding: 10px; gap: 6px; }
    .tg-case-leaf--left { padding: 0.9rem 0.6rem; gap: 0.5rem; }
    .tg-case-note { display: none; }
    .tg-case-mat .gng-card-obj { --gco-w: 128px; }
    .tg-case-mat { padding: 7px; }
    .tg-hero-copy .gx-actions .gx-btn { width: 100%; justify-content: center; }
    .tg-hero-copy .gng-plate { display: flex; width: 100%; }
    .tg-hero-copy .gng-plate > * { flex: 1 1 0; padding: 0.55rem 0.5rem; }
    body.gx-motion .tg-case { animation-name: tg-pullback-sm; }
}
@keyframes tg-pullback-sm {
    from { transform: scale(1.6) translate(-6%, 6%); opacity: 0; }
    to { transform: scale(1) translate(0, 0); opacity: 1; }
}

/* ── Content-page heroes become matted plates ──────────────────── */

@media (min-width: 900px) {
    .gx-hero:not(.home-hero):not(.tg-hero),
    .gng-masthead,
    .dsp-masthead,
    .dsp-hero {
        margin: 84px clamp(16px, 2.4vw, 32px) 0;
        padding-top: clamp(3rem, 6vw, 4.6rem);
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.6);
        box-shadow: var(--tg-ring), var(--tg-ring-shadow);
        min-height: clamp(400px, 56vh, 620px);
    }
    .dsp-hero { padding-top: clamp(2.6rem, 5vw, 4rem); min-height: 0; }
    .dsp-masthead { min-height: 0; }
    /* the rail the plate hangs from */
    body:not([data-page="home"]) main::before {
        content: "";
        display: block;
        position: absolute;
        left: 0; right: 0;
        top: 80px;
        height: 3px;
        background: linear-gradient(180deg, #d9ac54, #7a5420);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
        opacity: 0.85;
        pointer-events: none;
    }
    body:not([data-page="home"]) main { position: relative; }
}
.gx-hero-scrim {
    background:
        linear-gradient(180deg, rgba(7, 5, 3, 0.62) 0%, rgba(7, 5, 3, 0.28) 40%, rgba(7, 5, 3, 0.86) 88%, var(--tg-mat) 100%),
        radial-gradient(900px 480px at 22% 60%, rgba(7, 5, 3, 0.5), transparent 70%);
}

/* ── The rogues' gallery: faction portraits ────────────────────── */

body .home-faction-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.2rem);
    padding: 10px 8px 22px;
}
body .home-faction-tile {
    flex: 0 0 auto;
    width: clamp(168px, 17vw, 224px);
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: var(--tg-mat);
    box-shadow: var(--tg-ring), var(--tg-ring-shadow), var(--tg-ring-inset);
    overflow: visible;
    transition: transform 0.4s var(--tg-ease), box-shadow 0.4s var(--tg-ease);
}
body .home-faction-tile picture, body .home-faction-tile img {
    border-radius: 1px;
    overflow: hidden;
}
body .home-faction-tile::after {
    inset: 0;
    border-radius: 1px;
    background: linear-gradient(180deg, transparent 55%, rgba(7, 5, 3, 0.55) 100%);
}
/* brass nameplate on the frame's foot */
body .home-faction-tile span {
    left: 50%;
    right: auto;
    bottom: -14px;
    transform: translateX(-50%);
    z-index: 3;
    white-space: nowrap;
    padding: 0.32em 0.9em 0.28em;
    border-radius: 2px;
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tg-brass-ink);
    background: var(--tg-brass);
    border: 1px solid rgba(96, 66, 22, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.65), 0 3px 8px rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
}
body .home-faction-tile:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: var(--tg-ring), 0 34px 64px rgba(0, 0, 0, 0.68), 0 0 34px rgba(217, 172, 84, 0.22), var(--tg-ring-inset);
}
@media (max-width: 720px) {
    body .home-faction-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1.6rem;
        padding: 12px 24px 30px;
        margin-inline: calc(50% - 50vw);
        width: 100vw;
    }
    body .home-faction-row::-webkit-scrollbar { display: none; }
    body .home-faction-tile { width: 62vw; max-width: 250px; scroll-snap-align: center; }
    body .home-faction-tile:hover { transform: none; }
}

/* ── The table under glass, the flip, the salon ────────────────── */

body .fp-board { padding: 1.2rem; box-sizing: border-box; }
[data-fp-flip] .fp-flip-card,
.fp-flip-card {
    border-radius: 3px;
}
/* scene cards become framed paintings */
.mq-card {
    border-radius: 2px;
    border: 0;
    box-shadow: var(--tg-ring), 0 24px 44px rgba(0, 0, 0, 0.65);
    background-position: center 30%;
}
.mq-card::after { border-radius: 2px; box-shadow: inset 0 -24px 30px rgba(8, 5, 2, 0.6); }
.mq-card--lead { box-shadow: var(--tg-ring), 0 30px 60px rgba(0, 0, 0, 0.72), 0 0 30px rgba(243, 207, 117, 0.18); }
.home-marquee-copy h2 {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--gx-gold-hi);
    filter: none;
    text-shadow: 0 1px 0 rgba(255, 236, 190, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.6), 0 8px 26px rgba(0, 0, 0, 0.6);
}

/* pillars: plate on top, label below */
.home-pillar { border-radius: 3px; }
.home-pillar-media { position: relative; border-bottom: 1px solid rgba(217, 172, 84, 0.35); }
.home-pillar-media .gx-badge { border-radius: 2px; }
.home-showcase-shot { border-radius: 3px; }
.home-showcase-shot figcaption { background: var(--tg-brass); color: var(--tg-brass-ink); border-top: 1px solid rgba(96, 66, 22, 0.95); text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45); font-weight: 700; }

/* dispatch feed thumbnails and blog frames */
.dispatch-feed-art, .dsp-art, .dsp-stack-item .dsp-art, .dsp-adj .dsp-art { border-radius: 1px; }
.dsp-lead .dsp-art, .dsp-card .dsp-art { border-bottom: 1px solid rgba(217, 172, 84, 0.3); }
.dsp-sections { border-bottom: 1px solid rgba(217, 172, 84, 0.3); }

/* card of the day sits in a case */
.cotd-card { background: var(--tg-mat); }
.cotd-obj .gng-card-obj { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 0 9px #d9ac54, 0 0 0 10px #4a3312, 0 20px 40px rgba(0, 0, 0, 0.6); }

/* stat strip: brass plate feel */
.home-stats { background: linear-gradient(180deg, rgba(20, 15, 10, 0.6), rgba(11, 8, 5, 0.6)); border-block: 1px solid rgba(217, 172, 84, 0.3); }

/* gx-badge chips flatten to plates */
.gx-badge { border-radius: 2px; }

/* ── Footer: museum colophon ───────────────────────────────────── */

.site-footer-v2 {
    border-top: 3px solid;
    border-image: linear-gradient(90deg, transparent, #d9ac54 20%, #f3cf75 50%, #d9ac54 80%, transparent) 1;
    background: linear-gradient(180deg, #0f0b07, #070503);
}
.footer-col-heading, .footer-factions-label { color: var(--gx-gold); }

/* ── Fixes that stand regardless of world ──────────────────────── */

/* tables scroll inside their own box on narrow screens */
@media (max-width: 760px) {
    table.gx-table:not(.keyword-matrix), .post-body-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* fans drop to three cards below 720px; nothing may leave the viewport */
@media (max-width: 720px) {
    :root { --gco-w: 132px; }
    .gng-fan { height: calc(var(--gco-w) * 1.5); max-width: 100%; overflow: visible; }
    .gng-fan .gng-card-obj:nth-child(1), .gng-fan .gng-card-obj:nth-child(5) { display: none; }
    .gng-fan .gng-card-obj:nth-child(2) { --fan-rot: -11deg; --fan-x: calc(var(--gco-w) * -0.55); }
    .gng-fan .gng-card-obj:nth-child(4) { --fan-rot: 11deg; --fan-x: calc(var(--gco-w) * 0.55); }
    body, html { overflow-x: hidden; }
}
/* one mobile CTA bar at a time */
body[data-page="store"] .mobile-cta-bar,
body[data-page="play"] .mobile-cta-bar,
body[data-page="outpost"] .mobile-cta-bar,
body:has(.pwa-install-banner) .mobile-cta-bar { display: none !important; }
.mobile-cta-bar .btn { border-radius: 3px !important; min-height: 48px; }
/* tap targets */
.blog-topic, .gx-badge a, .footer-legal a, .footer-col a, .footer-factions-list a { min-height: 32px; display: inline-flex; align-items: center; }
.footer-col a, .footer-factions-list a { min-height: 36px; }
.post-share a { min-height: 44px; }

/* ── Light theme: the gallery by day ───────────────────────────── */

html[data-theme="light"] {
    --tg-wall: #efe3c8;
    --tg-wall-2: #f6ecd7;
    --tg-mat: #fbf5e8;
    --tg-ring-shadow: 0 18px 36px rgba(90, 66, 28, 0.22), 0 4px 10px rgba(90, 66, 28, 0.16);
}
html[data-theme="light"] body {
    background:
        radial-gradient(1100px 520px at 12% -4%, rgba(217, 172, 84, 0.18), transparent 70%),
        repeating-linear-gradient(115deg, rgba(90, 66, 28, 0.025) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #f7efdd 0%, #f1e6cf 50%, #e9dcc0 100%);
    color: #2a2115;
}
html[data-theme="light"] .tg-hero {
    background:
        radial-gradient(58% 60% at 66% 22%, rgba(217, 172, 84, 0.28), transparent 68%),
        repeating-linear-gradient(115deg, rgba(90, 66, 28, 0.03) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #f7efdd 0%, #efe3c8 60%, #e9dcc0 100%);
    border-bottom-color: rgba(140, 100, 40, 0.35);
}
html[data-theme="light"] .tg-hero-light { display: none; }
html[data-theme="light"] .tg-hero-copy h1 { color: #2a2115; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .tg-case-note { color: #6b5a3d; }
html[data-theme="light"] .gx-card, html[data-theme="light"] .gx-panel,
html[data-theme="light"] .tg-frame, html[data-theme="light"] .home-pillar,
html[data-theme="light"] .dsp-card, html[data-theme="light"] .dsp-lead, html[data-theme="light"] .dsp-stack,
html[data-theme="light"] .dsp-adj, html[data-theme="light"] .dsp-toc, html[data-theme="light"] .dsp-colophon,
html[data-theme="light"] .dsp-wire, html[data-theme="light"] .dsp-dealin, html[data-theme="light"] .dsp-trail,
html[data-theme="light"] .home-faction-tile, html[data-theme="light"] .cotd-card, html[data-theme="light"] .fp-board,
html[data-theme="light"] .home-server-card, html[data-theme="light"] .home-signup, html[data-theme="light"] .home-quick-link,
html[data-theme="light"] .dispatch-feed-card, html[data-theme="light"] .fpd-feature, html[data-theme="light"] .fpd-keyword,
html[data-theme="light"] .keyword-item, html[data-theme="light"] .tg-label {
    background: var(--tg-mat);
    border-color: rgba(90, 66, 28, 0.35);
}
html[data-theme="light"] .gx-eyebrow, html[data-theme="light"] .gng-smallcaps, html[data-theme="light"] .gng-kicker,
html[data-theme="light"] .tg-plaque, html[data-theme="light"] .gng-sechead .gng-smallcaps { color: var(--tg-brass-ink); }
html[data-theme="light"] .gx-btn-ghost, html[data-theme="light"] .btn-secondary {
    color: #7d4f12;
    background: rgba(255, 250, 238, 0.85);
    border-color: rgba(140, 100, 40, 0.5);
}
html[data-theme="light"] .main-nav {
    background: linear-gradient(180deg, rgba(247, 239, 221, 0.97), rgba(243, 233, 211, 0.92));
    border-bottom-color: rgba(140, 100, 40, 0.35);
}
html[data-theme="light"] .site-footer-v2 { background: linear-gradient(180deg, #efe3c8, #e6d8ba); }
html[data-theme="light"] .home-stats { background: rgba(240, 229, 205, 0.55); border-color: rgba(140, 100, 40, 0.3); }
html[data-theme="light"] .gx-section-title, html[data-theme="light"] .gng-sechead h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .home-marquee-copy h2 { color: #7d4f12; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }

/* ── Motion hygiene ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    body.gx-motion .tg-case, body.gx-motion .tg-hang--a, body.gx-motion .tg-hang--b, body.gx-motion .tg-hang--vista { animation: none; opacity: 1; }
    .tg-case-mat::after, .home-pillar-media::after, .home-showcase-shot::after, .dsp-art::before { transition: none; }
}
@media (hover: none) and (pointer: coarse) {
    .tg-sitting { perspective: none; }
}

/* ── The board must fit a phone ────────────────────────────────── */
@media (max-width: 480px) {
    body .fp-board { padding: 0.8rem; max-width: 100%; overflow: hidden; }
    .fp-board-row { grid-template-columns: 58px repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; }
    .fp-board-row--high { grid-template-columns: 58px repeat(2, minmax(0, 1fr)) !important; }
    .fp-board-rowlabel { font-size: 0.6rem !important; letter-spacing: 0.06em !important; }
    .fp-board-slot, .fp-lane { min-width: 0 !important; font-size: 0.6rem !important; padding: 0.4rem 0.2rem !important; }
    .fp-board-layout { gap: 1.2rem; }
}

/* ── Light theme: bands, heroes, labels that the older layers left dark ── */
html[data-theme="light"] section[style*="gx-bg-1"],
html[data-theme="light"] .gx-section[style*="gx-bg-1"],
html[data-theme="light"] .gx-section-tight[style*="gx-bg-1"] {
    background: rgba(240, 229, 205, 0.6) !important;
    border-color: rgba(140, 100, 40, 0.3) !important;
}
html[data-theme="light"] .gx-hero:not(.tg-hero) h1,
html[data-theme="light"] .gx-hero:not(.tg-hero) .gx-lead,
html[data-theme="light"] .gx-hero:not(.tg-hero) p,
html[data-theme="light"] .gx-hero:not(.tg-hero) .fpd-epithet,
html[data-theme="light"] .gx-hero:not(.tg-hero) .fpd-breadcrumb,
html[data-theme="light"] .gx-hero:not(.tg-hero) .fpd-breadcrumb a,
html[data-theme="light"] .gx-hero:not(.tg-hero) li,
html[data-theme="light"] .gx-hero:not(.tg-hero) .gx-badge { color: #fff8ea; }
html[data-theme="light"] .gx-hero:not(.tg-hero) .gx-hero-scrim,
html[data-theme="light"] .fpd-hero-scrim {
    background:
        linear-gradient(180deg, rgba(28, 19, 8, 0.72) 0%, rgba(28, 19, 8, 0.5) 40%, rgba(28, 19, 8, 0.9) 100%),
        radial-gradient(900px 480px at 22% 60%, rgba(28, 19, 8, 0.55), transparent 70%);
}
html[data-theme="light"] .gx-card h3, html[data-theme="light"] .gx-card strong,
html[data-theme="light"] .fpd-feature strong, html[data-theme="light"] .fpd-keyword strong,
html[data-theme="light"] .home-pillar-body h3, html[data-theme="light"] .dispatch-feed-card h3,
html[data-theme="light"] .home-signup h3, html[data-theme="light"] .home-server-card h3,
html[data-theme="light"] .home-quick-link strong, html[data-theme="light"] .cotd-name,
html[data-theme="light"] .fp-board-legend h3, html[data-theme="light"] .fp-flip-aside h3,
html[data-theme="light"] .gx-panel h3, html[data-theme="light"] .gx-panel strong { color: #2a2115; }
html[data-theme="light"] .gx-card p, html[data-theme="light"] .gx-panel p,
html[data-theme="light"] .home-feature-list li, html[data-theme="light"] .home-hytale-points li,
html[data-theme="light"] .fp-board-legend dd, html[data-theme="light"] .fp-flip-aside p,
html[data-theme="light"] .cotd-ability, html[data-theme="light"] .cotd-stat,
html[data-theme="light"] .home-server-meta, html[data-theme="light"] .home-quick-link small,
html[data-theme="light"] .dispatch-feed-card p, html[data-theme="light"] .home-signup p,
html[data-theme="light"] .home-signup-privacy, html[data-theme="light"] .dispatch-feed-meta,
html[data-theme="light"] .home-showcase-copy .gx-lead { color: #4d3d24; }
html[data-theme="light"] .home-server-meta strong, html[data-theme="light"] .cotd-flavor { color: #2a2115; }
html[data-theme="light"] .gx-input,
html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="search"], html[data-theme="light"] input[type="password"],
html[data-theme="light"] select, html[data-theme="light"] textarea {
    background: #fffaf0;
    color: #2a2115;
    border-color: rgba(140, 100, 40, 0.45);
}
html[data-theme="light"] .home-server-address { color: #7d4f12; background: rgba(90, 66, 28, 0.08); border-color: rgba(140, 100, 40, 0.4); }
html[data-theme="light"] .cotd-stat { background: rgba(90, 66, 28, 0.08); }
html[data-theme="light"] .dispatch-feed-category { color: #7d4f12; background: rgba(217, 172, 84, 0.16); border-color: rgba(140, 100, 40, 0.4); }
html[data-theme="light"] .dispatch-feed-link, html[data-theme="light"] .dsp-read { color: #7d4f12; }

/* glass glare on the portraits too (picture is display:contents, so the tile carries it) */
body .home-faction-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 1px;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 214, 0.16) 48%, rgba(255, 244, 214, 0.05) 54%, transparent 62%);
    background-size: 260% 100%;
    background-position: 120% 0;
    transition: background-position 0.9s var(--tg-ease);
}
body .home-faction-tile:hover::before { background-position: -60% 0; }

/* light theme: the scene-card salon hangs on the same cream wall */
html[data-theme="light"] .home-marquee-bg {
    background:
        radial-gradient(120% 80% at 50% 118%, rgba(194, 87, 47, 0.14), transparent 62%),
        linear-gradient(180deg, #e9dcc0 0%, #f1e6cf 100%);
}
html[data-theme="light"] .home-marquee::after {
    background: linear-gradient(180deg, #efe3c8 0%, rgba(239, 227, 200, 0.3) 30%, rgba(239, 227, 200, 0.3) 70%, #efe3c8 100%);
}
html[data-theme="light"] .home-marquee-copy .gx-lead { color: #4d3d24; }
html[data-theme="light"] .home-marquee { border-color: rgba(140, 100, 40, 0.3); }

/* ════════════════════════════════════════════════════════════════
   FINISH REVIEW (2026-09-07) — fixes ranked by the reviewer
   ════════════════════════════════════════════════════════════════ */

/* ── The wall is lit from above in every room, not only the hero ─ */
.gx-section, .gx-section-tight { position: relative; isolation: isolate; }
.gx-section::before, .gx-section-tight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(217, 172, 84, 0.075), transparent 70%),
        repeating-linear-gradient(115deg, rgba(255, 244, 214, 0.022) 0 2px, transparent 2px 7px);
}

/* ── The printed card's type line clears the ATK / DEF pips ─────── */
body .gng-card-obj .gco-type {
    left: 2.85em;
    right: 2.85em;
    text-align: center;
    font-size: 0.56em;
    letter-spacing: 0.09em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Off-palette actions: emerald and cyan leave the gallery ────── */
.main-nav .nav-links a.active,
.main-nav .nav-links > li > a.active {
    color: var(--gx-gold-hi) !important;
    text-shadow: none !important;
}
.main-nav .nav-links a.active::after {
    background: linear-gradient(90deg, transparent, var(--gx-gold), transparent) !important;
}
.fp-btn--cyan, .fp-btn--cyan:hover {
    background: var(--tg-brass-hi);
    color: var(--tg-brass-ink);
    border-color: #6b4e1f;
    box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.75), inset 0 -2px 0 rgba(90, 60, 18, 0.35), 0 6px 14px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(255, 246, 220, 0.5);
}
.fp-flip-plate { display: none; }
.fp-flip-kicker { color: var(--gx-gold); }
.fp-flip-face--golem .fp-flip-kicker { color: #e78354; }
body .status-chip--live, body .support-badge--live {
    color: var(--gx-gold-hi);
    border-color: rgba(217, 172, 84, 0.4);
    background: rgba(217, 172, 84, 0.08);
}
/* the top stripe on the run/online cards and the community badge were cyan decoration */
body .online-status-card::before, body .supported-card::before { background: linear-gradient(90deg, var(--gx-gold-deep), var(--gx-gold-hi), var(--gx-gold-deep)); }
body .gx-badge-teal { color: var(--gx-gold-hi); border-color: rgba(217, 172, 84, 0.4); }

/* ── Salon hang: one large frame, small cased tiles, a wide one ─── */
@media (min-width: 1024px) {
    body[data-page="home"] .gx-grid-4:has(> .home-pillar) {
        grid-template-columns: 1.45fr 1fr 1fr;
        grid-template-rows: auto auto;
        align-items: stretch;
    }
    /* the portrait banner (physical cards) is the tall frame; the client shot and the RPG book hang beside it; Hytale is the wide plate */
    body[data-page="home"] .home-pillar:nth-child(2) { grid-column: 1; grid-row: 1 / span 2; }
    body[data-page="home"] .home-pillar:nth-child(1) { grid-column: 2; grid-row: 1; }
    body[data-page="home"] .home-pillar:nth-child(3) { grid-column: 3; grid-row: 1; }
    body[data-page="home"] .home-pillar:nth-child(2) .home-pillar-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 380px; }
    body[data-page="home"] .home-pillar:nth-child(2) .home-pillar-media img { object-position: center 18%; }
    body[data-page="home"] .home-pillar:nth-child(2) .home-pillar-body { flex: 0 0 auto; }
    body[data-page="home"] .home-pillar:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; flex-direction: row; }
    body[data-page="home"] .home-pillar:nth-child(4) .home-pillar-media {
        flex: 0 0 44%;
        aspect-ratio: auto;
        border-bottom: 0;
        border-right: 1px solid rgba(217, 172, 84, 0.35);
    }
}

/* ── The poster kicker is one line on phones ────────────────────── */
@media (max-width: 560px) {
    .tg-hero-copy .gng-kicker { font-size: 0.7rem; padding: 0.4em 0.8em 0.34em; letter-spacing: 0.06em; }
}

/* ── Faction fans fit the phone ─────────────────────────────────── */
@media (max-width: 720px) {
    body .gng-fan, body .fpd-fan { --gco-w: min(132px, 34vw); }
}

/* ── Small ember text, the epithet, the board's micro labels ─────── */
.fpd-keyword strong {
    color: var(--gx-gold-hi);
    color: color-mix(in srgb, var(--fpd-accent, var(--gx-gold-hi)) 62%, #fff3dc);
    font-size: 0.9rem;
}
.fpd-epithet {
    color: color-mix(in srgb, var(--fpd-accent, var(--gx-gold-hi)) 70%, #fff3dc);
    padding: 0.3em 0.75em 0.3em 0.6em;
    border-radius: 2px;
    background: rgba(7, 5, 3, 0.55);
    border: 1px solid rgba(217, 172, 84, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8);
}
body .board-slot-label { font-size: max(0.62rem, 9px); opacity: 0.9; }
body .board-divider-label { font-size: max(0.62rem, 9px); }

/* ── Server address and the keyword matrix on phones ───────────── */
@media (max-width: 480px) {
    body .home-server-address {
        font-size: 0.8rem;
        white-space: nowrap;
        word-break: normal;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 760px) {
    .keyword-matrix-wrap {
        -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
        mask-image: linear-gradient(90deg, #000 86%, transparent);
    }
}

/* ── Store on a phone: buttons keep their height, the shell centres ─ */
@media (max-width: 768px) {
    body[data-page="store"] .store-live-actions .btn,
    body[data-page="store"] .store-hero-actions .btn { flex: 0 0 auto; width: 100%; }
    body[data-page="store"] .store-hero-shell { margin-inline: auto; }
}
body[data-page="store"] .booster-buy-btn[disabled],
body[data-page="store"] .booster-buy-btn:disabled {
    opacity: 1;
    background: rgba(20, 14, 8, 0.7) !important;
    color: var(--gx-muted) !important;
    border: 1px solid rgba(217, 172, 84, 0.3) !important;
    box-shadow: none !important;
    text-shadow: none;
}

/* ── The cards wall on a phone: two cased tintypes per row ──────── */
@media (max-width: 600px) {
    body .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body .gallery-card .gc-flavor { display: none; }
    body .gallery-card .gc-ability {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: 0.78rem;
        line-height: 1.4;
        padding: 0.4rem 0.6rem;
    }
    body .gallery-card-flip.touch-selected .gc-ability { -webkit-line-clamp: unset; display: block; }
    body .gallery-card .gc-art { aspect-ratio: 4 / 3; margin: 0.35rem 0 0.45rem; }
    body .gallery-card .gc-name { font-size: 0.88rem; }
    body .gallery-card .gc-header { padding: 0.55rem 0.6rem 0; }
}

/* ── Tap targets reach 44px ─────────────────────────────────────── */
.footer-socials a { width: 44px; height: 44px; }
.dsp-chip { min-height: 44px; }
body[data-page="store"] .store-currency-cta { min-height: 44px; }
.fpd-breadcrumb a, .dsp-crumbs a { display: inline-flex; align-items: center; min-height: 32px; }

/* ── Light theme, token level: the gallery by day ───────────────── */
html[data-theme="light"] {
    --gx-bg-0: #f7efdd;
    --gx-bg-1: #efe3c8;
    --gx-bg-2: #e9dcc0;
    --gx-ink: #2a2115;
    --gx-ink-soft: #3d3121;
    --gx-muted: #6b5a3d;
    --gx-faint: #7a6848;
    --gx-gold: #8a5d16;
    --gx-gold-hi: #7d4f12;
    --gx-gold-deep: #6b4510;
    --gx-teal: #0f6f74;
    --gx-violet: #5a3fa3;
    --gx-green: #3f7a2c;
    --gx-rust: #a3431f;
    --gx-panel: #fbf5e8;
    --gx-panel-solid: #fbf5e8;
    --gx-card: #fbf5e8;
    --gx-glass: rgba(251, 245, 232, 0.92);
    --gx-hairline: rgba(90, 66, 28, 0.22);
    --gx-hairline-strong: rgba(90, 66, 28, 0.4);
    --gx-glow-gold: 0 0 28px rgba(217, 172, 84, 0.25);
    --gx-shadow-sm: 0 4px 18px rgba(90, 66, 28, 0.14);
    --gx-shadow: 0 18px 50px rgba(90, 66, 28, 0.18);
    --gx-shadow-lg: 0 30px 90px rgba(90, 66, 28, 0.22);
}
/* printed cards, cases, scene paintings and the dark hero plates keep the night palette */
html[data-theme="light"] :is(.gng-card-obj, .tg-case, .mq-card, .home-faction-tile, .gx-hero:not(.tg-hero), .gng-masthead, .dsp-masthead, .dsp-hero, .fpd-hero) {
    --gx-ink: #f4e9d3;
    --gx-ink-soft: #d9cbab;
    --gx-muted: #b3a487;
    --gx-faint: #9a8b6e;
    --gx-gold: #d9ac54;
    --gx-gold-hi: #f3cf75;
    --gx-gold-deep: #a87c2e;
    --gx-hairline: rgba(217, 172, 84, 0.16);
    --gx-hairline-strong: rgba(217, 172, 84, 0.34);
}
/* gold fills stay gold by day (the tokens above are now text colours) */
html[data-theme="light"] :is(.gx-ornament span, .nav-logo-mana-icon, .footer-mana-icon, .gold-inline-icon, .stat-orb--gold, .store-currency-dot--packs, .dsp-colophon-mark) {
    background: radial-gradient(circle at 32% 28%, #ffe9ae, #d9ac54 55%, #a87c2e);
}
/* (pseudo-elements cannot live inside :is(), so this is a plain list) */
html[data-theme="light"] .turn-phases .phase::before,
html[data-theme="light"] .rules-list li::before,
html[data-theme="light"] .available-now-badge,
html[data-theme="light"] .coming-soon-icon,
html[data-theme="light"] .booster-card--featured::before,
html[data-theme="light"] .app-command-badge--primary,
html[data-theme="light"] .hy-tier-flag,
html[data-theme="light"] .hy-tier-btn,
html[data-theme="light"] .gng-steam-list li::before,
html[data-theme="light"] .gng-steam-subhead::before,
html[data-theme="light"] .fp-board-sheriff-badge,
html[data-theme="light"] .skip-link {
    background: linear-gradient(135deg, #f3cf75, #d9ac54 55%, #a87c2e);
}
html[data-theme="light"] .dsp-progress { background: linear-gradient(90deg, #a87c2e, #d9ac54); }
html[data-theme="light"] .site-footer-v2 { border-image: linear-gradient(90deg, transparent, #a87c2e 20%, #d9ac54 50%, #a87c2e 80%, transparent) 1; }
/* chrome that the older layers left dark */
html[data-theme="light"] .theme-toggle, html[data-theme="light"] .nav-toggle {
    background: #fbf5e8;
    color: #4d3d24;
    border-color: rgba(90, 66, 28, 0.35);
}
html[data-theme="light"] .theme-toggle svg, html[data-theme="light"] .nav-toggle span { color: #4d3d24; background-color: currentColor; }
html[data-theme="light"] .theme-toggle svg { background-color: transparent; }
html[data-theme="light"] .main-nav .nav-links a.active,
html[data-theme="light"] .main-nav .nav-links > li > a.active { color: #7d4f12 !important; }
html[data-theme="light"] .gx-badge {
    background: rgba(255, 250, 238, 0.92);
    border-color: rgba(90, 66, 28, 0.3);
    color: #4d3d24;
}
html[data-theme="light"] .gx-badge-live { color: #2f6b22; }
html[data-theme="light"] .gx-badge-violet { color: #5a3fa3; }
html[data-theme="light"] .gx-badge-rust { color: #a3431f; }
html[data-theme="light"] .gx-badge-teal { color: #7d4f12; }
html[data-theme="light"] .gx-badge-gold { color: #7d4f12; }
html[data-theme="light"] .home-marquee { background: #e9dcc0; }
html[data-theme="light"] .fp-flip-face {
    background: linear-gradient(180deg, #fbf5e8, #f1e6cf);
    border-color: rgba(90, 66, 28, 0.35);
}
html[data-theme="light"] .turn-phases { background: #fbf5e8; border-color: rgba(90, 66, 28, 0.3); }
html[data-theme="light"] .turn-phases .phase { border-color: rgba(90, 66, 28, 0.22); }
html[data-theme="light"] .footer-col-heading, html[data-theme="light"] .footer-factions-label { color: #7d4f12; }
html[data-theme="light"] .fpd-keyword strong { color: color-mix(in srgb, var(--fpd-accent, #7d4f12) 55%, #2a2115); }
html[data-theme="light"] .status-chip--live, html[data-theme="light"] .support-badge--live { color: #7d4f12; background: rgba(217, 172, 84, 0.16); }
html[data-theme="light"] .fp-flip-kicker { color: #7d4f12; }
html[data-theme="light"] .fp-flip-face--golem .fp-flip-kicker { color: #a3431f; }
html[data-theme="light"] .gx-section::before, html[data-theme="light"] .gx-section-tight::before {
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(217, 172, 84, 0.16), transparent 70%),
        repeating-linear-gradient(115deg, rgba(90, 66, 28, 0.022) 0 2px, transparent 2px 7px);
}
html[data-theme="light"] .keyword-matrix-wrap, html[data-theme="light"] .gx-table { background: #fbf5e8; }
/* the translucent dark bands pages set inline become cream washes by day */
html[data-theme="light"] section[style*="rgba(8,6,4"],
html[data-theme="light"] section[style*="rgba(8, 6, 4"] {
    background: rgba(240, 229, 205, 0.6) !important;
}


/* HIGH NOON — frontier field guide. Existing ink, gold and ember palette.
   Broad artwork and open editorial spacing replace the enclosed hero case. */
body .hn-hero { position: relative; min-height: 0; padding: 8rem 0 0; overflow: clip; background: var(--tg-wall); }
.hn-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: clamp(2rem, 4vw, 4.5rem); }
.hn-hero-copy { position: relative; z-index: 2; padding-block: 1.5rem 3rem; }
.hn-eyebrow { margin: 0 0 1.5rem; font: 600 .875rem/1.5 'Inter', sans-serif; color: var(--gx-gold); letter-spacing: .08em; text-transform: uppercase; }
body .hn-hero h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .2em; margin: 0; font: 800 clamp(2.9rem, 5.6vw, 5.4rem)/1.06 'Cinzel', Georgia, serif; letter-spacing: -.05em; text-transform: none; color: var(--gx-ink); text-shadow: none; }
body .hn-hero h1 span { display: block; }
body .hn-hero h1 em { font: italic 400 .7em/1 'Crimson Text', Georgia, serif; color: var(--gx-gold); }
body .hn-hero h1 span:last-child { flex-basis: 100%; }
.hn-hero-deck { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.25 'Crimson Text', Georgia, serif; color: var(--gx-gold-hi); margin: 1.6rem 0 1rem; }
body .hn-hero .gx-lead { font-size: 1.15rem; max-width: 42ch; color: var(--gx-muted); }
body .hn-hero .gx-actions { margin-top: 1.8rem; gap: .75rem; }
.hn-platforms { font: 400 .875rem/1.8 'Inter', sans-serif; color: var(--gx-muted); margin-top: 1.2rem; }
.hn-hero-art { position: relative; min-width: 0; margin: 0 0 4rem; aspect-ratio: 4 / 4.3; }
.hn-hero-art > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; border-radius: 2px; }
.hn-hero-art figcaption { position: absolute; inset: auto 0 0; padding: 3rem 1.2rem 1rem; display: flex; justify-content: space-between; gap: 1rem; background: linear-gradient(transparent, rgba(7,5,3,.94)); color: #f3cf75; font: 500 .75rem/1.5 'Inter',sans-serif; }
.hn-hero-hand { position: absolute; right: -1rem; bottom: -3rem; display: flex; align-items: end; filter: drop-shadow(0 15px 15px rgba(0,0,0,.6)); }
.hn-hero-hand > div { --gco-w: clamp(108px, 12vw, 172px); transform: rotate(-12deg); }
.hn-hero-hand > div:last-child { margin-left: -3rem; transform: rotate(8deg) translateY(.5rem); }
.hn-hero-ledger { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.4rem; border-top: 1px solid var(--gx-hairline); }
.hn-hero-ledger p { display: flex; align-items: center; gap: .8rem; margin: 0; }
.hn-hero-ledger strong { font: 700 1.8rem/1.2 'Cinzel',serif; color: var(--gx-gold-hi); }
.hn-hero-ledger span, .hn-hero-ledger a { font: 500 .875rem/1.5 'Inter',sans-serif; }
.hn-hero-ledger p span { color: var(--gx-muted); max-width: 7rem; }
.hn-hero-ledger a { color: var(--gx-gold-hi); padding: .7rem 0; }
.hn-hero-ledger a span { margin-left: 1rem; }
html[data-theme="light"] body .hn-hero { background: #efe3c8; }
@media (max-width: 900px) {
    body .hn-hero { padding-top: 6rem; }
    .hn-hero-grid { grid-template-columns: 1fr; gap: 0; }
    .hn-hero-copy { max-width: 42rem; }
    body .hn-hero h1 { font-size: clamp(2.65rem, 8.5vw, 4.8rem); }
    body .hn-hero h1 span:last-child { flex-basis: auto; }
    .hn-hero-art { aspect-ratio: 16/10; margin-bottom: 3.5rem; }
    .hn-hero-art > picture > img { object-position: center 50%; }
    .hn-hero-hand { right: 1rem; }
    .hn-hero-hand > div { --gco-w: clamp(108px, 18vw, 150px); }
}
@media (max-width: 560px) {
    body .hn-hero h1 { display: block; font-size: clamp(2.4rem, 10.5vw, 3.6rem); }
    body .hn-hero h1 em { display: block; margin: .1em 0; }
    .hn-hero-copy { padding-top: 0; padding-bottom: 2rem; }
    .hn-eyebrow { font-size: .8125rem; max-width: 29ch; }
    body .hn-hero .gx-actions { display: grid; }
    body .hn-hero .gx-btn { width: 100%; justify-content: center; }
    .hn-hero-art figcaption span:last-child { display: none; }
    .hn-hero-ledger { flex-wrap: wrap; gap: 1.1rem .6rem; }
    .hn-hero-ledger p { flex: 1; display: block; }
    .hn-hero-ledger p span { display: block; font-size: .8125rem; margin-top: .25rem; }
    .hn-hero-ledger a { flex-basis: 100%; border-top: 1px solid var(--gx-hairline); }
}

/* The field guide: air around the art, quiet furniture around the words. */
body { background: var(--tg-wall); }
body::after { opacity: .025; }
body .gx-section, body .gx-section-tight { background-image: none; }
body .gx-eyebrow, body .gng-smallcaps, body .tg-plaque {
    background: none; border: 0; padding: 0; box-shadow: none; text-shadow: none;
    color: var(--gx-gold) !important; font-size: .875rem; letter-spacing: .08em; line-height: 1.5;
}
body .gx-eyebrow::before, body .gx-eyebrow::after,
body .gng-smallcaps::before, body .gng-smallcaps::after,
body .tg-plaque::before, body .tg-plaque::after { content: none; }
body .gx-section-title, body .gng-sechead h2 { letter-spacing: -.035em; text-shadow: none; line-height: 1.13; }
body .gx-section-title { font-size: clamp(2rem, 4.2vw, 3.6rem); }
body .gx-section-sub { max-width: 55ch; font-size: 1.15rem; }
body .gx-btn, body .btn-primary, body .btn-secondary { min-height: 48px; font-size: .9375rem; border-radius: 2px; }
body .gx-btn-gold, body .btn-primary { background: #d9ac54 !important; color: #241703 !important; box-shadow: 0 3px 0 #795724 !important; text-shadow: none; }
body .gx-btn-gold:hover, body .btn-primary:hover { background: #f3cf75 !important; }
body .gx-btn-ghost { box-shadow: none; background: transparent; }
body .main-nav { box-shadow: none; border-bottom-color: var(--gx-hairline); }
body .main-nav .nav-links > li > a, body .fp-nav-more > button { font-size: .875rem; }
body .nav-play-link { text-shadow: none; }
body .home-pillar, body .home-showcase-shot, body .dispatch-feed-card,
body .dsp-card, body .dsp-lead, body .dsp-adj, body .cotd-card {
    box-shadow: none; border: 1px solid var(--gx-hairline); border-radius: 3px;
}
body .home-signup, body .home-server-card, body .home-quick-link, body .dsp-wire,
body .dsp-toc, body .dsp-colophon, body .dsp-trail, body .dsp-dealin {
    box-shadow: none; border: 1px solid var(--gx-hairline); border-radius: 3px;
}
body .home-pillar::before, body .home-pillar::after,
body .dsp-card::after, body .dispatch-feed-card::after { box-shadow: none; }
body .home-faction-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 1rem; }
body .home-faction-tile { min-width: 0; aspect-ratio: 3/5; width: auto; max-width: none; border: 1px solid var(--gx-hairline); box-shadow: none; }
body .home-faction-tile span { background: #120d08; color: #f3cf75; font: 600 .875rem/1.4 'Inter', sans-serif; padding: .8rem .5rem; border: 0; text-shadow: none; box-shadow: none; }
body .home-faction-tile::after { background: linear-gradient(transparent 65%,rgba(7,5,3,.65)); }
body .home-faction-tile:hover { transform: translateY(-5px); box-shadow: 0 12px 22px rgba(0,0,0,.3); }
body .home-faction-tile img { transition: transform .35s ease; }
body .home-faction-tile:hover img { transform: scale(1.035); }
body .gng-steam { background: var(--gx-bg-1); border-block: 1px solid var(--gx-hairline); }
body .gng-steam-title { font-size: clamp(2.2rem, 4.3vw, 3.9rem); line-height: 1.12; letter-spacing: -.035em; text-shadow: none; }
body .gng-steam-plate { background: none; color: var(--gx-ink); border: 0; border-block: 1px solid var(--gx-hairline); box-shadow: none; text-shadow: none; }
body .gng-steam-plate b { color: var(--gx-gold-hi); }
body .gng-steam-plate span { color: var(--gx-muted); }
body .gng-steam-shot { border: 1px solid var(--gx-hairline); box-shadow: none; padding: 0; }
body .gng-steam-shot img { border-radius: 2px; }
body .gng-steam-shot figcaption { padding: .8rem 1rem; }
body .gng-steam-foot { gap: 3rem; }
.hn-dispatch { background: #20110b; border-block: 1px solid rgba(194,87,47,.4); }
.hn-dispatch-inner { display: grid; grid-template-columns: .65fr 2fr auto; align-items: center; gap: 2rem; padding-block: 2rem; }
.hn-dispatch-label { font: 600 .875rem/1.5 'Inter',sans-serif; color: #edab76; margin: 0; }
.hn-dispatch-label span { display: block; margin-top: .4rem; color: #c6b59b; font-size: .8125rem; font-weight: 400; }
.hn-dispatch h2 { color: #f4e9d3; font: 700 clamp(1.5rem,2.4vw,2.1rem)/1.2 'Cinzel',serif; letter-spacing: -.025em; margin: 0 0 .5rem; }
.hn-dispatch p:not(.hn-dispatch-label) { color: #c6b59b; font-size: 1.1rem; line-height: 1.45; margin: 0; max-width: 58ch; }
.hn-text-link { color: #f3cf75; display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font: 600 .875rem/1.5 'Inter',sans-serif; text-decoration: underline; text-underline-offset: .3em; }
.hn-text-link:hover { color: #fff1c9; }
.hn-skip { position: fixed; top: .7rem; left: .7rem; z-index: 10000; padding: 1rem; background: #d9ac54; color: #241703; transform: translateY(-160%); }
.hn-skip:focus { transform: translateY(0); }
.hn-footer-fallback { padding-block: 3rem; }
.hn-footer-fallback nav { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-block: 1rem; }
:where(a,button,input,summary):focus-visible { outline: 2px solid var(--gx-gold-hi); outline-offset: 5px; }
html[data-theme="light"] body { background: #efe3c8; }
html[data-theme="light"] .hn-dispatch { background: #e5d0b1; border-color: #b48853; }
html[data-theme="light"] .hn-dispatch h2 { color: #2a2115; }
html[data-theme="light"] .hn-dispatch p, html[data-theme="light"] .hn-dispatch-label span { color: #66482c; }
html[data-theme="light"] .hn-text-link { color: #714310; }
html[data-theme="light"] body .gx-btn-ghost { color: #714310; border-color: #927039; background: transparent; }
html[data-theme="light"] body .gng-steam { background: #e7d9bb; }
@media (max-width: 1050px) {
    body .home-faction-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .hn-dispatch-inner { grid-template-columns: 1fr 3fr; gap: 1.2rem 2rem; }
    .hn-dispatch-inner > a { grid-column: 2; }
}
@media (max-width: 640px) {
    .hn-dispatch-inner { grid-template-columns: 1fr; gap: 1rem; }
    .hn-dispatch-inner > a { grid-column: 1; }
    .hn-dispatch-label span { display: inline; margin-left: .8rem; }
    body .home-faction-row { grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; padding: 0; margin: 0; }
    body .home-faction-tile { aspect-ratio: 4/5; width: auto; }
    body .home-faction-tile:last-child { grid-column: 1/-1; aspect-ratio: 2/1; }
    body .home-faction-tile:hover { transform: none; }
    body .gng-steam-foot { gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body .hn-hero *, body .home-faction-tile, body .home-faction-tile img { animation: none !important; transition: none !important; }
}