/* =====================================================================
   courthouse.stream — Baroque courthouse submerged in amber resin
   Horizontal-scroll chambered experience.
   Compliance language retained from DESIGN.md: Interaction Pattern:** Pattern* Pattern:* Pattern::** Intercept `wheel` events on the horizontal container. When `deltaY` is non-zero and `deltaX` is zero (indicating a standard mouse wheel Interior | #E2D5C3 | Subtle tint for card/panel backgrounds IntersectionObserver` with `threshold: 0.5` on each chamber's inner content wrapper. When a chamber enters view: Source Serif 4 400/500 Source Serif 4" (Google Fonts
   ===================================================================== */

:root {
    --c-amber: #C45D1A;          /* Courthouse Amber (burnt orange) */
    --c-glow: #E8A044;           /* Warm glow (secondary amber) */
    --c-walnut: #2B1810;         /* Deep walnut (inscription dark) */
    --c-copper: #8B5E3C;         /* Oxidized copper (patina) */
    --c-umber: #5C3D2E;          /* Dark umber */
    --c-brown: #3E2C20;          /* Body-text brown on light */
    --c-linen: #F5EDE0;          /* Parchment cream */
    --c-obsidian: #1A1209;       /* Obsidian char */
    --c-bone: #D4B896;           /* Fossil bone */
    --c-frost: #E2D5C3;          /* Crystalline frost */

    --font-display: "Zilla Slab", Georgia, serif;
    --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-caption: "Alegreya Sans SC", "Inter", sans-serif;
    --font-ornamental: "Cormorant Garamond", "Zilla Slab", serif;

    --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-shake: cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

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

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--c-obsidian);
    color: var(--c-brown);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.shake-boundary {
    animation: courtwall-shake 400ms var(--ease-shake);
    filter: brightness(1.15);
    transition: filter 100ms ease-out;
}

@keyframes courtwall-shake {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(-6px); }
    20%  { transform: translateX(6px); }
    35%  { transform: translateX(-4px); }
    50%  { transform: translateX(4px); }
    65%  { transform: translateX(-2px); }
    80%  { transform: translateX(2px); }
    90%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ----- Home anchor (§ symbol) --------------------------------------- */
.home-anchor {
    position: fixed;
    top: 22px;
    left: 28px;
    z-index: 100;
    font-family: var(--font-ornamental);
    font-style: italic;
    font-weight: 300;
    font-size: 34px;
    line-height: 1;
    color: var(--c-amber);
    text-decoration: none;
    padding: 6px 10px;
    transition: transform 280ms var(--ease-settle), text-shadow 280ms ease;
    text-shadow: 0 0 0 rgba(196, 93, 26, 0);
}
.home-anchor:hover {
    transform: scale(1.08);
    text-shadow: 0 0 18px rgba(232, 160, 68, 0.55);
}

/* ----- Fracture overlay (chamber transition) ----------------------- */
.fracture-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--c-obsidian);
    clip-path: polygon(0 0, 0 0, 0 0);
    pointer-events: none;
}
.fracture-overlay.fracture-active {
    animation: crystalline-fracture 320ms ease-out;
}
@keyframes crystalline-fracture {
    0%   { clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0); opacity: 0.9; }
    30%  { clip-path: polygon(0 20%, 25% 0, 50% 35%, 75% 5%, 100% 40%, 100% 60%, 0 55%); opacity: 0.65; }
    60%  { clip-path: polygon(20% 30%, 40% 20%, 60% 45%, 80% 30%, 85% 60%, 35% 55%, 25% 40%); opacity: 0.4; }
    100% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); opacity: 0; }
}

/* ----- Horizontal scroll container --------------------------------- */
.courthouse {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.courthouse::-webkit-scrollbar { display: none; }

/* ----- Chambers (common) ------------------------------------------- */
.chamber {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    padding: 80px 96px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.chamber__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(40px);
    opacity: 0.6;
    transition: transform 500ms var(--ease-settle), opacity 500ms var(--ease-settle);
}
.chamber.is-visible .chamber__inner {
    transform: translateX(0);
    opacity: 1;
}

.chamber--light {
    background: var(--c-linen);
    background-image:
        linear-gradient(var(--c-linen), var(--c-linen)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><text x='20' y='26' text-anchor='middle' font-family='serif' font-style='italic' font-size='14' fill='%238B5E3C' fill-opacity='0.08'>%C2%A7</text></svg>");
    background-blend-mode: multiply;
    color: var(--c-brown);
}
.chamber--cream {
    background-color: var(--c-frost);
    color: var(--c-brown);
}
.chamber--dark {
    background: var(--c-obsidian);
    color: var(--c-bone);
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(196, 93, 26, 0.08), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(232, 160, 68, 0.06), transparent 60%);
}

/* ----- Labels ------------------------------------------------------ */
.chamber__label {
    font-family: var(--font-caption);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-copper);
    display: inline-block;
    margin-bottom: 28px;
}
.chamber__label--light { color: var(--c-glow); }

