/* ============================================================
   matchumnews.com — The Concierge of the Seventh Avenue
   A leather-bound dossier from a 1973 city that thought
   it would be 2050 by now.
   ============================================================ */

/* ----- Palette: "The Concierge's Drawer" ----- */
:root {
    --cordovan: #3A1F14;
    --cordovan-deep: #2A140C;
    --vellum: #F2E8D5;
    --vellum-warm: #E5DDCB;
    --brass: #C8985A;
    --brass-light: #E8C892;
    --brass-deep: #9C7138;
    --brass-mid: #A77A3F;
    --brass-pale: #D9B07A;
    --midnight: #0F1A2C;
    --tangerine: #FF7A4A;
    --seafoam: #7DCEB8;
    --editor-red: #B32E2E;
    --smoke: #E5DDCB;

    --shadow-room: 0 22px 44px -22px rgba(15, 10, 6, 0.55), 0 6px 16px -8px rgba(15, 10, 6, 0.35);
    --shadow-deep: 0 36px 60px -22px rgba(15, 10, 6, 0.78), 0 12px 28px -10px rgba(15, 10, 6, 0.55);

    --ease-mech: cubic-bezier(0.2, 0.0, 0.2, 1.0);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);
}

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

html, body {
    background: var(--midnight);
    color: var(--vellum);
    font-family: 'Newsreader', 'Inter', Georgia, serif;
    font-size: 17px;
    line-height: 1.62;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    min-height: 100vh;
}

body {
    position: relative;
    background:
        radial-gradient(1100px 900px at 88% 6%, rgba(255, 122, 74, 0.22), rgba(15, 26, 44, 0) 55%),
        radial-gradient(1400px 1000px at 12% 100%, rgba(58, 31, 20, 0.65), rgba(15, 26, 44, 0) 60%),
        linear-gradient(180deg, #0F1A2C 0%, #1A1208 60%, #0B0703 100%);
    cursor: none;
}

body.touch {
    cursor: auto;
}

body.dossier-open {
    overflow: hidden;
}

/* ----- Off-axis avenue grid watermark ----- */
body::before {
    content: '';
    position: fixed;
    inset: -10vh -10vw;
    background-image:
        repeating-linear-gradient(73deg, rgba(229, 221, 203, 0.04) 0 1px, transparent 1px 84px),
        repeating-linear-gradient(163deg, rgba(229, 221, 203, 0.025) 0 1px, transparent 1px 124px);
    pointer-events: none;
    z-index: 1;
}

.filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ============================================================
   LAMP GLOW + DUST + CURSOR
   ============================================================ */
.lamp-glow {
    position: fixed;
    top: -22vh;
    right: -18vw;
    width: 70vw;
    height: 70vw;
    max-width: 1200px;
    max-height: 1200px;
    background: radial-gradient(closest-side, rgba(255, 122, 74, 0.34), rgba(255, 188, 110, 0.15) 35%, rgba(15, 26, 44, 0) 70%);
    pointer-events: none;
    z-index: 2;
    filter: blur(8px);
    animation: lampFlicker 6.4s ease-in-out infinite;
}

@keyframes lampFlicker {
    0%, 100% { opacity: 0.95; transform: translate(0, 0) scale(1); }
    37% { opacity: 1.0; transform: translate(-6px, 4px) scale(1.01); }
    63% { opacity: 0.88; transform: translate(4px, -3px) scale(0.995); }
}

.dust-motes {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 3;
    opacity: 0.85;
}

.brass-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    transform: translate(-100px, -100px);
    pointer-events: none;
    z-index: 9999;
    transition: transform 60ms linear, opacity 200ms ease, filter 240ms var(--ease-mech);
    filter: drop-shadow(0 2px 4px rgba(15, 10, 6, 0.6));
    will-change: transform;
}

body.touch .brass-cursor,
body.no-cursor .brass-cursor {
    display: none;
}

body.cursor-lift .brass-cursor svg {
    transform: rotate(-12deg) scale(1.18);
    filter: drop-shadow(0 0 10px rgba(255, 122, 74, 0.55));
}

body.cursor-bell .brass-cursor svg {
    transform: rotate(18deg) scale(1.15);
    filter: drop-shadow(0 0 14px rgba(125, 206, 184, 0.6));
}

.brass-cursor svg {
    transition: transform 220ms var(--ease-mech), filter 220ms var(--ease-mech);
}

/* ============================================================
   LOBBY / GENERAL CONTAINER
   ============================================================ */
.lobby {
    position: relative;
    z-index: 4;
}

/* ============================================================
   LOBBY PLATE
   ============================================================ */
.lobby-plate {
    position: relative;
    min-height: 140vh;
    padding: 36px clamp(24px, 4vw, 72px) 110px;
    overflow: hidden;
}

/* ----- Masthead strip (top meta) ----- */
.masthead-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(229, 221, 203, 0.18);
    font-family: 'DM Mono', 'Space Mono', 'Inter', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vellum-warm);
}

.city-coords {
    color: var(--seafoam);
}

