/* ==========================================================================
   lurch.dev — a tilted vaudeville house in slow collapse
   ========================================================================== */

/* --- Palette ----------------------------------------------------------- */
:root {
    --proscenium-burgundy: #3A0E16;
    --brick-burgundy: #5A1822;
    --stage-pit-black: #1F0509;
    --gaslamp-cream: #FBE7C6;
    --footlight-amber: #F4B860;
    --rosin-coral: #D45D3C;
    --walnut-stage-floor: #7A4B3F;
    --brass-trim: #C9A66B;

    --pendulum-ease: cubic-bezier(0.4, 0.0, 0.6, 1.0);
}

/* --- Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--stage-pit-black);
    color: var(--gaslamp-cream);
    font-family: 'Gelasio', 'Georgia', serif;
    font-size: 17px;
    line-height: 1.7;
    min-height: 100vh;
    position: relative;
}

/* --- Texture overlays (paper grain + sawdust) -------------------------- */
.grain-overlay,
.sawdust-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

.grain-overlay {
    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.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.98  0 0 0 0 0.91  0 0 0 0 0.78  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.28;
}

.sawdust-overlay {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='%237A4B3F' opacity='0.45'><circle cx='34' cy='78' r='1.4'/><circle cx='112' cy='30' r='1'/><circle cx='198' cy='160' r='1.6'/><circle cx='260' cy='90' r='1.2'/><circle cx='340' cy='220' r='1'/><circle cx='80' cy='280' r='1.3'/><circle cx='150' cy='340' r='1'/><circle cx='220' cy='250' r='1.1'/><circle cx='300' cy='330' r='1.5'/><circle cx='370' cy='60' r='1'/><circle cx='40' cy='200' r='1.2'/><circle cx='180' cy='100' r='1'/><circle cx='250' cy='200' r='1.4'/></g></svg>");
    mix-blend-mode: multiply;
    opacity: 0.22;
}

/* --- House (main container) -------------------------------------------- */
.house {
    width: 100%;
    background: var(--stage-pit-black);
    position: relative;
}

/* --- Stage flats (diagonal sections) ----------------------------------- */
.flat {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 120px 6vw 140px;
    background: var(--proscenium-burgundy);
    margin-bottom: 96px;
    border-top: 14px solid var(--proscenium-burgundy);
    border-bottom: 14px solid var(--proscenium-burgundy);
    box-shadow:
        inset 0 0 0 4px var(--brick-burgundy),
        inset 0 0 0 8px var(--proscenium-burgundy),
        inset 0 0 0 10px var(--brass-trim),
        0 0 0 1px var(--stage-pit-black),
        0 30px 60px rgba(31, 5, 9, 0.7);
    overflow: hidden;
    transform-origin: 50% 50%;
    transition: transform 600ms var(--pendulum-ease);
}

.flat::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(244, 184, 96, 0.08), transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(244, 184, 96, 0.10), transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.flat-1 { transform: rotate(-3.2deg); background: var(--proscenium-burgundy); margin-top: 60px; }
.flat-2 { transform: rotate(4.1deg);  background: var(--brick-burgundy); }
.flat-3 { transform: rotate(-2.7deg); background: var(--proscenium-burgundy); }
.flat-4 { transform: rotate(1.9deg);  background: var(--brick-burgundy); }
.flat-5 { transform: rotate(-4.0deg); background: var(--proscenium-burgundy); }
.flat-6 { transform: rotate(3.0deg);  background: var(--brick-burgundy); }
.flat-7 { transform: rotate(-3.6deg); background: var(--proscenium-burgundy); margin-bottom: 0; padding-bottom: 200px; }

/* --- Content plane (counter-tilt) -------------------------------------- */
.content-plane {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

.flat-1 .content-plane { transform: rotate(1.0deg); }
.flat-2 .content-plane { transform: rotate(-1.4deg); }
.flat-3 .content-plane { transform: rotate(0.8deg); }
.flat-4 .content-plane { transform: rotate(-0.6deg); }
.flat-5 .content-plane { transform: rotate(1.4deg); }
.flat-6 .content-plane { transform: rotate(-1.0deg); }
.flat-7 .content-plane { transform: rotate(1.2deg); }

/* --- Velvet rope swag at top of each flat ------------------------------ */
.velvet-rope {
    position: absolute;
    top: 0;
    left: -2%;
    width: 104%;
    height: 80px;
    z-index: 3;
    pointer-events: none;
    transform-origin: 50% 0%;
    animation: ropeSwag 8.3s var(--pendulum-ease) infinite alternate;
}

.rope-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(31, 5, 9, 0.6));
}

