/* judge.bar — Skeuomorphic Courtroom Aesthetic */

/* ========================================================================
   Reset & Base
   ======================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: "Libre Baskerville", Georgia, serif;
    background-color: #2B2520;
    color: #D1C9BF;
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   Texture Definitions (CSS-rendered, no external assets)
   ======================================================================== */

/* Walnut Wood Grain — built from layered linear-gradients to simulate
   the long, vertical grain pattern of dark walnut bench panels. */
.walnut-bg {
    background-color: #2B2520;
    background-image:
        /* fine vertical grain */
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.18) 0px,
            rgba(0, 0, 0, 0.18) 1px,
            transparent 1px,
            transparent 4px
        ),
        /* broader grain bands */
        repeating-linear-gradient(
            90deg,
            rgba(60, 40, 28, 0.35) 0px,
            rgba(60, 40, 28, 0.35) 12px,
            rgba(40, 28, 22, 0.25) 12px,
            rgba(40, 28, 22, 0.25) 28px,
            rgba(70, 48, 32, 0.20) 28px,
            rgba(70, 48, 32, 0.20) 60px
        ),
        /* warm undertone wash */
        radial-gradient(
            ellipse at 30% 20%,
            rgba(110, 70, 40, 0.28) 0%,
            rgba(43, 37, 32, 0) 60%
        ),
        radial-gradient(
            ellipse at 70% 80%,
            rgba(70, 48, 32, 0.24) 0%,
            rgba(43, 37, 32, 0) 55%
        ),
        linear-gradient(
            180deg,
            #2B2520 0%,
            #1F1A16 100%
        );
}

/* Paper grain for document frames */
.paper-bg {
    background-color: #EDE6DA;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(139, 115, 85, 0.04) 0px,
            rgba(139, 115, 85, 0.04) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(139, 115, 85, 0.03) 0px,
            rgba(139, 115, 85, 0.03) 1px,
            transparent 1px,
            transparent 4px
        ),
        radial-gradient(
            ellipse at 50% 50%,
            #F2EBDF 0%,
            #E8E0D2 100%
        );
}

/* Brass plate inlay */
.brass-bg {
    background: linear-gradient(
        135deg,
        #A08838 0%,
        #C4A35A 25%,
        #D4B96A 50%,
        #C4A35A 75%,
        #A08838 100%
    );
}

/* Leather panel */
.leather-bg {
    background-color: #3D3632;
    background-image:
        repeating-radial-gradient(
            circle at 20% 30%,
            rgba(0, 0, 0, 0.20) 0px,
            rgba(0, 0, 0, 0.20) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-radial-gradient(
            circle at 70% 80%,
            rgba(80, 60, 50, 0.30) 0px,
            rgba(80, 60, 50, 0.30) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            180deg,
            #3D3632 0%,
            #2B2520 100%
        );
}

/* Parchment texture */
.parchment-bg {
    background-color: #EDE6DA;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(139, 115, 85, 0.05) 0px,
            rgba(139, 115, 85, 0.05) 1px,
            transparent 1px,
            transparent 6px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(139, 115, 85, 0.04) 0px,
            rgba(139, 115, 85, 0.04) 1px,
            transparent 1px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 50% 50%,
            #F4EDDF 0%,
            #DDD3C2 110%
        );
}

/* Universal noise overlay (8% opacity) — applied as ::after on sections */
.noise-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image:
        repeating-radial-gradient(
            circle at 13% 27%,
            rgba(255, 255, 255, 0.4) 0px,
            rgba(255, 255, 255, 0.4) 0.5px,
            transparent 0.5px,
            transparent 3px
        ),
        repeating-radial-gradient(
            circle at 67% 83%,
            rgba(0, 0, 0, 0.4) 0px,
            rgba(0, 0, 0, 0.4) 0.5px,
            transparent 0.5px,
            transparent 4px
        );
    mix-blend-mode: overlay;
}

/* ========================================================================
   Section Layout — 5 full-screen sections with crossfade
   ======================================================================== */
.full-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 6vh 0 6vh;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;
}

.full-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* The first section is visible immediately to avoid blank load */
#section-1 {
    opacity: 1;
    transform: none;
}

.section-content {
    position: relative;
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 0 4vw;
    z-index: 2;
}

