:root {
    --peat-dark: #2a2017;
    --birch-cream: #e8ddd0;
    --lichen-gray: #c4b8a8;
    --amber-glow: #c89040;
    --granite-dust: #7a6e60;
    --charcoal-hearth: #1a1712;
    --frost-wash: #d4c8b8;
    --copper-thread: #a89070;
    --bg-depth: #2a2017;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-depth);
    color: var(--lichen-gray);
    font-family: 'Crimson Pro', serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
    line-height: 1.85;
    letter-spacing: 0.015em;
    overflow-x: hidden;
}

/* The Threshold */
.threshold {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--peat-dark);
    position: relative;
}

.threshold-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.domain-name {
    font-family: 'Fraunces', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 200;
    font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 80;
    color: var(--birch-cream);
    opacity: 0;
    animation: fadeIn 3000ms ease-in forwards;
    animation-delay: 800ms;
}

.descending-line {
    width: 1px;
    height: 30vh;
    background: var(--copper-thread);
    transform: scaleY(0);
    transform-origin: top;
    animation: drawLine 2000ms ease forwards;
    animation-delay: 2000ms;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawLine {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Content Column - Golden Section */
.propositions,
.reflections,
.weight {
    position: relative;
    padding: 12vh 0;
}

.content-block {
    max-width: 640px;
    margin-left: 38.2%;
    margin-right: auto;
    padding: 0 2rem;
    margin-bottom: 15vh;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1200ms ease, transform 800ms ease;
}

.content-block.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Propositions */
.proposition {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.4rem, 6vw + 0.5rem, 5.5rem);
    font-weight: 200;
    font-variation-settings: "opsz" 8, "WONK" 1, "SOFT" 80;
    color: var(--birch-cream);
    line-height: 1.2;
    transition: font-variation-settings 1500ms ease;
}

.content-block.visible .proposition {
    font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 80;
}

/* Reflections */
.reflection-block {
    max-width: 520px;
}

.reflection {
    font-family: 'Crimson Pro', serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
    line-height: 1.85;
    color: var(--lichen-gray);
}

/* The Weight - Final Section */
.weight {
    padding-bottom: 0;
}

.final-question {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.4rem, 6vw + 0.5rem, 5.5rem);
    font-weight: 200;
    font-variation-settings: "opsz" 8, "WONK" 1, "SOFT" 80;
    color: var(--birch-cream);
    opacity: 0.7;
    line-height: 1.2;
    transition: font-variation-settings 1500ms ease;
}

.content-block.visible .final-question {
    font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 80;
}

.trailing-silence {
    height: 40vh;
}

/* Birch Ring Circles */
.birch-ring {
    position: absolute;
    border: 1px solid var(--lichen-gray);
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}

/* Cairn Dots */
.cairn-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 3rem;
}

.cairn-dots span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--granite-dust);
}

/* Section Divider Lines */
.section-line {
    width: 1px;
    height: 20vh;
    background: var(--copper-thread);
    margin: 0 auto;
    margin-left: calc(38.2% + 2rem);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 1000ms ease, transform 1500ms ease;
}

.section-line.visible {
    opacity: 1;
    transform: scaleY(1);
}

/* Duotone Background Images via CSS pseudo-elements */
.proposition-block {
    position: relative;
}

.proposition-block[data-bg]::before {
    content: '';
    position: absolute;
    top: -10vh;
    left: -40vw;
    right: -20vw;
    bottom: -10vh;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) sepia(0.4) contrast(0.8) brightness(0.6);
    opacity: 0;
    transition: opacity 1200ms ease;
    pointer-events: none;
    z-index: -2;
}

.proposition-block[data-bg]::after {
    content: '';
    position: absolute;
    top: -10vh;
    left: -40vw;
    right: -20vw;
    bottom: -10vh;
    background: var(--peat-dark);
    mix-blend-mode: multiply;
    opacity: 0.85;
    pointer-events: none;
    z-index: -1;
}

.proposition-block.visible[data-bg]::before {
    opacity: 0.15;
}

/* Use generated SVG patterns as bg imagery stand-ins */
.proposition-block[data-bg="fjord"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect fill='%231a1712' width='800' height='600'/%3E%3Cpath d='M0 400 Q200 300 400 350 Q600 400 800 320 L800 600 L0 600Z' fill='%232a2017'/%3E%3Cpath d='M0 450 Q300 380 500 420 Q700 460 800 400 L800 600 L0 600Z' fill='%23181410'/%3E%3Crect x='150' y='100' width='3' height='250' fill='%233a3027' opacity='0.5'/%3E%3Crect x='650' y='80' width='4' height='280' fill='%233a3027' opacity='0.4'/%3E%3C/svg%3E");
}

.proposition-block[data-bg="birch"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect fill='%231a1712' width='800' height='600'/%3E%3Crect x='120' y='0' width='8' height='600' fill='%23c4b8a8' opacity='0.3'/%3E%3Crect x='250' y='50' width='6' height='550' fill='%23c4b8a8' opacity='0.25'/%3E%3Crect x='400' y='20' width='9' height='580' fill='%23c4b8a8' opacity='0.2'/%3E%3Crect x='550' y='0' width='7' height='600' fill='%23c4b8a8' opacity='0.3'/%3E%3Crect x='680' y='30' width='5' height='570' fill='%23c4b8a8' opacity='0.2'/%3E%3C/svg%3E");
}

.proposition-block[data-bg="stones"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect fill='%231a1712' width='800' height='600'/%3E%3Cellipse cx='200' cy='450' rx='60' ry='40' fill='%232a2017'/%3E%3Cellipse cx='500' cy='420' rx='45' ry='30' fill='%23252015'/%3E%3Cellipse cx='350' cy='480' rx='35' ry='25' fill='%23302818'/%3E%3Cellipse cx='650' cy='460' rx='55' ry='35' fill='%23282018'/%3E%3Cellipse cx='100' cy='500' rx='40' ry='28' fill='%23252015'/%3E%3C/svg%3E");
}

.proposition-block[data-bg="waterfall"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect fill='%231a1712' width='800' height='600'/%3E%3Crect x='350' y='0' width='100' height='600' fill='%23c4b8a8' opacity='0.08'/%3E%3Crect x='370' y='0' width='20' height='600' fill='%23c4b8a8' opacity='0.1'/%3E%3Crect x='410' y='0' width='15' height='600' fill='%23c4b8a8' opacity='0.06'/%3E%3Cpath d='M300 0 L300 600' stroke='%232a2017' stroke-width='80'/%3E%3Cpath d='M500 0 L500 600' stroke='%232a2017' stroke-width='80'/%3E%3C/svg%3E");
}

/* Metadata / Annotations */
.annotation {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--granite-dust);
    opacity: 0.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .content-block {
        margin-left: 0;
        margin-right: 0;
        padding: 0 clamp(1.5rem, 6vw, 3rem);
        max-width: 100%;
    }

    .section-line {
        margin-left: auto;
    }

    .birch-ring {
        display: none;
    }

    .proposition-block[data-bg]::before,
    .proposition-block[data-bg]::after {
        left: -10vw;
        right: -10vw;
    }
}