.masthead-meta {
    display: flex;
    gap: 10px;
    color: var(--vellum-warm);
}

.meta-dot {
    color: var(--brass);
}

.weather-strip {
    color: var(--brass-pale);
}

/* ----- Masthead wordmark ----- */
.masthead-wrap {
    position: relative;
    margin: 28px 0 36px;
    transform: translateX(-1.4vw);
}

.masthead {
    font-family: 'Fraunces', 'Inter', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 700;
    font-weight: 700;
    font-size: clamp(3.6rem, 9.2vw, 9.2rem);
    line-height: 0.86;
    letter-spacing: -0.024em;
    color: var(--vellum);
    text-shadow:
        0 1px 0 rgba(232, 200, 146, 0.35),
        0 -1px 0 rgba(15, 10, 6, 0.55),
        0 22px 32px rgba(15, 10, 6, 0.5);
    display: inline-flex;
    flex-wrap: wrap;
}

.mast-letter {
    display: inline-block;
    background: linear-gradient(180deg, var(--vellum) 0%, var(--brass-pale) 55%, var(--brass) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: transform 480ms var(--ease-spring), filter 480ms var(--ease-mech);
}

.mast-letter:hover {
    transform: translateY(-4px) rotate(-1.5deg);
    filter: drop-shadow(0 0 14px rgba(232, 200, 146, 0.45));
}

.mast-comma {
    display: inline-block;
    color: var(--editor-red);
    background: none;
    -webkit-text-fill-color: var(--editor-red);
    margin: 0 0.06em;
    transform: translateY(-0.04em);
}

.masthead-tag {
    font-family: 'Yeseva One', 'Fraunces', Georgia, serif;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    color: var(--brass-pale);
    margin-top: 4px;
    letter-spacing: 0.02em;
    font-style: italic;
}

.masthead-stripe {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: var(--editor-red);
    box-shadow: 0 0 16px rgba(179, 46, 46, 0.65);
}

/* ----- Lobby grid ----- */
.lobby-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "leading leading marquee marquee"
        "leading leading wire    datebook"
        "stamp   note    wire    datebook";
    gap: 22px;
    margin-top: 8px;
    align-items: stretch;
}

.leading-card { grid-area: leading; min-height: 540px; }
.marquee-column { grid-area: marquee; min-height: 240px; }
.wire-panel { grid-area: wire; min-height: 380px; }
.datebook { grid-area: datebook; min-height: 380px; }
.stamp-card { grid-area: stamp; min-height: 200px; }
.concierge-note { grid-area: note; min-height: 200px; }

@media (max-width: 1100px) {
    .lobby-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "leading leading"
            "marquee marquee"
            "wire    datebook"
            "stamp   note";
    }
}

@media (max-width: 720px) {
    .lobby-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "leading"
            "marquee"
            "wire"
            "datebook"
            "stamp"
            "note";
    }
}

/* ============================================================
   BLOCK / LEATHER SURFACE (shared)
   ============================================================ */
.block {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    transform: translate(var(--offset-x, 0), var(--offset-y, 0));
    transition:
        transform 320ms var(--ease-mech),
        box-shadow 320ms var(--ease-mech),
        filter 320ms var(--ease-mech);
    box-shadow: var(--shadow-room);
    isolation: isolate;
}

.block::after {
    /* subtle ambient shadow as if room light bevels the block */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(232, 200, 146, 0.10), inset 0 -1px 0 rgba(15, 10, 6, 0.45);
    border-radius: inherit;
    z-index: 4;
}

.block:hover {
    transform: translate(var(--offset-x, 0), calc(var(--offset-y, 0) - 6px));
    box-shadow: var(--shadow-deep);
    filter: brightness(1.04);
}

.block.lifted {
    transform: translate(var(--offset-x, 0), calc(var(--offset-y, 0) - 6px));
    box-shadow: var(--shadow-deep);
    filter: brightness(1.05);
}

/* ----- Leather surface ----- */
.leather-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(245, 215, 165, 0.20), rgba(58, 31, 20, 0) 55%),
        linear-gradient(160deg, #4A2A1B 0%, #3A1F14 38%, #2A140C 100%);
    overflow: hidden;
}

.leather-surface.dark {
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(232, 200, 146, 0.14), rgba(15, 10, 6, 0) 55%),
        linear-gradient(160deg, #2A140C 0%, #1B0E07 60%, #0E0703 100%);
}

.leather-surface::before {
    /* leather pebbled grain via SVG noise data-uri (acts as static fallback layered) */
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.42;
    mix-blend-mode: multiply;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.94' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0 0.06 0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
    pointer-events: none;
}

