/* courthouse.stream — vaporwave civic dream */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

@property --grid-gap {
    syntax: '<length>';
    initial-value: 40px;
    inherits: false;
}

@property --soft-axis {
    syntax: '<number>';
    initial-value: 100;
    inherits: false;
}

:root{
    --lavender:#c8b6ff;
    --electric-rose:#ff6b9d;
    --powder-mint:#b8e0d2;
    --neon-verdict:#a0e7e5;
    --soft-peach:#ffd6a5;
    --courthouse-cream:#faf3e0;
    --deep-gavel:#2b2040;
    --deeper:#1e1635;
    --dusty-mauve:#b8a9c9;
    --white:#ffffff;
    --black:#000000;
    --grid-gap: 40px;
}

html{scroll-behavior:smooth;scroll-snap-type:y proximity}

body{
    background:radial-gradient(ellipse at center,var(--deep-gavel) 0%,var(--deeper) 100%);
    color:var(--courthouse-cream);
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:400;
    line-height:1.75;
    overflow-x:hidden;
    min-height:100vh;
}

/* SCROLL INDICATOR */
.scroll-indicator{
    position:fixed;
    right:0;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(180deg,var(--lavender) 0%,var(--powder-mint) 50%,var(--soft-peach) 100%);
    z-index:999;
    opacity:0.7;
    pointer-events:none;
}

.scroll-indicator::after{
    content:'';
    position:absolute;
    left:-2px;
    top:0;
    width:8px;
    height:60px;
    background:var(--electric-rose);
    box-shadow:0 0 20px var(--electric-rose);
    transform:translateY(var(--scroll-pos,0));
    transition:transform 0.1s linear;
    border-radius:4px;
}

/* SIDEBAR NAV */
.sidebar-nav{
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:48px;
    background:linear-gradient(180deg,rgba(43,32,64,0.85),rgba(30,22,53,0.85));
    backdrop-filter:blur(6px);
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    z-index:100;
    border-right:1px solid rgba(184,169,201,0.18);
    padding:2rem 0;
}

.nav-label{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:rotate(180deg);
    font-family:'Fraunces',serif;
    font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 14;
    font-size:0.7rem;
    color:var(--dusty-mauve);
    letter-spacing:0.18em;
    text-transform:uppercase;
    cursor:pointer;
    transition:color 0.5s ease,text-shadow 0.5s ease,max-height 0.5s ease,font-variation-settings 0.5s ease;
    max-height:120px;
    overflow:hidden;
    padding:0.5rem 0;
}

.nav-label:hover{
    color:var(--electric-rose);
    text-shadow:0 0 18px rgba(255,107,157,0.6);
    font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 18;
}

.nav-label.active{
    color:var(--electric-rose);
    text-shadow:0 0 24px rgba(255,107,157,0.85),0 0 8px rgba(160,231,229,0.4);
}

/* SECTIONS */
.section{
    position:relative;
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-rows:1fr 1fr;
    overflow:hidden;
    scroll-snap-align:start;
    margin-left:48px;
    padding:4vh 5vw;
}

.docket-stamp{
    position:absolute;
    top:24px;
    right:32px;
    font-family:'Azeret Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.18em;
    color:var(--dusty-mauve);
    text-transform:uppercase;
    opacity:0.6;
    z-index:5;
}

/* GRID OVERLAY */
.grid-overlay{
    position:absolute;
    inset:0;
    background-image:
        repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--grid-gap) - 1px),rgba(184,169,201,0.10) calc(var(--grid-gap) - 1px),rgba(184,169,201,0.10) var(--grid-gap)),
        repeating-linear-gradient(0deg,transparent 0,transparent calc(var(--grid-gap) - 1px),rgba(184,169,201,0.10) calc(var(--grid-gap) - 1px),rgba(184,169,201,0.10) var(--grid-gap));
    pointer-events:none;
    z-index:1;
    transition:--grid-gap 1.4s cubic-bezier(.4,.0,.2,1);
}

.grid-overlay-dense{
    background-image:
        repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--grid-gap) - 2px),rgba(255,107,157,0.15) calc(var(--grid-gap) - 2px),rgba(255,107,157,0.15) var(--grid-gap)),
        repeating-linear-gradient(0deg,transparent 0,transparent calc(var(--grid-gap) - 2px),rgba(255,107,157,0.15) calc(var(--grid-gap) - 2px),rgba(255,107,157,0.15) var(--grid-gap));
    animation:gridPulse 3s ease-in-out infinite;
}

