/* ============================================================
   THEME — The Canon Genie  (route /canon-genie)
   ------------------------------------------------------------
   A bespoke skin for this brand only. Everything is scoped under
   .brand-page.genie so the shared sub-brand layout (brand-pages.css)
   and the other brands (Legacy Ballot, etc.) are never touched.

   CONCEPT — a night cartographer's workshop. The brand mark holds
   two genies: one on a GREY disc (Cannon · on the grid · Entertainment)
   and one on a YELLOW disc (Lamp · lights on · Learning). PURPLE is the
   genie himself, the thread between them. So the page is a cool blueprint
   GRID lit by a warm LAMP GLOW, tied together in violet.

   Green Apologetics lives at the bottom as its own GREEN scriptorium:
   heraldic green + parchment scrolls you unroll to read.
   ============================================================ */

.brand-page.genie {
    /* — base: the dark workshop, faintly violet — */
    --bg: #0b0912;
    --bg-elev: #14101e;
    --fg: #efeaf7;
    --muted: #a59cb8;
    --border: #2b2440;

    /* — the genie: purple, the connective accent — */
    --genie: #8b5cf6;
    --genie-deep: #6d3fc0;
    --genie-bright: #b79bff;
    --genie-glow: rgba(139, 92, 246, 0.32);

    /* — Cannon · on the grid · Entertainment (cool grey) — */
    --grid-ink: #aeb8cf;
    --grid-line: rgba(150, 168, 205, 0.10);
    --grid-line-strong: rgba(150, 168, 205, 0.16);

    /* — Lamp · lights on · Learning (warm yellow) — */
    --lamp: #dcdb4a;
    --lamp-warm: #f3df6a;
    --lamp-glow: rgba(231, 222, 86, 0.24);

    /* — tokens consumed by the shared brand-pages.css → purple primary — */
    --accent: var(--genie);
    --accent-hover: var(--genie-bright);
    --accent-fg: #1a0d33;
    --glow: var(--genie-glow);

    /* smooth open/close sizing for the parchment scrolls */
    interpolate-size: allow-keywords;

    isolation: isolate;
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---- atmosphere: cool blueprint grid (behind everything) ---- */
.brand-page.genie::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px);
    background-size: 46px 46px, 46px 46px, 230px 230px, 230px 230px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 35%, transparent 92%);
            mask-image: radial-gradient(130% 90% at 50% 0%, #000 35%, transparent 92%);
}

/* ---- atmosphere: warm lamp glow from the top + a fine grain ---- */
.brand-page.genie::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 42% at 50% -4%, var(--lamp-glow), transparent 60%),
        radial-gradient(90% 60% at 50% -10%, rgba(139, 92, 246, 0.16), transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* keep all real content above the atmosphere */
.brand-page.genie > * { position: relative; z-index: 1; }

/* ============================================================
   HERO
   ============================================================ */
.brand-page.genie .genie-hero { position: relative; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
/* close the gap into the Two Modes section */
.brand-page.genie .genie-modes-section .brand-inner { padding-top: clamp(1.6rem, 3.5vw, 2.5rem); }

/* the lamp logo presented as a lamp-lit ivory plaque (not a white box) */
.brand-page.genie .brand-logo.genie-lamp {
    width: clamp(13rem, 42vw, 17rem);
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 1.2rem;
    border-radius: 1.25rem;
    background:
        radial-gradient(120% 120% at 50% 18%, #fbf3da, #f0e6c8 64%, #e2d3ac 100%);
    box-shadow:
        0 0 0 1px rgba(220, 219, 74, 0.4),
        0 0 44px -6px var(--lamp-glow),
        0 26px 60px -22px rgba(0, 0, 0, 0.85);
    animation: genie-float 7s ease-in-out infinite;
}
.brand-page.genie .brand-logo.genie-lamp img { width: 100%; height: 100%; object-fit: contain; }

@keyframes genie-float {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 1px rgba(220,219,74,0.35), 0 0 34px -8px var(--lamp-glow), 0 26px 60px -22px rgba(0,0,0,0.85); }
    50%      { transform: translateY(-7px); box-shadow: 0 0 0 1px rgba(220,219,74,0.5), 0 0 52px -4px var(--lamp-glow), 0 34px 70px -22px rgba(0,0,0,0.85); }
}

/* kicker / eyebrow with a little twinkle */
.brand-page.genie .genie-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.6rem;
    color: var(--lamp-warm);
}
.brand-page.genie .genie-spark {
    color: var(--lamp);
    font-size: 0.8em;
    animation: genie-twinkle 2.4s ease-in-out infinite;
}
@keyframes genie-twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

.brand-page.genie .brand-desc { color: var(--muted); }
.brand-page.genie .brand-desc p strong,
.brand-page.genie .brand-desc .lit { color: var(--lamp-warm); }

/* the dual filament: cool grid on one end, warm lamp on the other */
.brand-page.genie .genie-filament {
    margin-top: 2.4rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.brand-page.genie .genie-filament-end { white-space: nowrap; }
.brand-page.genie .genie-filament-end.grid { color: var(--grid-ink); }
.brand-page.genie .genie-filament-end.lamp { color: var(--lamp); }
.brand-page.genie .genie-filament-wire {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--grid-ink), var(--genie) 50%, var(--lamp));
    opacity: 0.55;
}
.brand-page.genie .genie-filament-wire::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lamp-warm);
    box-shadow: 0 0 10px 2px var(--lamp-glow);
    transform: translate(-50%, -50%);
    animation: genie-spark-run 5.5s ease-in-out infinite;
}
@keyframes genie-spark-run {
    0%   { left: 2%;  background: var(--grid-ink); box-shadow: 0 0 8px 1px rgba(174,184,207,0.5); }
    50%  { left: 98%; background: var(--lamp-warm); box-shadow: 0 0 12px 3px var(--lamp-glow); }
    100% { left: 2%;  background: var(--grid-ink); box-shadow: 0 0 8px 1px rgba(174,184,207,0.5); }
}

