/* ╔══════════════════════════════════════════════════════════════╗
 * ║  OPTION.BLACK  —  foyer  ·  2026-04-24 cinematic rebuild     ║
 * ║                                                              ║
 * ║  A foyer in a law office at dusk. Brass hairlines on a       ║
 * ║  letterhead edge, wordmark above the threshold, seven hex    ║
 * ║  doors cut into the dark wall.  Four primary doors lit from  ║
 * ║  within; the Client Portal at center, always on; two back-   ║
 * ║  of-house doors outlined only, for the rooms that are mine.  ║
 * ║                                                              ║
 * ║  Subpage styles (.sub, .cta, .checklist, .notify-card,       ║
 * ║  .audio-wrap, .consig-card, .sub-foot) preserved untouched   ║
 * ║  below this block.                                           ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

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

:root {
    /* ── Palette ─────────────────────────────────────────────── */
    --void:          #07070A;  /* the wall                        */
    --void-deep:     #040407;  /* the threshold                   */
    --void-sub:      #05050609;
    --smoke:         #0D0C0A;
    --line:          #1A1916;
    --line-hi:       #2B2924;
    --line-soft:     rgba(232, 197, 71, 0.07);
    --line-gold:     rgba(212, 175, 55, 0.18);

    --ivory:         #EDE6D2;  /* page text, high                 */
    --ivory-soft:    #CEC7B3;
    --ivory-dim:     #8C8572;
    --ivory-mute:    #4A463C;

    --brass-hi:      #E8C547;  /* active lamp                     */
    --brass:         #D4AF37;  /* letterhead rule                 */
    --brass-lo:      #8B6914;  /* shadow                          */
    --brass-glow:    rgba(232, 197, 71, 0.28);
    --brass-faint:   rgba(212, 175, 55, 0.12);

    --steel-hi:      #cfd0d4;
    --steel:         #8a8a8e;
    --steel-mid:     #5a5a5e;
    --steel-lo:      #2a2a2e;

    --accent-blue:   #4A90C2;

    /* ── Scale ───────────────────────────────────────────────── */
    --door-size:           clamp(176px, 15.5vw, 222px);
    --door-size-center:    clamp(204px, 18vw, 260px);
    --door-size-secondary: clamp(116px, 10vw, 150px);

    --radius:  3px;
    --hairline: 1px solid var(--brass-faint);

    /* Spotlight track (updated by JS on pointermove) */
    --spot-x: 70%;
    --spot-y: 50%;
}

html { background: var(--void); }

/* ═══ Atmospheric layers (foyer-only — sit behind everything) ════ */
/* Starfield: six radial-gradient pinpricks, slow twinkle. Cinematic,
 * not cheesy — kept to <1% screen brightness so it's depth, not décor.
 * Inspired by ~/Downloads/benchslap-atmospheric.html starscape technique. */
.foyer-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.2px 1.2px at  8% 18%, rgba(232, 197, 71, 0.55), transparent),
        radial-gradient(0.8px 0.8px at 22% 64%, rgba(255, 246, 224, 0.45), transparent),
        radial-gradient(1.0px 1.0px at 46% 12%, rgba(232, 197, 71, 0.38), transparent),
        radial-gradient(1.6px 1.6px at 68% 78%, rgba(238, 228, 200, 0.6),  transparent),
        radial-gradient(0.9px 0.9px at 84% 32%, rgba(212, 175, 55, 0.40),  transparent),
        radial-gradient(1.0px 1.0px at 92% 58%, rgba(255, 246, 224, 0.30), transparent),
        radial-gradient(1.4px 1.4px at 14% 86%, rgba(212, 175, 55, 0.32),  transparent),
        radial-gradient(0.7px 0.7px at 36% 38%, rgba(238, 228, 200, 0.40), transparent);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.55;
    animation: foyer-twinkle 11s ease-in-out infinite;
}
@keyframes foyer-twinkle {
    0%, 100% { opacity: 0.42; }
    50%      { opacity: 0.62; }
}

/* Glow orbs — two giant blurred radial-gradients, one warm-brass, one
 * cool-steel, that simulate distant lamplight in the chamber. They're
 * the secret to the page feeling "lit from within" rather than "dark." */
.foyer-orb {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(96px);
    will-change: opacity, transform;
}
.foyer-orb--brass {
    width: clamp(420px, 45vw, 720px);
    height: clamp(420px, 45vw, 720px);
    top: 12%;
    left: 8%;
    background: radial-gradient(circle, rgba(232, 197, 71, 0.18) 0%, rgba(212, 175, 55, 0.08) 36%, transparent 70%);
    opacity: 0.85;
    animation: foyer-orb-drift 22s ease-in-out infinite;
}
.foyer-orb--cool {
    width: clamp(380px, 38vw, 600px);
    height: clamp(380px, 38vw, 600px);
    bottom: 8%;
    right: 6%;
    background: radial-gradient(circle, rgba(74, 144, 194, 0.12) 0%, rgba(74, 144, 194, 0.05) 40%, transparent 72%);
    opacity: 0.7;
    animation: foyer-orb-drift 28s ease-in-out infinite reverse;
}
@keyframes foyer-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(2vw, -1vh) scale(1.04); }
}

/* Fine film grain — repeating SVG noise pattern via data-URI. Adds a
 * tactile, photographic quality to the void; reads as "shot on film,"
 * not "rendered in CSS." */
.foyer-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
    .foyer-stars, .foyer-orb { animation: none; }
}

/* ═══ Shared base — subpages share this ════════════════════════ */
body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at top left, rgba(255,255,255,0.02), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(74,144,194,0.04), transparent 60%),
        var(--void);
    color: var(--ivory);
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-feature-settings: "ss01", "onum";
    line-height: 1.6;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.38;
    background-image:
        repeating-linear-gradient(45deg,  rgba(255,255,255,0.015) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 3px);
}

