:root {
    --bg: #0c0a12;
    --bg-warm: #0f0c14;
    --bg-alt: #141220;
    --violet-shadow: #1a1030;
    --cream: #f7e8d4;
    --stone: #b8a99a;
    --stone-light: #d4c4b0;
    --orange: #e07b3c;
    --amber: #c87d4a;
    --tangerine: #d4580a;
    --violet: #6b2fa0;
    --highlight: #e8b878;
    --margin: clamp(2rem, 5vw, 6rem);
    --gap: clamp(1rem, 2vw, 2.5rem);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Design typography/animation references: Outfit (Google Fonts), Source Serif 4" (Google Fonts), DM Mono. Intersection Observer at `threshold: 0.2`. Body text fades in with `opacity: 0 -> 1` and `translateY(20px -> 0)`. Intersection Observer with `rootMargin: '-20% 0px'` to trigger when the section is significantly visible. */

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    background: #0c0a12;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    color: #b8a99a;
    font-family: "Source Serif 4", Georgia, serif;
    line-height: 1.72;
    letter-spacing: 0.005em;
    background: #0c0a12;
}

.ambient-wash {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 72% 32%, rgba(224, 123, 60, 0.25), transparent 48%),
        radial-gradient(ellipse at 18% 82%, rgba(107, 47, 160, 0.22), transparent 56%),
        linear-gradient(180deg, #0c0a12 0%, #0f0c14 52%, #141220 100%);
    opacity: 0.02;
    transition: opacity 180ms linear;
}

.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: var(--gap);
    align-items: center;
    padding: clamp(1.2rem, 2.3vw, 2rem) var(--margin);
    background: rgba(12, 10, 18, 0.7);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color 300ms ease, background 300ms ease;
}

.site-nav.is-scrolled {
    border-bottom-color: rgba(232, 180, 120, 0.12);
    background: rgba(12, 10, 18, 0.78);
}

.wordmark, .nav-links a, .section-label, .section-counter {
    font-family: "DM Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wordmark {
    font-family: "Outfit", Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.3vw, 1.25rem);
    color: #e07b3c;
    text-decoration: none;
}

.nav-links {
    display: flex;
    justify-content: flex-end;
    gap: clamp(1rem, 2.4vw, 2.8rem);
}