@keyframes ropeSwag {
    0%   { transform: rotate(-1.2deg); }
    100% { transform: rotate(1.2deg); }
}

.velvet-rope-final {
    height: 120px;
    transition: transform 2400ms ease-out, opacity 2400ms ease-out;
}

.velvet-rope-final.descended {
    transform: translateY(60px);
}

/* --- Footlight row (brass bulbs along bottom of section) --------------- */
.footlight-row {
    position: absolute;
    bottom: 24px;
    left: 4%;
    right: 4%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 4;
    pointer-events: none;
}

.footlight-bulb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFE9B4, var(--footlight-amber) 60%, #8a5418 100%);
    box-shadow:
        0 0 24px 10px rgba(244, 184, 96, 0.55),
        0 0 8px 2px rgba(244, 184, 96, 0.9),
        inset 0 -4px 6px rgba(31, 5, 9, 0.4);
    position: relative;
    opacity: 0.9;
    animation-name: bulbFlicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: var(--pendulum-ease);
}

.footlight-bulb::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: var(--brass-trim);
    border-radius: 2px 2px 0 0;
}

.footlight-bulb::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 6px;
    background: var(--brass-trim);
    border-radius: 0 0 4px 4px;
}

@keyframes bulbFlicker {
    0%   { opacity: 0.95; filter: brightness(1.15); }
    25%  { opacity: 0.78; filter: brightness(0.92); }
    50%  { opacity: 1.0;  filter: brightness(1.2); }
    75%  { opacity: 0.85; filter: brightness(1.0); }
    100% { opacity: 0.92; filter: brightness(1.08); }
}

.footlight-final {
    transition: opacity 2400ms ease-out;
}

/* --- Marquee chasing-bulb band (Act I only) ---------------------------- */
.marquee-band {
    width: 100%;
    height: 44px;
    background: var(--stage-pit-black);
    border: 2px solid var(--brass-trim);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin: 0 0 36px 0;
    box-shadow: 0 0 18px rgba(244, 184, 96, 0.18), inset 0 0 12px rgba(31, 5, 9, 0.6);
    position: relative;
    overflow: hidden;
}

.marquee-bulb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gaslamp-cream);
    box-shadow: 0 0 8px 2px rgba(251, 231, 198, 0.7);
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity 80ms linear, box-shadow 80ms linear;
}

.marquee-bulb.lit {
    opacity: 1;
    box-shadow: 0 0 14px 4px rgba(251, 231, 198, 0.95), 0 0 22px 8px rgba(244, 184, 96, 0.55);
    background: #FFF5DA;
}

/* --- Wordmark (Act I) -------------------------------------------------- */
.wordmark {
    font-family: 'Limelight', 'Georgia', serif;
    font-weight: 400;
    font-size: clamp(72px, 13vw, 168px);
    line-height: 1.0;
    letter-spacing: 0.04em;
    color: var(--gaslamp-cream);
    margin: 12px 0 32px 0;
    text-align: center;
    user-select: none;
}

.wordmark .glyph {
    display: inline-block;
    transform-origin: 50% 0%;
    text-shadow:
        0 2px 0 var(--gaslamp-cream),
        0 6px 14px rgba(58, 14, 22, 0.55);
    animation-name: glyphSway;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: var(--pendulum-ease);
}

@keyframes glyphSway {
    0%   { transform: rotate(-2.4deg); }
    100% { transform: rotate(2.4deg); }
}

/* glyph-level pendulum periods (coprime) */
.wordmark .glyph:nth-child(1) { animation-duration: 2.4s; }
.wordmark .glyph:nth-child(2) { animation-duration: 3.1s; }
.wordmark .glyph:nth-child(3) { animation-duration: 3.8s; }
.wordmark .glyph:nth-child(4) { animation-duration: 4.6s; }
.wordmark .glyph:nth-child(5) { animation-duration: 5.5s; }
.wordmark .glyph:nth-child(6) { animation-duration: 6.7s; }
.wordmark .glyph:nth-child(7) { animation-duration: 8.3s; }
.wordmark .glyph:nth-child(8) { animation-duration: 11.0s; }
.wordmark .glyph:nth-child(9) { animation-duration: 4.6s; }

/* --- Act bill (act number + title pair) -------------------------------- */
.act-bill {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 8px 0 40px 0;
}

.placard {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-size: 22px;
    letter-spacing: 0.12em;
    color: var(--brass-trim);
    text-transform: uppercase;
    border: 1px solid var(--brass-trim);
    padding: 4px 12px;
    background: rgba(31, 5, 9, 0.4);
}

.placard-title {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-size: 28px;
    color: var(--gaslamp-cream);
    letter-spacing: 0.12em;
}

/* --- Lede (italic Gelasio paragraph in Act I) -------------------------- */
.lede {
    font-family: 'Gelasio', 'Georgia', serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.7;
    color: var(--gaslamp-cream);
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
    mix-blend-mode: normal;
    background: rgba(58, 14, 22, 0.0);
    padding: 16px 24px;
}

/* --- Act header (number + title) for Acts II–VII ----------------------- */
.act-header {
    margin-bottom: 48px;
    text-align: left;
    border-left: 4px solid var(--brass-trim);
    padding-left: 24px;
}

.act-number {
    display: block;
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-size: 18px;
    letter-spacing: 0.18em;
    color: var(--brass-trim);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.act-title {
    font-family: 'Limelight', 'Georgia', serif;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.1;
    color: var(--gaslamp-cream);
    letter-spacing: 0.04em;
    text-shadow: 0 2px 0 rgba(251, 231, 198, 0.18), 0 6px 14px rgba(58, 14, 22, 0.55);
    transform-origin: 50% 0%;
}

.swing-anchor {
    animation-name: titleSwing;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: var(--pendulum-ease);
    animation-duration: 4.6s;
    display: inline-block;
}

@keyframes titleSwing {
    0%   { transform: rotate(-1.4deg); }
    100% { transform: rotate(1.4deg); }
}

/* --- Billing cards (Act II) -------------------------------------------- */
.billing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 36px;
    margin: 40px 0 80px 0;
}

.billing-card {
    background: var(--gaslamp-cream);
    color: var(--proscenium-burgundy);
    padding: 32px 28px;
    box-shadow:
        0 12px 24px rgba(31, 5, 9, 0.6),
        inset 0 0 0 1px rgba(58, 14, 22, 0.2);
    position: relative;
    /* peeled corner */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 22px) 100%, 0 100%);
    transform-origin: 50% 0%;
    animation-name: cardSway;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: var(--pendulum-ease);
}

.billing-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(58, 14, 22, 0.3);
    pointer-events: none;
}

.billing-card::after {
    /* brass tack */
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 35% 35%, #E8C98F, var(--brass-trim) 60%, #5d4118 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(31, 5, 9, 0.5);
}

.card-tilt-a { transform: rotate(-2.2deg); animation-duration: 5.5s; }
.card-tilt-b { transform: rotate(1.6deg);  animation-duration: 6.7s; }
.card-tilt-c { transform: rotate(-1.1deg); animation-duration: 8.3s; }

@keyframes cardSway {
    0%   { transform: rotate(var(--card-low, -2.2deg)); }
    100% { transform: rotate(var(--card-high, 0.5deg)); }
}

.card-tilt-a { --card-low: -2.6deg; --card-high: -1.4deg; }
.card-tilt-b { --card-low: 0.8deg;  --card-high: 2.4deg; }
.card-tilt-c { --card-low: -1.6deg; --card-high: -0.4deg; }

.card-title {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-size: 22px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-top: 8px;
    color: var(--proscenium-burgundy);
    border-bottom: 1px solid rgba(58, 14, 22, 0.4);
    padding-bottom: 10px;
}

.card-body {
    font-family: 'Gelasio', 'Georgia', serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--proscenium-burgundy);
    mix-blend-mode: multiply;
}

/* --- Rigging-loft sandbag (Act II) ------------------------------------- */
.rigging-loft {
    position: absolute;
    top: 60px;
    right: 8%;
    width: 80px;
    height: 240px;
    z-index: 1;
    transform-origin: 50% 0%;
    animation: sandbagSwing 4.6s var(--pendulum-ease) infinite alternate;
}

.sandbag-pendulum {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes sandbagSwing {
    0%   { transform: rotate(-3.8deg); }
    100% { transform: rotate(3.8deg); }
}

/* --- Tightrope stage (Act III) ----------------------------------------- */
.tightrope-stage {
    position: relative;
    min-height: 480px;
    margin: 60px 0;
}

.tightrope-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.tightrope-walker {
    position: absolute;
    left: 48%;
    top: 30%;
    width: 80px;
    height: 100px;
    z-index: 3;
    transform-origin: 50% 100%;
    animation: walkerStep 11s var(--pendulum-ease) infinite alternate;
}

.tightrope-walker svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(31, 5, 9, 0.7));
}

