/* economic.wiki - Pixel-Art Economic Encyclopedia */

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

:root{
    --kiln:#1A1410;
    --soot:#2A2218;
    --linen:#E8DCC8;
    --sienna:#CC5500;
    --ember:#E87B35;
    --gold:#D4A017;
    --ash:#5A4E42;
    --forge:#0D0A07;
}

body{
    background:var(--kiln);
    color:var(--linen);
    font-family:'Recursive',sans-serif;
    font-weight:400;
    font-variation-settings:'MONO' 0.5,'CASL' 0;
    font-size:clamp(1rem,1.6vw,1.15rem);
    line-height:1.72;
    overflow-x:hidden;
    image-rendering:pixelated;
}

/* Pixel fonts - disable anti-aliasing */
.hero-title,.chapter-numeral,.chapter-heading,.scroll-label,.nav-dot{
    -webkit-font-smoothing:none;
    -moz-osx-font-smoothing:unset;
    text-rendering:optimizeSpeed;
}

/* Chapter nav dots */
.chapter-nav{
    position:fixed;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.nav-dot{
    width:8px;height:8px;
    border:1px solid var(--ash);
    background:transparent;
    cursor:pointer;
    padding:0;
    transition:background 0s;
}

.nav-dot.active{
    background:var(--sienna);
    border-color:var(--sienna);
}

/* Hero */
.hero-chapter{
    position:relative;
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

#particleCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    image-rendering:pixelated;
}

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

.hero-title{
    font-family:'Silkscreen',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,12vw,8rem);
    letter-spacing:0.04em;
    color:var(--sienna);
    line-height:1.1;
}

.hero-sub{
    font-family:'Recursive',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.2vw,1rem);
    color:var(--linen);
    opacity:0.6;
    margin-top:1.5rem;
}

.scroll-label{
    position:absolute;
    bottom:3rem;
    font-family:'Press Start 2P',monospace;
    font-size:0.65rem;
    color:var(--sienna);
    letter-spacing:0.1em;
    animation:blink 1.6s steps(2) infinite;
    z-index:2;
}

@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0}
}

/* Pixel dividers */
.pixel-divider{
    height:2px;
    position:relative;
    overflow:hidden;
    margin:2rem 0;
}

.divider-build{
    position:absolute;
    top:0;left:0;
    width:100%;height:2px;
    background:var(--ash);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.5s steps(40);
}

.divider-build::after{
    content:'';
    position:absolute;
    top:0;left:50%;
    width:2px;height:2px;
    background:var(--sienna);
    transform:translateX(-50%);
}

.divider-build.drawn{transform:scaleX(1)}

/* Chapter layout with margin art */
.chapter{
    position:relative;
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,8vh,80px) 0;
}

.chapter-layout{
    display:grid;
    grid-template-columns:1fr minmax(320px,720px) 1fr;
    gap:2rem;
    width:100%;
    max-width:1200px;
    padding:0 1rem;
}

.chapter-content{
    background:
        repeating-linear-gradient(0deg,transparent 0px,transparent 15px,rgba(90,78,66,0.05) 15px,rgba(90,78,66,0.05) 16px),
        repeating-linear-gradient(90deg,transparent 0px,transparent 15px,rgba(90,78,66,0.05) 15px,rgba(90,78,66,0.05) 16px);
    padding:clamp(24px,3vw,48px);
}