/* hero CTA glow tuned warm */
.brand-page.genie .brand-cta {
    background: linear-gradient(135deg, var(--genie), var(--genie-deep));
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.4);
}
.brand-page.genie .brand-cta:hover {
    background: linear-gradient(135deg, var(--genie-bright), var(--genie));
    box-shadow: 0 10px 34px -8px var(--genie-glow);
}

/* ============================================================
   SECTION HEADINGS (Fraunces display)
   ============================================================ */
.brand-page.genie .genie-section-title {
    margin: 0.6rem 0 0;
    max-width: 30rem;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--fg);
}
.brand-page.genie .genie-section-title .lit { color: var(--lamp-warm); font-style: italic; }
.brand-page.genie .genie-section-title .grid { color: var(--grid-ink); font-style: italic; }

/* ============================================================
   TWO MODES — the grid/lamp diptych
   ============================================================ */
.brand-page.genie .genie-modes {
    margin-top: 2.4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
@media (min-width: 720px) {
    .brand-page.genie .genie-modes { grid-template-columns: 1fr 1fr; }
}
/* when the grid→lamp spectrum sits right above the diptych, tuck it close */
.brand-page.genie .genie-filament + .genie-modes { margin-top: 1.2rem; }

.brand-page.genie .genie-mode {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    padding: 1.85rem;
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.brand-page.genie .genie-mode:hover { transform: translateY(-4px); }

.brand-page.genie .mode-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: auto;
}
.brand-page.genie .mode-readout {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.brand-page.genie .mode-tag {
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.brand-page.genie .mode-coord {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.brand-page.genie .mode-name {
    margin: 1.3rem 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
.brand-page.genie .mode-sublabel {
    margin: 0.4rem 0 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.brand-page.genie .mode-desc {
    margin: 0.9rem 0 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--muted);
    max-width: 26rem;
}

/* the icon chips, retuned per mode */
.brand-page.genie .genie-mode .cg-mode-icon {
    width: 4.6rem; height: 4.6rem;
    border-radius: 0.9rem;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/* — CANNON: cool, on the grid — */
.brand-page.genie .mode-cannon {
    background:
        linear-gradient(180deg, rgba(20, 24, 34, 0.82), rgba(13, 15, 22, 0.92));
}
.brand-page.genie .mode-cannon .mode-tag { color: var(--grid-ink); }
.brand-page.genie .mode-cannon .mode-name { color: #e8edf6; }
.brand-page.genie .mode-cannon .mode-sublabel { color: var(--grid-ink); }
.brand-page.genie .mode-cannon .cg-mode-icon { box-shadow: 0 0 0 1px rgba(174, 184, 207, 0.35), 0 0 22px -8px rgba(174, 184, 207, 0.5); }
.brand-page.genie .mode-cannon:hover { border-color: rgba(174, 184, 207, 0.4); box-shadow: 0 22px 50px -28px rgba(120, 140, 180, 0.6); }

/* the screen: fine grid + a slow scanline sweep */
.brand-page.genie .mode-screen {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(174, 184, 207, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(174, 184, 207, 0.10) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 75%);
            mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 75%);
}
.brand-page.genie .mode-screen::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 38%;
    top: -38%;
    background: linear-gradient(180deg, transparent, rgba(174, 192, 224, 0.10) 60%, transparent);
    animation: genie-scan 5.5s linear infinite;
}
.brand-page.genie .mode-cannon:hover .mode-screen::after { animation-duration: 2.2s; }
@keyframes genie-scan {
    0%   { top: -40%; }
    100% { top: 100%; }
}

/* — LAMP: dim until you hover, then the lights come on — */
.brand-page.genie .mode-lamp {
    background:
        linear-gradient(180deg, rgba(28, 26, 16, 0.72), rgba(15, 13, 18, 0.92));
}
.brand-page.genie .mode-lamp .mode-tag { color: var(--lamp); }
.brand-page.genie .mode-lamp .mode-name { color: #f6efcf; }
.brand-page.genie .mode-lamp .mode-sublabel { color: var(--lamp); }
.brand-page.genie .mode-lamp .cg-mode-icon {
    box-shadow: 0 0 0 1px rgba(220, 219, 74, 0.3);
    filter: saturate(0.75) brightness(0.82);
}
.brand-page.genie .mode-lamp:hover { border-color: rgba(231, 222, 86, 0.5); box-shadow: 0 24px 60px -26px var(--lamp-glow); }
.brand-page.genie .mode-lamp:hover .cg-mode-icon {
    filter: saturate(1.1) brightness(1.05);
    transform: scale(1.04);
    box-shadow: 0 0 0 1px rgba(231, 222, 86, 0.6), 0 0 30px -4px var(--lamp-glow);
}

/* the bloom that "switches on" */
.brand-page.genie .mode-light {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 55% at 22% 18%, var(--lamp-glow), transparent 62%);
    opacity: 0.18;
    transition: opacity 0.5s ease;
}
.brand-page.genie .mode-lamp:hover .mode-light { opacity: 1; animation: genie-flicker 2.6s ease-in-out infinite; }
@keyframes genie-flicker {
    0%, 100% { opacity: 1; }
    44%  { opacity: 0.86; }
    47%  { opacity: 1; }
    62%  { opacity: 0.9; }
    65%  { opacity: 1; }
}

/* a tiny on/off lozenge in the corner of each mode */
.brand-page.genie .mode-state {
    position: absolute;
    top: 1.15rem; right: 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.brand-page.genie .mode-state::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.brand-page.genie .mode-cannon .mode-state { color: var(--grid-ink); }
.brand-page.genie .mode-cannon .mode-state::before { box-shadow: 0 0 8px 1px rgba(174, 184, 207, 0.6); }
.brand-page.genie .mode-lamp .mode-state::before { box-shadow: none; transition: box-shadow 0.4s ease, color 0.4s ease; }
.brand-page.genie .mode-lamp:hover .mode-state { color: var(--lamp); }
.brand-page.genie .mode-lamp:hover .mode-state::before { box-shadow: 0 0 10px 2px var(--lamp-glow); }

/* ============================================================
   FROM THE SHOP
   ============================================================ */
.brand-page.genie .brand-note { color: var(--muted); }

/* ============================================================
   GREEN APOLOGETICS — its own green scriptorium
   A distinct room: heraldic green panel, gold hairlines, and
   parchment scrolls you unroll to read.
   ============================================================ */
.brand-page.genie .ga {
    --ga-green: #2f6b40;
    --ga-green-deep: #16301f;
    --ga-gold: #c9a64e;
    --ga-parch: #ece0c2;
    --ga-parch-edge: #d8c79c;
    --ga-ink: #3a2d18;
    --ga-ink-soft: #5c4a2c;

    position: relative;
    border-top: 1px solid color-mix(in srgb, var(--ga-gold) 35%, transparent);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(47, 107, 64, 0.42), transparent 70%),
        linear-gradient(180deg, #11241a, #0c1a12);
}
/* faint heraldic diamond field */
.brand-page.genie .ga::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(201, 166, 78, 0.10) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
            mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.brand-page.genie .ga-inner { position: relative; }

/* wax-seal crest above the title */
.brand-page.genie .ga-crest {
    width: 3.2rem; height: 3.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
    background: radial-gradient(circle at 35% 30%, #3f8a52, #235a35 55%, #16331f 100%);
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 6px 18px -6px rgba(0, 0, 0, 0.7);
    color: #d9efdd;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    transform: rotate(-7deg);
}
.brand-page.genie .ga-kicker { color: var(--ga-gold); }
.brand-page.genie .ga-title {
    margin: 0.6rem 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    letter-spacing: -0.01em;
    color: #eaf3ea;
}
.brand-page.genie .ga-intro {
    margin: 1.1rem 0 0;
    max-width: 44rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.32rem;
    line-height: 1.6;
    color: #cdd9cb;
}

/* — the scrolls — */
.brand-page.genie .ga-scrolls {
    margin-top: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.brand-page.genie .ga-scroll {
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #3a2c16, #2a2010);
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.8);
}

/* the rod / handle you click — looks like a wound scroll bar */
.brand-page.genie .ga-scroll-handle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.2rem;
    border-radius: 0.6rem;
    background:
        linear-gradient(180deg, #6a4a22, #4a3214 55%, #6a4a22),
        var(--ga-parch);
    box-shadow: inset 0 1px 0 rgba(255, 233, 180, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.45);
    position: relative;
    transition: filter 0.3s ease;
}
.brand-page.genie .ga-scroll-handle::-webkit-details-marker { display: none; }
.brand-page.genie .ga-scroll-handle:hover { filter: brightness(1.08); }

/* wax seal stamped on the rod */
.brand-page.genie .ga-seal {
    flex: 0 0 auto;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 36% 30%, #3f8a52, #235a35 55%, #14301d 100%);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5);
    color: #d9efdd;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    transform: rotate(-6deg);
}
.brand-page.genie .ga-scroll-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: #f6e9c8;
    margin-right: auto;
}
.brand-page.genie .ga-scroll-hint {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #d9c08a;
    opacity: 0.85;
}
.brand-page.genie .ga-chevron {
    flex: 0 0 auto;
    width: 0.62rem; height: 0.62rem;
    border-right: 2px solid #e8cf95;
    border-bottom: 2px solid #e8cf95;
    transform: rotate(45deg);
    transition: transform 0.4s ease;
}
.brand-page.genie .ga-scroll[open] .ga-chevron { transform: rotate(-135deg); }
.brand-page.genie .ga-scroll[open] .ga-scroll-hint { color: #b89a5e; }

/* the parchment that unrolls */
.brand-page.genie .ga-scroll::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
        block-size 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        content-visibility 0.55s allow-discrete;
}
.brand-page.genie .ga-scroll[open]::details-content { block-size: auto; }

.brand-page.genie .ga-parchment {
    position: relative;
    margin: 0 0.5rem;
    padding: 1.6rem 1.7rem 1.9rem;
    color: var(--ga-ink);
    background:
        radial-gradient(140% 120% at 50% -10%, #f6ecd2, #e9d8b0 62%, #dcc89a 100%);
    background-color: var(--ga-parch);
    border-radius: 0 0 0.4rem 0.4rem;
    box-shadow: inset 0 10px 18px -12px rgba(0, 0, 0, 0.5), inset 0 -10px 18px -12px rgba(90, 60, 20, 0.4);
    transform-origin: top center;
    transform: translateY(-8px) rotateX(8deg);
    opacity: 0;
    transition: transform 0.5s ease 0.05s, opacity 0.45s ease 0.08s;
}
/* parchment fibres + aged edges */
.brand-page.genie .ga-parchment::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.05) 0 2px, transparent 2px 5px),
        radial-gradient(140% 80% at 50% 120%, rgba(90, 60, 20, 0.18), transparent 60%),
        radial-gradient(140% 80% at 50% -20%, rgba(90, 60, 20, 0.14), transparent 60%);
    mix-blend-mode: multiply;
}
.brand-page.genie .ga-scroll[open] .ga-parchment { transform: translateY(0) rotateX(0); opacity: 1; }

.brand-page.genie .ga-parchment p {
    margin: 0;
    position: relative;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.34rem;
    line-height: 1.62;
    color: var(--ga-ink);
}
.brand-page.genie .ga-parchment p + p { margin-top: 0.9rem; }
/* illuminated drop-cap on the first line */
.brand-page.genie .ga-parchment > p:first-of-type::first-letter {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 3.1rem;
    line-height: 0.8;
    float: left;
    margin: 0.15rem 0.55rem 0 0;
    color: var(--ga-green);
}

/* ============================================================
   ARTIFACTS — the genie's collection, one per canon
   ============================================================ */
.brand-page.genie .genie-artifacts-lead {
    margin: 1.1rem 0 0;
    max-width: 42rem;
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--muted);
}

.brand-page.genie .artifact-rack {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
@media (min-width: 720px) {
    .brand-page.genie .artifact-rack { grid-template-columns: repeat(3, 1fr); }
}

.brand-page.genie .artifact {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.7rem 1.5rem 1.6rem;
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, rgba(22, 18, 34, 0.7), rgba(13, 11, 20, 0.85));
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* the medallion — the artwork already carries its own struck circle,
   so we don't add another shape; this is just a sized, centered holder */
.brand-page.genie .artifact-medallion {
    position: relative;
    width: 7.6rem; height: 7.6rem;
    display: grid;
    place-items: center;
    /* the artwork carries its own transparent padding; crop the dead
       space top & bottom so the text sits close to the coin */
    margin: -0.85rem 0;
}
.brand-page.genie .artifact-medallion img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.brand-page.genie .artifact-meta { display: flex; flex-direction: column; gap: 0.35rem; }
.brand-page.genie .artifact-canon {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--genie-bright);
}
.brand-page.genie .artifact-name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.05;
    color: var(--fg);
}
.brand-page.genie .artifact-persona {
    margin: 0.15rem 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--muted);
}
.brand-page.genie .artifact-persona strong { color: var(--lamp-warm); font-weight: 600; }

.brand-page.genie .artifact-state {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
}

/* — unlocked — */
.brand-page.genie .artifact.unlocked .artifact-medallion img {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px var(--lamp-glow));
}
.brand-page.genie .artifact.unlocked .artifact-state {
    color: #16301d;
    background: linear-gradient(135deg, var(--lamp-warm), #cdb43f);
    box-shadow: 0 0 16px -4px var(--lamp-glow);
}
.brand-page.genie .artifact.unlocked:hover {
    transform: translateY(-6px);
    border-color: rgba(220, 219, 74, 0.45);
    box-shadow: 0 26px 60px -28px var(--lamp-glow);
}
.brand-page.genie .artifact.unlocked:hover .artifact-medallion img {
    transform: translateY(-3px) scale(1.04);
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px var(--lamp-glow));
}

