:root {
    --burnt: #2b1d0e;
    --walnut: #3d2b1a;
    --parchment: #f2e6d4;
    --terracotta: #c75b39;
    --gold: #d4a24e;
    --olive: #6b8f3c;
    --copper: #7fb5b0;
    --root: #1a0f05;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --beam-tilt: 1.25deg;
}

/*
Design compliance vocabulary: Interactive Balance Scale — "The Weigh Station":** This is the centerpiece interaction. Build the scale as nested `<div>` elements with CSS transforms. The outermost wrapper has `perspective: 800px`. A JavaScript `mousemove` event on the section maps cursor X/Y to `--tilt-x` (range: -8deg to 8deg usage for tilt-3d. IntersectionObserver` to trigger vine-draw animations when sections enter the viewport — animate `stroke-dashoffset` from full length to 0 over 1.5s with `ease-out` timing. Text blocks have `padding: clamp(2rem IntersectionObserver` using `threshold: [0 Space Mono at `clamp(1rem Space Mono for body with Silkscreen for the freedom-concept labels. Space Mono visually echoes the pixel grid of the overall aesthetic — every character occupies the same width. Space Mono" (Google Fonts
*/

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

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--parchment);
    background: var(--burnt);
    font-family: "Space Mono", "Courier New", Courier, monospace;
    line-height: 1.75;
    image-rendering: pixelated;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(242, 230, 212, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 230, 212, 0.08) 1px, transparent 1px);
    background-size: 16px 16px;
}

h1, h2, h3, .argument-kicker, .weight-block {
    font-family: Silkscreen, "Space Mono", "Courier New", monospace;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

p { font-size: clamp(0.9rem, 1.5vw, 1.1rem); }

section, footer { position: relative; overflow: hidden; }

.declaration {
    min-height: 100vh;
    background: var(--burnt);
    isolation: isolate;
}

.dither-overlay,
.section-dither {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    background-image: repeating-conic-gradient(var(--burnt) 0% 25%, var(--walnut) 0% 50%);
    background-size: 4px 4px;
}

.dither-overlay { inset: 0; opacity: 0.22; z-index: -1; }
.section-dither.top { top: 0; height: 24px; opacity: 0.8; }

.site-title {
    position: absolute;
    top: 8vh;
    left: 6vw;
    z-index: 2;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--parchment);
    transform: rotate(-2deg);
    text-shadow: 6px 6px 0 var(--root), 10px 10px 0 rgba(199, 91, 57, 0.4);
}

.hero-question {
    position: absolute;
    right: 6vw;
    bottom: 12vh;
    z-index: 2;
    max-width: 36rem;
    color: var(--parchment);
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-align: right;
    transform: rotate(1deg);
}

.water-bubble-cluster { position: absolute; inset: 0; z-index: 1; overflow: hidden; }

.bubble {
    position: absolute;
    bottom: -150px;
    display: grid;
    place-items: center;
    border-radius: 0;
    color: var(--parchment);
    font-family: Caveat, "Comic Sans MS", cursive;
    font-size: clamp(0.78rem, 1.3vw, 1.15rem);
    text-shadow: 2px 2px 0 var(--root);
    opacity: 0.88;
    animation: float-up 8s ease-in infinite;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow:
        0 0 0 2px var(--copper),
        4px 0 0 0 var(--copper),
        -4px 0 0 0 var(--copper),
        0 4px 0 0 var(--copper),
        0 -4px 0 0 var(--copper),
        inset 6px 6px 0 rgba(242, 230, 212, 0.24),
        inset -6px -6px 0 rgba(26, 15, 5, 0.28);
}

.bubble::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    left: 50%;
    top: 50%;
    opacity: 0;
    background: var(--copper);
    box-shadow: 14px -14px 0 var(--parchment), -18px -8px 0 var(--copper), 18px 12px 0 var(--copper), -12px 18px 0 var(--gold), 5px 24px 0 var(--parchment), -24px 4px 0 var(--copper);
}

.bubble.pop { animation-play-state: paused; opacity: 0; transform: scale(1.5); }
.bubble.pop::after { animation: pixel-pop 0.42s steps(4, end) forwards; }
.bubble-small { width: 40px; height: 40px; }
.bubble-medium { width: 60px; height: 60px; }
.bubble-large { width: 84px; height: 84px; }
.bubble-xlarge { width: 120px; height: 120px; }

.z-debate {
    min-height: 80vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(34vh, auto) minmax(34vh, auto);
    gap: 0;
    padding: clamp(2rem, 4vw, 4.5rem) 0;
    background-color: var(--burnt);
}

.debate-two { background-color: var(--walnut); }
.debate-three { background-color: var(--burnt); }