.balance-pole {
    transform-origin: 40px 40px;
    animation: poleSwing 6.7s var(--pendulum-ease) infinite alternate;
}

@keyframes poleSwing {
    0%   { transform: rotate(-1.2deg); }
    100% { transform: rotate(1.2deg); }
}

@keyframes walkerStep {
    0%   { transform: translateX(-12px) rotate(-1deg); }
    100% { transform: translateX(12px) rotate(1deg); }
}

.story-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 200px;
    position: relative;
    z-index: 2;
}

.story-col p {
    font-family: 'Gelasio', 'Georgia', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 18px;
    color: var(--gaslamp-cream);
}

.story-col-left { padding-top: 0; }
.story-col-right { padding-top: 60px; }

/* --- Trap-door (Act III + Act V) --------------------------------------- */
.trapdoor {
    position: absolute;
    width: 120px;
    height: 80px;
    cursor: pointer;
    z-index: 5;
}

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

.trapdoor-left {
    left: 4%;
    bottom: 40px;
}

.trapdoor-corner {
    right: 5%;
    bottom: 60px;
}

.whisper {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.4deg);
    font-family: 'Gelasio', 'Georgia', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--gaslamp-cream);
    background: var(--proscenium-burgundy);
    padding: 8px 14px;
    border: 1px solid var(--brass-trim);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease, transform 400ms ease;
    box-shadow: 0 6px 12px rgba(31, 5, 9, 0.6);
}

.trapdoor:hover .whisper,
.trapdoor.is-revealed .whisper {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px) rotate(-1.4deg);
}

/* --- Lantern slides (Act IV) ------------------------------------------- */
.lantern-rail {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    gap: 56px;
    padding: 40px 0 60px 0;
    margin: 0 -6vw;
    padding-left: 6vw;
    padding-right: 6vw;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--brass-trim) var(--proscenium-burgundy);
}

.lantern-rail::-webkit-scrollbar {
    height: 8px;
}
.lantern-rail::-webkit-scrollbar-thumb {
    background: var(--brass-trim);
    border-radius: 4px;
}
.lantern-rail::-webkit-scrollbar-track {
    background: var(--proscenium-burgundy);
}

.lantern-slide {
    flex: 0 0 280px;
    scroll-snap-align: start;
    text-align: center;
    transform-origin: 50% 0%;
    animation-name: slideSway;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: var(--pendulum-ease);
    padding-top: 10px;
}

.lantern-slide[data-period="2.4"]  { animation-duration: 2.4s; }
.lantern-slide[data-period="3.1"]  { animation-duration: 3.1s; }
.lantern-slide[data-period="3.8"]  { animation-duration: 3.8s; }
.lantern-slide[data-period="4.6"]  { animation-duration: 4.6s; }
.lantern-slide[data-period="5.5"]  { animation-duration: 5.5s; }
.lantern-slide[data-period="6.7"]  { animation-duration: 6.7s; }
.lantern-slide[data-period="8.3"]  { animation-duration: 8.3s; }
.lantern-slide[data-period="11.0"] { animation-duration: 11.0s; }

@keyframes slideSway {
    0%   { transform: rotate(-1.6deg); }
    100% { transform: rotate(1.6deg); }
}

.slide-frame {
    width: 220px;
    height: 160px;
    display: block;
    margin: 0 auto 18px;
    filter: drop-shadow(0 8px 16px rgba(31, 5, 9, 0.7));
}

.slide-title {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-size: 19px;
    letter-spacing: 0.12em;
    color: var(--gaslamp-cream);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.slide-caption {
    font-family: 'Gelasio', 'Georgia', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gaslamp-cream);
    opacity: 0.85;
    line-height: 1.5;
    padding: 0 8px;
}

/* --- Act V — value headline ------------------------------------------- */
.value-headline {
    font-family: 'Limelight', 'Georgia', serif;
    font-size: clamp(48px, 9vw, 144px);
    line-height: 1.05;
    letter-spacing: 0.03em;
    color: var(--gaslamp-cream);
    text-align: center;
    margin: 60px auto 48px;
    max-width: 1100px;
    text-shadow: 0 2px 0 rgba(251, 231, 198, 0.25), 0 8px 18px rgba(58, 14, 22, 0.65);
    transform-origin: 50% 0%;
}