.leather-surface::after {
    /* warm overhead lighting */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 18%, rgba(245, 215, 165, 0.22), rgba(0, 0, 0, 0) 65%),
                radial-gradient(ellipse at 50% 110%, rgba(15, 10, 6, 0.55), rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

.leather-light {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 16%, rgba(255, 224, 178, 0.18), rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
    z-index: 1;
}

.leather-buff {
    position: absolute;
    top: -50%;
    left: -120%;
    width: 80%;
    height: 200%;
    background: linear-gradient(70deg,
        rgba(245, 215, 165, 0) 0%,
        rgba(245, 215, 165, 0.0) 35%,
        rgba(245, 215, 165, 0.30) 50%,
        rgba(245, 215, 165, 0.0) 65%,
        rgba(245, 215, 165, 0) 100%);
    transform: rotate(0deg);
    transition: left 1.6s var(--ease-mech);
    pointer-events: none;
    z-index: 2;
}

.block:hover .leather-buff,
.block.lifted .leather-buff {
    left: 120%;
}

/* ============================================================
   CARD INNER (shared text content)
   ============================================================ */
.card-inner {
    position: relative;
    z-index: 3;
    padding: clamp(22px, 3vw, 36px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--vellum);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'DM Mono', 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass-pale);
    flex-wrap: wrap;
}

.kicker {
    font-family: 'Yeseva One', serif;
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--brass-light);
    font-style: normal;
    margin-right: 6px;
}

.datestamp {
    color: var(--seafoam);
    margin-left: auto;
}

.card-headline {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 700;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.8rem);
    line-height: 0.98;
    letter-spacing: -0.018em;
    color: var(--vellum);
    text-shadow: 0 1px 0 rgba(15, 10, 6, 0.4);
}

.leading-card .card-headline {
    font-size: clamp(2.2rem, 4.2vw, 3.8rem);
}

.card-standfirst {
    font-family: 'Yeseva One', 'Fraunces', Georgia, serif;
    font-size: clamp(1.0rem, 1.4vw, 1.25rem);
    line-height: 1.5;
    color: var(--vellum-warm);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 520ms steps(8, end), opacity 320ms var(--ease-mech) 80ms;
    margin: 0;
}

.block:hover .card-standfirst,
.block.lifted .card-standfirst {
    max-height: 280px;
    opacity: 1;
}

.card-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px dashed rgba(232, 200, 146, 0.26);
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vellum-warm);
}

.byline {
    color: var(--brass-pale);
}

.readtag {
    color: var(--tangerine);
    transition: color 200ms var(--ease-mech), letter-spacing 200ms var(--ease-mech);
}

.block:hover .readtag {
    color: var(--tangerine);
    letter-spacing: 0.22em;
    text-shadow: 0 0 12px rgba(255, 122, 74, 0.6);
}

/* ============================================================
   LEADING CARD specifics
   ============================================================ */
.leading-card .card-inner {
    padding: clamp(28px, 4vw, 56px);
}

/* ============================================================
   MEDALLIONS (SVG-as-CSS via mask is overkill; use inline glyphs)
   ============================================================ */
.medallion {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, var(--brass-light) 0%, var(--brass) 45%, var(--brass-deep) 100%);
    position: relative;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 10, 6, 0.4), 0 1px 2px rgba(15, 10, 6, 0.5), inset 0 0 6px rgba(255, 220, 170, 0.4);
}

.medallion::before,
.medallion::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* desk-specific glyphs via mask-image */
.medallion[data-medallion="city-hall"]::after {
    background: var(--cordovan);
    mask-image: radial-gradient(circle at 50% 50%, transparent 28%, black 28%, black 36%, transparent 36%, transparent 44%, black 44%, black 50%, transparent 50%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 28%, black 28%, black 36%, transparent 36%, transparent 44%, black 44%, black 50%, transparent 50%);
}

.medallion[data-medallion="foreign-wires"]::after {
    background: var(--cordovan);
    mask-image:
        linear-gradient(0deg, black 8%, transparent 8%, transparent 92%, black 92%),
        linear-gradient(90deg, black 8%, transparent 8%, transparent 92%, black 92%),
        radial-gradient(circle at 50% 50%, transparent 32%, black 33%, black 35%, transparent 36%);
    -webkit-mask-image:
        linear-gradient(0deg, black 8%, transparent 8%, transparent 92%, black 92%),
        linear-gradient(90deg, black 8%, transparent 8%, transparent 92%, black 92%),
        radial-gradient(circle at 50% 50%, transparent 32%, black 33%, black 35%, transparent 36%);
    mask-composite: add;
    -webkit-mask-composite: source-over;
}

.medallion[data-medallion="markets"]::after {
    background: var(--cordovan);
    mask-image:
        radial-gradient(circle at 35% 60%, black 10%, transparent 12%),
        radial-gradient(circle at 65% 60%, black 10%, transparent 12%),
        linear-gradient(150deg, transparent 35%, black 36%, black 38%, transparent 39%);
    -webkit-mask-image:
        radial-gradient(circle at 35% 60%, black 10%, transparent 12%),
        radial-gradient(circle at 65% 60%, black 10%, transparent 12%),
        linear-gradient(150deg, transparent 35%, black 36%, black 38%, transparent 39%);
}

