:root {
    --void: #0a0a0f;
    --obsidian: #000000;
    --stone: #e8e0d4;
    --stone-soft: #c4beb5;
    --vein: #8a8278;
    --shock: #ff2d6b;
    --spark: #00f0ff;
    --rupture: #7b2ff7;
    --deep: #1a0a2e;
    --residue: #c4610a;
    --machine: #4a4a5a;
    --display: "Playfair Display", serif;
    --body: "Lora", serif;
    --hand: "Caveat", cursive;
    --mono: "IBM Plex Mono", monospace;
}

/* Typography compliance note: Playfair Display" (Google Fonts monumental serifs with "Caveat" handwritten annotations creates a dialogue between authority and spontaneity — like finding personal notes scrawled in the margins of a classical architecture textbook. Lora" (Google Fonts IBM Plex Mono" IntersectionObserver to detect when sections enter the viewport. On first entry IntersectionObserver. */

* { box-sizing: border-box; }
html { background: var(--void); }
body {
    margin: 0;
    background: var(--void);
    color: var(--stone-soft);
    font-family: var(--body);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

.excavation {
    position: relative;
    perspective: 1px;
    perspective-origin: 50% 0;
    transform-style: preserve-3d;
    overflow-x: hidden;
}

.stratum {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
}

.depth-layer {
    position: absolute;
    inset: 0;
    transform: translateZ(-1px) scale(2);
    transform-origin: 50% 0;
}

.stratum-surface {
    display: grid;
    place-items: center;
    background: var(--void);
}

.marble-surface {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(138, 130, 120, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(196, 97, 10, 0.08) 0%, transparent 40%),
        linear-gradient(135deg, rgba(232, 224, 212, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 115%, rgba(0, 240, 255, 0.28), transparent 35%),
        #0a0a0f;
    transition: opacity 120ms linear;
}

.marble-surface::before {
    content: "";
    position: absolute;
    inset: -20%;
    opacity: 0.9;
    background:
        linear-gradient(103deg, transparent 0 45%, rgba(232,224,212,0.22) 45.2% 45.5%, transparent 45.8%),
        linear-gradient(74deg, transparent 0 58%, rgba(138,130,120,0.3) 58.1% 58.4%, transparent 58.7%),
        linear-gradient(132deg, transparent 0 28%, rgba(0,240,255,0.18) 28.05% 28.35%, transparent 28.7%),
        linear-gradient(38deg, transparent 0 68%, rgba(255,45,107,0.16) 68.05% 68.35%, transparent 68.7%);
    background-size: 47vw 100vh, 61vw 95vh, 53vw 80vh, 69vw 110vh;
    filter: contrast(1.35);
}

.crack-field {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(118deg, transparent 15%, rgba(0,0,0,0.9) 15.1%, rgba(0,240,255,0.5) 15.28%, transparent 15.6%),
        linear-gradient(69deg, transparent 41%, rgba(0,0,0,0.75) 41.1%, rgba(255,45,107,0.55) 41.26%, transparent 41.55%),
        linear-gradient(151deg, transparent 61%, rgba(0,0,0,0.85) 61.1%, rgba(232,224,212,0.16) 61.35%, transparent 61.65%);
    mix-blend-mode: screen;
}

.underlight {
    position: absolute;
    width: 46vw;
    height: 46vw;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.45;
}
.underlight-cyan { left: 2vw; bottom: -18vw; background: var(--spark); }
.underlight-pink { right: 1vw; bottom: -15vw; background: var(--shock); }

.surface-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
}

.site-title,
.sketch-block h2 {
    font-family: var(--display);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 0.95;
    margin: 0;
}

.site-title {
    color: var(--stone);
    text-shadow:
        -2px -2px 0 rgba(0,0,0,0.88),
        2px 2px 0 rgba(232,224,212,0.08),
        0 0 28px rgba(0,240,255,0.2),
        0 0 2px rgba(0,0,0,0.95);
}

.surface-note {
    margin: 1.25rem auto 0;
    max-width: 36rem;
    color: var(--vein);
    font-style: italic;
}

.mono-mark {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--machine);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.stratum-sketch {
    background:
        radial-gradient(circle at 8% 22%, rgba(255,45,107,0.13), transparent 19rem),
        radial-gradient(circle at 86% 72%, rgba(0,240,255,0.1), transparent 22rem),
        var(--void);
}

.scanlines,
.core-static {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,0.035) 3px);
    mix-blend-mode: screen;
    opacity: 0.38;
}

