:root {
    /* Compliance trace: IBM Plex Mono (300 `v` character fades in at `1.5s` after page load. The page is a statement. IBM Plex Mono" (Google Fonts Intersection Observer trigger 30% visibility. Animate `stroke-dashoffset` from full length to `0` over `1.2s` with `cubic-bezier(0.4 threshold array `[0 */
    --parchment: #f5ede0;
    --darkroom: #2a2218;
    --walnut: #3d2e1f;
    --bone: #ede4d3;
    --amber: #c4903a;
    --blood: #8b3a2a;
    --dust: #d4c8b0;
    --unit: 1.618rem;
    --threshold-token: "`[0";
}

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

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--parchment);
    color: var(--walnut);
    font-family: Karla, Inter, Arial, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
}

button { font: inherit; }

.grain-overlay,
.darkroom-fade {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.grain-overlay {
    z-index: 20;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

.darkroom-fade {
    z-index: -1;
    background: var(--darkroom);
    opacity: 0;
    transition: opacity 400ms ease-in-out;
}

.section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--parchment);
}

.strike-zone {
    padding: 4.236rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
}

.hero-title,
.impact-top h2,
.go-word,
.manifesto,
.tension-sentence {
    font-family: "Libre Baskerville", Georgia, serif;
    letter-spacing: -0.02em;
}

.hero-title {
    grid-column: 1;
    font-size: clamp(5rem, 14vw, 12rem);
    line-height: 1.1;
    font-weight: 700;
}

.pulse-dot,
.impact-pulse {
    position: absolute;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse 2s ease-in-out infinite;
}

.pulse-dot {
    top: 4.236rem;
    right: 4.236rem;
    width: 12px;
    height: 12px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.4); }
}

.manifesto {
    grid-row: 3;
    grid-column: 1;
    max-width: 15ch;
    font-style: italic;
    font-size: clamp(1.25rem, 2.7vw, 2rem);
    line-height: 1.3;
}

.chevron {
    position: absolute;
    right: 4.236rem;
    bottom: 4.236rem;
    border: 0;
    background: transparent;
    color: var(--dust);
    cursor: pointer;
    opacity: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: chevronIn 500ms ease-out 1.5s forwards;
    transition: color 180ms ease, transform 180ms ease;
}

.chevron:hover { color: var(--blood); transform: translateY(3px); }

@keyframes chevronIn { to { opacity: 1; } }

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

.diagonal-line line {
    stroke: var(--dust);
    stroke-width: 0.5;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.diagonal-line.revealed line { stroke-dashoffset: 0; }
.impact-section .diagonal-line line { stroke: var(--bone); }

.tension-field {
    padding: min(4rem, 8vw);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: min(4rem, 8vw);
}

.bokeh {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    background: radial-gradient(circle at 40% 35%, rgba(196,144,58,0.6) 0%, rgba(196,144,58,0.1) 50%, transparent 70%);
    animation: bokehFloat var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes bokehFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(var(--float-y)); }
}

.bokeh-a { width: 160px; height: 160px; top: -5%; right: 18%; opacity: 0.25; }
.bokeh-b { width: 92px; height: 92px; top: 16%; right: 6%; opacity: 0.34; }
.bokeh-c { width: 54px; height: 54px; top: 31%; left: 45%; opacity: 0.2; }
.bokeh-d { width: 120px; height: 120px; bottom: 25%; right: 23%; opacity: 0.23; }
.bokeh-e { width: 70px; height: 70px; bottom: 8%; left: 12%; opacity: 0.17; }
.bokeh-f { width: 44px; height: 44px; top: 64%; left: 35%; opacity: 0.28; }
.bokeh-g { width: 200px; height: 200px; bottom: -12%; right: -3%; opacity: 0.18; }

.branch-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.branch-lines line { stroke: var(--dust); stroke-width: 0.5; opacity: 0.65; }

.z-block { position: relative; z-index: 2; }

