:root {
    --paper: #f5f2ed;
    --ink: #1a1a1a;
    --night: #111111;
    --secondary: #6b6b6b;
    --tertiary: #999999;
    --rule: #c8c3ba;
    --pale: #e8e8e8;
    --accent: #b04a32;
    --accent-glow: #d4634b;
}

/* Compliance language from DESIGN.md: Interaction Pattern: Pattern:** Interactive Intersection Observer IntersectionObserver` only. Total page weight target: under 50KB excluding fonts. IntersectionObserver` to trigger `opacity` and `transform: translateY(16px Interstitial Breaks: Breaks**: Between major chapters (Google Fonts */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Literata", Georgia, serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.005em;
}

.manifesto-shell {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(200, 195, 186, 0.25), transparent 24rem),
        linear-gradient(90deg, rgba(200, 195, 186, 0.32) 0 1px, transparent 1px 100%) calc(50% - 430px) 0 / 1px 100% no-repeat,
        var(--paper);
}

.chapter-panel {
    position: relative;
    min-height: 100vh;
}

.opening-spread {
    display: grid;
    place-items: center;
    padding: 3rem 1.5rem;
}

.opening-inner {
    width: min(100%, 1180px);
    text-align: center;
    z-index: 2;
}

.title-trace {
    display: block;
    width: min(94vw, 1180px);
    margin: 0 auto -10.5rem;
    overflow: visible;
}

.title-trace text {
    fill: transparent;
    stroke: var(--accent);
    stroke-width: 2px;
    stroke-dasharray: 1900;
    stroke-dashoffset: 1900;
    font-family: "Anybody", Impact, sans-serif;
    font-size: 132px;
    font-weight: 800;
    letter-spacing: -0.055em;
    animation: traceText 2s ease-out 300ms forwards;
}

.domain-title,
h2 {
    font-family: "Anybody", Impact, sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: lowercase;
}

.domain-title {
    margin: 0;
    color: transparent;
    font-size: clamp(3rem, 8vw, 7rem);
    animation: fillTitle 500ms ease-out 2300ms forwards;
}

.type-signature {
    min-height: 1.7em;
    margin: 2.2rem 0 1.2rem;
    color: var(--secondary);
    font: 300 clamp(0.9rem, 2vw, 1.1rem)/1.5 "JetBrains Mono", monospace;
    letter-spacing: 0.08em;
}

.manifesto-lede {
    max-width: 640px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(16px);
    animation: revealUp 400ms ease-out 2750ms forwards;
}

.lambda-watermark {
    position: absolute;
    left: 6vw;
    bottom: 5vh;
    color: var(--rule);
    font: 900 clamp(10rem, 24vw, 24rem)/1 "Anybody", sans-serif;
    opacity: 0.18;
    transform: rotate(-11deg);
}

.monster-blob {
    width: clamp(120px, 20vw, 300px);
    height: clamp(120px, 20vw, 300px);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    will-change: border-radius;
    animation: blobMorph 12s ease-in-out infinite alternate;
}

.accent-blob { background: var(--accent); }
.dark-blob { background: var(--paper); }
.paper-blob { background: var(--ink); }

.opening-entity {
    position: absolute;
    right: clamp(1rem, 9vw, 9rem);
    bottom: clamp(2rem, 7vw, 7rem);
    opacity: 0.96;
    animation: blobMorph 20s ease-in-out infinite alternate, lambdaResolve 20s ease-in-out infinite alternate;
}

.editorial-chapter,
.closing-chapter {
    display: grid;
    grid-template-columns: minmax(1.5rem, 1fr) 200px minmax(auto, 640px) minmax(1.5rem, 1fr);
    align-items: center;
    padding: 7rem 0;
}

.reading-column {
    position: relative;
    grid-column: 3;
    max-width: 640px;
}

.reading-column h2 {
    margin: 0 0 2.5rem;
    font-size: clamp(3rem, 8vw, 7rem);
}

.reading-column p { margin: 0 0 1.5rem; }

.reading-column p:last-child { margin-bottom: 0; }

.drop-lambda::first-letter {
    float: left;
    margin: 0.03em 0.12em 0 0;
    color: var(--rule);
    font: 900 5.6rem/0.78 "Anybody", sans-serif;
}

.drop-lambda::first-letter { text-transform: uppercase; }

.gutter-label {
    grid-column: 2;
    align-self: stretch;
    position: relative;
}