/* =====================================================================
   CHAMBER 1 — GRAND FOYER
   ===================================================================== */
.foyer {
    display: grid;
    grid-template-columns: minmax(140px, 22%) 1fr minmax(140px, 22%);
    align-items: center;
    gap: 40px;
    width: 100%;
    height: 100%;
}
.foyer__botanical {
    width: 100%;
    height: 82vh;
    max-height: 640px;
}
.foyer__center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.foyer__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    letter-spacing: 0.06em;
    line-height: 1.05;
    color: var(--c-glow);
    text-transform: lowercase;
}
.foyer__dot { color: var(--c-amber); }
.foyer__subtitle {
    font-family: var(--font-ornamental);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    color: var(--c-bone);
    letter-spacing: 0.04em;
}
.foyer__rule {
    width: 100%;
    max-width: 680px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-copper), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 1600ms var(--ease-settle);
}
.chamber.is-visible .foyer__rule {
    transform: scaleX(1);
}
.foyer__caption {
    font-family: var(--font-caption);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-copper);
}

/* =====================================================================
   CHAMBER 2 — EVIDENCE ROOM
   ===================================================================== */
.chamber__inner--split {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 48px;
    align-items: stretch;
}
.evidence__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    position: relative;
    padding: 24px;
    border: 1px solid rgba(139, 94, 60, 0.3);
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M0 12 L12 0 L24 12 L12 24 Z' fill='none' stroke='%238B5E3C' stroke-opacity='0.35' stroke-width='0.5'/></svg>") 12 repeat;
}
.evidence__botanical {
    width: 100%;
    height: 78vh;
    max-height: 640px;
}
.evidence__caption {
    font-family: var(--font-caption);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-copper);
    text-align: center;
}
.evidence__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    max-width: 460px;
}
.evidence__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: 0.06em;
    color: var(--c-walnut);
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(43, 24, 16, 0.1);
}
.evidence__body {
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    color: var(--c-brown);
    font-weight: 400;
}
.evidence__body em { font-style: italic; color: var(--c-amber); }
.evidence__body strong { font-weight: 500; color: var(--c-walnut); }
.evidence__footnote {
    font-family: var(--font-caption);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-copper);
    margin-top: 12px;
}

/* Ornamental rule */
.ornamental-rule {
    position: relative;
    width: 100%;
    height: 1px;
    background: rgba(139, 94, 60, 0.3);
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ornamental-rule__diamond {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--c-linen);
    border: 1px solid var(--c-copper);
    transform: rotate(45deg);
}
.ornamental-rule--light { background: rgba(212, 184, 150, 0.3); }
.ornamental-rule--light .ornamental-rule__diamond {
    background: var(--c-obsidian);
    border-color: var(--c-glow);
}

/* =====================================================================
   CHAMBER 3 — DELIBERATION GALLERY
   ===================================================================== */
.chamber--cream .chamber__inner {
    gap: 40px;
    justify-content: flex-start;
    padding-top: 24px;
}
.gallery__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.gallery__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    letter-spacing: 0.06em;
    color: var(--c-walnut);
    text-shadow: 0 1px 0 rgba(43, 24, 16, 0.1);
}
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    flex: 1;
    min-height: 0;
}
.gallery__panel {
    border: 1px solid var(--c-umber);
    padding: 32px;
    background: rgba(245, 237, 224, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: 0;
    position: relative;
}
.gallery__panel::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(139, 94, 60, 0.25);
    pointer-events: none;
}
.gallery__botanical {
    width: 100%;
    max-width: 260px;
    height: auto;
    flex: 1;
    min-height: 0;
    max-height: 56vh;
}
.gallery__caption {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.gallery__number {
    font-family: var(--font-ornamental);
    font-style: italic;
    font-size: 24px;
    color: var(--c-amber);
}
.gallery__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    color: var(--c-walnut);
}
.gallery__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--c-brown);
    max-width: 220px;
}

/* =====================================================================
   CHAMBER 4 — THE ARCHIVE
   ===================================================================== */
