/* layer2.wiki -- Victorian burnt-orange encyclopedia */

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

:root{
    --sienna:#C46A3A;
    --copper:#A85C32;
    --amber:#D4943C;
    --parchment:#F5EDE0;
    --stone:#EDE2D0;
    --ivory:#FAF4EA;
    --marble-dark:#D4B896;
    --ink:#2E2218;
    --leather:#7A6852;
    --gold:#B08840;
    --circuit:#7A4420;
}

html{scroll-behavior:smooth;font-size:16px}

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

/* Navigation rail */
.nav-rail{
    position:fixed;
    top:2rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:3rem;
    z-index:100;
    padding:0.5rem 2rem;
    border-bottom:1px solid var(--marble-dark);
}

.nav-item{
    font-family:'Alegreya Sans',sans-serif;
    font-weight:500;
    font-size:0.8rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--leather);
    transition:color 0.3s ease;
    position:relative;
}

.nav-item.active{
    color:var(--sienna);
}

.nav-item.active::after{
    content:'';
    position:absolute;
    bottom:-0.5rem;
    left:0;right:0;
    height:2px;
    background:var(--sienna);
}

.nav-item:hover{color:var(--sienna)}

/* Marble background */
.marble-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 20% 30%,var(--marble-dark) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 60%,var(--marble-dark) 0%,transparent 40%),
        radial-gradient(ellipse at 50% 80%,var(--ivory) 0%,transparent 50%);
    opacity:0.05;
    pointer-events:none;
    z-index:0;
}

.marble-warm{
    background:
        radial-gradient(ellipse at 30% 40%,var(--amber) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 70%,var(--marble-dark) 0%,transparent 40%);
    opacity:0.08;
}

/* Sections */
.wiki-section{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:max(80px,10vh) max(48px,6vw);
}

/* Title Plate */
.title-plate-content{
    text-align:center;
    z-index:2;
    position:relative;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.title-plate-content.visible{
    opacity:1;
    transform:translateY(0);
}

.ornamental-border{
    position:relative;
    padding:4rem 3rem;
}

.border-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.draw-border{
    stroke-dasharray:1800;
    stroke-dashoffset:1800;
    transition:stroke-dashoffset 3s ease;
}

.visible .draw-border{
    stroke-dashoffset:0;
}

.title-plate-heading{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(3rem,8vw,8rem);
    color:var(--ink);
    letter-spacing:0.06em;
    line-height:1.1;
    font-variant:small-caps;
}

.title-plate-subtitle{
    font-family:'Lora',serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:var(--leather);
    margin-top:1rem;
}

/* Index Hall */
.index-section{
    background:var(--stone);
}

.index-content{
    max-width:min(800px,60%);
    width:100%;
    display:flex;
    flex-direction:column;
    gap:max(60px,6vh);
    z-index:2;
    position:relative;
}

.index-panel{
    background:var(--ivory);
    padding:max(32px,4vw);
    border:1px solid var(--marble-dark);
    position:relative;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.index-panel.visible{
    opacity:1;
    transform:translateY(0);
}

.panel-border{
    position:absolute;
    inset:4px;
    border:1px solid var(--sienna);
    opacity:0.3;
    pointer-events:none;
}

.panel-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(1.6rem,2.5vw,2.5rem);
    color:var(--ink);
    letter-spacing:0.02em;
    line-height:1.25;
    margin-bottom:0.75rem;
}

.panel-desc{
    font-family:'Lora',serif;
    font-weight:400;
    line-height:1.8;
    color:var(--ink);
}

.circuit-icon{
    width:40px;height:40px;
    margin-bottom:0.5rem;
}

.icon-draw{
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 1s ease;
}

.index-panel.visible .icon-draw{
    stroke-dashoffset:0;
}

/* Reading Room */
.reading-section{
    background:var(--parchment);
}

.reading-content{
    max-width:min(700px,60ch);
    width:100%;
    z-index:2;
    position:relative;
}

.reading-block{
    margin-bottom:max(40px,4vh);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.reading-block.visible{
    opacity:1;
    transform:translateY(0);
}

.reading-heading{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(1.6rem,2.5vw,2.5rem);
    color:var(--ink);
    margin-bottom:1rem;
    letter-spacing:0.02em;
}

.reading-text{
    font-family:'Lora',serif;
    font-weight:400;
    line-height:1.8;
}

.marble-divider{
    height:4px;
    background:linear-gradient(90deg,transparent,var(--marble-dark),transparent);
    margin:max(40px,4vh) 0;
    opacity:0.4;
}

.pull-quote{
    text-align:center;
    padding:2rem 0;
    border-top:1px solid var(--sienna);
    border-bottom:1px solid var(--sienna);
    margin:max(40px,4vh) 0;
    opacity:0;
    transform:translateY(15px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.pull-quote.visible{
    opacity:1;
    transform:translateY(0);
}

.quote-text{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.4rem,2.5vw,2.2rem);
    color:var(--sienna);
    line-height:1.4;
}

/* Colophon */
.colophon-section{
    background:var(--stone);
}

.colophon-content{
    text-align:center;
    z-index:2;
    position:relative;
    max-width:min(500px,40%);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.colophon-content.visible{
    opacity:1;
    transform:translateY(0);
}

.medallion-svg{
    width:120px;
    height:120px;
    margin:0 auto 2rem;
    display:block;
}

.colophon-text{
    font-family:'Lora',serif;
    font-weight:400;
    font-style:italic;
    line-height:1.8;
    color:var(--leather);
    margin-bottom:1.5rem;
}

.colophon-domain{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--ink);
    letter-spacing:0.04em;
    font-variant:small-caps;
}

/* Responsive */
@media(max-width:768px){
    .nav-rail{gap:1.5rem;padding:0.5rem 1rem}
    .nav-item{font-size:0.7rem;letter-spacing:0.04em}
    .index-content{max-width:100%}
    .colophon-content{max-width:90%}
    .ornamental-border{padding:2rem 1rem}
    .wiki-section{padding:max(60px,8vh) 2rem}
}

@media(prefers-reduced-motion:reduce){
    .title-plate-content,.index-panel,.reading-block,.pull-quote,.colophon-content{
        opacity:1;transform:none;transition:none;
    }
    .draw-border,.icon-draw{stroke-dashoffset:0;transition:none}
}