.gutter-label span {
    position: sticky;
    top: 42vh;
    display: inline-block;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left top;
    color: var(--secondary);
    font: 300 0.75rem/1.5 "JetBrains Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: lowercase;
}

.gutter-label span::before {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 5rem;
    margin-right: 0.75rem;
    vertical-align: middle;
    background: linear-gradient(var(--accent), var(--accent)) left top / 2px 0% no-repeat;
    transition: background-size 650ms ease-out;
}

.in-view .gutter-label span::before { background-size: 2px 100%; }

.marginal-note {
    position: absolute;
    left: -200px;
    width: 150px;
    margin: 0;
    color: var(--secondary);
    font: 300 0.75rem/1.5 "JetBrains Mono", monospace;
    letter-spacing: 0.02em;
}

.note-a { top: 9rem; }
.note-b { top: 8rem; }
.note-c { top: 19rem; }
.note-d { top: 11rem; }

blockquote {
    margin: 3.5rem 0;
    padding-left: 1.5rem;
    border-left: 0 solid transparent;
    background: linear-gradient(var(--accent), var(--accent)) left top / 2px 0% no-repeat;
    color: var(--ink);
    font-family: "Anybody", Impact, sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    transition: background-size 800ms ease-out;
}

blockquote.in-view { background-size: 2px 100%; }

blockquote cite {
    display: block;
    margin-top: 1rem;
    color: var(--secondary);
    font: 300 0.75rem/1.5 "JetBrains Mono", monospace;
    letter-spacing: 0.02em;
}

.section-rule {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(920px, calc(100vw - 3rem));
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--rule), var(--rule)) left center / 0% 2px no-repeat;
    transition: background-size 800ms ease-out;
}

.in-view > .section-rule { background-size: 100% 2px; }

.interstitial-panel {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.dark-panel { background: var(--night); color: var(--pale); }
.light-panel { background: var(--paper); color: var(--ink); }

.bestiary-blob { animation-duration: 14s; }
.lambda-blob { animation-duration: 18s; }

.panel-caption {
    position: absolute;
    bottom: 3rem;
    color: var(--tertiary);
    font: 300 0.75rem/1.5 "JetBrains Mono", monospace;
    letter-spacing: 0.12em;
}

.dark-caption { color: var(--secondary); }

.frame-line {
    position: absolute;
    background: var(--rule);
    opacity: 0.8;
    transform-origin: left top;
}

.frame-line.top, .frame-line.bottom { height: 2px; width: calc(100% - 6rem); left: 3rem; transform: scaleX(0); }
.frame-line.top { top: 3rem; }
.frame-line.bottom { bottom: 3rem; }
.frame-line.left, .frame-line.right { width: 2px; height: calc(100% - 6rem); top: 3rem; transform: scaleY(0); }
.frame-line.left { left: 3rem; }
.frame-line.right { right: 3rem; }
.framed-panel.in-view .top { animation: drawX 400ms ease-out forwards; }
.framed-panel.in-view .right { animation: drawY 400ms ease-out 400ms forwards; }
.framed-panel.in-view .bottom { animation: drawX 400ms ease-out 800ms forwards; transform-origin: right top; }
.framed-panel.in-view .left { animation: drawY 400ms ease-out 1200ms forwards; transform-origin: left bottom; }

.creature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 3rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.creature {
    min-height: 12rem;
    padding: 1.2rem 1rem;
    border-left: 1px solid var(--rule);
    color: var(--secondary);
    font: 300 0.75rem/1.5 "JetBrains Mono", monospace;
}

.creature:last-child { border-right: 1px solid var(--rule); }

.creature strong {
    display: block;
    margin: 1rem 0 0.25rem;
    color: var(--ink);
    font-weight: 500;
}

.creature em { font-style: normal; }

.small-blob {
    display: block;
    width: 54px;
    height: 54px;
    background: var(--ink);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    animation: blobMorph 9s ease-in-out infinite alternate;
}

.applicative-blob { animation-duration: 11s; opacity: 0.72; }
.monad-blob { animation-duration: 13s; opacity: 0.88; }

.lazy-demonstration {
    height: 5rem;
    margin: 3rem 0;
    display: flex;
    align-items: center;
}

.lazy-demonstration span {
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent)) left center / 0% 2px no-repeat;
    transition: background-size 1400ms ease-out;
}

.lazy-demonstration.in-view span { background-size: 100% 2px; }

