/* ============================================================
   jeongchi.boo — The Haunted Senate Floor
   Strict analogous palette. Spring physics elsewhere (JS).
   Palette: rose-quartz #EFC9C2, coral #E0A9A0, apricot #C68A77,
            rosewood #A56A4F, cinnabar #7C3F2A, velvet #3E1F18,
            champagne #F4D9A6, mist #F8E9E4, ink #1F1A1B
   ============================================================ */

:root {
    --boudoir-mist: #F8E9E4;
    --rose-quartz: #EFC9C2;
    --coral-powder: #E0A9A0;
    --apricot-velvet: #C68A77;
    --rosewood-lacquer: #A56A4F;
    --burnt-cinnabar: #7C3F2A;
    --velvet-box: #3E1F18;
    --champagne-foil: #F4D9A6;
    --ink-recess: #1F1A1B;

    --display-font: 'Playfair Display', 'Cormorant Garamond', serif;
    --body-font: 'Cormorant Garamond', 'Playfair Display', serif;
    --caps-font: 'Cormorant SC', 'Cormorant Garamond', serif;

    --measure: 1140px;
    --gutter: 96px;
    --rail-width: 64px;
}

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

html, body {
    background: var(--boudoir-mist);
    color: var(--burnt-cinnabar);
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    scroll-snap-type: y proximity;
    overflow-y: scroll;
    height: 100vh;
    font-feature-settings: "liga", "dlig", "hist", "onum";
}

/* chamois grain overlay */
.chamois-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    mix-blend-mode: multiply;
    background:
        radial-gradient(circle at 20% 10%, rgba(244, 217, 166, 0.18), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(198, 138, 119, 0.12), transparent 65%);
}

/* ----------------------------------------------------------------
   Persistent Act Numeral Rail (left)
---------------------------------------------------------------- */
.act-rail {
    position: fixed;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rail-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rail-num {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    font-family: var(--caps-font);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    color: var(--apricot-velvet);
    transition: color 240ms, transform 240ms;
    position: relative;
}
.rail-num span { display: inline-block; }
.rail-num::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--apricot-velvet);
    opacity: 0.6;
}
.rail-num.is-active {
    color: var(--rosewood-lacquer);
    transform: translateX(4px);
}
.rail-num.is-active::before {
    width: 18px;
    background: var(--rosewood-lacquer);
    opacity: 1;
}
.rail-num:hover { color: var(--burnt-cinnabar); }

.rail-reg {
    width: 28px;
    height: 28px;
    margin-top: 18px;
    opacity: 0.55;
}

/* ----------------------------------------------------------------
   Display typography
---------------------------------------------------------------- */
.display {
    font-family: var(--display-font);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--burnt-cinnabar);
    font-feature-settings: "liga", "dlig", "hist", "smcp", "onum";
}
.display--xl { font-size: clamp(3.2rem, 11vw, 12rem); }
.display--lg { font-size: clamp(2.4rem, 7vw, 7rem); }
.display--md { font-size: clamp(1.8rem, 4.5vw, 5rem); }
.display em {
    font-style: italic;
    font-weight: 700;
    color: var(--rosewood-lacquer);
}
.display--pearl { color: var(--boudoir-mist); }
.display--pearl em { color: var(--champagne-foil); }

.atto-label {
    display: inline-block;
    font-family: var(--caps-font);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.85rem;
    color: var(--rosewood-lacquer);
    margin-bottom: 1.5rem;
    border-top: 1px solid var(--apricot-velvet);
    padding-top: 0.6rem;
}
.atto-label--pearl {
    color: var(--champagne-foil);
    border-top-color: var(--champagne-foil);
}

.stage-direction {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--rosewood-lacquer);
    margin-top: 1.4rem;
    max-width: 36ch;
}
.stage-direction--pearl { color: var(--rose-quartz); }

/* ----------------------------------------------------------------
   Act layout — editorial flow
---------------------------------------------------------------- */
.libretto { position: relative; z-index: 2; }

