/* =====================================================================
   completengine.com — the concurrency story engine
   blobitecture · magazine-spread · retro-display · dark-neon
   ===================================================================== */

:root {
    --void: #0B0820;
    --blob-flesh: #15102E;
    --blob-flesh-lit: #1F1843;
    --membrane: #0E0A24;
    --ink: #F4ECE0;
    --ink-mist: #B6A8D8;
    --ink-aubergine: #6E5A8E;
    --neon-cyan: #00F0FF;
    --neon-magenta: #FF2DA8;
    --neon-citron: #D8FF3D;
    --neon-sodium: #FF8A1F;
    --highlighter: #FFE94A;

    --elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html, body {
    background: var(--void);
    color: var(--ink);
    font-family: "DM Sans", system-ui, sans-serif;
    font-feature-settings: "tnum" 0;
    line-height: 1.5;
    overflow-x: hidden;
    cursor: none;
}

body {
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(31,24,67,0.55), transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 90%, rgba(110,90,142,0.18), transparent 70%),
        var(--void);
    min-height: 100vh;
    position: relative;
}

/* faint paper-grain texture across the whole zine */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg, rgba(244,236,224,0.012) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(244,236,224,0.012) 0 1px, transparent 1px 3px);
    mix-blend-mode: screen;
    z-index: 9998;
}

a { color: inherit; text-decoration: none; }

/* =====================================================================
   CURSOR HALO
   ===================================================================== */
#cursor-halo {
    position: fixed;
    top: 0; left: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--neon-cyan) 0%, rgba(0,240,255,0.55) 35%, rgba(0,240,255,0) 75%);
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0);
    mix-blend-mode: screen;
    box-shadow:
        0 0 12px var(--neon-cyan),
        0 0 38px rgba(0,240,255,0.55),
        0 0 80px rgba(0,240,255,0.25);
    z-index: 9999;
    transition: background 0.6s ease, box-shadow 0.6s ease;
}

@media (hover: none) {
    html, body { cursor: auto; }
    #cursor-halo { display: none; }
}

/* =====================================================================
   SHARED SPREAD SHELL
   ===================================================================== */
#zine {
    display: block;
    width: 100%;
    overflow: hidden;
}

.spread {
    position: relative;
    width: 100%;
    min-height: 140vh;
    padding: 8vh 6vw;
    overflow: hidden;
}

.spread + .spread { margin-top: -6vh; }

.spread-numeral {
    position: absolute;
    top: 4vh;
    right: 6vw;
    font-family: "Monoton", "Bagel Fat One", sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    color: var(--ink-aubergine);
    letter-spacing: 0.12em;
    text-shadow: 0 0 12px rgba(110,90,142,0.6);
    z-index: 5;
}

.spread-i .spread-numeral,
.spread-iv .spread-numeral { left: 6vw; right: auto; }

.spread-title {
    font-family: "Bagel Fat One", system-ui, sans-serif;
    font-size: clamp(2.2rem, 5.5vw, 4.6rem);
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 4;
    text-shadow:
        0 0 1px var(--neon-cyan),
        0 0 14px rgba(255,45,168,0.5),
        0 0 36px rgba(31,24,67,0.9);
}

.spread-kicker {
    font-family: "Caveat", cursive;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    color: var(--neon-citron);
    margin-bottom: 3rem;
    position: relative;
    z-index: 4;
}

.blob-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* =====================================================================
   SPREAD I — HERO
   ===================================================================== */
.spread-i {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blob-hero {
    filter:
        drop-shadow(0 0 24px rgba(0,240,255,0.35))
        drop-shadow(0 0 80px rgba(0,240,255,0.15));
}

.spread-i-content {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 1100px;
    width: 90%;
    transform: translateY(-2vh);
}

.hello-line {
    font-family: "Caveat", cursive;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--ink-mist);
    margin-bottom: 1.4rem;
    letter-spacing: 0.02em;
}

