/* /Components/Board/CampaignCard.razor.rz.scp.css */
/* Quest-notice card — design-system §5.1 (parchment treatment + tack from §11.11/§11.12).
   Child primitives (wax seal, stamps, medallion, seats) carry their own scoped CSS. */
.card[b-8si1se83em] {
    display: block;
    position: relative;
    text-decoration: none;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px,
            rgba(150, 110, 60, 0.025) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at 18% 30%, rgba(160, 120, 70, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 82% 70%, rgba(140, 100, 60, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, #f8ecd4 0%, #f0e0c0 60%, #e8d8b8 100%);
    border-radius: 1px;
    padding: 22px 28px 14px 18px;
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.58),
        0 2px 4px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 28px rgba(106, 74, 28, 0.06);
    color: #2a2018;
    font-size: 9px;
    line-height: 1.4;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* hover — the slip lifts slightly off the wood (§7 interaction states) */
.card:hover[b-8si1se83em] {
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 28px rgba(106, 74, 28, 0.06);
}

.brass-tack[b-8si1se83em] {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 25%, #c9a961 55%, #8a6f3a 85%, #4a3318 100%);
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 2;
}

.card-header[b-8si1se83em] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a7556;
    margin-bottom: 9px;
    font-weight: 600;
}

.card-title[b-8si1se83em] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.1;
    color: #1a1208;
    font-weight: 500;
    margin-bottom: 3px;
}

.card-subtitle[b-8si1se83em] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    color: #6a5236;
    font-size: 12px;
    margin-bottom: 14px;
}

.card-meta[b-8si1se83em] {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 3px 10px;
    font-size: 8px;
    margin-bottom: 18px;
    padding-right: 54px;
}

/* 18+ maturity tag in the card header (DEV-163). */
.mature-tag[b-8si1se83em] {
    display: inline-block;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #8b3a1c;
    border: 1px solid rgba(139, 58, 28, 0.6);
    border-radius: 1px;
    padding: 0 3px;
    margin-left: 3px;
    vertical-align: middle;
}

/* "New players welcome" tag in the card header (DEV-166) — inviting green ink,
   mirrors the .mature-tag shape but reads as a welcome rather than a warning. */
.beginner-tag[b-8si1se83em] {
    display: inline-block;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3f6b3a;
    border: 1px solid rgba(63, 107, 58, 0.6);
    border-radius: 1px;
    padding: 0 3px;
    margin-left: 3px;
    vertical-align: middle;
}

.card-meta dt[b-8si1se83em] { text-transform: uppercase; letter-spacing: 0.14em; color: #8a7556; font-weight: 600; }
.card-meta dd[b-8si1se83em] { margin: 0; color: #2a2018; }

.card-footer[b-8si1se83em] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    padding-right: 10px;
    border-top: 1px solid rgba(106, 74, 28, 0.25);
}

.gm-block[b-8si1se83em] { display: flex; align-items: center; gap: 6px; font-size: 8px; }

.gm-name[b-8si1se83em] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: #2a2018;
}

/* GM rating — social proof beside the name (DEV-165), styled like StartPlaying's "★ 4.8 (12)".
   Brass star + Cormorant average + muted Inter count. Hidden entirely when the GM has no ratings. */
.gm-rating[b-8si1se83em] {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
}

.gm-rating .star[b-8si1se83em] {
    font-size: 10px;
    color: var(--brass-on-parchment);
    line-height: 1;
}

.gm-rating .avg[b-8si1se83em] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 600;
    color: #2a2018;
}

.gm-rating .count[b-8si1se83em] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7.5px;
    color: #8a7556;
}

/* Pledge button — bottom-left of card (wax seal owns bottom-right). §5.8 */
.card-action[b-8si1se83em] {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    padding-right: 44px;
}

.pledge-btn[b-8si1se83em] {
    display: inline-block;
    padding: 5px 10px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    transition: color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.card:hover .pledge-btn[b-8si1se83em] {
    color: #f0d896;
    border-color: rgba(240, 208, 128, 0.8);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 200, 120, 0.22),
        0 0 10px rgba(255, 190, 90, 0.16);
}
/* /Components/Board/DangerZone.razor.rz.scp.css */
/* Danger zone — ported from design-previews/campaign-create-final.html (§12.14). */
.danger-zone[b-cssoj7x2jp] {
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(139, 38, 53, 0.45);
    border-radius: 1px;
    background:
        repeating-linear-gradient(45deg,
            rgba(139, 38, 53, 0.04) 0px,
            rgba(139, 38, 53, 0.04) 4px,
            transparent 4px,
            transparent 9px),
        rgba(139, 38, 53, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.danger-copy[b-cssoj7x2jp] {
    flex: 1;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--crimson, #8b2635);
    line-height: 1.4;
}

.danger-copy strong[b-cssoj7x2jp] {
    display: block;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--crimson, #8b2635);
    margin-bottom: 4px;
}
/* /Components/Board/FilterBand.razor.rz.scp.css */
/* Filter band — design-system §5.10 (verbatim from discover-final). Line-only treatment on
   the wood; active chip = brass-engraved text + thin brass underline, no fill. */
.filter-band[b-3c7vgpyp89] {
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    background: transparent;
    box-shadow: inset 0 -1px 0 rgba(255, 200, 120, 0.22);
    border-bottom: 2px solid rgba(0, 0, 0, 0.65);
    color: #ede0c4;
}

.filter-prefix[b-3c7vgpyp89] { opacity: 0.6; padding-right: 4px; }

.filter-chip[b-3c7vgpyp89] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 1px;
    cursor: pointer;
    /* button reset (explicit per feedback_button_reset.md) */
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    color: inherit;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: inherit;
    line-height: 1.4;
}

.filter-chip .dot[b-3c7vgpyp89] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

.filter-chip.active[b-3c7vgpyp89] {
    background: transparent;
    color: #c9a961;
    box-shadow: none;
    text-shadow:
        0 -0.5px 0 rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 220, 150, 0.25);
    position: relative;
}

.filter-chip.active[b-3c7vgpyp89]::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 6px;
    right: 6px;
    height: 1px;
    background: #c9a961;
    box-shadow: 0 0 2px rgba(201, 169, 97, 0.55);
}
/* /Components/Board/GmInline.razor.rz.scp.css */
/* GM attribution inline (design-system §15.5.2) — italic Cormorant "led by [name]" with a
   16px brass-ringed sepia avatar. Verbatim treatment from my-parties-final.html .gm-inline. */
.gm-inline[b-mowpifx39y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11.5px;
    color: var(--brass-on-parchment);
}

.gm-inline .av[b-mowpifx39y] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d4a878, #8b6238 65%, #4a3020);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f4e8d0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-style: normal;
    font-size: 9px;
    box-shadow: 0 0 0 1px var(--brass-shadow);
    flex-shrink: 0;
}
/* /Components/Board/GmMedallion.razor.rz.scp.css */
/* GM photo medallion — design-system §5.6 (verbatim from discover-final). */
.gm-avatar[b-rqzeoj43jz] {
    background: radial-gradient(circle, #d4b878 0%, #8a6f3a 100%);
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid #b8923c;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* photo variant — medallion-framed portrait, sepia-toned to fit parchment */
.gm-avatar.with-photo[b-rqzeoj43jz]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--photo);
    background-size: cover;
    background-position: center;
    filter: sepia(0.25) saturate(0.85) brightness(0.95);
}

.gm-initials[b-rqzeoj43jz] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.42em;
    letter-spacing: 0.04em;
    color: #2a1c0a;
    text-shadow: 0 1px 0 rgba(255, 232, 168, 0.4);
    line-height: 1;
}
/* /Components/Board/InkStamp.razor.rz.scp.css */
/* Status ink stamp — design-system §5.4 (verbatim from discover-final). */
.card-stamp[b-z8vpucyd1m] {
    position: relative;
    font-size: 9.5px;
    letter-spacing: 0.13em;
    padding: 4px 9px;
    border: 1.5px solid;
    border-radius: 1px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 800;
    transform: rotate(-3deg);
    background: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    filter: blur(0.15px);
    white-space: nowrap;
}

/* inner ruled border — the "double rule" stamp look */
.card-stamp[b-z8vpucyd1m]::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 0.5px solid currentColor;
    border-radius: 1px;
    opacity: 0.6;
    pointer-events: none;
}