/* 4-column asymmetric grid: 15% / 35% / 35% / 15% */
.z-layout,
.record-layout,
.deliberation-layout,
.ruling-layout {
    display: grid;
    grid-template-columns: 15% 35% 35% 15%;
    gap: 24px;
    align-items: start;
}

/* ========================================================================
   Section Header (used across sections)
   ======================================================================== */
.section-header {
    grid-column: 1 / 3;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    letter-spacing: 0.12em;
    color: #C4A35A;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(196, 163, 90, 0.3);
    position: relative;
}

.section-header::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 3px;
    background: linear-gradient(
        90deg,
        #C4A35A 0%,
        #D4B96A 50%,
        #A08838 100%
    );
}

/* ========================================================================
   Section 1: Chamber Entrance
   ======================================================================== */
.chamber-entrance {
    background-color: #2B2520;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.18) 0px,
            rgba(0, 0, 0, 0.18) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(60, 40, 28, 0.35) 0px,
            rgba(60, 40, 28, 0.35) 12px,
            rgba(40, 28, 22, 0.25) 12px,
            rgba(40, 28, 22, 0.25) 28px,
            rgba(70, 48, 32, 0.20) 28px,
            rgba(70, 48, 32, 0.20) 60px
        ),
        radial-gradient(
            ellipse at 50% 30%,
            rgba(196, 163, 90, 0.10) 0%,
            rgba(43, 37, 32, 0) 55%
        ),
        linear-gradient(
            180deg,
            #2B2520 0%,
            #1F1A16 100%
        );
    display: flex;
    align-items: center;
    justify-content: center;
}

.chamber-entrance::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image:
        repeating-radial-gradient(
            circle at 13% 27%,
            rgba(255, 255, 255, 0.4) 0px,
            rgba(255, 255, 255, 0.4) 0.5px,
            transparent 0.5px,
            transparent 3px
        );
    mix-blend-mode: overlay;
}

.chamber-center {
    position: relative;
    text-align: center;
    z-index: 3;
    padding: 4vh 0;
}

.court-seal-container {
    margin: 0 auto 32px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1200ms cubic-bezier(0.34, 1.4, 0.64, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

.court-seal-container.is-pulsing {
    animation: sealPulse 2400ms ease-in-out infinite;
}

@keyframes sealPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    }
    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 6px 18px rgba(196, 163, 90, 0.4));
    }
}

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

.site-title {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: 0.08em;
    color: #C4A35A;
    background: linear-gradient(
        180deg,
        #D4B96A 0%,
        #C4A35A 50%,
        #A08838 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
}

.site-title::after {
    content: "";
    display: block;
    width: 30%;
    height: 2px;
    margin: 16px auto 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #C4A35A 50%,
        transparent 100%
    );
}

.gavel-animation {
    margin: 24px auto 0;
    width: 120px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gavel-svg {
    width: 100%;
    height: 100%;
    transform-origin: 75% 30%;
}

.gavel-head {
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes gavelStrike {
    0% {
        transform: rotate(-30deg) translateY(-10px);
    }
    60% {
        transform: rotate(0deg) translateY(0);
    }
    70% {
        transform: rotate(2deg) translateY(2px);
    }
    100% {
        transform: rotate(0deg) translateY(0);
    }
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0) translateY(0); }
    20% { transform: translateX(-2px) translateY(1px); }
    40% { transform: translateX(2px) translateY(-1px); }
    60% { transform: translateX(-1px) translateY(2px); }
    80% { transform: translateX(1px) translateY(-1px); }
}

body.is-shaking {
    animation: screenShake 200ms ease-in-out;
}

.gavel-svg.is-striking {
    animation: gavelStrike 800ms cubic-bezier(0.4, 0.0, 0.6, 1.5);
}

/* ========================================================================
   Section 2: Evidence Display
   ======================================================================== */
.evidence-display {
    background-color: #2B2520;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(60, 40, 28, 0.30) 0px,
            rgba(60, 40, 28, 0.30) 12px,
            rgba(40, 28, 22, 0.20) 12px,
            rgba(40, 28, 22, 0.20) 28px
        ),
        linear-gradient(
            180deg,
            #1F1A16 0%,
            #2B2520 50%,
            #1F1A16 100%
        );
}

.evidence-display .section-header {
    color: #C4A35A;
}

.exhibit-grid {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-top: 32px;
    position: relative;
}