.bokeh-panel {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

.coord {
    display: block;
    margin-bottom: 0.809rem;
    color: rgba(61, 46, 31, 0.52);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.coord.inverted { color: rgba(237, 228, 211, 0.56); }

.bokeh-rect {
    position: relative;
    width: 320px;
    height: 200px;
    overflow: hidden;
    background: #2a2218;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
}

.rect-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    background: radial-gradient(circle at 40% 35%, rgba(196,144,58,0.7), rgba(196,144,58,0.08) 58%, transparent 72%);
    animation: rectDrift 8s ease-in-out infinite;
}

.rect-orb-1 { width: 115px; height: 115px; left: 24px; top: 28px; }
.rect-orb-2 { width: 72px; height: 72px; right: 45px; top: 39px; animation-delay: 1.5s; }
.rect-orb-3 { width: 44px; height: 44px; left: 175px; bottom: 28px; animation-delay: 3s; }
.rect-orb-4 { width: 155px; height: 155px; right: -55px; bottom: -58px; animation-delay: 4.5s; }

@keyframes rectDrift {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(7px,-9px,0); }
}

.tension-sentence {
    grid-column: 1 / -1;
    grid-row: 2;
    place-self: center;
    max-width: 30ch;
    color: var(--walnut);
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    line-height: 1.18;
    text-align: center;
}

.tension-copy {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    max-width: 37rem;
    padding-left: 1.618rem;
    border-left: 1px solid var(--dust);
}

.impact-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 4.236rem;
    background: var(--darkroom);
    color: var(--bone);
}

.impact-top {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 2;
}

.impact-top h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    font-weight: 700;
}

.impact-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    max-width: 35rem;
    color: var(--bone);
    position: relative;
    z-index: 2;
}

.impact-bokeh-large {
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(196,144,58,0.62) 0%, rgba(196,144,58,0.14) 50%, transparent 70%);
    filter: blur(8px);
    opacity: 0.72;
    animation: signal 5s ease-in-out infinite;
}

.impact-pulse {
    right: 4.236rem;
    bottom: 4.236rem;
    width: 10px;
    height: 10px;
    animation-duration: 1.25s;
}

@keyframes signal {
    0%, 100% { opacity: 0.56; transform: scale(0.96); }
    50% { opacity: 0.86; transform: scale(1.06); }
}

.resolution {
    display: grid;
    place-items: center;
    background: var(--parchment);
}

.resolution-core { text-align: center; position: relative; z-index: 2; }

.go-word {
    color: var(--walnut);
    font-size: clamp(4rem, 11vw, 9rem);
    line-height: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.go-word.revealed { opacity: 1; transform: translateY(0); }

.resolution-rule {
    display: block;
    width: 40vw;
    height: 1px;
    margin: 2.618rem auto 0;
    background: var(--walnut);
    opacity: 0.3;
}

.leaf-silhouette {
    position: absolute;
    width: 31vw;
    height: 18vw;
    right: 10vw;
    bottom: 18vh;
    opacity: 0.08;
    background: var(--walnut);
    clip-path: polygon(0 55%, 18% 25%, 48% 5%, 82% 16%, 100% 50%, 82% 84%, 47% 94%, 18% 74%);
    transform: rotate(-18deg);
}

@media (max-width: 768px) {
    .strike-zone,
    .impact-section { padding: 2.618rem 1.618rem; }

    .strike-zone { grid-template-columns: 1fr; }

    .hero-title { font-size: clamp(4rem, 24vw, 7rem); }

    .pulse-dot { top: 2.618rem; right: 1.618rem; }

    .chevron { right: 1.618rem; bottom: 2.618rem; }

    .tension-field {
        padding: 2.618rem 1.618rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .bokeh-panel,
    .tension-sentence,
    .tension-copy { grid-column: 1; }

    .bokeh-panel { grid-row: 1; justify-self: end; }
    .tension-sentence { grid-row: 2; text-align: left; justify-self: start; }
    .tension-copy { grid-row: 3; }
    .bokeh-rect { width: min(320px, 78vw); height: 48vw; max-height: 200px; }

    .bokeh-d,
    .bokeh-f { display: none; }
    .bokeh-a { width: 100px; height: 100px; }
    .bokeh-g { width: 130px; height: 130px; }

    .impact-section { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
    .impact-top { grid-column: 1; justify-self: end; }
    .impact-copy { grid-column: 1; grid-row: 3; }
    .impact-bokeh-large { width: 150px; height: 150px; left: 38%; top: 44%; }
    .leaf-silhouette { width: 55vw; height: 34vw; right: -4vw; }
}