.act {
    position: relative;
    min-height: 100vh;
    padding: 8vh 6vw 8vh calc(var(--rail-width) + 4vw);
    scroll-snap-align: start;
    overflow: hidden;
}

.act-inner {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto;
    min-height: 84vh;
    display: grid;
}

/* Persistent atto numeral (huge marquee on the left) */
.atto-numeral {
    position: absolute;
    left: -2vw;
    top: 18vh;
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(20rem, 38vh, 44rem);
    line-height: 0.8;
    color: var(--rose-quartz);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.03em;
    z-index: 0;
    font-feature-settings: "smcp", "hist";
}
.atto-numeral--velvet {
    color: var(--velvet-box);
    opacity: 0.6;
}

/* ----------------------------------------------------------------
   Drop caps
---------------------------------------------------------------- */
.dropcap {
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 900;
    color: var(--champagne-foil);
    -webkit-text-stroke: 1px var(--rosewood-lacquer);
    text-shadow:
        2px 2px 0 var(--apricot-velvet),
        4px 6px 0 rgba(124, 63, 42, 0.18);
    line-height: 0.85;
    margin-right: 0.04em;
}
.dropcap--J {
    font-size: clamp(8rem, 22vw, 16rem);
    float: left;
    margin-right: 0.06em;
    margin-bottom: -0.08em;
    position: relative;
}
.dropcap--J::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1.1em;
    height: 1.1em;
    transform: translate(-50%, 30%);
    background: radial-gradient(circle at 35% 30%, var(--champagne-foil), var(--rose-quartz) 50%, var(--coral-powder));
    border-radius: 50%;
    opacity: 0.55;
    z-index: -1;
    filter: blur(0.5px);
}
.dropcap--inline {
    font-size: 4.2rem;
    float: left;
    line-height: 0.85;
    margin: 0.02em 0.08em -0.05em 0;
}

.display-rest { display: inline; }

/* ----------------------------------------------------------------
   ACT I — The Empty Chamber
---------------------------------------------------------------- */
.act-1 {
    background:
        radial-gradient(ellipse at 80% 30%, rgba(244, 217, 166, 0.35), transparent 55%),
        radial-gradient(ellipse at 10% 80%, rgba(239, 201, 194, 0.4), transparent 55%),
        var(--boudoir-mist);
}
.act-1 .act-inner {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 4vw;
    align-items: center;
}
.act-1 .act-head {
    grid-column: 1; grid-row: 1;
    align-self: center;
    padding-right: 2vw;
}
.act-1 .inflated--podium {
    grid-column: 2; grid-row: 1 / span 2;
    width: 100%;
    max-width: 36vw;
    justify-self: end;
    align-self: end;
    z-index: 3;
}
.act-1 .margin-note {
    grid-column: 1; grid-row: 2;
    align-self: end;
    max-width: 36ch;
}
.act-1 .abstech-grid {
    position: absolute;
    right: 6vw;
    top: 6vh;
    width: 200px;
    height: 200px;
    opacity: 0.5;
    z-index: 1;
}

.scroll-cue {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--caps-font);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.7rem;
    color: var(--apricot-velvet);
    opacity: 0.85;
}

/* ----------------------------------------------------------------
   Margin notes
---------------------------------------------------------------- */
.margin-note {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--rosewood-lacquer);
    line-height: 1.55;
    border-left: 1px solid var(--apricot-velvet);
    padding-left: 1rem;
    position: relative;
}
.margin-note .footnote-mark {
    font-family: var(--display-font);
    font-style: italic;
    color: var(--apricot-velvet);
    margin-right: 0.4em;
    font-size: 1.4rem;
}

/* ----------------------------------------------------------------
   ACT II — Dramatis Personæ
---------------------------------------------------------------- */
.act-2 {
    background:
        linear-gradient(180deg, var(--boudoir-mist) 0%, var(--rose-quartz) 80%, var(--coral-powder) 100%);
}
.act-inner--triptych {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 1.4vw 1.6vw;
    align-content: start;
    padding-top: 2vh;
}
.act-head--II {
    grid-column: 1 / span 6;
    grid-row: 1;
    margin-bottom: 4vh;
}