.grid-overlay-fade{
    opacity:0.5;
    animation:gridFade 6s ease-in-out infinite;
}

@keyframes gridPulse{
    0%,100%{--grid-gap:40px}
    50%{--grid-gap:20px}
}

@keyframes gridFade{
    0%,100%{opacity:0.5;--grid-gap:40px}
    50%{opacity:0.15;--grid-gap:60px}
}

/* DOCKET DIVIDER */
.docket-divider{
    height:15vh;
    background:linear-gradient(90deg,var(--lavender) 0%,var(--powder-mint) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:48px;
    position:relative;
    overflow:hidden;
    border-top:1px solid rgba(200,182,255,0.3);
    border-bottom:1px solid rgba(184,224,210,0.3);
}

.docket-divider-warm{
    background:linear-gradient(90deg,var(--lavender) 0%,var(--powder-mint) 50%,var(--soft-peach) 100%);
}

.docket-divider::before,
.docket-divider::after{
    content:'';
    position:absolute;
    width:100%;
    height:1px;
    background:repeating-linear-gradient(90deg,rgba(43,32,64,0.25) 0,rgba(43,32,64,0.25) 12px,transparent 12px,transparent 24px);
}

.docket-divider::before{top:30%}
.docket-divider::after{bottom:30%}

.docket-text{
    font-family:'Azeret Mono',monospace;
    font-size:0.78rem;
    letter-spacing:0.2em;
    color:var(--deep-gavel);
    text-transform:uppercase;
    position:relative;
    z-index:2;
    padding:0.4rem 1.2rem;
    background:rgba(250,243,224,0.4);
    border-radius:2px;
}

/* LOBBY (HERO) */
.section-lobby{
    background:
        radial-gradient(ellipse at 30% 40%,rgba(200,182,255,0.18) 0%,transparent 60%),
        radial-gradient(ellipse at 70% 60%,rgba(255,107,157,0.10) 0%,transparent 55%),
        linear-gradient(135deg,var(--deep-gavel) 0%,var(--deeper) 100%);
    place-items:center;
}

.vintage-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 25% 35%,rgba(200,182,255,0.18) 0%,transparent 45%),
        radial-gradient(circle at 75% 65%,rgba(160,231,229,0.10) 0%,transparent 50%),
        linear-gradient(180deg,transparent 0%,rgba(255,214,165,0.04) 100%);
    z-index:0;
    mix-blend-mode:screen;
}

.column-line{
    position:absolute;
    top:0;
    bottom:0;
    width:2px;
    background:linear-gradient(180deg,transparent,var(--powder-mint) 20%,var(--powder-mint) 80%,transparent);
    opacity:0.35;
    z-index:2;
}
.column-left{left:38.2%}
.column-right{left:61.8%}

.hero-content{
    grid-column:1/-1;
    grid-row:1/-1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:3;
    text-align:center;
    padding:0 2rem;
}

.hero-title{
    font-family:'Fraunces',serif;
    font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144;
    font-weight:500;
    font-size:clamp(4rem,10vw,9rem);
    color:var(--lavender);
    text-shadow:
        0 0 40px rgba(255,107,157,0.45),
        0 0 90px rgba(200,182,255,0.3),
        0 0 140px rgba(160,231,229,0.15);
    letter-spacing:-0.01em;
    line-height:1.05;
    animation:heroMorph 12s ease-in-out infinite;
}

@keyframes heroMorph{
    0%,100%{font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144}
    25%{font-variation-settings:'SOFT' 50,'WONK' 0.5,'opsz' 100}
    50%{font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 72}
    75%{font-variation-settings:'SOFT' 50,'WONK' 0.5,'opsz' 100}
}

.hero-subtitle{
    margin-top:2.5rem;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(0.9rem,1.4vw,1.15rem);
    font-weight:300;
    color:var(--neon-verdict);
    letter-spacing:0.22em;
    text-transform:uppercase;
    opacity:0.85;
}

.scanline{
    position:absolute;
    left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(200,182,255,0.4),transparent);
    z-index:10;
    pointer-events:none;
    animation:scanMove 8s linear infinite;
}

@keyframes scanMove{
    0%{top:-2px}
    100%{top:100%}
}

/* GALLERY */
.section-gallery{
    background:linear-gradient(180deg,var(--deeper) 0%,var(--deep-gavel) 60%,var(--deeper) 100%);
}

.grid-item{
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:2rem;
    position:relative;
}