/* ═══ Foyer atmosphere (homepage only) ═════════════════════════ */
body.foyer-body {
    background:
        radial-gradient(ellipse 70% 55% at 14% 82%, rgba(120, 140, 170, 0.035), transparent 60%),
        radial-gradient(ellipse 110% 55% at 50% 112%, rgba(0,0,0,0.70), transparent 60%),
        radial-gradient(ellipse at top, rgba(0,0,0,0.35), transparent 45%),
        var(--void);
    /* The wall is warmer in the upper right — lamp behind the bench */
}
/* Spotlight — follows the cursor, warms the void under the hand */
.foyer-spotlight {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        circle 420px at var(--spot-x) var(--spot-y),
        rgba(232, 197, 71, 0.045) 0%,
        rgba(232, 197, 71, 0.022) 32%,
        transparent 70%
    );
    transition: background 180ms ease;
    mix-blend-mode: screen;
}
/* Film-grain — microdot, deep background */
body.foyer-body::after {
    content: '';
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    background-image:
        radial-gradient(circle at 10% 20%, #000 0.5px, transparent 0.8px),
        radial-gradient(circle at 70% 70%, #fff 0.5px, transparent 0.8px),
        radial-gradient(circle at 40% 90%, #000 0.5px, transparent 0.8px),
        radial-gradient(circle at 85% 15%, #fff 0.5px, transparent 0.8px);
    background-size: 3px 3px, 3px 3px, 3px 3px, 3px 3px;
    animation: foyer-grain 14s steps(6) infinite;
}

/* ═══ Letterhead rules (top & bottom of viewport) ═════════════ */
.letterhead {
    position: fixed;
    left: clamp(24px, 5vw, 80px);
    right: clamp(24px, 5vw, 80px);
    height: 1px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--brass) 16%,
        var(--brass-hi) 50%,
        var(--brass) 84%,
        transparent 100%);
    opacity: 0.28;
}
.letterhead--top    { top: 14px; }
.letterhead--bottom { bottom: 14px; }
.letterhead--top::before,
.letterhead--bottom::before {
    /* A second, fainter line — double-rule plate edge */
    content: '';
    position: absolute;
    left: 20%; right: 20%;
    top: 3px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass-faint), transparent);
}
.letterhead--bottom::before { top: auto; bottom: 3px; }

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-hi); }

/* ─── Skip link ──────────────────────────────────────────────── */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ivory); color: var(--void);
    padding: 10px 14px; font: 600 13px 'Inter', sans-serif;
    z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ═══ FOYER — main shell ══════════════════════════════════════ */
.foyer {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(520px, 1.3fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    padding: clamp(44px, 5vw, 72px) clamp(36px, 6vw, 100px) clamp(24px, 3vw, 40px);
}
@media (max-width: 1080px) {
    .foyer {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 56px 24px 40px;
    }
}

/* ═══ Brand plate (left column) ═══════════════════════════════ */
.plate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: relative;
    animation: foyer-plate-in 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* An almost-invisible vertical brass rule on the outer edge of the plate */
.plate::before {
    content: '';
    position: absolute;
    left: -clamp(10px, 1.5vw, 20px);
    top: 6%;
    bottom: 6%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--brass-faint) 20%,
        var(--brass-faint) 80%,
        transparent 100%);
}
@media (max-width: 1080px) { .plate::before { display: none; } }

.plate-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 4px;
}
.plate-seal {
    width: clamp(72px, 7vw, 108px);
    height: auto;
    filter: drop-shadow(0 8px 32px rgba(212, 175, 55, 0.18));
}
/* Flagship seal — the curated metallic-hex with OPTION.BLACK rendered into
 * the brass rim itself (the user's hand-curated brand mark). It dominates
 * the plate; the wordmark below becomes the legal-letterhead caption. */
.plate-seal--flagship {
    width: clamp(220px, 22vw, 380px);
    height: auto;
    filter:
        drop-shadow(0 22px 56px rgba(0, 0, 0, 0.72))
        drop-shadow(0 0 48px rgba(212, 175, 55, 0.28))
        drop-shadow(0 0 22px rgba(232, 197, 71, 0.16));
    /* Soft brass-rim halo on hover/idle pulse — gives the gold edge that
       living-metal feeling without animating the asset itself. */
    animation: flagship-shimmer 6s ease-in-out infinite;
    will-change: filter, transform;
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* When the seal IS the wordmark, .plate-head--seal-only centers it as the
 * hero element — no kicker chip pulling weight to one side. */
.plate-head--seal-only {
    display: block;
    margin-bottom: 18px;
}
.plate-seal--flagship:hover {
    transform: rotate(-1.5deg) scale(1.02);
}
@keyframes flagship-shimmer {
    0%, 100% {
        filter:
            drop-shadow(0 14px 38px rgba(0, 0, 0, 0.65))
            drop-shadow(0 0 32px rgba(212, 175, 55, 0.22))
            drop-shadow(0 0 14px rgba(232, 197, 71, 0.12));
    }
    50% {
        filter:
            drop-shadow(0 14px 42px rgba(0, 0, 0, 0.68))
            drop-shadow(0 0 42px rgba(232, 197, 71, 0.32))
            drop-shadow(0 0 18px rgba(232, 197, 71, 0.20));
    }
}
@media (prefers-reduced-motion: reduce) {
    .plate-seal--flagship { animation: none; }
}
.plate-kicker {
    font: 500 10px/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--brass);
    padding-top: 2px;
    border-left: 1px solid var(--line-gold);
    padding-left: 14px;
    max-width: 16ch;
}

/* Wordmark — the foyer's signage */
.plate-wordmark {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.028em;
    color: var(--ivory);
    margin: 10px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.word-option {
    font-size: clamp(52px, 7.6vw, 96px);
    display: block;
    text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.word-rule {
    display: block;
    width: clamp(80px, 7vw, 120px);
    height: 1px;
    background: linear-gradient(90deg, var(--brass), var(--brass-faint));
    margin: 10px 0 8px;
    opacity: 0.7;
}
.word-dot {
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 42px);
    color: var(--ivory-soft);
    letter-spacing: 0.02em;
}

/* Identifiers — legal letterhead */
.plate-smallcaps {
    font: 500 12px/1.5 'JetBrains Mono', monospace;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--ivory);
    margin: 10px 0 0;
}
.plate-identifier {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 400 12px/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    margin: 2px 0 0;
}
.plate-identifier .pip { color: var(--brass); }

/* Lede — italic Fraunces, with a brass marginalia rule */
.plate-lede {
    font: 300 clamp(18px, 1.3vw, 22px)/1.52 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-soft);
    max-width: 40ch;
    margin-top: 22px;
    padding-left: 18px;
    border-left: 1px solid var(--brass-faint);
    position: relative;
}
.plate-lede::before {
    /* a brass capital quote stroke, very small, top-left */
    content: '';
    position: absolute;
    left: -1px; top: 0;
    width: 3px; height: 14px;
    background: var(--brass);
    opacity: 0.75;
}
.lede-break {
    display: block;
    color: var(--ivory-dim);
    margin-top: 2px;
}