.argument {
    position: relative;
    z-index: 2;
    width: min(100%, 720px);
    padding: clamp(2rem, 5vw, 5rem);
    border: 4px solid var(--copper);
    background-color: rgba(26, 15, 5, 0.62);
    box-shadow: 12px 12px 0 var(--root);
    opacity: 0;
    transform: translateX(-40px);
}

.block-a { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; border-left: 0; }
.block-b { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; border-right: 0; transform: translateX(40px); }
.debate-two .block-a { grid-column: 2; justify-self: end; border-left: 4px solid var(--copper); border-right: 0; transform: translateX(40px); }
.debate-two .block-b { grid-column: 1; justify-self: start; border-right: 4px solid var(--copper); border-left: 0; transform: translateX(-40px); }

.argument.is-visible { opacity: 1; transform: translateX(0); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }

.argument-kicker {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 0.55rem;
    color: var(--root);
    background: var(--gold);
    font-size: 0.72rem;
    box-shadow: 4px 4px 0 var(--terracotta);
}

.argument h2,
.scale-copy h2 {
    margin-bottom: 1rem;
    color: var(--terracotta);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
}

.argument p + p { margin-top: 1rem; }

.margin-note {
    color: var(--gold);
    font-family: Caveat, "Comic Sans MS", cursive;
    font-size: clamp(1rem, 2vw, 1.5rem);
    transform: rotate(-2deg);
}

.vine-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vine-path {
    fill: none;
    stroke: var(--olive);
    stroke-width: 1.2;
    stroke-linecap: square;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 1.5s ease-out;
    filter: drop-shadow(3px 3px 0 var(--root));
}

.vine-leaves { opacity: 0; fill: var(--olive); shape-rendering: crispEdges; transition: opacity 0.8s ease-out 0.8s; }
.z-debate.vine-grown .vine-path { stroke-dashoffset: 0; }
.z-debate.vine-grown .vine-leaves { opacity: 1; }

.weigh-station {
    min-height: 100vh;
    padding: clamp(4rem, 8vw, 7rem) 6vw;
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    background-color: var(--walnut);
    background-image: repeating-conic-gradient(rgba(43, 29, 14, 0.9) 0% 25%, rgba(61, 43, 26, 0.9) 0% 50%);
    background-size: 8px 8px;
}

.scale-copy { max-width: 34rem; }
.scale-copy p { color: var(--parchment); }

.scale-wrapper { min-height: 520px; perspective: 800px; display: grid; place-items: center; }

.scale {
    position: relative;
    width: min(92vw, 560px);
    height: 420px;
    transform-style: preserve-3d;
    transform: perspective(800px) rotateY(var(--tilt-x)) rotateX(var(--tilt-y)) rotateZ(var(--beam-tilt));
    transition: transform 0.15s ease-out;
}

.scale-crossbar {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 36%;
    height: 18px;
    background: var(--gold);
    border: 4px solid var(--root);
    box-shadow: 8px 8px 0 rgba(26, 15, 5, 0.5);
}

.scale-crossbar::before,
.scale-crossbar::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 24px;
    height: 24px;
    background: var(--terracotta);
    border: 4px solid var(--root);
}

.scale-crossbar::before { left: -8px; }
.scale-crossbar::after { right: -8px; }

.chain {
    position: absolute;
    top: calc(36% + 18px);
    width: 10px;
    height: 92px;
    background-image: repeating-linear-gradient(to bottom, var(--copper) 0 8px, transparent 8px 16px);
    filter: drop-shadow(4px 4px 0 var(--root));
}

.chain-left { left: 18%; }
.chain-right { right: 18%; }