.bust {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    position: relative;
}
.bust--statesman { grid-column: 1 / span 4; transform: translateY(0); }
.bust--orator    { grid-column: 5 / span 4; transform: translateY(40px); }
.bust--bureaucrat{ grid-column: 9 / span 4; transform: translateY(20px); }

.inflated--bust {
    width: 100%;
    max-width: 280px;
    margin-bottom: 1.2rem;
}

.bust-name {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: clamp(1.4rem, 1.8vw, 2.2rem);
    line-height: 1;
    color: var(--burnt-cinnabar);
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}
.bust-name em { color: var(--rosewood-lacquer); }

.bust-bio {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--burnt-cinnabar);
    max-width: 32ch;
}
/* longest bio hangs into right margin by 36px */
.bust--bureaucrat .bust-bio {
    margin-right: -36px;
}

/* ----------------------------------------------------------------
   ACT III — The Pull-Quote (sticky proscenium)
---------------------------------------------------------------- */
.act-3 {
    min-height: 200vh;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(244, 217, 166, 0.4), transparent 60%),
        var(--boudoir-mist);
    padding: 0 6vw 0 calc(var(--rail-width) + 4vw);
}
.act-3 .atto-numeral {
    top: 24vh;
}
.act-3-stickywrap {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.act-inner--quote {
    position: relative;
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
}
.act-head--center {
    text-align: center;
}
.act-head--center .atto-label {
    border-top: none;
    padding-top: 0;
}

.quote-mark {
    width: clamp(280px, 40vw, 580px);
    margin: 0 auto;
    z-index: 0;
    position: absolute;
    left: 50%;
    top: 4vh;
    transform: translateX(-50%);
    opacity: 0.8;
}

.pull-quote {
    position: relative;
    z-index: 2;
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 6.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--burnt-cinnabar);
    max-width: 18ch;
    margin: 12vh auto 0;
    text-wrap: balance;
}
.pull-quote em { color: var(--rosewood-lacquer); }
.pull-quote cite {
    display: block;
    font-family: var(--caps-font);
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--apricot-velvet);
    margin-top: 1.6rem;
}

.abstech-strip {
    width: min(320px, 40vw);
    margin: 1rem auto 0;
    opacity: 0.7;
}
.abstech-strip svg { width: 100%; height: 24px; }

/* ----------------------------------------------------------------
   ACT IV — The Footnote Theatre
---------------------------------------------------------------- */
.act-4 {
    background:
        linear-gradient(180deg, var(--boudoir-mist) 0%, var(--rose-quartz) 100%);
}
.act-inner--columns {
    grid-template-columns: 1.6fr 1fr;
    gap: 6vw;
    align-content: start;
    padding-top: 2vh;
}
.act-4 .act-head {
    grid-column: 1 / -1;
    margin-bottom: 5vh;
}
.prose-block {
    grid-column: 1;
    font-family: var(--body-font);
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--burnt-cinnabar);
    max-width: 56ch;
    hyphens: auto;
    text-wrap: pretty;
}
.prose-block p { margin-bottom: 1.2rem; }
.prose-block .lede { font-size: 1.18rem; }
.prose-block em { color: var(--rosewood-lacquer); font-style: italic; }
.prose-block .ftn-mark {
    color: var(--rosewood-lacquer);
    cursor: pointer;
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 700;
    transition: color 220ms;
}
.prose-block .ftn-mark:hover { color: var(--burnt-cinnabar); }