/* Specs — brass-ruled docket */
.plate-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 30px 0 0;
    padding: 0;
    width: 100%;
    max-width: 50ch;
    border-top: 1px solid var(--line-hi);
    border-bottom: 1px solid var(--line-hi);
    position: relative;
}
.plate-specs::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 32%;
    height: 1px;
    background: linear-gradient(90deg, var(--brass), transparent);
    opacity: 0.52;
}
.plate-specs::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 32%; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass-faint));
    opacity: 0.52;
}
.plate-specs > div {
    flex: 1 1 0;
    min-width: 10ch;
    padding: 16px 18px 16px 0;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plate-specs > div:last-child { border-right: 0; padding-right: 0; }
.plate-specs > div + div { padding-left: 18px; }
.plate-specs dt {
    font: 500 9.5px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ivory-mute);
    white-space: nowrap;
}
.plate-specs .spec-since {
    color: var(--ivory-mute);
    letter-spacing: 0.2em;
}
.plate-specs dd {
    /* Refined to a serif numeral set — letterhead figures, not console
     * digits. Cormorant Garamond's old-style numerals (font-feature
     * 'onum') give the figures a bookish, set-by-hand quality. */
    font: 500 26px/1 'Cormorant Garamond', 'Fraunces', Georgia, serif;
    font-feature-settings: "lnum", "tnum";
    letter-spacing: -0.005em;
    color: var(--ivory);
    margin: 0;
    font-variant-numeric: tabular-nums lining-nums;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.plate-specs .spec-plus { color: var(--brass); }
.plate-specs .spec-date {
    font-size: 10px;
    color: var(--ivory-mute);
    letter-spacing: 0.12em;
    margin-left: 6px;
}
@media (max-width: 560px) {
    .plate-specs { flex-direction: column; }
    .plate-specs > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 12px 0;
    }
    .plate-specs > div:last-child { border-bottom: 0; }
    .plate-specs > div + div { padding-left: 0; }
}

.plate-address {
    font-style: normal;
    font: 400 14px/1.5 'Inter', sans-serif;
    color: var(--ivory-dim);
    margin-top: 22px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.plate-address a {
    color: var(--ivory-dim);
    border-bottom: 1px solid var(--line-hi);
    padding-bottom: 1px;
    transition: color 200ms ease, border-color 200ms ease;
}
.plate-address a:hover {
    color: var(--brass);
    border-color: var(--brass);
}
.pip { color: var(--brass-lo); }

/* ═══ Rooms column (right) ═════════════════════════════════════ */
.foyer-rooms {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 3.5vw, 56px);
    padding: 8px 0;
}
/* Plumb line removed — with separated hexes the line would cut
 * through negative space.  Let the void do the work. */
.cluster-plumb { display: none; }

.cluster {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cluster-row {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 2.2vw, 36px);
}
/* NO OVERLAPS — every hex stands alone in the dark, framed, confident.
 * Premium composition uses negative space; the cluster reads as a
 * deliberate arrangement, not a honeycomb. */
.cluster-row + .cluster-row {
    margin-top: clamp(16px, 1.8vw, 32px) !important;
}
.cluster-row--secondaries {
    gap: clamp(60px, 6vw, 120px);
    padding-top: 4px;
}

/* ═══ THE DOOR — base ═════════════════════════════════════════ */
.door {
    --door-current: var(--door-size);
    width: var(--door-current);
    height: var(--door-current);
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--ivory);
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: door-open 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: var(--door-delay, 0ms);
}
.door--center       { --door-current: var(--door-size-center); }
.door--secondary    { --door-current: var(--door-size-secondary); }

.door-frame {
    position: absolute;
    inset: 0;
    display: block;
}

/* The hex-cut rim — brushed gunmetal, warmer at the light */
.door-rim,
.door-glow,
.door-interior,
.door-light {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

/* Rim: the cut edge of the wall. Brushed, warm at top, black at bottom */
.door-rim {
    background:
        linear-gradient(162deg,
            #1a1b1f 0%,
            #2e2f33 10%,
            #54565b 22%,
            #86878c 38%,
            #adafb4 48%,
            #7a7c81 60%,
            #3f4044 74%,
            #18191d 90%,
            #07080A 100%);
    z-index: 0;
    transition: filter 280ms ease;
}
.door-rim::after {
    /* fine brushed-metal striations across the rim */
    content: '';
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(140deg,
            rgba(255,255,255,0.045) 0 1px,
            transparent 1px 2px),
        repeating-linear-gradient(140deg,
            rgba(0,0,0,0.16) 0 1px,
            transparent 1px 3px);
    mix-blend-mode: overlay;
    opacity: 0.72;
    clip-path: inherit;
}

/* Brass hairline just inside the rim — the hex's "gold leaf" */
.door-glow {
    inset: 3.2%;
    background: transparent;
    box-shadow:
        inset 0 0 0 1px var(--brass-faint),
        inset 0 0 18px rgba(232, 197, 71, 0.03);
    z-index: 1;
    transition: box-shadow 320ms ease;
}

/* Interior: the lit room beyond the door */
.door-interior {
    inset: 5%;
    background:
        radial-gradient(ellipse at 50% 32%,
            #1c1e25 0%,
            #101117 44%,
            #07080B 88%,
            #050608 100%);
    box-shadow:
        inset 0 2px 10px rgba(255, 255, 255, 0.05),
        inset 0 -3px 16px rgba(0, 0, 0, 0.9),
        inset 0 0 0 1px rgba(232, 197, 71, 0.06);
    z-index: 2;
}

/* Light: the warm spill from within — hovered doors bloom, center always-on */
.door-light {
    inset: 5%;
    background:
        radial-gradient(ellipse 70% 48% at 50% 64%,
            rgba(232, 197, 71, 0.00) 0%,
            transparent 70%);
    z-index: 3;
    transition: background 380ms ease;
    pointer-events: none;
}

/* Stage — where the plaque sits, above all layers */
.door-stage {
    position: absolute;
    inset: 5%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12% 10%;
    text-align: center;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

/* The brand mark inside primary doors.  The real v5 brand assets are
 * already gold/silver-on-black premium renders, so no color grading.
 * A brass-tinted drop-shadow gives them room on the hex bed. */
.door-mark {
    width: 54%;
    height: auto;
    max-width: 128px;
    filter:
        drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 14px rgba(232, 197, 71, 0.08));
    transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
                filter    380ms ease;
}
/* The v10 BENCH SLAP marks render the wordmark INSIDE the image. They want
   slightly more breathing room and a lifted brass glow on hover. */
.door-mark--brass {
    width: 60%;
    max-width: 144px;
    filter:
        drop-shadow(0 8px 22px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 18px rgba(232, 197, 71, 0.16));
}
.door-mark--steel {
    width: 60%;
    max-width: 144px;
    filter:
        drop-shadow(0 8px 22px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 14px rgba(168, 181, 194, 0.18));
}
.door:hover .door-mark--brass,
.door:focus-visible .door-mark--brass {
    transform: scale(1.06) translateY(-1px);
    filter:
        drop-shadow(0 10px 28px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 28px rgba(232, 197, 71, 0.34));
}
.door:hover .door-mark--steel,
.door:focus-visible .door-mark--steel {
    transform: scale(1.06) translateY(-1px);
    filter:
        drop-shadow(0 10px 28px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 24px rgba(168, 181, 194, 0.32));
}
.door:hover .door-mark,
.door:focus-visible .door-mark {
    transform: scale(1.04);
    filter:
        drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 22px rgba(232, 197, 71, 0.24));
}
/* Noir color-grade: the existing brand marks were drawn in a mobile-app
 * palette. We don't alter the assets — we color-grade them in place, the
 * same way a film editor grades footage so every shot belongs to the same
 * movie. Mild saturation pull + warm sepia + a brass drop-shadow that
 * reads as lamp-light on the plaque. Full color returns on hover so the
 * brand is readable when someone engages. */
.door-mark--graded {
    filter:
        saturate(0.55)
        sepia(0.18)
        brightness(0.92)
        contrast(1.02)
        drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 10px rgba(232, 197, 71, 0.04));
}
.door:hover .door-mark--graded,
.door:focus-visible .door-mark--graded {
    filter:
        saturate(0.95)
        sepia(0.04)
        brightness(1.02)
        contrast(1.02)
        drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 14px rgba(232, 197, 71, 0.18));
}
/* Plaque — the door's engraved label */
.door-plaque {
    font: 600 11.5px/1.2 'JetBrains Mono', monospace;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ivory);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    max-width: 15ch;
}
/* Tier-only variant: when the room mark already carries the wordmark in
 * the image, the plaque becomes a price/tier qualifier (e.g. "Free forever",
 * "$59 · 30 days") rendered smaller and in italic-serif so it reads as
 * subtitle, not echo. */
