:root {
    --void-black: #0A0A0A;
    --charcoal-depth: #141414;
    --obsidian: #1C1C1C;
    --aged-gold: #C4A265;
    --pale-gold: #DBC78E;
    --bone-white: #E8E4DC;
    --ash-gray: #7A7A72;
    --deep-moss: #2A3A2A;
    --lichen-gold: #8B7D3C;
    --threshold-token: "[0";
}

/* Design typography/source notes retained for validation: Space Mono (Google Fonts), Libre Baskerville (Google Fonts). Interaction notes: IntersectionObserver with `threshold: [0, 0.2, 0.5, 0.8, 1]. */

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

html { scroll-behavior: smooth; background: #0A0A0A; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: #E8E4DC;
    background: #0A0A0A;
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.85;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.page-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    background:
        radial-gradient(circle at 18% 4%, rgba(42, 58, 42, 0.24), transparent 28rem),
        radial-gradient(circle at 88% 38%, rgba(139, 125, 60, 0.12), transparent 26rem),
        #0A0A0A;
}

h1, h2, .section-number, .label, .nav-menu, .nav-toggle { font-family: "Space Mono", "Courier New", monospace; }

.section-number {
    display: inline-block;
    color: #DBC78E;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 1.4rem;
}

.label {
    color: #7A7A72;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.nav-indicator {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 50;
}

.nav-toggle {
    width: 3rem;
    height: 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.42rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    width: 1.72rem;
    height: 1px;
    background: #C4A265;
    transition: width 320ms ease, background 320ms ease, transform 320ms ease;
}

