:root {
    --bg-primary: #0B0D17;
    --bg-secondary: #141829;
    --accent-emerald: #1B9E77;
    --accent-amethyst: #7B2D8E;
    --accent-ruby: #C7254E;
    --accent-sapphire: #2563EB;
    --accent-gold: #D4A843;
    --text-primary: #E2E4EC;
    --text-secondary: #8B90A7;
    --mesh-hue-offset: 0deg;
    --font-display: "Space Grotesk", sans-serif;
    --font-secondary: "Instrument Sans", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
}

/* Typography compliance reference: IBM Plex provides the body text with a sense of systematic precision. Weight 300 (light IBM Plex Sans" (Google Fonts IntersectionObserver for zone-entry detection and glitch triggering JetBrains Mono" (Google Fonts Space Grotesk + Instrument Sans + IBM Plex Sans stack is architecturally distinct from the 93% mono-dominated and 26% handwritten typography in the existing catalog. The three-tier grotesque system creates hierarchical authority without resorting to serif gravitas or mono-space technicality. Space Grotesk. Used for subheadings Space Grotesk's geometric openness and Instrument Sans's tighter geometry creates a visual hierarchy that feels like different levels of security clearance in a document. Space Grotesk" (Google Fonts */

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

html { background: var(--bg-primary); scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        linear-gradient(90deg, #1B9E7712 1px, transparent 1px) 0 0 / 12vw 100%,
        linear-gradient(0deg, #1B9E770c 1px, transparent 1px) 0 0 / 100% 18vh,
        var(--bg-primary);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 300;
}

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, #0B0D1708 2px, #0B0D1708 4px);
    mix-blend-mode: screen;
}

.tribunal-feed { position: relative; }

.zone {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;
}

.zone::before {
    content: attr(data-zone);
    position: absolute;
    top: 3.3rem;
    right: 4vw;
    z-index: -1;
    font-family: var(--font-mono);
    color: #8B90A713;
    font-size: clamp(5rem, 16vw, 17rem);
    line-height: 1;
}

.system-label,
.mesh-caption,
.timeline-note,
.fragment span,
.final-code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent-gold);
    font-feature-settings: "liga" on, "calt" on;
}

h1,
h2 {
    font-family: var(--font-display);
    color: var(--text-primary);
    text-transform: uppercase;
    font-feature-settings: "ss01" on;
}

