:root {
    /* Compliance vocabulary: Zones Interludes* Interludes: Interludes:** Between major text sections IntersectionObserver` at `threshold: 0.8` IntersectionObserver` with `rootMargin: '-10% 0px'` to trigger underline-draw animations on `.highlight` spans as they enter the viewport. Source Serif 4" (Google Fonts Space Grotesk" (Google Fonts */
    --parchment: #faf6ef;
    --charcoal: #1a1712;
    --umber: #3d3529;
    --honey: #d4a853;
    --amber: #c28b3a;
    --wheat: #e8d5a8;
    --sandstone: #c7b48a;
    --haze: #f5e6b8;
    --muted: #a08c6a;
    --hero-weight: 700;
    --hero-width: 85;
    --hero-spacing: -0.04em;
}

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

html {
    background: #faf6ef;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #faf6ef;
    color: #3d3529;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 88% 22%, rgba(245, 230, 184, 0.56), transparent 28vw),
        radial-gradient(circle at 14% 74%, rgba(212, 168, 83, 0.11), transparent 34vw),
        linear-gradient(180deg, #faf6ef 0%, #faf6ef 64%, #f5e6b8 100%);
}

.gate-section {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: #faf6ef;
}

.particle-canvas,
.hero-blobs,
.gate-flare,
.gate-copy {
    position: absolute;
}

.particle-canvas {
    inset: 0;
    z-index: 1;
}

.hero-blobs {
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.gate-flare {
    z-index: 3;
    left: 16vw;
    top: 15vh;
    width: 62vw;
    height: 62vw;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #f5e6b8 0%, #d4a853 15%, transparent 60%);
    opacity: 0.34;
    filter: blur(22px);
    animation: flarePulse 8s ease-in-out infinite;
    pointer-events: none;
}

.gate-copy {
    z-index: 4;
    left: 12vw;
    top: 50%;
    width: min(80vw, 1200px);
    transform: translateY(-50%);
}

.eyebrow,
.section-label {
    color: #a08c6a;
    font-family: "Space Grotesk", "Trebuchet MS", Arial, sans-serif;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.4;
    margin-bottom: 1.6rem;
    text-transform: uppercase;
}

#heroTitle {
    color: #1a1712;
    font-family: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(4rem, 12vw, 11rem);
    font-stretch: condensed;
    font-variation-settings: "wght" var(--hero-weight), "wdth" var(--hero-width);
    font-weight: var(--hero-weight);
    letter-spacing: var(--hero-spacing);
    line-height: 0.82;
    animation: breathe 8s ease-in-out infinite;
    text-rendering: geometricPrecision;
}

.gate-subtitle {
    width: min(42rem, 78vw);
    color: #3d3529;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    line-height: 1.72;
    margin-top: 2.2rem;
}

.blob {
    position: absolute;
    pointer-events: none;
    opacity: 0.72;
    overflow: visible;
}

.blob path,
.interlude-blob path {
    transform-origin: center;
}

.blob-a {
    left: 54vw;
    top: 4vh;
    width: 38vw;
    fill: rgba(232, 213, 168, 0.62);
    animation: driftOne 32s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.blob-b {
    left: -9vw;
    top: 46vh;
    width: 35vw;
    fill: rgba(212, 168, 83, 0.24);
    animation: driftTwo 38s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.blob-c {
    left: 35vw;
    top: 53vh;
    width: 28vw;
    fill: rgba(199, 180, 138, 0.31);
    animation: driftThree 27s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

main {
    position: relative;
    background: transparent;
}

.essay-section {
    min-height: 80vh;
    max-width: 55ch;
    margin-left: 12vw;
    padding: 15vh 0;
    position: relative;
}

.essay-section::before,
.colophon::before {
    content: "";
    position: absolute;
    width: 50vw;
    height: 50vw;
    left: 28vw;
    top: 4vh;
    border-radius: 50%;
    background: radial-gradient(circle, #f5e6b8 0%, #d4a853 20%, transparent 70%);
    filter: blur(40px);
    opacity: 0.12;
    pointer-events: none;
    transition: opacity 800ms ease;
}

.flare-zone.is-near::before,
.colophon.is-near::before {
    opacity: 0.35;
}

.dark-section {
    max-width: none;
    min-height: 90vh;
    margin-left: 0;
    padding-left: 12vw;
    background: #1a1712;
    color: #faf6ef;
}

.dark-section > * {
    max-width: 55ch;
}

.dark-section h2,
.dark-section p {
    color: #faf6ef;
}

h2 {
    color: #1a1712;
    font-family: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-variation-settings: "wght" 650, "wdth" 88;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.96;
    margin-bottom: 2.4rem;
}

p {
    color: #3d3529;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(1.05rem, 1.2vw, 1.3rem);
    font-weight: 400;
    line-height: 1.72;
    margin-bottom: 1.65rem;
}

.highlight,
a {
    background-image: linear-gradient(#d4a853, #d4a853);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    color: inherit;
    padding-bottom: 0.08em;
    text-decoration: none;
    transition: background-size 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.highlight.is-drawn,
a:hover {
    background-size: 100% 2px;
}

.blob-interlude {
    height: 64vh;
    position: relative;
    overflow: hidden;
}

.blob-interlude.short {
    height: 48vh;
}

.interlude-flare,
.colophon-flare {
    position: absolute;
    left: 20vw;
    top: 4vh;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    background: radial-gradient(circle, #f5e6b8 0%, rgba(212, 168, 83, 0.65) 18%, transparent 68%);
    filter: blur(42px);
    opacity: 0.18;
}

.interlude-flare.small {
    left: 46vw;
    top: -10vh;
    width: 34vw;
    height: 34vw;
}

.interlude-blob {
    position: absolute;
    pointer-events: none;
}

.interlude-blob.one {
    left: 10vw;
    top: 2vh;
    width: 34vw;
    fill: rgba(212, 168, 83, 0.22);
    animation: driftTwo 35s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.interlude-blob.two {
    right: 8vw;
    top: 14vh;
    width: 28vw;
    fill: rgba(232, 213, 168, 0.46);
    animation: driftOne 29s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.interlude-blob.three {
    left: 34vw;
    top: 0;
    width: 30vw;
    fill: rgba(199, 180, 138, 0.36);
    animation: driftThree 31s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.colophon {
    min-height: 60vh;
    max-width: 55ch;
    margin-left: 12vw;
    padding: 13vh 0 16vh;
    position: relative;
}

.colophon h2 {
    color: #1a1712;
    font-size: clamp(3rem, 8vw, 7.5rem);
}

@keyframes breathe {
    0%, 100% {
        font-variation-settings: "wght" var(--hero-weight), "wdth" var(--hero-width);
    }
    50% {
        font-variation-settings: "wght" 400, "wdth" 95;
        letter-spacing: 0.01em;
    }
}

@keyframes flarePulse {
    0%, 100% { opacity: 0.26; transform: scale(0.96); }
    50% { opacity: 0.42; transform: scale(1.06); }
}

@keyframes driftOne {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5vw, -3vh) rotate(8deg); }
}

@keyframes driftTwo {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-4vw, 5vh) rotate(-9deg); }
}

@keyframes driftThree {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(3vw, 4vh) rotate(6deg); }
}

@media (max-width: 760px) {
    .gate-copy,
    .essay-section,
    .colophon {
        margin-left: 0;
        left: auto;
        width: auto;
        max-width: none;
        padding-left: 8vw;
        padding-right: 8vw;
    }

    .dark-section {
        padding-left: 8vw;
        padding-right: 8vw;
    }

    #heroTitle {
        font-size: clamp(3.2rem, 16vw, 6rem);
        letter-spacing: -0.055em;
    }

    .blob-a { width: 72vw; left: 44vw; }
    .blob-b { width: 65vw; left: -26vw; }
    .blob-c { width: 58vw; left: 25vw; }
    .interlude-blob.one,
    .interlude-blob.two,
    .interlude-blob.three { width: 64vw; }
}