:root {
    /* Design terms: IntersectionObserver setup trigger `font-variation-settings`. `CASL` axis shifts IntersectionObserver` `threshold: 0.15` watches `.reveal` elements. When triggered zone that */
    --parchment: #f4edd8;
    --parchment-deep: #ebe3c8;
    --ink: #2d3a28;
    --sage: #5a6e52;
    --line: #a3b297;
    --ochre: #b8913a;
    --soft-sage: #c8d4be;
    --quiet: #8a907e;
    --reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--parchment);
    color: var(--sage);
    font-family: "Recursive", Inter, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.82;
    font-variation-settings: "wght" 380, "CASL" 0.3, "CRSV" 0, "slnt" 0, "MONO" 0;
    overflow-x: hidden;
}

.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    z-index: 50;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 360 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23g)'/%3E%3C/svg%3E");
}

.journal-page {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    transform: translateX(-3vw);
    padding: 0 clamp(1.5rem, 8vw, 6rem);
}

.journal-page::before,
.margin-column::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 1.78rem, rgba(163, 178, 151, 0.12) 1.78rem, rgba(163, 178, 151, 0.12) calc(1.78rem + 1px));
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1200ms var(--reveal), transform 1200ms var(--reveal);
}

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

section { position: relative; margin: 7rem 0; }

h1, h2 {
    margin: 0 0 1.4rem;
    color: var(--ink);
    font-family: "Caveat", cursive;
    font-weight: 400;
    letter-spacing: -0.02em;
    transition: font-weight 600ms ease-in-out;
}

h1:hover, h2:hover { font-weight: 600; }

h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 0.9; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
p { margin: 0 0 1.55rem; }
em { color: var(--ink); }

.tiny-label {
    color: var(--quiet);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-variation-settings: "MONO" 1, "CASL" 0, "wght" 340;
    margin-bottom: 0.65rem;
}

.opening-field {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
}

.thinking-blob {
    width: min(78vw, 480px);
    min-height: 360px;
    display: grid;
    place-items: center;
    position: relative;
    background: rgba(200, 212, 190, 0.42);
    border: 1px solid rgba(45, 58, 40, 0.18);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    animation: blobMorph 12s ease-in-out infinite, blobSway 20s ease-in-out infinite;
}

.blob-line { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); }

.opening-sentence {
    max-width: 520px;
    margin-top: 2rem;
    font-size: clamp(1.08rem, 2vw, 1.35rem);
}

@keyframes blobMorph {
    0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
    33% { border-radius: 40% 60% 30% 70% / 60% 40% 50% 50%; }
    66% { border-radius: 50% 50% 60% 40% / 40% 50% 60% 50%; }
}

@keyframes blobSway { 0%, 100% { rotate: 0deg; } 50% { rotate: 3deg; } }

.divider { width: 100%; height: 34px; margin: 5rem 0; }
.hedgerow { width: 100%; height: 140px; margin: 4rem 0 3rem; }

.draw-path {
    fill: none;
    stroke: var(--line);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--length, 900);
    stroke-dashoffset: var(--length, 900);
    transition: stroke-dashoffset 2400ms var(--reveal);
}

.draw-path.ready, .visible .draw-path, .draw-host.visible .draw-path { stroke-dashoffset: 0; }
.draw-path.small { stroke-width: 1; }
.draw-path.wash { fill: rgba(200, 212, 190, 0.4); stroke: var(--soft-sage); }
.draw-path.accent { stroke: var(--ochre); }
.blob-line .draw-path { stroke: var(--ink); stroke-width: 2; }

.thought-text {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1600ms var(--reveal), font-variation-settings 800ms ease-in-out;
}

.visible .thought-text { clip-path: inset(0 0 0 0); }
.ink-shift { font-variation-settings: "wght" 380, "CASL" 0.3, "CRSV" 0, "slnt" 0, "MONO" 0; transition: font-variation-settings 800ms ease-in-out; }
.ink-shift.emphasis { font-variation-settings: "wght" 400, "CASL" 0.8, "CRSV" 1, "slnt" -8, "MONO" 0; }