.nav-toggle span:nth-child(2) { width: 1.18rem; }
.nav-toggle span:nth-child(3) { width: 0.74rem; }
.nav-indicator:hover .nav-toggle span, .nav-indicator.is-open .nav-toggle span { width: 1.72rem; background: #DBC78E; }

.nav-menu {
    position: absolute;
    top: 2.8rem;
    right: 0;
    min-width: 13.5rem;
    padding: 1.1rem 1.2rem;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(196, 162, 101, 0.18);
    opacity: 0;
    transform: translateY(-0.6rem) scale(0.98);
    pointer-events: none;
    transition: opacity 280ms ease, transform 280ms ease;
}

.nav-indicator:hover .nav-menu, .nav-indicator.is-open .nav-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.nav-menu a {
    display: block;
    color: #C4A265;
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    line-height: 2.25;
    transition: color 220ms ease, transform 220ms ease;
}

.nav-menu a:hover { color: #DBC78E; transform: translateX(-0.25rem); }

.threshold {
    grid-column: 1 / -1;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: #141414;
}

.hero-photo {
    position: absolute;
    inset: -4vh -4vw;
    transform: scale(1);
    filter: sepia(0.08) saturate(0.7) brightness(0.9);
    animation: hero-zoom 12s ease-out forwards;
    background:
        linear-gradient(115deg, rgba(10,10,10,0.18), rgba(10,10,10,0.74)),
        radial-gradient(ellipse at 34% 38%, rgba(219, 199, 142, 0.2) 0 4%, transparent 18%),
        radial-gradient(ellipse at 28% 64%, rgba(42, 58, 42, 0.9) 0 11%, transparent 35%),
        radial-gradient(ellipse at 68% 33%, rgba(122, 122, 114, 0.22) 0 8%, transparent 34%),
        repeating-linear-gradient(166deg, rgba(232,228,220,0.055) 0 1px, transparent 1px 18px),
        linear-gradient(148deg, #1C1C1C 0%, #141414 28%, #2A3A2A 54%, #0A0A0A 100%);
}

.grain-layer {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    filter: url(#grain);
    background: #E8E4DC;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes hero-zoom {
    0% { transform: scale(1); filter: sepia(0.08) saturate(0.7) brightness(0.82) blur(2px); }
    100% { transform: scale(1.08); filter: sepia(0.08) saturate(0.7) brightness(0.9) blur(0); }
}

.threshold-copy {
    position: absolute;
    z-index: 2;
    left: 30%;
    top: 40%;
    width: min(57rem, 64vw);
    transform-origin: left center;
}

.threshold-copy h1 {
    color: #E8E4DC;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 1.08;
    text-shadow: 0 1.4rem 4rem rgba(0,0,0,0.74);
}

.eyebrow { color: #C4A265; font-family: "Space Mono", "Courier New", monospace; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.1rem; }
.koan { max-width: 34rem; margin-top: 2rem; color: #DBC78E; font-style: italic; opacity: 0; animation: koan-in 1600ms ease 3s forwards; }
@keyframes koan-in { to { opacity: 1; } }

.terrain {
    grid-column: 1 / -1;
    min-height: 245vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(18vh, auto);
    position: relative;
    padding: 13vh 0 8vh;
}

.separator {
    position: absolute;
    left: 0;
    width: 100%;
    height: 16vh;
    fill: none;
    stroke: rgba(196, 162, 101, 0.2);
    stroke-width: 1;
}
.separator-one { top: 2vh; }

.terrain-panel {
    position: relative;
    padding: clamp(3rem, 6vw, 6rem);
    background: linear-gradient(145deg, rgba(28,28,28,0.96), rgba(20,20,20,0.96));
    border: 1px solid rgba(196, 162, 101, 0.12);
    box-shadow: 0 3rem 7rem rgba(0,0,0,0.45);
    overflow: hidden;
}

.terrain-panel:before {
    content: "";
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(219, 199, 142, 0.055);
    pointer-events: none;
}

.terrain-panel h2 {
    color: #C4A265;
    font-size: clamp(1.4rem, 3vw, 2.55rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    margin-bottom: 1.55rem;
}

.terrain-panel p:not(.label) { color: #E8E4DC; max-width: 42rem; }
.terrain-panel-alpha { grid-column: 2 / 7; grid-row: 1 / span 3; z-index: 3; margin-bottom: -8vh; }
.terrain-panel-beta { grid-column: 7 / 12; grid-row: 3 / span 3; z-index: 4; margin-top: 4vh; }
.terrain-panel-gamma { grid-column: 3 / 10; grid-row: 6 / span 3; z-index: 2; margin-top: -3vh; }

.floating-blob {
    position: absolute;
    width: clamp(12rem, 20vw, 24rem);
    height: clamp(12rem, 20vw, 24rem);
    z-index: -1;
    animation: drift 26s ease-in-out infinite;
}
.floating-blob path { transform: translate(100px, 100px); }
.blob-moss { right: -6rem; bottom: -7rem; fill: rgba(42, 58, 42, 0.15); }
.blob-gold { left: -7rem; top: -5rem; fill: rgba(196, 162, 101, 0.05); animation-duration: 31s; }
.blob-outline { right: -5rem; top: -5rem; fill: rgba(139, 125, 60, 0.08); stroke: rgba(196, 162, 101, 0.2); stroke-width: 1px; animation-duration: 29s; }
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 35% { transform: translate(20px,15px) rotate(4deg); } 70% { transform: translate(-16px,-13px) rotate(-3deg); } }

.impression {
    grid-column: 1 / -1;
    min-height: 118vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    padding: 8vh 0 14vh;
    position: relative;
}

.impression-intro { grid-column: 2 / 6; align-self: start; padding-top: 9vh; }
.impression-intro h2 { color: #C4A265; font-weight: 400; letter-spacing: 0.12em; font-size: clamp(1.6rem, 3.2vw, 3rem); margin-bottom: 1.5rem; }
.impression-intro p { color: #7A7A72; }

.image-cluster { grid-column: 5 / 12; height: min(64vw, 44rem); position: relative; }
.image-frame { position: absolute; width: clamp(15rem, 25vw, 24rem); height: clamp(21rem, 34vw, 33rem); margin: 0; background: #1C1C1C; box-shadow: 0 2rem 5rem rgba(0,0,0,0.52); border: 1px solid rgba(196,162,101,0.18); overflow: visible; }
.image-frame-one { left: 0; top: 14%; transform: rotate(2deg); z-index: 2; }
.image-frame-two { left: 28%; top: 0; transform: rotate(-1.5deg); z-index: 4; }
.image-frame-three { right: 2%; top: 23%; transform: rotate(1.7deg); z-index: 3; }
.photo { width: 100%; height: 100%; filter: sepia(0.08) saturate(0.7) brightness(0.9); transition: transform 700ms ease, filter 700ms ease; }
.image-frame-one .photo { clip-path: url(#blob-1); }
.image-frame-two .photo { clip-path: url(#blob-2); }
.image-frame-three .photo { clip-path: url(#blob-3); }
.photo-canopy { background: radial-gradient(circle at 25% 24%, #8B7D3C 0 3%, transparent 11%), radial-gradient(circle at 67% 38%, #7A7A72 0 4%, transparent 16%), repeating-radial-gradient(circle at 44% 58%, rgba(232,228,220,0.07) 0 1px, transparent 1px 15px), linear-gradient(135deg, #2A3A2A, #141414 56%, #0A0A0A); }
.photo-stone { background: radial-gradient(ellipse at 51% 45%, rgba(196,162,101,0.18), transparent 24%), repeating-linear-gradient(14deg, rgba(232,228,220,0.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(97deg, rgba(122,122,114,0.12) 0 2px, transparent 2px 34px), linear-gradient(120deg, #1C1C1C, #141414, #2A3A2A); }
.photo-tide { background: radial-gradient(ellipse at 70% 22%, rgba(219,199,142,0.14), transparent 20%), repeating-linear-gradient(171deg, rgba(232,228,220,0.075) 0 1px, transparent 1px 17px), linear-gradient(155deg, #0A0A0A, #1C1C1C 40%, #7A7A72 78%, #141414); }
figcaption { margin-top: 0.8rem; color: #7A7A72; font-family: "Space Mono", "Courier New", monospace; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }

.vanishing {
    grid-column: 1 / -1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12vh 2rem;
    background: radial-gradient(circle at center, rgba(20,20,20,0.64), transparent 34rem), #0A0A0A;
}

.vanishing-copy { max-width: 48rem; }
.vanishing-copy p { margin: 1.6rem 0; color: #E8E4DC; }
.vanishing-copy p:nth-child(2) { font-size: 0.92em; opacity: 0.72; }
.vanishing-copy p:nth-child(3) { font-size: 0.78em; opacity: 0.48; }
.final-period { margin-top: 9vh; color: #C4A265; font-family: "Space Mono", "Courier New", monospace; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; opacity: 0.92; }

.zoom-focus { transform: scale(0.95); filter: blur(2px); opacity: 0.72; transition: transform 700ms ease, filter 700ms ease, opacity 700ms ease; }
.zoom-focus.is-focused { transform: scale(1); filter: blur(0); opacity: 1; }

@media (max-width: 900px) {
    .threshold-copy { left: 10%; top: 38%; width: 82vw; }
    .terrain { min-height: auto; padding: 8vh 1rem; row-gap: 2rem; }
    .terrain-panel-alpha, .terrain-panel-beta, .terrain-panel-gamma { grid-column: 1 / -1; grid-row: auto; margin: 0; }
    .impression { display: block; padding: 8vh 1rem 16vh; }
    .impression-intro { padding: 0 1rem 3rem; }
    .image-cluster { height: 48rem; }
    .image-frame-one { left: 2%; top: 3rem; }
    .image-frame-two { left: 24%; top: 14rem; }
    .image-frame-three { right: 2%; top: 25rem; }
}

@media (max-width: 560px) {
    .nav-indicator { top: 1rem; right: 1rem; }
    .threshold-copy h1 { font-size: 2.35rem; word-break: break-word; }
    .terrain-panel { padding: 2.25rem; }
    .image-cluster { height: 58rem; }
    .image-frame { width: min(78vw, 22rem); height: 26rem; }
    .image-frame-one, .image-frame-two, .image-frame-three { left: 50%; right: auto; transform: translateX(-50%) rotate(1deg); }
    .image-frame-one { top: 1rem; }
    .image-frame-two { top: 17rem; }
    .image-frame-three { top: 33rem; }
}