@font-face{font-family:Fell;src:url('./fonts/IMFellEnglish.woff2') format('woff2'),url('./fonts/IMFellEnglish.ttf') format('truetype');font-display:swap}
@font-face{font-family:Terminal;src:url('./fonts/VT323.woff2') format('woff2'),url('./fonts/VT323.ttf') format('truetype');font-display:swap}
:root{font-family:Georgia,serif;color:#eee6ce;background:#14251f;--ink:#10231c;--paper:#dfd5b2;--gold:#cdb37a;--ease-out:cubic-bezier(.23,1,.32,1)}
body{min-height:3600vh}
button,a{transition:color 160ms var(--ease-out),opacity 160ms var(--ease-out)}
button:active{color:#fff5cc}
button:focus-visible,a:focus-visible,input:focus-visible{outline:1px solid var(--gold);outline-offset:7px}
#world canvas{image-rendering:auto}
.screen-grain{opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 3px,#08160c20 3px 4px)}
.travel-header{top:28px;left:32px;right:32px;align-items:center;text-shadow:0 2px 5px #08150e}
.travel-header #home{font:24px/.82 Georgia,serif;letter-spacing:.04em;text-transform:uppercase;color:#f3e8bd}
.travel-header #home span{font:inherit;font-size:34px;letter-spacing:.08em}
.travel-header nav{gap:22px;background:none;padding:0;font:19px/1 'Segoe UI',Arial,sans-serif}
.travel-header nav button{padding:8px 0;position:relative}
.travel-header nav button:after{content:'';position:absolute;bottom:2px;left:0;right:0;transform:scaleX(0);transform-origin:left;height:1px;background:var(--gold);transition:transform 160ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){.travel-header nav button:hover:after{transform:scaleX(1)}.travel-header nav button:hover{text-decoration:none;color:#fff4c2}}
.travel-header:before{content:'';position:fixed;inset:0 0 auto;height:150px;background:linear-gradient(#06150ccd,transparent);z-index:-1;pointer-events:none}
#place{top:125px;left:32px;max-width:260px;text-shadow:0 2px 7px #071b0c}
#place-number{font:17px 'Segoe UI',Arial,sans-serif;letter-spacing:.12em;color:var(--gold)}
#place-title{font:29px/1.05 Georgia,serif;margin-top:9px;text-wrap:balance}
#caption{left:50%;bottom:80px;transform:translateX(-50%);max-width:660px;width:calc(100% - 100px);padding:16px 0 0;border:0;background:none;text-align:center;pointer-events:none;text-shadow:1px 1px 1px #08150c,-1px -1px 1px #08150c,0 2px 6px #06100b}
#caption:before{content:'';position:fixed;inset:-35px -60px -100px;z-index:-1;background:radial-gradient(ellipse at bottom,#06150cbf,transparent 70%);pointer-events:none}
#speaker{display:block;font:18px 'Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#e2c898}
#caption p{font:26px/1.15 Georgia,serif;text-wrap:balance;margin:8px 0 0}
.travel-footer{left:32px;right:32px;bottom:24px;gap:20px;font:18px 'Segoe UI',Arial,sans-serif;text-shadow:0 1px 4px #05140c}
.travel-footer #settings-button{font:17px 'Segoe UI',Arial,sans-serif}
.travel-footer #next-place{border:0;color:#e4d4a8}
.travel-footer #next-place:after{content:' →'}
#scroll-hint{opacity:.8}
#route-track{top:135px;bottom:80px;background:#ded2a926}
#route-track i{background:#c9b17a;width:2px}
#entrance{background:linear-gradient(90deg,#06130abf,#07150a66,#06130a88);backdrop-filter:none;padding:64px 20px}
.entrance-paper{margin:auto;max-width:900px;width:100%;padding:40px 32px;color:#efe3c1;background:none;box-shadow:none;border:0;transform:none;text-align:center;text-shadow:0 2px 10px #07150c}
.entry-stamp{display:inline-block;transform:none;border:0;padding:0;color:#d8bf87;font:18px 'Segoe UI',Arial,sans-serif;letter-spacing:.10em;text-transform:uppercase}
.entrance-paper h2{font:clamp(65px,9vw,120px)/.88 Georgia,serif;letter-spacing:-.035em;margin:35px 0 28px;text-wrap:balance}
.entrance-paper p{font:22px/1.4 Georgia,serif;max-width:530px;margin:0 auto 30px;text-wrap:balance}
.entrance-paper small{font:16px/1.4 'Segoe UI',Arial,sans-serif;color:#cec5a6}
.entrance-paper #enter-button,.entrance-paper #retry-button{max-width:250px;margin:25px auto 0;padding:12px 24px;background:#e5d7ad;color:#182b20;border:1px solid #f2e3b5;box-shadow:inset 0 0 0 4px #273a2520;font:24px Georgia,serif;text-shadow:none}
#load-line{font:16px 'Segoe UI',Arial,sans-serif;color:#c4c5a7}
progress{max-width:250px;margin:10px auto;background:#0e2117;accent-color:#d2b77d;height:2px}
.entry-motion{justify-content:center;font:16px 'Segoe UI',Arial,sans-serif}
dialog{color:#302d21;background:#d8ceaa url('/locations/world-surfaces-v01.png') 100% 100%/200% 200%;border:1px solid #b8a778;padding:38px 42px;box-shadow:0 16px 70px #03100999}
dialog::backdrop{background:#08150ec4;backdrop-filter:blur(3px)}
dialog h2{font-family:Georgia,serif}
dialog .close-dialog{background:none;color:#534a32;border-bottom:1px solid #7c6a43;font:19px 'Segoe UI',Arial,sans-serif;padding:0 0 3px}
.map-destinations b,.resident-list h3{font-family:Georgia,serif}
#resident-hover{background:#11291bdc;border:1px solid #8c8659;color:#ebdfb6;font:18px 'Segoe UI',Arial,sans-serif;padding:6px 10px}
body:has(#resident-encounter:not([hidden])) #caption{visibility:hidden}
#project-dialog{max-width:650px}
#project-dialog .project-kicker{font:19px 'Segoe UI',Arial,sans-serif;color:#685a33;text-transform:uppercase;letter-spacing:.08em}
#project-dialog h2{font-size:44px}
#project-dialog .token-state{font:18px 'Segoe UI',Arial,sans-serif;border-top:1px solid #958361;padding-top:20px}
@media(max-width:650px){
 .travel-header{top:23px;left:20px;right:20px;align-items:start}
 .travel-header #home{font-size:18px}.travel-header #home span{font-size:25px}
 .travel-header nav{gap:12px;font-size:17px;flex-wrap:wrap;justify-content:flex-end;max-width:250px}
 .travel-header nav #sound-button{max-width:none}
 #place{left:20px;top:126px;max-width:210px}#place-title{font-size:24px}#place-number{font-size:16px}
 #caption{bottom:85px;width:calc(100% - 48px)}#caption p{font-size:23px}#speaker{font-size:17px}
 .travel-footer{left:20px;right:20px;bottom:22px;font-size:16px;gap:12px}.travel-footer #settings-button{font-size:16px}
 .travel-footer #scroll-hint{max-width:110px;line-height:1}
 .entrance-paper{padding:28px 2px;margin:auto;max-width:100%}.entrance-paper h2{font-size:69px}.entrance-paper p{font-size:20px}
 .entry-stamp{font-size:15px}.entry-motion{font-size:16px}
 dialog{padding:24px}
}
@media(prefers-reduced-motion:reduce){button,a,.travel-header nav button:after{transition:none}}

/* Reading layer: texture belongs to the world, not behind long text. */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.screen-grain{display:none}
.travel-header nav{font:500 14px/1.4 'Segoe UI',Arial,sans-serif;gap:24px}
.travel-header nav button{min-height:40px}
#place-number,#speaker{font:600 12px/1.5 'Segoe UI',Arial,sans-serif;letter-spacing:.12em}
#place-title{font:26px/1.2 Georgia,serif;letter-spacing:-.02em}
#caption p{font:24px/1.4 Georgia,serif;text-shadow:0 2px 4px #000}
.travel-footer,.travel-footer #settings-button{font:500 13px/1.5 'Segoe UI',Arial,sans-serif}
.entry-stamp,.entrance-paper small,#load-line,.entry-motion{font:500 13px/1.5 'Segoe UI',Arial,sans-serif;letter-spacing:.03em}
.entrance-paper h2{font-family:Georgia,serif;font-size:clamp(48px,7vw,90px);line-height:1.05}
.entrance-paper p{font:19px/1.65 Georgia,serif}
dialog{background:#eee7d5;color:#27362d;border:1px solid #b7aa88;box-shadow:0 24px 90px #0008;scrollbar-width:thin;scrollbar-color:#857b62 transparent;font:16px/1.65 'Segoe UI',Arial,sans-serif}
dialog::backdrop{background:#07130ec9;backdrop-filter:none}
dialog h2{font:36px/1.15 Georgia,serif;letter-spacing:-.025em}
dialog .close-dialog{font:500 13px/1.3 'Segoe UI',Arial,sans-serif;min-height:36px;background:#eee7d5;padding:8px 12px;border:1px solid #a99e80;z-index:2}
.map-destinations span{font:14px/1.6 'Segoe UI',Arial,sans-serif}
.resident-list h3{font:27px/1.2 Georgia,serif}.resident-list p{font:16px/1.6 'Segoe UI',Arial,sans-serif}
.resident-list img{image-rendering:auto}
#resident-hover{font:500 13px/1.4 'Segoe UI',Arial,sans-serif;background:#17281fee;padding:8px 12px}
#project-dialog .project-kicker{font:600 12px/1.6 'Segoe UI',Arial,sans-serif}
#project-dialog .token-state{font:15px/1.6 'Segoe UI',Arial,sans-serif}
#route-track{display:none}
@media(max-width:650px){.travel-header{left:18px;right:18px;top:16px}.travel-header nav{font-size:12px;gap:5px 13px;max-width:230px}#place{top:115px;max-width:200px}#place-title{font-size:22px}#caption p{font-size:20px}.travel-footer,.travel-footer #settings-button{font-size:12px}dialog{padding:24px 20px}dialog h2{font-size:29px}}

/* Keep the paper edges clean while preserving wheel, touch and keyboard scrolling. */
dialog,#resident-encounter{scrollbar-width:none}
dialog::-webkit-scrollbar,#resident-encounter::-webkit-scrollbar{display:none}