.nav-links a {
    color: #c87d4a;
    text-decoration: none;
    background-image: linear-gradient(#e07b3c, #e07b3c);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: color 300ms ease, background-size 400ms var(--ease);
}

.nav-links a:hover { color: #e07b3c; background-size: 100% 1px; }

.narrative, .closing {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
    overflow: hidden;
    padding: clamp(7rem, 10vw, 10rem) var(--margin) clamp(2.5rem, 6vw, 6rem);
}

.narrative { background: #0c0a12; }
.narrative.alt, .details { background: #141220; }

.z-grid, .concept-grid {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: var(--gap);
}

.hero {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.hero-mark {
    font-family: "Outfit", Arial, sans-serif;
    font-size: clamp(2.8rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: #e07b3c;
}

.hero-context {
    align-self: start;
    max-width: 34rem;
    color: #d4c4b0;
    font-size: clamp(1rem, 1.35vw, 1.35rem);
}

.hero-mantra {
    justify-self: end;
    max-width: 48rem;
    text-align: right;
    color: #f7e8d4;
    font-size: clamp(1.35rem, 2.6vw, 2.8rem);
    line-height: 1.16;
}

.section-counter {
    position: absolute;
    top: clamp(6rem, 9vw, 8rem);
    right: var(--margin);
    z-index: 4;
    color: rgba(200, 125, 74, 0.3);
}

.section-label { color: #c87d4a; margin-bottom: clamp(1rem, 2vw, 1.7rem); }

.headline, .detail-title {
    font-family: "Outfit", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #f7e8d4;
    font-size: clamp(2.8rem, 7vw, 6rem);
}

.body-copy {
    max-width: 44rem;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    color: #b8a99a;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
}

.concept {
    display: flex;
    align-items: center;
}

.concept-grid { width: 100%; align-items: center; }

.concept-copy {
    position: relative;
    padding-left: clamp(1.2rem, 2vw, 2rem);
    border-left: 1px solid rgba(200, 125, 74, 0.1);
    background: radial-gradient(ellipse at 70% 30%, rgba(224, 123, 60, 0.06), transparent 70%);
    will-change: transform;
}

.horizon-line {
    position: absolute;
    top: 62%;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(232, 180, 120, 0.12) 22%, rgba(232, 180, 120, 0.12) 78%, transparent);
    will-change: transform;
}

.landscape {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 20rem;
    background: #1a1030;
    filter: contrast(1.02) saturate(0.72);
    will-change: transform;
    box-shadow: inset 0 0 0 1px rgba(232, 180, 120, 0.08), 0 2.5rem 8rem rgba(0, 0, 0, 0.28);
}

.landscape-wide { height: min(60vh, 39rem); }
.portrait { width: 100%; aspect-ratio: 2 / 3; min-height: min(68vh, 44rem); }
.closing-landscape { position: absolute; inset: 0; min-height: 100%; z-index: 0; }

.sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 72% 28%, rgba(232, 184, 120, 0.28), transparent 30%),
        radial-gradient(ellipse at 62% 42%, rgba(224, 123, 60, 0.18), transparent 34%),
        linear-gradient(180deg, #0c0a12 0%, #1a1030 38%, #6b2fa0 70%, #141220 100%);
}

.sunset-band {
    position: absolute;
    left: -10%; right: -10%; top: 48%; height: 18%;
    background: linear-gradient(90deg, transparent, rgba(224, 123, 60, 0.36), rgba(232, 184, 120, 0.22), rgba(212, 88, 10, 0.28), transparent);
    filter: blur(18px);
}

.skyline, .rooftop, .glass-streak, .image-warmth { position: absolute; inset: 0; }

.skyline.far {
    top: auto;
    height: 42%;
    bottom: 20%;
    opacity: 0.52;
    background:
        linear-gradient(to top, #1a1030 0 100%) 1% 100% / 6% 45% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 9% 100% / 4% 68% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 16% 100% / 9% 38% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 28% 100% / 5% 72% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 37% 100% / 11% 48% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 51% 100% / 4% 80% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 60% 100% / 8% 55% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 74% 100% / 6% 73% no-repeat,
        linear-gradient(to top, #1a1030 0 100%) 86% 100% / 12% 42% no-repeat;
}

.skyline.near {
    top: auto;
    height: 48%;
    bottom: 0;
    opacity: 0.82;
    background:
        linear-gradient(to top, #0f0c14 0 100%) 0% 100% / 9% 52% no-repeat,
        linear-gradient(to top, #0f0c14 0 100%) 11% 100% / 7% 82% no-repeat,
        linear-gradient(to top, #0f0c14 0 100%) 21% 100% / 11% 46% no-repeat,
        linear-gradient(to top, #0f0c14 0 100%) 36% 100% / 8% 76% no-repeat,
        linear-gradient(to top, #0f0c14 0 100%) 49% 100% / 13% 58% no-repeat,
        linear-gradient(to top, #0f0c14 0 100%) 66% 100% / 7% 90% no-repeat,
        linear-gradient(to top, #0f0c14 0 100%) 76% 100% / 12% 50% no-repeat,
        linear-gradient(to top, #0f0c14 0 100%) 91% 100% / 8% 70% no-repeat;
}

.rooftop {
    top: auto;
    height: 22%;
    bottom: 0;
    background:
        linear-gradient(90deg, rgba(200, 125, 74, 0.16) 0 1px, transparent 1px 12%) 0 12% / 9rem 100%,
        linear-gradient(180deg, transparent 0 25%, rgba(12, 10, 18, 0.35) 25% 27%, transparent 27%),
        linear-gradient(180deg, rgba(12, 10, 18, 0.2), #0c0a12 62%);
}

.glass-streak {
    z-index: 3;
    background: linear-gradient(135deg, transparent 45%, rgba(247, 232, 212, 0.03) 50%, transparent 55%);
}

.image-warmth {
    z-index: 4;
    background: rgba(224, 123, 60, 0.15);
    mix-blend-mode: soft-light;
    opacity: 1;
    transition: opacity 900ms var(--ease);
}

.landscape.is-warm .image-warmth { opacity: 0; }

.landscape::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0.04;
    pointer-events: none;
    background-image: radial-gradient(circle at 20% 30%, #e8b878 0 1px, transparent 1px), radial-gradient(circle at 80% 60%, #f7e8d4 0 1px, transparent 1px);
    background-size: 7px 7px, 11px 11px;
}

[data-landscape="02"] .sky { background: radial-gradient(ellipse at 58% 38%, rgba(224, 123, 60, 0.24), transparent 35%), linear-gradient(180deg, #141220, #1a1030 42%, #6b2fa0 76%, #0c0a12); }
[data-landscape="03"] .sky { background: radial-gradient(ellipse at 78% 24%, rgba(232, 184, 120, 0.22), transparent 32%), linear-gradient(180deg, #0f0c14, #1a1030 46%, #6b2fa0 78%, #141220); }
[data-landscape="04"] .sky { background: radial-gradient(ellipse at 40% 32%, rgba(212, 88, 10, 0.18), transparent 32%), linear-gradient(180deg, #0c0a12, #141220 36%, #6b2fa0 74%, #0f0c14); }
[data-landscape="05"] .sky { background: radial-gradient(ellipse at 70% 58%, rgba(224, 123, 60, 0.22), transparent 38%), linear-gradient(180deg, #141220, #1a1030 48%, #6b2fa0 75%, #0c0a12); }
[data-landscape="06"] .sky { background: radial-gradient(ellipse at 50% 42%, rgba(232, 184, 120, 0.2), transparent 36%), linear-gradient(180deg, #0c0a12, #1a1030 38%, #6b2fa0 70%, #0c0a12); }

.details {
    position: relative;
    min-height: 80vh;
    scroll-snap-align: start;
    padding: clamp(7rem, 10vw, 10rem) var(--margin) clamp(4rem, 8vw, 8rem);
    overflow: hidden;
}

.details::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(224, 123, 60, 0.06), transparent 70%);
    pointer-events: none;
}

.details-intro { position: relative; max-width: 72rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
.detail-title { font-size: clamp(2.4rem, 5.5vw, 5rem); }

.detail-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.detail-block {
    min-height: 19rem;
    padding: 0 clamp(1.5rem, 2.8vw, 3rem);
    border-left: 1px solid rgba(232, 180, 120, 0.15);
}

.detail-block:first-child { padding-left: 0; border-left: 0; }
.detail-block:last-child { border-right: 1px solid rgba(232, 180, 120, 0.15); }

.detail-block h3 {
    margin-bottom: 1.2rem;
    color: #e07b3c;
    font-family: "Outfit", Arial, sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.detail-block p { color: #b8a99a; font-size: clamp(1rem, 1.1vw, 1.18rem); }

.closing {
    display: grid;
    place-items: center;
    padding: var(--margin);
    background: #0c0a12;
}

.closing::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(12, 10, 18, 0.14), rgba(12, 10, 18, 0.76) 72%);
}

.closing-copy {
    position: relative;
    z-index: 2;
    width: min(74rem, 92vw);
    text-align: center;
    will-change: transform;
}

.closing-copy .body-copy { margin-left: auto; margin-right: auto; color: #d4c4b0; }

.reveal-item { opacity: 0; transform: translateY(20px); }
.headline.reveal-item, .detail-title.reveal-item { clip-path: inset(0 100% 0 0); transform: none; }
.reveal-item.in-view { animation: fadeUp 600ms var(--ease) forwards; }
.headline.reveal-item.in-view, .detail-title.reveal-item.in-view { animation: curtain 800ms var(--ease) forwards; }
.hero-mark.in-view { animation: curtain 800ms var(--ease) forwards; }

@keyframes curtain {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 840px) {
    .site-nav { grid-template-columns: 1fr; gap: 0.9rem; }
    .nav-links { justify-content: flex-start; flex-wrap: wrap; }
    .z-grid, .concept-grid { grid-template-columns: 1fr; }
    .narrative, .details { padding-top: 8.5rem; }
    .hero-mantra { justify-self: start; max-width: 100%; text-align: left; }
    .portrait { min-height: 54vh; order: -1; }
    .detail-grid { grid-template-columns: 1fr; gap: 0; }
    .detail-block { border-left: 0; border-top: 1px solid rgba(232, 180, 120, 0.15); padding: 2rem 0; min-height: auto; }
    .detail-block:first-child { border-top: 0; }
    .detail-block:last-child { border-right: 0; border-bottom: 1px solid rgba(232, 180, 120, 0.15); }
}