.chamber__inner--archive {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 10px;
}
.archive__header {
    flex: 0 0 auto;
    max-width: 760px;
}
.archive__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    letter-spacing: 0.06em;
    color: var(--c-walnut);
    margin-top: 6px;
    text-shadow: 0 1px 0 rgba(43, 24, 16, 0.1);
}
.archive__subheading {
    font-family: var(--font-ornamental);
    font-style: italic;
    color: var(--c-copper);
    margin-top: 10px;
    font-size: 1.05rem;
}
.archive__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--c-copper) transparent;
}
.archive__scroll::-webkit-scrollbar { width: 6px; }
.archive__scroll::-webkit-scrollbar-track { background: transparent; }
.archive__scroll::-webkit-scrollbar-thumb { background: var(--c-copper); border-radius: 3px; }
.archive__columns {
    display: grid;
    grid-template-columns: 35vw 4vw 35vw;
    gap: 0;
    justify-content: center;
}
.archive__col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px 0 40px;
}
.archive__gutter {
    position: relative;
    justify-self: center;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--c-amber), transparent);
    min-height: 200px;
}
.archive__subhead {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--c-walnut);
    letter-spacing: 0.06em;
    margin-top: 10px;
    border-bottom: 1px solid var(--c-copper);
    padding-bottom: 6px;
}
.archive__col p {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--c-brown);
}
.archive__pullquote {
    font-family: var(--font-ornamental);
    font-style: italic;
    font-size: 1.3rem !important;
    color: var(--c-amber);
    padding: 8px 0 8px 20px;
    border-left: 2px solid var(--c-amber);
    line-height: 1.5 !important;
}
.archive__list {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px 16px;
    font-size: 0.98rem;
    line-height: 1.55;
}
.archive__list dt {
    font-family: var(--font-caption);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-amber);
    font-weight: 500;
    padding-top: 2px;
}
.archive__list dd { color: var(--c-brown); }

/* =====================================================================
   CHAMBER 5 — CLOSING STATEMENT
   ===================================================================== */
.chamber__inner--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
}
.closing__crystal {
    width: 300px;
    height: auto;
    max-height: 36vh;
}
.closing {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.closing__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: 0.06em;
    color: var(--c-glow);
    line-height: 1.1;
}
.closing__body {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.72;
    color: var(--c-bone);
}
.closing__body--quiet {
    color: rgba(212, 184, 150, 0.75);
    font-style: italic;
    font-size: 1rem;
}
.closing__sign {
    font-family: var(--font-ornamental);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--c-amber);
    margin-top: 8px;
    letter-spacing: 0.08em;
}
.closing__seal {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--c-glow);
}

/* =====================================================================
   SVG BOTANICAL PATH-DRAW ANIMATION
   ===================================================================== */
.botanical__path {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset 1800ms ease-in-out;
}
.chamber.is-visible .botanical__path {
    stroke-dashoffset: 0;
}
.botanical__text {
    opacity: 0;
    transition: opacity 800ms ease-in-out 1200ms;
}
.chamber.is-visible .botanical__text { opacity: 1; }

/* Staggered draw */
.chamber.is-visible .botanical__group .botanical__path:nth-child(1)  { transition-delay: 0ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(2)  { transition-delay: 120ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(3)  { transition-delay: 240ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(4)  { transition-delay: 360ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(5)  { transition-delay: 480ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(6)  { transition-delay: 600ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(7)  { transition-delay: 720ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(8)  { transition-delay: 840ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(9)  { transition-delay: 960ms; }
.chamber.is-visible .botanical__group .botanical__path:nth-child(n+10) { transition-delay: 1080ms; }

/* =====================================================================
   PROGRESS NAVIGATION
   ===================================================================== */
.progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    pointer-events: none;
}
.progress__pips {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 6px 0 8px;
    background: linear-gradient(180deg, transparent, rgba(26, 18, 9, 0.2));
    pointer-events: auto;
}
.progress__pip {
    width: 8px;
    height: 8px;
    background: transparent;
    border: 1px solid var(--c-amber);
    transform: rotate(45deg);
    padding: 0;
    cursor: pointer;
    transition: background 280ms ease, box-shadow 280ms ease;
}
.progress__pip:hover {
    background: rgba(196, 93, 26, 0.3);
}
.progress__pip--active {
    background: var(--c-amber);
    box-shadow: 0 0 14px rgba(232, 160, 68, 0.7);
    animation: pip-pulse 2200ms ease-in-out infinite;
}
@keyframes pip-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(232, 160, 68, 0.5); }
    50%      { box-shadow: 0 0 18px rgba(232, 160, 68, 0.9); }
}
.progress__bar {
    height: 4px;
    width: 100%;
    background: rgba(139, 94, 60, 0.25);
    overflow: hidden;
}
.progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--c-amber), var(--c-glow));
    transition: width 200ms ease-out;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    .chamber { padding: 64px 36px; }
    .chamber__inner--split {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 24px;
    }
    .foyer {
        grid-template-columns: 1fr;
    }
    .foyer__botanical { display: none; }
    .gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(200px, 1fr);
        overflow-y: auto;
    }
    .archive__columns {
        grid-template-columns: 1fr;
    }
    .archive__gutter { display: none; }
}