/* ethica.dev - Neoclassical Brutalism / Stone Tribunal */
/* Palette: Limestone #F2EDE4 | Obsidian #1A1714 | Oxblood #7A1F1F | Umber Shadow #6B5B4E | Parchment Gold #C4A556 | Basalt Dark #2C2824 | Ash Gray #A39E96 */

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

:root{
    --limestone:#F2EDE4;
    --obsidian:#1A1714;
    --oxblood:#7A1F1F;
    --umber:#6B5B4E;
    --gold:#C4A556;
    --basalt:#2C2824;
    --ash:#A39E96;
    --ease-decel:cubic-bezier(0.16,1,0.3,1);
}

html{scroll-behavior:smooth}

body{
    background-color:var(--limestone);
    color:var(--obsidian);
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.8vw,1.25rem);
    line-height:1.7;
    letter-spacing:0.005em;
    overflow-x:hidden;
    position:relative;
}

/* Navigation Glyph */
.nav-glyph{
    position:fixed;
    top:1.5rem;
    left:1.5rem;
    z-index:100;
    background:none;
    border:none;
    cursor:pointer;
    padding:0.5rem;
    line-height:0;
}

/* Navigation Panel */
.nav-panel{
    position:fixed;
    top:0;
    left:0;
    width:240px;
    height:100vh;
    background:var(--basalt);
    z-index:99;
    transform:translateX(-100%);
    transition:transform 600ms var(--ease-decel);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:2rem 2.5rem;
    gap:2rem;
}

.nav-panel.open{transform:translateX(0)}

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(26,23,20,0.3);
    z-index:98;
    opacity:0;
    pointer-events:none;
    transition:opacity 600ms var(--ease-decel);
}

.nav-overlay.open{opacity:1;pointer-events:auto}

.nav-entry{
    font-family:'IM Fell English',serif;
    font-size:1.5rem;
    color:var(--limestone);
    text-decoration:none;
    letter-spacing:0.1em;
    font-variant:small-caps;
    transition:color 600ms var(--ease-decel);
}

.nav-entry:hover{color:var(--gold)}

/* Vertical Rule */
.vertical-rule{
    position:fixed;
    left:calc(100% / 12 * 3);
    top:0;
    width:1px;
    height:100%;
    background:var(--umber);
    z-index:1;
    pointer-events:none;
}

.rule-mark{
    position:absolute;
    left:-4px;
    width:9px;
    height:1px;
    background:var(--gold);
}

/* Marginalia */
.marginalia{
    position:fixed;
    right:5vw;
    top:0;
    width:20vw;
    height:100%;
    z-index:1;
    pointer-events:none;
}

.margin-word{
    position:absolute;
    right:0;
    font-family:'IM Fell English',serif;
    font-style:italic;
    font-size:clamp(0.875rem,1.5vw,1.125rem);
    color:var(--umber);
    opacity:0.12;
    letter-spacing:0.15em;
    font-variant:small-caps;
}

/* Stele Base */
.stele{
    position:relative;
    min-height:90vh;
    max-width:680px;
    margin-left:calc(100% / 12 * 3 + 2rem);
    padding:10vh 2rem;
    z-index:2;
}

.stele + .stele{margin-top:40vh}

.stele-content{max-width:580px}

/* Fade-up animation */
.fade-up{
    opacity:0;
    transform:translateY(8px);
    transition:opacity 2.5s var(--ease-decel),transform 2.5s var(--ease-decel);
}

.fade-up.visible{
    opacity:1;
    transform:translateY(0);
}

/* Stele I: The Inscription */
.stele-one{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100vh;
    position:relative;
}

.hero-scale{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    opacity:1;
}

.hero-title{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(3.5rem,10vw,8rem);
    font-weight:700;
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--obsidian);
    margin-bottom:1.5rem;
}

.hero-epigraph{
    font-family:'IM Fell English',serif;
    font-style:italic;
    font-size:clamp(0.875rem,1.5vw,1.125rem);
    color:var(--umber);
    max-width:420px;
}

/* Section Headings */
.section-heading{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(2rem,5vw,4.5rem);
    font-weight:700;
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--obsidian);
    margin-bottom:2rem;
}

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