.card-stamp.open[b-z8vpucyd1m] { color: #6a4a1c; border-color: #6a4a1c; }
.card-stamp.new[b-z8vpucyd1m] { color: #3a6a4a; border-color: #3a6a4a; }
.card-stamp.need-more[b-z8vpucyd1m] { color: #8a6a2a; border-color: #8a6a2a; }
.card-stamp.one-left[b-z8vpucyd1m] { color: #8b3a1c; border-color: #8b3a1c; }
.card-stamp.full[b-z8vpucyd1m] { color: #5a5048; border-color: #5a5048; }
.card-stamp.closed[b-z8vpucyd1m] { color: #6a6a6a; border-color: #6a6a6a; }
/* /Components/Board/NoticeBoard.razor.rz.scp.css */
/* Wooden noticeboard — design-system §5.9 (verbatim from discover-final). Wood texture +
   filter live on ::before so the filter doesn't dim the cards; lantern halo on ::after. */
.notice-board[b-druz4l42nv] {
    position: relative;
    border-radius: 3px;
    padding: 18px 20px 26px;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.75),
        0 5px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 200, 120, 0.15);
    overflow: visible;
}

.notice-board[b-druz4l42nv]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url('/textures/noticeboard-wood.jpg');
    background-size: auto, 900px;
    background-position: center, center;
    filter: brightness(0.78) saturate(1.05) contrast(1.05);
    pointer-events: none;
    z-index: 0;
    border-radius: 3px;
}

.notice-board[b-druz4l42nv]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 20% at 50% -2%,
        rgba(255, 210, 130, 0.34) 0%,
        rgba(255, 195, 100, 0.14) 38%,
        transparent 75%);
    z-index: 1;
    pointer-events: none;
}

.nb-lantern[b-druz4l42nv] {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 44px;
    z-index: 7;
    filter:
        drop-shadow(0 0 8px rgba(255, 200, 100, 0.65))
        drop-shadow(0 0 16px rgba(255, 180, 80, 0.4));
}

.nb-content[b-druz4l42nv] {
    position: relative;
    z-index: 2;
}
/* /Components/Board/PillGroup.razor.rz.scp.css */
/* Pill-toggle group — ported from design-previews/campaign-create-final.html (§12.9). */
.pill-group[b-118xxvfnts] {
    display: inline-flex;
    gap: 0;
    flex-wrap: wrap;
}

.pill[b-118xxvfnts] {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted, #8a7556);
    border: 1px solid rgba(106, 74, 28, 0.40);
    border-right-width: 0;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.pill:first-child[b-118xxvfnts] { border-radius: 1px 0 0 1px; }
.pill:last-child[b-118xxvfnts]  { border-radius: 0 1px 1px 0; border-right-width: 1px; }

.pill:hover[b-118xxvfnts] { color: var(--ink-secondary, #6a5236); }

.pill.active[b-118xxvfnts] {
    background: rgba(106, 74, 28, 0.85);
    color: #f0e0c0;
    border-color: rgba(40, 24, 12, 0.7);
}

.pill:focus-visible[b-118xxvfnts] { outline: 2px solid var(--brass-on-parchment, #8b6a2a); outline-offset: 1px; position: relative; z-index: 1; }
/* /Components/Board/QuestScrollFrame.razor.rz.scp.css */
/* Quest-Roll Scroll surface — ported verbatim from design-previews/campaign-create-final.html
   (§12.4–§12.6). Room chrome (beams/stone/brand/nav) comes from AppShell; this owns the wood
   bench, hanging lantern, brass-capped dowels and the parchment scroll. */

/* ---- Wood bench (§12.4) — same wood + filter as Discover's noticeboard / Hub's alcove ---- */
.cc-bench[b-vaek0mrazb] {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    padding: 18px 22px 22px;
    overflow: visible; /* lantern overhangs the top edge */
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.75),
        0 5px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 200, 120, 0.15);
}

.cc-bench[b-vaek0mrazb]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url('/textures/noticeboard-wood.jpg');
    background-size: auto, 900px;
    background-position: center, center;
    filter: brightness(0.78) saturate(1.05) contrast(1.05);
    pointer-events: none;
    z-index: 0;
    border-radius: 3px;
}

.cc-bench[b-vaek0mrazb]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 20% at 50% -2%,
            rgba(255, 210, 130, 0.34) 0%,
            rgba(255, 195, 100, 0.14) 38%,
            transparent 75%);
    z-index: 1;
    pointer-events: none;
}

/* Scope the z-index lift to the contained surface only — NOT a broad `> *` selector, which
   would force position:relative on the lantern and let it eat flex space (§12.4 critical note). */
.cc-bench > .qs-scroll-wrap[b-vaek0mrazb] {
    position: relative;
    z-index: 2;
}

.surface-lantern[b-vaek0mrazb] {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 44px;
    z-index: 7;
    filter:
        drop-shadow(0 0 8px rgba(255, 200, 100, 0.65))
        drop-shadow(0 0 16px rgba(255, 180, 80, 0.4));
    pointer-events: none;
}

/* ---- The scroll (§12.5): left dowel | parchment | right dowel ---- */
.qs-scroll-wrap[b-vaek0mrazb] {
    flex: 1;
    min-height: 0;
    margin: 14px 8px 0;
    display: flex;
    align-items: stretch;
}

.qs-dowel[b-vaek0mrazb] {
    position: relative;
    flex: 0 0 36px;
    background: linear-gradient(90deg,
        #1a0e06 0%,
        #3a2818 10%,
        #6a4a26 26%,
        #9a7848 42%,
        #b89060 50%,
        #9a7848 58%,
        #6a4a26 74%,
        #3a2818 90%,
        #1a0e06 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.65),
        0 2px 5px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 200, 120, 0.18);
    z-index: 3;
}

.qs-dowel[b-vaek0mrazb]::before, .qs-dowel[b-vaek0mrazb]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    background: radial-gradient(ellipse 50% 50% at center, #4a3220 0%, #2a1a0c 60%, #1a0e06 100%);
    box-shadow:
        inset 0 0 4px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

.qs-dowel[b-vaek0mrazb]::before { top: -8px; border-radius: 50%; }
.qs-dowel[b-vaek0mrazb]::after  { bottom: -8px; border-radius: 50%; }

.qs-dowel-band-top[b-vaek0mrazb], .qs-dowel-band-bot[b-vaek0mrazb] {
    position: absolute;
    left: -2px;
    right: -2px;
    height: 6px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(106, 74, 28, 0.4) 50%,
        rgba(0, 0, 0, 0.55) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.15),
        0 1px 1px rgba(0, 0, 0, 0.4);
    z-index: 4;
    border-radius: 1px;
}

.qs-dowel-band-top[b-vaek0mrazb] { top: 14px; }
.qs-dowel-band-bot[b-vaek0mrazb] { bottom: 14px; }

.qs-dowel-knob-top[b-vaek0mrazb], .qs-dowel-knob-bot[b-vaek0mrazb] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 30%, var(--brass, #c9a961) 60%, #8a6f3a 90%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 5;
}

.qs-dowel-knob-top[b-vaek0mrazb] { top: -24px; }
.qs-dowel-knob-bot[b-vaek0mrazb] { bottom: -24px; }

/* ---- Parchment (§11.11 treatment) ---- */
.qs-parchment[b-vaek0mrazb] {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 420px;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px,
            rgba(150, 110, 60, 0.025) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qs-parchment[b-vaek0mrazb]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.qs-parchment[b-vaek0mrazb]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 14px;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.30) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ---- Header / body / footer (§12.6) ---- */
.qs-header[b-vaek0mrazb] {
    position: relative;
    z-index: 3;
    padding: 14px 30px 12px;
    border-bottom: 1px solid rgba(106, 74, 28, 0.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qs-eyebrow[b-vaek0mrazb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted, #8a7556);
}

.qs-progress[b-vaek0mrazb] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-secondary, #6a5236);
    letter-spacing: 0.04em;
    text-transform: none;
    flex-shrink: 0;
}

.qs-body[b-vaek0mrazb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 30px 4px;
    z-index: 3;
    scrollbar-width: thin;
    scrollbar-color: var(--brass-shadow, #6a4a1c) rgba(106, 74, 28, 0.14);
}

.qs-body[b-vaek0mrazb]::-webkit-scrollbar { width: 5px; }
.qs-body[b-vaek0mrazb]::-webkit-scrollbar-track { background: rgba(106, 74, 28, 0.12); border-radius: 3px; }
.qs-body[b-vaek0mrazb]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.92) 0%, rgba(139, 106, 42, 0.92) 100%);
    border-radius: 3px;
}