.door-plaque--tier {
    font: italic 400 11.5px/1.3 'Fraunces', serif;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--ivory-soft);
    opacity: 0.86;
    margin-top: 6px;
    padding: 6px 0 0;
    position: relative;
}
/* A hairline brass tick under every plaque */
.door-plaque::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -6px;
    width: 18px; height: 1px;
    background: var(--brass);
    opacity: 0.45;
    transform: translateX(-50%);
    transition: width 280ms ease, opacity 280ms ease;
}
.door:hover .door-plaque::after,
.door:focus-visible .door-plaque::after { width: 34px; opacity: 0.9; }

.door-plaque--brass {
    color: var(--brass-hi);
    text-shadow: 0 0 12px var(--brass-glow), 0 1px 2px rgba(0,0,0,0.95);
}
.door-plaque--steel { color: var(--steel-hi); }
.door-plaque--blue  {
    color: var(--accent-blue);
    text-shadow: 0 0 10px rgba(74, 144, 194, 0.32), 0 1px 2px rgba(0,0,0,0.95);
}

/* ═══ CENTER door — the Client Portal ══════════════════════════ */
.door--center .door-rim {
    background:
        linear-gradient(162deg,
            #2a231a 0%,
            #4c3f28 12%,
            #806835 24%,
            #b29250 40%,
            #e1bf64 50%,
            #9d823e 62%,
            #594729 76%,
            #1e1812 90%,
            #09070A 100%);
}
.door--center .door-glow {
    box-shadow:
        inset 0 0 0 1.5px rgba(232, 197, 71, 0.42),
        inset 0 0 22px rgba(232, 197, 71, 0.08);
    animation: center-breath 4.2s ease-in-out infinite;
}
.door--center .door-interior {
    background:
        radial-gradient(ellipse at 50% 34%,
            #2a2214 0%,
            #161009 42%,
            #070402 92%);
    box-shadow:
        inset 0 2px 10px rgba(232, 197, 71, 0.10),
        inset 0 -3px 16px rgba(0, 0, 0, 0.9),
        inset 0 0 0 1px rgba(232, 197, 71, 0.28);
}
.door--center .door-light {
    background:
        radial-gradient(ellipse 75% 55% at 50% 62%,
            rgba(232, 197, 71, 0.15) 0%,
            rgba(232, 197, 71, 0.05) 40%,
            transparent 76%);
}
.door--center .door-stage {
    gap: 10px;
}

.door-center-kicker {
    font: 500 10px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--brass);
    text-shadow: 0 0 10px var(--brass-glow);
}
.door-center-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(34px, 3.2vw, 46px);
    line-height: 0.94;
    color: var(--ivory);
    letter-spacing: -0.018em;
    text-shadow: 0 0 18px rgba(232, 197, 71, 0.14), 0 2px 10px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.door-center-title-rule {
    display: block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
    opacity: 0.9;
    margin: 2px 0;
}
.door-center-sub {
    font: 300 13px/1.4 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-soft);
    max-width: 18ch;
}

/* ═══ SECONDARY doors — outline only, back of house ═══════════ */
.door--secondary .door-rim {
    background:
        linear-gradient(162deg,
            rgba(139, 105, 20, 0.18) 0%,
            rgba(212, 175, 55, 0.06) 48%,
            rgba(139, 105, 20, 0.14) 100%);
    /* Instead of brushed metal, the secondary door is a brass hairline
     * cut into the void — no lit interior, no fill. */
}
.door--secondary .door-rim::after {
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(140deg,
            rgba(255,255,255,0.02) 0 1px,
            transparent 1px 3px);
}
/* Hide the heavy inner layers for secondaries */
.door--secondary .door-glow {
    inset: 3.6%;
    box-shadow:
        inset 0 0 0 1px rgba(212, 175, 55, 0.22),
        inset 0 0 12px rgba(0, 0, 0, 0.45);
}
.door--secondary .door-interior,
.door--secondary .door-light {
    display: none;
}
.door--secondary .door-stage {
    inset: 6%;
    padding: 10% 8%;
    gap: 8px;
}
.door-sec-kicker {
    font: 500 9px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--ivory-mute);
}
.door-sec-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.9vw, 24px);
    line-height: 0.98;
    color: var(--ivory-soft);
    letter-spacing: -0.012em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ═══ Hover & focus — door opens ═══════════════════════════════ */
.door:hover, .door:focus-visible {
    transform: translateY(-5px);
    outline: none;
    z-index: 4;
}
.door--primary:hover .door-rim,
.door--primary:focus-visible .door-rim {
    filter: brightness(1.15) saturate(1.08) contrast(1.03);
}
.door--primary:hover .door-glow,
.door--primary:focus-visible .door-glow {
    box-shadow:
        inset 0 0 0 1.5px rgba(232, 197, 71, 0.55),
        inset 0 0 26px rgba(232, 197, 71, 0.12);
}
.door--primary:hover .door-light,
.door--primary:focus-visible .door-light {
    background:
        radial-gradient(ellipse 78% 58% at 50% 62%,
            rgba(232, 197, 71, 0.14) 0%,
            rgba(232, 197, 71, 0.04) 42%,
            transparent 75%);
}
.door--primary:hover .door-mark,
.door--primary:focus-visible .door-mark {
    transform: scale(1.03);
}
.door--center:hover .door-glow,
.door--center:focus-visible .door-glow {
    box-shadow:
        inset 0 0 0 2px rgba(232, 197, 71, 0.72),
        inset 0 0 32px rgba(232, 197, 71, 0.18);
    animation: none;
}
.door--center:hover .door-light,
.door--center:focus-visible .door-light {
    background:
        radial-gradient(ellipse 85% 65% at 50% 62%,
            rgba(232, 197, 71, 0.26) 0%,
            rgba(232, 197, 71, 0.08) 42%,
            transparent 78%);
}
.door--secondary:hover .door-rim,
.door--secondary:focus-visible .door-rim {
    filter: brightness(1.18);
}
.door--secondary:hover .door-glow,
.door--secondary:focus-visible .door-glow {
    box-shadow:
        inset 0 0 0 1px rgba(232, 197, 71, 0.55),
        inset 0 0 18px rgba(0, 0, 0, 0.5);
}
.door--secondary:hover .door-sec-title,
.door--secondary:focus-visible .door-sec-title {
    color: var(--ivory);
}

