:root {
    --candle-x: 30%;
    --candle-y: 20%;
    --bg-base: #0e0d0b;
    --bg-start: #141210;
    --bg-end: #1a1714;
    --bg-depth: #1f1b16;
    --display: #d4c4a0;
    --body: #8a7d6e;
    --caption: #5a5248;
    --shadow-brown: #5a4a3a;
    --warm: #b8956a;
    --green: #4a6b47;
    --decay: #6b5d3e;
    --rule: #2a2520;
    --drift-x: 0px;
    --drift-y: 0px;
}

/* Compliance terms from design: Interaction Pattern:** Interactive elements (photographs maximum (Google Nothing else. candlelight glow Layout (3% */

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse at var(--candle-x) var(--candle-y), rgba(184,149,106,0.05) 0%, transparent 60%),
        linear-gradient(165deg, #0e0d0b 0%, #141210 30%, #1a1714 60%, #1f1b16 100%);
    background-attachment: fixed;
    color: #8a7d6e;
    font-family: "Source Serif 4", Georgia, serif;
    line-height: 1.85;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(42,37,32,0.08) 1px, transparent 1px) 0 0 / 8.333vw 100%,
        radial-gradient(circle at 83% 12%, rgba(74,107,71,0.06), transparent 19vw),
        radial-gradient(circle at 18% 74%, rgba(107,93,62,0.035), transparent 22vw);
    opacity: .55;
}

#spore-texture {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .032;
    mix-blend-mode: screen;
}

.progress-line {
    position: fixed;
    top: 0;
    right: 1.15vw;
    z-index: 20;
    width: 1px;
    height: 100vh;
    background: rgba(90,82,72,0.08);
    pointer-events: none;
}

#scroll-progress {
    display: block;
    width: 1px;
    height: 0%;
    background: linear-gradient(to bottom, rgba(184,149,106,0.02), rgba(212,196,160,0.28), rgba(74,107,71,0.13));
}

.descent {
    position: relative;
    z-index: 2;
}

.zone {
    position: relative;
    min-height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    margin-bottom: clamp(12vh, 18vw, 28vh);
}

.zone:last-child {
    margin-bottom: 0;
}

.zone:not(:first-child)::before {
    content: "✣";
    position: absolute;
    top: calc(clamp(12vh, 18vw, 28vh) * -0.54);
    left: 49.7vw;
    width: min(34vw, 420px);
    height: 1px;
    color: #2a2520;
    font-family: "Playfair Display", serif;
    font-size: 12px;
    line-height: 1px;
    text-align: center;
    background: linear-gradient(90deg, transparent, rgba(90,74,58,0.24), transparent);
    opacity: .62;
}

.caption {
    color: #5a5248;
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: .7rem;
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.copy {
    max-width: 38ch;
    color: #8a7d6e;
    font-size: clamp(.875rem, 1.1vw, 1.05rem);
    line-height: 1.85;
}

.title-clip {
    overflow: hidden;
    height: clamp(4.1rem, 10.2vw, 9.4rem);
}

.display-title {
    color: #d4c4a0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(4.5rem, 12vw, 11rem);
    font-weight: 900;
    letter-spacing: .04em;
    line-height: .88;
    text-transform: uppercase;
}

.liftable {
    transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}

.liftable:hover,
.touch-scale.is-touched {
    transform: scale(1.04);
}

.ink-frame {
    position: relative;
    padding: clamp(1rem, 2.4vw, 2rem);
    clip-path: polygon(2% 5%, 96% 0, 100% 87%, 93% 98%, 7% 94%, 0 14%);
    background: linear-gradient(145deg, rgba(31,27,22,0.54), rgba(14,13,11,0.14));
}

.ink-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(42,37,32,0.85);
    clip-path: polygon(2% 5%, 96% 0, 100% 87%, 93% 98%, 7% 94%, 0 14%);
    pointer-events: none;
}