.margin-art{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Chapter numerals */
.chapter-numeral{
    font-family:'Silkscreen',sans-serif;
    font-weight:400;
    font-size:clamp(4rem,10vw,7rem);
    letter-spacing:0.04em;
    color:var(--sienna);
    display:block;
    margin-bottom:1rem;
}

.chapter-numeral.pulsed{
    animation:pulseAttention 0.3s steps(2);
}

@keyframes pulseAttention{
    0%{transform:scale(1);color:var(--sienna)}
    50%{transform:scale(1.08);color:var(--ember)}
    100%{transform:scale(1);color:var(--sienna)}
}

.chapter-heading{
    font-family:'Silkscreen',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.04em;
    color:var(--linen);
    margin-bottom:1.5rem;
}

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

/* Pixel-art icons (CSS box-shadow) */
.pixel-icon{
    width:1px;height:1px;
    transform:scale(4);
    image-rendering:pixelated;
}

/* Coins icon (simple 16x16 stack) */
.icon-coins{
    box-shadow:
        4px 2px var(--gold),5px 2px var(--gold),6px 2px var(--gold),7px 2px var(--gold),8px 2px var(--gold),
        3px 3px var(--gold),9px 3px var(--ash),
        3px 4px var(--gold),9px 4px var(--ash),
        4px 5px var(--gold),5px 5px var(--gold),6px 5px var(--gold),7px 5px var(--gold),8px 5px var(--gold),
        5px 7px var(--gold),6px 7px var(--gold),7px 7px var(--gold),8px 7px var(--gold),9px 7px var(--gold),
        4px 8px var(--gold),10px 8px var(--ash),
        4px 9px var(--gold),10px 9px var(--ash),
        5px 10px var(--gold),6px 10px var(--gold),7px 10px var(--gold),8px 10px var(--gold),9px 10px var(--gold);
}

/* Scale icon */
.icon-scale{
    box-shadow:
        7px 1px var(--ash),8px 1px var(--ash),
        7px 2px var(--ash),8px 2px var(--ash),
        7px 3px var(--ash),8px 3px var(--ash),
        3px 4px var(--ash),4px 4px var(--ash),5px 4px var(--ash),6px 4px var(--ash),7px 4px var(--ash),8px 4px var(--ash),9px 4px var(--ash),10px 4px var(--ash),11px 4px var(--ash),12px 4px var(--ash),
        3px 5px var(--sienna),4px 5px var(--sienna),11px 5px var(--sienna),12px 5px var(--sienna),
        2px 6px var(--sienna),5px 6px var(--sienna),10px 6px var(--sienna),13px 6px var(--sienna),
        2px 7px var(--sienna),3px 7px var(--sienna),4px 7px var(--sienna),5px 7px var(--sienna),10px 7px var(--sienna),11px 7px var(--sienna),12px 7px var(--sienna),13px 7px var(--sienna);
}

/* Handshake icon */
.icon-handshake{
    box-shadow:
        2px 5px var(--ash),3px 5px var(--ash),
        4px 4px var(--ash),5px 4px var(--ash),
        6px 5px var(--sienna),7px 5px var(--sienna),8px 5px var(--sienna),
        9px 4px var(--ash),10px 4px var(--ash),
        11px 5px var(--ash),12px 5px var(--ash),
        5px 6px var(--sienna),6px 6px var(--ash),7px 6px var(--ash),8px 6px var(--ash),9px 6px var(--sienna),
        6px 7px var(--ash),7px 7px var(--sienna),8px 7px var(--ash);
}

/* Globe icon */
.icon-globe{
    box-shadow:
        5px 1px var(--ash),6px 1px var(--ash),7px 1px var(--ash),8px 1px var(--ash),9px 1px var(--ash),
        3px 2px var(--ash),7px 2px var(--sienna),11px 2px var(--ash),
        2px 3px var(--ash),7px 3px var(--sienna),12px 3px var(--ash),
        2px 5px var(--ash),3px 5px var(--sienna),4px 5px var(--sienna),5px 5px var(--sienna),6px 5px var(--sienna),7px 5px var(--sienna),8px 5px var(--sienna),9px 5px var(--sienna),10px 5px var(--sienna),11px 5px var(--sienna),12px 5px var(--ash),
        2px 7px var(--ash),7px 7px var(--sienna),12px 7px var(--ash),
        3px 8px var(--ash),7px 8px var(--sienna),11px 8px var(--ash),
        5px 9px var(--ash),6px 9px var(--ash),7px 9px var(--ash),8px 9px var(--ash),9px 9px var(--ash);
}

/* Hourglass icon */
.icon-hourglass{
    box-shadow:
        4px 1px var(--ash),5px 1px var(--ash),6px 1px var(--ash),7px 1px var(--ash),8px 1px var(--ash),9px 1px var(--ash),10px 1px var(--ash),
        5px 2px var(--gold),6px 2px var(--gold),7px 2px var(--gold),8px 2px var(--gold),9px 2px var(--gold),
        6px 3px var(--gold),7px 3px var(--gold),8px 3px var(--gold),
        7px 4px var(--sienna),
        6px 5px var(--gold),7px 5px var(--gold),8px 5px var(--gold),
        5px 6px var(--gold),6px 6px var(--gold),7px 6px var(--gold),8px 6px var(--gold),9px 6px var(--gold),
        4px 7px var(--ash),5px 7px var(--ash),6px 7px var(--ash),7px 7px var(--ash),8px 7px var(--ash),9px 7px var(--ash),10px 7px var(--ash);
}

/* Factory icon */
.icon-factory{
    box-shadow:
        3px 3px var(--ash),4px 2px var(--ash),4px 3px var(--ash),
        7px 1px var(--ash),8px 2px var(--ash),8px 3px var(--ash),
        2px 4px var(--sienna),3px 4px var(--sienna),4px 4px var(--sienna),5px 4px var(--sienna),6px 4px var(--sienna),7px 4px var(--sienna),8px 4px var(--sienna),9px 4px var(--sienna),10px 4px var(--sienna),11px 4px var(--sienna),
        2px 5px var(--sienna),11px 5px var(--sienna),
        2px 6px var(--sienna),4px 6px var(--ash),5px 6px var(--ash),8px 6px var(--ash),9px 6px var(--ash),11px 6px var(--sienna),
        2px 7px var(--sienna),3px 7px var(--sienna),4px 7px var(--sienna),5px 7px var(--sienna),6px 7px var(--sienna),7px 7px var(--sienna),8px 7px var(--sienna),9px 7px var(--sienna),10px 7px var(--sienna),11px 7px var(--sienna);
}

/* Gear icon */
.icon-gear{
    box-shadow:
        6px 1px var(--ash),7px 1px var(--ash),8px 1px var(--ash),
        5px 2px var(--ash),9px 2px var(--ash),
        3px 3px var(--ash),4px 3px var(--ash),5px 3px var(--ash),9px 3px var(--ash),10px 3px var(--ash),11px 3px var(--ash),
        3px 5px var(--ash),6px 5px var(--sienna),7px 5px var(--sienna),8px 5px var(--sienna),11px 5px var(--ash),
        3px 7px var(--ash),4px 7px var(--ash),5px 7px var(--ash),9px 7px var(--ash),10px 7px var(--ash),11px 7px var(--ash),
        5px 8px var(--ash),9px 8px var(--ash),
        6px 9px var(--ash),7px 9px var(--ash),8px 9px var(--ash);
}

/* Chart icon */
.icon-chart{
    box-shadow:
        2px 7px var(--ash),3px 7px var(--ash),4px 7px var(--ash),5px 7px var(--ash),6px 7px var(--ash),7px 7px var(--ash),8px 7px var(--ash),9px 7px var(--ash),10px 7px var(--ash),11px 7px var(--ash),
        2px 6px var(--ash),
        4px 5px var(--sienna),4px 6px var(--sienna),
        6px 3px var(--sienna),6px 4px var(--sienna),6px 5px var(--sienna),6px 6px var(--sienna),
        8px 4px var(--ember),8px 5px var(--ember),8px 6px var(--ember),
        10px 1px var(--gold),10px 2px var(--gold),10px 3px var(--gold),10px 4px var(--gold),10px 5px var(--gold),10px 6px var(--gold);
}

/* Book icon */
.icon-book{
    box-shadow:
        3px 2px var(--ash),4px 2px var(--ash),5px 2px var(--ash),6px 2px var(--ash),7px 2px var(--sienna),8px 2px var(--ash),9px 2px var(--ash),10px 2px var(--ash),11px 2px var(--ash),
        3px 3px var(--ash),7px 3px var(--sienna),11px 3px var(--ash),
        3px 4px var(--ash),5px 4px var(--gold),6px 4px var(--gold),7px 4px var(--sienna),8px 4px var(--gold),9px 4px var(--gold),11px 4px var(--ash),
        3px 5px var(--ash),7px 5px var(--sienna),11px 5px var(--ash),
        3px 6px var(--ash),5px 6px var(--gold),6px 6px var(--gold),7px 6px var(--sienna),8px 6px var(--gold),9px 6px var(--gold),11px 6px var(--ash),
        3px 7px var(--ash),7px 7px var(--sienna),11px 7px var(--ash),
        3px 8px var(--ash),4px 8px var(--ash),5px 8px var(--ash),6px 8px var(--ash),7px 8px var(--sienna),8px 8px var(--ash),9px 8px var(--ash),10px 8px var(--ash),11px 8px var(--ash);
}

/* Ledger (closing) */
.ledger-chapter{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ledger-content{
    max-width:720px;
    text-align:center;
    padding:2rem;
}

.ledger-heading{margin-bottom:2rem}

.ledger-text{
    max-width:55ch;
    margin:0 auto 2rem;
}

.ledger-domain{
    font-family:'Silkscreen',sans-serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--sienna);
    letter-spacing:0.04em;
    margin-top:2rem;
}

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

    .margin-art{display:none}
    .chapter-nav{display:none}
}

@media(prefers-reduced-motion:reduce){
    .scroll-label{animation:none;opacity:1}
    .chapter-numeral.pulsed{animation:none}
    .divider-build{transform:scaleX(1);transition:none}
}