/* cbdc.study - Academic Monetary Research Monograph */

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

:root{
    --parchment:#F4F1EB;
    --midnight:#1A1A2E;
    --carbon:#2C2C3A;
    --slate:#7A7A8E;
    --indigo:#3D5A80;
    --ochre:#C8A96E;
    --red:#A4343A;
    --bond:#EDE8DF;
    --rule:#3A3A50;
}

html{scroll-behavior:smooth}

body{
    background:var(--parchment);
    color:var(--carbon);
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:clamp(1rem,1.1vw,1.15rem);
    line-height:1.72;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Page grid: annotation rail + content */
.page-grid{
    display:grid;
    grid-template-columns:minmax(80px,25%) minmax(0,1fr);
    gap:clamp(1.5rem,3vw,3rem);
    max-width:1100px;
    margin:0 auto;
    padding:0 clamp(16px,3vw,40px);
}

/* Sections */
.sec{
    display:contents;
}

.annot-col{
    padding:clamp(3rem,6vh,6rem) 0;
    position:relative;
    border-right:1px solid #C8BDA8;
    padding-right:clamp(12px,2vw,24px);
    text-align:right;
}

.content-col{
    padding:clamp(3rem,6vh,6rem) 0;
    text-align:justify;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.content-col p{
    margin-bottom:1.5rem;
    max-width:65ch;
}

/* Section rules */
.sec-rule{
    grid-column:1/-1;
    border:none;
    border-top:0.5px solid var(--rule);
    margin:0;
}

/* Chapter numbers */
.chapter-num{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:4rem;
    color:#6B5B4E;
    display:block;
    line-height:1;
}

/* Annotation notes */
.annot-note{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem;
    line-height:1.5;
    color:var(--slate);
    margin-top:1rem;
}

.annot-warn{
    color:var(--red);
}

/* Sparkline */
.sparkline{
    display:block;
    width:80px;
    height:40px;
    margin-top:1rem;
    margin-left:auto;
}

/* Title page */
.title-content{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:80vh;
}

.site-title{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(1.8rem,3.5vw,3.2rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--carbon);
}

.rotating-q{
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:0.9rem;
    color:var(--slate);
    margin-top:3rem;
    transition:opacity 2s ease-in-out;
    max-width:40ch;
}

/* Section headings */
.sec-heading{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(1.6rem,2.8vw,2.6rem);
    color:var(--carbon);
    margin-bottom:1.5rem;
    text-align:left;
}

/* Pullquote */
.pullquote{
    border-left:3px solid var(--ochre);
    background:var(--bond);
    padding:clamp(16px,2vw,24px) clamp(16px,3vw,32px);
    margin:2rem 0;
    font-style:italic;
    color:var(--carbon);
    max-width:65ch;
}

/* Timeline visualization */
.timeline-viz{
    position:relative;
    height:120px;
    margin:2rem 0;
    width:100%;
}

.tl-axis{
    position:absolute;
    bottom:40px;
    left:0;right:0;
    height:1px;
    background:var(--indigo);
    opacity:0.3;
}

.tl-dot{
    position:absolute;
    bottom:36px;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--indigo);
    transform:translateX(-50%);
    opacity:0;
    transition:opacity 400ms ease;
}

.tl-dot-lg{
    width:14px;height:14px;
    bottom:34px;
}

.tl-dot.shown{
    opacity:1;
}

.tl-label{
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    color:var(--slate);
    white-space:nowrap;
}

/* Open question */
.open-q-content{
    min-height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.open-question{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(2rem,4vw,4rem);
    text-align:center;
    color:var(--carbon);
    max-width:16ch;
    line-height:1.2;
}

/* Footer */
.footer-sec{
    padding-bottom:4rem;
}

.footer-mark{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem;
    color:var(--slate);
    letter-spacing:0.05em;
}

/* Links */
a{
    color:var(--indigo);
    text-decoration:none;
    transition:opacity 200ms ease;
}

a:hover{
    opacity:0.7;
}

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

    .annot-col{
        border-right:none;
        border-bottom:1px solid #C8BDA8;
        padding:1rem 0;
        text-align:left;
        display:flex;
        gap:1rem;
        align-items:baseline;
    }

    .chapter-num{
        font-size:2rem;
    }

    .content-col{
        padding-top:0;
    }

    .sparkline{
        margin-left:0;
    }

    .title-content{
        min-height:60vh;
    }
}

/* Dark mode */
@media(prefers-color-scheme:dark){
    :root{
        --parchment:#1A1A2E;
        --carbon:#E8ECF1;
        --slate:#8A8A9E;
        --bond:#22223A;
        --rule:#3A3A50;
    }

    body{background:var(--parchment);color:var(--carbon)}
    .annot-col{border-color:#3A3A50}
    .chapter-num{color:#8A7A6E}
}