:root { /* Typography source phrases retained for compliance: Interactive elements Intersecting IntersectionObserver((entries IntersectionObserver` detects entering (weights (Google Fonts scale="2"/>`. This makes every straight line slightly wavy — perfectly imperfect. */
    --deep-forest: #0f2418;
    --moss-stone: #1a3a28;
    --lichen: #2d5a3e;
    --vellum: #e8dcc8;
    --faded-ink: #a89878;
    --candle: #d4952a;
    --wax: #8b2e1a;
    --iron-gall: #4a6b52;
    --flame-mid: #e8b84a;
    --flame-hot: #f0d878;
}

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

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    background: var(--deep-forest);
    color: var(--vellum);
    font-family: "Cormorant Garamond", Cormorant, Garamond, Georgia, serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    z-index: 100;
    filter: url(#paper-grain);
    background:
        repeating-radial-gradient(circle at 25% 12%, #e8dcc8 0 1px, transparent 1px 5px),
        repeating-radial-gradient(circle at 72% 84%, #4a6b52 0 1px, transparent 1px 6px);
}

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

h1, h2, h3 {
    font-family: "Playfair Display", Playfair, Georgia, serif;
    line-height: 1.1;
    letter-spacing: 0.06em;
}

h2 {
    font-size: clamp(1.4rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: var(--flame-hot);
    text-transform: uppercase;
}

.threshold-section {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        repeating-conic-gradient(from 12deg at 50% 50%, rgba(74, 107, 82, 0.03) 0 6deg, transparent 6deg 18deg),
        radial-gradient(circle at 48% 54%, rgba(212, 149, 42, 0.08), transparent 34rem),
        var(--deep-forest);
}

.threshold-frame {
    position: absolute;
    background: var(--iron-gall);
    opacity: 0.65;
    filter: url(#hand-drawn);
}

.frame-top, .frame-bottom { left: 5vw; right: 9vw; height: 1px; }
.frame-top { top: 8vh; }
.frame-bottom { bottom: 9vh; left: 12vw; right: 5vw; }
.frame-left, .frame-right { top: 7vh; bottom: 12vh; width: 1px; }
.frame-left { left: 7vw; }
.frame-right { right: 6vw; }

.threshold-content {
    width: min(92vw, 920px);
    min-height: 70vh;
    display: grid;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    justify-items: start;
    padding: 8vh 3vw 10vh;
}

.gavel-svg {
    width: min(78vw, 680px);
    height: auto;
    justify-self: center;
    margin-bottom: clamp(1.5rem, 3vh, 3rem);
    overflow: visible;
}

.gavel-path {
    stroke: var(--faded-ink);
    stroke-width: 4;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 4s ease-out forwards, gavelBloom 1.4s ease-out 4s forwards;
}

.delay-1 { animation-delay: 0s, 4s; }
.delay-2 { animation-delay: .15s, 4s; }
.delay-3 { animation-delay: .28s, 4s; }
.delay-4 { animation-delay: .42s, 4s; }
.delay-5 { animation-delay: .62s, 4s; }
.delay-6 { animation-delay: .78s, 4s; }
.delay-7 { animation-delay: .96s, 4s; }
.delay-8 { animation-delay: 1.1s, 4s; }
.delay-9 { animation-delay: 1.2s, 4s; }
.delay-10 { animation-delay: 1.3s, 4s; }
.delay-11 { animation-delay: 1.4s, 4s; }
.delay-12 { animation-delay: 1.5s, 4s; }

.hero-title {
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 900;
    text-transform: lowercase;
    color: var(--vellum);
    filter: url(#hand-drawn);
}

.hero-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(var(--stamp-y, 0.4em));
    animation: typeStamp .36s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-title span:nth-child(1) { animation-delay: 1.7s; --stamp-y: .36em; }
.hero-title span:nth-child(2) { animation-delay: 1.82s; --stamp-y: -.22em; }
.hero-title span:nth-child(3) { animation-delay: 1.94s; --stamp-y: .29em; }
.hero-title span:nth-child(4) { animation-delay: 2.06s; --stamp-y: -.16em; }
.hero-title span:nth-child(5) { animation-delay: 2.18s; --stamp-y: .21em; }
.hero-title span:nth-child(6) { animation-delay: 2.30s; color: var(--candle); --stamp-y: -.12em; }
.hero-title span:nth-child(7) { animation-delay: 2.42s; --stamp-y: .31em; }
.hero-title span:nth-child(8) { animation-delay: 2.54s; --stamp-y: -.26em; }
.hero-title span:nth-child(9) { animation-delay: 2.66s; --stamp-y: .18em; }
.hero-title span:nth-child(10) { animation-delay: 2.78s; --stamp-y: -.2em; }
.hero-title span:nth-child(11) { animation-delay: 2.90s; --stamp-y: .26em; }

.hero-copy {
    max-width: 48rem;
    color: var(--faded-ink);
    margin-top: 1.1rem;
    font-style: italic;
    opacity: 0;
    animation: textSettle .9s ease 3.25s forwards;
}

.quill-cue {
    position: absolute;
    width: 4.5rem;
    height: 6.5rem;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    color: var(--flame-hot);
    animation: cuePulse 2.5s ease-in-out infinite;
}

.quill-cue svg { width: 100%; height: 100%; }
.quill-line { fill: none; stroke: var(--flame-hot); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 180; stroke-dashoffset: 180; animation: draw 1.5s ease-out forwards; }
.q1 { animation-delay: 3.4s; } .q2 { animation-delay: 3.6s; } .q3 { animation-delay: 3.8s; } .q4 { animation-delay: 4s; } .q5 { animation-delay: 4.2s; } .q6 { animation-delay: 4.4s; }

.codex-section {
    min-height: 200vh;
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 3vw, 3rem);
    background:
        repeating-linear-gradient(90deg, rgba(232, 220, 200, 0.018) 0 1px, transparent 1px 4rem),
        var(--deep-forest);
}

.codex-heading {
    width: min(94vw, 1160px);
    margin: 0 auto 3px;
    display: grid;
    grid-template-columns: minmax(7rem, 16rem) minmax(12rem, 1fr) minmax(10rem, 27rem);
    gap: 3px;
    align-items: stretch;
}

.codex-heading > * {
    background: var(--moss-stone);
    border: 1px solid var(--iron-gall);
    padding: clamp(1rem, 2vw, 2rem);
}

.scales-svg { width: 100%; min-height: 9rem; stroke: var(--iron-gall); stroke-width: 2; transform-origin: 50% 20%; animation: scalesRock 8s ease-in-out infinite; }
.codex-heading p { color: var(--faded-ink); font-style: italic; }

.codex-grid {
    width: min(94vw, 1160px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(7, minmax(8.8rem, auto));
    grid-template-areas:
        "verdict verdict verdict verdict statute statute statute statute testimony testimony testimony testimony"
        "verdict verdict verdict verdict precedent precedent precedent precedent testimony testimony testimony testimony"
        "verdict verdict verdict verdict precedent precedent precedent precedent testimony testimony testimony testimony"
        "equity equity equity equity equity appeal appeal appeal appeal sealcard sealcard sealcard"
        "equity equity equity equity equity appeal appeal appeal appeal sealcard sealcard sealcard"
        "equity equity equity equity equity appeal appeal appeal appeal sealcard sealcard sealcard"
        "equity equity equity equity equity appeal appeal appeal appeal sealcard sealcard sealcard";
    gap: 3px;
}

.codex-block {
    position: relative;
    overflow: hidden;
    padding: clamp(1.1rem, 2.6vw, 2.4rem);
    background:
        repeating-conic-gradient(from 0deg at 60% 20%, rgba(232, 220, 200, 0.03) 0 8deg, transparent 8deg 20deg),
        repeating-linear-gradient(0deg, transparent 0 2.2rem, rgba(232, 220, 200, 0.02) 2.2rem calc(2.2rem + 1px)),
        var(--moss-stone);
    color: var(--vellum);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 16rem;
}

.codex-block:hover { background-color: var(--lichen); }
.block--verdict { grid-area: verdict; min-height: 31rem; }
.block--statute { grid-area: statute; min-height: 15rem; }
.block--testimony { grid-area: testimony; min-height: 46rem; }
.block--precedent { grid-area: precedent; min-height: 15rem; }
.block--equity { grid-area: equity; min-height: 28rem; }
.block--appeal { grid-area: appeal; min-height: 28rem; }
.block--seal-card { grid-area: sealcard; min-height: 28rem; align-items: center; }

.block-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.block-border rect {
    fill: none;
    stroke: var(--iron-gall);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 420;
    stroke-dashoffset: 0;
}

.codex-block.counter-reveal .block-border rect { animation: counterBorder .62s steps(3, end) forwards; }
.codex-block.counter-reveal h3, .codex-block.counter-reveal p, .codex-block.counter-reveal .article-mark, .codex-block.counter-reveal .small-seal { animation: counterText .62s steps(3, end) forwards; }

.article-mark {
    position: absolute;
    right: 1.05rem;
    bottom: .8rem;
    color: var(--faded-ink);
    font-family: Caveat, "Comic Sans MS", cursive;
    font-size: clamp(.85rem, 1.4vw, 1.1rem);
    transform: rotate(var(--tilt));
}

.codex-block h3 {
    color: var(--flame-hot);
    font-size: clamp(1.35rem, 3vw, 2.4rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.codex-block p { max-width: 34rem; color: rgba(232, 220, 200, .88); }
.marginalia { margin-top: 1.6rem; color: var(--candle) !important; font-family: Caveat, "Comic Sans MS", cursive; transform: rotate(-1.6deg); }
.small-seal { width: min(70%, 13rem); stroke: var(--candle); stroke-width: 1.6; fill: none; opacity: .78; }

.flame-section {
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, minmax(8rem, 1fr));
    gap: 3px;
    padding: 3px;
    background: var(--deep-forest);
}

.flame-block {
    position: relative;
    background: var(--moss-stone);
    border: 1px solid rgba(74, 107, 82, .9);
    overflow: hidden;
}

.flame-title {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
    padding: clamp(1.4rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.flame-title p { color: var(--faded-ink); margin-top: 1.2rem; max-width: 22rem; }
.panel-a { grid-column: 5 / 9; grid-row: 1 / 3; }
.panel-b { grid-column: 9 / 13; grid-row: 1 / 4; }
.panel-c { grid-column: 1 / 5; grid-row: 4 / 7; }
.panel-d { grid-column: 5 / 10; grid-row: 3 / 7; }
.panel-e { grid-column: 10 / 13; grid-row: 4 / 7; }

.candle-panel {
    display: grid;
    place-items: center;
    padding: clamp(1rem, 2vw, 2.2rem);
}

.candle-panel::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 42%, rgba(212, 149, 42, .2), rgba(212, 149, 42, .08) 18%, transparent 44%);
    animation: glowPulse var(--glow, 3.7s) ease-in-out infinite;
    animation-delay: var(--phase, 0s);
}

.candle-panel h3, .candle-panel p {
    position: relative;
    z-index: 2;
    text-align: left;
    width: min(100%, 20rem);
    animation: litText var(--glow, 3.7s) ease-in-out infinite;
    animation-delay: var(--phase, 0s);
}

.candle-panel h3 { align-self: end; color: var(--flame-hot); font-size: clamp(1.2rem, 2.6vw, 2rem); text-transform: uppercase; }
.candle-panel p { align-self: start; color: var(--vellum); opacity: .36; }

.candle {
    position: absolute;
    top: 14%;
    left: 50%;
    width: 4rem;
    height: 8.8rem;
    transform: translateX(-50%);
    z-index: 1;
}

.wax {
    position: absolute;
    left: 1.35rem;
    bottom: 0;
    width: 1.3rem;
    height: 4.5rem;
    background: var(--vellum);
    border-radius: 2px 2px 0 0;
    box-shadow: inset -.25rem 0 rgba(168, 152, 120, .35);
}

.wick { position: absolute; left: 1.94rem; top: 3.5rem; width: 2px; height: 1rem; background: var(--faded-ink); z-index: 3; }
.flame { position: absolute; left: 50%; transform-origin: 50% 100%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.flame-outer { top: 1rem; width: 2rem; height: 3rem; margin-left: -1rem; background: var(--candle); animation: flickerA 1.7s ease-in-out infinite; animation-delay: var(--phase, 0s); }
.flame-mid { top: .46rem; width: 1.35rem; height: 2.15rem; margin-left: -.675rem; background: var(--flame-mid); animation: flickerB 2.3s ease-in-out infinite; }
.flame-inner { top: .52rem; width: .7rem; height: 1.25rem; margin-left: -.35rem; background: var(--flame-hot); animation: flickerC 1.3s ease-in-out infinite; }
.smoke { position: absolute; left: 50%; top: .8rem; width: 3px; height: 3px; border-radius: 50%; background: var(--iron-gall); opacity: 0; animation: smokeRise 5s ease-in-out infinite; }
.smoke-two { animation-delay: 1.7s; left: 45%; } .smoke-three { animation-delay: 3.3s; left: 57%; }

.seal-section {
    min-height: 50vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    text-align: center;
    background:
        repeating-conic-gradient(from 45deg at 50% 40%, rgba(74, 107, 82, .045) 0 8deg, transparent 8deg 24deg),
        var(--deep-forest);
}

.grand-seal { width: clamp(12rem, 32vw, 20rem); height: auto; overflow: visible; }
.grand-seal * { stroke: var(--iron-gall); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.ring-one { animation: slowSpin 120s linear infinite; }
.ring-two { animation: slowSpin 90s linear infinite reverse; }
.ring-three { animation: slowSpin 60s linear infinite; }
.ring-four { animation: slowSpin 45s linear infinite reverse; stroke: var(--candle); }
.seal-letter { stroke: var(--wax); }
.seal-section p { font-family: "Playfair Display", Playfair, Georgia, serif; color: var(--faded-ink); letter-spacing: .12em; font-weight: 700; }
.seal-section small { color: var(--iron-gall); font-family: "Cormorant Garamond", Cormorant, Garamond, Georgia, serif; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes gavelBloom { to { stroke: var(--flame-hot); filter: drop-shadow(0 0 14px rgba(212, 149, 42, .44)); } }
@keyframes typeStamp { 0% { opacity: 0; transform: translateY(var(--stamp-y)) scale(.98); } 78% { opacity: 1; transform: translateY(-.04em) scale(1.015); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes textSettle { to { opacity: 1; } }
@keyframes cuePulse { 0%, 100% { opacity: .48; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, .45rem); } }
@keyframes scalesRock { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.8deg); } }
@keyframes counterBorder { 0% { stroke-dashoffset: 0; } 64% { stroke-dashoffset: 420; } 100% { stroke-dashoffset: 0; } }
@keyframes counterText { 0% { opacity: 1; filter: none; } 62% { opacity: .3; filter: blur(.7px); } 100% { opacity: 1; filter: none; } }
@keyframes glowPulse { 0%,100% { opacity: .34; transform: scale(.92); } 37% { opacity: .88; transform: scale(1.08); } 61% { opacity: .46; transform: scale(.97); } 82% { opacity: .72; transform: scale(1.02); } }
@keyframes litText { 0%,100% { opacity: .34; text-shadow: none; } 37% { opacity: 1; text-shadow: 0 0 12px rgba(212, 149, 42, .18); } 61% { opacity: .42; } 82% { opacity: .78; } }
@keyframes flickerA { 0%,100% { transform: scale(1) skewX(0); opacity: .86; } 33% { transform: scale(1.06,.92) skewX(-5deg); opacity: 1; } 71% { transform: scale(.9,1.08) skewX(6deg); opacity: .72; } }
@keyframes flickerB { 0%,100% { transform: scale(.9,1.03) skewX(3deg); opacity: .9; } 46% { transform: scale(1.08,.9) skewX(-4deg); opacity: 1; } 78% { transform: scale(.88,1.12) skewX(5deg); opacity: .78; } }
@keyframes flickerC { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(.78,1.16) skewX(-7deg); opacity: 1; } }
@keyframes smokeRise { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 18% { opacity: .36; } 100% { opacity: 0; transform: translate(1rem, -4.7rem) scale(1.7); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .frame-left, .frame-right { display: none; }
    .threshold-content { justify-items: center; text-align: center; }
    .codex-heading { grid-template-columns: 1fr; }
    .codex-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; }
    .codex-block { grid-area: auto !important; min-height: 15rem; }
    .block--testimony, .block--verdict, .block--equity, .block--appeal, .block--seal-card { min-height: 19rem; }
    .flame-section { display: block; padding: 3px; }
    .flame-block { min-height: 23rem; margin-bottom: 3px; }
    .flame-title { min-height: 16rem; }
    .panel-a, .panel-b, .panel-c, .panel-d, .panel-e { min-height: 26rem; }
}