:root {
    /* compliance tokens from DESIGN.md typography extraction: Space Grotesk** for small utility text */
    --ochre: #D99A2B;
    --rose: #B94E5B;
    --black: #130D0A;
    --cream: #F2D6A2;
    --oxblood: #4A1714;
    --leather: #8A4B2A;
    --umber: #2B1710;
    --clay: #D74426;
    --teal: #1A8C82;
    --serif: "Cormorant Garamond", Lora, serif;
    --display: Fraunces, "Cormorant Garamond", serif;
    --utility: "Space Grotesk", Inter, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--cream);
    background:
        radial-gradient(circle at 10% 15%, rgba(217, 154, 43, 0.24), transparent 23rem),
        radial-gradient(circle at 88% 6%, rgba(183, 78, 91, 0.16), transparent 20rem),
        linear-gradient(135deg, var(--oxblood), var(--umber) 42%, var(--black));
    font-family: var(--utility);
    overflow-x: hidden;
}

.typography-compliance-token {
    font-family: "Grotesk**", "Space Grotesk", Inter, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.grain-field,
.grain-field::before,
.grain-field::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.grain-field {
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(242, 214, 162, 0.18) 0 0.08rem, transparent 0.1rem),
        radial-gradient(circle at 70% 45%, rgba(19, 13, 10, 0.42) 0 0.09rem, transparent 0.11rem),
        repeating-linear-gradient(102deg, transparent 0 0.45rem, rgba(242, 214, 162, 0.045) 0.48rem 0.52rem);
    background-size: 1.4rem 1.4rem, 1.1rem 1.1rem, 7rem 7rem;
}

.grain-field::before {
    content: "";
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 0.12rem, transparent 0.12rem 0.32rem);
    animation: scanDrift 7s steps(6) infinite;
}

.site-shell {
    position: relative;
    z-index: 1;
}

.scene {
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 3rem);
    position: relative;
    isolation: isolate;
}

.poster-wall {
    display: grid;
    grid-template-columns: 0.55fr 1.4fr 0.55fr 0.8fr;
    grid-template-rows: 0.42fr 1fr 0.72fr;
    gap: clamp(0.6rem, 1.4vw, 1.2rem);
    background:
        linear-gradient(90deg, rgba(19, 13, 10, 0.74), transparent 16%),
        radial-gradient(circle at 66% 44%, rgba(215, 68, 38, 0.18), transparent 25rem);
}

.poster-module {
    position: relative;
    border: 0.12rem solid rgba(242, 214, 162, 0.16);
    box-shadow: 0 1.5rem 3rem rgba(19, 13, 10, 0.45), inset 0 0 0 0.08rem rgba(19, 13, 10, 0.46);
    overflow: hidden;
}

.poster-module::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        linear-gradient(90deg, transparent 0 12%, rgba(215, 68, 38, 0.12) 12% 13%, transparent 13% 76%, rgba(26, 140, 130, 0.11) 76% 77%, transparent 77%),
        repeating-linear-gradient(135deg, transparent 0 0.7rem, rgba(242, 214, 162, 0.025) 0.72rem 0.9rem);
    pointer-events: none;
}

.leather-slab {
    background:
        radial-gradient(circle at 18% 22%, rgba(242, 214, 162, 0.18), transparent 0.16rem),
        radial-gradient(circle at 65% 60%, rgba(19, 13, 10, 0.42), transparent 0.19rem),
        repeating-linear-gradient(24deg, rgba(242, 214, 162, 0.055) 0 0.08rem, transparent 0.08rem 0.42rem),
        linear-gradient(135deg, var(--leather), var(--umber) 58%, var(--black));
    background-size: 1.8rem 1.8rem, 1.2rem 1.2rem, auto, auto;
}

.stitched-edge::after {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border: 0.12rem dashed rgba(242, 214, 162, 0.52);
    filter: drop-shadow(0.18rem 0.18rem 0 var(--clay));
    pointer-events: none;
}

