:root {
    --heartwood: #5A3824;
    --hanji: #F4E8D1;
    --leaf: #6F8F4E;
    --sap: #D59637;
    --lichen: #AFC7C2;
    --persimmon: #B75F36;
    --night: #1E2630;
    --font-title: "Noto Serif KR", serif;
    --font-poem: "Cormorant Garamond", serif;
    --font-note: "Gowun Dodum", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
}

/* IBM Plex Mono only for tiny dendrochronology ticks. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--heartwood);
    background: var(--hanji);
    font-family: var(--font-note);
    overflow-x: hidden;
}

button { font: inherit; }

.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: .34;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(90,56,36,.12) 0 1px, transparent 1.8px),
        radial-gradient(circle at 70% 64%, rgba(111,143,78,.12) 0 1px, transparent 1.7px),
        linear-gradient(115deg, rgba(255,255,255,.18), transparent 34%, rgba(90,56,36,.08) 70%, transparent);
    background-size: 23px 31px, 37px 41px, 100% 100%;
    mix-blend-mode: multiply;
}

.bark-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 74px;
    z-index: 60;
    background:
        linear-gradient(90deg, rgba(90,56,36,.94), rgba(90,56,36,.78) 54%, rgba(90,56,36,0)),
        repeating-linear-gradient(96deg, transparent 0 13px, rgba(244,232,209,.12) 14px 15px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    padding-left: 12px;
}

.nav-title {
    position: absolute;
    top: 24px;
    left: 10px;
    color: var(--hanji);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .78;
}

.hour-notch {
    border: 0;
    background: transparent;
    color: var(--hanji);
    width: 58px;
    height: 18px;
    padding: 0;
    text-align: left;
    cursor: pointer;
    opacity: .55;
    transition: opacity .4s ease, transform .4s ease;
}

.hour-notch::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    margin-right: 6px;
    background: currentColor;
    vertical-align: middle;
    transition: width .4s ease;
}

.hour-notch span {
    font-family: var(--font-mono);
    font-size: 10px;
}

.hour-notch.active { opacity: 1; transform: translateX(5px); }
.hour-notch.active::before { width: 34px; color: var(--sap); }

.chapter {
    position: relative;
    min-height: 105vh;
    overflow: hidden;
    padding-left: 94px;
    isolation: isolate;
}

.chapter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background: var(--hanji);
}

.chapter::after {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -2;
    opacity: .75;
    background: radial-gradient(circle at var(--light-x, 70%) var(--light-y, 25%), var(--scene-light, #AFC7C2), transparent 42%);
    transition: background .7s ease;
}

.sticky-wood, .vein-terrain, .canopy-heat, .bark-archive, .dusk-crack, .night-disc {
    position: absolute;
    inset: 0;
}

.ring-disc {
    position: absolute;
    width: min(1120px, 116vw);
    height: min(1120px, 116vw);
    right: -260px;
    top: 50%;
    transform: translateY(-50%) scale(var(--ring-scale, 1));
    filter: drop-shadow(0 28px 46px rgba(90,56,36,.18));
}

.rings path {
    fill: none;
    stroke: var(--heartwood);
    stroke-width: 3.2;
    stroke-linecap: round;
    opacity: .38;
    vector-effect: non-scaling-stroke;
    animation: ringBreath 7s ease-in-out infinite alternate;
}

.rings path:nth-child(2n) { stroke-width: 1.7; animation-delay: -2s; }
.rings path:nth-child(3n) { opacity: .23; animation-delay: -4s; }

.cracks path, .root-map path {
    fill: none;
    stroke: var(--heartwood);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .62;
}

.carved-word {
    font-family: var(--font-title);
    font-size: 86px;
    font-weight: 700;
    letter-spacing: .025em;
    fill: rgba(90,56,36,.78);
}

.arc-caption {
    font-family: var(--font-poem);
    font-size: 25px;
    letter-spacing: .08em;
    fill: rgba(90,56,36,.58);
}

.ink-stamp, .seal, .moon-seal {
    position: absolute;
    display: grid;
    place-items: center;
    border: 2px solid currentColor;
    color: var(--heartwood);
    transform: rotate(-8deg);
}

.ink-stamp {
    right: 26vw;
    top: 24vh;
    width: 112px;
    height: 86px;
    font-family: var(--font-title);
    font-size: 42px;
    font-weight: 700;
    background: rgba(244,232,209,.18);
    box-shadow: inset 0 0 0 6px rgba(90,56,36,.05);
}

.seal {
    right: 10vw;
    bottom: 14vh;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    font-family: var(--font-title);
    font-size: 15px;
}

.leaf-shadow {
    position: absolute;
    width: 390px;
    height: 180px;
    background: rgba(111,143,78,.16);
    border-radius: 4% 70% 8% 70%;
    filter: blur(6px);
    transform: rotate(-28deg);
    animation: leafPass 12s ease-in-out infinite alternate;
}

.shadow-one { left: 21vw; top: 16vh; }

.chapter-note {
    position: relative;
    z-index: 5;
    width: min(520px, calc(100vw - 130px));
    padding: 34px 38px;
    background: rgba(244,232,209,.58);
    border: 1px solid rgba(90,56,36,.24);
    box-shadow: 0 20px 60px rgba(90,56,36,.12);
    backdrop-filter: blur(3px);
}

.hero-note { top: 24vh; margin-left: 6vw; }
.right-note { margin-left: auto; margin-right: 9vw; top: 30vh; }
.left-note { top: 28vh; margin-left: 8vw; }
.archive-note { top: 22vh; margin-left: 48vw; }
.dusk-note { top: 30vh; margin-left: 10vw; }
.night-note { top: 30vh; margin-left: 50vw; background: rgba(30,38,48,.6); color: var(--hanji); border-color: rgba(244,232,209,.2); }

.specimen {
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1, h2 {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.04em;
}

h1 { font-size: clamp(64px, 9vw, 126px); }
h2 { font-size: clamp(48px, 7vw, 94px); }

.chapter-note p:not(.specimen) {
    font-family: var(--font-poem);
    font-size: clamp(23px, 2.4vw, 36px);
    line-height: 1.08;
    margin: 24px 0 0;
}

.leader-line {
    position: absolute;
    left: 100%;
    top: 46%;
    width: 29vw;
    height: 1px;
    background: var(--heartwood);
    transform: rotate(-11deg);
    opacity: .36;
}

.breakfast::after { --scene-light: #6F8F4E; --light-x: 42%; --light-y: 20%; opacity: .42; }
.noon::after { --scene-light: #D59637; --light-x: 52%; --light-y: 10%; opacity: .5; }
.archive::after { --scene-light: #5A3824; --light-x: 18%; --light-y: 74%; opacity: .22; }
.dusk::after { --scene-light: #B75F36; --light-x: 74%; --light-y: 50%; opacity: .48; }
.night::before { background: var(--night); }
.night::after { --scene-light: #D59637; --light-x: 50%; --light-y: 50%; opacity: .2; }

.leaf-map {
    position: absolute;
    width: min(1050px, 104vw);
    height: auto;
    left: 3vw;
    top: 9vh;
    transform: rotate(-7deg);
}

.leaf-map path {
    fill: none;
    stroke: var(--leaf);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .58;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: drawVeins 4s ease forwards;
}

.leaf-map .midrib { stroke-width: 6; opacity: .72; }

.seed {
    position: absolute;
    font-family: var(--font-poem);
    color: var(--heartwood);
    font-size: 64px;
    animation: seedFall 9s linear infinite;
}

.seed-a { left: 28vw; top: -10vh; animation-delay: -1s; }
.seed-b { left: 68vw; top: -18vh; animation-delay: -5s; }

.pressed-label {
    position: absolute;
    left: 20vw;
    bottom: 18vh;
    padding: 13px 18px;
    border: 1px solid rgba(90,56,36,.35);
    background: rgba(244,232,209,.72);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    transform: rotate(-5deg);
}

.bird {
    position: absolute;
    width: 68px;
    height: 22px;
    opacity: .22;
    background: radial-gradient(ellipse at left, var(--night) 0 48%, transparent 50%), radial-gradient(ellipse at right, var(--night) 0 48%, transparent 50%);
    animation: birdCross 16s linear infinite;
}

.bird-one { top: 19vh; left: -8vw; }
.bird-two { top: 31vh; left: -14vw; animation-delay: -6s; transform: scale(.7); }

.canopy-heat { background: radial-gradient(circle at 50% 30%, rgba(213,150,55,.2), transparent 30%); }
.sun-pool {
    position: absolute;
    width: 62vw;
    height: 62vw;
    right: -7vw;
    top: 6vh;
    background: radial-gradient(circle, rgba(213,150,55,.5), rgba(213,150,55,.13) 45%, transparent 67%);
    border-radius: 50%;
    filter: blur(12px);
}

.noon-rings {
    position: absolute;
    width: min(880px, 90vw);
    right: -130px;
    top: 4vh;
}

.warm-tag { border-color: rgba(213,150,55,.55); }

.beetle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 27px;
    border-radius: 50%;
    background: var(--night);
    box-shadow: 0 -5px 0 -1px var(--heartwood), 0 0 0 2px rgba(244,232,209,.24) inset;
    transform: translate(-50%, -50%);
}

.bark-archive {
    background:
        repeating-linear-gradient(102deg, rgba(90,56,36,.12) 0 3px, transparent 3px 15px),
        linear-gradient(180deg, rgba(90,56,36,.08), transparent 40%);
}

.wood-slice {
    position: absolute;
    width: 180px;
    height: 116px;
    padding: 28px;
    color: var(--heartwood);
    font-family: var(--font-mono);
    font-size: 18px;
    background: rgba(244,232,209,.7);
    border: 1px solid rgba(90,56,36,.3);
    box-shadow: inset 0 0 0 8px rgba(90,56,36,.04), 0 18px 38px rgba(90,56,36,.12);
}

.wood-slice small { font-family: var(--font-note); font-size: 13px; }
.slice-one { left: 14vw; top: 18vh; transform: rotate(5deg); }
.slice-two { left: 34vw; top: 52vh; transform: rotate(-7deg); }
.slice-three { right: 9vw; top: 12vh; transform: rotate(3deg); }

.root-map {
    position: absolute;
    width: min(980px, 96vw);
    left: 7vw;
    bottom: -4vh;
}

.root-map path { stroke: var(--heartwood); opacity: .44; }
.root-map .root-main { stroke-width: 5; opacity: .56; }

.dusk-crack { background: linear-gradient(120deg, rgba(183,95,54,.16), transparent 45%, rgba(213,150,55,.15)); }
.amber-crack {
    position: absolute;
    height: 105vh;
    left: 43vw;
    top: -2vh;
}

.crack-base, .sap-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crack-base { stroke: var(--heartwood); stroke-width: 10; opacity: .42; }
.sap-line {
    stroke: var(--sap);
    stroke-width: 4;
    stroke-dasharray: 920;
    stroke-dashoffset: 920;
    filter: drop-shadow(0 0 8px rgba(213,150,55,.85));
}

.resin {
    position: absolute;
    width: 19px;
    height: 28px;
    border-radius: 60% 60% 70% 70%;
    background: radial-gradient(circle at 35% 25%, #F4E8D1, var(--sap) 35%, #B75F36 86%);
    animation: resinGlow 2.8s ease-in-out infinite alternate;
}

.resin-one { left: 46vw; top: 26vh; }
.resin-two { left: 40vw; top: 54vh; animation-delay: -1s; }
.resin-three { left: 43vw; top: 72vh; animation-delay: -2s; }

.fallen-leaf {
    position: absolute;
    width: 112px;
    height: 54px;
    background: var(--persimmon);
    border-radius: 4% 76% 8% 76%;
    opacity: .72;
    transform-origin: 50% 20%;
    animation: leafSettle 11s ease-in-out infinite alternate;
}

.leaf-a { right: 13vw; top: 18vh; transform: rotate(25deg); }
.leaf-b { right: 24vw; bottom: 16vh; transform: rotate(-18deg) scale(.8); animation-delay: -4s; }

.night { color: var(--hanji); }
.lantern-rings {
    position: absolute;
    width: min(930px, 104vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.night-lines path {
    stroke: var(--sap);
    opacity: .55;
    filter: drop-shadow(0 0 8px rgba(213,150,55,.55));
}

.moon-seal {
    right: 18vw;
    top: 18vh;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    color: var(--sap);
    font-family: var(--font-title);
}

.moth {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--hanji);
    opacity: .58;
    filter: blur(.4px) drop-shadow(0 0 8px var(--sap));
    animation: mothOrbit 8s ease-in-out infinite;
}

.moth-one { left: 44vw; top: 35vh; }
.moth-two { left: 58vw; top: 61vh; animation-delay: -3s; }

@keyframes ringBreath {
    from { transform: scale(1); }
    to { transform: scale(1.004); }
}

@keyframes leafPass {
    from { transform: translateX(-40px) rotate(-28deg); opacity: .1; }
    to { transform: translateX(80px) rotate(-22deg); opacity: .24; }
}

@keyframes drawVeins { to { stroke-dashoffset: 0; } }

@keyframes seedFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: .7; }
    100% { transform: translateY(118vh) rotate(700deg); opacity: 0; }
}

@keyframes birdCross { to { transform: translateX(120vw); } }

@keyframes resinGlow { to { filter: drop-shadow(0 0 14px rgba(213,150,55,.9)); transform: translateY(5px); } }

@keyframes leafSettle { to { transform: translateY(28px) rotate(5deg); } }


@keyframes mothOrbit {
    0%, 100% { transform: translate(0, 0) scale(.8); }
    33% { transform: translate(42px, -28px) scale(1); }
    66% { transform: translate(-34px, 22px) scale(.72); }
}

@media (max-width: 760px) {
    .bark-nav { width: 52px; padding-left: 7px; }
    .chapter { padding-left: 58px; }
    .chapter-note { width: calc(100vw - 78px); padding: 24px; }
    .hero-note, .right-note, .left-note, .archive-note, .dusk-note, .night-note { margin-left: 12px; margin-right: 0; top: 38vh; }
    .ring-disc { right: -420px; width: 980px; height: 980px; }
    .ink-stamp { right: 19vw; top: 17vh; }
    .archive-note, .night-note { margin-left: 12px; }
    .wood-slice { width: 136px; height: 92px; padding: 18px; }
}