/* — locked — (no artwork, so this slot gets its own dashed coin,
   sized to match the diameter of the real artwork medallions) */
.brand-page.genie .artifact.locked { border-style: dashed; opacity: 0.72; }
.brand-page.genie .artifact.locked .artifact-medallion::before {
    content: "";
    position: absolute;
    width: 5.2rem; height: 5.2rem;
    border-radius: 50%;
    border: 1px dashed var(--border);
    background: repeating-linear-gradient(45deg, #1b1726, #1b1726 8px, #181320 8px, #181320 16px);
}
.brand-page.genie .artifact-lock { position: relative; z-index: 1; }
.brand-page.genie .artifact-lock {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--muted);
    opacity: 0.6;
}
.brand-page.genie .artifact.locked .artifact-canon { color: var(--muted); letter-spacing: 0.3em; }
.brand-page.genie .artifact.locked .artifact-name { color: var(--muted); }
.brand-page.genie .artifact.locked .artifact-state { color: var(--muted); border: 1px solid var(--border); }

/* ============================================================
   GREEN APOLOGETICS — YouTube badge in the panel corner
   (placeholder link → first episode of the series)
   ============================================================ */
.brand-page.genie .ga-youtube {
    position: absolute;
    top: clamp(2.75rem, 5vw, 4.5rem);
    right: clamp(1.25rem, 4vw, 2.5rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem 0.5rem 0.6rem;
    border-radius: 999px;
    background: #1b0d0d;
    border: 1px solid rgba(255, 70, 70, 0.35);
    color: #ff4444;
    text-decoration: none;
    box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.brand-page.genie .ga-youtube svg { width: 22px; height: 22px; }
.brand-page.genie .ga-youtube-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f0d9d9;
}
.brand-page.genie .ga-youtube:hover {
    transform: translateY(-2px);
    color: #ff6060;
    border-color: rgba(255, 70, 70, 0.7);
    box-shadow: 0 10px 26px -8px rgba(255, 50, 50, 0.45);
}

/* ============================================================
   Reduced motion — calm everything down
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .brand-page.genie *,
    .brand-page.genie *::before,
    .brand-page.genie *::after {
        animation: none !important;
        transition-duration: 0.001ms !important;
    }
}