/* =============================================
   judge.club — Art-Deco Judicial Lodge
   ============================================= */

:root {
    --walnut: #1a1209;
    --near-black: #0d0b08;
    --gold: #c9a84c;
    --emerald: #1a4a3a;
    --parchment: #e8dcc8;
    --tarnished: #8a7a5a;
    --oxblood: #5a1a1a;
    --oxblood-light: #7a2a2a;
    --lamplight: #d4a24a;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--near-black);
    color: var(--parchment);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.85;
    overflow-x: hidden;
}

/* ---- Section base ---- */
.section {
    position: relative;
    width: 100%;
}

/* ---- Section ornaments ---- */
.section-ornament {
    text-align: center;
    padding: 80px 20px 40px;
}

.section-heading {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 60px);
    color: var(--gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 20px 0;
}

/* ---- Sunburst Fan ---- */
.sunburst-fan {
    width: 120px;
    height: 60px;
    margin: 0 auto;
    background: conic-gradient(
        from 180deg at 50% 100%,
        transparent 0deg,
        var(--gold) 2deg,
        transparent 4deg,
        transparent 10deg,
        var(--gold) 12deg,
        transparent 14deg,
        transparent 20deg,
        var(--gold) 22deg,
        transparent 24deg,
        transparent 30deg,
        var(--gold) 32deg,
        transparent 34deg,
        transparent 40deg,
        var(--gold) 42deg,
        transparent 44deg,
        transparent 50deg,
        var(--gold) 52deg,
        transparent 54deg,
        transparent 60deg,
        var(--gold) 62deg,
        transparent 64deg,
        transparent 70deg,
        var(--gold) 72deg,
        transparent 74deg,
        transparent 80deg,
        var(--gold) 82deg,
        transparent 84deg,
        transparent 86deg,
        var(--gold) 88deg,
        transparent 90deg,
        transparent 96deg,
        var(--gold) 98deg,
        transparent 100deg,
        transparent 106deg,
        var(--gold) 108deg,
        transparent 110deg,
        transparent 116deg,
        var(--gold) 118deg,
        transparent 120deg,
        transparent 126deg,
        var(--gold) 128deg,
        transparent 130deg,
        transparent 136deg,
        var(--gold) 138deg,
        transparent 140deg,
        transparent 146deg,
        var(--gold) 148deg,
        transparent 150deg,
        transparent 156deg,
        var(--gold) 158deg,
        transparent 160deg,
        transparent 166deg,
        var(--gold) 168deg,
        transparent 170deg,
        transparent 176deg,
        var(--gold) 178deg,
        transparent 180deg
    );
    opacity: 0.7;
    border-radius: 120px 120px 0 0;
    overflow: hidden;
}

.sunburst-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vw;
    height: 40vw;
    transform: translate(-50%, -60%);
    background: conic-gradient(
        from 180deg at 50% 100%,
        transparent 0deg,
        rgba(201,168,76,0.05) 5deg,
        transparent 10deg,
        transparent 20deg,
        rgba(201,168,76,0.05) 25deg,
        transparent 30deg,
        transparent 40deg,
        rgba(201,168,76,0.05) 45deg,
        transparent 50deg,
        transparent 60deg,
        rgba(201,168,76,0.05) 65deg,
        transparent 70deg,
        transparent 80deg,
        rgba(201,168,76,0.05) 85deg,
        transparent 90deg,
        transparent 100deg,
        rgba(201,168,76,0.05) 105deg,
        transparent 110deg,
        transparent 120deg,
        rgba(201,168,76,0.05) 125deg,
        transparent 130deg,
        transparent 140deg,
        rgba(201,168,76,0.05) 145deg,
        transparent 150deg,
        transparent 160deg,
        rgba(201,168,76,0.05) 165deg,
        transparent 170deg,
        transparent 175deg,
        rgba(201,168,76,0.05) 178deg,
        transparent 180deg
    );
    border-radius: 80vw 80vw 0 0;
    pointer-events: none;
}

/* ---- Brass Rule ---- */
.brass-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    height: 12px;
}

.brass-rule .line {
    height: 2px;
    background: var(--gold);
    flex: 1;
    transform: scaleX(0);
    transition: transform 0.8s ease-in-out;
}

.brass-rule.visible .line {
    transform: scaleX(1);
}

.brass-rule .diamond {
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg) scale(0);
    transition: transform 0.4s ease-out;
    flex-shrink: 0;
}

.brass-rule.visible .diamond {
    transform: rotate(45deg) scale(1);
}

.brass-rule.visible .diamond.left {
    transition-delay: 0s;
}

.brass-rule.visible .diamond.right {
    transition-delay: 0.7s;
}

/* =============================================
   1. THE VESTIBULE
   ============================================= */
#vestibule {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--near-black);
    transition: background-color 2s ease;
    overflow: hidden;
}

#vestibule.lit {
    background: var(--walnut);
}

.vestibule-content {
    text-align: center;
    z-index: 1;
}

#hero-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(72px, 18vw, 220px);
    color: var(--gold);
    letter-spacing: 0.12em;
    line-height: 1;
    margin-bottom: 20px;
}

#hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--i) * 200ms + 1s);
}

#hero-title.reveal .letter {
    opacity: 1;
    transform: scale(1);
}

#hero-rule {
    max-width: 300px;
}

#club-text {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 400;
    font-size: clamp(20px, 3vw, 48px);
    color: var(--gold);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.8s ease;
    margin-top: 16px;
}

#club-text.reveal {
    opacity: 1;
}

.scroll-chevron {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: chevronPulse 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes chevronPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* =============================================
   2. THE MEMBERS' GALLERY
   ============================================= */
#gallery {
    min-height: 150vh;
    background: var(--near-black);
    padding-bottom: 100px;
}

.honeycomb-grid {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.hex-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: -30px;
}

.hex-row.offset {
    margin-left: 106px;
}

.hexagon {
    width: 200px;
    height: 230px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
    cursor: pointer;
    transition: transform 0.5s ease;
    opacity: 0;
    transform: scale(0.8);
}

.hexagon.visible {
    opacity: 1;
    transform: scale(1);
}

.hexagon:hover {
    transform: scale(1) rotate(30deg);
}

.hex-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.hex-front,
.hex-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
    padding: 30px 20px;
}

.hex-front {
    background: var(--near-black);
    border: 4px solid var(--gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex-back {
    background: var(--emerald);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0;
}

.hexagon:hover .hex-front {
    opacity: 0;
}

.hexagon:hover .hex-back {
    opacity: 1;
}

.hex-back p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--parchment);
    text-align: center;
}

.hex-pattern {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    opacity: 0.4;
}

.hex-pattern.retributive {
    background: repeating-linear-gradient(0deg, var(--gold) 0px, var(--gold) 2px, transparent 2px, transparent 8px);
}

.hex-pattern.restorative {
    background: radial-gradient(circle, var(--emerald) 20%, transparent 21%, transparent 40%, var(--emerald) 41%, var(--emerald) 42%, transparent 43%);
}

.hex-pattern.distributive {
    background: repeating-linear-gradient(45deg, var(--gold) 0px, var(--gold) 2px, transparent 2px, transparent 10px);
}

.hex-pattern.procedural {
    background: repeating-linear-gradient(90deg, var(--tarnished) 0px, var(--tarnished) 2px, transparent 2px, transparent 12px),
                repeating-linear-gradient(0deg, var(--tarnished) 0px, var(--tarnished) 2px, transparent 2px, transparent 12px);
}

.hex-pattern.corrective {
    background: conic-gradient(var(--gold) 0deg, transparent 30deg, transparent 60deg, var(--gold) 90deg, transparent 120deg, transparent 150deg, var(--gold) 180deg, transparent 210deg, transparent 240deg, var(--gold) 270deg, transparent 300deg, transparent 330deg);
}

.hex-pattern.natural {
    background: radial-gradient(ellipse at center, var(--emerald) 30%, transparent 31%);
}

.hex-pattern.positivist {
    background: repeating-linear-gradient(0deg, var(--tarnished) 0px, var(--tarnished) 3px, transparent 3px, transparent 6px);
}

.hex-pattern.utilitarian {
    background: repeating-conic-gradient(var(--gold) 0deg 10deg, transparent 10deg 20deg);
}

.wax-seal {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--oxblood-light), var(--oxblood));
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hexagon:hover .wax-seal {
    transform: scale(0.95);
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.7);
}

.wax-seal span {
    font-family: 'Cinzel Decorative', serif;
    font-size: 20px;
    color: var(--gold);
}

/* =============================================
   3. THE READING ROOM
   ============================================= */
#reading-room {
    min-height: 150vh;
    background: var(--walnut);
}

.reading-layout {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
}

.book-panel {
    width: 40%;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.book-cover {
    width: 280px;
    height: 380px;
    position: relative;
    perspective: 1200px;
}

.book-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: var(--oxblood);
    border-right: 3px ridge var(--tarnished);
    z-index: 3;
}

.book-page {
    position: absolute;
    top: 0;
    left: 20px;
    right: 0;
    bottom: 0;
    background: var(--oxblood);
    border: 3px ridge var(--tarnished);
    backface-visibility: hidden;
    transition: transform 1s ease;
    transform-origin: left center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.book-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at 1px 1px, rgba(138,122,90,0.1) 0px, transparent 0.5px);
    background-size: 3px 3px;
    pointer-events: none;
}

.book-page.back {
    transform: rotateY(-180deg);
    background: var(--oxblood-light);
}

.book-cover.turned .book-page.front {
    transform: rotateY(-180deg);
}

.book-cover.turned .book-page.back {
    transform: rotateY(0deg);
}

.page-content {
    text-align: center;
    padding: 30px;
}

.book-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 22px;
    color: var(--gold);
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.page-ornament {
    width: 60px;
    height: 30px;
    margin: 20px auto 0;
    background: conic-gradient(
        from 180deg at 50% 100%,
        transparent 0deg,
        var(--gold) 10deg,
        transparent 20deg,
        transparent 40deg,
        var(--gold) 50deg,
        transparent 60deg,
        transparent 80deg,
        var(--gold) 90deg,
        transparent 100deg,
        transparent 120deg,
        var(--gold) 130deg,
        transparent 140deg,
        transparent 160deg,
        var(--gold) 170deg,
        transparent 180deg
    );
    border-radius: 60px 60px 0 0;
    opacity: 0.5;
}