.door:focus-visible::after {
    content: '';
    position: absolute;
    inset: -8px;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    background: var(--brass);
    opacity: 0.16;
    z-index: -1;
    animation: focus-pulse 1.8s ease-in-out infinite;
}
.door:active { transform: translateY(-1px); }

/* ═══ NARRATOR — the docent plate ══════════════════════════════ */
.narrator {
    max-width: 68ch;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
.narrator::before,
.narrator::after {
    content: '';
    position: absolute;
    left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
    opacity: 0.55;
}
.narrator::before { top: 0; }
.narrator::after  { bottom: 0; }

.narrator-inner {
    padding: 26px 28px 28px;
    text-align: center;
    background:
        linear-gradient(180deg,
            rgba(212, 175, 55, 0.025) 0%,
            transparent 50%,
            rgba(212, 175, 55, 0.025) 100%);
    transition: background 260ms ease;
}
.narrator-eyebrow {
    display: block;
    font: 500 10px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 12px;
    transition: color 220ms ease, letter-spacing 220ms ease;
}
[data-foyer-narrator].is-active .narrator-eyebrow {
    color: var(--brass-hi);
    letter-spacing: 0.48em;
    text-shadow: 0 0 10px var(--brass-glow);
}
.narrator-caption {
    font: 300 clamp(16px, 1.18vw, 19px)/1.55 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-soft);
    margin: 0;
    transition: opacity 220ms ease, color 220ms ease;
    max-width: 56ch;
    margin-inline: auto;
}
[data-foyer-narrator].is-active .narrator-caption { color: var(--ivory); }

/* ═══ Foot — letterhead closer ═════════════════════════════════ */
.foyer-foot {
    position: relative;
    z-index: 1;
    padding: 24px clamp(36px, 6vw, 100px) 36px;
    border-top: 1px solid var(--line);
    font: 400 12.5px/1.5 'Inter', sans-serif;
    color: var(--ivory-mute);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.foot-signature {
    font: 400 12px/1.5 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-self: flex-start;
}
.foot-signature a { color: var(--ivory-dim); }
.foot-signature a:hover { color: var(--brass); }
.foot-links {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    justify-self: center;
    font: 400 12px/1 'Inter', sans-serif;
}
.foot-links a { color: var(--ivory-dim); transition: color 200ms ease; }
.foot-links a:hover { color: var(--ivory); }
.foot-links .foot-chambers { opacity: 0.55; }
.foot-links .foot-chambers:hover { opacity: 1; color: var(--brass); }
.foot-sep {
    width: 3px; height: 3px;
    background: var(--brass-lo);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.6;
}
.foot-epitaph {
    font: 300 13px/1.5 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-mute);
    justify-self: flex-end;
    margin: 0;
}

@media (max-width: 900px) {
    .foyer-foot {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 14px;
    }
    .foot-signature, .foot-links, .foot-epitaph { justify-self: center; }
}

/* ═══ Keyframes ════════════════════════════════════════════════ */
@keyframes foyer-plate-in {
    0%   { opacity: 0; transform: translateY(22px); filter: blur(4px); }
    50%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes door-open {
    0%   { opacity: 0; transform: translateY(24px) scale(0.94); filter: blur(8px); }
    55%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes center-breath {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1.5px rgba(232, 197, 71, 0.38),
            inset 0 0 22px rgba(232, 197, 71, 0.06);
    }
    50% {
        box-shadow:
            inset 0 0 0 1.5px rgba(232, 197, 71, 0.52),
            inset 0 0 26px rgba(232, 197, 71, 0.12);
    }
}
@keyframes focus-pulse {
    0%, 100% { opacity: 0.14; transform: scale(1); }
    50%      { opacity: 0.24; transform: scale(1.02); }
}
@keyframes foyer-grain {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 1%); }
    50%  { transform: translate(1%, -1%); }
    75%  { transform: translate(-1%, -2%); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .plate, .door, .door--center .door-glow,
    body.foyer-body::after, .door:focus-visible::after {
        animation: none !important;
    }
    .door, .door-mark, .narrator-eyebrow, .narrator-caption {
        transition: none !important;
    }
}

/* cluster-row--one: single hex centered at head of cluster.  With
 * zero overlap, simply sits above the row below with proper gap. */
.cluster-row--one {
    justify-content: center;
}
.cluster-row--secondaries {
    gap: clamp(40px, 4vw, 80px);
}

/* ═══ CONSIGLIERE — the flagship chat surface ═══════════════════════ */
.consigliere-suite {
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    max-width: 1180px;
    width: 100%;
    margin: clamp(28px, 4vw, 52px) auto 0;
    padding: clamp(40px, 5vw, 68px) clamp(28px, 4vw, 64px) clamp(40px, 4vw, 56px);

    /* A framed plate — brass hairlines top + bottom, amber inner glow */
    border-top: 1px solid var(--line-hi);
    border-bottom: 1px solid var(--line-hi);
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(232, 197, 71, 0.05), transparent 60%),
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(232, 197, 71, 0.035), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.35));
}
.consigliere-suite::before {
    /* brass double-rule at top */
    content: '';
    position: absolute;
    top: -1px; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass), var(--brass-hi), var(--brass), transparent);
    opacity: 0.9;
    box-shadow: 0 0 14px rgba(232, 197, 71, 0.4);
}
.consigliere-suite::after {
    content: '';
    position: absolute;
    top: 3px; left: 24%; right: 24%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass-faint), transparent);
    opacity: 0.55;
}

/* Header — BenchSlap mark + titling side by side */
.consigliere-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 2.5vw, 32px);
    align-items: center;
    max-width: 920px;
    margin: 0 auto 28px;
}
.consigliere-mark {
    width: clamp(72px, 7vw, 100px);
    height: clamp(72px, 7vw, 100px);
    display: grid;
    place-items: center;
    position: relative;
    padding: 10px;
    border: 1px solid var(--line-gold);
    border-radius: 6px;
    background:
        radial-gradient(circle at 30% 28%, rgba(232, 197, 71, 0.08), transparent 60%),
        linear-gradient(180deg, #14140f, #08070a);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -10px 22px rgba(0,0,0,0.6),
        0 8px 26px rgba(0,0,0,0.5);
}
.consigliere-mark img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.55));
}
/* Bubbles variant — the curated gold-speech-bubbles glyph for Consigliere.
 * Drops the framing box (the asset already has its own dark canvas + gold
 * mass) and breathes with the brass-shimmer cadence. */