.qs-footer[b-vaek0mrazb] {
    z-index: 3;
    padding: 12px 30px 16px;
    border-top: 1px solid rgba(106, 74, 28, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* /Components/Board/ScrollButton.razor.rz.scp.css */
/* Tavern-voice buttons — ported from design-previews/campaign-create-final.html (§12.10–§12.15).
   Explicit resets only (no `font:` shorthand — it would clobber the per-class typography). */
.btn-dark[b-2yn6amwgua],
.btn-ghost[b-2yn6amwgua],
.btn-press-wax[b-2yn6amwgua],
.btn-danger[b-2yn6amwgua] {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.btn-dark:disabled[b-2yn6amwgua],
.btn-press-wax:disabled[b-2yn6amwgua],
.btn-danger:disabled[b-2yn6amwgua] { opacity: 0.55; cursor: not-allowed; }

.btn-dark[b-2yn6amwgua] {
    gap: 6px;
    padding: 9px 18px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
}

.btn-dark:hover:not(:disabled)[b-2yn6amwgua] { border-color: rgba(201, 169, 97, 0.85); color: #f0e0c0; }

.btn-ghost[b-2yn6amwgua] {
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--ink-secondary, #6a5236);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    border: 0;
}

.btn-ghost:hover[b-2yn6amwgua] { color: var(--ink-primary, #1a1208); }

.btn-press-wax[b-2yn6amwgua] {
    gap: 12px;
    padding: 13px 28px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #f0e0c0;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(201, 169, 97, 0.7);
    border-radius: 1px;
    box-shadow:
        0 0 0 2px rgba(214, 56, 48, 0.06),
        0 8px 18px rgba(122, 26, 20, 0.32),
        0 4px 6px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 200, 120, 0.18);
}

.btn-press-wax:hover:not(:disabled)[b-2yn6amwgua] {
    box-shadow:
        0 0 0 2px rgba(214, 56, 48, 0.12),
        0 10px 22px rgba(122, 26, 20, 0.42),
        0 4px 6px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 200, 120, 0.22);
}

.btn-danger[b-2yn6amwgua] {
    gap: 6px;
    padding: 9px 18px;
    background: linear-gradient(180deg, #4a1018 0%, #2a0a0e 100%);
    color: #f0d4cf;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(139, 38, 53, 0.7);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.btn-danger:hover:not(:disabled)[b-2yn6amwgua] { border-color: rgba(139, 38, 53, 1); color: #ffe8e2; }

.btn-dark:focus-visible[b-2yn6amwgua],
.btn-ghost:focus-visible[b-2yn6amwgua],
.btn-press-wax:focus-visible[b-2yn6amwgua],
.btn-danger:focus-visible[b-2yn6amwgua] { outline: 2px solid var(--brass, #c9a961); outline-offset: 2px; }
/* /Components/Board/SealReview.razor.rz.scp.css */
/* Step IV — The Seal (review + live preview) — ported from
   design-previews/campaign-create-final.html (§12.13). */
.seal-grid[b-5vqmuezjdq] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .seal-grid[b-5vqmuezjdq] { flex-direction: column; }
    .qs-seal-preview[b-5vqmuezjdq] { flex: 1 1 auto !important; align-items: stretch; }
    .qs-preview-card[b-5vqmuezjdq] { max-width: 360px; }
}

.qs-seal-review[b-5vqmuezjdq] { flex: 1; min-width: 0; }

.seal-intro[b-5vqmuezjdq] { margin-bottom: 14px; }

.seal-intro h3[b-5vqmuezjdq] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 22px;
    margin: 0 0 5px;
    color: var(--ink-primary, #1a1208);
    line-height: 1.1;
}

.seal-intro p[b-5vqmuezjdq] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-secondary, #6a5236);
    margin: 0;
    line-height: 1.5;
}

.review-list[b-5vqmuezjdq] { margin: 0; padding: 0; list-style: none; }

.review-list li[b-5vqmuezjdq] {
    display: flex;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.16);
}

.review-list li:last-child[b-5vqmuezjdq] { border-bottom: 0; }

.rv-label[b-5vqmuezjdq] {
    flex: 0 0 90px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted, #8a7556);
    padding-top: 2px;
}

.rv-value[b-5vqmuezjdq] {
    flex: 1;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 14px;
    color: var(--ink-primary, #1a1208);
    line-height: 1.35;
}

.rv-value.rv-italic[b-5vqmuezjdq] { font-style: italic; color: var(--ink-secondary, #6a5236); }
.rv-value.rv-link[b-5vqmuezjdq] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px;
    word-break: break-all;
    color: var(--brass-on-parchment, #8b6a2a);
}

.rv-edit[b-5vqmuezjdq] {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brass-on-parchment, #8b6a2a);
    padding-top: 3px;
}

.rv-edit[b-5vqmuezjdq]::before { content: '✎ '; margin-right: 1px; }
.rv-edit:hover[b-5vqmuezjdq] { color: var(--ink-primary, #1a1208); }

.seal-recruit-row[b-5vqmuezjdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px dashed rgba(106, 74, 28, 0.35);
    border-radius: 1px;
    background: rgba(232, 216, 184, 0.35);
}

/* ---- Right column: live preview ---- */
.qs-seal-preview[b-5vqmuezjdq] {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.preview-label[b-5vqmuezjdq] {
    text-align: center;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted, #8a7556);
    margin-top: 2px;
}

.preview-label-italic[b-5vqmuezjdq] {
    display: block;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 11px;
    color: var(--ink-secondary, #6a5236);
    margin-top: 3px;
}

.qs-preview-card[b-5vqmuezjdq] {
    position: relative;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px,
            rgba(150, 110, 60, 0.025) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at 18% 30%, rgba(160, 120, 70, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 82% 70%, rgba(140, 100, 60, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, #f8ecd4 0%, #f0e0c0 60%, #e8d8b8 100%);
    border-radius: 1px;
    padding: 18px 22px 12px 16px;
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 28px rgba(106, 74, 28, 0.06);
    color: #2a2018;
    font-size: 9px;
    line-height: 1.4;
    transform: rotate(-1.2deg);
}

.pv-tack[b-5vqmuezjdq] {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 25%, var(--brass, #c9a961) 55%, #8a6f3a 85%, #4a3318 100%);
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 2;
}

.pv-header[b-5vqmuezjdq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a7556;
    margin-bottom: 8px;
    font-weight: 600;
}

.pv-stamp[b-5vqmuezjdq] {
    position: relative;
    font-size: 8.5px;
    letter-spacing: 0.22em;
    padding: 3px 7px;
    border: 1.4px solid #3a6a4a;
    border-radius: 1px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 800;
    color: #3a6a4a;
    transform: rotate(-3deg);
    background: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.pv-title[b-5vqmuezjdq] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 17px;
    line-height: 1.1;
    color: #1a1208;
    font-weight: 500;
    margin-bottom: 3px;
}

.pv-tagline[b-5vqmuezjdq] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    color: #6a5236;
    font-size: 11px;
    margin-bottom: 13px;
    line-height: 1.3;
}

.pv-meta[b-5vqmuezjdq] {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 2px 8px;
    font-size: 8px;
    margin-bottom: 16px;
    padding-right: 50px;
}

.pv-meta dt[b-5vqmuezjdq] { text-transform: uppercase; letter-spacing: 0.14em; color: #8a7556; font-weight: 600; }
.pv-meta dd[b-5vqmuezjdq] { margin: 0; color: #2a2018; }

.pv-footer[b-5vqmuezjdq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    padding-right: 10px;
    border-top: 1px solid rgba(106, 74, 28, 0.25);
    margin-bottom: 8px;
}

.pv-gm[b-5vqmuezjdq] { display: flex; align-items: center; gap: 5px; font-size: 8px; }

.pv-gm-name[b-5vqmuezjdq] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: #2a2018;
}

.pv-seats[b-5vqmuezjdq] { text-align: right; flex-shrink: 0; }

.pv-seats .seats-label[b-5vqmuezjdq] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 6.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: #8a7556;
    margin-bottom: 2px;
}

.pv-seats .seats-num[b-5vqmuezjdq] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 18px;
    color: #1a1208;
    line-height: 1;
    font-weight: 500;
}

.pv-pledge[b-5vqmuezjdq] {
    display: inline-block;
    padding: 4px 9px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    margin-top: 3px;
}
/* /Components/Board/SealTray.razor.rz.scp.css */
/* Wax-seal picker — ported from design-previews/campaign-create-final.html (§12.8). */
.seal-tray-wrap[b-u5m2tyzdad] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.seal-tray[b-u5m2tyzdad] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0 4px;
    flex-wrap: wrap;
}

/* Live read-out of the hovered / selected system — so the user can tell the seals apart.
   Fixed height so showing it never shifts the parchment. */
.seal-name[b-u5m2tyzdad] {
    min-height: 20px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 20px;
    color: var(--ink-primary, #1a1208);
}

.seal-name--hint[b-u5m2tyzdad] {
    font-size: 13px;
    color: var(--ink-muted, #8a7556);
}

.seal-stamp[b-u5m2tyzdad] {
    position: relative;
    width: 28px;
    height: 28px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: rotate(-3deg);
    box-shadow:
        inset -2px -3px 4px rgba(0, 0, 0, 0.55),
        inset 1px 2px 2px rgba(255, 255, 255, 0.30),
        0 2px 3px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 14px;
    text-shadow:
        -1px -1px 1px rgba(0, 0, 0, 0.55),
        1px 1px 0 rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    opacity: 0.85;
    transition: width 0.14s ease, height 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}

.seal-stamp[b-u5m2tyzdad]::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

.seal-stamp:hover[b-u5m2tyzdad] { opacity: 1; }
.seal-stamp:focus-visible[b-u5m2tyzdad] { outline: 2px solid var(--brass-on-parchment, #8b6a2a); outline-offset: 2px; }

/* Grow via transform (not width/height) so pressing a seal never reflows the parchment.
   scale(1.5) on the 28px base ≈ the locked 42px pressed size; z-index lifts it over neighbours. */
.seal-stamp.pressed[b-u5m2tyzdad] {
    transform: scale(1.5);
    opacity: 1;
    z-index: 1;
    box-shadow:
        inset -3px -3px 5px rgba(0, 0, 0, 0.65),
        inset 1px 2px 3px rgba(255, 255, 255, 0.34),
        0 3px 4px rgba(0, 0, 0, 0.6),
        0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Compact variant for Edit's "change seal" affordance */
.seal-tray.compact .seal-stamp[b-u5m2tyzdad] { width: 24px; height: 24px; font-size: 12px; }
.seal-tray.compact .seal-stamp.pressed[b-u5m2tyzdad] { width: 32px; height: 32px; font-size: 16px; }

/* ---- 12 system colours (§5.3 / §12.8 legend) — keyed by GameSystemVisuals.WaxClass ---- */
.seal-stamp.dnd5e[b-u5m2tyzdad]       { background: radial-gradient(circle at 32% 28%, #d63830, #7a1a14); }
.seal-stamp.pf2e[b-u5m2tyzdad]        { background: radial-gradient(circle at 32% 28%, #d4a850, #8a6a1a); }
.seal-stamp.dndone[b-u5m2tyzdad]      { background: radial-gradient(circle at 32% 28%, #b8b8c0, #5a5a64); }
.seal-stamp.osr[b-u5m2tyzdad]         { background: radial-gradient(circle at 32% 28%, #4a4a4a, #1a1a1a); }
.seal-stamp.coc[b-u5m2tyzdad]         { background: radial-gradient(circle at 32% 28%, #6a8a3a, #3a4a18); }
.seal-stamp.vampire[b-u5m2tyzdad]     { background: radial-gradient(circle at 32% 28%, #8a2a32, #4a0c14); }
.seal-stamp.whf[b-u5m2tyzdad]         { background: radial-gradient(circle at 32% 28%, #4a7038, #1a3818); }
.seal-stamp.cpred[b-u5m2tyzdad]       { background: radial-gradient(circle at 32% 28%, #d04848, #5a1818); }
.seal-stamp.daggerheart[b-u5m2tyzdad] { background: radial-gradient(circle at 32% 28%, #4a6aa0, #1a2a4a); }
.seal-stamp.wh40k[b-u5m2tyzdad]       { background: radial-gradient(circle at 32% 28%, #2a2a2a, #0a0a0a); }
.seal-stamp.homebrew[b-u5m2tyzdad]    { background: radial-gradient(circle at 32% 28%, #c8a060, #6a4a20); }
.seal-stamp.other[b-u5m2tyzdad]       { background: radial-gradient(circle at 32% 28%, #d8c098, #8a7050); }
/* /Components/Board/SeatsDisplay.razor.rz.scp.css */
/* Seats display — design-system §5.7 (verbatim from discover-final). */
.seats-display[b-9gzrqqbdsm] {
    text-align: right;
    flex-shrink: 0;
    min-width: 72px;
}

.seats-display.align-left[b-9gzrqqbdsm] { text-align: left; }

.seats-label[b-9gzrqqbdsm] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: #8a7556;
    margin-bottom: 3px;
}

.seats-num[b-9gzrqqbdsm] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 20px;
    color: #1a1208;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 4px;
}

.seats-dots[b-9gzrqqbdsm] {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.align-left .seats-dots[b-9gzrqqbdsm] { justify-content: flex-start; }

.seat-dot[b-9gzrqqbdsm] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(106, 74, 28, 0.55);
}

.seat-dot.filled[b-9gzrqqbdsm] {
    background: rgba(80, 56, 22, 0.85);
    border-color: rgba(80, 56, 22, 0.95);
}

.seats-applicants[b-9gzrqqbdsm] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: #8a7556;
}
/* /Components/Board/SectionFlourish.razor.rz.scp.css */
/* Section label with brass flourishes — design-system §16.6 (verbatim from discover-detail-final). */
.sec-flourish[b-smvofeobbm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 6px 0 4px;
}

.sec-flourish:first-child[b-smvofeobbm] { margin-top: 0; }

.sec-flourish .lbl[b-smvofeobbm] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--brass-on-parchment, #8b6a2a);
    font-weight: 500;
    flex-shrink: 0;
    text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.4);
}

.sec-flourish .curl[b-smvofeobbm] {
    flex: 1;
    max-width: 80px;
    height: 8px;
    position: relative;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(106, 74, 28, 0.20) 30%,
        rgba(139, 106, 42, 0.55) 60%,
        var(--brass-on-parchment, #8b6a2a) 95%,
        var(--brass-on-parchment, #8b6a2a) 100%);
    mask: radial-gradient(ellipse 100% 40% at 100% 50%, #000 30%, transparent 70%);
    -webkit-mask: radial-gradient(ellipse 100% 40% at 100% 50%, #000 30%, transparent 70%);
}

.sec-flourish .curl[b-smvofeobbm]::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brass-on-parchment, #8b6a2a);
    box-shadow: 0 0 1px rgba(106, 74, 28, 0.45);
}

.sec-flourish .curl.right[b-smvofeobbm] {
    mask: radial-gradient(ellipse 100% 40% at 0% 50%, #000 30%, transparent 70%);
    -webkit-mask: radial-gradient(ellipse 100% 40% at 0% 50%, #000 30%, transparent 70%);
    background: linear-gradient(270deg,
        transparent 0%,
        rgba(106, 74, 28, 0.20) 30%,
        rgba(139, 106, 42, 0.55) 60%,
        var(--brass-on-parchment, #8b6a2a) 95%,
        var(--brass-on-parchment, #8b6a2a) 100%);
}

.sec-flourish .curl.right[b-smvofeobbm]::before {
    left: 0;
    right: auto;
}
/* /Components/Board/StepMedallion.razor.rz.scp.css */
/* Brass-medallion step indicator — verbatim from design-previews/campaign-create-final.html (§12.7). */
.step-indicator[b-9ufaxm48ol] {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: center;
    width: 100%;
}

.step-node[b-9ufaxm48ol] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.step-medallion[b-9ufaxm48ol] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 13px;
    background: radial-gradient(circle at 32% 28%, #5a4828 0%, #3a2818 100%);
    color: rgba(232, 208, 156, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

.step-node.active .step-medallion[b-9ufaxm48ol] {
    width: 36px;
    height: 36px;
    font-size: 17px;
    background: radial-gradient(circle at 32% 28%, var(--brass-highlight, #f0d080), var(--brass, #c9a961) 55%, var(--brass-shadow, #6a4a1c));
    color: var(--ink-primary, #1a1208);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 1px rgba(60, 40, 16, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(255, 220, 150, 0.5);
}

.step-node.done .step-medallion[b-9ufaxm48ol] {
    background: radial-gradient(circle at 32% 28%, #c9a961, #6a4a1c);
    color: var(--ink-primary, #1a1208);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.step-node.done .step-medallion[b-9ufaxm48ol]::after {
    content: '';
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d63830, #7a1a14);
    box-shadow:
        inset -1px -1px 1px rgba(0, 0, 0, 0.5),
        inset 1px 1px 1px rgba(255, 255, 255, 0.25),
        0 1px 1px rgba(0, 0, 0, 0.5);
}

.step-label[b-9ufaxm48ol] {
    margin-top: 5px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted, #8a7556);
}

.step-node.active .step-label[b-9ufaxm48ol] { color: var(--brass-on-parchment, #8b6a2a); }
.step-node.done .step-label[b-9ufaxm48ol] { color: var(--ink-secondary, #6a5236); }

.step-rule[b-9ufaxm48ol] {
    flex: 1;
    height: 1px;
    background: rgba(106, 74, 28, 0.30);
    margin: 0 14px;
    align-self: center;
    transform: translateY(-6px);
    min-width: 28px;
}
/* /Components/Board/Stepper.razor.rz.scp.css */
/* Number stepper — ported from design-previews/campaign-create-final.html (§12.9). */
.stepper[b-f9c89zwnk1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui), 'Inter', sans-serif;
}

.step-btn[b-f9c89zwnk1] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(106, 74, 28, 0.45);
    border-radius: 1px;
    background: transparent;
    color: var(--ink-primary, #1a1208);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease;
}

.step-btn:hover:not(:disabled)[b-f9c89zwnk1] { background: rgba(106, 74, 28, 0.14); }
.step-btn:disabled[b-f9c89zwnk1] { opacity: 0.4; cursor: not-allowed; }
.step-btn:focus-visible[b-f9c89zwnk1] { outline: 2px solid var(--brass-on-parchment, #8b6a2a); outline-offset: 1px; }

.step-num[b-f9c89zwnk1] {
    min-width: 40px;
    text-align: center;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--ink-primary, #1a1208);
    line-height: 1;
}
/* /Components/Board/Toggle.razor.rz.scp.css */
/* Toggle switch — ported from design-previews/campaign-create-final.html (§12.9).
   Explicit button reset (no `font:` shorthand — it would clobber the per-class typography). */
.toggle[b-qqfdd2q8cp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-primary, #1a1208);
    text-align: left;
}

.switch[b-qqfdd2q8cp] {
    position: relative;
    width: 38px;
    height: 20px;
    background: rgba(106, 74, 28, 0.32);
    border: 1px solid rgba(106, 74, 28, 0.45);
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.switch[b-qqfdd2q8cp]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 30% 30%, #f0e0c0, #c4a868);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s;
}

.toggle.on .switch[b-qqfdd2q8cp] {
    background: rgba(201, 169, 97, 0.85);
    border-color: rgba(139, 106, 42, 0.7);
}

.toggle.on .switch[b-qqfdd2q8cp]::after {
    transform: translateX(18px);
    background: radial-gradient(circle at 30% 30%, #fff4d0, #e8d09c);
}

.toggle:focus-visible[b-qqfdd2q8cp] { outline: 2px solid var(--brass-on-parchment, #8b6a2a); outline-offset: 2px; }

.toggle-hint[b-qqfdd2q8cp] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 400;
    color: var(--ink-secondary, #6a5236);
    margin-left: 4px;
}
/* /Components/Board/VerifiedStamp.razor.rz.scp.css */
/* Verified Host stamp — design-system §5.5 (verbatim from discover-final). */
.verified-stamp[b-t6pwfuy4hy] {
    position: relative;
    width: 64px;
    height: 24px;
    border-radius: 50% / 65%;
    border: 1.5px solid #2e5a3a;
    background: rgba(46, 90, 58, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #2e5a3a;
    text-transform: uppercase;
    transform: rotate(-4deg);
    flex-shrink: 0;
    filter: blur(0.15px);
}

.verified-stamp[b-t6pwfuy4hy]::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50% / 65%;
    border: 0.5px solid #2e5a3a;
    opacity: 0.55;
    pointer-events: none;
}

/* Prominent (Profile) variant — §14: inline beside the 36px Cormorant name. */
.verified-stamp.prominent[b-t6pwfuy4hy] {
    width: 96px;
    height: 34px;
    font-size: 10px;
    margin-left: 16px;
    vertical-align: 8px;
}
/* /Components/Board/WaxSeal.razor.rz.scp.css */
/* Pressed-wax game-system seal — design-system §5.3 (verbatim 3D treatment from
   discover-final). Straight, embossed sigil. 12 system colours + size/position variants. */
.wax-seal[b-01d5sz0x5o] {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow:
        inset -4px -5px 7px rgba(0, 0, 0, 0.6),
        inset 2px 3px 4px rgba(255, 255, 255, 0.32),
        0 3px 4px rgba(0, 0, 0, 0.55),
        0 1px 1px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 18px;
    text-shadow:
        -1px -1px 1px rgba(0, 0, 0, 0.55),
        1px 1px 0 rgba(255, 255, 255, 0.25);
}

.wax-seal[b-01d5sz0x5o]::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

/* ---- Position / size variants (kept in-scope so hosts can opt in via Class) ---- */
/* On a quest-notice card: upper-middle right within the meta block (§5.3). */
.wax-seal.on-card[b-01d5sz0x5o] {
    position: absolute;
    top: 38%;
    right: 30px;
    transform: translateY(-50%);
}

/* Detail "unpinned slip": 64px focal seal, centered above the title (§16). */
.wax-seal.detail[b-01d5sz0x5o] {
    display: inline-flex;
    width: 64px;
    height: 64px;
    font-size: 30px;
    margin: 0 auto 8px;
}

/* Inset in the Press-the-Wax CTA (§12.15) — small swatch of the chosen system colour. */
.wax-seal.wax-mini[b-01d5sz0x5o] {
    width: 22px;
    height: 22px;
    font-size: 12px;
}

/* Logbook ledger row (§15.5) — 22px seal in the binding-margin column of a leaf row. */
.wax-seal.ledger-mini[b-01d5sz0x5o] {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

/* Profile "Plays" swatch pill (§14.8) — 16px seal before the system name. */
.wax-seal.gr-play-seal[b-01d5sz0x5o] {
    display: inline-flex;
    width: 16px;
    height: 16px;
    font-size: 9px;
}

/* Profile "Tables Held" row (§14.9) — 14px seal in the row's lead column. */
.wax-seal.gr-table-seal[b-01d5sz0x5o] {
    display: inline-flex;
    width: 14px;
    height: 14px;
    font-size: 8px;
}

/* Step IV review-list swatch (§12.13) — 18px inline disc before the system name. */
.wax-seal.rv-mini-seal[b-01d5sz0x5o] {
    display: inline-flex;
    width: 18px;
    height: 18px;
    font-size: 10px;
    vertical-align: -3px;
    margin-right: 6px;
}

/* Step IV live-preview card (§12.13) — 32px seal upper-right within the card meta. */
.wax-seal.card-preview[b-01d5sz0x5o] {
    position: absolute;
    top: 36%;
    right: 28px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    font-size: 16px;
}

/* ---- System colours (§5.3 legend) ---- */
.wax-seal.dnd5e[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #d63830, #7a1a14); }
.wax-seal.pf2e[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #d4a850, #8a6a1a); }
.wax-seal.dndone[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #b8c2cc, #4a5560); }
.wax-seal.osr[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #5a5a5a, #0a0a0a); }
.wax-seal.coc[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #6a8a3a, #3a4a18); }
.wax-seal.vampire[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #8a2a32, #4a0c14); }
.wax-seal.whf[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #4a8a4a, #14301a); }
.wax-seal.cpred[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #e23030, #7a1414); }
.wax-seal.daggerheart[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #4a6aa0, #1a2a4a); }
.wax-seal.wh40k[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #6a5a2a, #0a0a08); }
.wax-seal.homebrew[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #c8a060, #6a4a20); }
.wax-seal.other[b-01d5sz0x5o] { background: radial-gradient(circle at 32% 28%, #c8b890, #7a6a48); }
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-zcxtkmecul] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-zcxtkmecul] {
    flex: 1;
}

.sidebar[b-zcxtkmecul] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-zcxtkmecul] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-zcxtkmecul]  a, .top-row[b-zcxtkmecul]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-zcxtkmecul]  a:hover, .top-row[b-zcxtkmecul]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-zcxtkmecul]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-zcxtkmecul] {
        justify-content: space-between;
    }

    .top-row[b-zcxtkmecul]  a, .top-row[b-zcxtkmecul]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-zcxtkmecul] {
        flex-direction: row;
    }

    .sidebar[b-zcxtkmecul] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-zcxtkmecul] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-zcxtkmecul]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-zcxtkmecul], article[b-zcxtkmecul] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-8ce9bc2ws0] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-8ce9bc2ws0] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-8ce9bc2ws0] {
    font-size: 1.1rem;
}

.bi[b-8ce9bc2ws0] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-8ce9bc2ws0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-8ce9bc2ws0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-8ce9bc2ws0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-8ce9bc2ws0] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-8ce9bc2ws0] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-8ce9bc2ws0] {
        padding-bottom: 1rem;
    }

    .nav-item[b-8ce9bc2ws0]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-8ce9bc2ws0]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-8ce9bc2ws0]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-8ce9bc2ws0] {
        display: none;
    }

    .collapse[b-8ce9bc2ws0] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-8ce9bc2ws0] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Account/Account.razor.rz.scp.css */
/* ============================================================
   ACCOUNT SETTINGS — /account · §account-settings-final (locked)
   Ported from design-previews/account-settings-final.html.
   Page chrome (stone wall, beams, brand nav) is provided by
   AppShell; this file paints only the noticeboard + leaf inward.
   All classes are `acct-`-prefixed to stay clear of global app.css.
   Palette tokens come from app.css :root.
   ============================================================ */

.acct-page[b-14paalh8eo] {
    padding: 28px 24px 64px;
}

/* Reuse the shared <NoticeBoard> wood panel + lantern; just cap its width,
   centre it, and open up the padding so the 720px leaf can breathe. */
.acct-page[b-14paalh8eo]  .notice-board {
    max-width: 860px;
    margin: 0 auto;
    padding: 44px 48px 40px;
    display: flex;
    justify-content: center;
}

/* ---- Leaf: single laid page ---- */
.acct-leaf[b-14paalh8eo] {
    position: relative;
    z-index: 2;
    width: 720px;
    max-width: 100%;
    padding: 26px 40px 24px 44px;
    overflow: hidden;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px,
            rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
    display: flex; flex-direction: column;
}
.acct-leaf[b-14paalh8eo]::after {
    content: '';
    position: absolute; bottom: 0; right: 0;
    width: 42px; height: 42px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
}
.acct-binding[b-14paalh8eo] {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg,
        #5a1820 0%, #7a1f28 12%, #6b1a22 50%, #7a1f28 88%, #5a1820 100%);
    box-shadow:
        inset 0 0 0 0.5px rgba(40, 8, 14, 0.55),
        0 0 6px rgba(40, 8, 14, 0.4);
    z-index: 3;
}
.acct-tack[b-14paalh8eo] {
    position: absolute;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 4;
}
.acct-tack.tl[b-14paalh8eo] { top: 10px; left: 14px; }
.acct-tack.tr[b-14paalh8eo] { top: 10px; right: 14px; }
.acct-tack.bl[b-14paalh8eo] { bottom: 10px; left: 14px; }
.acct-tack.br[b-14paalh8eo] { bottom: 10px; right: 14px; }

/* ---- Leaf header ---- */
.acct-eyebrow[b-14paalh8eo] {
    font-family: 'Inter', sans-serif;
    font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
}
.acct-title[b-14paalh8eo] {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-weight: 500;
    font-size: 28px; line-height: 1.05;
    color: var(--ink-primary);
    margin: 4px 0 0;
}
.acct-sub[b-14paalh8eo] {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 13.5px; color: var(--brass-on-parchment);
    line-height: 1.45;
    margin: 5px 0 0;
    max-width: 560px;
}
.acct-rule[b-14paalh8eo] {
    height: 1px; background: rgba(106, 74, 28, 0.22);
    margin: 14px 0 4px;
}

/* ---- Ledger rows ---- */
.acct-ledger[b-14paalh8eo] { display: flex; flex-direction: column; }
.acct-row[b-14paalh8eo] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    column-gap: 14px;
    align-items: start;
    padding: 13px 0;
}
.acct-row + .acct-row[b-14paalh8eo] { border-top: 1px solid rgba(106, 74, 28, 0.16); }

.acct-disc[b-14paalh8eo] {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 22%, var(--brass) 52%, #8a6f3a 82%, #4a3318 100%);
    box-shadow:
        inset -1px -1px 2px rgba(0, 0, 0, 0.45),
        inset 0.5px 1px 1.5px rgba(255, 255, 255, 0.40),
        0 1px 2px rgba(0, 0, 0, 0.50),
        0 0 0 0.5px rgba(40, 24, 12, 0.55);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.acct-disc svg[b-14paalh8eo] {
    width: 17px; height: 17px;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: var(--ink-primary);
}
.acct-disc.danger[b-14paalh8eo] {
    background: radial-gradient(circle at 30% 30%,
        #f8d8a0 0%, #c98a6a 22%, #8b2635 60%, #5a1820 88%, #2a0a10 100%);
}
.acct-disc.danger svg[b-14paalh8eo] { stroke: rgba(245, 220, 200, 0.95); }

.acct-row-body[b-14paalh8eo] { min-width: 0; }
.acct-row-label[b-14paalh8eo] {
    font-family: 'Inter', sans-serif;
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 3px;
}
.acct-row-value[b-14paalh8eo] {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-weight: 500;
    font-size: 18px; line-height: 1.2;
    color: var(--ink-primary);
    margin: 0;
    word-break: break-word;
}
.acct-row-value.danger[b-14paalh8eo] { color: var(--crimson); }
.acct-row-meta[b-14paalh8eo] {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 12.5px;
    color: var(--ink-secondary);
    margin: 3px 0 0;
    line-height: 1.4;
}
.acct-row-meta .meta-brass[b-14paalh8eo] { color: var(--brass-on-parchment); }
.acct-row-meta .meta-warn[b-14paalh8eo]  { color: #8a5a2a; }

/* ---- Right-side affordance (explicit reset, no `font:` shorthand) ---- */
button.acct-brass-link[b-14paalh8eo] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0; margin-top: 4px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 9px; font-weight: 600;
    font-style: normal;
    letter-spacing: 0.22em; text-transform: uppercase;
    line-height: 1.3;
    color: var(--brass-on-parchment);
    white-space: nowrap;
    text-align: right;
}
button.acct-brass-link:hover[b-14paalh8eo] { color: var(--brass); }
button.acct-brass-link:disabled[b-14paalh8eo] { opacity: 0.5; cursor: default; }
button.acct-brass-link.crimson[b-14paalh8eo] { color: var(--crimson); }
button.acct-brass-link.crimson:hover[b-14paalh8eo] { color: #b53445; }
button.acct-brass-link.muted[b-14paalh8eo] { color: var(--ink-muted); }

/* ---- Expanded row body (spans all 3 columns) ---- */
.acct-expand[b-14paalh8eo] {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 14px 0 4px 50px;
    border-top: 1px dashed rgba(106, 74, 28, 0.20);
}

.acct-form-grid[b-14paalh8eo] { display: flex; flex-direction: column; gap: 14px; }
.acct-form-row[b-14paalh8eo] { display: block; }
.acct-form-label[b-14paalh8eo] {
    display: block;
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-muted); margin-bottom: 4px;
}
.acct-form-label .req[b-14paalh8eo] { color: var(--crimson); margin-left: 3px; font-weight: 700; }
.acct-form-input[b-14paalh8eo] {
    display: block; width: 100%;
    font-family: 'Cormorant Garamond', serif; font-size: 17px;
    color: var(--ink-primary);
    background: transparent; border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    padding: 4px 0; outline: none;
}
.acct-form-input:focus[b-14paalh8eo] { border-bottom-color: var(--brass-on-parchment); }
.acct-form-input[b-14paalh8eo]::placeholder { color: var(--ink-muted); opacity: 0.6; font-style: italic; }
.acct-form-helper[b-14paalh8eo] {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 12px; color: var(--ink-muted);
    margin: 6px 0 0;
    line-height: 1.4;
}
.acct-form-helper.warn[b-14paalh8eo] { color: #8a5a2a; }
.acct-form-helper.danger[b-14paalh8eo] { color: var(--crimson); }

.acct-expand-actions[b-14paalh8eo] {
    display: flex; align-items: center; gap: 18px;
    margin-top: 14px;
}

/* ---- Play-tiles (compact) for the calling switch ---- */
.acct-tiles[b-14paalh8eo] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
button.acct-tile[b-14paalh8eo] {
    appearance: none;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 12px 8px 11px;
    width: 100%;
    background: rgba(255, 250, 240, 0.18);
    border: 1px solid rgba(106, 74, 28, 0.30);
    border-radius: 2px;
    cursor: pointer;
    margin: 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: var(--ink-secondary);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.40) inset,
        0 1px 2px rgba(106, 74, 28, 0.08);
}
button.acct-tile.current[b-14paalh8eo] {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255, 220, 140, 0.15) 0%, transparent 70%),
        rgba(201, 169, 97, 0.22);
    border: 1.5px solid rgba(139, 106, 42, 0.85);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.60) inset,
        0 0 0 1px rgba(139, 106, 42, 0.35),
        0 3px 7px rgba(106, 74, 28, 0.22),
        inset 0 -2px 4px rgba(139, 106, 42, 0.10);
}
.acct-tile-emblem[b-14paalh8eo] {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 22%, var(--brass) 52%, #8a6f3a 82%, #4a3318 100%);
    box-shadow:
        inset -1px -1px 2px rgba(0, 0, 0, 0.45),
        inset 0.5px 1px 1.5px rgba(255, 255, 255, 0.42),
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(40, 24, 12, 0.55);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.acct-tile-emblem svg[b-14paalh8eo] {
    width: 20px; height: 20px;
    stroke: rgba(28, 18, 8, 0.85);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.acct-tile-name[b-14paalh8eo] {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-weight: 500;
    font-size: 15px; line-height: 1;
    color: var(--ink-primary);
}

/* ---- Danger zone divider ---- */
.acct-danger-rule[b-14paalh8eo] {
    height: 1px;
    background: linear-gradient(90deg,
        rgba(106, 74, 28, 0.22) 0%,
        rgba(139, 38, 53, 0.45) 50%,
        rgba(106, 74, 28, 0.22) 100%);
    margin: 14px 0 0;
}

/* ---- CTA button (btn-dark) ---- */
button.acct-btn[b-14paalh8eo] {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer; white-space: nowrap;
    margin: 0;
    text-decoration: none;
}
button.acct-btn:disabled[b-14paalh8eo] {
    background: linear-gradient(180deg, #1f1610 0%, #14100a 100%);
    color: rgba(232, 208, 156, 0.42);
    border-color: rgba(201, 169, 97, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    cursor: default;
}
button.acct-btn.crimson[b-14paalh8eo] {
    background: linear-gradient(180deg, #4a121a 0%, #2a0810 100%);
    color: #f0c8c8;
    border: 1px solid rgba(180, 60, 75, 0.65);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(220, 120, 130, 0.18);
}
button.acct-btn.crimson:disabled[b-14paalh8eo] {
    background: linear-gradient(180deg, #2a1014 0%, #1a080c 100%);
    color: rgba(240, 200, 200, 0.40);
    border-color: rgba(180, 60, 75, 0.30);
}

/* ---- Loading state ---- */
.acct-state[b-14paalh8eo] {
    display: flex; align-items: center; justify-content: center;
    min-height: 180px;
}

@media (max-width: 640px) {
    .acct-page[b-14paalh8eo] { padding: 16px 10px 48px; }
    .acct-page[b-14paalh8eo]  .notice-board { padding: 36px 16px 28px; }
    .acct-leaf[b-14paalh8eo] { padding: 22px 18px 20px 22px; }
    .acct-expand[b-14paalh8eo] { padding-left: 0; }
    .acct-tiles[b-14paalh8eo] { grid-template-columns: 1fr; }
}
/* /Pages/Campaigns/Edit/EditCampaign.razor.rz.scp.css */
/* Edit Campaign — page-specific styles only. The shared hero/.cc-page scaffolding lives in app.css
   (.cc-page namespace), reused from the Create wizard. */

/* ---- Edit header context row (replaces the wizard's step indicator) ---- */
.edit-header-row[b-ogi1mc7dd5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.edit-headline-meta[b-ogi1mc7dd5] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted, #8a7556);
    margin-bottom: 3px;
}

.edit-headline[b-ogi1mc7dd5] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: var(--ink-primary, #1a1208);
    line-height: 1.1;
}

.edit-warning[b-ogi1mc7dd5] {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(139, 38, 53, 0.35);
    border-radius: 1px;
    background: rgba(139, 38, 53, 0.06);
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--crimson, #8b2635);
    line-height: 1.4;
}
/* /Pages/Campaigns/Shared/CampaignWizard.razor.rz.scp.css */
/* Campaign Create wizard — page-specific styles only. The shared hero/.cc-page scaffolding lives
   in app.css (.cc-page namespace), reused by the Edit single-sheet. */

/* Step panes — all rendered (state preserved); only the active one is shown. */
.step-hidden[b-5dprvyfb7o] { display: none; }
/* /Pages/Discovery/Discover.razor.rz.scp.css */
/* DEV-84 · Discover feed — ported from design-previews/discover-final.html (locked §5).
   Room chrome (beams/stone/brand/nav) comes from AppShell; this page supplies the hero +
   noticeboard. Scoped so generic class names don't collide with Landing/Hub reskins. */
.discover[b-sul98drx5d] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 8px;
}

/* ---- Hero (§5.13) ---- */
.hero[b-sul98drx5d] {
    margin-bottom: 22px;
}

.eyebrow[b-sul98drx5d] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted-on-stone, #a89878);
    margin-bottom: 12px;
}

.eyebrow[b-sul98drx5d]::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 12px;
}

.hero-headline[b-sul98drx5d] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1;
    margin: 0;
    color: #f0e6d0;
}

.hero-headline .italic[b-sul98drx5d] {
    font-style: italic;
    color: var(--brass, #d6b770);
    display: block;
}

.hero-sub[b-sul98drx5d] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 14px;
    max-width: 480px;
    color: #b8a888;
}

/* ---- Secondary tools row (search / play style / sort / open seats) ---- */
.board-tools[b-sul98drx5d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tool-search[b-sul98drx5d],
.tool-select[b-sul98drx5d] {
    appearance: none;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px;
    color: #ede0c4;
    background: rgba(20, 14, 8, 0.55);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 2px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.tool-search[b-sul98drx5d] { min-width: 220px; }
.tool-search[b-sul98drx5d]::placeholder { color: #8a7c60; }

.tool-select[b-sul98drx5d] { cursor: pointer; }
.tool-select option[b-sul98drx5d] { color: #1a1208; }

.tool-search:focus[b-sul98drx5d],
.tool-select:focus[b-sul98drx5d] {
    border-color: rgba(201, 169, 97, 0.7);
    box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.35);
}

.tool-toggle[b-sul98drx5d] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #c3b390;
    cursor: pointer;
    user-select: none;
}

.tool-toggle input[b-sul98drx5d] { accent-color: var(--brass, #c9a961); cursor: pointer; }

/* ---- DEV-164 · Curated preset chips (doorways over the raw filters) ----
   Wood/brass to match the tool controls: parchment-ghost pills that flip to a
   cast-brass fill when active. Button reset is spelled out per
   memory/feedback_button_reset.md — no `font:` shorthand (it outranks class rules). */
.preset-chips[b-sul98drx5d] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.preset-chip[b-sul98drx5d] {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 14px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    color: #c3b390;
    background: rgba(20, 14, 8, 0.55);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 999px;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.preset-chip:hover[b-sul98drx5d] {
    color: #ede0c4;
    border-color: rgba(201, 169, 97, 0.6);
}

.preset-chip.is-active[b-sul98drx5d] {
    color: #1a1208;
    background: linear-gradient(180deg, #e8d09c 0%, #c9a961 100%);
    border-color: rgba(201, 169, 97, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 240, 200, 0.4);
}

/* ---- Card grid (§5) ---- */
.card-grid[b-sul98drx5d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ---- Loading / empty states (§7) ---- */
.board-state[b-sul98drx5d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 56px 20px;
    text-align: center;
}

/* Wood empty-state — cream-on-wood typography (§ empty-states · wood-empty).
   Eyebrow + head + sub + CTA all sit directly on the noticeboard grain, so
   each carries a drop-shadow for legibility. */
.empty-eyebrow[b-sul98drx5d] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    margin-bottom: 2px;
}

.empty-head[b-sul98drx5d] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 24px;
    color: #ede0c4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.55);
}

.empty-sub[b-sul98drx5d] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: #d4c0a0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    max-width: 420px;
}

/* CTA on the wood — dark gradient + brass border (§5.8 .btn-dark). Explicit
   reset per memory/feedback_button_reset.md — no `font:` shorthand. */
.board-cta[b-sul98drx5d] {
    cursor: pointer;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    white-space: nowrap;
}

.board-cta:hover[b-sul98drx5d] {
    color: #f0d896;
    border-color: rgba(201, 169, 97, 0.75);
}

.board-pagination[b-sul98drx5d] {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    .card-grid[b-sul98drx5d] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .hero-headline[b-sul98drx5d] { font-size: 40px; }
    .card-grid[b-sul98drx5d] { grid-template-columns: 1fr; }
    .tool-search[b-sul98drx5d] { min-width: 0; flex: 1; }
}

/* Narrow phones (DEV-85): the four tools can't share one row — the search would
   shrink to nothing (flex:1 + min-width:0) and let everything stay on one line.
   Give the search its own full-width line, sit the two selects side-by-side, and
   drop the toggle below. */
@media (max-width: 600px) {
    .board-tools[b-sul98drx5d] { gap: 10px; }
    .tool-search[b-sul98drx5d] { flex: 1 1 100%; min-width: 0; }
    .tool-select[b-sul98drx5d] { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .tool-toggle[b-sul98drx5d] { flex: 1 1 100%; }
}
/* /Pages/Discovery/DiscoveryCampaignDetail.razor.rz.scp.css */
/* DEV-84 · Discover Detail — "unpinned slip" (design-system §16), ported from
   discover-detail-final.html. Room chrome comes from AppShell; this page renders the
   breadcrumb + the page-scale parchment slip (no tack, no rotation). Adapted from the
   mockup's fixed tile to normal page flow (the slip grows with content; page scrolls). */
.detail[b-yl6nly2kar] {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 24px 16px;
}

.breadcrumb[b-yl6nly2kar] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone, #a89878);
    margin-bottom: 14px;
}

.breadcrumb a[b-yl6nly2kar] { color: var(--brass, #c9a961); text-decoration: none; }
.breadcrumb a:hover[b-yl6nly2kar] { color: var(--brass-highlight, #f0d080); }

/* ---- The slip ---- */
.slip[b-yl6nly2kar] {
    position: relative;
    padding: 26px 40px 26px;
    border-radius: 2px;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.75),
        0 8px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 40px rgba(106, 74, 28, 0.06);
    color: #2a2018;
}

/* paper-curl, lower-right (§11.11) */
.slip[b-yl6nly2kar]::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 2px 0;
}

.slip-head[b-yl6nly2kar] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
}

.slip-head .qst[b-yl6nly2kar] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted, #8a7556);
}

.slip-head .voice-mark[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--brass-on-parchment, #8b6a2a);
    white-space: nowrap;
}

/* ---- Title block ---- */
.slip-title-block[b-yl6nly2kar] {
    text-align: center;
    padding: 6px 0 10px;
}

.slip-title[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 42px;
    line-height: 1.05;
    color: var(--ink-primary, #1a1208);
    margin: 0 0 6px;
}

.slip-tagline[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-secondary, #6a5236);
    margin: 0 auto;
    max-width: 80%;
}

/* Facts strip under the title — System / Style / Players at a glance (DEV-159) */
.slip-facts[b-yl6nly2kar] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    padding-top: 12px;
}

.slip-facts .fact[b-yl6nly2kar] { display: inline-flex; align-items: baseline; gap: 7px; }

.slip-facts .k[b-yl6nly2kar] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted, #8a7556);
}

.slip-facts .v[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ink-primary, #1a1208);
}

/* ---- Body: content left, sidebar right ---- */
.slip-body-row[b-yl6nly2kar] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 28px;
    padding-top: 14px;
    border-top: 1px solid rgba(106, 74, 28, 0.22);
}

.slip-body-left[b-yl6nly2kar] { min-width: 0; }

.sec-body[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-secondary, #6a5236);
    margin: 0 0 12px;
    white-space: pre-line;
}

.slip-sidebar[b-yl6nly2kar] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 18px;
    border-left: 1px solid rgba(106, 74, 28, 0.22);
    min-width: 0;
}

/* GM card — profile link + bio + preferred systems (DEV-159). The whole gm-block
   is the profile link (§16: no separate button); the divider sits on the card. */
.gm-card[b-yl6nly2kar] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(106, 74, 28, 0.18);
}

.gm-block[b-yl6nly2kar] {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
}

.gm-card .gm-bio[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-secondary, #6a5236);
    margin: 0;
}

.gm-card .gm-runs[b-yl6nly2kar] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    color: var(--ink-secondary, #6a5236);
}

.gm-card .gm-runs .k[b-yl6nly2kar] {
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted, #8a7556);
    margin-right: 7px;
}

.gm-block .info[b-yl6nly2kar] { min-width: 0; }

.gm-block .nm[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    color: var(--brass-on-parchment, #8b6a2a);
    line-height: 1.05;
}

.gm-block .nm[b-yl6nly2kar]::after {
    content: ' →';
    color: var(--ink-muted, #8a7556);
    font-style: normal;
    font-size: 13px;
    opacity: 0.7;
}

.gm-block:hover .nm[b-yl6nly2kar] { color: #a07f30; }

.gm-block .lvl[b-yl6nly2kar] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-muted, #8a7556);
    margin-top: 4px;
}

/* ---- CTA area ---- */
.cta-area[b-yl6nly2kar] {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(106, 74, 28, 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cta-banner[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ink-secondary, #6a5236);
    text-align: center;
    padding: 5px 6px;
    background: rgba(106, 74, 28, 0.05);
    border: 1px solid rgba(106, 74, 28, 0.20);
    border-radius: 1px;
}

.cta-banner.brass[b-yl6nly2kar] {
    background: rgba(201, 169, 97, 0.10);
    border-color: rgba(139, 106, 42, 0.4);
}

/* btn-dark — locked CTA (§12.9); every property explicit per feedback_button_reset.md */
.btn-dark[b-yl6nly2kar] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 11px 18px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 800;
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 1px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.btn-dark:hover[b-yl6nly2kar] {
    color: #f0d896;
    border-color: rgba(240, 208, 128, 0.8);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 200, 120, 0.22),
        0 0 14px rgba(255, 190, 90, 0.18);
}

.btn-dark.secondary[b-yl6nly2kar] {
    background: transparent;
    color: var(--ink-secondary, #6a5236);
    border-color: rgba(106, 74, 28, 0.4);
    box-shadow: none;
}

.btn-dark.secondary:hover[b-yl6nly2kar] {
    color: var(--ink-primary, #1a1208);
    border-color: rgba(106, 74, 28, 0.7);
}

.btn-dark.disabled[b-yl6nly2kar] {
    opacity: 0.55;
    background: linear-gradient(180deg, #2a2520 0%, #1a1815 100%);
    cursor: not-allowed;
    pointer-events: none;
}

.cta-row-2[b-yl6nly2kar] { display: flex; gap: 8px; }
.cta-row-2 .btn-dark[b-yl6nly2kar] { width: auto; flex: 1; }

/* ---- States ---- */
.detail-state[b-yl6nly2kar] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 80px 20px;
    text-align: center;
}

.empty-head[b-yl6nly2kar] {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 26px;
    color: #f0e6d0;
}

.empty-sub[b-yl6nly2kar] {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px;
    color: #b8a888;
}

.back-link[b-yl6nly2kar] {
    margin-top: 8px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass, #c9a961);
    text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 760px) {
    .slip-body-row[b-yl6nly2kar] { grid-template-columns: 1fr; }
    .slip-sidebar[b-yl6nly2kar] { padding-left: 0; border-left: 0; border-top: 1px solid rgba(106, 74, 28, 0.22); padding-top: 12px; }
    .slip-title[b-yl6nly2kar] { font-size: 32px; }
}
/* /Pages/Landing.razor.rz.scp.css */
/* ============================================================
   DEV-83 · Landing — public marketing surface at "/".
   Ported from design-previews/landing-final.html (locked).
   Scoped to the Landing component so the generic class names
   (.beam, .card, .content, .brand …) cannot collide with the
   Discover/Hub reskins. Tokens come from the global :root in
   app.css; textures from wwwroot/textures (referenced /absolute
   because scoped CSS bundles at the app root).
   The mockup's per-panel tiles are consolidated into ONE
   continuous room: a fixed stone backdrop + lit pools, with the
   hero, the wall, the two-paths board and the FAQ board flowing
   over it between a top and a bottom timber beam.
   ============================================================ */

.landing[b-8kch4z663k] {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-ui);
    color: var(--text-on-stone);
    /* Canonical parchment fill (discover-final) — shared by the poster,
       keeper, and audience cards. FAQ scraps use a lighter 2-layer fill. */
    --parchment-bg:
        repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 30%, rgba(160, 120, 70, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 82% 70%, rgba(140, 100, 60, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, #f8ecd4 0%, #f0e0c0 60%, #e8d8b8 100%);
}

/* ---- Fixed room backdrop: stone + candlelight pools + vignette ---- */
.landing-bg[b-8kch4z663k] {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.stone-bg[b-8kch4z663k] {
    position: absolute;
    inset: 0;
    background-image: url('/textures/stone-wall.jpg');
    background-size: 850px;
    background-position: center;
    filter: brightness(0.6) saturate(0.85) sepia(0.18) hue-rotate(-8deg) contrast(1.05);
}

.candlelight[b-8kch4z663k] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 40% at 18% 8%, rgba(255, 195, 100, 0.45), transparent 60%),
        radial-gradient(ellipse 45% 40% at 82% 8%, rgba(255, 195, 100, 0.40), transparent 60%),
        radial-gradient(ellipse 60% 45% at 50% 100%, rgba(0, 0, 0, 0.60), transparent 65%);
}

/* ---- Timber beams (top = brand bar, bottom = floor frame).
   Texture + filter live on ::before so the brand/sign-in text on the
   top beam stays crisp (the filter must not tint it). ---- */
.beam[b-8kch4z663k] {
    position: relative;
    z-index: 5;
    height: 80px;
    box-shadow:
        inset 0 -4px 8px rgba(0, 0, 0, 0.75),
        inset 0 3px 5px rgba(255, 200, 120, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.6);
}

    .beam[b-8kch4z663k]::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: url('/textures/noticeboard-wood.jpg');
        background-size: 600px auto;
        background-repeat: repeat-x;
        background-position: center;
        filter: brightness(0.55) saturate(1.15) contrast(1.1);
    }

.beam.top[b-8kch4z663k] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 46px;
}

.beam.bottom[b-8kch4z663k] { border-top: 1px solid rgba(0, 0, 0, 0.7); }

/* Brand mark + sign-in sit above the textured ::before layer. */
.beam-brand[b-8kch4z663k] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-glyph[b-8kch4z663k] { width: 24px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.4)); }
.brand-text[b-8kch4z663k] { line-height: 1.05; }
.brand-name[b-8kch4z663k] { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.005em; color: var(--text-on-stone); }
.brand-tag[b-8kch4z663k] { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.22em; margin-top: 4px; color: #c3b390; font-weight: 500; }

.beam-signin[b-8kch4z663k] {
    position: relative;
    z-index: 1;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brass);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: color 0.15s ease;
}

    .beam-signin:hover[b-8kch4z663k] { color: var(--brass-highlight); }

.bracket[b-8kch4z663k] {
    position: absolute;
    width: 24px;
    height: 28px;
    z-index: 2;
    background: linear-gradient(180deg, #4a4540 0%, #1a1612 50%, #2a2520 100%);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

    .bracket[b-8kch4z663k]::before,
    .bracket[b-8kch4z663k]::after {
        content: '';
        position: absolute;
        width: 5px;
        height: 5px;
        left: 50%;
        transform: translateX(-50%);
        background: radial-gradient(circle, #1a1612 0%, #000 70%);
        border-radius: 50%;
        box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3);
    }

    .bracket[b-8kch4z663k]::before { top: 5px; }
    .bracket[b-8kch4z663k]::after { bottom: 5px; }

.beam.top .bracket-l[b-8kch4z663k] { left: 18px; bottom: 6px; }
.beam.top .bracket-r[b-8kch4z663k] { right: 18px; bottom: 6px; }
.beam.bottom .bracket-l[b-8kch4z663k] { left: 18px; top: 6px; }
.beam.bottom .bracket-r[b-8kch4z663k] { right: 18px; top: 6px; }

/* ---- Flow + section scaffolding (replaces the mockup's .panel tiles) ---- */
.landing-flow[b-8kch4z663k] {
    position: relative;
    z-index: 3;
}

.landing-wrap[b-8kch4z663k] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 50px;
}

.landing-section[b-8kch4z663k] {
    padding: 40px 0 28px;
}

/* ============================================================
   HERO — chained tavern sign, tagline, CTA (sign on the stone;
   brand + sign-in live on the top beam above).
   ============================================================ */
.landing-hero[b-8kch4z663k] {
    position: relative;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No top padding — the sign assembly butts against the beam so the
       chains read as hanging from it. */
    padding: 0 50px 40px;
}

.hero-stage[b-8kch4z663k] {
    position: relative;
    z-index: 3;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-bottom: 12px;
}

/* Sign assembly — hanging + framed hybrid. */
.sign-assembly[b-8kch4z663k] {
    position: relative;
    width: 600px;
    /* Lift up so the chains tuck behind the beam's bottom edge (beam z5 >
       assembly), reading as bolted to the underside of the beam. */
    margin-top: -16px;
    padding-top: 200px;
    transform-origin: 50% 0;
    animation: sign-sway-b-8kch4z663k 8s ease-in-out infinite alternate;
}

@keyframes sign-sway-b-8kch4z663k {
    from { transform: rotate(-0.9deg); }
    to { transform: rotate(-0.35deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sign-assembly[b-8kch4z663k] { animation: none; }
}

.sign-chain[b-8kch4z663k] {
    position: absolute;
    top: 0;
    width: 14px;
    height: 200px;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.sign-chain.left[b-8kch4z663k] { left: 30px; }
.sign-chain.right[b-8kch4z663k] { right: 30px; }

.sign-mount[b-8kch4z663k] {
    position: absolute;
    top: 186px;
    left: -16px;
    right: -16px;
    bottom: -14px;
    background: linear-gradient(180deg, #3a3530 0%, #1a1612 50%, #2a2520 100%);
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 200, 120, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.5);
    z-index: 0;
    border-radius: 2px;
}

.chain-eyelet[b-8kch4z663k] {
    position: absolute;
    top: 176px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid #1a1612;
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 120, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.85),
        0 0 0 0.5px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.chain-eyelet.left[b-8kch4z663k] { left: 27px; }
.chain-eyelet.right[b-8kch4z663k] { right: 27px; }

.sign[b-8kch4z663k] {
    position: relative;
    height: 320px;
    padding: 38px 44px 34px;
    background-image: url('/textures/noticeboard-wood.jpg');
    background-size: 520px auto;
    background-position: center;
    filter: brightness(0.50) saturate(1.10) contrast(1.10);
    z-index: 2;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.55),
        inset 0 2px 0 rgba(255, 200, 120, 0.10),
        inset 0 -2px 0 rgba(0, 0, 0, 0.55),
        0 8px 14px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sign[b-8kch4z663k]::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(40, 30, 20, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 120, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 1;
}

.sign-stud[b-8kch4z663k] {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4a4540 0%, #1a1612 60%, #000 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 120, 0.10),
        0 1px 1px rgba(0, 0, 0, 0.8);
    z-index: 3;
}

/* framed-variant studs sit on the mount's four corners */
.sign-assembly > .sign-stud.tl[b-8kch4z663k] { top: 192px; left: -10px; }
.sign-assembly > .sign-stud.tr[b-8kch4z663k] { top: 192px; right: -10px; }
.sign-assembly > .sign-stud.bl[b-8kch4z663k] { bottom: -8px; left: -10px; }
.sign-assembly > .sign-stud.br[b-8kch4z663k] { bottom: -8px; right: -10px; }

/* Wordmark — inline SVG (gradient gold face + bevel). Diamonds flank it. */
.sign-name[b-8kch4z663k] {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1;
    color: #d9a83f;
    margin: 0;
    position: relative;
    z-index: 2;
}

.sign-name--svg[b-8kch4z663k] {
    padding: 0 56px;
    line-height: 0;
}

.sign-name-svg[b-8kch4z663k] {
    display: block;
    width: 520px;
    max-width: 100%;
    height: auto;
}

/* Flanking diamonds — warm cast-gold, same metal as the wordmark. */
.sign-name[b-8kch4z663k]::before,
.sign-name[b-8kch4z663k]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) rotate(45deg);
    background: radial-gradient(circle at 32% 28%, #fdeeb4 0%, #e7bb5b 32%, #ab7a2c 66%, #3a230c 100%);
    box-shadow:
        inset -1.5px -1.5px 2px rgba(40, 22, 6, 0.7),
        inset 1.5px 1.5px 1px rgba(255, 246, 214, 0.6),
        1px 2.5px 3px rgba(0, 0, 0, 0.6);
}

.sign-name[b-8kch4z663k]::before { left: 20px; }
.sign-name[b-8kch4z663k]::after { right: 20px; }

.sign-divider[b-8kch4z663k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px 0 10px;
    position: relative;
    z-index: 2;
}

.sign-divider .rule[b-8kch4z663k] {
    position: relative;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 97, 0.55) 50%, transparent 100%);
}

    .sign-divider .rule:first-child[b-8kch4z663k]::before,
    .sign-divider .rule:last-child[b-8kch4z663k]::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: radial-gradient(circle at 32% 28%, #fdeeb4 0%, #e7bb5b 50%, #ab7a2c 85%, #3a230c 100%);
        box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.45), 0 1px 1px rgba(0, 0, 0, 0.5);
    }

    .sign-divider .rule:first-child[b-8kch4z663k]::before { left: -2px; }
    .sign-divider .rule:last-child[b-8kch4z663k]::after { right: -2px; }

.sign-divider .mark[b-8kch4z663k] {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 1px;
    transform: rotate(45deg);
    background: radial-gradient(circle at 32% 28%, #fdeeb4 0%, #e7bb5b 32%, #ab7a2c 66%, #3a230c 100%);
    box-shadow:
        inset -1px -1px 2px rgba(40, 22, 6, 0.6),
        inset 1px 1px 1px rgba(255, 246, 214, 0.5),
        0 1.5px 2px rgba(0, 0, 0, 0.6);
}

    .sign-divider .mark[b-8kch4z663k]::before,
    .sign-divider .mark[b-8kch4z663k]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 1px;
        background: rgba(20, 10, 4, 0.65);
        box-shadow: 0 1px 0 rgba(255, 235, 180, 0.20);
    }

    .sign-divider .mark[b-8kch4z663k]::before { transform: translate(-50%, -50%); }
    .sign-divider .mark[b-8kch4z663k]::after { transform: translate(-50%, -50%) rotate(90deg); }

.sign-tag[b-8kch4z663k] {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #d9a83f;
    text-shadow:
        -0.5px -0.5px 0 rgba(255, 246, 214, 0.4),
        0.5px 0.5px 0 rgba(48, 28, 10, 0.9),
        0 2px 3px rgba(0, 0, 0, 0.5);
    margin: 0;
    position: relative;
    z-index: 2;
}

.hero-tagline[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 23px;
    line-height: 1.4;
    color: var(--text-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    margin: auto 0 0;
    text-align: center;
}

.hero-cta[b-8kch4z663k] {
    display: flex;
    justify-content: center;
    margin-bottom: auto;
}

.hero-cta button.btn-dark[b-8kch4z663k] {
    padding: 15px 36px;
    font-size: 12px;
}

/* ============================================================
   BTN-DARK — locked CTA (auth-final §12.9). Every property
   declared explicitly (per feedback_button_reset.md).
   ============================================================ */
button.btn-dark[b-8kch4z663k] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    text-decoration: none;
}

button.btn-dark:hover[b-8kch4z663k] {
    color: #f0d896;
    border-color: rgba(240, 208, 128, 0.8);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 200, 120, 0.22),
        0 0 14px rgba(255, 190, 90, 0.18);
}

/* ============================================================
   WOODEN NOTICEBOARD (discover-final §WOODEN NOTICEBOARD).
   ============================================================ */
.notice-board[b-8kch4z663k] {
    position: relative;
    border-radius: 3px;
    padding: 22px 24px 30px;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.75),
        0 5px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 200, 120, 0.15);
    overflow: visible;
}

    .notice-board[b-8kch4z663k]::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
            url('/textures/noticeboard-wood.jpg');
        background-size: auto, 900px;
        background-position: center, center;
        filter: brightness(0.78) saturate(1.05) contrast(1.05);
        pointer-events: none;
        z-index: 0;
        border-radius: 3px;
    }

    .notice-board[b-8kch4z663k]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 20% at 50% -2%, rgba(255, 210, 130, 0.34) 0%, rgba(255, 195, 100, 0.14) 38%, transparent 75%);
        z-index: 1;
        pointer-events: none;
    }

.nb-lantern[b-8kch4z663k] {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 44px;
    z-index: 7;
    filter:
        drop-shadow(0 0 8px rgba(255, 200, 100, 0.65))
        drop-shadow(0 0 16px rgba(255, 180, 80, 0.4));
}

/* ============================================================
   CARD — canonical parchment poster (discover-final, verbatim).
   ============================================================ */
.card[b-8kch4z663k] {
    position: relative;
    background: var(--parchment-bg);
    border-radius: 1px;
    padding: 22px 22px 14px;
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.58),
        0 2px 4px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 28px rgba(106, 74, 28, 0.06);
    color: #2a2018;
    font-size: 9px;
    line-height: 1.4;
}

.brass-tack[b-8kch4z663k] {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 25%, #c9a961 55%, #8a6f3a 85%, #4a3318 100%);
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 2;
}

.card-header[b-8kch4z663k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a7556;
    margin-bottom: 9px;
    font-weight: 600;
}

.card-stamp[b-8kch4z663k] {
    position: relative;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    padding: 4px 9px;
    border: 1.5px solid;
    border-radius: 1px;
    font-family: var(--font-ui);
    font-weight: 800;
    transform: rotate(-3deg);
    background: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    filter: blur(0.15px);
}

    .card-stamp[b-8kch4z663k]::before {
        content: '';
        position: absolute;
        inset: 2px;
        border: 0.5px solid currentColor;
        border-radius: 1px;
        opacity: 0.6;
        pointer-events: none;
    }

.card-stamp.open[b-8kch4z663k] { color: #6a4a1c; border-color: #6a4a1c; }
.card-stamp.filling[b-8kch4z663k] { color: #8b3a1c; border-color: #8b3a1c; }
.card-stamp.new[b-8kch4z663k] { color: #3a6a4a; border-color: #3a6a4a; }

.card-title[b-8kch4z663k] {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.1;
    color: #1a1208;
    font-weight: 500;
    margin-bottom: 3px;
}

.card-subtitle[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    color: #6a5236;
    font-size: 12px;
    margin-bottom: 14px;
}

.card-meta[b-8kch4z663k] {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 3px 10px;
    font-size: 8px;
    margin-bottom: 18px;
    padding-right: 54px;
}

    .card-meta dt[b-8kch4z663k] { text-transform: uppercase; letter-spacing: 0.14em; color: #8a7556; font-weight: 600; }
    .card-meta dd[b-8kch4z663k] { margin: 0; color: #2a2018; }

.card-footer[b-8kch4z663k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    padding-right: 10px;
    border-top: 1px solid rgba(106, 74, 28, 0.25);
}

.gm-block[b-8kch4z663k] { display: flex; align-items: center; gap: 6px; font-size: 8px; }

.gm-avatar[b-8kch4z663k] {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle, #d4b878 0%, #8a6f3a 100%);
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid #b8923c;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

    .gm-avatar.with-photo[b-8kch4z663k]::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: var(--photo);
        background-size: cover;
        background-position: center;
        filter: sepia(0.25) saturate(0.85) brightness(0.95);
    }

.gm-name[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: #2a2018;
}

.seats-display[b-8kch4z663k] { text-align: right; flex-shrink: 0; min-width: 72px; }

    .seats-display .seats-label[b-8kch4z663k] {
        font-family: var(--font-ui);
        font-size: 7px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 600;
        color: #8a7556;
        margin-bottom: 3px;
    }

    .seats-display .seats-num[b-8kch4z663k] {
        font-family: var(--font-display);
        font-size: 20px;
        color: #1a1208;
        line-height: 1;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .seats-display .seats-dots[b-8kch4z663k] {
        display: flex;
        gap: 3px;
        justify-content: flex-end;
        margin-bottom: 4px;
    }

        .seats-display .seats-dots .seat-dot[b-8kch4z663k] {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid rgba(106, 74, 28, 0.55);
        }

            .seats-display .seats-dots .seat-dot.filled[b-8kch4z663k] {
                background: rgba(80, 56, 22, 0.85);
                border-color: rgba(80, 56, 22, 0.95);
            }

    .seats-display .seats-applicants[b-8kch4z663k] {
        font-family: var(--font-ui);
        font-size: 7px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 600;
        color: #8a7556;
    }

.wax-seal[b-8kch4z663k] {
    position: absolute;
    top: 38%;
    right: 30px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow:
        inset -4px -5px 7px rgba(0, 0, 0, 0.6),
        inset 2px 3px 4px rgba(255, 255, 255, 0.32),
        0 3px 4px rgba(0, 0, 0, 0.55),
        0 1px 1px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    text-shadow:
        -1px -1px 1px rgba(0, 0, 0, 0.55),
        1px 1px 0 rgba(255, 255, 255, 0.25);
}

    .wax-seal[b-8kch4z663k]::after {
        content: '';
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.4),
            inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    }

.wax-seal.dnd5e[b-8kch4z663k] { background: radial-gradient(circle at 32% 28%, #d63830, #7a1a14); }
.wax-seal.vampire[b-8kch4z663k] { background: radial-gradient(circle at 32% 28%, #8a2a32, #4a0c14); }
.wax-seal.coc[b-8kch4z663k] { background: radial-gradient(circle at 32% 28%, #6a8a3a, #3a4a18); }

/* ---- Card row (wall): poster · keeper letter · poster ---- */
.card-row[b-8kch4z663k] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 16px;
    align-items: stretch;
}

    .card-row .card[b-8kch4z663k] { display: flex; flex-direction: column; }
    .card-row .card .card-footer[b-8kch4z663k] { margin-top: auto; }
    .card-row .card:first-child[b-8kch4z663k] { transform: rotate(-0.5deg); }
    .card-row .card:last-child[b-8kch4z663k] { transform: rotate(0.45deg); }

/* ---- Keeper's letter (focal card) ---- */
.keeper-card[b-8kch4z663k] {
    position: relative;
    padding: 28px 26px 22px;
    display: flex;
    flex-direction: column;
    background: var(--parchment-bg);
    border-radius: 1px;
    box-shadow:
        0 11px 22px rgba(0, 0, 0, 0.65),
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 28px rgba(106, 74, 28, 0.06);
    color: #2a2018;
}

.keeper-eyebrow[b-8kch4z663k] {
    font-family: var(--font-ui);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: center;
    margin: 6px 0 0;
}

.keeper-title[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.05;
    color: var(--ink-primary);
    text-align: center;
    margin: 6px 0 0;
}

.keeper-rule[b-8kch4z663k] {
    height: 1px;
    background: rgba(106, 74, 28, 0.22);
    margin: 12px auto 4px;
    max-width: 100px;
}

.keeper-body[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-secondary);
    text-align: center;
    margin: 8px 0 0;
}

    .keeper-body + .keeper-body[b-8kch4z663k] { margin-top: 6px; }

.keeper-signature[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--brass-on-parchment);
    text-align: center;
    margin: 12px 0 0;
}

.keeper-foot[b-8kch4z663k] {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    justify-content: center;
}

/* ============================================================
   AUDIENCE CARDS (two paths) + step list.
   ============================================================ */
.audience-row[b-8kch4z663k] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 18px;
}

.audience-card[b-8kch4z663k] {
    position: relative;
    padding: 26px 28px 22px;
    background: var(--parchment-bg);
    border-radius: 1px;
    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.6),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 28px rgba(106, 74, 28, 0.06);
    color: #2a2018;
    display: flex;
    flex-direction: column;
}

.audience-row .audience-card:nth-child(odd)[b-8kch4z663k] { transform: rotate(-0.35deg); }
.audience-row .audience-card:nth-child(even)[b-8kch4z663k] { transform: rotate(0.3deg); }

.audience-eyebrow[b-8kch4z663k] {
    font-family: var(--font-ui);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass-on-parchment);
    text-align: center;
    margin: 4px 0 0;
}

.audience-title[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.05;
    color: var(--ink-primary);
    text-align: center;
    margin: 4px 0 0;
}

.audience-rule[b-8kch4z663k] {
    height: 1px;
    background: rgba(106, 74, 28, 0.22);
    margin: 10px auto 14px;
    max-width: 90px;
}

.audience-lede[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-secondary);
    text-align: center;
    margin: 0 auto 14px;
    max-width: 380px;
}

.audience-steps[b-8kch4z663k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.a-step[b-8kch4z663k] {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
}

.a-step-disc[b-8kch4z663k] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 22%, var(--brass) 52%, #8a6f3a 82%, #4a3318 100%);
    box-shadow:
        inset -2px -2px 3px rgba(0, 0, 0, 0.50),
        inset 1px 2px 3px rgba(255, 255, 255, 0.42),
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(40, 24, 12, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(28, 18, 8, 0.78);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 232, 168, 0.45);
    flex-shrink: 0;
}

.a-step-text[b-8kch4z663k] { padding-top: 2px; }

.a-step-name[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.1;
    color: var(--ink-primary);
    margin: 0;
}

.a-step-line[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-secondary);
    margin: 2px 0 0;
}

.mid-cta-row[b-8kch4z663k] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

/* ============================================================
   FAQ scraps (2×2) + keeper sign-off close.
   ============================================================ */
.faq-grid[b-8kch4z663k] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 16px;
}

.faq-scrap[b-8kch4z663k] {
    position: relative;
    padding: 22px 22px 18px;
    background:
        repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    border-radius: 1px;
    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    color: #2a2018;
}

.faq-grid .faq-scrap:nth-child(1)[b-8kch4z663k] { transform: rotate(-0.4deg); }
.faq-grid .faq-scrap:nth-child(2)[b-8kch4z663k] { transform: rotate(0.35deg); }
.faq-grid .faq-scrap:nth-child(3)[b-8kch4z663k] { transform: rotate(0.3deg); }
.faq-grid .faq-scrap:nth-child(4)[b-8kch4z663k] { transform: rotate(-0.3deg); }

.faq-q[b-8kch4z663k] {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 6px;
}

.faq-a[b-8kch4z663k] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-primary);
    margin: 0;
}

    .faq-a .em[b-8kch4z663k] { font-style: italic; color: var(--brass-on-parchment); font-weight: 600; }

.keeper-signoff[b-8kch4z663k] {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-on-stone);
    text-align: center;
    margin: 18px 0 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

    .keeper-signoff .by[b-8kch4z663k] {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 600;
        color: var(--brass);
        margin-left: 6px;
    }

/* ============================================================
   Responsive — translate the mockup's .panel.mobile overrides.
   ============================================================ */
@media (max-width: 980px) {
    .sign-assembly[b-8kch4z663k] { width: 460px; }
    .sign[b-8kch4z663k] { height: auto; padding: 30px 30px 26px; }
    .sign-name--svg[b-8kch4z663k] { padding: 0 40px; }
    .sign-name[b-8kch4z663k]::before { left: 12px; }
    .sign-name[b-8kch4z663k]::after { right: 12px; }
    .landing-hero[b-8kch4z663k] { min-height: 680px; }
    .card-row[b-8kch4z663k] { grid-template-columns: 1fr; gap: 14px; }
    .card-row .card[b-8kch4z663k],
    .card-row .keeper-card[b-8kch4z663k] { transform: none; }
}

@media (max-width: 680px) {
    .landing-wrap[b-8kch4z663k] { padding: 0 16px; }
    .landing-hero[b-8kch4z663k] { padding: 0 16px 28px; min-height: 560px; }
    .landing-section[b-8kch4z663k] { padding: 24px 0 18px; }

    .beam[b-8kch4z663k] { height: 56px; }
    .beam[b-8kch4z663k]::before { background-size: 420px auto; }
    .beam.top[b-8kch4z663k] { padding: 0 16px; }
    .beam.bottom .bracket-l[b-8kch4z663k] { left: 12px; }
    .beam.bottom .bracket-r[b-8kch4z663k] { right: 12px; }
    .bracket[b-8kch4z663k] { width: 18px; height: 22px; }
    .beam.bottom .bracket-l[b-8kch4z663k], .beam.bottom .bracket-r[b-8kch4z663k] { top: 4px; }

    .brand-name[b-8kch4z663k] { font-size: 16px; }
    .brand-tag[b-8kch4z663k] { font-size: 7px; }
    .beam-signin[b-8kch4z663k] { font-size: 9px; }
    .brand-glyph[b-8kch4z663k] { width: 20px; height: 26px; }

    .sign-assembly[b-8kch4z663k] { width: 320px; padding-top: 160px; }
    .sign-chain[b-8kch4z663k] { height: 160px; }
    .sign-mount[b-8kch4z663k] { top: 146px; }
    .chain-eyelet[b-8kch4z663k] { top: 136px; }
    .sign-assembly > .sign-stud.tl[b-8kch4z663k], .sign-assembly > .sign-stud.tr[b-8kch4z663k] { top: 152px; }
    .sign[b-8kch4z663k] { padding: 24px 20px 22px; }
    .sign-name--svg[b-8kch4z663k] { padding: 0 26px; }
    .sign-name[b-8kch4z663k]::before, .sign-name[b-8kch4z663k]::after { width: 14px; height: 14px; }
    .sign-name[b-8kch4z663k]::before { left: 6px; }
    .sign-name[b-8kch4z663k]::after { right: 6px; }
    .sign-divider .rule[b-8kch4z663k] { width: 54px; }
    .hero-tagline[b-8kch4z663k] { font-size: 19px; }
    .nb-lantern[b-8kch4z663k] { width: 28px; height: 34px; top: -20px; }

    .audience-row[b-8kch4z663k] { grid-template-columns: 1fr; gap: 14px; }
    .audience-card[b-8kch4z663k] { padding: 20px 20px 18px; }
    .audience-row .audience-card:nth-child(odd)[b-8kch4z663k],
    .audience-row .audience-card:nth-child(even)[b-8kch4z663k] { transform: none; }
    .audience-title[b-8kch4z663k] { font-size: 22px; }
    .keeper-card[b-8kch4z663k] { padding: 20px 18px 16px; }
    .keeper-title[b-8kch4z663k] { font-size: 23px; }
    .keeper-body[b-8kch4z663k] { font-size: 13px; }
    .keeper-foot button.btn-dark[b-8kch4z663k] { width: 100%; }

    .faq-grid[b-8kch4z663k] { grid-template-columns: 1fr; gap: 14px; }
    .faq-scrap[b-8kch4z663k] { transform: none; }
    .mid-cta-row button.btn-dark[b-8kch4z663k] { width: 100%; }
    .keeper-signoff[b-8kch4z663k] { font-size: 14px; margin: 12px 0 10px; }
}