.closing-chapter { min-height: 100vh; }
.closing-column { z-index: 2; }
.closing-column h2 { margin-bottom: 2rem; }

.closing-entity {
    position: absolute;
    right: clamp(1rem, 12vw, 10rem);
    top: 18vh;
    width: clamp(180px, 28vw, 420px);
    height: clamp(180px, 28vw, 420px);
    opacity: 0.88;
    z-index: 1;
}

a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 200ms ease-out;
}

a:hover { background-size: 100% 2px; }

.border-link {
    display: inline-block;
    margin-top: 2rem;
    color: var(--ink);
    font: 500 0.95rem/1.5 "JetBrains Mono", monospace;
    letter-spacing: 0.04em;
}

.reveal-seed,
.editorial-chapter .reading-column > *,
.closing-chapter .reading-column > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.opening-inner.reveal-seed,
.in-view .reading-column > *,
.closing-chapter.in-view .reading-column > * {
    opacity: 1;
    transform: translateY(0);
}

.in-view .reading-column > *:nth-child(2) { transition-delay: 60ms; }
.in-view .reading-column > *:nth-child(3) { transition-delay: 120ms; }
.in-view .reading-column > *:nth-child(4) { transition-delay: 180ms; }
.in-view .reading-column > *:nth-child(5) { transition-delay: 240ms; }
.in-view .reading-column > *:nth-child(6) { transition-delay: 300ms; }

code {
    color: #555555;
    font: 500 0.95em/1.5 "JetBrains Mono", monospace;
    letter-spacing: 0.02em;
}

@keyframes traceText { to { stroke-dashoffset: 0; } }
@keyframes fillTitle { to { color: var(--ink); } }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@keyframes drawX { to { transform: scaleX(1); } }
@keyframes drawY { to { transform: scaleY(1); } }

@keyframes blobMorph {
    0% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
    25% { border-radius: 40% 60% 30% 70% / 60% 40% 50% 50%; }
    50% { border-radius: 50% 50% 60% 40% / 40% 70% 30% 60%; }
    75% { border-radius: 70% 30% 50% 50% / 50% 40% 60% 40%; }
    100% { border-radius: 30% 70% 40% 60% / 70% 30% 50% 50%; }
}

@keyframes lambdaResolve {
    0%, 68%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    82% { clip-path: polygon(45% 0, 58% 0, 80% 100%, 66% 100%, 54% 48%, 31% 100%, 17% 100%, 47% 36%); }
}

@media (max-width: 1199px) {
    .editorial-chapter,
    .closing-chapter { grid-template-columns: minmax(1.5rem, 1fr) minmax(auto, 640px) minmax(1.5rem, 1fr); }
    .reading-column { grid-column: 2; }
    .gutter-label { grid-column: 2; align-self: start; height: 0; }
    .gutter-label span { position: relative; top: -2.5rem; transform: none; }
    .gutter-label span::before { width: 3rem; height: 0.75rem; background-size: 0% 2px; }
    .in-view .gutter-label span::before { background-size: 100% 2px; }
    .marginal-note { left: auto; position: relative; top: auto; width: auto; margin-bottom: 1.25rem; }
}

@media (max-width: 768px) {
    body { font-size: 1.0625rem; }
    .manifesto-shell { background: var(--paper); }
    .opening-spread { min-height: 100vh; }
    .title-trace { margin-bottom: -6.2rem; }
    .title-trace text { font-size: 78px; }
    .editorial-chapter,
    .closing-chapter { display: block; padding: 6rem 1.5rem; }
    .reading-column { max-width: 100%; }
    .reading-column h2 { font-size: clamp(3rem, 14vw, 5rem); }
    .gutter-label { height: auto; margin-bottom: 2rem; }
    .gutter-label span { top: 0; }
    .creature-row { grid-template-columns: 1fr; }
    .creature, .creature:last-child { border: 0; border-top: 1px solid var(--rule); }
    .frame-line.top, .frame-line.bottom { width: calc(100% - 2rem); left: 1rem; }
    .frame-line.left, .frame-line.right { height: calc(100% - 2rem); top: 1rem; }
    .frame-line.top { top: 1rem; }
    .frame-line.bottom { bottom: 1rem; }
    .frame-line.left { left: 1rem; }
    .frame-line.right { right: 1rem; }
    .opening-entity, .closing-entity { opacity: 0.28; }
}