.consigliere-mark--bubbles {
    width: clamp(96px, 9vw, 132px);
    height: clamp(96px, 9vw, 132px);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.consigliere-mark--bubbles img {
    filter:
        drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 22px rgba(212, 175, 55, 0.18));
    animation: flagship-shimmer 7s ease-in-out infinite 1s;
}
@media (prefers-reduced-motion: reduce) {
    .consigliere-mark--bubbles img { animation: none; }
}
.consigliere-titling {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.consigliere-eyebrow {
    font: 500 10.5px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivory-dim);
}
.consigliere-eyebrow strong {
    color: var(--brass-hi);
    font-weight: 700;
    text-shadow: 0 0 10px var(--brass-glow);
}
.consigliere-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(32px, 4.2vw, 54px);
    line-height: 1.02;
    color: var(--ivory);
    letter-spacing: -0.022em;
    margin: 4px 0 6px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.65);
}
.consigliere-lede {
    font: 300 clamp(15px, 1.15vw, 18px)/1.6 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-soft);
    max-width: 64ch;
    margin: 0;
}
.consigliere-lede strong {
    font-style: normal;
    font-weight: 600;
    color: var(--ivory);
    border-bottom: 1px solid var(--brass-faint);
    padding-bottom: 1px;
}
.consigliere-lede-dim {
    display: block;
    color: var(--ivory-mute);
    font-size: 0.92em;
    margin-top: 6px;
}

/* Sample question chips — ready to click */
.consigliere-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 920px;
    margin: 0 auto 28px;
}
.consigliere-chip {
    background:
        linear-gradient(180deg, rgba(40,40,44,0.6), rgba(18,18,22,0.85));
    border: 1px solid var(--line-hi);
    color: var(--ivory-soft);
    padding: 9px 16px;
    font: 500 12px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    transition: all 200ms ease;
}
.consigliere-chip:hover, .consigliere-chip:focus-visible {
    outline: none;
    border-color: var(--brass);
    color: var(--ivory);
    background: linear-gradient(180deg, rgba(52,44,22,0.65), rgba(22,18,10,0.85));
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.15);
}

/* The chat room itself — input + reply */
.consigliere-room {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 1060px;
    margin: 0 auto;
}
@media (max-width: 860px) {
    .consigliere-room { grid-template-columns: 1fr; }
}
.consigliere-input-wrap,
.consigliere-reply-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.consigliere-input-label {
    font: 500 10px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    padding-left: 2px;
}
.consigliere-input.consig-input {
    min-height: 148px;
    padding: 18px 20px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.4));
    border: 1px solid var(--line-hi);
    border-radius: 6px;
    font: 400 17px/1.6 'Fraunces', serif;
    color: var(--ivory);
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.55),
        inset 0 0 0 1px rgba(232, 197, 71, 0.06);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    resize: vertical;
}
.consigliere-input.consig-input::placeholder {
    color: var(--ivory-mute);
    font-style: italic;
}
.consigliere-input.consig-input:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.55),
        inset 0 0 0 1px var(--brass),
        0 0 0 4px rgba(212, 175, 55, 0.14);
}

.consigliere-actions {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}
.consigliere-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font: 600 12.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: all 200ms ease;
    border: 1px solid var(--line-hi);
}
.consigliere-btn--primary {
    background: linear-gradient(180deg, var(--brass-hi), var(--brass));
    color: var(--void);
    border-color: var(--brass);
    box-shadow:
        0 2px 0 rgba(139, 105, 20, 0.5),
        0 6px 22px rgba(232, 197, 71, 0.22);
    flex: 1 1 auto;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.consigliere-btn--primary:hover {
    background: linear-gradient(180deg, #f6d34e, var(--brass-hi));
    transform: translateY(-1px);
    box-shadow:
        0 3px 0 rgba(139, 105, 20, 0.5),
        0 10px 28px rgba(232, 197, 71, 0.32);
}
.consigliere-btn--primary:disabled {
    background: linear-gradient(180deg, #7d6520, #5a4818);
    color: rgba(0,0,0,0.55);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.consigliere-btn--ghost {
    background: transparent;
    color: var(--ivory-dim);
    border-color: var(--line-hi);
}
.consigliere-btn--ghost:hover {
    color: var(--ivory);
    border-color: var(--steel);
    background: rgba(255,255,255,0.02);
}
.consigliere-btn-arrow {
    font-size: 14px;
    transition: transform 200ms ease;
}
.consigliere-btn--primary:hover .consigliere-btn-arrow {
    transform: translateX(4px);
}

.consigliere-reply.consig-reply {
    min-height: 148px;
    padding: 18px 20px;
    background:
        linear-gradient(180deg, rgba(232, 197, 71, 0.045), rgba(232, 197, 71, 0.015));
    border: 1px solid var(--line-gold);
    border-radius: 6px;
    font: 400 16px/1.68 'Fraunces', serif;
    color: var(--ivory);
    box-shadow:
        inset 0 0 0 1px rgba(232, 197, 71, 0.08),
        inset 0 2px 8px rgba(0,0,0,0.25);
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 420px;
}
.consigliere-reply.consig-reply.idle {
    color: var(--ivory-mute);
    font-style: italic;
}
/* Rendered markdown inside the Consigliere reply — bold / italic /
 * code / highlighted Utah citations.  The raw response now reads as
 * typeset legal prose instead of a code-editor dump. */
.consigliere-reply strong {
    color: var(--ivory);
    font-weight: 600;
}
.consigliere-reply em {
    color: var(--ivory-soft);
    font-style: italic;
}
.consigliere-reply code {
    font: 500 0.92em/1.4 'JetBrains Mono', monospace;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--line-hi);
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--ivory-soft);
    white-space: nowrap;
}
.consigliere-reply .consig-cite {
    font: 500 0.95em/inherit 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    color: var(--brass-hi);
    background: rgba(232, 197, 71, 0.05);
    border-bottom: 1px dotted rgba(232, 197, 71, 0.35);
    padding: 0 2px;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(232, 197, 71, 0.15);
}

.consigliere-fine {
    text-align: center;
    margin: 30px auto 0;
    max-width: 72ch;
    font: 400 14px/1.6 'Fraunces', serif;
    color: var(--ivory-dim);
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.consigliere-fine-strong {
    font-weight: 600;
    font-style: italic;
    color: var(--ivory-soft);
}
.consigliere-fine-dim {
    color: var(--ivory-mute);
    font-size: 0.92em;
    display: inline-block;
    margin-top: 6px;
}
.consigliere-fine a {
    color: var(--brass);
    font-weight: 500;
    border-bottom: 1px solid var(--brass-faint);
    padding-bottom: 1px;
    transition: color 180ms ease, border-color 180ms ease;
}
.consigliere-fine a:hover {
    color: var(--brass-hi);
    border-color: var(--brass-hi);
}

@media (max-width: 720px) {
    .consigliere-suite { padding: 36px 20px 32px; }
    .consigliere-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .consigliere-title { font-size: clamp(26px, 7vw, 34px); }
    .consigliere-mark { width: 76px; height: 76px; }
    .consigliere-actions { flex-direction: column; }
    .consigliere-btn { width: 100%; }
    .consigliere-chip { font-size: 10.5px; padding: 8px 12px; }
}

/* Legacy .demo-desk stubs (for any cached pages that still load older markup) */
.demo-desk {
    grid-column: 1 / -1;           /* span both foyer columns */
    position: relative;
    z-index: 1;
    max-width: 1120px;
    width: 100%;
    margin: clamp(28px, 4vw, 48px) auto 0;
    padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(180deg,
            rgba(212, 175, 55, 0.018) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.30) 100%);
}
.demo-desk::before {
    /* brass hairline across the top, tapered */
    content: '';
    position: absolute;
    top: -1px; left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
    opacity: 0.7;
}
.demo-desk::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 30%; right: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass-faint), transparent);
    opacity: 0.6;
}