.black-margin {
    grid-column: 1;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 0.65rem;
    background: linear-gradient(180deg, var(--black), var(--umber));
    color: var(--ochre);
    font-family: var(--utility);
    font-size: clamp(0.62rem, 1vw, 0.82rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(0.6deg);
}

.pasted-labels {
    grid-column: 2 / 4;
    grid-row: 1;
    display: flex;
    gap: 0.55rem;
    align-self: start;
    z-index: 4;
}

.pasted-labels a,
.stamp-tag {
    display: inline-flex;
    padding: 0.65rem 0.9rem;
    background: var(--cream);
    color: var(--black);
    font-family: var(--utility);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0.28rem 0.28rem 0 var(--clay), -0.16rem -0.1rem 0 var(--teal);
    transform: rotate(-1.4deg);
}

.pasted-labels a:nth-child(2) {
    transform: rotate(1deg);
    background: var(--ochre);
}

.pasted-labels a:nth-child(3) {
    transform: rotate(-0.5deg);
    background: var(--rose);
}

.title-stack {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    align-self: end;
    min-height: 58vh;
    position: relative;
    animation: wordmarkSplit 2.2s cubic-bezier(.2,.8,.2,1) 0.3s both;
}

.title-stack.sharp-glitch {
    transform: skewX(-8deg) translateX(0.5rem);
    filter: drop-shadow(0.5rem 0 0 rgba(215, 68, 38, 0.78)) drop-shadow(-0.35rem 0 0 rgba(26, 140, 130, 0.58));
}

.title-slice {
    position: absolute;
    inset: auto 0;
    min-height: 35%;
    display: flex;
    align-items: center;
    padding-inline: clamp(0.4rem, 2vw, 1.5rem);
    overflow: hidden;
    border: 0.14rem solid rgba(242, 214, 162, 0.18);
}

.title-slice span,
.pile-card span {
    font-family: var(--serif);
    font-size: clamp(5.5rem, 18vw, 19rem);
    line-height: 0.72;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cream);
    text-shadow: 0.08em 0.035em 0 var(--clay), -0.035em -0.02em 0 var(--teal);
}

.slice-one {
    top: 9%;
    transform: rotate(-1.4deg);
    clip-path: polygon(0 5%, 100% 0, 96% 88%, 3% 100%);
}

.slice-two {
    bottom: 11%;
    transform: rotate(1.2deg);
    clip-path: polygon(3% 0, 99% 11%, 100% 100%, 0 86%);
}

.title-whole {
    top: 31%;
    background: rgba(19, 13, 10, 0.5);
    mix-blend-mode: screen;
    transform: rotate(-0.2deg) translateX(1.2rem);
}

.candle-module {
    grid-column: 4;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, var(--black), var(--oxblood) 68%, var(--umber));
    transform: rotate(1.1deg);
}

.wax-halo::after {
    content: "";
    position: absolute;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 214, 162, 0.34), rgba(217, 154, 43, 0.17) 36%, transparent 64%);
    filter: blur(0.4rem);
    animation: haloBreathe 4.5s ease-in-out infinite;
    pointer-events: none;
}

.candle-flame {
    width: 2.2rem;
    height: 5rem;
    border-radius: 65% 35% 60% 40%;
    background: radial-gradient(circle at 45% 65%, var(--cream) 0 17%, var(--ochre) 18% 42%, var(--clay) 43% 72%, transparent 73%);
    filter: drop-shadow(0 0 2rem var(--ochre));
    transform-origin: 50% 100%;
    animation: candleFlicker 0.18s infinite alternate;
    z-index: 2;
}

.candle-stick {
    width: 1.7rem;
    height: 48vh;
    background:
        linear-gradient(90deg, rgba(19, 13, 10, 0.36), transparent 40%, rgba(19, 13, 10, 0.24)),
        var(--cream);
    border-radius: 0.25rem 0.25rem 0.6rem 0.6rem;
    z-index: 2;
}

.wax-pool {
    width: 70%;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 2rem rgba(242, 214, 162, 0.55);
    z-index: 2;
}