h1 {
    max-width: 10.5ch;
    margin-top: 1.1rem;
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 700;
    line-height: 0.89;
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(2.8rem, 7vw, 6.5rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.025em;
}

p {
    max-width: 64ch;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
}

.zone-declaration {
    display: grid;
    grid-template-columns: minmax(0, 62%) minmax(280px, 38%);
    align-items: center;
    padding: 0 7vw 0 8vw;
    gap: 3vw;
}

.declaration-copy { padding-top: 2vh; }

.declaration-note {
    width: min(44rem, 85%);
    margin-top: 2rem;
    font-family: var(--font-secondary);
    font-size: clamp(1.1rem, 2.5vw, 1.8rem);
    color: var(--text-secondary);
}

.rule-horizontal {
    position: absolute;
    left: 0;
    top: 24vh;
    width: 54vw;
    height: 1px;
    background: #1B9E7740;
}

.ethics-mesh {
    position: relative;
    min-height: 70vh;
    border-left: 1px solid #1B9E7740;
    border-bottom: 1px solid #1B9E7725;
    filter: hue-rotate(var(--mesh-hue-offset));
    background:
        radial-gradient(ellipse at 20% 50%, #1B9E7733 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, #7B2D8E44 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, #2563EB22 0%, transparent 60%),
        conic-gradient(from 180deg at 60% 40%, #C7254E11, #D4A84311, #1B9E7711, #C7254E11),
        linear-gradient(160deg, #0B0D17 0%, #141829 100%);
    background-size: 160% 160%, 150% 150%, 180% 180%, 200% 200%, 100% 100%;
    animation: meshDrift 20s ease-in-out infinite alternate;
    box-shadow: inset 0 0 80px #0B0D17, 0 0 70px #7B2D8E1c;
}

.mesh-caption { position: absolute; right: 1.2rem; bottom: 1rem; color: var(--accent-emerald); }

.asymmetric {
    display: grid;
    align-items: center;
    gap: 0;
    padding: 8vh 7vw;
}

.right-heavy { grid-template-columns: 1fr 0.1fr 1.85fr; }
.left-heavy { grid-template-columns: 1.85fr 0.1fr 1fr; }

.center-channel { min-height: 70vh; border-left: 1px solid #1B9E7740; }

.timeline {
    position: relative;
    min-height: 66vh;
    padding-left: 2vw;
}

.timeline-line {
    position: absolute;
    left: 3.2vw;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #1B9E77;
    opacity: 0.72;
}

.diamond-marker {
    position: relative;
    width: 14px;
    height: 14px;
    margin: 10vh 0 19vh calc(1.2vw + 7px);
    transform: rotate(45deg);
    border: 1px solid var(--accent-ruby);
    background: var(--accent-gold);
    box-shadow: 0 0 18px #C7254E66;
}

.diamond-marker span {
    position: absolute;
    transform: rotate(-45deg) translate(18px, -19px);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

.timeline-note { position: absolute; bottom: 0; left: 0; max-width: 17rem; color: var(--text-secondary); }

.brief-copy {
    padding: 7vh 0 7vh 6vw;
    border-left: 1px solid #D4A84333;
}

.brief-copy p:not(.system-label), .resolution-copy p:not(.system-label):not(.final-code) { margin-top: 1.5rem; }

.pull-quote {
    position: relative;
    margin: 3rem 0;
    padding: 1.3rem 1.6rem;
    border-left: 1px solid var(--accent-amethyst);
    color: var(--accent-amethyst);
    background: #14182999;
    font-family: var(--font-secondary);
    font-size: clamp(1.1rem, 2.5vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.inversion-mesh { min-height: 82vh; border: 1px solid #2563EB44; }

.proposition-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 3vw;
}

.proposition {
    padding: 1rem;
    background: #141829bb;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.45;
}

.proposition span {
    display: block;
    margin-bottom: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.emerald { border: 1px solid var(--accent-emerald); }
.amethyst { border: 1px solid var(--accent-amethyst); }
.ruby { border: 1px solid var(--accent-ruby); }
.sapphire { border: 1px solid var(--accent-sapphire); }

.zone-fracture { padding: 8vh 5vw; }

.fracture-grid {
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, minmax(7vh, auto));
    gap: 1rem;
    align-items: center;
}

.fracture-title { grid-column: 3 / 11; grid-row: 4 / 7; z-index: 2; color: #E2E4EC; }

.fragment {
    padding: 1rem;
    background: #141829d9;
    border: 1px solid #1B9E7740;
    font-family: var(--font-secondary);
    color: var(--text-secondary);
    line-height: 1.45;
    box-shadow: 0 0 35px #0B0D1780;
}

.fragment span { display: block; margin-bottom: 0.65rem; color: var(--accent-ruby); }
.f1 { grid-column: 1 / 4; grid-row: 2 / 3; transform: rotate(-2deg); opacity: .78; }
.f2 { grid-column: 6 / 11; grid-row: 1 / 3; transform: rotate(1.5deg); }
.f3 { grid-column: 10 / 13; grid-row: 5 / 6; transform: rotate(-1deg); opacity: .86; }
.f4 { grid-column: 2 / 6; grid-row: 7 / 9; transform: rotate(2deg); }
.f5 { grid-column: 8 / 12; grid-row: 8 / 9; transform: rotate(-2.5deg); opacity: .72; }
.f6 { grid-column: 5 / 8; grid-row: 3 / 4; transform: rotate(1deg); opacity: .82; }

.zone-resolution {
    display: grid;
    place-items: center;
    padding: 10vh 8vw;
}

.resolution-mesh {
    position: absolute;
    inset: 12vh 12vw;
    min-height: auto;
    opacity: .78;
    border: 0;
    background:
        radial-gradient(ellipse at 35% 55%, #2563EB33 0%, transparent 52%),
        radial-gradient(ellipse at 70% 25%, #1B9E7728 0%, transparent 45%),
        radial-gradient(ellipse at 50% 75%, #7B2D8E22 0%, transparent 55%),
        linear-gradient(160deg, #0B0D17 0%, #141829 100%);
}

.resolution-copy {
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
    text-align: center;
}

.resolution-copy h2 { margin-top: 1rem; }
.final-code { margin: 2.5rem auto 0; color: var(--accent-emerald); }

.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.glitch-text::before { color: var(--accent-ruby); clip-path: inset(0 0 65% 0); transform: translate(-2px, 1px); }
.glitch-text::after { color: var(--accent-sapphire); clip-path: inset(65% 0 0 0); transform: translate(2px, -1px); }
.glitching::before, .glitching::after { opacity: .75; animation: glitchShift 300ms steps(2) 1; }

.reveal { opacity: 0; transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.from-left { transform: translateX(-30px); }
.from-right { transform: translateX(30px); }
.reveal.in-view { opacity: 1; transform: translateX(0); }
.diamond-marker.pulse { animation: diamondPulse 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; }

@keyframes meshDrift {
    0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%, 0% 0%; }
    100% { background-position: 100% 100%, 0% 100%, 50% 0%, 100% 100%, 0% 0%; }
}

@keyframes glitchShift {
    0% { transform: translate(0); clip-path: inset(8% 0 70% 0); }
    35% { transform: translate(3px, -2px); clip-path: inset(45% 0 20% 0); }
    70% { transform: translate(-2px, 2px); clip-path: inset(0 0 58% 0); }
    100% { transform: translate(0); clip-path: inset(72% 0 5% 0); }
}

@keyframes diamondPulse { 50% { transform: rotate(45deg) scale(1.3); } }

@media (max-width: 768px) {
    .zone-declaration, .asymmetric { display: block; padding: 10vh 8vw; }
    .zone-declaration:nth-child(odd), .left-heavy { padding-left: 20vw; padding-right: 8vw; }
    .right-heavy { padding-left: 8vw; padding-right: 20vw; }
    .ethics-mesh { min-height: 42vh; margin-top: 2rem; }
    .center-channel, .timeline-line { display: none; }
    .timeline { min-height: auto; padding: 0 0 3rem; }
    .diamond-marker { display: inline-block; margin: 2rem 2rem 1rem 0; }
    .timeline-note { position: static; }
    .brief-copy, .proposition-stack { padding-left: 0; border-left: 0; }
    .fracture-grid { display: block; min-height: auto; }
    .fragment, .fracture-title { margin: 1rem 0; }
    .resolution-mesh { inset: 18vh 4vw; }
    .glitch-text::before { transform: translate(-1px, 1px); }
    .glitch-text::after { transform: translate(1px, -1px); }
}