.demo-desk-head {
    text-align: center;
    margin-bottom: 28px;
}
.demo-desk-kicker {
    font: 500 10.5px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--line-gold);
    border-radius: 999px;
    text-shadow: 0 0 10px var(--brass-glow);
}
.demo-desk-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.05;
    color: var(--ivory);
    letter-spacing: -0.02em;
    margin: 18px auto 14px;
    max-width: 24ch;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.demo-desk-lede {
    font: 300 clamp(15px, 1.1vw, 17px)/1.6 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-soft);
    max-width: 62ch;
    margin: 0 auto;
}
.demo-desk-lede strong {
    color: var(--brass);
    font-weight: 600;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92em;
    letter-spacing: 0.02em;
}

.demo-desk-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 1000px;
    margin: 28px auto 0;
}
@media (max-width: 780px) {
    .demo-desk-card { grid-template-columns: 1fr; }
}
.demo-desk-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.demo-desk-label {
    font: 500 10px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    padding-left: 2px;
}
/* Override the subpage .consig-input / .consig-reply defaults to fit the
 * noir desk — darker wells, brass focus, italic Fraunces body. */
.demo-desk-input.consig-input {
    min-height: 164px;
    padding: 16px 18px;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.35));
    border: 1px solid var(--line-hi);
    border-radius: 4px;
    font: 400 16px/1.6 'Fraunces', serif;
    color: var(--ivory);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(232, 197, 71, 0.05);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    resize: vertical;
}
.demo-desk-input.consig-input::placeholder {
    color: var(--ivory-mute);
    font-style: italic;
}
.demo-desk-input.consig-input:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        inset 0 0 0 1px var(--brass),
        0 0 0 4px rgba(212, 175, 55, 0.12);
}

.demo-desk-reply.consig-reply {
    min-height: 164px;
    padding: 16px 18px;
    background:
        linear-gradient(180deg,
            rgba(212, 175, 55, 0.035),
            rgba(212, 175, 55, 0.015));
    border: 1px solid var(--line-gold);
    border-radius: 4px;
    font: 400 15.5px/1.65 'Fraunces', serif;
    color: var(--ivory);
    box-shadow:
        inset 0 0 0 1px rgba(232, 197, 71, 0.06);
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 360px;
}
.demo-desk-reply.consig-reply.idle {
    color: var(--ivory-mute);
    font-style: italic;
}

.demo-desk-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.demo-desk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    font: 600 11.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    border: 1px solid var(--line-hi);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(40,40,44,0.8), rgba(18,18,22,0.9));
    color: var(--ivory);
    cursor: pointer;
    transition: all 180ms ease;
}
.demo-desk-btn:hover {
    background: linear-gradient(180deg, rgba(58,58,62,0.9), rgba(28,28,32,0.95));
    border-color: var(--steel);
    color: var(--ivory);
    transform: translateY(-1px);
}
.demo-desk-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.demo-desk-btn--primary {
    background: linear-gradient(180deg, var(--brass-hi), var(--brass-lo));
    color: var(--void);
    border-color: var(--brass);
    text-shadow: 0 1px 0 rgba(255,255,255,0.1);
}
.demo-desk-btn--primary:hover {
    background: linear-gradient(180deg, #f4d04a, var(--brass));
    color: var(--void);
    border-color: var(--brass-hi);
    box-shadow: 0 4px 18px rgba(232, 197, 71, 0.22);
}

.demo-desk-fine {
    text-align: center;
    margin: 24px auto 0;
    max-width: 62ch;
    font: 400 13.5px/1.55 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-dim);
}
.demo-desk-fine em {
    color: var(--ivory-soft);
}
.demo-desk-fine a {
    color: var(--brass);
    border-bottom: 1px solid var(--brass-faint);
    padding-bottom: 1px;
    transition: color 180ms ease, border-color 180ms ease;
}
.demo-desk-fine a:hover {
    color: var(--brass-hi);
    border-color: var(--brass-hi);
}

@media (max-width: 720px) {
    .demo-desk { padding: 32px 20px; }
    .demo-desk-title { font-size: clamp(26px, 7vw, 34px); }
    .demo-desk-lede { font-size: 14.5px; }
    .demo-desk-actions { flex-direction: column; }
    .demo-desk-btn { width: 100%; padding: 14px; }
}

/* ═══ Responsive tuning ════════════════════════════════════════ */
@media (max-width: 1080px) {
    :root {
        --door-size:           clamp(172px, 24vw, 224px);
        --door-size-center:    clamp(200px, 28vw, 260px);
        --door-size-secondary: clamp(116px, 17vw, 156px);
    }
    .cluster-row--secondaries { gap: clamp(60px, 8vw, 120px); }
}
@media (max-width: 720px) {
    :root {
        --door-size:           146px;
        --door-size-center:    176px;
        --door-size-secondary: 108px;
    }
    .word-option { font-size: clamp(48px, 12vw, 72px); }
    .word-dot    { font-size: clamp(22px, 5.5vw, 30px); }
    .door-plaque { font-size: 9.5px; letter-spacing: 0.2em; }
    .door-center-title { font-size: clamp(22px, 5vw, 28px); }
    .door-center-kicker { font-size: 8.5px; letter-spacing: 0.28em; }
    .door-center-sub { display: none; }
    .door-sec-title { font-size: clamp(14px, 3.6vw, 18px); }
    .plate-seal { width: 76px; }
    .plate-kicker { font-size: 9px; letter-spacing: 0.28em; }
    .narrator-inner { padding: 18px 16px 20px; }
    .narrator-eyebrow { font-size: 9px; letter-spacing: 0.3em; }
    .narrator-caption { font-size: 14.5px; }
    .cluster-row--secondaries { gap: 40px; }
    .letterhead { left: 16px; right: 16px; }
}
@media (max-width: 440px) {
    :root {
        --door-size:           120px;
        --door-size-center:    136px;
        --door-size-secondary: 92px;
    }
    .door-plaque { font-size: 8.5px; letter-spacing: 0.14em; }
}