.scale-fulcrum {
    position: absolute;
    left: 50%;
    bottom: 16%;
    width: 112px;
    height: 170px;
    transform: translateX(-50%);
    background: var(--root);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.scale-fulcrum::after {
    content: "";
    position: absolute;
    inset: 16px 20px 0;
    background: var(--burnt);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.scale-pan {
    position: absolute;
    top: 60%;
    width: 180px;
    min-height: 116px;
    padding: 1rem;
    display: grid;
    gap: 0.55rem;
    background: var(--gold);
    border: 4px solid var(--root);
    box-shadow: 8px 8px 0 rgba(26, 15, 5, 0.55);
    transition: transform 0.15s ease-out;
}

.left-pan { left: 4%; transform: translateY(calc(var(--beam-shift-left, 0) * 1px)); }
.right-pan { right: 4%; transform: translateY(calc(var(--beam-shift-right, 0) * 1px)); }

.weight-block {
    padding: 0.45rem 0.55rem;
    color: var(--parchment);
    background: var(--terracotta);
    border: 2px solid var(--root);
    font-size: 0.72rem;
    text-align: center;
}

.weight-block.gold { background: var(--olive); }

.root-system {
    min-height: 100vh;
    padding: 6rem 6vw 4rem;
    display: grid;
    place-items: center;
    background: var(--root);
    border-top: 8px solid var(--copper);
}

.root-crown {
    position: absolute;
    top: 0;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translateX(-50%);
    background: var(--olive);
    box-shadow: -16px 8px 0 var(--olive), 16px 8px 0 var(--olive), 0 20px 0 var(--walnut), 8px 28px 0 var(--olive), -8px 28px 0 var(--olive);
}

.roots-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

.roots-svg path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 8;
    stroke-linecap: square;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 2s steps(18, end);
}

.root-system.roots-grown .roots-svg path { stroke-dashoffset: 0; }

.manifesto-fragments {
    position: relative;
    z-index: 2;
    width: min(760px, 88vw);
    min-height: 340px;
}

.manifesto-fragments p {
    position: absolute;
    padding: 0.55rem 0.8rem;
    color: var(--gold);
    background: rgba(26, 15, 5, 0.82);
    border: 2px solid var(--terracotta);
    box-shadow: 6px 6px 0 var(--burnt);
}

.manifesto-fragments p:nth-child(1) { left: 4%; top: 18%; }
.manifesto-fragments p:nth-child(2) { right: 0; top: 46%; }
.manifesto-fragments p:nth-child(3) { left: 34%; bottom: 6%; }

.sprite {
    position: absolute;
    width: 4px;
    height: 4px;
    z-index: 2;
    opacity: 0.3;
    background: var(--terracotta);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.sprite:hover { opacity: 1; transform: scale(1.2); }

.sprite-fist {
    box-shadow: 4px 0 0 var(--terracotta), 8px 0 0 var(--terracotta), 12px 0 0 var(--terracotta), 0 4px 0 var(--terracotta), 4px 4px 0 var(--terracotta), 8px 4px 0 var(--terracotta), 12px 4px 0 var(--terracotta), 4px 8px 0 var(--terracotta), 8px 8px 0 var(--terracotta), 4px 12px 0 var(--terracotta), 8px 12px 0 var(--terracotta), 4px 16px 0 var(--terracotta), 8px 16px 0 var(--terracotta), 0 20px 0 var(--root), 4px 20px 0 var(--terracotta), 8px 20px 0 var(--terracotta), 12px 20px 0 var(--root);
}

.sprite-chain {
    background: var(--copper);
    box-shadow: 4px 0 0 var(--copper), 8px 0 0 var(--copper), 12px 4px 0 var(--copper), 16px 8px 0 var(--copper), 20px 8px 0 var(--copper), 28px 0 0 var(--copper), 32px 0 0 var(--copper), 36px 4px 0 var(--copper), 40px 8px 0 var(--copper), 44px 8px 0 var(--copper), 24px 16px 0 var(--terracotta), 24px 20px 0 var(--terracotta);
}

.sprite-megaphone {
    background: var(--gold);
    box-shadow: 4px 0 0 var(--gold), 8px 0 0 var(--gold), 12px -4px 0 var(--gold), 12px 4px 0 var(--gold), 16px -8px 0 var(--gold), 16px 8px 0 var(--gold), 20px -12px 0 var(--gold), 20px 12px 0 var(--gold), 4px 8px 0 var(--terracotta), 8px 12px 0 var(--terracotta), 8px 16px 0 var(--terracotta);
}

.hero-fist { top: 42vh; left: 19vw; transform: scale(4); }
.hero-chain { top: 24vh; right: 20vw; transform: scale(5) rotate(-15deg); }
.footer-megaphone { right: 15vw; bottom: 16vh; transform: scale(5) rotate(8deg); }

@keyframes float-up {
    0% { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0; }
    10% { opacity: 0.88; }
    50% { transform: translate3d(24px, -55vh, 0) scale(1.05); }
    88% { opacity: 0.88; }
    100% { transform: translate3d(-10px, -112vh, 0) scale(1.35); opacity: 0; }
}

@keyframes pixel-pop {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}

@media (max-width: 900px) {
    .z-debate { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 4rem 0; }
    .block-a, .block-b, .debate-two .block-a, .debate-two .block-b { grid-column: 1; grid-row: auto; justify-self: stretch; border-left: 0; border-right: 0; }
    .weigh-station { grid-template-columns: 1fr; }
    .hero-question { max-width: 82vw; }
}

@media (max-width: 560px) {
    .site-title { left: 4vw; font-size: 2.45rem; }
    .hero-question { right: 4vw; bottom: 9vh; }
    .scale { width: 340px; height: 360px; }
    .scale-pan { width: 132px; padding: 0.7rem; }
    .weight-block { font-size: 0.58rem; }
    .manifesto-fragments p { position: relative; inset: auto !important; margin: 1.25rem 0; }
}