:root { font-family:"Segoe UI",Arial,sans-serif; color:#f5e6c5; background:#416967; font-synthesis:none; --ink:#33271c; --muted:#a38e6b; --orange:#9d542f; --brass:#d6ac63; --cream:#fff0cf; --teal:#284b48; }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
a { color:inherit; }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #ffd37a; outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
#main-content { outline:none; }
#map-page { position:fixed; inset:0; width:100%; height:100dvh; overflow:hidden; background:#628b86; }
#map-page::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 48% 45%,transparent 45%,#123c4128 100%); }
#city-map { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; outline:none; user-select:none; }
#city-map:active { cursor:grabbing; }
#city-map:focus-visible { box-shadow:inset 0 0 0 2px #e3c28188; }
#map-world { position:absolute; left:0; top:0; width:2400px; height:1820px; transform-origin:0 0; will-change:transform; --world-scale:1; --avatar-cell-size:20px; }
#map-art,#map-art svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* Explicit world-space hit areas and label anchors follow the approved artwork. */
.landmark { position:absolute; border:0; background:transparent; padding:0; pointer-events:none; touch-action:none; }
/* Separate hit surfaces let every sign sit above neighbouring building areas. */
.landmark::before { content:""; position:absolute; inset:0; z-index:2800; pointer-events:auto; }
.landmark-label { position:absolute; z-index:3000; transform:translate(-50%,-50%) scale(calc(1 / var(--world-scale))); transform-origin:50% 50%; border-radius:4px; padding:5px 10px; white-space:nowrap; font-size:12px; line-height:1.2; font-weight:650; letter-spacing:.02em; background:linear-gradient(#4c5541,#283c32); color:#ffedc0; border:1px solid #d7b26a; box-shadow:0 2px 0 #1c3937,0 4px 8px #142b3955,inset 0 0 0 2px #eee0ac18; pointer-events:auto; }
.landmark-label::before,.landmark-label::after { content:""; position:absolute; top:50%; width:2px; height:2px; margin-top:-1px; border-radius:50%; background:#c7a36b; }
.landmark-label::before { left:3px; } .landmark-label::after { right:3px; }
.landmark[data-destination=exhibition] .landmark-label { background:linear-gradient(#98643b,#613d24); }
.landmark[data-destination=post] .landmark-label,.landmark[data-destination=forum] .landmark-label,.landmark[data-destination=garden] .landmark-label,.landmark[data-destination=run-view] .landmark-label { font-size:11px; }
.landmark:hover .landmark-label,.landmark:focus-visible .landmark-label { z-index:3001; }
.landmark:hover .landmark-label,.landmark:focus-visible .landmark-label { background:#ecd399; color:#3a3020; }
.landmark:focus-visible { outline:none; }
.landmark:focus-visible .landmark-label { outline:2px solid #ffe09b; outline-offset:3px; }
.avatar { position:absolute; width:var(--avatar-cell-size); height:var(--avatar-cell-size); transform:translate(-50%,-100%); transform-origin:50% 100%; pointer-events:none; --avatar-label-gap:4px; }
.avatar:has(#avatar-selected-stamp:not([hidden])),.avatar:has(.remote-stamp:not([hidden])) { --avatar-label-gap:30px; }
/* YOU follows the same world footpoint without sharing the body's depth stack. */
#avatar-label-anchor { position:absolute; width:var(--avatar-cell-size); height:var(--avatar-cell-size); transform:translate(-50%,-100%); transform-origin:50% 100%; z-index:3002; pointer-events:none; --avatar-label-gap:4px; }
#map-world:has(#avatar-selected-stamp:not([hidden])) #avatar-label-anchor { --avatar-label-gap:30px; }
.avatar-label { position:absolute; left:50%; bottom:calc(var(--avatar-cell-size) + var(--avatar-label-gap) / var(--world-scale)); transform:translateX(-50%) scale(calc(1 / var(--world-scale))); transform-origin:50% 100%; color:#fff0c7; background:#3b4940; border:1px solid #e6c17a; font-size:9px; font-weight:800; letter-spacing:.13em; padding:4px 7px; border-radius:4px; box-shadow:0 2px 5px #1239; }
/* The atlas foot anchor is at 95% of its cell height; physics stays at the parent origin. */
.person { display:block; position:absolute; width:var(--avatar-cell-size); height:var(--avatar-cell-size); left:0; bottom:calc(var(--avatar-cell-size) * -.05); background:url('./assets/crafted-avatar.webp') 0 0 / 200% 200% no-repeat; z-index:1; transform-origin:50% 95%; filter:drop-shadow(.3px .5px .3px #26392566); }
.person i { display:none; }
.avatar[data-facing=up] .person { background-position:100% 0; }
.avatar[data-facing=down] .person { background-position:0 0; }
.avatar[data-facing=left] .person { background-position:0 100%; }
.avatar[data-facing=right] .person { background-position:100% 100%; }
.avatar-shadow { position:absolute; bottom:calc(var(--avatar-cell-size) * -.025); left:32.5%; width:35%; height:11%; background:#233b3959; border-radius:50%; filter:blur(.4px); }
.avatar[data-moving=true] .person { animation:doll-step .2s steps(2,end) infinite alternate; }
@keyframes doll-step { from { transform:translateY(0) rotate(-2deg); } to { transform:translateY(calc(var(--avatar-cell-size) * -.035)) rotate(2deg); } }
.map-tools { position:absolute; z-index:5; top:max(18px,env(safe-area-inset-top)); right:18px; display:flex; gap:3px; align-items:center; padding:6px; background:linear-gradient(130deg,#4f5946,#263d38); border:1px solid #c2a36e; border-radius:9px; box-shadow:0 4px 0 #243731,0 6px 22px #162a3a44,inset 0 0 0 3px #cda97022; }
.map-tools button { width:38px; height:38px; border:1px solid #d4be8a44; background:linear-gradient(#f0dca4,#c0a66e); color:#30463b; font-size:24px; border-radius:5px; box-shadow:0 2px 0 #162d27; }
.map-tools button:hover { background:#fff0c4; } .map-tools button:disabled { opacity:.4; cursor:default; }
.direction-pad { position:absolute; z-index:5; right:22px; bottom:max(22px,env(safe-area-inset-bottom)); display:grid; grid-template:repeat(3,32px) / repeat(3,32px); gap:2px; padding:9px; background:radial-gradient(#5b6650,#2e4540); border:2px solid #c4a976; border-radius:50%; box-shadow:0 4px 0 #243c35,0 8px 20px #17352b44,inset 0 0 0 4px #1c3d3588; }
.direction-pad button { border:1px solid #d3bc8a55; background:linear-gradient(#dfcea2,#ad9564); color:#31463b; font-size:22px; border-radius:5px; touch-action:none; user-select:none; box-shadow:0 2px 0 #26382b; }
.direction-pad button:hover,.direction-pad button:active { background:#f8e5ae; }
.direction-pad [data-move=up] { grid-area:1 / 2; } .direction-pad [data-move=left] { grid-area:2 / 1; } .direction-pad [data-move=right] { grid-area:2 / 3; } .direction-pad [data-move=down] { grid-area:3 / 2; }
.direction-pad span { grid-area:2 / 2; place-self:center; font-size:16px; color:#e6ce91; }
.map-help { position:absolute; bottom:max(22px,env(safe-area-inset-bottom)); left:22px; z-index:10; }
.map-help summary { display:grid; place-items:center; width:38px; height:38px; list-style:none; border:1px solid #e0c68c; border-radius:50%; font-weight:700; background:linear-gradient(#57705c,#2b473f); color:#f3ddb0; box-shadow:0 3px 0 #284034,0 5px 12px #17332755; cursor:pointer; }
.map-help summary::-webkit-details-marker { display:none; }
.map-help > div { position:absolute; left:0; bottom:50px; width:min(300px,calc(100vw - 44px)); background:linear-gradient(110deg,#f8e9c5,#dec99d); color:#433d2e; padding:22px; border:5px solid #5d4934; border-radius:7px; box-shadow:0 10px 35px #203c3966; font-size:13px; line-height:1.6; }
.map-help strong { font-family:Georgia,serif; font-size:20px; } .map-help small { color:#796c50; font-size:11px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.18em; line-height:1.5; color:#a97937; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:500; }
h1 { font-size:clamp(32px,4vw,55px); line-height:1.08; letter-spacing:-.035em; margin:12px 0; }
.back-link { display:inline-block; font-size:13px; font-weight:600; text-decoration:none; }
label { display:block; font-size:11px; font-weight:650; margin-bottom:7px; }
input,select { width:100%; min-height:44px; border:1px solid #ac9163; background:#f8eccf; border-radius:5px; padding:12px; color:#3d4435; box-shadow:inset 0 2px 4px #66513217; }
.text-button { padding:12px 0; background:transparent; border:0; font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 22px; border:1px solid #ac8548; border-radius:5px; font-size:13px; font-weight:650; text-decoration:none; box-shadow:0 3px 0 #47362344,inset 0 1px 0 #ffffff44; }
.primary { background:linear-gradient(#a66b3c,#7d4b2e); color:#fff0cb; } .primary:hover { background:#b47742; } .secondary { border-color:#b69b68; background:linear-gradient(#f5e6bf,#ddc99b); color:#4d4936; }
dialog { padding:30px; background:radial-gradient(ellipse at 20% 0,#fff4d6,#e7d4a9); color:var(--ink); border:7px solid #61452d; outline:1px solid #ceaa6c; outline-offset:-5px; border-radius:10px; width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 25px 100px #0b2119aa,inset 0 0 20px #98704218; }
dialog::backdrop { background:#102e2e99; backdrop-filter:blur(5px); }
dialog h2 { font-size:32px; line-height:1.12; letter-spacing:-.025em; margin:14px 0; color:#354b40; }
#entry-dialog { width:min(440px,calc(100vw - 32px)); } #entry-dialog > p:not(.eyebrow) { font-size:14px; line-height:1.7; color:#756344; }
.entry-actions { display:flex; gap:10px; margin-top:28px; } .dialog-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.close-button { border:1px solid #b4935d; background:#e3d1a5; color:#4e4734; font-size:24px; border-radius:50%; width:34px; height:34px; }
.project-intro { font-size:14px; color:#78664b; line-height:1.7; }
.project-tag { color:#89602e; text-transform:uppercase; letter-spacing:.09em; font-size:10px; font-weight:700; }
.video-preview { position:relative; aspect-ratio:16/9; margin:24px 0 10px; border-radius:8px; border:8px solid #3e4e43; outline:2px solid #bc9655; overflow:hidden; background:linear-gradient(#142f2dbb,#142f2dbb),url('./assets/crafted-interior.webp') center/cover; box-shadow:0 5px 12px #4f352f22; }
.video-preview > svg { display:none; }
#video-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; }
.video-button { background:linear-gradient(#d8b56d,#b58a49); color:#233e35; }
#video-content p { color:#faedcf; text-align:center; font-size:11px; line-height:1.6; text-shadow:0 2px 3px #123; } #video-content iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-fallback { font-size:11px; color:#786648; } .detail-tag { display:block; margin-top:30px; }
.project-fields > div { border-bottom:1px dashed #b59c6f; padding:17px 0; } .project-fields dt { font-weight:650; font-size:12px; color:#3b5548; } .project-fields dt span { margin-right:10px; color:#a4895a; font-size:10px; }
.project-fields dd { font-size:13px; color:#786747; line-height:1.7; margin:9px 0 0 27px; } .detail-note { font-size:11px; color:#897550; }
.noscript-message { position:fixed; top:25%; left:10%; right:10%; background:#fff1c9; color:#344739; padding:24px; }
@media(max-width:700px) {
 .map-tools { top:12px; right:12px; } .map-tools button { width:34px; height:34px; }
 .direction-pad { right:14px; bottom:18px; grid-template:repeat(3,36px) / repeat(3,36px); } .map-help { left:16px; bottom:20px; }
 .landmark-label { font-size:11px; padding:5px 7px; } dialog { padding:20px; }
}
@media(max-width:450px) { .entry-actions { flex-direction:column; } dialog h2 { font-size:27px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }