/* A living atlas, drawn over the journal's existing parchment. */
.atlas-hero { padding-top:24px; padding-bottom:72px; }
.atlas-hero .journal-layout { grid-template-columns:.9fr 1.16fr; gap:1%; max-width:1700px; margin:12px auto 6px; }
.atlas-hero .journal-intro { padding:24px 0 30px; }
.atlas-hero .journal-intro h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(66px,7.1vw,118px); line-height:.98; letter-spacing:-.015em; text-wrap:initial; }
.hero-line { display:block; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-line>span { display:block; }
.atlas-hero h1 em { display:inline-block; position:relative; font-style:normal; font-weight:400; }
.trouble-underline { position:absolute; width:103%; height:26px; left:0; bottom:-10px; overflow:visible; fill:none; stroke:#847a44; stroke-width:1.8; stroke-linecap:round; }
.atlas-hero .journal-subtitle { margin-top:30px; font-size:clamp(22px,2.1vw,33px); }
.atlas-hero .journal-description { max-width:390px; margin-top:24px; line-height:1.7; }
.atlas-hero .hero-actions { margin-top:27px; gap:23px; flex-direction:row; align-items:center; }
.atlas-hero .hero-eyebrow { margin-bottom:27px; }
.atlas-hero .hero-smallprint { margin-top:18px; }
.hero-footprints { position:absolute; bottom:9px; left:320px; width:190px; transform:rotate(-9deg); color:#7d7354; pointer-events:none; }
.hero-footprints svg { width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.4; }
.footprint-line { stroke-dasharray:.014 .024; }
.hero-footprints span { position:absolute; left:20px; top:46px; white-space:nowrap; font:italic 14px var(--display); }

/* One coordinate space keeps the ink path, pins, and pixel traveller aligned. */
.journal-art.atlas-art { aspect-ratio:auto; transform:none; transition:none; margin:0; width:100%; max-width:850px; justify-self:end; perspective:1200px; }
.atlas-stage { position:relative; width:100%; aspect-ratio:8/7; transform-style:preserve-3d; transform-origin:50% 54%; }
.atlas-drawing,.atlas-route-drawing { width:100%; height:100%; overflow:visible; fill:none; stroke:#6c6b43; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
/* Ink and footprints repaint their own coordinate-aligned layer while the map stays cached. */
.atlas-route-drawing { position:absolute; inset:0; pointer-events:none; }
.atlas-page-back { position:absolute; inset:11% 10% 15% 13%; background:#bca87518; border:1px solid #ac8f5429; transform:rotate(-6deg); pointer-events:none; }
.atlas-paper-shape { fill:url(#atlas-paper-tone); stroke:#b8a27760; stroke-width:1; filter:drop-shadow(3px 9px 6px #6e552514); }
.atlas-border { stroke:#9e8a5d; stroke-width:.65; opacity:.55; }
.atlas-fold { stroke:#d0be983b; stroke-width:2; }
.atlas-washes { stroke:none; }
.atlas-contours { stroke:#9c8e634d; stroke-width:1; }
.tree-wash { fill:#64744e; fill-opacity:.12; stroke:none; }
.mountain-wash { fill:#8b8166; fill-opacity:.12; stroke:none; }
.house-wash { fill:#b79768; fill-opacity:.18; stroke:none; }
.desert-wash { fill:#b88d4b; fill-opacity:.2; stroke:none; }
.lake-wash { fill:#7d9a88; fill-opacity:.25; stroke:none; }
.atlas-mountains { stroke:#7e785b; }
.atlas-desert { stroke:#997742; }
.atlas-water { stroke:#68836e; }
.atlas-village { stroke:#7a6b48; }
.house-roof-hatch { opacity:.5; }
.atlas-compass { stroke:#84764f; stroke-width:1; }
.atlas-compass-needle { transform-box:fill-box; transform-origin:center; animation:atlas-needle 12s ease-in-out infinite; }
.compass-dark { fill:#7e7951; stroke:none; }
.atlas-compass text { stroke:none; fill:#80734e; text-anchor:middle; font:italic 15px var(--display); }
.atlas-route-under { stroke:#f1e7cc; stroke-width:7; stroke-opacity:.8; }
.atlas-route { stroke:#8f7359; stroke-width:1.5; stroke-dasharray:.003 .009; opacity:.48; }
.atlas-route-travelled { stroke:#8a4835; stroke-width:2.3; stroke-dasharray:0 1; }
.atlas-camp { stroke:#8e6240; stroke-width:2; }
.camp-glow { fill:#d4934233; stroke:none; animation:camp-glow 3s ease-in-out infinite; }
.camp-flame { fill:#ad713d; stroke:#906444; stroke-width:.6; transform-box:fill-box; transform-origin:50% 100%; animation:camp-flicker .8s steps(3,end) infinite alternate; }
.camp-flame-inner { fill:#dac071; stroke:none; transform-box:fill-box; transform-origin:50% 100%; animation:camp-flicker .65s steps(3,end) infinite alternate-reverse; }
.atlas-map-caption { fill:#827b57; stroke:none; font:9px var(--body); letter-spacing:1.65px; }
.atlas-map-caption text:last-child { fill:#9c8b62; font:italic 13px var(--display); letter-spacing:0; }
.tree-crown { transform-box:fill-box; transform-origin:50% 100%; animation:canopy-sway 5s ease-in-out infinite alternate; }
.village-smoke { stroke:#817755; stroke-width:1.1; opacity:.45; stroke-dasharray:9 6; animation:chimney-smoke 5s linear infinite; }
.lake-ripples { animation:lake-ripple 6s ease-in-out infinite; }
.ink-bird path { transform-box:fill-box; transform-origin:center; animation:ink-wings 2.5s ease-in-out infinite; }
.bird-b path { animation-delay:-1.2s; }
.atlas-birds { stroke-width:1.4; opacity:.8; }

/* An irregular ink window reveals real game footage, with a floating journal caption. */
.atlas-window { position:absolute; left:27%; top:33%; width:57%; transform:translateZ(24px) rotate(-2deg); z-index:2; }
.atlas-window-edge { padding:5px; background:#73784c; clip-path:polygon(1% 3%,23% 1%,26% 2%,52% 0,77% 2%,98% 1%,99% 23%,98% 52%,100% 78%,98% 98%,80% 97%,52% 100%,28% 97%,1% 99%,2% 72%,0 48%); }
.atlas-window .postcard-landscape { aspect-ratio:16/10; clip-path:polygon(1% 2%,27% 0,60% 1%,99% 0,100% 52%,98% 100%,77% 98%,51% 100%,19% 98%,0 99%,1% 43%); }
.atlas-window .postcard-scene { transition:opacity .65s ease,transform 7s cubic-bezier(.2,.6,.3,1); transform:scale(1.1); }
.atlas-window .postcard-scene.is-active { transform:scale(1.025); }
.atlas-window .postcard-proof { font-size:8px; padding:5px 6px; bottom:10px; left:10px; }
.atlas-image-grain { position:absolute; inset:0; pointer-events:none; background:url('/site/grain.svg'); opacity:.12; mix-blend-mode:soft-light; box-shadow:inset 0 0 30px #28371835; }
.atlas-window figcaption { position:relative; width:max-content; max-width:90%; margin:-2px auto 0; padding:12px 16px 10px; text-align:center; color:#465035; background:#eddfbd; transform:rotate(1.7deg); clip-path:polygon(3% 3%,22% 1%,45% 4%,76% 0,97% 4%,99% 80%,95% 97%,68% 98%,45% 95%,25% 100%,0 94%,2% 69%); }
.atlas-window figcaption .ink-label { font-size:7px; letter-spacing:.19em; color:#8a7853; }
.atlas-window [data-scene-name] { display:block; font:italic clamp(22px,2.1vw,31px)/1.2 var(--display); letter-spacing:-.035em; margin-top:3px; }
.atlas-scene-note { display:block; font:11px/1.4 var(--body); margin-top:5px; color:#796c4f; }
.atlas-annotation { position:absolute; pointer-events:none; font:italic clamp(13px,1.2vw,18px)/1.25 var(--display); color:#82704d; }
.annotation-top { display:flex; align-items:center; width:45%; right:0; top:1%; transform:rotate(5deg) translateZ(12px); }
.annotation-top svg { width:37%; height:auto; margin-right:6px; fill:none; stroke:#938157; stroke-width:1.3; }
.annotation-top s { text-decoration-thickness:1px; }
.annotation-bottom { bottom:1%; left:16%; display:flex; gap:12px; align-items:center; transform:rotate(-4deg); font-size:clamp(12px,1.15vw,17px); }
.annotation-star { font-size:33px; color:#85824e; }

/* Place names are genuine buttons; the route also works without a pointer. */
.journal-art .atlas-selector { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:3; transform:translateZ(40px); }
.atlas-selector .map-stop { position:absolute; display:flex; align-items:center; gap:8px; min-height:44px; width:max-content; padding:5px 7px; text-transform:none; letter-spacing:0; background:transparent; pointer-events:auto; transform:translate(-12px,-22px); font:italic clamp(12px,1.2vw,18px)/1.3 var(--display); color:#796c4b; border:0; }
.map-stop-dot { position:relative; display:block; flex-shrink:0; width:10px; height:10px; border:1px solid #866747; border-radius:50%; background:#e6d6b3; transition:background .25s,box-shadow .25s; }
.map-stop-dot::before { content:''; position:absolute; inset:-5px; border:1px solid #95785460; border-radius:50%; transition:transform .4s,opacity .4s; }
.map-stop.is-active .map-stop-dot { background:#884832; border-color:#884832; box-shadow:0 0 0 2px #f2e8cb; }
.map-stop.is-active .map-stop-name { color:#70402e; }
.map-stop-name { padding:3px 0; white-space:nowrap; border-bottom:1px solid #8e785136; }
.atlas-selector .map-stop i { position:absolute; height:1px; background:#86694429; left:25px; right:7px; bottom:8px; margin:0; }
.atlas-selector .map-stop i::after { background:#8c513a; }
.stop-meadow { left:21.25%; top:74%; }
.atlas-selector .stop-meadow .map-stop-name { position:absolute; left:-12px; top:35px; }
.atlas-selector .stop-meadow i { left:-12px; bottom:-8px; width:92px; }
.stop-lake { left:81.125%; top:69.143%; }
.stop-desert { left:68%; top:16.857%; }
.atlas-selector .stop-lake { flex-direction:column; align-items:flex-start; gap:0; padding-top:17px; }
.atlas-selector .stop-lake .map-stop-name { margin-top:7px; margin-left:-11px; }
.atlas-selector .stop-lake i { left:0; bottom:1px; }
.atlas-selector .stop-desert { flex-direction:column; align-items:flex-start; gap:0; padding-top:17px; }
.atlas-selector .stop-desert .map-stop-name { position:absolute; left:-10px; bottom:40px; }
.atlas-selector .stop-desert i { left:-10px; width:70px; bottom:37px; }
.map-stop:active { transform:translate(-12px,-22px); }
.atlas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 9% 0; min-height:50px; color:#897a59; font:11px var(--body); }
.atlas-toolbar>span { display:flex; align-items:center; gap:9px; }
.atlas-live-mark { display:block; width:5px; height:5px; background:#7e8450; border-radius:50%; }
.redraw-map { display:flex; align-items:center; gap:7px; padding:12px 0; min-height:44px; background:transparent; color:#73664b; font:11px var(--body); white-space:nowrap; }
.redraw-map svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.3; transition:transform .5s var(--ease); }
.redraw-map:disabled { opacity:.5; cursor:default; }

/* Native 48px game frames, at a crisp 1.25 scale. No invented character art. */
.atlas-traveller { position:absolute; top:0; left:0; z-index:4; pointer-events:none; }
.traveller-body { display:block; width:60px; height:60px; transform:translate(-50%,-82%); position:relative; }
.traveller-sprite { position:absolute; inset:0; background-image:url('/site/journal/wayfarer.png'); background-size:480px 420px; background-position:0 0; image-rendering:pixelated; }
.is-walking .traveller-sprite { background-position-y:var(--walk-row,-360px); animation:wayfarer-walk .64s steps(8,end) infinite; }
.traveller-shadow { position:absolute; width:21px; height:6px; left:19px; bottom:9px; background:#4d42274d; border-radius:50%; filter:blur(1px); }
.traveller-dust { position:absolute; bottom:10px; left:20px; width:3px; height:3px; background:#ae93656b; border-radius:50%; opacity:0; }
.is-walking .traveller-dust { animation:trail-dust .8s linear infinite; }

/* The full composition is static by default. JS only adds an entrance once ready. */
.home-enhanced .atlas-hero .journal-intro>* { animation:none; opacity:1; transform:none; }
.atlas-enhanced:not(.atlas-entered) .atlas-landmarks,
.atlas-enhanced:not(.atlas-entered) .atlas-window,
.atlas-enhanced:not(.atlas-entered) .atlas-birds,
.atlas-enhanced:not(.atlas-entered) .atlas-route-layer,
.atlas-enhanced:not(.atlas-entered) .atlas-annotation,
.atlas-enhanced:not(.atlas-entered) .atlas-traveller { opacity:0; }
.atlas-enhanced:not(.atlas-entered) .ink-draw { stroke-dasharray:1; stroke-dashoffset:1; }
.atlas-entered .ink-draw { stroke-dasharray:1; animation:ink-arrive 1.65s cubic-bezier(.45,0,.2,1) var(--draw-delay,0ms) both; }
.atlas-entered .atlas-landmarks { animation:landmark-arrive 1.5s var(--ease) var(--draw-delay,0ms) both; }
.atlas-entered .atlas-washes { animation:wash-arrive 2.6s ease-out both; }
.atlas-entered .atlas-route-layer { animation:wash-arrive 1.7s ease-out .8s both; }
.atlas-entered .atlas-window { animation:window-arrive 1.6s cubic-bezier(.22,1,.36,1) .85s both; }
.atlas-entered .atlas-annotation { animation:wash-arrive 1.3s ease-out 1.7s both; }
.atlas-entered .annotation-top path { stroke-dasharray:1; animation:ink-arrive 1s ease 1.8s both; }
.atlas-entered .atlas-traveller { animation:wash-arrive .3s linear 1.25s both; }
.atlas-entered .atlas-birds { animation:wash-arrive 1s linear 1.3s both; }
.hero-copy-entered .trouble-underline path { stroke-dasharray:1; animation:ink-arrive .9s ease-out 1s both; }
.hero-copy-entered .hero-line>span { animation:headline-arrive 1.3s cubic-bezier(.22,1,.36,1) .1s both; }
.hero-copy-entered .hero-line:nth-child(2)>span { animation-delay:.23s; }
.hero-copy-entered .hero-footprints { animation:wash-arrive 1.2s ease-out 1.6s both; }
.hero-copy-entered .eyebrow-spark { animation:star-arrive 1.5s var(--ease) .2s both; }
.atlas-entered .atlas-selector { animation:wash-arrive 1s ease-out 1.2s both; }
.motion-paused .atlas-hero *, .atlas-hero.hero-offscreen *, .atlas-suspended * { animation-play-state:paused!important; }
.motion-paused .atlas-window .postcard-scene,.atlas-instant .postcard-scene { transition:none; }
.motion-paused .atlas-hero .hero-line>span { animation:none; }
html:not(.home-enhanced) .atlas-selector,html:not(.atlas-enhanced) .atlas-traveller { display:none; }

@keyframes ink-arrive { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes landmark-arrive { from { opacity:0; translate:0 9px; } to { opacity:1; translate:0 0; } }
@keyframes wash-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes window-arrive { from { opacity:0; clip-path:polygon(1% 45%,8% 36%,16% 41%,20% 35%,18% 55%,9% 60%,2% 56%); translate:-14px 12px; } 35% { opacity:1; } to { opacity:1; clip-path:polygon(-5% -5%,30% -5%,65% -5%,105% -5%,105% 110%,45% 110%,-5% 110%); translate:0 0; } }
@keyframes headline-arrive { from { opacity:0; transform:translateY(26px) rotate(1deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes star-arrive { from { opacity:0; transform:rotate(-130deg) scale(.3); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes atlas-needle { 0%,100% { transform:rotate(-9deg); } 40% { transform:rotate(8deg); } 70% { transform:rotate(-3deg); } }
@keyframes canopy-sway { from { transform:skewX(-1.4deg); } to { transform:skewX(1.4deg); } }
@keyframes chimney-smoke { from { stroke-dashoffset:0; } to { stroke-dashoffset:60; } }
@keyframes lake-ripple { 0%,100% { opacity:.4; translate:0 0; } 50% { opacity:.9; translate:3px 0; } }
@keyframes ink-wings { 0%,100% { transform:scaleY(1); } 48% { transform:scaleY(-.5); } }
@keyframes camp-glow { 0%,100% { opacity:.35; } 50% { opacity:.8; } }
@keyframes camp-flicker { from { transform:scale(.95,1); } to { transform:scale(1.1,.87) skewX(7deg); } }
@keyframes wayfarer-walk { from { background-position-x:0; } to { background-position-x:-480px; } }
@keyframes trail-dust { 0% { opacity:0; transform:translate(0,0) scale(.8); } 20% { opacity:.7; } 100% { opacity:0; transform:translate(-13px,-7px) scale(1.4); } }

@media(hover:hover) and (pointer:fine) {
  .map-stop:hover .map-stop-dot::before { transform:scale(1.5); opacity:.5; }
  .map-stop:hover .map-stop-name { color:#7d412c; border-color:#7d412c; }
  .redraw-map:hover { color:#884832; }
  .redraw-map:hover svg { transform:rotate(-45deg); }
}
@media(min-width:1600px) {
  .atlas-hero .journal-layout { grid-template-columns:1fr 1.08fr; gap:3%; }
  .journal-art.atlas-art { max-width:calc(91svh - 86px); }
  .atlas-hero .journal-intro { padding-block:22px; }
  .hero-footprints { bottom:0; left:350px; }
}
@media(max-width:1100px) and (min-width:821px) {
  .atlas-hero .journal-layout { grid-template-columns:.94fr 1.06fr; gap:0; margin-top:25px; }
  .atlas-hero .journal-intro h1 { font-size:clamp(66px,7.5vw,84px); }
  .atlas-hero .journal-description { font-size:14px; }
  .atlas-hero .hero-actions { flex-direction:column; align-items:flex-start; gap:14px; }
  .hero-footprints { display:none; }
  .atlas-toolbar { padding-inline:6%; font-size:9px; }
  .atlas-toolbar>span { gap:5px; }
  .redraw-map { font-size:10px; }
  .atlas-window .postcard-proof { font-size:6px; }
  .atlas-scene-note { font-size:9px; }
  .atlas-window figcaption { padding:8px 10px; }
  .atlas-window [data-scene-name] { font-size:22px; }
}
@media(max-width:820px) {
  .atlas-hero { padding-bottom:70px; }
  .atlas-hero .journal-layout { grid-template-columns:1fr; gap:0; margin-top:34px; }
  .atlas-hero .journal-intro { padding:0; }
  .atlas-hero .journal-intro h1 { font-size:clamp(75px,13vw,112px); }
  .atlas-hero .journal-subtitle { margin-top:25px; }
  .atlas-hero .hero-actions { flex-direction:row; align-items:center; gap:22px; }
  .atlas-hero .journal-description { max-width:100%; }
  .journal-art.atlas-art { width:100%; max-width:620px; margin:32px auto 12px; justify-self:center; }
  .hero-footprints { bottom:-26px; right:10px; left:auto; width:180px; transform:rotate(12deg); }
  .hero-footprints span { font-size:13px; }
  .atlas-window [data-scene-name] { font-size:clamp(21px,4.2vw,29px); }
  .atlas-annotation { font-size:clamp(12px,2.5vw,16px); }
  .atlas-selector .map-stop { font-size:clamp(12px,2.5vw,17px); }
  .atlas-toolbar { font-size:10px; }
  .redraw-map { font-size:10px; }
  .atlas-window .postcard-proof { font-size:7px; }
}
@media(max-width:480px) {
  .atlas-hero .journal-layout { margin-top:29px; }
  .atlas-hero .journal-intro h1 { font-size:clamp(56px,16.5vw,80px); }
  .atlas-hero .hero-eyebrow { margin-bottom:21px; }
  .atlas-hero .journal-subtitle { margin-top:23px; font-size:24px; }
  .atlas-hero .journal-description { margin-top:18px; font-size:14px; }
  .atlas-hero .hero-actions { flex-direction:column; align-items:flex-start; gap:12px; margin-top:23px; }
  .atlas-hero .hero-smallprint { font-size:9px; }
  .hero-footprints { right:-2px; bottom:23px; width:116px; transform:rotate(-25deg); }
  .hero-footprints span { font-size:10px; top:36px; left:-12px; }
  .trouble-underline { height:19px; bottom:-7px; }
  .journal-art.atlas-art { width:calc(100% + 22px); max-width:none; margin:30px -11px 16px; }
  .atlas-window { left:25%; width:60%; }
  .atlas-window-edge { padding:3px; }
  .atlas-window [data-scene-name] { font-size:21px; }
  .atlas-window .postcard-proof { display:none; }
  .atlas-window figcaption { padding:7px 8px 8px; max-width:95%; }
  .atlas-window figcaption .ink-label { font-size:5px; }
  .atlas-scene-note { font-size:8px; margin-top:2px; }
  .atlas-selector .map-stop { font-size:11px; gap:5px; }
  .map-stop-dot { width:8px; height:8px; }
  .map-stop-dot::before { inset:-4px; }
  .atlas-selector .stop-meadow { transform:translate(-12px,-15px); }
  .atlas-selector .stop-meadow .map-stop-name { position:absolute; left:-10px; top:32px; }
  .atlas-selector .stop-meadow i { left:-10px; bottom:-5px; width:70px; }
  .atlas-selector .stop-lake .map-stop-name { margin-left:-17px; }
  .atlas-selector .stop-desert .map-stop-name { left:-15px; bottom:36px; }
  .atlas-selector .stop-desert i { left:-15px; bottom:33px; width:58px; }
  .annotation-top { right:1%; top:-3%; font-size:12px; }
  .annotation-top svg { width:30%; }
  .annotation-bottom { left:13%; bottom:-9%; font-size:11px; gap:7px; }
  .atlas-map-caption text:last-child { display:none; }
  .annotation-star { font-size:23px; }
  .atlas-toolbar { padding:40px 6% 0; font-size:9px; gap:5px; }
  .atlas-toolbar>span { gap:5px; }
  .redraw-map { font-size:9px; gap:5px; }
  .traveller-body { scale:.75; transform-origin:0 0; }
}
@media(prefers-reduced-motion:reduce) {
  .atlas-stage { transform:none!important; }
  .atlas-enhanced .ink-draw { stroke-dasharray:none; stroke-dashoffset:0; }
  .atlas-enhanced .atlas-landmarks,.atlas-enhanced .atlas-window,.atlas-enhanced .atlas-birds,.atlas-enhanced .atlas-route-layer,.atlas-enhanced .atlas-annotation,.atlas-enhanced .atlas-traveller { opacity:1; }
  .atlas-hero .hero-line>span { opacity:1; transform:none; }
}