.grid-item-tl{grid-column:1/2;grid-row:1/2}
.grid-item-tr{grid-column:2/4;grid-row:1/2}
.grid-item-br{grid-column:2/4;grid-row:2/3}

.section-heading{
    font-family:'Fraunces',serif;
    font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 72;
    font-weight:500;
    font-size:clamp(2.5rem,6vw,5.5rem);
    color:var(--lavender);
    margin-bottom:1.5rem;
    line-height:1.05;
    letter-spacing:-0.01em;
    text-shadow:0 0 40px rgba(200,182,255,0.25);
}

.section-body{
    font-size:clamp(1rem,1.5vw,1.25rem);
    color:var(--courthouse-cream);
    opacity:0.78;
    line-height:1.85;
    max-width:560px;
    font-weight:300;
}

.vintage-photo{
    width:100%;
    height:100%;
    min-height:220px;
    border-radius:2px;
    position:relative;
    overflow:hidden;
    transition:filter 0.6s ease-out,transform 0.8s ease;
    filter:sepia(30%) saturate(140%) hue-rotate(260deg) brightness(1.1) contrast(0.9);
}

.vintage-photo::after{
    content:'';
    position:absolute;
    inset:0;
    background-color:var(--lavender);
    mix-blend-mode:screen;
    opacity:0.25;
    pointer-events:none;
}

.vintage-photo::before{
    content:'';
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(43,32,64,0.18) 2px,rgba(43,32,64,0.18) 3px);
    z-index:2;
    pointer-events:none;
}

.vintage-photo:hover{
    filter:sepia(30%) saturate(160%) hue-rotate(290deg) brightness(1.15) contrast(0.85);
}