.excerpts-panel {
    width: 60%;
    padding: 100px 60px 200px 40px;
}

.excerpt {
    padding: 80px 0;
    opacity: 0;
    filter: blur(3px);
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.excerpt.in-view {
    opacity: 1;
    filter: blur(0);
}

.excerpt blockquote p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--parchment);
    margin-bottom: 20px;
}

.excerpt cite {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 16px;
    color: var(--tarnished);
    display: block;
}

/* =============================================
   4. THE DELIBERATION CHAMBER
   ============================================= */
#deliberation {
    min-height: 150vh;
    background: var(--walnut);
    padding-bottom: 100px;
    overflow: hidden;
}

#deliberation::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(138,122,90,0.03) 0px, rgba(138,122,90,0.03) 1px, transparent 1px, transparent 10px),
        repeating-linear-gradient(-45deg, rgba(138,122,90,0.03) 0px, rgba(138,122,90,0.03) 1px, transparent 1px, transparent 10px);
    pointer-events: none;
}

.deliberation-grid {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    position: relative;
}

.delib-panel {
    background: var(--near-black);
    padding: 50px 40px;
    position: relative;
    transition: transform 0.6s ease-out, z-index 0.3s, box-shadow 0.6s ease;
    z-index: 1;
    opacity: 0;
    transform: translateY(40px);
}

.delib-panel.visible {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, 0deg));
}

#panel-evidence {
    --rot: -2deg;
}

#panel-precedent {
    --rot: 1.5deg;
}

#panel-statute {
    --rot: 2deg;
}

#panel-conscience {
    --rot: -1deg;
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
}

.delib-panel.conscience.elevated {
    z-index: 10;
    box-shadow: 0 0 60px rgba(212,162,74,0.15);
}

.delib-panel h3 {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 400;
    font-size: 24px;
    color: var(--gold);
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

.delib-panel p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    line-height: 1.85;
    color: var(--parchment);
}

/* Panel corner ornaments */
.panel-corner {
    position: absolute;
    width: 24px;
    height: 24px;
}

.panel-corner::before,
.panel-corner::after {
    content: '';
    position: absolute;
    background: var(--gold);
}

.panel-corner::before {
    width: 24px;
    height: 2px;
}

.panel-corner::after {
    width: 2px;
    height: 24px;
}

.panel-corner.tl { top: 8px; left: 8px; }
.panel-corner.tr { top: 8px; right: 8px; }
.panel-corner.tr::before { right: 0; }
.panel-corner.tr::after { right: 0; }
.panel-corner.bl { bottom: 8px; left: 8px; }
.panel-corner.bl::before { bottom: 0; }
.panel-corner.bl::after { bottom: 0; }
.panel-corner.br { bottom: 8px; right: 8px; }
.panel-corner.br::before { right: 0; bottom: 0; }
.panel-corner.br::after { right: 0; bottom: 0; }

/* =============================================
   5. THE ARCHIVE
   ============================================= */
#archive {
    min-height: 100vh;
    background: var(--near-black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.archive-content {
    text-align: center;
    max-width: 600px;
    width: 100%;
    padding: 80px 20px;
}

.archive-search {
    margin: 60px auto;
    position: relative;
    max-width: 400px;
}

#archive-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--gold);
    color: var(--parchment);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    padding: 12px 0;
    outline: none;
    letter-spacing: 0.04em;
    caret-color: var(--gold);
}

#archive-input::placeholder {
    color: var(--tarnished);
}

.search-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--lamplight);
    transition: width 0.6s ease, left 0.6s ease;
}

#archive-input:focus ~ .search-underline {
    width: 100%;
    left: 0;
}

.colophon {
    margin-top: 80px;
}

.colophon-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--tarnished);
    letter-spacing: 0.04em;
    line-height: 2;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    margin: 0 auto;
    opacity: 0;
}

.colophon-line.typed {
    animation: typewriter 1.5s steps(40) forwards;
    opacity: 1;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

/* ---- Scroll rules ---- */
.scroll-rule .line {
    transform: scaleX(0);
}

.scroll-rule.visible .line {
    transform: scaleX(1);
}

.scroll-rule .diamond {
    transform: rotate(45deg) scale(0);
}

.scroll-rule.visible .diamond {
    transform: rotate(45deg) scale(1);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hex-row.offset {
        margin-left: 0;
    }

    .hex-row {
        flex-wrap: wrap;
    }

    .hexagon {
        width: 150px;
        height: 173px;
    }

    .reading-layout {
        flex-direction: column;
    }

    .book-panel {
        width: 100%;
        position: relative;
        height: auto;
        padding: 40px 20px;
    }

    .excerpts-panel {
        width: 100%;
        padding: 40px 20px;
    }

    .deliberation-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    #panel-conscience {
        grid-column: 1;
    }
}