/* Z-pattern: exhibit-a top-left, exhibit-b bottom-right, with diagonal bridge */
.exhibit-grid::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 35%;
    width: 30%;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(196, 163, 90, 0.6) 0%,
        rgba(196, 163, 90, 0.0) 100%
    );
    transform: rotate(15deg);
    transform-origin: left center;
    pointer-events: none;
}

.exhibit-card {
    position: relative;
    transition: transform 400ms ease-out;
}

#exhibit-a {
    transform: rotate(-0.3deg) translateY(0);
    align-self: start;
}

#exhibit-b {
    transform: rotate(0.4deg) translateY(60px);
    align-self: end;
    margin-top: 80px;
}

.exhibit-card:hover {
    transform: rotate(0deg) translateY(-4px);
}

.exhibit-frame {
    position: relative;
    border: 3px solid #6B5B4E;
    background-color: #EDE6DA;
    padding: 12px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.exhibit-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #2B2520;
    position: relative;
    overflow: hidden;
}

/* Duotone "photographs" — built as CSS-rendered scenes */
.exhibit-image-a {
    background:
        radial-gradient(
            ellipse at 30% 40%,
            #C4A35A 0%,
            #8A7E72 25%,
            #4A3F36 50%,
            #2B2520 80%
        ),
        linear-gradient(
            135deg,
            #2B2520 0%,
            #4A3F36 50%,
            #2B2520 100%
        );
    /* Layered to suggest a wooden gavel resting on bench surface */
}

.exhibit-image-a::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 25%;
    width: 50%;
    height: 12%;
    background: linear-gradient(
        180deg,
        #C4A35A 0%,
        #8A7E72 50%,
        #4A3F36 100%
    );
    border-radius: 4px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(212, 185, 106, 0.6);
    transform: rotate(-15deg);
}