.hero-title {
    font-family: "Bagel Fat One", system-ui, sans-serif;
    font-size: clamp(4rem, 11vw, 12rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-shadow:
        0 0 1px var(--neon-cyan),
        0 0 12px var(--neon-magenta),
        0 0 36px rgba(31,24,67,0.95),
        0 0 80px rgba(255,45,168,0.25);
}

.amp-swap {
    color: var(--neon-magenta);
    font-family: "Bagel Fat One", system-ui, sans-serif;
    text-shadow:
        0 0 8px var(--neon-magenta),
        0 0 28px rgba(255,45,168,0.8),
        0 0 70px rgba(255,138,31,0.4);
    display: inline-block;
    transform: translateY(0.04em) rotate(-4deg);
}

.sub-blob {
    position: relative;
    margin: 3rem auto 0;
    max-width: 560px;
    padding: 2.4rem 2.8rem;
    transform: translateX(18%);
}

.blob-sub {
    filter: drop-shadow(0 0 18px rgba(255,138,31,0.3));
}

.hero-sub {
    position: relative;
    z-index: 2;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.5;
}

.scroll-arrow {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    text-align: center;
}
.scroll-arrow svg { width: 50px; height: 130px; display: block; margin: 0 auto; }
.felt-path {
    stroke-dasharray: 380;
    stroke-dashoffset: 380;
    animation: felt-draw 2.4s var(--elastic) 0.6s forwards, felt-bob 4s ease-in-out infinite 3s;
}
@keyframes felt-draw { to { stroke-dashoffset: 0; } }
@keyframes felt-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}
.scroll-label {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: "Caveat", cursive;
    color: var(--neon-citron);
    font-size: 1.2rem;
}

/* =====================================================================
   SPREAD II — VENN ORGANS
   ===================================================================== */
.spread-ii { padding-top: 12vh; }

.spread-ii .spread-title {
    text-align: left;
    margin-left: 2vw;
    max-width: 700px;
}

.venn-stage {
    position: relative;
    width: 100%;
    height: 110vh;
    margin-top: 4vh;
}

.blob-venn {
    position: absolute;
    width: 60%;
    height: 80%;
    mix-blend-mode: screen;
}

.organ-events { top: 4%; left: 8%; filter: drop-shadow(0 0 24px rgba(0,240,255,0.4)); }
.organ-time { top: 2%; right: 6%; filter: drop-shadow(0 0 24px rgba(255,45,168,0.4)); }
.organ-workers { bottom: 0%; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 0 24px rgba(216,255,61,0.35)); }

.organ-text {
    position: absolute;
    z-index: 4;
    max-width: 320px;
    padding: 1.5rem;
}
.organ-text h3 {
    font-family: "Bagel Fat One", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}
.organ-text p {
    font-family: "DM Sans", sans-serif;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    color: var(--ink-mist);
    line-height: 1.55;
}

.organ-text-events { top: 14%; left: 14%; }
.organ-text-events h3 { color: var(--neon-cyan); text-shadow: 0 0 14px rgba(0,240,255,0.7); }

.organ-text-time { top: 10%; right: 12%; text-align: right; }
.organ-text-time h3 { color: var(--neon-magenta); text-shadow: 0 0 14px rgba(255,45,168,0.7); }

.organ-text-workers { bottom: 10%; left: 50%; transform: translateX(-50%); text-align: center; max-width: 280px; }
.organ-text-workers h3 { color: var(--neon-citron); text-shadow: 0 0 14px rgba(216,255,61,0.7); }

.overlap-quote {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: clamp(280px, 36vw, 520px);
    text-align: center;
    font-family: "Fraunces", "Lora", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    color: var(--neon-sodium);
    line-height: 1.45;
    text-shadow: 0 0 12px rgba(255,138,31,0.6);
}
.overlap-quote em {
    color: var(--highlighter);
    background: linear-gradient(transparent 60%, rgba(255,233,74,0.25) 60%);
    padding: 0 2px;
    font-style: italic;
}

/* =====================================================================
   SPREAD III — LAYERED-DEPTH PARALLAX
   ===================================================================== */
.spread-iii { padding-top: 12vh; min-height: 160vh; }

.spread-iii .spread-title { margin-left: auto; margin-right: 4vw; text-align: right; max-width: 720px; }
.spread-iii .spread-kicker { text-align: right; margin-right: 4vw; }

