/* courthouse.app - Civic Monumentalism */

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

:root{
    --slate:#1B2838;
    --limestone:#F0EEE9;
    --entablature:#8B9DAF;
    --ink:#1A1A1E;
    --seal-blue:#2B5C8A;
    --docket-red:#8B3A3A;
    --terrazzo:#D8D2C8;
    --patina:#3D7A6A;
}

body{
    background:var(--limestone);
    color:var(--ink);
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

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

.seal-mark{
    width:80px;height:80px;
    margin-bottom:2rem;
    opacity:0;
    animation:sealFade 1s ease-out 1.2s forwards;
}

@keyframes sealFade{to{opacity:0.6}}

.seal-svg{width:100%;height:auto}

.hero-title{
    font-family:'DM Serif Display',serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--ink);
    text-align:center;
}

.hero-epigraph{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:1.25rem;
    line-height:1.6;
    color:var(--entablature);
    margin-top:1rem;
    text-align:center;
}

.hero-rule{
    position:absolute;
    bottom:0;
    left:0;right:0;
    height:1px;
    overflow:hidden;
}

.hero-rule-line{
    width:100%;
    height:1px;
    background:var(--entablature);
    transform:scaleX(0);
    transform-origin:left;
    animation:ruleDraw 3s cubic-bezier(0.25,0,0.1,1) 0.5s forwards;
}

@keyframes ruleDraw{to{transform:scaleX(1)}}

/* Court layout */
.court-layout{
    display:grid;
    grid-template-columns:80px 1fr minmax(140px,20%);
    min-height:100vh;
}

/* Stylobate */
.stylobate{
    background:var(--slate);
    background-image:repeating-linear-gradient(90deg,#1B2838 0,#1B2838 2px,#1F2D40 2px,#1F2D40 4px);
    padding:clamp(24px,4vh,40px) 12px;
    display:flex;
    flex-direction:column;
    gap:16px;
    position:sticky;
    top:0;
    height:100vh;
    opacity:0;
    transform:translateX(-80px);
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

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

.nav-label{
    font-weight:600;
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--entablature);
    margin-bottom:8px;
}

.nav-item{
    font-size:0.75rem;
    font-weight:400;
    color:var(--entablature);
    text-decoration:none;
    padding:6px 0;
    border-left:2px solid transparent;
    padding-left:8px;
    transition:color 0.3s ease,border-color 0.3s ease;
}

.nav-item:hover{color:var(--patina);border-left-color:var(--patina)}
.nav-item.active{color:#fff;border-left-color:var(--seal-blue)}

/* Nave */
.nave{
    padding:0 clamp(24px,4vw,60px);
}

.session{
    min-height:100vh;
    padding:120px 0;
}

.session-content{
    max-width:65ch;
}

.session-title{
    font-family:'DM Serif Display',serif;
    font-weight:400;
    font-size:clamp(1.8rem,3.5vw,3.2rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--ink);
    margin-bottom:40px;
}

/* Entablature double lines */
.entablature-double{
    width:100%;
    height:4px;
    border-top:1px solid var(--entablature);
    border-bottom:1px solid var(--entablature);
    opacity:0.6;
    margin:40px 0;
}

/* Proceedings */
.proceeding{
    display:flex;
    gap:16px;
    margin-bottom:24px;
}

.para-num{
    font-weight:600;
    color:var(--entablature);
    flex-shrink:0;
    min-width:24px;
}

/* Exhibits */
.exhibit{
    margin-bottom:40px;
}

.exhibit-label{
    font-family:'DM Serif Display',serif;
    font-weight:400;
    font-size:clamp(1.4rem,2.5vw,2rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--ink);
    margin-bottom:16px;
}

/* Deliberation */
.session-deliberation{
    display:flex;
    align-items:center;
    justify-content:center;
}

.deliberation-content{
    max-width:50ch;
    text-align:center;
    padding:15vh 0;
}

.deliberation-text{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:1.25rem;
    line-height:1.6;
    color:var(--ink);
}

/* Order button */
.order-btn{
    display:inline-block;
    margin-top:40px;
    padding:12px 32px;
    border:1px solid var(--slate);
    background:transparent;
    color:var(--ink);
    font-family:'Source Sans 3',sans-serif;
    font-weight:600;
    font-size:0.95rem;
    letter-spacing:0.04em;
    text-decoration:none;
    transition:background 0.3s ease,color 0.3s ease;
}

.order-btn:hover{
    background:var(--patina);
    color:#fff;
    border-color:var(--patina);
}

/* Mountain silhouette */
.mountain-silhouette{
    margin-top:120px;
    width:100%;
}

.mountain-svg{
    width:100%;
    height:80px;
    display:block;
}

/* Epistyle */
.epistyle{
    background:var(--terrazzo);
    padding:clamp(24px,4vh,40px) clamp(12px,1.5vw,20px);
    position:relative;
    overflow:hidden;
    opacity:0;
    transform:translateX(80px);
    transition:opacity 0.5s ease-out 0.15s,transform 0.5s ease-out 0.15s;
}

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

.terrazzo-noise{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    opacity:0.03;
    pointer-events:none;
}

.docket-entry{
    font-family:'Source Sans 3',sans-serif;
    font-size:0.75rem;
    font-weight:600;
    color:var(--entablature);
    text-align:right;
    margin-bottom:8px;
}

/* Reveal */
.reveal-fade{
    opacity:0;
    transition:opacity 0.8s ease-out;
}

.reveal-fade.visible{
    opacity:1;
}

/* Link underline draw */
a:not(.nav-item):not(.order-btn){
    color:var(--seal-blue);
    text-decoration:none;
    background-image:linear-gradient(var(--seal-blue),var(--seal-blue));
    background-size:0% 1px;
    background-repeat:no-repeat;
    background-position:left bottom;
    transition:background-size 0.3s ease-out;
}

a:not(.nav-item):not(.order-btn):hover{
    background-size:100% 1px;
}

/* Footer */
.court-footer{
    background:var(--slate);
    padding:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.footer-seal{
    width:48px;height:48px;
    opacity:0.4;
}

.footer-text{
    font-size:0.8rem;
    color:var(--entablature);
}

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

    .stylobate{
        position:relative;
        height:auto;
        flex-direction:row;
        flex-wrap:wrap;
        padding:16px;
        transform:translateX(0);
        opacity:1;
    }

    .epistyle{
        display:none;
    }

    .session{
        padding:60px 0;
        min-height:auto;
    }

    .nave{
        padding:0 clamp(16px,4vw,32px);
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-rule-line{animation:none;transform:scaleX(1)}
    .seal-mark{animation:none;opacity:0.6}
    .stylobate,.epistyle{opacity:1;transform:none;transition:none}
    .reveal-fade{opacity:1;transition:none}
}