/* Stele III: Inverted */
.stele-three{
    background:var(--basalt);
    max-width:none;
    margin-left:0;
    padding-left:calc(100% / 12 * 3 + 2rem);
    padding-right:4rem;
    clip-path:polygon(0 2%,100% 0,100% 98%,0 100%);
}

.inverted{color:var(--limestone)}
.inverted .section-heading{color:var(--limestone)}

.pull-quote{
    border-left:4px solid var(--gold);
    padding-left:1.5rem;
    margin:2rem 0;
    max-width:500px;
}

.pull-quote p{
    font-family:'IM Fell English',serif;
    font-style:italic;
    font-size:clamp(0.875rem,1.5vw,1.125rem);
    color:var(--limestone);
    line-height:1.6;
}

/* Diagrams */
.diagram{
    position:absolute;
    right:-30vw;
    top:50%;
    transform:translateY(-50%);
}

.diagram-label{
    font-family:'Source Sans 3',sans-serif;
    font-size:8px;
    fill:var(--umber);
    font-variant:small-caps;
    letter-spacing:0.1em;
}

.draw-path{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 3s var(--ease-decel);
}

.draw-path.visible{stroke-dashoffset:0}
.draw-path.delay-0{transition-delay:0s}
.draw-path.delay-1{transition-delay:0.5s}
.draw-path.delay-2{transition-delay:1s}
.draw-path.delay-3{transition-delay:1.5s}

.diagram-circles .draw-path{
    stroke-dasharray:800;
    stroke-dashoffset:800;
    transition-duration:4s;
}

.tree-line{
    stroke-dasharray:200;
    stroke-dashoffset:200;
}

.tree-line.td-1{transition-delay:0.5s}
.tree-line.td-2{transition-delay:1s}

.tree-node{opacity:0;transition:opacity 1s var(--ease-decel)}
.tree-node.visible{opacity:1}

/* Stele III diagram positioned differently since inverted */
.stele-three .diagram{
    right:5vw;
}

/* Stele IV */
.framework-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:2rem;
}

.framework-item{
    display:flex;
    gap:1rem;
    align-items:flex-start;
}

.numeral{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:1.1rem;
    color:var(--oxblood);
    min-width:2rem;
    padding-top:0.15rem;
}

.framework-item strong{
    color:var(--oxblood);
    font-weight:600;
}

/* Stele V */
.stele-five{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    max-width:none;
    margin-left:0;
    text-align:center;
}

.final-question{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(2rem,6vw,4rem);
    font-weight:700;
    color:var(--obsidian);
    max-width:800px;
    line-height:1.2;
    margin-bottom:3rem;
}

.rocking-scale{
    animation:rockScale 6s ease-in-out infinite;
}

@keyframes rockScale{
    0%,100%{transform:rotate(-1.5deg)}
    50%{transform:rotate(1.5deg)}
}

.closing-void{height:50vh}

/* Incised Lines */
.incised-lines{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:2rem 0;
    position:relative;
    z-index:2;
}

.chisel-line{
    display:block;
    width:60px;
    height:0;
    border-top:0.5px solid var(--umber);
    opacity:0.4;
}

.chisel-line:nth-child(1){transform:rotate(var(--r1,0deg))}
.chisel-line:nth-child(2){transform:rotate(var(--r2,0deg))}
.chisel-line:nth-child(3){transform:rotate(var(--r3,0deg))}
.chisel-line:nth-child(4){transform:rotate(var(--r4,0deg))}
.chisel-line:nth-child(5){transform:rotate(var(--r5,0deg))}

/* Links */
a{color:var(--oxblood);text-decoration:none;transition:color 600ms var(--ease-decel)}
a:hover{color:var(--gold)}

/* Responsive */
@media(max-width:768px){
    .stele{
        margin-left:1.5rem;
        padding:6vh 1.5rem;
        max-width:none;
    }
    .stele-three{
        padding-left:1.5rem;
        padding-right:1.5rem;
    }
    .vertical-rule{left:1rem}
    .marginalia{display:none}
    .diagram{display:none}
    .hero-title{font-size:clamp(2.5rem,8vw,5rem)}
}

@media(prefers-reduced-motion:reduce){
    .fade-up{opacity:1;transform:none;transition:none}
    .draw-path{stroke-dashoffset:0;transition:none}
    .rocking-scale{animation:none}
}