.footnote-rail {
    grid-column: 2;
    position: sticky;
    top: 30vh;
    align-self: start;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--rosewood-lacquer);
    border-left: 1px solid var(--apricot-velvet);
    padding-left: 1.4rem;
    height: fit-content;
}
.ftn {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
    opacity: 0;
    transform: translateY(8px);
}
.ftn-num {
    font-family: var(--display-font);
    font-weight: 700;
    color: var(--apricot-velvet);
    font-style: italic;
    flex-shrink: 0;
}
.ftn p { max-width: 32ch; }
.ftn p em { color: var(--burnt-cinnabar); }

.ftn-reg {
    width: 36px;
    height: 36px;
    margin-top: 0.6rem;
    opacity: 0.55;
}

/* ----------------------------------------------------------------
   ACT V — La Processione
---------------------------------------------------------------- */
.act-5 {
    background:
        linear-gradient(180deg, var(--rose-quartz) 0%, var(--boudoir-mist) 50%, var(--coral-powder) 100%);
    overflow: hidden;
}
.act-inner--procession {
    grid-template-rows: auto 1fr auto;
    gap: 3vh;
}
.act-5 .act-head { grid-row: 1; }

.procession {
    grid-row: 2;
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 360px;
    display: flex;
    align-items: center;
    overflow: visible;
}
.proc-figure {
    position: absolute;
    top: 50%;
    will-change: transform;
}
.proc-figure svg { width: 100%; height: 100%; display: block; }

.proc-figure--orb     { left: 4%;  width: 14vw; min-width: 130px; max-width: 220px; aspect-ratio: 1 / 1;     transform: translate(0, -50%); }
.proc-figure--obelisk { left: 24%; width: 11vw; min-width: 110px; max-width: 180px; aspect-ratio: 180 / 320; transform: translate(0, -42%); }
.proc-figure--swag    { left: 42%; width: 22vw; min-width: 220px; max-width: 360px; aspect-ratio: 320 / 200; transform: translate(0, -38%); }
.proc-figure--ribbon  { left: 64%; width: 14vw; min-width: 140px; max-width: 240px; aspect-ratio: 1 / 1;     transform: translate(0, -54%); }
.proc-figure--scroll  { left: 80%; width: 18vw; min-width: 200px; max-width: 320px; aspect-ratio: 280 / 200; transform: translate(0, -46%); }

.caption-italic {
    grid-row: 3;
    font-family: var(--body-font);
    font-style: italic;
    color: var(--rosewood-lacquer);
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
}
.caption-italic em { letter-spacing: 0.04em; }

/* ----------------------------------------------------------------
   ACT VI — The Long Aria
---------------------------------------------------------------- */
.act-6 {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(244, 217, 166, 0.3), transparent 65%),
        var(--boudoir-mist);
}
.act-inner--aria {
    grid-template-columns: 1fr;
    place-items: center;
}
.act-6 .act-head {
    text-align: center;
    margin-bottom: 6vh;
}
.aria-column {
    width: min(520px, 88vw);
    font-family: var(--body-font);
    font-size: 1.18rem;
    line-height: 1.75;
    color: var(--burnt-cinnabar);
    hyphens: auto;
    text-wrap: pretty;
}
.aria-para {
    margin-bottom: 1.4rem;
}
.aria-para em { color: var(--rosewood-lacquer); font-style: italic; }
.aria-para--coda {
    font-style: italic;
    color: var(--rosewood-lacquer);
}

.ornament-divider {
    margin: 2.4rem auto;
    width: 200px;
}
.ornament-divider svg { width: 100%; height: 30px; display: block; }

