:root {
    /* Design compliance vocabulary: Active nodes glow with a `box-shadow: 0 0 12px #e8c86a80`. The page is a continuous vertical scroll with NO navigation chrome — no hamburger menu. IBM Plex Mono" (Google Fonts) IntersectionObserver IntersectionObserver` to detect when a vignette enters the viewport Source Serif 4" (Google Fonts). */
    --parchment: #f5edd6;
    --vellum: #ede0c4;
    --ink: #2c2416;
    --shadow: #a69882;
    --gold: #8b6914;
    --candle: #e8c86a;
    --sienna: #b85c38;
    --blue: #4a7c8c;
    --green: #5a6e3c;
    --spine-x: 38.2%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #f5edd6;
    color: #2c2416;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
}

.page-wash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background:
        radial-gradient(ellipse at 20% 10%, #e8c86a22, transparent 34%),
        radial-gradient(ellipse at 80% 90%, #b85c3816, transparent 38%),
        repeating-linear-gradient(0deg, transparent, transparent 79px, #a6988215 79px, #a6988215 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, #a6988215 79px, #a6988215 80px);
    mix-blend-mode: multiply;
}

.great-scroll { position: relative; }
.scene, .epoch { min-height: 100vh; position: relative; }

.timeline-spine {
    position: fixed;
    left: var(--spine-x);
    top: 0;
    width: 4px;
    height: 100vh;
    transform: translateX(-50%);
    z-index: 8;
    background: linear-gradient(180deg, #8b6914, #e8c86a 22%, #8b6914 45%, #b85c38 70%, #8b6914);
    background-size: 100% 220%;
    box-shadow: 0 0 0 1px #2c241622, 0 0 18px #e8c86a44;
}
.timeline-current { width: 100%; height: 0%; background: #2c2416; opacity: .28; }

.hero {
    display: grid;
    place-items: center;
    padding: 8vh 8vw;
    background:
        radial-gradient(ellipse at 30% 20%, #f5edd6, transparent 70%),
        radial-gradient(ellipse at 70% 80%, #ede0c4, transparent 60%),
        linear-gradient(180deg, #2c2416 0%, #f5edd6 16%, #ede0c4 100%);
    animation: parchmentWake 3s ease forwards;
}
.desk-map {
    position: absolute;
    width: min(76vw, 900px);
    height: min(56vh, 520px);
    border: 3px double #a69882;
    background:
        linear-gradient(90deg, transparent 47%, #8b69141f 48%, #8b69141f 52%, transparent 53%),
        repeating-linear-gradient(0deg, transparent, transparent 31px, #a6988220 31px, #a6988220 32px),
        repeating-linear-gradient(90deg, transparent, transparent 31px, #a6988220 31px, #a6988220 32px),
        radial-gradient(ellipse at 30% 20%, #f5edd6, transparent 70%),
        radial-gradient(ellipse at 70% 80%, #ede0c4, transparent 60%),
        linear-gradient(180deg, #f5edd6 0%, #ede0c4 100%);
    transform: rotate(-2deg);
    box-shadow: 0 24px 80px #2c241633;
}
.hero-copy { position: relative; z-index: 2; text-align: center; max-width: 920px; }
.kicker, .era-date, .date, .node span, .capture button, .capture input, .form-note {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em;
}
.kicker { color: #8b6914; text-transform: uppercase; font-size: .85rem; }
.logotype {
    min-height: 1.2em;
    margin: .1em 0 .25em;
    font-family: "Bungee Inline", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    color: #2c2416;
    text-shadow: 4px 4px 0 #e8c86a66;
}
.logotype span { display: inline-block; opacity: 0; transform: translateY(-18px) scale(.86); animation: letterSet .42s cubic-bezier(.25,.46,.45,.94) forwards; }
.hero-line { max-width: 680px; margin: 0 auto; font-family: "Libre Baskerville", Georgia, serif; font-style: italic; color: #5a6e3c; }
.pixel-arrow { position: absolute; bottom: 7vh; opacity: 0; animation: arrowPulse 1.5s ease-in-out 2.5s infinite; }
.pixel-arrow span { display: block; width: 28px; height: 28px; background: #b85c38; clip-path: polygon(36% 0,64% 0,64% 48%,100% 48%,50% 100%,0 48%,36% 48%); image-rendering: pixelated; }

.desk-pixels { position: absolute; width: 5px; height: 5px; image-rendering: pixelated; opacity: 0; animation: pixelPop .7s steps(8) forwards; }
.compass-pixel { left: 20%; top: 24%; background: #8b6914; animation-delay: .5s; box-shadow: 0 -20px 0 #8b6914,0 20px 0 #8b6914,-20px 0 0 #8b6914,20px 0 0 #8b6914,-15px -15px 0 #e8c86a,15px -15px 0 #e8c86a,-15px 15px 0 #e8c86a,15px 15px 0 #e8c86a; transform: scale(3); }
.inkwell-pixel { right: 26%; top: 30%; background: #2c2416; animation-delay: .72s; box-shadow: -10px 0 0 #2c2416,10px 0 0 #2c2416,-10px 5px 0 #4a7c8c,0 5px 0 #4a7c8c,10px 5px 0 #4a7c8c,-5px 10px 0 #2c2416,5px 10px 0 #2c2416; transform: scale(4); }
.quill-pixel { right: 33%; top: 43%; background: #2c2416; animation-delay: .94s; box-shadow: 5px -5px 0 #2c2416,10px -10px 0 #2c2416,15px -15px 0 #b85c38,20px -20px 0 #e8c86a,25px -20px 0 #e8c86a,20px -25px 0 #8b6914,15px -25px 0 #e8c86a,-5px 5px 0 #b85c38; transform: scale(4); }
.scroll-pixel { left: 34%; bottom: 22%; background: #ede0c4; animation-delay: 1.16s; box-shadow: 5px 0 0 #ede0c4,10px 0 0 #ede0c4,15px 0 0 #ede0c4,20px 0 0 #ede0c4,25px 0 0 #8b6914,0 5px 0 #f5edd6,5px 5px 0 #f5edd6,10px 5px 0 #f5edd6,15px 5px 0 #f5edd6,20px 5px 0 #f5edd6,25px 5px 0 #8b6914,0 10px 0 #a69882,5px 10px 0 #a69882,10px 10px 0 #a69882,15px 10px 0 #a69882,20px 10px 0 #a69882; transform: scale(5); }

.epoch { padding: 14vh 7vw 16vh; }
.epoch::before { content: ""; position: absolute; inset: -5%; pointer-events: none; transform: rotate(var(--grid-tilt, 0deg)); transition: transform 1s ease; background: var(--grid-bg); }
.epoch-ancient { --grid-tilt: -.6deg; --grid-bg: radial-gradient(ellipse at 22% 25%, #e8c86a1f, transparent 34%), repeating-linear-gradient(4deg, transparent, transparent 79px, #a6988215 79px, #a6988215 80px), repeating-linear-gradient(94deg, transparent, transparent 79px, #a6988215 79px, #a6988215 80px); background: #f5edd6; }
.epoch-medieval { --grid-tilt: 2deg; --grid-bg: repeating-linear-gradient(35deg, transparent, transparent 67px, #8b69141c 67px, #8b69141c 68px), repeating-linear-gradient(-35deg, transparent, transparent 67px, #b85c3815 67px, #b85c3815 68px), linear-gradient(180deg, #f5edd6, #e8c86a33 52%, #ede0c4); background: #ede0c4; }
.epoch-modern { --grid-tilt: 0deg; --grid-bg: repeating-linear-gradient(0deg, transparent, transparent 79px, #4a7c8c18 79px, #4a7c8c18 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, #4a7c8c18 79px, #4a7c8c18 80px), linear-gradient(180deg, #ede0c4, #f5edd6); background: #f5edd6; }

.era-heading { position: relative; z-index: 3; max-width: 520px; margin-bottom: 8vh; }
.left-heading { margin-left: calc(var(--spine-x) + 7vw); }
.right-heading { margin-left: 7vw; }
.era-heading h2, .final-scroll h2 { font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.15; margin: .1em 0; color: #2c2416; }
.era-date, .date { color: #b85c38; font-size: .85rem; }

.compass-rose { width: 54px; height: 54px; position: relative; margin-bottom: 1.2rem; animation: compassTurn linear both; animation-timeline: view(); }
.compass-rose::before, .compass-rose::after { content: ""; position: absolute; inset: 0; background: #8b6914; clip-path: polygon(50% 0,58% 38%,100% 50%,58% 62%,50% 100%,42% 62%,0 50%,42% 38%); opacity: .72; }
.compass-rose::after { transform: rotate(45deg) scale(.72); background: #e8c86a; }
.compass-rose span { position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%); font-family: "IBM Plex Mono", monospace; color: #8b6914; font-size: .75rem; }
.compass-rose.large { width: 96px; height: 96px; }
.compass-rose.final { width: 120px; height: 120px; margin: 0 auto 2rem; }

.moment { position: relative; z-index: 3; min-height: 72vh; display: grid; grid-template-columns: repeat(8, 1fr); gap: 24px; align-items: center; }
.panel {
    grid-column: 1 / span 3;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    border: 3px double #a69882;
    background: radial-gradient(ellipse at 30% 20%, #f5edd6, transparent 70%), radial-gradient(ellipse at 70% 80%, #ede0c4, transparent 60%), linear-gradient(180deg, #f5edd6 0%, #ede0c4 100%);
    box-shadow: 14px 18px 0 #8b69141a, 0 22px 70px #2c241621;
    opacity: 0;
    transform: translateX(-80px) rotate(-2deg);
    transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
}
.right .panel { grid-column: 5 / span 3; transform: translateX(80px) rotate(2deg); }
.moment.in-view .panel { opacity: 1; transform: translateX(0) rotate(0); }
.panel h3 { font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(1.35rem, 2vw, 2rem); margin: .4rem 0 .5rem; }
.panel p { margin: .5rem 0 0; }
.node { position: absolute; left: var(--spine-x); top: 50%; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 0; background: #8b6914; transform: translate(-50%, -50%); z-index: 9; box-shadow: 0 0 0 5px #f5edd6, 0 0 0 8px #a69882; transition: width .25s, height .25s, box-shadow .25s; }
.node span { position: absolute; left: 22px; top: 50%; white-space: nowrap; transform: translateY(-50%) rotate(-3deg); padding: .25rem .5rem; background: #f5edd6; border: 1px solid #a69882; color: #8b6914; opacity: 0; transition: opacity .25s, transform .45s; font-size: .85rem; }
.right .node span { left: auto; right: 22px; }
.moment.in-view .node, .node:hover { width: 24px; height: 24px; box-shadow: 0 0 12px #e8c86a80, 0 0 0 5px #f5edd6, 0 0 0 8px #a69882; }
.moment.in-view .node span, .node:hover span { opacity: 1; transform: translateY(-50%) rotate(0); }

.vignette { height: 148px; display: grid; place-items: center; margin-bottom: .5rem; opacity: 0; filter: sepia(.25); transition: opacity .2s; }
.vignette i, .vignette b { display: block; width: 4px; height: 4px; background: transparent; image-rendering: pixelated; transform: scale(5); }
.vignette.assembled { opacity: 1; }
.vignette.assembled i { animation: spriteSet .8s cubic-bezier(.25,.46,.45,.94) both; }
.pyramid i { background:#e8c86a; box-shadow:0 -28px 0 #e8c86a,-4px -24px 0 #e8c86a,0 -24px 0 #8b6914,4px -24px 0 #e8c86a,-8px -20px 0 #e8c86a,-4px -20px 0 #e8c86a,0 -20px 0 #8b6914,4px -20px 0 #e8c86a,8px -20px 0 #e8c86a,-12px -16px 0 #8b6914,-8px -16px 0 #e8c86a,-4px -16px 0 #e8c86a,0 -16px 0 #8b6914,4px -16px 0 #e8c86a,8px -16px 0 #e8c86a,12px -16px 0 #8b6914,-16px -12px 0 #8b6914,-12px -12px 0 #e8c86a,-8px -12px 0 #e8c86a,-4px -12px 0 #e8c86a,0 -12px 0 #8b6914,4px -12px 0 #e8c86a,8px -12px 0 #e8c86a,12px -12px 0 #e8c86a,16px -12px 0 #8b6914,28px -32px 0 #b85c38,32px -32px 0 #b85c38,28px -28px 0 #b85c38,32px -28px 0 #b85c38; }
.temple i { background:#4a7c8c; box-shadow:-4px -20px 0 #4a7c8c,4px -20px 0 #4a7c8c,-8px -16px 0 #4a7c8c,0 -16px 0 #4a7c8c,8px -16px 0 #4a7c8c,-16px -12px 0 #a69882,-12px -12px 0 #a69882,-8px -12px 0 #a69882,-4px -12px 0 #a69882,0 -12px 0 #a69882,4px -12px 0 #a69882,8px -12px 0 #a69882,12px -12px 0 #a69882,16px -12px 0 #a69882,-12px -8px 0 #ede0c4,-12px -4px 0 #ede0c4,-12px 0 0 #ede0c4,-4px -8px 0 #ede0c4,-4px -4px 0 #ede0c4,-4px 0 0 #ede0c4,4px -8px 0 #ede0c4,4px -4px 0 #ede0c4,4px 0 0 #ede0c4,12px -8px 0 #ede0c4,12px -4px 0 #ede0c4,12px 0 0 #ede0c4,-20px 4px 0 #8b6914,-16px 4px 0 #8b6914,-12px 4px 0 #8b6914,-8px 4px 0 #8b6914,-4px 4px 0 #8b6914,0 4px 0 #8b6914,4px 4px 0 #8b6914,8px 4px 0 #8b6914,12px 4px 0 #8b6914,16px 4px 0 #8b6914,20px 4px 0 #8b6914; }
.arch i { background:#a69882; box-shadow:-20px -16px 0 #a69882,-16px -20px 0 #a69882,-12px -20px 0 #ede0c4,-8px -20px 0 #a69882,-4px -20px 0 #a69882,0 -20px 0 #a69882,4px -20px 0 #a69882,8px -20px 0 #a69882,12px -20px 0 #ede0c4,16px -20px 0 #a69882,20px -16px 0 #a69882,-20px -12px 0 #a69882,-12px -12px 0 #2c2416,0 -12px 0 #2c2416,12px -12px 0 #2c2416,20px -12px 0 #a69882,-20px -8px 0 #b85c38,-16px -8px 0 #b85c38,-8px -8px 0 #b85c38,-4px -8px 0 #b85c38,4px -8px 0 #b85c38,8px -8px 0 #b85c38,16px -8px 0 #b85c38,20px -8px 0 #b85c38,-20px -4px 0 #b85c38,-12px -4px 0 #2c2416,0 -4px 0 #2c2416,12px -4px 0 #2c2416,20px -4px 0 #b85c38,-24px 0 0 #8b6914,-20px 0 0 #8b6914,-16px 0 0 #8b6914,-12px 0 0 #8b6914,-8px 0 0 #8b6914,-4px 0 0 #8b6914,0 0 0 #8b6914,4px 0 0 #8b6914,8px 0 0 #8b6914,12px 0 0 #8b6914,16px 0 0 #8b6914,20px 0 0 #8b6914,24px 0 0 #8b6914; }
.castle i { background:#a69882; box-shadow:-20px -24px 0 #b85c38,-16px -24px 0 #b85c38,-20px -20px 0 #2c2416,-24px -16px 0 #a69882,-20px -16px 0 #a69882,20px -16px 0 #a69882,24px -16px 0 #a69882,-24px -12px 0 #a69882,-20px -12px 0 #a69882,-8px -12px 0 #a69882,0 -12px 0 #a69882,8px -12px 0 #a69882,20px -12px 0 #a69882,24px -12px 0 #a69882,-24px -8px 0 #a69882,-20px -8px 0 #a69882,-16px -8px 0 #a69882,-12px -8px 0 #a69882,-8px -8px 0 #a69882,-4px -8px 0 #a69882,0 -8px 0 #a69882,4px -8px 0 #a69882,8px -8px 0 #a69882,12px -8px 0 #a69882,16px -8px 0 #a69882,20px -8px 0 #a69882,24px -8px 0 #a69882,-24px -4px 0 #ede0c4,-20px -4px 0 #a69882,-16px -4px 0 #a69882,-12px -4px 0 #a69882,-8px -4px 0 #a69882,-4px -4px 0 #2c2416,0 -4px 0 #2c2416,4px -4px 0 #2c2416,8px -4px 0 #a69882,12px -4px 0 #a69882,16px -4px 0 #a69882,20px -4px 0 #a69882,24px -4px 0 #ede0c4,-28px 0 0 #5a6e3c,-24px 0 0 #5a6e3c,24px 0 0 #5a6e3c,28px 0 0 #5a6e3c; }
.ship i { background:#2c2416; box-shadow:0 -32px 0 #2c2416,0 -28px 0 #2c2416,0 -24px 0 #2c2416,0 -20px 0 #2c2416,4px -28px 0 #ede0c4,8px -28px 0 #ede0c4,4px -24px 0 #ede0c4,8px -24px 0 #b85c38,12px -24px 0 #ede0c4,4px -20px 0 #ede0c4,8px -20px 0 #ede0c4,12px -20px 0 #ede0c4,-20px -12px 0 #b85c38,-16px -12px 0 #b85c38,-12px -12px 0 #b85c38,-8px -12px 0 #b85c38,-4px -12px 0 #b85c38,4px -12px 0 #b85c38,8px -12px 0 #b85c38,12px -12px 0 #b85c38,16px -12px 0 #b85c38,20px -12px 0 #b85c38,-16px -8px 0 #2c2416,-12px -8px 0 #2c2416,-8px -8px 0 #2c2416,-4px -8px 0 #2c2416,0 -8px 0 #2c2416,4px -8px 0 #2c2416,8px -8px 0 #2c2416,12px -8px 0 #2c2416,16px -8px 0 #2c2416,-24px -4px 0 #4a7c8c,-16px -4px 0 #4a7c8c,-8px -4px 0 #4a7c8c,0 -4px 0 #4a7c8c,8px -4px 0 #4a7c8c,16px -4px 0 #4a7c8c,24px -4px 0 #4a7c8c; }
.press i { background:#2c2416; box-shadow:-16px -20px 0 #2c2416,16px -20px 0 #2c2416,-16px -16px 0 #2c2416,-8px -16px 0 #a69882,-4px -16px 0 #a69882,0 -16px 0 #a69882,4px -16px 0 #a69882,8px -16px 0 #a69882,16px -16px 0 #2c2416,-16px -12px 0 #2c2416,-8px -12px 0 #ede0c4,-4px -12px 0 #ede0c4,0 -12px 0 #ede0c4,4px -12px 0 #ede0c4,8px -12px 0 #ede0c4,16px -12px 0 #2c2416,-20px -8px 0 #8b6914,-16px -8px 0 #8b6914,-12px -8px 0 #8b6914,-8px -8px 0 #8b6914,-4px -8px 0 #8b6914,0 -8px 0 #8b6914,4px -8px 0 #8b6914,8px -8px 0 #8b6914,12px -8px 0 #8b6914,16px -8px 0 #8b6914,20px -8px 0 #8b6914,-16px -4px 0 #2c2416,16px -4px 0 #2c2416,-16px 0 0 #2c2416,-8px 0 0 #ede0c4,-4px 0 0 #ede0c4,0 0 0 #ede0c4,4px 0 0 #ede0c4,8px 0 0 #ede0c4,16px 0 0 #2c2416,24px -12px 0 #b85c38,28px -16px 0 #b85c38,32px -16px 0 #2c2416; }
.train i { background:#2c2416; box-shadow:-28px -20px 0 #2c2416,-28px -16px 0 #2c2416,-28px -12px 0 #2c2416,-20px -12px 0 #a69882,-16px -16px 0 #a69882,-12px -12px 0 #a69882,-24px -8px 0 #b85c38,-20px -8px 0 #b85c38,-16px -8px 0 #b85c38,-12px -8px 0 #b85c38,-8px -8px 0 #b85c38,-4px -8px 0 #b85c38,0 -8px 0 #b85c38,4px -8px 0 #b85c38,8px -8px 0 #b85c38,12px -8px 0 #b85c38,16px -8px 0 #b85c38,20px -8px 0 #b85c38,24px -8px 0 #b85c38,-24px -4px 0 #b85c38,-16px -4px 0 #e8c86a,-8px -4px 0 #b85c38,0 -4px 0 #e8c86a,8px -4px 0 #b85c38,16px -4px 0 #e8c86a,24px -4px 0 #b85c38,-24px 0 0 #2c2416,-20px 0 0 #2c2416,-12px 0 0 #2c2416,-8px 0 0 #2c2416,4px 0 0 #2c2416,8px 0 0 #2c2416,20px 0 0 #2c2416,24px 0 0 #2c2416; }
.train b { position:absolute; opacity:.8; background:#a69882; animation: smoke 2.4s ease-in-out infinite; }
.train b:nth-child(2){ margin-left:-150px; margin-top:-90px; animation-delay:0s; }.train b:nth-child(3){ margin-left:-125px; margin-top:-115px; animation-delay:.4s; }.train b:nth-child(4){ margin-left:-170px; margin-top:-125px; animation-delay:.8s; }
.globe i { width:48px; height:48px; border-radius:50%; background:#4a7c8c; transform:scale(2.6); box-shadow: inset 0 0 0 4px #8b6914, inset 16px 0 0 #5a6e3c, inset -12px 8px 0 #5a6e3c, 0 0 0 4px #2c2416; animation: globeSpin 3.6s steps(8) infinite; }

.living-map { min-height: 100vh; display: grid; place-items: center; padding: 8vh 6vw; background: linear-gradient(180deg, #f5edd6, #ede0c4); overflow: hidden; }
.pixel-world { position: absolute; inset: 8vh 6vw; border: 3px double #a69882; background: #4a7c8c; image-rendering: pixelated; box-shadow: 0 24px 80px #2c241633; }
.world-grid { position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent, transparent 39px, #f5edd625 39px, #f5edd625 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, #f5edd625 39px, #f5edd625 40px); }
.land { position:absolute; background:#5a6e3c; box-shadow: 10px 0 0 #5a6e3c,20px 0 0 #5a6e3c,0 10px 0 #5a6e3c,10px 10px 0 #5a6e3c,30px 10px 0 #5a6e3c,10px 20px 0 #5a6e3c,20px 20px 0 #5a6e3c; width:10px;height:10px; transform:scale(3); }
.land-a{left:18%;top:28%;}.land-b{left:47%;top:34%; transform:scale(4) rotate(8deg);}.land-c{left:66%;top:56%;}.land-d{left:30%;top:62%; transform:scale(2.6) rotate(-12deg);}
.route { position:absolute; height:3px; width:28%; border-top:3px dotted #e8c86a; transform-origin:left; opacity:.8; }.route-a{left:22%;top:39%;transform:rotate(10deg)}.route-b{left:48%;top:52%;transform:rotate(-18deg)}.route-c{left:31%;top:66%;transform:rotate(-8deg)}
.city,.walker,.boat{position:absolute;width:10px;height:10px;background:#e8c86a;box-shadow:0 0 16px #e8c86a;}.city{animation:cityPulse 1.8s infinite}.city-a{left:23%;top:34%}.city-b{left:51%;top:41%}.city-c{left:70%;top:61%}.city-d{left:35%;top:68%}.walker{background:#b85c38;animation:walkRoute 7s steps(14) infinite}.walker-a{left:25%;top:38%}.walker-b{left:54%;top:50%;animation-delay:-2s}.boat{background:#f5edd6;animation:sail 9s linear infinite;left:16%;top:54%}
.final-scroll { position:relative; z-index:2; max-width:720px; text-align:center; padding:clamp(1.5rem,4vw,3rem); border:3px double #a69882; background:radial-gradient(ellipse at 30% 20%, #f5edd6, transparent 70%),radial-gradient(ellipse at 70% 80%, #ede0c4, transparent 60%),linear-gradient(180deg,#f5edd6 0%,#ede0c4 100%); }
.final-scroll p { font-family:"Libre Baskerville", Georgia, serif; font-style:italic; }
.capture { display:flex; gap:.75rem; justify-content:center; margin-top:1.6rem; }
.capture input,.capture button{font-size:.85rem;border:2px solid #8b6914;background:#f5edd6;color:#2c2416;padding:.9rem 1rem;}
.capture button{background:#8b6914;color:#f5edd6;text-transform:uppercase;cursor:pointer;}.capture button:hover{background:#b85c38}.form-note{color:#5a6e3c;font-size:.85rem;min-height:1.4em;}

@keyframes parchmentWake { from { filter: brightness(.2); } to { filter: brightness(1); } }
@keyframes letterSet { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes arrowPulse { 0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(10px)} }
@keyframes pixelPop { from{opacity:0;clip-path:inset(50%)} to{opacity:1;clip-path:inset(0)} }
@keyframes spriteSet { from{opacity:0;transform:scale(5) translateY(12px)} to{opacity:1;transform:scale(5) translateY(0)} }
@keyframes compassTurn { from{transform:rotate(-24deg) scale(.7)} to{transform:rotate(45deg) scale(1)} }
@keyframes smoke { 0%{opacity:0;transform:translate(0,0) scale(1)}35%{opacity:.75}100%{opacity:0;transform:translate(20px,-32px) scale(1.8)} }
@keyframes globeSpin { 50%{box-shadow:inset 0 0 0 4px #8b6914,inset -16px 0 0 #5a6e3c,inset 12px -8px 0 #5a6e3c,0 0 0 4px #2c2416} }
@keyframes cityPulse { 50%{transform:scale(1.7);box-shadow:0 0 28px #e8c86a} }
@keyframes walkRoute { to{transform:translate(220px,36px)} }
@keyframes sail { to{transform:translate(62vw,-12vh)} }

@media (max-width: 800px) {
    :root { --spine-x: 50%; }
    .timeline-spine { left: 50%; }
    .desk-map { width: 88vw; height: 58vh; }
    .epoch { padding: 12vh 5vw; }
    .left-heading,.right-heading { margin-left: 0; padding-top: 3rem; }
    .moment { display: block; min-height: auto; padding: 12vh 0; }
    .panel,.right .panel { margin: 0 auto; max-width: 92vw; transform: translateY(50px); }
    .moment.in-view .panel { transform: translateY(0); }
    .node { top: 2.5rem; left: 50%; }
    .node span { left: 26px; right: auto; }
    .capture { flex-direction: column; }
    .pixel-world { inset: 5vh 3vw; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; scroll-behavior: auto !important; }
}