/* economics.quest - Victorian Broadsheet Economics */

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

:root{
    --parchment:#F4EDE4;
    --ink:#1C1A17;
    --iron:#2C2620;
    --faded:#6B5B4E;
    --red:#8B2500;
    --gold:#C4962C;
    --rule:#B8A88A;
    --verdigris:#3D7A68;
}

/* SVG filters hidden */
.svg-filters{position:absolute;width:0;height:0;overflow:hidden}

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

/* Paper grain texture */
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:999;
    pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Persistent top bar */
.top-bar{
    position:fixed;
    top:0;left:0;right:0;
    height:40px;
    background:var(--ink);
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(16px,3vw,40px);
    transform:translateY(-100%);
    transition:transform 0.4s ease;
}

.top-bar.visible{
    transform:translateY(0);
}

.top-bar-name{
    font-family:'Source Serif 4',Georgia,serif;
    font-variant:small-caps;
    font-size:0.75rem;
    letter-spacing:0.08em;
    color:var(--parchment);
}

.top-bar-quote{
    font-family:'EB Garamond',Georgia,serif;
    font-style:italic;
    font-size:0.75rem;
    color:var(--rule);
    max-width:50%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Masthead */
.masthead{
    min-height:100svh;
    background:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.masthead::before{
    content:'';
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events:none;
}

.masthead-inner{
    text-align:center;
    position:relative;
    z-index:1;
}

.masthead-title{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:900;
    font-size:clamp(3rem,10vw,8rem);
    letter-spacing:0.04em;
    color:var(--parchment);
    line-height:1.05;
}

.masthead-subtitle{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(1rem,2vw,1.4rem);
    color:var(--rule);
    margin-top:1.5rem;
    min-height:2em;
}

.masthead-rule{
    width:40%;
    height:1px;
    background:var(--gold);
    margin:2rem auto;
}

.masthead-date{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(0.8rem,1.2vw,1rem);
    color:var(--faded);
}

/* Ornamental dividers */
.ornament{
    max-width:600px;
    margin:0 auto;
    padding:clamp(24px,4vw,60px) clamp(16px,3vw,40px);
    text-align:center;
}

.ornament-svg{
    width:100%;
    height:24px;
    overflow:visible;
}

.divider-draw line,
.divider-draw path,
.divider-draw polygon,
.divider-draw ellipse,
.divider-draw rect{
    stroke-dasharray:800;
    stroke-dashoffset:800;
    transition:stroke-dashoffset 1.5s ease;
}

.divider-draw circle{
    opacity:0;
    transition:opacity 0.6s ease 1s;
}

.divider-draw.drawn line,
.divider-draw.drawn path,
.divider-draw.drawn polygon,
.divider-draw.drawn ellipse,
.divider-draw.drawn rect{
    stroke-dashoffset:0;
}

.divider-draw.drawn circle{
    opacity:1;
}

/* Broadsheet sections */
.broadsheet-section{
    min-height:100svh;
    padding:clamp(40px,6vw,120px) clamp(16px,5vw,60px) clamp(40px,4vw,80px);
    max-width:1100px;
    margin:0 auto;
    scroll-margin-top:50px;
}

.section-headline{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:clamp(1.5rem,4vw,3rem);
    color:var(--iron);
    letter-spacing:0.02em;
    line-height:1.15;
    margin-bottom:0.5rem;
}

.section-subhead{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(0.9rem,1.3vw,1.1rem);
    color:var(--faded);
    margin-bottom:clamp(24px,3vw,48px);
}

/* Three-column layout: text + marginalia */
.columns{
    display:grid;
    grid-template-columns:1fr 240px;
    gap:2rem;
    align-items:start;
}

.column-text{
    column-count:2;
    column-gap:2rem;
    column-rule:1px solid var(--rule);
}

.body-text{
    margin-bottom:1.2rem;
    max-width:38em;
}

/* Drop capitals */
.drop-cap{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:3.5em;
    float:left;
    line-height:0.8;
    margin-right:8px;
    margin-top:4px;
    color:var(--red);
    border:1px solid var(--rule);
    padding:4px 8px;
}

/* Marginalia */
.marginalia{
    border-left:1px solid var(--rule);
    padding-left:1.5rem;
}

.margin-quote{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(0.85rem,1vw,0.95rem);
    color:var(--faded);
    line-height:1.6;
    margin-bottom:1.5rem;
}

.margin-quote cite{
    display:block;
    margin-top:0.5rem;
    font-size:0.8em;
    color:var(--rule);
}

.margin-data{
    margin-bottom:1.5rem;
}

.data-figure{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:clamp(1.4rem,2.5vw,2rem);
    color:var(--verdigris);
    display:block;
    letter-spacing:0.02em;
}

.data-caption{
    font-family:'Source Serif 4',Georgia,serif;
    font-size:0.75rem;
    color:var(--faded);
    line-height:1.4;
}

/* Sparklines */
.margin-sparkline{
    margin-bottom:1.5rem;
}

.sparkline{
    width:100%;
    height:32px;
}

.sparkline-label{
    font-family:'Source Serif 4',Georgia,serif;
    font-size:0.7rem;
    color:var(--faded);
    font-style:italic;
}

/* Closing section */
.closing-domain{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:clamp(1rem,1.5vw,1.2rem);
    color:var(--iron);
    letter-spacing:0.04em;
}

.closing-year{
    font-family:'EB Garamond',Georgia,serif;
    font-style:italic;
    font-size:0.9rem;
    color:var(--faded);
    margin-top:0.5rem;
}

/* Reveal animations */
.reveal-section{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s cubic-bezier(0.25,0.1,0.25,1),transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
}

.reveal-section.shown{
    opacity:1;
    transform:translateY(0);
}

.reveal-margin{
    opacity:0;
    transform:translateX(15px);
    transition:opacity 0.6s ease 0.2s,transform 0.6s ease 0.2s;
}

.reveal-section.shown .reveal-margin{
    opacity:1;
    transform:translateX(0);
}

/* Responsive */
@media(max-width:900px){
    .columns{
        grid-template-columns:1fr;
    }
    .column-text{
        column-count:2;
    }
    .marginalia{
        border-left:none;
        border-top:1px solid var(--rule);
        padding-left:0;
        padding-top:1.5rem;
        margin-top:1.5rem;
    }
}

@media(max-width:600px){
    .column-text{
        column-count:1;
    }
    .top-bar-quote{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .reveal-section{opacity:1;transform:none;transition:none}
    .reveal-margin{opacity:1;transform:none;transition:none}
    .divider-draw line,.divider-draw path,.divider-draw polygon,.divider-draw ellipse,.divider-draw rect{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
    .divider-draw circle{opacity:1;transition:none}
    .top-bar{transition:none}
}