.inline-emblem {
    margin: 2rem auto;
    width: 180px;
}
.inline-emblem svg { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------------
   ACT VII — Curtain
---------------------------------------------------------------- */
.act-7 {
    position: relative;
    color: var(--boudoir-mist);
    min-height: 110vh;
    overflow: hidden;
}
.act-7 .velvet-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(165, 106, 79, 0.4), transparent 55%),
        linear-gradient(180deg, var(--velvet-box) 0%, var(--ink-recess) 100%);
    z-index: 0;
}
.act-7 .velvet-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.45;
    background:
        repeating-linear-gradient(0deg, rgba(31, 26, 27, 0.4) 0px, rgba(31, 26, 27, 0.4) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(62, 31, 24, 0.25) 0px, rgba(62, 31, 24, 0.25) 1px, transparent 1px, transparent 6px);
}
.act-inner--curtain {
    position: relative;
    z-index: 2;
    grid-template-rows: auto auto auto auto;
    place-items: center;
    text-align: center;
    gap: 4vh;
    padding-top: 6vh;
}
.act-7 .atto-numeral { color: var(--velvet-box); opacity: 0.55; left: -1vw; }

.inflated--bell {
    width: clamp(220px, 22vw, 360px);
    margin: 4vh auto 2vh;
}

.envelope {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--champagne-foil);
    text-decoration: none;
    cursor: pointer;
    padding: 1rem 1.4rem;
    border: 1px solid var(--apricot-velvet);
    border-radius: 2px;
    background: rgba(165, 106, 79, 0.08);
    transition: transform 240ms, background 240ms;
    font-family: var(--caps-font);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.8rem;
}
.envelope:hover {
    background: rgba(244, 217, 166, 0.12);
    transform: translateY(-2px);
}
.envelope svg { display: block; }
.envelope-caption {
    font-family: var(--body-font);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    color: var(--rose-quartz);
}

.curtain-footer {
    margin-top: 4vh;
    font-family: var(--caps-font);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.72rem;
    color: var(--rose-quartz);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8em;
    padding-bottom: 4vh;
}
.curtain-footer .footer-line {
    text-transform: none;
    letter-spacing: 0.02em;
    font-family: var(--body-font);
    font-style: italic;
    color: var(--rose-quartz);
}
.curtain-footer .footer-sep {
    color: var(--apricot-velvet);
}

/* ----------------------------------------------------------------
   Inflated breathing — JS will set CSS vars on these
---------------------------------------------------------------- */
.inflated {
    position: relative;
    display: block;
    transform-origin: center 70%;
    will-change: transform;
}
.inflated svg { width: 100%; height: auto; display: block; }
.inflated-body { transform-origin: center 60%; will-change: transform; }

/* ----------------------------------------------------------------
   Responsive
---------------------------------------------------------------- */
@media (max-width: 980px) {
    :root {
        --rail-width: 44px;
        --gutter: 32px;
    }
    .act { padding: 6vh 5vw 6vh calc(var(--rail-width) + 3vw); }
    .act-1 .act-inner { grid-template-columns: 1fr; }
    .act-1 .inflated--podium { max-width: 60vw; justify-self: center; grid-column: 1; grid-row: 2; }
    .act-1 .margin-note { grid-row: 3; }
    .act-inner--triptych { grid-template-columns: 1fr; gap: 6vh; }
    .bust--statesman, .bust--orator, .bust--bureaucrat {
        grid-column: 1 / -1;
        grid-row: auto;
        transform: none;
    }
    .bust--bureaucrat .bust-bio { margin-right: 0; }
    .act-head--II { grid-column: 1 / -1; }
    .act-inner--columns { grid-template-columns: 1fr; gap: 4vh; }
    .footnote-rail { position: static; grid-column: 1; }
    .procession { height: 60vh; min-height: 420px; }
    .atto-numeral { font-size: clamp(12rem, 28vh, 24rem); }
    .pull-quote { font-size: clamp(1.6rem, 7vw, 4rem); }
    .quote-mark { width: 56vw; }
}

@media (max-width: 620px) {
    .act-rail { left: 8px; gap: 6px; }
    .rail-num { font-size: 0.7rem; padding: 4px 6px; }
    .display--xl { font-size: clamp(2.6rem, 12vw, 6rem); }
    .dropcap--J { font-size: clamp(5rem, 22vw, 9rem); }
    .procession { height: 70vh; min-height: 460px; }
    .proc-figure--orb { left: -2%; }
    .proc-figure--scroll { left: 70%; }
}