.parallax-stage {
    position: relative;
    width: 100%;
    height: 90vh;
    margin-top: 4vh;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.depth-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: transform 0.4s var(--elastic);
}

.depth-layer .blob-svg {
    width: 92%;
    height: 88%;
    inset: 6% 4%;
}

.layer-5 { filter: blur(2px); }
.layer-5 .blob-svg { filter: drop-shadow(2px 0 0 rgba(0,240,255,0.18)) drop-shadow(-2px 0 0 rgba(255,45,168,0.18)); }

.layer-4 .blob-svg { filter: drop-shadow(1px 0 0 rgba(0,240,255,0.25)) drop-shadow(-1px 0 0 rgba(255,45,168,0.25)) drop-shadow(0 0 18px rgba(255,45,168,0.3)); }
.layer-3 .blob-svg { filter: drop-shadow(0 0 22px rgba(216,255,61,0.32)); }
.layer-2 .blob-svg { filter: drop-shadow(0 0 26px rgba(255,138,31,0.42)); }

.depth-label {
    position: absolute;
    bottom: 6%;
    left: 6%;
    font-family: "Caveat", cursive;
    color: var(--ink-mist);
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    opacity: 0.7;
}

.layer-2 .depth-label { bottom: 10%; left: auto; right: 8%; }
.layer-3 .depth-label { top: 8%; left: 8%; bottom: auto; }
.layer-4 .depth-label { top: 10%; right: 6%; left: auto; bottom: auto; }
.layer-5 .depth-label { top: 6%; left: 50%; transform: translateX(-50%); bottom: auto; }

.depth-foreground {
    color: var(--neon-cyan) !important;
    font-size: 1.4rem !important;
    text-shadow: 0 0 12px rgba(0,240,255,0.7);
    opacity: 1 !important;
}

.layer-1 {
    z-index: 5;
}

.event-particle {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 36px; height: 36px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.event-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--neon-cyan) 40%, rgba(0,240,255,0) 80%);
    box-shadow:
        0 0 18px var(--neon-cyan),
        0 0 50px rgba(0,240,255,0.6),
        0 0 100px rgba(255,138,31,0.3);
    animation: pulse-core 2.2s ease-in-out infinite;
}
@keyframes pulse-core {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}
.event-trail {
    position: absolute;
    top: 50%; right: 100%;
    width: 200px; height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(to left, var(--neon-cyan), rgba(0,240,255,0));
    opacity: 0.7;
}

/* =====================================================================
   SPREAD IV — FIELD GUIDE
   ===================================================================== */
.spread-iv { padding-top: 12vh; min-height: 150vh; }
.spread-iv .spread-title { margin-left: 6vw; max-width: 800px; }

.field-guide {
    position: relative;
    width: 100%;
    margin-top: 4vh;
    padding: 6vh 4vw;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 5vw;
    align-items: start;
}

.blob-guide {
    filter: drop-shadow(0 0 30px rgba(255,233,74,0.18));
}

.guide-prose {
    position: relative;
    z-index: 4;
    padding: 2rem 2.5rem;
    max-width: 560px;
}
.guide-prose p {
    font-family: "Fraunces", "Lora", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink);
    margin-bottom: 1.1rem;
}
.guide-prose .prose-lead {
    font-size: clamp(1.4rem, 1.9vw, 1.8rem);
    color: var(--highlighter);
    font-style: italic;
    margin-bottom: 1.6rem;
}
.guide-prose em { color: var(--neon-sodium); font-style: italic; }
.prose-aside {
    margin-top: 2rem !important;
    font-family: "Caveat", cursive !important;
    font-style: normal !important;
    font-size: 1.4rem !important;
    color: var(--neon-citron) !important;
}

.bestiary {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    padding: 2rem;
}

.creature {
    text-align: center;
    transition: transform 0.5s var(--elastic);
}
.creature:hover { transform: translateY(-6px) rotate(-1.5deg); }

.creature-canvas {
    display: block;
    margin: 0 auto;
    width: 160px; height: 160px;
    background: radial-gradient(circle at 50% 55%, rgba(31,24,67,0.7), transparent 70%);
    border-radius: 50%;
}