.sketch-field {
    position: relative;
    min-height: 100vh;
}

.sketch-block {
    position: absolute;
    width: min(31rem, 72vw);
    padding: clamp(1rem, 3vw, 2rem);
    color: var(--stone-soft);
    transform: rotate(var(--tilt, 0deg));
}

.sketch-block::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(196,190,181,0.12);
    background: repeating-linear-gradient(45deg, rgba(255,45,107,0.045) 0 1px, transparent 1px 12px);
    opacity: 0.9;
}

.sketch-block > * { position: relative; }
.sketch-a { --tilt: -2.4deg; left: 8vw; top: 12vh; }
.sketch-b { --tilt: 1.7deg; right: 7vw; top: 26vh; }
.sketch-c { --tilt: -1deg; left: 17vw; bottom: 8vh; width: min(22rem, 70vw); }
.sketch-d { --tilt: 2.8deg; right: 15vw; bottom: 13vh; width: min(23rem, 70vw); }

.sketch-block h2 {
    font-size: clamp(2.7rem, 6vw, 5rem);
    color: var(--shock);
    text-shadow: 0 0 22px rgba(255,45,107,0.22);
}

.annotation,
.large-hand,
.blob-label {
    font-family: var(--hand);
    font-weight: 700;
}

.annotation {
    margin: 0 0 0.2rem;
    color: var(--shock);
    font-size: clamp(1.25rem, 2.6vw, 2.2rem);
}
.annotation.cyan { color: var(--spark); }
.caption { font-family: var(--mono); color: var(--machine); font-size: 0.75rem; }
.large-hand { margin: 0; color: var(--spark); font-size: clamp(2rem, 5vw, 4.5rem); line-height: 0.9; }

.hand-svg {
    display: block;
    width: 100%;
    overflow: visible;
}
.hand-svg path,
.core-title text,
.core-title path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--dash, 1200);
    stroke-dashoffset: var(--dash, 1200);
}
.circle-svg { color: var(--shock); height: 8rem; }
.underline-svg { color: var(--spark); height: 3rem; }
.bracket-svg { color: var(--shock); position: absolute; inset: 0; height: 100%; opacity: 0.8; }
.arrow-svg { color: var(--spark); height: 8rem; }

.drawn path,
.drawn text { animation: draw-line 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards; animation-delay: var(--delay, 0ms); }

