/* continuum.quest - Cosmological Cartography */

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

:root{
    --obsidian:#0D1117;
    --graphite:#1A1F2B;
    --chalk:#D4D2CB;
    --slate:#6E7B8B;
    --verdigris:#3D8B74;
    --parchment:#8A7F6E;
    --copper:#B87333;
    --deep:#0A0D12;
    --bg-current:#1A1F2B;
}

html{scroll-behavior:smooth}

body{
    background:var(--bg-current);
    color:var(--chalk);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
    transition:background-color 800ms cubic-bezier(0.25,0.1,0.25,1);
}

/* Page grid */
.page-grid{
    display:grid;
    grid-template-columns:55% 45%;
    min-height:100vh;
}

/* Content column */
.content-col{
    position:relative;
    z-index:5;
    padding:0 clamp(24px,3vw,48px);
}

/* Sections */
.sect{
    position:relative;
    padding-left:var(--indent,0);
    scroll-snap-align:start;
}

.sect-1{min-height:100vh;padding-top:40px;padding-bottom:clamp(40px,6vh,80px);display:flex;flex-direction:column;justify-content:flex-start}
.sect-2{min-height:60vh;padding-bottom:clamp(24px,4vh,48px)}
.sect-3{min-height:35vh;padding-bottom:clamp(16px,3vh,32px)}
.sect-4{min-height:20vh;padding-bottom:clamp(12px,2vh,24px)}
.sect-5{min-height:14vh;padding-bottom:clamp(8px,1.5vh,16px)}
.sect-6{min-height:10vh;padding-bottom:clamp(8px,1vh,12px)}

.sect-terminus{
    min-height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sect-inner{
    max-width:50ch;
}

/* Domain line */
.domain-line{
    font-family:'EB Garamond',serif;
    font-weight:500;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    font-variant:small-caps;
    letter-spacing:0.04em;
    color:var(--chalk);
    padding-bottom:0.5rem;
    border-bottom:1px solid var(--slate);
    margin-bottom:clamp(40px,10vh,100px);
}

/* Section headings */
.sect-heading{
    font-family:'EB Garamond',serif;
    font-weight:500;
    font-size:clamp(1.4rem,3vw,2.8rem);
    font-variant:small-caps;
    letter-spacing:0.04em;
    line-height:1.15;
    color:var(--chalk);
    margin-bottom:1rem;
}

/* Body text */
.body-text{
    color:var(--slate);
    margin-bottom:1rem;
}

.body-text.tight{line-height:1.6}
.body-text.tighter{line-height:1.45}
.body-text.tightest{line-height:1.3}

/* Margin annotations */
.margin-note{
    position:absolute;
    left:-clamp(60px,8vw,100px);
    font-family:'Fira Code',monospace;
    font-size:0.7rem;
    font-weight:400;
    color:var(--slate);
    opacity:0;
    transition:opacity 600ms ease;
    white-space:nowrap;
}

.margin-note.visible{opacity:0.6}
.mn-1{top:20%}
.mn-2{top:45%}
.mn-3{top:70%}

/* Asymptote dividers */
.asymptote-divider{
    margin:clamp(16px,3vh,40px) 0;
    max-width:100%;
}

.asymptote-divider svg{
    width:100%;
    height:20px;
}

/* Terminus dot */
.terminus-dot{
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--copper);
    box-shadow:0 0 8px rgba(184,115,51,0.5),0 0 20px rgba(184,115,51,0.2);
}

/* Canvas column */
.canvas-col{
    position:fixed;
    top:0;
    right:0;
    width:45%;
    height:100vh;
    z-index:1;
    background:var(--deep);
    overflow:hidden;
}

.contour-canvas{
    width:100%;
    height:100%;
}

/* Grid lines */
.grid-line{
    stroke:#1A2530;
    stroke-width:0.3;
}

.grid-line-heavy{
    stroke:#1A2530;
    stroke-width:0.6;
}

/* Contour lines */
.contour-ring{
    fill:none;
    stroke:var(--verdigris);
    stroke-width:0.75;
    opacity:0.6;
}

/* Responsive */
@media(max-width:768px){
    .page-grid{
        grid-template-columns:1fr;
    }

    .canvas-col{
        position:fixed;
        width:100%;
        opacity:0.12;
        z-index:0;
    }

    .content-col{
        padding:0 clamp(20px,4vw,40px);
    }

    .sect{
        padding-left:0 !important;
    }

    .margin-note{
        position:relative;
        left:0;
        display:block;
        margin-bottom:0.5rem;
    }

    .sect-1{min-height:80vh}
}

@media(prefers-reduced-motion:reduce){
    body{transition:none}
    .margin-note{opacity:0.6;transition:none}
}