:root {
    --cream: #f0e6d3;
    --charcoal: #2a2520;
    --amber: #c8a060;
    --forest: #4a5e3a;
    --ember: #c45a3c;
    --rose: #b8907a;
    --indigo: #5c6478;
    --ash: #faf6f0;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lora', serif;
    color: var(--charcoal);
    background-color: var(--cream);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(42,37,32,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(42,37,32,0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(42,37,32,0.04) 0%, transparent 40%);
    line-height: 1.85;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    overflow-x: hidden;
}

/* ========== HERO ========== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--cream);
}

.mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    will-change: transform;
}

.mountains-far { opacity: 0.15; z-index: 1; }
.mountains-mid { opacity: 0.25; z-index: 2; }
.mountains-near { opacity: 0.4; z-index: 3; }

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

.hero-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    letter-spacing: 0.02em;
    color: var(--charcoal);
    line-height: 1;
    margin-bottom: 0.2em;
}

.char {
    display: inline-block;
    transform: translateY(calc(var(--i) * 3px - 10px));
}

.char.dot {
    color: var(--ember);
}

.hero-underline {
    width: min(80vw, 700px);
    height: 12px;
    display: block;
    margin: 0 auto 1.5rem;
}

.hero-underline path,
.heading-underline path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.hero-underline.visible path,
.heading-underline.visible path {
    stroke-dashoffset: 0;
}

.hero-sub {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    color: var(--rose);
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.hero.entered .hero-sub {
    opacity: 1;
    transform: translateY(0);
}

/* ========== EDITORIAL ========== */
.editorial {
    max-width: clamp(320px, 85vw, 1100px);
    margin: 0 auto;
    padding: clamp(6rem, 12vh, 10rem) 1.5rem;
}

.editorial-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    margin-bottom: clamp(4rem, 8vh, 7rem);
    align-items: start;
}

.editorial-row.reverse {
    grid-template-columns: 2fr 3fr;
}

.editorial-row.reverse .editorial-main {
    order: 2;
}

.editorial-row.reverse .editorial-side {
    order: 1;
}

.section-heading {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--charcoal);
    letter-spacing: 0.02em;
    margin-bottom: 0.2em;
}

.section-heading.light {
    color: var(--ash);
}

.heading-underline {
    width: min(100%, 400px);
    height: 8px;
    display: block;
    margin-bottom: 1.5rem;
}

.editorial-main p {
    margin-bottom: 1.2em;
    max-width: 60ch;
}

.editorial-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 2rem;
}

.botanical {
    animation: slow-rotate 60s linear infinite;
}

@keyframes slow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.leaf-1 { width: 60px; }
.leaf-2 { width: 80px; }

.marginal-note {
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    color: var(--rose);
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: 220px;
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--indigo);
}

/* ========== REVEAL ANIMATIONS ========== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger paragraphs */
.editorial-main p.reveal:nth-child(4) { transition-delay: 0.1s; }
.editorial-main p.reveal:nth-child(5) { transition-delay: 0.2s; }
.editorial-main p.reveal:nth-child(6) { transition-delay: 0.3s; }

/* ========== HEX DIVIDER ========== */
.hex-divider {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.hex-svg {
    width: 200px;
    height: 60px;
}

/* ========== KILN ========== */
.kiln {
    min-height: 100vh;
    background: var(--charcoal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vh, 8rem) 1.5rem;
    position: relative;
}

.kiln-content {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 600px;
}

.kiln-content .heading-underline {
    margin: 0 auto 1.5rem;
}

.kiln p.light {
    color: var(--ash);
    opacity: 0.9;
}

.kiln-illustration {
    width: min(90vw, 600px);
    height: auto;
}

.kiln-path {
    stroke-dasharray: var(--path-len, 1000);
    stroke-dashoffset: var(--path-len, 1000);
    transition: stroke-dashoffset 0.6s ease;
}

.kiln-path.drawn {
    stroke-dashoffset: 0;
}

.ember-dot {
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ========== FOREST FLOOR ========== */
.forest {
    min-height: 150vh;
    padding: clamp(6rem, 12vh, 10rem) 1.5rem;
    position: relative;
}

.forest-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.3;
}

.forest-hex-pattern {
    width: 100%;
    height: 100%;
}

.forest-cards {
    position: relative;
    max-width: clamp(320px, 85vw, 1100px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: start;
}

.card {
    background: var(--ash);
    padding: 2rem 2.2rem;
    box-shadow: 2px 3px 8px rgba(42, 37, 32, 0.12);
    clip-path: var(--torn);
}

.card h3 {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--charcoal);
    margin-bottom: 0.6em;
    letter-spacing: 0.02em;
}

.card p {
    line-height: 1.75;
    margin-bottom: 0.8em;
}

.card .formula {
    display: block;
    margin-top: 0.5em;
    text-align: center;
    font-size: 0.9rem;
}

.card-tall {
    flex: 1 1 280px;
    max-width: 380px;
}

.card-wide {
    flex: 2 1 500px;
}

.card-medium {
    flex: 1 1 300px;
    max-width: 420px;
}

/* ========== CLOSING ========== */
.closing {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.mountains-closing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
}

.closing-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.closing-whisper {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--charcoal);
    letter-spacing: 0.02em;
    margin-bottom: 0.5em;
}

.closing-ember {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ember);
    vertical-align: middle;
    margin-bottom: 1rem;
}

.closing-note {
    font-family: 'Caveat', cursive;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--rose);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .editorial-row,
    .editorial-row.reverse {
        grid-template-columns: 1fr;
    }

    .editorial-row.reverse .editorial-main,
    .editorial-row.reverse .editorial-side {
        order: unset;
    }

    .editorial-side {
        padding-top: 0;
    }

    .forest-cards {
        flex-direction: column;
    }

    .card-tall, .card-wide, .card-medium {
        max-width: 100%;
    }
}