.photo-1{
    background:
        linear-gradient(135deg,rgba(200,182,255,0.5),rgba(160,231,229,0.3)),
        linear-gradient(180deg,#3a2d55 0%,#5a4675 35%,#3a2d55 70%,#1e1635 100%);
}

.photo-2{
    background:
        linear-gradient(225deg,rgba(255,107,157,0.35),rgba(184,224,210,0.25)),
        linear-gradient(180deg,#4a3866 0%,#6a5285 40%,#3a2d55 100%);
}

.photo-3{
    background:
        radial-gradient(ellipse at center,rgba(255,214,165,0.3),transparent 70%),
        linear-gradient(180deg,#3a2d55 0%,#5a4675 50%,#1e1635 100%);
}

.court-seal{
    position:absolute;
    width:80px;
    height:80px;
    bottom:14px;
    right:14px;
    z-index:3;
    opacity:0.85;
    filter:drop-shadow(0 4px 12px rgba(43,32,64,0.5));
}

/* RECORD */
.section-record{
    background:
        radial-gradient(ellipse at center,rgba(255,107,157,0.05) 0%,transparent 70%),
        linear-gradient(180deg,var(--deeper) 0%,var(--deep-gavel) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
}

.record-content{
    z-index:2;
    text-align:center;
    padding:4rem 2rem;
    max-width:1100px;
    position:relative;
    grid-column:1/-1;
    grid-row:1/-1;
}

.record-heading{
    font-family:'Fraunces',serif;
    font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 96;
    font-weight:500;
    font-size:clamp(2.5rem,6vw,5.5rem);
    color:var(--electric-rose);
    margin-bottom:3rem;
    line-height:1.05;
    text-shadow:0 0 50px rgba(255,107,157,0.3);
}

.record-text{
    color:var(--courthouse-cream);
    margin:0 auto;
    max-width:850px;
}

.record-line{
    font-family:'Fraunces',serif;
    font-weight:300;
    line-height:1.4;
    margin:0.6em 0;
    opacity:0.92;
}

.record-line.line-a{
    font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 60;
    font-size:clamp(1.5rem,3.2vw,2.6rem);
    color:var(--lavender);
}
.record-line.line-b{
    font-variation-settings:'SOFT' 60,'WONK' 0.5,'opsz' 48;
    font-size:clamp(1.3rem,2.6vw,2.1rem);
    color:var(--powder-mint);
    font-style:italic;
}
.record-line.line-c{
    font-variation-settings:'SOFT' 30,'WONK' 0,'opsz' 36;
    font-size:clamp(1.1rem,2.2vw,1.8rem);
    color:var(--neon-verdict);
}
.record-line.line-d{
    font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 72;
    font-size:clamp(1.6rem,3.6vw,2.8rem);
    color:var(--soft-peach);
    margin-top:1.5em;
}

.golden-columns{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.golden-columns::before,
.golden-columns::after{
    content:'';
    position:absolute;
    width:2px;
    height:100%;
    background:linear-gradient(180deg,transparent,var(--powder-mint) 30%,var(--powder-mint) 70%,transparent);
    opacity:0.3;
    top:0;
}
.golden-columns::before{left:38.2%}
.golden-columns::after{left:61.8%}

/* VERDICT */
.section-verdict{
    background:
        radial-gradient(circle at center,rgba(200,182,255,0.06) 0%,transparent 60%),
        linear-gradient(180deg,var(--deep-gavel) 0%,var(--deeper) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4rem 2rem;
}

.verdict-stage{
    grid-column:1/-1;
    grid-row:1/-1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:3;
    width:100%;
    max-width:640px;
    margin:0 auto;
    position:relative;
}

.photo-3{
    width:100%;
    height:420px;
    border-radius:2px;
    position:relative;
    overflow:hidden;
    filter:sepia(25%) saturate(150%) hue-rotate(270deg) brightness(1.08) contrast(0.9);
}

.verdict-seal{
    width:110px;
    height:110px;
    bottom:24px;
    right:24px;
}

.verdict-text{
    margin-top:2rem;
    text-align:center;
    padding:1.5rem 2rem;
    border-top:1px solid rgba(200,182,255,0.2);
    border-bottom:1px solid rgba(184,224,210,0.2);
}

.verdict-text h3{
    font-family:'Fraunces',serif;
    font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 60;
    font-weight:500;
    font-size:clamp(1.6rem,3vw,2.4rem);
    color:var(--electric-rose);
    margin-bottom:0.6rem;
}

.verdict-text p{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(0.95rem,1.4vw,1.1rem);
    font-weight:300;
    color:var(--courthouse-cream);
    opacity:0.78;
    line-height:1.7;
    max-width:520px;
    margin:0 auto;
}

/* ADJOURNMENT */
.section-adjournment{
    background:
        radial-gradient(ellipse at 70% 70%,rgba(255,214,165,0.16) 0%,transparent 60%),
        linear-gradient(180deg,var(--deep-gavel) 0%,#3a2940 60%,#5a3a45 100%);
    display:flex;
    align-items:center;
    justify-content:center;
}

.closing-content{
    grid-column:1/-1;
    grid-row:1/-1;
    z-index:2;
    text-align:center;
    padding:2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.closing-title{
    font-family:'Fraunces',serif;
    font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 96;
    font-weight:500;
    font-size:clamp(2.5rem,6vw,5.5rem);
    color:var(--soft-peach);
    text-shadow:0 0 50px rgba(255,214,165,0.4),0 0 100px rgba(255,107,157,0.2);
    animation:heroMorph 14s ease-in-out infinite;
    margin-bottom:1.5rem;
    line-height:1.05;
}

.closing-subtitle{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(0.9rem,1.4vw,1.1rem);
    color:var(--neon-verdict);
    letter-spacing:0.25em;
    text-transform:uppercase;
    opacity:0.7;
    margin-bottom:2rem;
    font-weight:300;
}

.closing-meta{
    font-family:'Fraunces',serif;
    font-variation-settings:'SOFT' 60,'WONK' 0.5,'opsz' 24;
    font-style:italic;
    font-size:clamp(1rem,1.6vw,1.3rem);
    color:var(--dusty-mauve);
    opacity:0.75;
    line-height:1.7;
    max-width:600px;
}

/* REVEAL */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 1s ease,transform 1s ease;
}
.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

/* RESPONSIVE */
@media(max-width:768px){
    .section{
        grid-template-columns:1fr;
        grid-template-rows:auto;
        margin-left:40px;
        padding:6vh 1.2rem;
    }
    .sidebar-nav{width:40px;padding:1rem 0}
    .grid-item,
    .grid-item-tl,
    .grid-item-tr,
    .grid-item-br{
        grid-column:1!important;
        grid-row:auto!important;
        padding:1.5rem 0.5rem;
    }
    .docket-divider{margin-left:40px;height:12vh}
    .nav-label{font-size:0.55rem;letter-spacing:0.12em}
    .column-line{display:none}
    .photo-3{height:280px}
    .court-seal{width:60px;height:60px}
    .verdict-seal{width:80px;height:80px}
    .docket-stamp{font-size:0.6rem;top:14px;right:14px}
}