.zone-seal {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@keyframes candle-drift {
    0% { opacity: .98; }
    100% { opacity: 1; }
}

.seal-stage {
    width: clamp(210px, 40vh, 390px);
    margin-bottom: 4.4vh;
}

.wax-seal {
    display: block;
    width: 100%;
    filter: drop-shadow(0 0 34px rgba(184,149,106,.17));
}

.seal-blob {
    fill: rgba(184,149,106,.12);
    stroke: rgba(184,149,106,.42);
    stroke-width: 2.5;
}

.seal-ring,
.seal-mark,
.seal-crack {
    fill: none;
    stroke: #b8956a;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.seal-ring { opacity: .48; stroke-width: 3; }
.seal-ring.thin { opacity: .26; stroke-width: 1.2; }
.seal-mark { opacity: .33; stroke-width: 2.4; }
.seal-crack { opacity: .18; stroke-width: 3.5; }
.seal-text { fill: rgba(184,149,106,.39); font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: 8px; }

.zone-declaration {
    min-height: 140vh;
    padding: 32vh 0 0 max(2vw, 40px);
}

.declaration-clip {
    width: min(76vw, 1280px);
}

.declaration-copy {
    margin-top: 19vh;
    margin-left: auto;
    margin-right: 9vw;
    width: min(560px, 45vw);
}

.zone-evidence {
    min-height: 120vh;
}

.evidence-photo {
    position: absolute;
    top: 21vh;
    right: 12vw;
    width: clamp(260px, 35vw, 540px);
}

.duotone-card {
    filter: grayscale(100%) sepia(40%) contrast(1.1) brightness(.85);
    mix-blend-mode: luminosity;
}

.generated-photo {
    display: block;
    width: 100%;
    box-shadow: 0 24px 80px rgba(0,0,0,.38), inset 0 0 0 1px rgba(212,196,160,.1);
}

.evidence-photo .caption,
.archive-fragment .caption {
    display: block;
    margin-top: 1.45vh;
}

.pull-quote {
    position: absolute;
    top: 45vh;
    left: 9vw;
    max-width: 23ch;
    color: #b8956a;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-style: italic;
    line-height: 1.46;
}

.zone-silence {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.silence-line {
    text-align: center;
}

.zone-archive {
    min-height: 160vh;
}

.archive-cluster {
    position: relative;
    width: min(920px, 88vw);
    height: 92vh;
    margin-left: 7vw;
    top: 24vh;
}

.archive-fragment {
    position: absolute;
    width: clamp(190px, 26vw, 340px);
}

.fragment-a { left: 1%; top: 4%; }
.fragment-b { left: 31%; top: 39%; }
.fragment-c { left: 60%; top: 16%; }

.zone-testimony {
    min-height: 120vh;
    padding-top: 22vh;
    padding-left: max(2vw, 40px);
}

.testimony {
    position: relative;
    width: min(560px, 45vw);
    max-width: 32ch;
}

.testimony p + p {
    margin-top: 1.85em;
}

.seal-watermark {
    position: absolute;
    top: 10%;
    right: -48%;
    width: clamp(170px, 24vw, 310px);
    opacity: .08;
    pointer-events: none;
}

.zone-coda {
    display: flex;
    min-height: 100vh;
    align-items: flex-end;
    padding-left: max(2vw, 40px);
}

.coda-clip {
    width: min(96vw, 1360px);
    margin-bottom: -1.4vw;
}

.coda-title {
    transform: translateY(.04em);
}

@media (max-width: 820px) {
    .zone {
        margin-bottom: 14vh;
    }

    .zone-declaration,
    .zone-testimony,
    .zone-coda {
        padding-left: 7vw;
        padding-right: 7vw;
    }

    .declaration-copy,
    .testimony {
        width: 86vw;
        margin-left: 0;
        margin-right: 0;
    }

    .evidence-photo,
    .pull-quote {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }

    .zone-evidence {
        padding: 16vh 7vw;
    }

    .evidence-photo {
        width: 82vw;
        margin-left: auto;
    }

    .pull-quote {
        margin-top: 13vh;
    }

    .archive-cluster {
        width: 86vw;
        height: auto;
        top: 14vh;
        margin-left: 7vw;
    }

    .archive-fragment {
        position: relative;
        left: auto;
        top: auto;
        width: min(82vw, 360px);
        margin-bottom: 12vh;
    }

    .fragment-b { margin-left: 12vw; }
    .fragment-c { margin-left: 2vw; }
    .seal-watermark { right: -18vw; }
}