.stratum-vein {
    min-height: 30vh;
    display: grid;
    place-items: center;
    background: var(--void);
}
.vein-marble {
    background:
        radial-gradient(ellipse at 13% 51%, rgba(138,130,120,0.2), transparent 42%),
        radial-gradient(ellipse at 77% 34%, rgba(196,97,10,0.12), transparent 40%),
        repeating-linear-gradient(96deg, rgba(232,224,212,0.04) 0 1px, transparent 1px 15px),
        #09090d;
}
.vein-quote {
    position: relative;
    z-index: 1;
    max-width: 72rem;
    margin: 0;
    padding: 2rem;
    color: var(--vein);
    font-family: var(--display);
    font-size: clamp(1.6rem, 3.7vw, 3.6rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.18;
    text-align: center;
}

.stratum-fissure {
    background: linear-gradient(180deg, var(--deep) 0%, var(--void) 62%, #020204 100%);
}
.fissure-haze {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 35%, rgba(123,47,247,0.24), transparent 22rem),
        radial-gradient(circle at 81% 61%, rgba(0,240,255,0.13), transparent 24rem),
        radial-gradient(circle at 52% 90%, rgba(255,45,107,0.12), transparent 20rem);
    filter: blur(18px);
}
.blob {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(15rem, 26vw, 25rem);
    min-height: clamp(13rem, 22vw, 20rem);
    padding: 2.3rem;
    border-radius: 42% 58% 62% 38% / 45% 55% 45% 55%;
    border: 1px solid rgba(123,47,247,0.55);
    background:
        repeating-linear-gradient(45deg, rgba(196,97,10,0.06) 0 1px, transparent 1px 13px),
        rgba(26,10,46,0.62);
    backdrop-filter: blur(8px);
    color: var(--stone-soft);
    text-align: center;
    box-shadow: 0 0 32px rgba(123,47,247,0.25), inset 0 0 25px rgba(0,0,0,0.38);
    animation: blob-morph 8s ease-in-out infinite alternate, neon-flicker 4.6s steps(1,end) infinite;
}
.blob-one { left: 6vw; top: 9vh; }
.blob-two { right: 8vw; top: 22vh; animation-delay: -2s, -1s; }
.blob-three { left: 18vw; bottom: 9vh; animation-delay: -4s, -2.2s; }
.blob-four { right: 20vw; bottom: 13vh; animation-delay: -6s, -3.5s; }
.blob-label { margin: 0 0 0.5rem; color: var(--spark); font-size: clamp(1.7rem, 3vw, 3rem); line-height: 0.9; }
.blob-label.pink { color: var(--shock); }
.blob-label.amber { color: var(--residue); }
.small-orbit { color: var(--rupture); height: 5rem; }

.stratum-core {
    display: grid;
    place-items: center;
    background: var(--obsidian);
}
.core-title {
    position: relative;
    z-index: 1;
    width: min(78vw, 620px);
    color: var(--spark);
    filter: drop-shadow(0 0 16px rgba(0,240,255,0.42));
}
.core-title text {
    font-family: var(--hand);
    font-size: 125px;
    stroke-width: 2.5;
}
.core-title path { color: var(--shock); stroke-width: 2; }
.core-title.drawn text { animation-duration: 3s; }
.core-title.core-glitch { animation: glitch-burst 500ms cubic-bezier(0.25,0.46,0.45,0.94); }

.glitching { animation: glitch-burst 300ms cubic-bezier(0.25,0.46,0.45,0.94); }
.glitching::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(255,45,107,0.18), transparent),
        repeating-linear-gradient(180deg, rgba(0,240,255,0.08) 0 2px, transparent 2px 7px);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: slice-flash 300ms steps(2,end);
}

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes blob-morph {
    0% { border-radius: 42% 58% 62% 38% / 45% 55% 45% 55%; transform: translate3d(0,0,0) rotate(-1deg); }
    50% { border-radius: 60% 40% 45% 55% / 40% 60% 35% 65%; transform: translate3d(0,-10px,0) rotate(1deg); }
    100% { border-radius: 35% 65% 58% 42% / 60% 42% 58% 40%; transform: translate3d(0,6px,0) rotate(-0.5deg); }
}
@keyframes neon-flicker {
    0%, 88%, 100% { border-color: rgba(123,47,247,0.55); box-shadow: 0 0 26px rgba(123,47,247,0.28), inset 0 0 25px rgba(0,0,0,0.38); }
    89% { border-color: rgba(0,240,255,0.9); box-shadow: 0 0 40px rgba(0,240,255,0.52), inset 0 0 28px rgba(0,240,255,0.08); }
    91% { border-color: rgba(255,45,107,0.82); box-shadow: 0 0 36px rgba(255,45,107,0.45), inset 0 0 25px rgba(0,0,0,0.38); }
}
@keyframes glitch-burst {
    0% { transform: translateX(0) skewX(0); filter: none; }
    18% { transform: translateX(9px) skewX(2deg); filter: drop-shadow(-8px 0 var(--shock)) drop-shadow(8px 0 var(--spark)); }
    39% { transform: translateX(-12px) skewX(-1.5deg); clip-path: inset(16% 0 42% 0); }
    63% { transform: translateX(5px) skewX(1deg); clip-path: inset(56% 0 9% 0); }
    100% { transform: translateX(0) skewX(0); filter: none; clip-path: inset(0); }
}
@keyframes slice-flash { 0%,100% { opacity: 0; transform: translateX(0); } 45% { opacity: 1; transform: translateX(12px); } }

@media (max-width: 820px) {
    .sketch-block,
    .blob { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 2rem auto; }
    .sketch-field { padding: 8vh 0; }
    .stratum-fissure { padding: 8vh 0; }
    .blob { width: min(82vw, 24rem); }
}