/* continu.st - Unbroken River Journey */

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

:root{
    --riverbed:#1c1a17;
    --silt:#d4cfc6;
    --sediment:#8a8377;
    --oxbow:#b8860b;
    --alluvial:#5e7e6b;
    --bedrock:#3d3529;
    --mineral:#c9a96e;
    --filament:#6b5b3e;
}

html{scroll-behavior:smooth}

body{
    background:var(--riverbed);
    color:var(--silt);
    font-family:'Newsreader',serif;
    font-weight:300;
    font-size:clamp(1rem,1.8vw,1.35rem);
    line-height:1.75;
    letter-spacing:0.005em;
    overflow-x:hidden;
    cursor:default;
}

/* Strata lines */
.strata-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.strata-line{
    position:absolute;
    left:0;right:0;
    height:0.5px;
    background:var(--sediment);
    opacity:0.15;
}

/* Drift particles */
.drift-canvas{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}

/* Thread SVG */
.thread-svg{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:800vh;
    z-index:2;
    pointer-events:none;
}

.thread-path{
    stroke-dasharray:20000;
    stroke-dashoffset:20000;
    transition:stroke-dashoffset 0s;
}

/* River content */
.river{
    position:relative;
    z-index:5;
    display:block;
    padding:0 clamp(16px,3vw,40px);
}

.zone{
    display:block;
}

/* 12-column text block positioning */
.text-block{
    max-width:50ch;
}

.cols-2-7{margin-left:8.33%;max-width:41.66%}
.cols-4-9{margin-left:25%;max-width:41.66%}
.cols-5-10{margin-left:33.33%;max-width:41.66%}
.cols-2-6{margin-left:8.33%;max-width:33.33%}
.cols-6-11{margin-left:41.66%;max-width:41.66%}
.cols-3-8{margin-left:16.66%;max-width:41.66%}
.cols-4-8{margin-left:25%;max-width:33.33%}

/* Domain title */
.domain-title{
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(2.5rem,7vw,8rem);
    letter-spacing:0.01em;
    line-height:1.15;
    color:var(--silt);
}

/* Body text */
.body-text{
    margin-bottom:0;
}

.oxbow-highlight{
    color:var(--oxbow);
}

/* Reveal blocks */
.reveal-block{
    opacity:0;
    transition:opacity 600ms ease;
}

.reveal-block.visible{
    opacity:1;
}

/* Erosion typography */
.erosion-word{
    position:relative;
    overflow:hidden;
    margin-left:10%;
}

.erosion-bg,.erosion-fg{
    font-family:'EB Garamond',serif;
    font-weight:500;
    font-size:clamp(5rem,15vw,15rem);
    line-height:1;
    display:block;
}

.erosion-bg{
    color:var(--bedrock);
}

.erosion-fg{
    position:absolute;
    top:0;left:0;
    color:var(--silt);
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1.2s ease;
}

.erosion-reveal.revealed .erosion-fg{
    clip-path:inset(0 0% 0 0);
}

/* Closing domain */
.closing-domain{
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,3rem);
    color:var(--oxbow);
    letter-spacing:0.01em;
}

/* Responsive */
@media(max-width:768px){
    .cols-2-7,.cols-4-9,.cols-5-10,.cols-2-6,.cols-6-11,.cols-3-8,.cols-4-8{
        margin-left:5%;
        max-width:90%;
    }

    .erosion-word{
        margin-left:5%;
    }
}