.medallion[data-medallion="arts"]::after {
    background: var(--cordovan);
    mask-image:
        radial-gradient(ellipse 8% 14% at 38% 42%, black 70%, transparent 72%),
        radial-gradient(ellipse 8% 14% at 62% 42%, black 70%, transparent 72%),
        radial-gradient(ellipse 18% 8% at 50% 68%, black 70%, transparent 72%);
    -webkit-mask-image:
        radial-gradient(ellipse 8% 14% at 38% 42%, black 70%, transparent 72%),
        radial-gradient(ellipse 8% 14% at 62% 42%, black 70%, transparent 72%),
        radial-gradient(ellipse 18% 8% at 50% 68%, black 70%, transparent 72%);
}

.medallion[data-medallion="society"]::after {
    background: var(--cordovan);
    mask-image:
        linear-gradient(180deg, transparent 34%, black 35%, black 37%, transparent 38%),
        radial-gradient(ellipse 22% 10% at 50% 30%, black 70%, transparent 72%),
        radial-gradient(ellipse 14% 8% at 50% 70%, black 70%, transparent 72%);
    -webkit-mask-image:
        linear-gradient(180deg, transparent 34%, black 35%, black 37%, transparent 38%),
        radial-gradient(ellipse 22% 10% at 50% 30%, black 70%, transparent 72%),
        radial-gradient(ellipse 14% 8% at 50% 70%, black 70%, transparent 72%);
}

.medallion[data-medallion="sports"]::after {
    background: var(--cordovan);
    mask-image:
        radial-gradient(circle at 50% 50%, transparent 30%, black 31%, black 33%, transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 42%, black 43%, black 45%, transparent 46%);
    -webkit-mask-image:
        radial-gradient(circle at 50% 50%, transparent 30%, black 31%, black 33%, transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 42%, black 43%, black 45%, transparent 46%);
}

.medallion[data-medallion="late"]::after {
    background: var(--cordovan);
    mask-image: radial-gradient(circle at 60% 40%, black 28%, transparent 30%), radial-gradient(circle at 50% 50%, transparent 38%, black 40%, black 42%, transparent 44%);
    -webkit-mask-image: radial-gradient(circle at 60% 40%, black 28%, transparent 30%), radial-gradient(circle at 50% 50%, transparent 38%, black 40%, black 42%, transparent 44%);
}

.medallion[data-medallion="obituaries"]::after {
    background: var(--cordovan);
    mask-image:
        radial-gradient(ellipse 28% 18% at 50% 38%, black 70%, transparent 72%),
        radial-gradient(ellipse 6% 4% at 50% 64%, black 70%, transparent 72%);
    -webkit-mask-image:
        radial-gradient(ellipse 28% 18% at 50% 38%, black 70%, transparent 72%),
        radial-gradient(ellipse 6% 4% at 50% 64%, black 70%, transparent 72%);
}

.medallion[data-medallion="culture"]::after {
    background: var(--cordovan);
    mask-image:
        radial-gradient(circle at 50% 50%, transparent 26%, black 27%, black 30%, transparent 31%),
        linear-gradient(45deg, transparent 47%, black 48%, black 52%, transparent 53%);
    -webkit-mask-image:
        radial-gradient(circle at 50% 50%, transparent 26%, black 27%, black 30%, transparent 31%),
        linear-gradient(45deg, transparent 47%, black 48%, black 52%, transparent 53%);
}

/* ============================================================
   MARQUEE COLUMN
   ============================================================ */
.marquee-column {
    position: relative;
    background: linear-gradient(180deg, #0F1A2C 0%, #14253E 100%);
    padding: 28px 28px 28px 60px;
    display: flex;
    align-items: stretch;
}

.chrome-rail {
    position: absolute;
    left: 26px;
    top: 24px;
    bottom: 24px;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--brass-pale) 0%, var(--brass) 30%, var(--brass-deep) 60%, var(--brass) 100%);
    box-shadow: 0 0 12px rgba(232, 200, 146, 0.45), inset 0 0 0 1px rgba(15, 10, 6, 0.45);
}

.rail-bead {
    position: absolute;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--brass-light), var(--brass-deep));
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(255, 220, 170, 0.5);
}

.rail-bead:nth-child(1) { top: 14%; }
.rail-bead:nth-child(2) { top: 49%; }
.rail-bead:nth-child(3) { top: 84%; }

.marquee-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.marquee-item {
    position: relative;
    padding: 10px 14px 14px 0;
    border-bottom: 1px dashed rgba(232, 200, 146, 0.2);
    cursor: pointer;
    transition: transform 280ms var(--ease-mech), background 280ms var(--ease-mech);
}

.marquee-item:last-child {
    border-bottom: 0;
}

.marquee-item:hover {
    transform: translateX(6px);
    background: linear-gradient(90deg, rgba(255, 122, 74, 0.10), rgba(255, 122, 74, 0));
}

.marquee-num {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--brass-pale);
    letter-spacing: 0.22em;
}

.marquee-item .medallion {
    position: absolute;
    top: 12px;
    right: 0;
    width: 18px;
    height: 18px;
}

.marquee-headline {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 96, "wght" 700;
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--vellum);
    margin: 4px 28px 6px 0;
}

