:root {
    --paper: #f5f0e8;
    --parchment: #ede6db;
    --ink-display: #2a2520;
    --ink-heading: #3a3632;
    --ink-body: #4a4540;
    --pencil: #8a857e;
    --rule: #c8c1b6;
    --accent: #9c7a5a;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--paper);
    color: var(--ink-body);
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.85;
    overflow-x: hidden;
    position: relative;
}

/* Paper Texture Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    filter: url(#noiseFilter);
    background: var(--paper);
}

/* Growth Rings SVG - Fixed Background */
.growth-rings {
    position: fixed;
    top: 50%;
    left: calc(50% - 5vw);
    transform: translate(-50%, -50%);
    width: 80vmin;
    height: 80vmin;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
    overflow: visible;
}

.growth-rings svg {
    width: 100%;
    height: 100%;
}

/* Page Container */
.page-container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 80px rgba(42, 37, 32, 0.04);
}

/* ================================
   Opening Void Section
   ================================ */
.opening-void {
    min-height: 80vh;
    display: flex;
    align-items: flex-start;
    padding-top: 30vh;
}

.domain-name {
    font-family: 'Zilla Slab', 'Rockwell', serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 6vw, 4rem);
    letter-spacing: 0.04em;
    color: var(--ink-display);
    margin-bottom: 1.2rem;
}

.subtitle {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pencil);
}

/* ================================
   Core Column - Offset Left
   ================================ */
.core-column {
    max-width: 420px;
    margin-left: calc(50% - 5vw - 210px);
    padding: 0 20px;
}

.core-column--narrow {
    max-width: 360px;
    margin-left: calc(50% - 5vw - 180px);
}

/* ================================
   Sapwood Zone
   ================================ */
.sapwood-zone {
    position: absolute;
    left: calc(50% - 5vw + 270px);
    top: 0;
    width: 200px;
}

.margin-annotation {
    position: sticky;
    top: 45vh;
    padding-top: 20px;
}

.annotation-text {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    font-size: clamp(0.7rem, 1vw, 0.82rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pencil);
    line-height: 1.65;
    display: block;
    transition: color 600ms ease;
}

/* ================================
   Section Layout
   ================================ */
.content-area {
    position: relative;
}

.section {
    position: relative;
}

.section-first {
    padding-top: 120px;
    padding-bottom: 60px;
}

.section-vascular {
    padding-top: 180px;
    padding-bottom: 60px;
}

.section-heartwood {
    padding-top: 260px;
    padding-bottom: 60px;
}

/* Section Rules */
.section-rule {
    position: relative;
    height: 1px;
    margin-bottom: 60px;
    margin-left: calc(50% - 5vw - 210px);
    width: 500px;
    max-width: 60vw;
}

.section-rule::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 0;
    height: 0.5px;
    background-color: var(--ink-heading);
    opacity: 0.3;
}

/* Vascular Line SVG */
.vascular-line {
    margin-left: calc(50% - 5vw - 210px);
    padding-left: 20px;
    width: 500px;
    max-width: 60vw;
    margin-bottom: 60px;
    opacity: 0.6;
}

.vascular-line svg {
    width: 100%;
    height: auto;
}

/* ================================
   Body Text
   ================================ */
.body-text p {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.85;
    color: var(--ink-body);
    margin-bottom: 1.6em;
}

.body-text p:last-child {
    margin-bottom: 0;
}

.body-text--intimate p {
    line-height: 2.0;
}

/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   Closing Void & Colophon
   ================================ */
.closing-void {
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4vh;
}

.colophon-text {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    font-size: clamp(0.7rem, 1vw, 0.82rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pencil);
}

/* ================================
   Hover Interaction
   ================================ */
.body-text:hover ~ .sapwood-zone .annotation-text,
.content-area:hover .annotation-text {
    color: var(--accent);
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 900px) {
    .core-column {
        max-width: 90vw;
        margin-left: 5vw;
    }

    .core-column--narrow {
        max-width: 85vw;
        margin-left: 5vw;
    }

    .sapwood-zone {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        margin-left: 5vw;
        margin-top: 40px;
        padding-right: 20px;
    }

    .margin-annotation {
        position: relative;
        top: auto;
    }

    .section-rule {
        margin-left: 5vw;
        width: 85vw;
        max-width: 85vw;
    }

    .vascular-line {
        margin-left: 5vw;
        width: 85vw;
        max-width: 85vw;
    }

    .growth-rings {
        left: 50%;
        width: 100vmin;
        height: 100vmin;
    }

    .opening-void {
        padding-top: 20vh;
    }

    .section-first {
        padding-top: 80px;
    }

    .section-vascular {
        padding-top: 120px;
    }

    .section-heartwood {
        padding-top: 160px;
    }
}

@media (max-width: 600px) {
    .domain-name {
        font-size: clamp(1.8rem, 8vw, 2.8rem);
    }

    .opening-void {
        padding-top: 15vh;
        min-height: 60vh;
    }

    .section-first {
        padding-top: 60px;
    }

    .section-vascular {
        padding-top: 80px;
    }

    .section-heartwood {
        padding-top: 100px;
    }

    .closing-void {
        min-height: 40vh;
    }
}