.exhibit-image-a::after {
    content: "";
    position: absolute;
    top: 38%;
    left: 55%;
    width: 30%;
    height: 8%;
    background: linear-gradient(
        180deg,
        #8A7E72 0%,
        #4A3F36 100%
    );
    border-radius: 2px;
    transform: rotate(-15deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.exhibit-image-b {
    background:
        radial-gradient(
            ellipse at 60% 50%,
            #C4A35A 0%,
            #8A7E72 30%,
            #2B2520 70%
        ),
        repeating-linear-gradient(
            90deg,
            #2B2520 0px,
            #2B2520 8px,
            #4A3F36 8px,
            #4A3F36 16px
        );
    /* Suggests leather-bound legal volumes */
}

.exhibit-image-b::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 20%;
    right: 20%;
    bottom: 20%;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(196, 163, 90, 0.3) 0px,
            rgba(196, 163, 90, 0.3) 2px,
            transparent 2px,
            transparent 16px
        ),
        linear-gradient(
            180deg,
            #6B5B4E 0%,
            #4A3F36 100%
        );
    border: 1px solid #8A7E72;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}

.exhibit-image-b::after {
    content: "VOL.";
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.6rem;
    color: #C4A35A;
    letter-spacing: 0.2em;
    font-weight: 500;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.exhibit-label {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #8B3A3A;
    color: #EDE6DA;
    padding: 4px 10px;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: rotate(-8deg);
    transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

.exhibit-card.is-stamped .exhibit-label {
    transform: rotate(-3deg) scale(1.05);
}

.exhibit-annotation {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 32px;
    height: 32px;
    background-color: #2B2520;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0);
    transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exhibit-card.is-visible .exhibit-annotation {
    opacity: 1;
    transform: scale(1);
}

.section-divider {
    grid-column: 1 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(107, 91, 78, 0.4);
}

.divider-hexagon {
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.divider-hexagon.is-rotated {
    transform: rotate(60deg);
}

/* ========================================================================
   Section 3: The Record (Transcript)
   ======================================================================== */
.the-record {
    background-color: #EDE6DA;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(139, 115, 85, 0.04) 0px,
            rgba(139, 115, 85, 0.04) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(139, 115, 85, 0.03) 0px,
            rgba(139, 115, 85, 0.03) 1px,
            transparent 1px,
            transparent 4px
        ),
        radial-gradient(
            ellipse at 50% 50%,
            #F2EBDF 0%,
            #E8E0D2 100%
        );
}

.the-record .section-header {
    color: #2B2520;
    border-bottom-color: rgba(43, 37, 32, 0.3);
}

.transcript-container {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: 60px 1fr 80px;
    gap: 24px;
    background-color: rgba(237, 230, 218, 0.6);
    padding: 32px;
    border: 1px solid rgba(139, 115, 85, 0.4);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    position: relative;
}

.transcript-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 84px;
    bottom: 0;
    width: 1px;
    background-color: rgba(139, 58, 58, 0.4);
}

.transcript-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 88px;
    bottom: 0;
    width: 1px;
    background-color: rgba(139, 58, 58, 0.4);
}

.margin-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.line-number {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
    font-weight: 500;
    color: #8A7E72;
    letter-spacing: 0.04em;
    line-height: 1.72;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.line-number.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.transcript-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.transcript-line {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.72;
    color: #3D3632;
    text-align: justify;
    hyphens: auto;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.transcript-line.is-revealed {
    opacity: 1;
    transform: translateX(0);
}

.speaker {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.8rem;
    font-weight: 500;
    color: #8B3A3A;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 8px;
}

.margin-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    padding-top: 8px;
}

.sidebar-stamp {
    opacity: 0.7;
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.sidebar-stamp.is-filled {
    opacity: 1;
}

.sidebar-stamp.is-filled rect {
    fill: rgba(196, 163, 90, 0.3);
    transition: fill 600ms ease-out;
}

/* ========================================================================
   Section 4: Deliberation
   ======================================================================== */
.deliberation {
    background-color: #2B2520;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(60, 40, 28, 0.30) 0px,
            rgba(60, 40, 28, 0.30) 12px,
            rgba(40, 28, 22, 0.20) 12px,
            rgba(40, 28, 22, 0.20) 28px
        ),
        linear-gradient(
            180deg,
            #2B2520 0%,
            #1F1A16 100%
        );
}

.deliberation-split {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 32px;
}

.deliberation-left {
    position: relative;
    height: 50vh;
    border: 2px solid #6B5B4E;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Stack of legal volumes — duotone */
.books-texture {
    position: absolute;
    inset: 0;
    background:
        /* spine accents */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 20px,
            rgba(196, 163, 90, 0.15) 20px,
            rgba(196, 163, 90, 0.15) 22px,
            transparent 22px,
            transparent 60px
        ),
        /* book bodies */
        repeating-linear-gradient(
            90deg,
            #1F1A16 0px,
            #1F1A16 4px,
            #3D3632 4px,
            #3D3632 60px,
            #2B2520 60px,
            #2B2520 64px,
            #4A3F36 64px,
            #4A3F36 120px,
            #1F1A16 120px,
            #1F1A16 124px,
            #6B5B4E 124px,
            #6B5B4E 180px,
            #1F1A16 180px,
            #1F1A16 184px,
            #3D3632 184px,
            #3D3632 240px
        ),
        /* shelf shadows */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 80px,
            rgba(0, 0, 0, 0.4) 80px,
            rgba(0, 0, 0, 0.4) 84px,
            transparent 84px,
            transparent 160px
        );
}

.books-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* gold lettering on spines */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 30px,
            rgba(196, 163, 90, 0.4) 30px,
            rgba(196, 163, 90, 0.4) 32px,
            transparent 32px,
            transparent 50px,
            rgba(196, 163, 90, 0.3) 50px,
            rgba(196, 163, 90, 0.3) 52px,
            transparent 52px,
            transparent 80px
        );
    mix-blend-mode: screen;
    opacity: 0.7;
}

.books-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(196, 163, 90, 0.10) 0%,
        rgba(43, 37, 32, 0.5) 80%
    );
}

.deliberation-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.deliberation-statement {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    letter-spacing: 0.08em;
    color: #C4A35A;
    line-height: 1.1;
    padding: 16px 20px;
    border-left: 3px solid #8B3A3A;
    background-color: rgba(43, 37, 32, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(196, 163, 90, 0.15);
    opacity: 0;
    transform: scale(0.92) rotate(-2deg);
    transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.34, 1.4, 0.64, 1);
    position: relative;
}

.deliberation-statement.is-stamped {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.deliberation-statement::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    border: 1px solid #C4A35A;
    border-radius: 50%;
    opacity: 0.5;
}

.statement-text {
    display: inline-block;
}

/* ========================================================================
   Section 5: The Ruling
   ======================================================================== */
.the-ruling {
    background-color: #1F1A16;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.20) 0px,
            rgba(0, 0, 0, 0.20) 1px,
            transparent 1px,
            transparent 4px
        ),
        radial-gradient(
            ellipse at 50% 50%,
            #2B2520 0%,
            #1F1A16 80%
        );
    display: flex;
    align-items: center;
    justify-content: center;
}