.marquee-meta {
    font-family: 'DM Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--seafoam);
    text-transform: uppercase;
}

/* ============================================================
   WIRE PANEL
   ============================================================ */
.wire-panel {
    background: var(--vellum);
    color: var(--cordovan);
    padding: 22px 24px;
    font-family: 'DM Mono', monospace;
    border: 1px solid rgba(58, 31, 20, 0.22);
    box-shadow: var(--shadow-room), inset 0 0 0 1px rgba(232, 200, 146, 0.4);
    position: relative;
    overflow: hidden;
}

.wire-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(15, 26, 44, 0.05) 0 1px, transparent 1px 3px);
    pointer-events: none;
    opacity: 0.6;
}

.wire-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(58, 31, 20, 0.3);
    position: relative;
}

.wire-led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--seafoam);
    box-shadow: 0 0 10px rgba(125, 206, 184, 0.85), inset 0 0 0 1px rgba(15, 10, 6, 0.4);
    animation: wireLed 1.6s ease-in-out infinite;
}

@keyframes wireLed {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.wire-title {
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    color: var(--cordovan);
    font-weight: 700;
}

.wire-stamp {
    margin-left: auto;
    background: var(--editor-red);
    color: var(--vellum);
    padding: 2px 8px;
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    border-radius: 1px;
}

.wire-body {
    position: relative;
    z-index: 1;
    height: 270px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
}

.wire-line {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--cordovan);
    padding: 4px 0;
    border-bottom: 1px dotted rgba(58, 31, 20, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 200ms;
}

.wire-line.fresh {
    color: var(--editor-red);
    animation: telexFlash 0.8s ease-out;
}

@keyframes telexFlash {
    0% { background: rgba(179, 46, 46, 0.18); }
    100% { background: transparent; }
}

/* ============================================================
   DATEBOOK
   ============================================================ */
.datebook .datebook-inner {
    position: relative;
    z-index: 3;
    padding: 28px 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--vellum);
    text-align: center;
    align-items: center;
    justify-content: center;
}

.datebook-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass-pale);
}

.datebook-day {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 900;
    font-size: clamp(5rem, 9vw, 8rem);
    line-height: 0.92;
    color: var(--brass-light);
    margin: 4px 0 -4px;
    text-shadow: 0 4px 20px rgba(232, 200, 146, 0.35), 0 1px 0 rgba(15, 10, 6, 0.5);
}

.datebook-year {
    font-family: 'DM Mono', monospace;
    font-size: 0.86rem;
    letter-spacing: 0.32em;
    color: var(--vellum-warm);
    margin-top: 8px;
}

.datebook-time {
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    color: var(--seafoam);
    letter-spacing: 0.18em;
    margin-top: 10px;
}

.datebook-tz {
    color: var(--brass-pale);
    margin-left: 6px;
}

.datebook-quote {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed rgba(232, 200, 146, 0.32);
    font-family: 'Yeseva One', serif;
    font-size: 0.92rem;
    color: var(--vellum-warm);
    font-style: italic;
}

/* ============================================================
   STAMP CARD
   ============================================================ */
.stamp-card .stamp-inner {
    position: relative;
    z-index: 3;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stamp-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px double var(--tangerine);
    color: var(--tangerine);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 900;
    font-size: 1.35rem;
    line-height: 1.0;
    letter-spacing: 0.04em;
    transform: rotate(-7deg);
    box-shadow: 0 0 0 1px rgba(255, 122, 74, 0.2), 0 0 18px rgba(255, 122, 74, 0.3);
    text-shadow: 0 0 12px rgba(255, 122, 74, 0.6);
}

.stamp-cap {
    font-family: 'Caveat', 'Yeseva One', cursive;
    color: var(--brass-pale);
    margin-top: 16px;
    font-size: 1.05rem;
}

.stamp-edition {
    margin-top: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--vellum-warm);
}

/* ============================================================
   CONCIERGE NOTE (handwritten)
   ============================================================ */
.concierge-note {
    background: var(--vellum);
    border-radius: 4px;
    overflow: visible;
    transform: translate(var(--offset-x, 0), var(--offset-y, 0)) rotate(-1.4deg);
}

.concierge-note:hover {
    transform: translate(var(--offset-x, 0), calc(var(--offset-y, 0) - 6px)) rotate(-0.6deg);
}

.note-paper {
    position: relative;
    height: 100%;
    padding: 28px 26px 22px;
    background: linear-gradient(160deg, #F4ECD9 0%, #E8DFC6 100%);
    box-shadow: inset 0 0 36px rgba(58, 31, 20, 0.12);
}

.note-handwritten {
    font-family: 'Caveat', 'Yeseva One', cursive;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--cordovan);
    transform: rotate(-1.2deg);
}

.note-signature {
    margin-top: 18px;
    font-family: 'Caveat', cursive;
    color: var(--editor-red);
    font-size: 1.5rem;
    text-align: right;
    transform: rotate(-2deg);
}