.candle-module p {
    z-index: 2;
    color: var(--ochre);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.leather-panel {
    grid-column: 2;
    grid-row: 3;
    transform: rotate(1.4deg);
}

.coordinate,
.caption-kicker {
    position: relative;
    z-index: 2;
    display: inline-block;
    font-family: var(--utility);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
}

.coordinate {
    margin: 1rem;
}

.staple {
    position: absolute;
    width: 2.2rem;
    height: 0.44rem;
    background: var(--cream);
    box-shadow: 0.18rem 0.16rem 0 var(--black);
}

.staple-a { top: 22%; left: 18%; transform: rotate(8deg); }
.staple-b { right: 18%; bottom: 23%; transform: rotate(-11deg); }

.ripple-burst {
    background:
        radial-gradient(circle, transparent 0 18%, var(--cream) 19% 20%, transparent 21% 34%, var(--clay) 35% 37%, transparent 38% 55%, var(--teal) 56% 57%, transparent 58%),
        var(--ochre);
    color: var(--black);
    display: grid;
    place-items: center;
    text-align: center;
    transform: rotate(-2deg);
}

.poster-wall .ripple-burst {
    grid-column: 3 / 5;
    grid-row: 3;
}

.ripple-burst strong {
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 5.5rem);
    letter-spacing: -0.04em;
    text-shadow: 0.08em 0.05em 0 var(--rose);
}

.ripple-burst span {
    max-width: 14rem;
    font-family: Lora, serif;
    font-style: italic;
}

.scorched-caption {
    grid-column: 4;
    grid-row: 3;
    padding: clamp(1rem, 2vw, 1.8rem);
    background: linear-gradient(145deg, var(--black), var(--oxblood));
    color: var(--cream);
    transform: rotate(-0.8deg);
}

.scorched-caption p,
.scorched-caption h2 {
    position: relative;
    z-index: 2;
    font-family: Lora, serif;
    font-size: clamp(1rem, 1.8vw, 1.55rem);
    line-height: 1.18;
}

.chamber {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    background:
        radial-gradient(circle at 78% 28%, rgba(242, 214, 162, 0.18), transparent 20rem),
        linear-gradient(160deg, var(--umber), var(--oxblood));
}

.chamber-heading {
    padding: clamp(1.2rem, 3vw, 3rem);
    background: var(--black);
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: rotate(-1deg);
}

.chamber h1 {
    position: relative;
    z-index: 2;
    margin: 1rem 0 0;
    font-family: var(--serif);
    font-size: clamp(3rem, 7vw, 8rem);
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cream);
    text-shadow: 0.05em 0.035em 0 var(--clay);
}

.swatch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.swatch {
    min-height: 36vh;
    padding: 1rem;
}

.swatch-large {
    grid-column: 1 / 3;
    min-height: 30vh;
}

.swatch h2,
.swatch p {
    position: relative;
    z-index: 2;
    margin: 2rem 0 0;
}

.swatch h2 {
    font-family: var(--display);
    color: var(--cream);
    font-size: clamp(2rem, 4vw, 4.5rem);
    line-height: 0.92;
}

.swatch p {
    font-family: Lora, serif;
    font-size: clamp(1.1rem, 2vw, 1.7rem);
    line-height: 1.25;
}

.wax-card {
    background: linear-gradient(145deg, var(--cream), var(--ochre));
    color: var(--black);
}

.wax-card .coordinate {
    color: var(--oxblood);
}

.scorch-card {
    background:
        radial-gradient(circle at 82% 16%, rgba(215, 68, 38, 0.38), transparent 6rem),
        var(--black);
}

.letter-relics {
    position: absolute;
    inset: auto 2vw 0 2vw;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0.19;
}

.letter-relics span {
    font-family: var(--serif);
    font-size: clamp(6rem, 16vw, 18rem);
    font-style: italic;
    color: var(--clay);
}

.manifesto {
    display: grid;
    grid-template-columns: 1fr 0.38fr 1fr;
    grid-template-rows: 1fr 0.75fr;
    gap: 1rem;
    background: linear-gradient(180deg, var(--black), var(--umber));
}

.manifesto-strip {
    grid-column: 1 / 3;
    padding: clamp(1.2rem, 4vw, 4rem);
    background: var(--cream);
    color: var(--black);
    transform: rotate(0.7deg);
}