.the-ruling .section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.the-ruling .section-header {
    grid-column: auto;
    align-self: flex-start;
    color: #C4A35A;
    border-bottom-color: rgba(196, 163, 90, 0.3);
}

.parchment-panel {
    background-color: #EDE6DA;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(139, 115, 85, 0.05) 0px,
            rgba(139, 115, 85, 0.05) 1px,
            transparent 1px,
            transparent 6px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(139, 115, 85, 0.04) 0px,
            rgba(139, 115, 85, 0.04) 1px,
            transparent 1px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 50% 50%,
            #F4EDDF 0%,
            #DDD3C2 110%
        );
    padding: 56px 64px;
    width: min(90%, 720px);
    margin: 32px auto 0;
    position: relative;
    border: 1px solid #8A7E72;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 0 0 8px rgba(255, 255, 255, 0.3),
        inset 0 0 0 9px rgba(139, 115, 85, 0.3);
    transform: rotate(-0.3deg);
    transition: transform 1200ms ease-out;
}

.parchment-panel.is-pressed {
    transform: rotate(0deg) perspective(1200px) rotateX(0deg);
}

.parchment-panel::before {
    content: "FILED";
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: "Bebas Neue", Impact, sans-serif;
    color: #8B3A3A;
    font-size: 1.4rem;
    letter-spacing: 0.16em;
    border: 3px solid #8B3A3A;
    padding: 4px 12px;
    transform: rotate(15deg);
    opacity: 0.7;
    box-shadow: 0 0 0 1px rgba(139, 58, 58, 0.4);
}

.ruling-text {
    text-align: center;
    margin-bottom: 40px;
}

.ruling-text p:first-child {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    letter-spacing: 0.10em;
    color: #2B2520;
    line-height: 1.3;
    margin-bottom: 24px;
}

.ruling-subtext {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.72;
    color: #3D3632;
    text-align: justify;
    hyphens: auto;
}

.seal-emboss-container {
    margin: 32px auto;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    opacity: 0;
    transition:
        transform 1200ms cubic-bezier(0.34, 1.4, 0.64, 1),
        opacity 800ms ease-out;
    filter:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
        drop-shadow(inset 0 -2px 4px rgba(255, 255, 255, 0.4));
}

.seal-emboss-container.is-embossed {
    transform: scale(1);
    opacity: 0.85;
}

.emboss-seal {
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5))
        drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.4));
}

.emboss-seal use {
    color: #8A7E72;
}

.signature-line {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #2B2520;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.75rem;
    color: #6B5B4E;
    letter-spacing: 0.08em;
}

.signature-label {
    font-weight: 500;
    color: #2B2520;
}

.signature-date {
    font-style: italic;
}

/* ========================================================================
   Scroll Indicator (brass thumb-wheel)
   ======================================================================== */
.scroll-indicator {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #A08838 0%,
        #C4A35A 25%,
        #D4B96A 50%,
        #C4A35A 75%,
        #A08838 100%
    );
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    z-index: 50;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: transform 80ms linear;
}

.scroll-indicator::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(0, 0, 0, 0.25) 0deg,
        rgba(0, 0, 0, 0.25) 8deg,
        transparent 8deg,
        transparent 16deg
    );
}

.scroll-indicator::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        #D4B96A 0%,
        #A08838 100%
    );
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 900px) {
    .z-layout,
    .record-layout,
    .deliberation-layout,
    .ruling-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section-header {
        grid-column: auto;
    }

    .exhibit-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .exhibit-grid::before {
        display: none;
    }

    #exhibit-b {
        margin-top: 0;
    }

    .deliberation-split {
        grid-template-columns: 1fr;
    }

    .deliberation-left {
        height: 30vh;
    }

    .transcript-container {
        grid-template-columns: 40px 1fr 40px;
        padding: 20px;
    }

    .parchment-panel {
        padding: 32px 24px;
    }
}

@media (max-width: 600px) {
    .section-content {
        padding: 0 6vw;
    }

    .transcript-container {
        grid-template-columns: 32px 1fr;
        padding: 16px;
        gap: 12px;
    }

    .margin-right {
        display: none;
    }

    .scroll-indicator {
        right: 12px;
        bottom: 12px;
        width: 36px;
        height: 36px;
    }
}