.swing-strong {
    animation: strongSwing 5.5s var(--pendulum-ease) infinite alternate;
}

@keyframes strongSwing {
    0%   { transform: rotate(-4.5deg); }
    100% { transform: rotate(4.5deg); }
}

.value-body {
    font-family: 'Gelasio', 'Georgia', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.7;
    color: var(--gaslamp-cream);
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

/* --- Act VI — letters -------------------------------------------------- */
.encore-intro {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-size: 20px;
    letter-spacing: 0.12em;
    color: var(--brass-trim);
    text-align: center;
    margin: 30px 0 50px;
    text-transform: uppercase;
}

.letters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 36px;
    margin-bottom: 80px;
}

.letter {
    background: var(--gaslamp-cream);
    color: var(--proscenium-burgundy);
    padding: 32px 28px;
    position: relative;
    box-shadow: 0 14px 28px rgba(31, 5, 9, 0.65), inset 0 0 0 1px rgba(58, 14, 22, 0.2);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 400ms ease, transform 400ms ease;
    transform-origin: 50% 0%;
}

.letter::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 35% 35%, #E8C98F, var(--brass-trim) 60%, #5d4118 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(31, 5, 9, 0.5);
}

.letter-a { transform: rotate(-1.6deg); }
.letter-b { transform: rotate(1.2deg); }
.letter-c { transform: rotate(-0.8deg); }

.letter:hover {
    /* peel corner up 4px */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 18px) 100%, 0 100%);
    transform: translateY(-4px) rotate(0deg);
}

.letter-body {
    font-family: 'Gelasio', 'Georgia', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--proscenium-burgundy);
    margin-top: 16px;
    margin-bottom: 22px;
    mix-blend-mode: multiply;
}

.letter-sig {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--brick-burgundy);
    text-align: right;
    border-top: 1px dashed rgba(58, 14, 22, 0.4);
    padding-top: 10px;
}

/* --- Act VII — closing ------------------------------------------------- */
.closing-wordmark {
    font-family: 'Limelight', 'Georgia', serif;
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--gaslamp-cream);
    text-align: center;
    margin: 60px auto 40px;
    text-shadow: 0 2px 0 rgba(251, 231, 198, 0.2), 0 6px 14px rgba(58, 14, 22, 0.55);
}

.closing-contact {
    text-align: center;
    margin: 30px auto 80px;
    font-family: 'IM Fell English SC', 'Georgia', serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-label {
    color: var(--brass-trim);
    margin-right: 12px;
    font-size: 16px;
}

.contact-line {
    color: var(--gaslamp-cream);
    font-size: 18px;
    border-bottom: 1px solid var(--rosin-coral);
    padding-bottom: 2px;
}

/* --- Theater-rigging gap (sandbag drop between sections) --------------- */
.rigging-gap {
    position: absolute;
    bottom: -120px;
    right: 6%;
    width: 80px;
    height: 200px;
    z-index: 6;
    transform-origin: 50% 0%;
    animation: sandbagSwing 4.6s var(--pendulum-ease) infinite alternate;
}

.sandbag {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(31, 5, 9, 0.7));
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 760px) {
    .flat {
        padding: 90px 4vw 120px;
    }

    .story-columns {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 240px;
    }

    .story-col-right { padding-top: 0; }

    .billing-cards { gap: 28px; }

    .lantern-rail { gap: 36px; }

    .lantern-slide { flex: 0 0 240px; }

    .slide-frame { width: 200px; height: 140px; }

    .footlight-row {
        bottom: 18px;
        left: 3%;
        right: 3%;
    }

    .footlight-bulb {
        width: 22px;
        height: 22px;
    }

    .marquee-bulb {
        width: 10px;
        height: 10px;
    }

    .rigging-loft, .rigging-gap {
        opacity: 0.6;
        width: 50px;
    }
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wordmark .glyph,
    .swing-anchor,
    .swing-strong,
    .billing-card,
    .letter,
    .lantern-slide,
    .balance-pole,
    .tightrope-walker,
    .rigging-loft,
    .rigging-gap,
    .velvet-rope,
    .footlight-bulb {
        animation: none !important;
    }

    .wordmark .glyph { transform: rotate(-1.0deg); }
    .swing-anchor { transform: rotate(-0.6deg); }
    .swing-strong { transform: rotate(-2.2deg); }
}