.manifesto-strip p {
    position: relative;
    z-index: 2;
    margin: 1rem 0 0;
    font-family: var(--serif);
    font-size: clamp(3rem, 8vw, 9rem);
    line-height: 0.82;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.manifesto-strip .caption-kicker {
    color: var(--clay);
}

.halftone-band {
    grid-column: 3;
    grid-row: 1 / 3;
    background:
        radial-gradient(circle, var(--rose) 0 0.32rem, transparent 0.34rem),
        linear-gradient(180deg, var(--oxblood), var(--black));
    background-size: 1.25rem 1.25rem, auto;
    animation: plateDrift 8s ease-in-out infinite;
}

.quote-burst {
    grid-column: 1 / 2;
    grid-row: 2;
    padding: 1.3rem;
}

.quote-burst blockquote {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.8rem, 4vw, 4rem);
    line-height: 0.9;
}

.annotation-wall {
    grid-column: 2;
    grid-row: 2;
    padding: 1rem;
    background: var(--oxblood);
    transform: rotate(-1deg);
}

.annotation-wall p {
    position: relative;
    z-index: 2;
    font-family: var(--utility);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 0.1rem solid rgba(242, 214, 162, 0.2);
    padding-bottom: 0.75rem;
}

.annotation-wall span {
    color: var(--ochre);
}

.final-stack {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    gap: clamp(1rem, 4vw, 4rem);
    align-items: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(217, 154, 43, 0.2), transparent 22rem),
        linear-gradient(140deg, var(--oxblood), var(--black));
}

.poster-pile {
    min-height: 78vh;
    position: relative;
}

.pile-card {
    position: absolute;
    inset: 8% 8%;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--black);
}

.pile-card span {
    color: var(--black);
    text-shadow: 0.08em 0.035em 0 var(--clay), -0.035em -0.02em 0 var(--teal);
}

.pile-one { transform: rotate(-6deg) translate(-8%, 6%); background: var(--leather); }
.pile-two { transform: rotate(4deg) translate(4%, -4%); background: var(--ochre); }
.pile-three { transform: rotate(-1deg) translate(10%, 10%); background: var(--rose); }
.pile-four { transform: rotate(2deg) translate(-2%, 1%); background: var(--cream); }

.closing-tag {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.closing-tag h2 {
    font-family: var(--serif);
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.82;
    text-transform: uppercase;
    text-shadow: 0.06em 0.04em 0 var(--clay);
}

.stamp-tag {
    align-self: flex-start;
    margin-top: 1rem;
}

.is-visible .poster-module {
    animation: blockThump 0.9s cubic-bezier(.16,1,.3,1) both;
}

.is-visible .poster-module:nth-child(2n) { animation-delay: 0.08s; }
.is-visible .poster-module:nth-child(3n) { animation-delay: 0.16s; }

@keyframes blockThump {
    from { opacity: 0; translate: 0 2rem; filter: blur(0.4rem); }
    70% { translate: 0 -0.2rem; }
    to { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes wordmarkSplit {
    0% { filter: blur(0.5rem); transform: translateX(-1.3rem); }
    14% { transform: translateX(1.1rem) skewX(8deg); }
    22% { transform: translateX(-0.7rem) skewX(-6deg); }
    36%, 100% { filter: blur(0); transform: translateX(0) skewX(0); }
}

@keyframes candleFlicker {
    from { transform: rotate(-3deg) scaleY(0.94); opacity: 0.86; }
    to { transform: rotate(4deg) scaleY(1.08); opacity: 1; }
}

@keyframes haloBreathe {
    0%, 100% { transform: scale(0.9); opacity: 0.46; }
    50% { transform: scale(1.12); opacity: 0.78; }
}

@keyframes plateDrift {
    0%, 100% { background-position: 0 0, 0 0; }
    50% { background-position: 0.55rem -0.35rem, 0 0; }
}

@keyframes scanDrift {
    0% { transform: translateY(-1rem); }
    100% { transform: translateY(1rem); }
}

@media (max-width: 900px) {
    .poster-wall,
    .chamber,
    .manifesto,
    .final-stack {
        display: flex;
        flex-direction: column;
    }

    .black-margin {
        writing-mode: horizontal-tb;
        min-height: 4rem;
    }

    .title-stack {
        min-height: 46vh;
        width: 100%;
    }

    .candle-stick {
        height: 28vh;
    }

    .swatch-grid {
        grid-template-columns: 1fr;
    }

    .swatch-large {
        grid-column: auto;
    }

    .halftone-band {
        min-height: 28vh;
    }
}