.note-pin {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--brass-light), var(--brass-deep));
    transform: translateX(-50%);
    box-shadow: 0 4px 8px rgba(15, 10, 6, 0.45), inset 0 0 0 1px rgba(15, 10, 6, 0.4);
}

/* ============================================================
   SKYLINE BAND
   ============================================================ */
.skyline-band {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    height: 90px;
    pointer-events: none;
    z-index: 5;
}

.skyline-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.skyline-buildings rect.bldg {
    fill: #050912;
}

.skyline-buildings rect.window {
    fill: #1a2438;
    transition: fill 280ms ease-out, filter 280ms ease-out;
}

.skyline-buildings rect.window.lit {
    fill: var(--tangerine);
    filter: drop-shadow(0 0 3px rgba(255, 122, 74, 0.85));
}

/* ============================================================
   SUBWAY-TILE DIVIDER
   ============================================================ */
.subway-divider {
    padding: 36px clamp(24px, 4vw, 72px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-row {
    display: grid;
    grid-template-columns: repeat(16, minmax(36px, 56px));
    gap: 4px;
    max-width: 100%;
}

.subway-tile {
    aspect-ratio: 1 / 1;
    background:
        linear-gradient(160deg, #FFFEFB 0%, #F2E8D5 50%, #E5DDCB 100%);
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 96, "wght" 700;
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    color: var(--cordovan);
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -2px 0 rgba(58, 31, 20, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.4),
        inset -1px 0 0 rgba(58, 31, 20, 0.18),
        0 2px 4px rgba(15, 10, 6, 0.4);
}

.subway-tile.spacer {
    background: transparent;
    box-shadow: none;
    color: transparent;
}

/* ============================================================
   CITY BLOCK SEQUENCE
   ============================================================ */
.city-block-sequence {
    padding: 60px clamp(24px, 4vw, 72px) 80px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 220px;
    gap: 24px;
    position: relative;
}

.avenue-block { grid-column: span 4; grid-row: span 2; }
.tower-block { grid-column: span 2; grid-row: span 3; }
.plaza-block { grid-column: span 3; grid-row: span 2; }
.promenade-block { grid-column: span 6; grid-row: span 1; }
.sport-block { grid-column: span 3; grid-row: span 2; }
.obituary-block { grid-column: span 3; grid-row: span 2; }

@media (max-width: 1100px) {
    .city-block-sequence {
        grid-template-columns: repeat(4, 1fr);
    }
    .avenue-block { grid-column: span 4; grid-row: span 2; }
    .tower-block { grid-column: span 2; grid-row: span 3; }
    .plaza-block { grid-column: span 2; grid-row: span 2; }
    .promenade-block { grid-column: span 4; }
    .sport-block { grid-column: span 2; grid-row: span 2; }
    .obituary-block { grid-column: span 4; grid-row: span 2; }
}

@media (max-width: 720px) {
    .city-block-sequence {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .avenue-block, .tower-block, .plaza-block, .promenade-block, .sport-block, .obituary-block {
        grid-column: span 1;
        grid-row: auto;
        min-height: 320px;
    }
}

/* ----- Tower marks ----- */
.tower-marks {
    list-style: none;
    margin-top: 12px;
    padding: 0;
    border-left: 1px solid var(--brass);
    padding-left: 14px;
}

.tower-marks li {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    color: var(--brass-pale);
    letter-spacing: 0.12em;
    padding: 4px 0;
    text-transform: uppercase;
}

/* ----- Plaza duotone photo ----- */
.duotone-photo {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 130px;
    background:
        linear-gradient(135deg, #0F1A2C 0%, #1A3056 35%, #F2E8D5 80%, #FF7A4A 100%);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(15, 10, 6, 0.5);
    overflow: hidden;
    margin-top: 10px;
}

.duotone-frame {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 70%, rgba(15, 26, 44, 0.7) 0%, rgba(15, 26, 44, 0) 50%),
        radial-gradient(circle at 80% 30%, rgba(255, 122, 74, 0.5) 0%, rgba(15, 26, 44, 0) 45%),
        radial-gradient(ellipse at 60% 50%, rgba(242, 232, 213, 0.55) 0%, rgba(15, 26, 44, 0) 60%);
}

.scanlines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
}

/* ----- Promenade ----- */
.promenade-block .leather-surface {
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(245, 215, 165, 0.20), rgba(58, 31, 20, 0) 55%),
        linear-gradient(160deg, #4A2A1B 0%, #3A1F14 38%, #2A140C 100%);
}

.promenade-scroll {
    position: relative;
    z-index: 3;
    height: 100%;
    overflow: hidden;
    padding: 22px 0 22px 24px;
}

.promenade-track {
    display: flex;
    gap: 18px;
    height: 100%;
    will-change: transform;
    cursor: grab;
}

.promenade-track:active {
    cursor: grabbing;
}

.promenade-card {
    flex: 0 0 320px;
    background: linear-gradient(160deg, rgba(242, 232, 213, 0.96) 0%, rgba(229, 221, 203, 0.92) 100%);
    color: var(--cordovan);
    border-radius: 3px;
    padding: 14px 16px 16px;
    box-shadow: 0 6px 14px rgba(15, 10, 6, 0.45);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.promenade-card .medallion {
    width: 18px;
    height: 18px;
}

.promenade-card .kicker {
    color: var(--cordovan);
    font-size: 0.78rem;
}

.promenade-card h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 96, "wght" 700;
    font-size: 1.18rem;
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--cordovan);
}

.promenade-card p {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--cordovan);
    opacity: 0.84;
}

.promenade-indicator {
    position: absolute;
    z-index: 4;
    bottom: 10px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--seafoam);
    text-transform: uppercase;
}

