/* The image and its source-coordinate hotspots share one camera plane. */
.town-opening{position:relative;background:#142b23;color:#fff8e9;overflow:hidden}
.town-camera{position:relative}
.town-artwork{position:relative;width:100%;height:100%;pointer-events:none}
.town-artwork>img{display:block;width:100%;height:100%;object-fit:contain}
/* Registered to the 1672 x 941 background: x=439.51, y=265.01,
   scale=.515568. The supplied pixels stay intact; CSS feathers each edge 5%. */
.town-artwork>.town-detail{
 position:absolute;left:26.286526%;top:28.162757%;width:48.843291%;height:54.405855%;
 pointer-events:none;user-select:none;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
 mask-composite:intersect;
}
.town-hotspots{display:flex;flex-wrap:wrap;gap:12px;padding:20px;justify-content:center}
.town-hotspot{color:#fff5d6;font-weight:700;padding:10px 14px;border:1px solid #bda060;border-radius:8px;text-decoration:none;background:#244a32}
.story-active .town-opening{position:absolute;inset:0;height:100dvh;background:radial-gradient(ellipse at 50% 35%,#426355,#102b24 75%)}
.story-active .town-opening:before{content:"";position:absolute;inset:-30px;background:url('../assets/artwork/landing-page-town.webp') center/cover;filter:blur(20px);opacity:.28;pointer-events:none}
.story-active .town-camera{position:absolute;transform-origin:0 0;will-change:transform;cursor:grab;touch-action:none;user-select:none}
.story-active .town-hotspot{cursor:pointer}
.story-active .town-camera.is-panning,.story-active .town-camera.is-panning .town-hotspot{cursor:grabbing}
.town-explore-hint{display:none}
html[data-story-view="town"] .town-explore-hint{display:block;margin:0 auto 10px;max-width:620px;font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.4;color:#fff4d4;text-shadow:0 1px 3px #071d18}
.story-active .town-camera>.town-artwork{opacity:0}
.story-active .town-opening:before{opacity:0;transition:opacity 900ms ease}
.story-active .town-opening.is-art-ready .town-camera>.town-artwork{opacity:1}
.story-active .town-opening.is-art-ready:before{opacity:.28}
.story-active .town-hotspots{position:absolute;inset:0;display:block;padding:0;opacity:0;transition:opacity 500ms ease}
.story-active .town-opening.is-ready .town-hotspots{opacity:1}
.story-active .town-hotspot{position:absolute;left:var(--pin-x);top:var(--pin-y);width:8.3%;height:3.5%;padding:0;background:none;border:0;border-radius:2px;box-shadow:none}
.story-active .town-hotspot span{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.story-active .town-hotspot:focus-visible{outline:0}

.story-active[data-story-view="town"] .story-controls [data-previous],.story-active[data-story-view="town"] .story-controls [data-next],.story-active[data-story-view="town"] .story-controls [data-town],.story-active[data-story-view="town"] .story-cue{display:none}
.story-active[data-story-view="book"] .story-controls{visibility:hidden}
.town-directory{padding:16px;background:#1d3b2b;color:#fff8e9}
.town-directory summary{cursor:pointer;font-weight:700}
.town-directory nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.town-directory a{padding:12px;min-height:44px;color:inherit;text-decoration:none;border:1px solid #9f8d60;border-radius:8px}
.story-active .town-directory{display:none}
@media(max-width:600px){
 .story-active .town-directory{display:block;position:absolute;left:18px;right:18px;bottom:56px;padding:12px 16px;border:1px solid #dcc59088;border-radius:14px;background:#1e3c2df5;box-shadow:0 8px 30px #0005;font-size:12px;z-index:3}
 .story-active .town-directory[open]{bottom:56px}
 .story-active .town-directory summary{text-align:center;min-height:24px}
}
@media(prefers-reduced-motion:reduce){.town-hotspots,.town-hotspot{transition:none!important}}
@media(prefers-reduced-motion:reduce){.story-active .town-camera>.town-artwork,.story-active .town-opening:before{transition:none}}
@media print{.town-opening{display:none!important}}

/* A separate rendering layer follows the scene anchor without sharing the
   particle layer or its downscaled camera texture. */
.town-invitation{padding:24px;text-align:center;color:#fff4dc;font-family:Georgia,"Times New Roman",serif}
.town-welcome-copy{max-width:640px;margin:0 auto 20px;text-shadow:0 2px 3px #191008,0 0 12px #191008}
.town-welcome-tagline{margin:0;font-size:clamp(21px,2.35vw,34px);line-height:1.18;text-wrap:balance}
.town-welcome-tagline span{color:#ecd19f}
.town-welcome-divider{display:flex;align-items:center;gap:10px;width:58%;margin:8px auto;color:#f1c575}
.town-welcome-divider:before,.town-welcome-divider:after{content:"";flex:1;height:1px;background:#d9b372}
.town-welcome-features{font-size:clamp(13px,1.1vw,16px);line-height:1.5;margin:0}
.town-welcome-actions{display:grid;gap:8px;width:min(100%,300px);margin:auto}
.town-welcome-actions a{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;min-height:54px;padding:8px 6px;border:2px solid #cda765;border-radius:12px;text-decoration:none;box-shadow:inset 0 0 0 2px #fff7d75c,inset 0 3px 5px #ffffff42,0 4px 5px #170e09a6}
.town-welcome-actions strong{font-size:clamp(16px,1.5vw,22px);line-height:1.1}
.town-welcome-actions small{font-size:12px;line-height:1.25;margin-top:3px}
.town-welcome-sign-in{background:linear-gradient(#fff9ec,#f1e3c5);color:#181a12}
.town-welcome-join{background:linear-gradient(110deg,#0a4c26,#376b35);color:#fff8e8}
.town-welcome-actions a:hover{filter:brightness(1.1)}
.town-welcome-actions a:focus-visible{outline:3px solid #ffda83;outline-offset:4px}
.story-active .town-invitation{position:absolute;left:0;top:0;width:var(--welcome-width,160px);transform:translate3d(var(--welcome-left,0px),var(--welcome-top,0px),0) translate(-50%,-50%) scale(var(--welcome-scene-scale,1));will-change:transform,opacity;isolation:isolate;transform-origin:center;padding:0;pointer-events:none;opacity:0;visibility:hidden}
.story-active .town-welcome-copy{position:relative;width:100%;margin:0 0 12px;padding:0;isolation:isolate}
.story-active .town-welcome-tagline{position:relative;left:50%;width:max-content;transform:translateX(-50%);font-size:min(24px,3.5vw);white-space:nowrap;text-wrap:nowrap}
.story-active .town-welcome-features{font-size:clamp(11px,1vw,14px);line-height:1.35}
.story-active .town-welcome-copy:before{content:"";position:absolute;inset:-12px -8px;z-index:-1;background:radial-gradient(ellipse,#24170bc9, #24170b80 55%,transparent 73%)}
.story-active .town-welcome-actions{width:100%;margin:0;pointer-events:auto}
/* Shorter stacked actions leave room for the reading link in portrait. */
@media(max-aspect-ratio:1/1){
 .story-active .town-welcome-copy{margin-bottom:8px}
 .story-active .town-welcome-actions{gap:5px}
 .story-active .town-welcome-actions a{min-height:44px;padding:4px 6px;border-radius:9px}
 .story-active .town-welcome-actions strong{font-size:14px;line-height:1.1}
 .story-active .town-welcome-actions small{font-size:10px;line-height:1.2;margin-top:2px}
}