/* ---------- hero: the town square ---------- */
.hero{
  --sw:clamp(40px,9vw,86px); --bh:clamp(76px,11vw,112px);
  position:relative;overflow:hidden;padding-top:60px;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 64%,var(--sky2) 100%);
}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none}
/* top:50% parks the moon in the band of sky above the town. The old fixed top:44px put it behind
   the H1, so the white moon and the white headline cancelled each other out below ~1500px wide. */
.orb{position:absolute;right:9%;top:50%;width:60px;height:60px;background:var(--orb);
  box-shadow:0 -12px 0 0 var(--orb),0 12px 0 0 var(--orb),-12px 0 0 0 var(--orb),12px 0 0 0 var(--orb)}
[data-theme="night"] .orb::after{content:"";position:absolute;left:12px;top:14px;width:12px;height:12px;background:rgba(9,14,51,.16);box-shadow:22px 20px 0 4px rgba(9,14,51,.14)}
.stars{position:absolute;inset:0;opacity:0;transition:opacity .5s}
[data-theme="night"] .stars{opacity:1}
.stars i{position:absolute;width:4px;height:4px;background:#fff}
.clouds{position:absolute;inset:0}
.cloud{position:absolute;fill:var(--cloud)}
/* Clouds live in the sky band above the town (hero-rel 42-64%), never behind the hero copy.
   The copy occupies roughly the top 40% of the hero, so the old top:16/26/40% dropped a hard
   light-blue rectangle straight behind the headline, lede and buttons. */
.cloud.c1{left:1%;top:45%;width:170px}
.cloud.c2{left:84%;top:40%;width:120px}
.cloud.c3{left:2%;top:53%;width:210px}
@media (max-width:760px){.clouds{display:none}}

.hero-copy{position:relative;z-index:5;padding-bottom:34px}
.hero h1{font-size:clamp(38px,7.4vw,86px);max-width:15em}
.hero .lede{font-size:clamp(17px,2.1vw,21px);max-width:58ch;margin-top:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px}

.stage{position:relative;z-index:7;height:calc(var(--sw)*1.87 + var(--bh) + 46px)}
.deco{position:absolute;bottom:14px;z-index:1}
.deco svg{width:100%;height:auto}
[data-theme="night"] .deco{filter:brightness(.55) saturate(.8)}
.deco-hall{left:3%;width:clamp(150px,17vw,230px)}
.deco-tree.t1{right:3%;width:clamp(56px,6vw,84px)}
.deco-tree.t2{right:11%;width:clamp(44px,4.6vw,64px)}

.sign{position:absolute;left:50%;translate:-50% 0;bottom:14px;z-index:2;display:flex;flex-direction:column;align-items:center}
.sign-board{--panel:#fff;--ink:#0b1b4d;--line:#0b1b4d;--drop:rgba(11,27,77,.3);height:var(--bh);display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);padding:0 clamp(14px,2vw,24px)}
.sign-board img{height:calc(var(--bh) - 22px);width:auto;aspect-ratio:1092/1073}
.sign-board.noimg img{display:none}
.sign-txt{display:flex;flex-direction:column;line-height:1.1}
.sign-txt strong{font-family:'Pixelify Sans',monospace;font-size:clamp(20px,3vw,34px)}
.sign-txt span{font-size:clamp(11px,1.3vw,14px);color:#465689;font-weight:600;margin-top:4px}
.posts{width:74%;display:flex;justify-content:space-between;height:calc(var(--sw)*1.87 + 16px)}
.posts i{width:10px;background:#7a5230;box-shadow:inset -4px 0 rgba(0,0,0,.22)}

.npcs{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2.6vw,36px)}
.npc{position:relative;width:var(--sw);background:none;border:0;padding:0;cursor:pointer;display:block}
.npc::before{content:"";position:absolute;left:50%;bottom:-3px;translate:-50% 0;width:78%;height:6px;background:rgba(0,0,0,.2)}
.npc::after{
  content:attr(data-name);position:absolute;bottom:calc(100% + var(--sw)*.72);left:50%;translate:-50% 0;white-space:nowrap;z-index:9;
  font-family:'Pixelify Sans',monospace;font-weight:600;font-size:15px;line-height:1;padding:6px 10px;background:var(--sun);color:#0b1b4d;
  box-shadow:0 -3px 0 #0b1b4d,0 3px 0 #0b1b4d,-3px 0 0 #0b1b4d,3px 0 0 #0b1b4d;opacity:0;pointer-events:none;
}
.npc:hover::after,.npc:focus-visible::after{opacity:1}
.npc .spr{display:block}
.npc .spr svg{width:var(--sw);height:calc(var(--sw)*1.1667)}
.npc.active .spr{translate:0 -10px;animation:bob 1.4s steps(2) infinite}
.npc .mark{
  position:absolute;left:50%;top:calc(var(--sw)*-.66);translate:-50% 0;
  font-family:'Pixelify Sans',monospace;font-weight:700;font-size:calc(var(--sw)*.52);line-height:1;color:var(--sun);
  text-shadow:2px 0 #0b1b4d,-2px 0 #0b1b4d,0 2px #0b1b4d,0 -2px #0b1b4d,2px 2px #0b1b4d,-2px -2px #0b1b4d,2px -2px #0b1b4d,-2px 2px #0b1b4d;
}
.npc.active .mark{animation:markbob 1s steps(2) infinite}
.npc.active .mark{color:#fff}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes markbob{50%{transform:translateY(-6px)}}

.ground{position:relative;z-index:6;background:var(--dirt);padding:44px 0 48px;
  background-image:repeating-linear-gradient(90deg,transparent 0 44px,rgba(0,0,0,.08) 44px 52px),repeating-linear-gradient(0deg,transparent 0 30px,rgba(0,0,0,.06) 30px 34px)}
.ground::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;background:var(--grass);box-shadow:inset 0 6px 0 var(--grass2)}
.dlg{position:relative;max-width:900px;margin:0 auto;padding:26px 26px 22px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;min-height:112px}
.dlg .tag{position:absolute;left:20px;top:-22px;--u:3px;--line:#0b1b4d;background:var(--sun);color:#0b1b4d;font-family:'Pixelify Sans',monospace;font-weight:700;font-size:18px;line-height:1;padding:6px 14px;box-shadow:var(--notch)}
.dlg p{font-size:19px;line-height:1.45;min-height:2.9em}