.prom-pill {
    display: inline-block;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--seafoam), var(--brass-pale));
    box-shadow: 0 0 8px rgba(125, 206, 184, 0.6);
}

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon {
    padding: 80px clamp(24px, 4vw, 72px) 140px;
    text-align: center;
    color: var(--vellum-warm);
    position: relative;
}

.colophon-inner {
    max-width: 760px;
    margin: 0 auto;
}

.colophon-mono {
    font-family: 'DM Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-pale);
    line-height: 2;
}

.colophon-mn {
    margin: 28px 0 24px;
    display: inline-flex;
    gap: 6px;
}

.mn-letter {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 900;
    font-size: 6rem;
    line-height: 1;
    background: linear-gradient(180deg, var(--brass-light) 0%, var(--brass) 50%, var(--brass-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 14px rgba(232, 200, 146, 0.25);
}

.colophon-quote {
    font-family: 'Yeseva One', serif;
    font-size: 1.05rem;
    color: var(--vellum);
    font-style: italic;
}

/* ============================================================
   CONCIERGE BELL (NAV TRIGGER)
   ============================================================ */
.concierge-bell {
    position: fixed;
    right: 32px;
    bottom: 32px;
    width: 96px;
    height: 110px;
    background: transparent;
    border: 0;
    cursor: none;
    z-index: 100;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    filter: drop-shadow(0 12px 22px rgba(15, 10, 6, 0.6));
}

body.touch .concierge-bell {
    cursor: pointer;
}

.bell-swing {
    transform-origin: 42px 28px;
    transition: transform 240ms var(--ease-spring);
}

.concierge-bell.struck .bell-swing {
    animation: bellSwing 0.9s cubic-bezier(0.25, 0.6, 0.4, 1.0);
}

@keyframes bellSwing {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-12deg); }
    45% { transform: rotate(9deg); }
    70% { transform: rotate(-5deg); }
    88% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

.concierge-bell.struck .bell-clapper {
    animation: clapperSwing 0.9s ease-in-out;
}

@keyframes clapperSwing {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    55% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.concierge-bell.struck .bell-ripple {
    animation: bellRipple 0.9s ease-out;
}

@keyframes bellRipple {
    0% { r: 30; opacity: 0.85; stroke-width: 2.4; }
    100% { r: 56; opacity: 0; stroke-width: 0.6; }
}

.bell-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--brass-pale);
    text-transform: uppercase;
}

.concierge-bell:hover .bell-swing {
    transform: rotate(-3deg);
}

/* ============================================================
   CONCIERGE PANEL
   ============================================================ */
.concierge-panel {
    position: fixed;
    right: 24px;
    bottom: 160px;
    width: min(380px, calc(100vw - 48px));
    background: rgba(58, 31, 20, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(232, 200, 146, 0.4);
    border-radius: 4px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.7);
    z-index: 99;
    transform: translate(40px, 24px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 360ms var(--ease-spring), opacity 320ms var(--ease-mech);
}

.concierge-panel.open {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.panel-inner {
    position: relative;
    padding: 24px 26px 22px;
    color: var(--vellum);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(232, 200, 146, 0.32);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.panel-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    color: var(--brass-pale);
    text-transform: uppercase;
}

.panel-close {
    background: transparent;
    border: 1px solid rgba(232, 200, 146, 0.4);
    color: var(--vellum);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms, border-color 200ms;
}

body.touch .panel-close {
    cursor: pointer;
}

.panel-close:hover {
    background: var(--editor-red);
    border-color: var(--editor-red);
}

.panel-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 96, "wght" 700;
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--vellum);
    margin-bottom: 18px;
}

.panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panel-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(232, 200, 146, 0.18);
    border-radius: 3px;
    cursor: none;
    transition: background 200ms, border-color 200ms, transform 200ms;
    font-family: 'Yeseva One', serif;
    font-size: 1rem;
    color: var(--vellum);
}

body.touch .panel-list li {
    cursor: pointer;
}

.panel-list li:hover {
    background: rgba(232, 200, 146, 0.12);
    border-color: var(--brass);
    transform: translateX(4px);
}

.panel-kbd {
    margin-left: auto;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--brass-pale);
    background: rgba(15, 10, 6, 0.4);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.08em;
}