.creature figcaption {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
}
.creature-name {
    font-family: "Caveat", cursive;
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
}
.creature-note {
    font-family: "DM Sans", sans-serif;
    color: var(--ink-aubergine);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

/* =====================================================================
   SPREAD V — DETERMINISM MIRROR
   ===================================================================== */
.spread-v { padding-top: 12vh; min-height: 130vh; }
.spread-v .spread-title { text-align: center; }
.spread-v .spread-kicker { text-align: center; }

.mirror-stage {
    position: relative;
    width: 100%;
    margin-top: 4vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
    padding: 0 4vw;
    align-items: center;
    min-height: 80vh;
}

.mirror-half {
    position: relative;
    aspect-ratio: 1.15 / 1;
    width: 100%;
}

.mirror-half .blob-svg {
    width: 100%; height: 100%;
}
.mirror-left .blob-svg { filter: drop-shadow(0 0 28px rgba(0,240,255,0.35)); }
.mirror-right .blob-svg { filter: drop-shadow(0 0 28px rgba(255,45,168,0.35)); }

.trace-canvas {
    position: absolute;
    top: 12%; left: 12%;
    width: 76%; height: 76%;
    z-index: 3;
}

.mirror-label {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "DM Sans", sans-serif;
    font-size: 0.95rem;
    color: var(--ink-mist);
    letter-spacing: 0.05em;
    z-index: 4;
}
.seed-display {
    font-family: "Monoton", monospace;
    color: var(--highlighter);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    margin-left: 0.4rem;
}

.mirror-controls {
    grid-column: 1 / -1;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.ctrl-btn {
    font-family: "DM Sans", sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--neon-citron);
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    cursor: none;
    transition: background 0.4s var(--elastic), color 0.4s var(--elastic), transform 0.4s var(--elastic);
    letter-spacing: 0.02em;
}
.ctrl-btn:hover {
    background: var(--neon-citron);
    color: var(--void);
    transform: translateY(-2px);
}
#ctrl-scrub {
    -webkit-appearance: none;
    appearance: none;
    width: 240px;
    height: 4px;
    background: var(--blob-flesh-lit);
    border-radius: 2px;
    cursor: none;
}
#ctrl-scrub::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--neon-cyan);
    box-shadow: 0 0 14px var(--neon-cyan);
    cursor: none;
}
#ctrl-scrub::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--neon-cyan);
    border: none;
    box-shadow: 0 0 14px var(--neon-cyan);
}

/* =====================================================================
   SPREAD VI — LETTER
   ===================================================================== */
.spread-vi { padding-top: 12vh; min-height: 160vh; }

.letter-stage {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.blob-letter {
    width: 56%;
    max-width: 640px;
    height: 130vh;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 28px rgba(182,168,216,0.22));
}

.letter-body {
    position: relative;
    z-index: 4;
    width: 46%;
    max-width: 520px;
    padding: 4rem 2rem 3rem;
    text-align: left;
}

.letter-body p {
    font-family: "Fraunces", "Lora", serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 1.3rem;
    text-align: left;
}
.letter-body em { color: var(--neon-sodium); font-style: italic; }

.letter-salutation {
    font-family: "Caveat", cursive !important;
    font-size: 2rem !important;
    color: var(--highlighter) !important;
    margin-bottom: 1.6rem !important;
}

.letter-closing {
    margin-top: 2rem !important;
    color: var(--ink-mist) !important;
    font-style: italic !important;
}

.letter-signature {
    font-family: "Caveat", cursive !important;
    font-size: 1.8rem !important;
    color: var(--neon-citron) !important;
    margin-top: 1.5rem !important;
    transform: rotate(-3deg);
    transform-origin: left center;
}
.letter-date {
    font-family: "Monoton", sans-serif !important;
    font-size: 0.9rem !important;
    color: var(--ink-aubergine) !important;
    letter-spacing: 0.18em !important;
    margin-top: 2.4rem !important;
}

/* =====================================================================
   SPREAD VII — BALLOONS
   ===================================================================== */
