/* economic.day - Bauhaus Scandinavian Economics */

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

:root{
    --parchment:#F4F1EB;
    --midnight:#0A1628;
    --graphite:#2C2C2C;
    --slate:#1A2744;
    --blue:#3A7CA5;
    --copper:#8B6F4E;
    --celadon:#7A9E8E;
    --vermillion:#C4533A;
}

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

/* Hero */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--parchment);
    overflow:hidden;
}

.hero-content{
    text-align:center;
    position:relative;
    z-index:2;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5.5rem);
    letter-spacing:-0.02em;
    line-height:1.1;
    color:var(--slate);
    opacity:0;
    animation:fadeUp 1s ease 0.5s forwards;
}

.hero-aphorism{
    font-family:'Newsreader',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--graphite);
    margin-top:2rem;
    max-width:50ch;
    margin-left:auto;
    margin-right:auto;
    opacity:0;
    animation:fadeUp 1s ease 1.2s forwards;
}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}

/* Equilibrium Cross */
.eq-cross-large{
    position:absolute;
    width:40vw;height:40vw;
    max-width:500px;max-height:500px;
    display:flex;align-items:center;justify-content:center;
    animation:crossRotate 720s linear infinite;
    z-index:1;
}

@keyframes crossRotate{to{transform:rotate(360deg)}}

.eq-cross-large .cross-h{
    position:absolute;
    width:100%;
    height:1px;
    background:var(--blue);
    opacity:0.12;
}

.eq-cross-large .cross-v{
    position:absolute;
    width:1px;
    height:61.8%;
    background:var(--blue);
    opacity:0.12;
}

.eq-cross-small{
    position:relative;
    width:24px;height:24px;
    margin:2rem 0;
    display:flex;align-items:center;justify-content:center;
}

.eq-cross-small .cross-h{
    position:absolute;
    width:24px;height:1px;
    background:var(--blue);
    opacity:0.4;
}

.eq-cross-small .cross-v{
    position:absolute;
    width:1px;height:14.8px;
    background:var(--blue);
    opacity:0.4;
}

/* Split layout */
.split-layout{
    display:grid;
    grid-template-columns:38.2% 61.8%;
    min-height:100vh;
}

/* Sidebar */
.sidebar{
    background:var(--midnight);
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
    opacity:0;
    transform:translateX(-30px);
    transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.sidebar.visible{
    opacity:1;
    transform:translateX(0);
}

.sidebar-viz{
    position:relative;
    width:100%;
    height:100%;
    padding:2rem;
}

.wave-stack{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.sine-wave{
    opacity:0.2;
    animation:wavePhase 50s ease-in-out infinite;
}

.sw2{animation-duration:42s;animation-direction:reverse}
.sw3{animation-duration:55s}
.sw4{animation-duration:38s;animation-direction:reverse}
.sw5{animation-duration:60s}

@keyframes wavePhase{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(10px)}
}

/* Geometric abstractions */
.geo-circle{
    position:absolute;
    bottom:20%;left:20%;
    width:80px;height:80px;
    border:1px solid var(--blue);
    border-radius:50%;
    opacity:0.15;
    animation:breathe 30s ease-in-out infinite;
}

@keyframes breathe{
    0%,100%{transform:scale(1);opacity:0.15}
    50%{transform:scale(1.2);opacity:0.08}
}

.geo-bar{
    position:absolute;
    height:2px;
    background:var(--celadon);
    opacity:0.15;
    animation:barGrow 40s ease-in-out infinite;
}

.bar-1{width:60%;top:30%;left:10%}
.bar-2{width:40%;top:50%;left:20%;animation-delay:-15s}
.bar-3{width:50%;top:70%;left:15%;animation-delay:-30s}

@keyframes barGrow{
    0%,100%{transform:scaleX(1)}
    50%{transform:scaleX(0.6)}
}

/* Content area */
.content-area{
    padding:clamp(4rem,8vh,8rem) clamp(2rem,5vw,4rem);
    max-width:100%;
}

.chapter{
    max-width:clamp(320px,55ch,680px);
    margin-bottom:clamp(4rem,8vh,8rem);
}

.chapter-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.4rem,2.8vw,2.2rem);
    letter-spacing:-0.02em;
    line-height:1.3;
    color:var(--slate);
    margin-bottom:1.5rem;
}

.body-text{
    margin-bottom:1rem;
}

/* Bento grid */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(0.5rem,1.5vw,1.5rem);
    margin-top:2rem;
}

.bento-2x2{
    grid-template-columns:1fr 1fr;
}

.bento-cell{
    aspect-ratio:1;
    border:1px solid rgba(58,124,165,0.12);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:1rem;
    text-align:center;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(58,124,165,0.04) 23px,rgba(58,124,165,0.04) 24px);
    opacity:0;
    transition:opacity 0.4s ease,border-color 0.4s ease;
}

.bento-cell.shown{opacity:1}

.data-fig{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.04em;
    color:var(--blue);
    font-feature-settings:"tnum";
    display:block;
    margin-bottom:0.5rem;
}

.data-label{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:0.75rem;
    letter-spacing:0.02em;
    color:var(--graphite);
    opacity:0.6;
}

/* Pullquote */
.pullquote{
    margin:2rem 0;
    padding-left:1.5rem;
    border-left:2px solid var(--copper);
}

.pullquote p{
    font-family:'Newsreader',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.05rem,1.4vw,1.2rem);
    line-height:1.6;
    color:var(--graphite);
}

.pullquote-cite{
    display:block;
    margin-top:0.75rem;
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.8rem;
    font-style:normal;
    color:var(--copper);
    letter-spacing:0.04em;
}

/* Fade reveal */
.fade-reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

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

/* Close section */
.close{
    position:relative;
    min-height:80vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--parchment);
    overflow:hidden;
}

.close-domain{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.85rem,1.1vw,1rem);
    letter-spacing:0.04em;
    color:var(--graphite);
    position:relative;
    z-index:2;
}

.close-date{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.75rem,0.9vw,0.85rem);
    letter-spacing:0.04em;
    color:var(--blue);
    margin-top:0.5rem;
    position:relative;
    z-index:2;
}

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

    .sidebar{
        position:static;
        height:auto;
        opacity:1;
        transform:none;
    }

    .sidebar-viz{display:none}

    .content-area{
        padding:2rem clamp(1rem,5vw,3rem);
    }

    .bento-grid{grid-template-columns:1fr}
    .bento-2x2{grid-template-columns:1fr}
    .bento-cell{aspect-ratio:auto;padding:1.5rem}

    .eq-cross-large{width:60vw;height:60vw}
}

@media(prefers-reduced-motion:reduce){
    .hero-title,.hero-aphorism{animation:none;opacity:1;transform:none}
    .eq-cross-large{animation:none}
    .sine-wave{animation:none}
    .geo-circle{animation:none}
    .geo-bar{animation:none}
    .fade-reveal{opacity:1;transform:none;transition:none}
    .sidebar{opacity:1;transform:none;transition:none}
    .bento-cell{opacity:1;transition:none}
}