/* ─── Subpage pattern ────────────────────────────────────────── */
/* Subpages share the foyer's brass-letterhead chrome — a hairline at
 * the top and bottom of the viewport, a tidy header with the
 * Option.Black seal on the left and the room name on the right. */
.sub {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 48px clamp(24px, 5vw, 80px);
}
.sub::before,
.sub::after {
    content: '';
    position: fixed;
    left: clamp(24px, 5vw, 80px);
    right: clamp(24px, 5vw, 80px);
    height: 1px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--brass) 16%,
        var(--brass-hi) 50%,
        var(--brass) 84%,
        transparent 100%);
    opacity: 0.28;
}
.sub::before { top: 14px; }
.sub::after  { bottom: 14px; }

.sub-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 48px;
    gap: 18px;
}
.sub-head-left {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.sub-head-seal {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.18));
    flex: 0 0 auto;
}
.sub-back {
    font: 500 13px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    display: inline-flex; align-items: center; gap: 10px;
}
.sub-back::before { content: '←'; font-size: 16px; }
.sub-back:hover { color: var(--brass); }

.sub-main {
    max-width: 720px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.sub-hero {
    text-align: center;
    padding: 24px 0 36px;
}
.sub-hero img, .sub-hero svg {
    width: clamp(140px, 22vw, 200px);
    height: auto;
    margin: 0 auto 28px;
    display: block;
}
.sub-eyebrow {
    font: 600 11px/1.6 'JetBrains Mono', monospace;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    margin-bottom: 16px;
}
.sub-title {
    font: 400 clamp(36px, 6vw, 58px)/1.05 'Fraunces', serif;
    letter-spacing: -0.015em;
    color: var(--ivory);
    margin-bottom: 16px;
}
.sub-lede {
    font: 300 20px/1.5 'Fraunces', serif;
    font-style: italic;
    color: var(--ivory-soft);
    max-width: 52ch;
    margin: 0 auto;
}
.sub-body p {
    font: 400 17px/1.7 'Fraunces', serif;
    color: var(--ivory);
    margin-bottom: 18px;
}
.sub-body p em { color: var(--ivory-soft); font-style: italic; }
.sub-body p strong { color: var(--ivory); font-weight: 600; }

/* ─── CTAs ───────────────────────────────────────────────────── */
.cta-row {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 12px;
}
.cta-row.center { justify-content: center; }
.cta {
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 14px 28px;
    font: 600 13px/1 'Inter', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: 1px solid var(--line-hi);
    background: linear-gradient(180deg, var(--steel-lo), #14141a);
    color: var(--ivory);
    cursor: pointer;
    transition: all 200ms ease;
}
.cta:hover {
    background: linear-gradient(180deg, #3a3a3e, #1a1a1e);
    border-color: var(--steel);
    color: var(--ivory);
    transform: translateY(-1px);
}
.cta.primary {
    background: linear-gradient(180deg, var(--brass-hi), var(--brass-lo));
    color: var(--void);
    border-color: var(--brass);
}
.cta.primary:hover {
    background: linear-gradient(180deg, #f4d04a, var(--brass));
    color: var(--void);
}
.cta.steel {
    background: linear-gradient(180deg, #cfd0d4, #6a6a6e);
    color: var(--void);
}
.cta.steel:hover {
    background: linear-gradient(180deg, #e8e9ec, #7c7c80);
    color: var(--void);
}

/* ─── Checklist (used on portal marketing) ───────────────────── */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.checklist li {
    padding: 12px 16px 12px 40px;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--brass);
    font: 400 15px/1.55 'Inter', sans-serif;
    color: var(--ivory);
}
.checklist li::before {
    content: '✓';
    position: absolute;
    left: 14px; top: 11px;
    color: var(--brass);
    font: 700 14px 'Inter', sans-serif;
}

/* ─── Notify form ────────────────────────────────────────────── */
.notify-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    padding: 28px;
    display: flex; flex-direction: column; gap: 14px;
}
.notify-card label {
    font: 600 11px/1.6 'JetBrains Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ivory-dim);
}
.notify-card input,
.notify-card textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--void-sub);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    font: 400 15px/1.4 'Inter', sans-serif;
    color: var(--ivory);
}
.notify-card input:focus,
.notify-card textarea:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.notify-msg {
    font: 400 14px/1.5 'Inter', sans-serif;
    margin-top: 6px;
    min-height: 20px;
}
.notify-msg.ok  { color: #6aad7a; }
.notify-msg.err { color: #c85050; }

/* ─── Notify scope checkbox tiles ────────────────────────────── */
.notify-card label.notify-scope {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font: 400 14px/1.5 'Inter', sans-serif;
    color: var(--ivory);
    letter-spacing: 0;
    text-transform: none;
    transition: border-color 180ms ease, background 180ms ease;
}
.notify-card label.notify-scope:hover {
    border-color: var(--line-hi);
    background: rgba(255, 255, 255, 0.03);
}
.notify-card label.notify-scope:has(input:checked) {
    border-color: var(--brass);
    background: rgba(212, 175, 55, 0.04);
}
.notify-card label.notify-scope input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--brass);
    cursor: pointer;
}
.notify-card label.notify-scope span { flex: 1 1 auto; }
.notify-card label.notify-scope strong { margin-right: 4px; }

/* ─── Audio player (swan song) ───────────────────────────────── */
.audio-wrap {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    padding: 28px;
    display: flex; flex-direction: column; gap: 18px; align-items: center;
    text-align: center;
}
.audio-wrap audio { width: 100%; max-width: 420px; }

/* ─── Consigliere demo ───────────────────────────────────────── */
.consig-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 720px) { .consig-card { grid-template-columns: 1fr; } }
.consig-col label {
    font: 600 11px/1.6 'JetBrains Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    margin-bottom: 8px;
    display: block;
}
.consig-input {
    width: 100%; min-height: 180px;
    padding: 14px;
    background: var(--void-sub);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    font: 400 15px/1.55 'Fraunces', serif;
    color: var(--ivory);
    resize: vertical;
}
.consig-input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12); }
.consig-reply {
    width: 100%; min-height: 180px;
    padding: 14px;
    background: rgba(212, 175, 55, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius);
    font: 400 15px/1.55 'Fraunces', serif;
    color: var(--ivory);
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 400px;
}
.consig-reply.idle { color: var(--ivory-mute); font-style: italic; }

/* ─── Site footer (subpages) ─────────────────────────────────── */
.sub-foot {
    margin-top: 72px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    font: 400 13px/1.5 'Inter', sans-serif;
    color: var(--ivory-mute);
}
.sub-foot a { color: var(--ivory-dim); }
.sub-foot a:hover { color: var(--brass); }
.sub-foot strong { color: var(--ivory-soft); display: block; margin-bottom: 6px; }