.spread-vii { padding-top: 12vh; min-height: 130vh; }
.spread-vii .spread-title { text-align: center; }
.spread-vii .spread-kicker { text-align: center; }

.balloons-stage {
    position: relative;
    width: 100%;
    height: 80vh;
    margin-top: 6vh;
}

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

.balloon {
    position: absolute;
    width: 220px;
    height: 220px;
    cursor: none;
    transform-origin: 50% 100%;
    transition: transform 0.6s var(--elastic);
    z-index: 4;
}

.balloon .blob-svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 0 28px currentColor);
}

.balloon-1 { top: 10%; left: 18%; color: var(--neon-cyan); }
.balloon-2 { top: 6%; left: 50%; transform: translateX(-50%); color: var(--neon-magenta); }
.balloon-3 { top: 12%; right: 16%; color: var(--neon-citron); }

.balloon:hover {
    transform: translateY(-12px) rotate(-2deg);
}
.balloon-2:hover { transform: translate(-50%, -12px) rotate(2deg); }

.balloon-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-family: "Bagel Fat One", sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.2rem);
    color: var(--ink);
    text-align: center;
    width: 70%;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 20px currentColor;
}

.balloon-1 .balloon-label { color: var(--neon-cyan); }
.balloon-2 .balloon-label { color: var(--neon-magenta); }
.balloon-3 .balloon-label { color: var(--neon-citron); }

.colophon {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    text-align: center;
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    color: var(--ink-aubergine);
    letter-spacing: 0.04em;
    line-height: 1.4;
}

/* =====================================================================
   ENTRY ANIMATIONS — elastic reveal
   ===================================================================== */
.spread {
    opacity: 0;
    transform: translateY(40px) scale(0.985);
    transition: opacity 1s var(--elastic), transform 1s var(--elastic);
}
.spread.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.spread.spread-i { opacity: 1; transform: none; }

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 880px) {
    html, body { cursor: auto; }
    #cursor-halo { display: none; }

    .spread { padding: 6vh 5vw; min-height: auto; }

    .hero-title { font-size: clamp(3.4rem, 14vw, 6rem); }
    .sub-blob { transform: none; margin-top: 2rem; padding: 2rem; }

    .venn-stage {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        align-items: stretch;
    }
    .blob-venn {
        position: relative;
        width: 100%;
        height: 60vh;
        inset: auto;
    }
    .organ-events, .organ-time, .organ-workers {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        transform: none;
    }
    .organ-text {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        transform: none;
        max-width: 100%;
        text-align: left;
        margin-top: -55vh;
        padding: 2rem;
    }
    .organ-text-time, .organ-text-workers { text-align: left; }
    .overlap-quote {
        position: relative;
        top: auto; left: auto;
        transform: none;
        width: 100%;
        margin: 2rem 0;
    }

    .parallax-stage { height: 110vh; }
    .depth-layer .blob-svg { width: 96%; height: 92%; inset: 4% 2%; }
    .depth-label { font-size: 0.85rem !important; }

    .field-guide { grid-template-columns: 1fr; gap: 3rem; padding: 4vh 2vw; }
    .bestiary { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; padding: 1rem; }
    .creature-canvas { width: 130px; height: 130px; }

    .mirror-stage { grid-template-columns: 1fr; gap: 2rem; }
    .mirror-half { aspect-ratio: 1 / 1; }

    .blob-letter { width: 88%; height: 100%; }
    .letter-body { width: 78%; padding: 2rem 1rem; }

    .balloons-stage { height: auto; display: flex; flex-direction: column; gap: 2rem; align-items: center; padding-bottom: 8rem; }
    .balloon { position: relative; top: auto; left: auto; right: auto; transform: none; width: 200px; height: 200px; }
    .balloon-2 { transform: none; }
    .strings-svg { display: none; }
    .colophon { position: relative; bottom: auto; left: auto; transform: none; width: 90%; margin-top: 3rem; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .spread { opacity: 1; transform: none; transition: none; }
    .felt-path { stroke-dashoffset: 0; animation: none; }
    .event-core { animation: none; }
    .balloon, .creature { transition: none; }
}