.panel-toggles {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toggle-btn {
    background: transparent;
    border: 1px dashed rgba(232, 200, 146, 0.32);
    color: var(--vellum-warm);
    padding: 8px 12px;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: none;
    border-radius: 2px;
    text-align: left;
    transition: background 200ms, color 200ms;
}

body.touch .toggle-btn {
    cursor: pointer;
}

.toggle-btn:hover {
    background: rgba(232, 200, 146, 0.08);
    color: var(--brass-light);
}

.toggle-btn span[data-state] {
    color: var(--seafoam);
}

.panel-foot {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed rgba(232, 200, 146, 0.2);
    font-family: 'Caveat', cursive;
    font-size: 1.05rem;
    color: var(--brass-pale);
    text-align: center;
    line-height: 1.4;
}

/* ============================================================
   DOSSIER (full-bleed)
   ============================================================ */
.dossier {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    pointer-events: none;
    visibility: hidden;
    perspective: 1800px;
}

.dossier.open {
    visibility: visible;
    pointer-events: auto;
}

.dossier-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    transform: rotateY(0deg);
    transition: transform 720ms var(--ease-spring);
    z-index: 2;
    overflow: hidden;
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.7);
}

.dossier.open .dossier-cover {
    transform: rotateY(-180deg);
}

.dossier-monogram {
    position: absolute;
    bottom: 64px;
    right: 64px;
    z-index: 4;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 900;
    font-size: 9rem;
    line-height: 1;
    background: linear-gradient(180deg, rgba(232, 200, 146, 0.28) 0%, rgba(58, 31, 20, 0.0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(232, 200, 146, 0.35), 0 -1px 0 rgba(15, 10, 6, 0.55);
    letter-spacing: -0.05em;
}

.dossier-page {
    position: absolute;
    inset: 0;
    background: var(--vellum);
    color: var(--cordovan);
    z-index: 1;
    overflow-y: auto;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 540ms var(--ease-mech) 220ms, opacity 540ms var(--ease-mech) 220ms;
}

.dossier.open .dossier-page {
    transform: translateY(0);
    opacity: 1;
}

.dossier-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(73deg, rgba(58, 31, 20, 0.05) 0 1px, transparent 1px 84px),
        repeating-linear-gradient(163deg, rgba(58, 31, 20, 0.04) 0 1px, transparent 1px 124px);
    pointer-events: none;
    z-index: 0;
}

.dossier-head {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, var(--vellum) 0%, rgba(242, 232, 213, 0.92) 100%);
    border-bottom: 1px solid rgba(58, 31, 20, 0.18);
    padding: 18px clamp(24px, 4vw, 64px);
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dossier-coords {
    font-family: 'DM Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    color: var(--cordovan);
}

.dossier-locator {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--cordovan);
}

.dossier-locator svg {
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(15, 10, 6, 0.3);
}

.dossier-close {
    background: var(--cordovan);
    color: var(--vellum);
    border: 0;
    padding: 8px 14px;
    border-radius: 2px;
    font-family: 'DM Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: none;
    transition: background 200ms;
}

body.touch .dossier-close {
    cursor: pointer;
}

.dossier-close:hover {
    background: var(--editor-red);
}

.dossier-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    padding: 48px clamp(24px, 4vw, 64px) 96px;
    position: relative;
    z-index: 1;
}

@media (max-width: 800px) {
    .dossier-body { grid-template-columns: 1fr; }
}

.dossier-rail {
    border-left: 4px solid;
    border-image: linear-gradient(180deg, var(--brass-light), var(--brass), var(--brass-deep)) 1;
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 96px;
    align-self: start;
}

.rail-stop {
    position: relative;
    padding-left: 6px;
}

.rail-stop::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 0 2px var(--vellum), 0 0 0 3px rgba(58, 31, 20, 0.3);
}

.stop-time {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    color: var(--editor-red);
    letter-spacing: 0.12em;
}

.stop-label {
    display: block;
    font-family: 'Yeseva One', serif;
    font-size: 0.95rem;
    color: var(--cordovan);
}

.dossier-article {
    max-width: 720px;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--cordovan);
}

.dossier-kicker {
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    color: var(--editor-red);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dossier-headline {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 700;
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 0.98;
    letter-spacing: -0.018em;
    color: var(--cordovan);
    margin-bottom: 14px;
}

.dossier-byline {
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--cordovan);
    opacity: 0.7;
    margin-bottom: 28px;
}

.dossier-graf {
    margin-bottom: 1.05em;
    color: var(--cordovan);
}

.dropcap {
    float: left;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 900;
    font-size: 5.4em;
    line-height: 0.86;
    color: var(--brass);
    margin: 0.04em 0.08em -0.02em 0;
    text-shadow: 0 1px 0 rgba(58, 31, 20, 0.35);
}

.marginalia-host {
    position: relative;
}

.marginalia {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--editor-red);
    transform: rotate(-1.3deg);
    margin-left: 8px;
    padding: 0 8px;
    border-left: 2px solid var(--editor-red);
}

/* ============================================================
   SCRIM
   ============================================================ */
.scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 6, 0.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease-mech);
}

.scrim.active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .leather-buff { display: none; }
}