.sketch-item {
    margin: 3.5rem 0;
    text-align: center;
}

.sketch { width: min(100%, 430px); height: auto; }
figcaption {
    max-width: 430px;
    margin: 0.5rem auto 0;
    color: var(--sage);
    font-family: "Caveat", cursive;
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
}

.margin-notes { min-height: 520px; }
.margin-fern { position: absolute; left: 0; top: 7rem; width: 90px; height: 260px; }

.margin-column {
    position: relative;
    max-width: 420px;
    margin-left: auto;
    padding: 1rem 0 1rem 2rem;
}

.margin-column p {
    position: relative;
    color: var(--sage);
    font-size: 0.92rem;
    line-height: 1.6;
    font-variation-settings: "wght" 340, "CASL" 0.7, "CRSV" 1, "slnt" -8, "MONO" 0;
}

.closing-meadow {
    min-height: 60vh;
    margin: 8rem calc(50% - 50vw) 0;
    padding: 7rem max(2rem, calc(50vw - 340px));
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--parchment-deep);
    overflow: hidden;
}

.closing-meadow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 1.78rem, rgba(163, 178, 151, 0.16) 1.78rem, rgba(163, 178, 151, 0.16) calc(1.78rem + 1px));
}

.closing-blob {
    width: min(55vw, 360px);
    aspect-ratio: 1;
    background: rgba(200, 212, 190, 0.65);
    border: 1px dashed var(--line);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    animation: blobMorph 12s ease-in-out infinite, blobSway 20s ease-in-out infinite;
}

.closing-meadow h2, .closing-meadow p { position: relative; z-index: 2; }
.closing-meadow h2 { font-size: clamp(2.8rem, 7vw, 5rem); margin-top: -7rem; }
.closing-meadow p { color: var(--ink); font-style: italic; }

.seed-field { position: absolute; inset: 0; }
.seed-field span {
    position: absolute;
    width: var(--s, 9px);
    height: var(--s, 9px);
    border-radius: 48% 52% 60% 40%;
    background: var(--ochre);
    opacity: 0;
    animation: seedIn 900ms ease-out forwards;
    animation-delay: var(--d, 0ms);
}
.seed-field span:nth-child(1) { left: 11%; top: 23%; --s: 7px; --d: 0ms; }
.seed-field span:nth-child(2) { left: 21%; top: 67%; --s: 12px; --d: 180ms; background: var(--line); }
.seed-field span:nth-child(3) { left: 35%; top: 38%; --s: 8px; --d: 360ms; }
.seed-field span:nth-child(4) { left: 46%; top: 76%; --s: 10px; --d: 540ms; background: var(--line); }
.seed-field span:nth-child(5) { left: 58%; top: 21%; --s: 6px; --d: 720ms; }
.seed-field span:nth-child(6) { left: 69%; top: 62%; --s: 14px; --d: 900ms; background: var(--line); }
.seed-field span:nth-child(7) { left: 82%; top: 31%; --s: 9px; --d: 1080ms; }
.seed-field span:nth-child(8) { left: 88%; top: 78%; --s: 11px; --d: 1260ms; background: var(--line); }
.seed-field span:nth-child(9) { left: 14%; top: 84%; --s: 8px; --d: 1440ms; }

@keyframes seedIn { to { opacity: 0.65; transform: scale(1.02) rotate(18deg); } }

@media (max-width: 760px) {
    .journal-page { transform: none; padding: 0 clamp(1rem, 6vw, 2rem); }
    section { margin: 5rem 0; }
    .thinking-blob { min-height: 285px; }
    .margin-fern { display: none; }
    .margin-column { margin-left: 0; padding-left: 0; }
    .closing-meadow { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: 2rem; }
}