html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}

:root{
  --bg:#0b0a08; --panel:rgba(18,14,10,.82); --panel-solid:#15110c;
  --gold:#C9A96E; --gold-lt:#E7D6AD; --gold-dk:#8A6830;
  --line:rgba(201,169,110,.26); --line-soft:rgba(201,169,110,.12);
  --ink:#F6F0E4; --muted:#B8AD9A; --dim:#7d7365;
  --fd:"Cormorant Garamond",Georgia,serif; --fu:"Montserrat",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--fu);font-size:13px;-webkit-font-smoothing:antialiased}
#c{position:fixed;inset:0;display:block;touch-action:none}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}a{color:inherit;text-decoration:none}

/* POI PINS (nearest locations) */
.poi{position:fixed;z-index:20;transform:translate(-50%,-100%);pointer-events:none;will-change:transform;transition:opacity .3s}
.poi .card{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 12px;border-radius:11px;background:rgba(10,8,6,.76);border:1px solid var(--line);backdrop-filter:blur(8px);white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.poi .nm{font-size:10.5px;letter-spacing:.03em;color:var(--gold-lt);font-weight:500}
.poi .tm{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.poi .stem{width:1px;height:22px;margin:1px auto 0;background:linear-gradient(var(--gold),transparent)}
.poi .dotm{width:7px;height:7px;border-radius:50%;background:var(--gold);margin:0 auto;box-shadow:0 0 0 4px rgba(201,169,110,.16),0 0 12px var(--gold)}
/* on-site landmark pins */
.lm{position:fixed;z-index:18;transform:translate(-50%,-100%);pointer-events:none;will-change:transform;transition:opacity .3s}
.lm .lab{padding:4px 10px;border-radius:9px;background:rgba(10,8,6,.62);border:1px solid var(--line-soft);backdrop-filter:blur(6px);white-space:nowrap;font-size:9.5px;letter-spacing:.05em;color:var(--gold-lt)}
.lm .pt{width:8px;height:8px;border-radius:50%;margin:5px auto 0;background:#fff;border:2px solid var(--gold);box-shadow:0 0 10px rgba(201,169,110,.8)}

#top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:16px;height:60px;padding:0 20px;background:linear-gradient(180deg,rgba(6,5,4,.82),transparent)}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:34px}
.brand .bt{border-left:1px solid var(--line);padding-left:12px;line-height:1.2}
.brand .bt b{display:block;font-family:var(--fd);font-size:15px;letter-spacing:.06em;color:var(--gold-lt);font-weight:500}
.brand .bt span{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.view-tag{position:fixed;top:70px;left:20px;z-index:25;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)}
.view-tag svg{width:15px;height:15px}
#about{margin-left:auto;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding:9px 16px;border:1px solid var(--line-soft);border-radius:20px;transition:.2s}
#about:hover{border-color:var(--gold);color:var(--gold-lt)}

#side{position:fixed;top:50%;right:18px;transform:translateY(-50%);z-index:28;width:212px;background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;backdrop-filter:blur(18px);padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
#side .ttl{line-height:1.15;margin-bottom:12px}
#side .ttl b{font-family:var(--fd);font-size:17px;font-weight:500;color:var(--gold-lt);display:block}
#side .ttl span{font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
#side .rule{height:1px;background:var(--line-soft);margin:0 0 12px}
.act{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:14px;border:1px solid transparent;transition:.18s;text-align:left;margin-bottom:6px}
.act:hover{background:rgba(201,169,110,.08);border-color:var(--line)}
.act .ic{width:34px;height:34px;flex:none;border-radius:11px;border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
.act .ic svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.5}
.act .tx b{display:block;font-size:11px;color:var(--ink);font-weight:600}.act .tx span{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

#zoom{position:fixed;right:20px;bottom:22px;z-index:28;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-soft);border-radius:13px;backdrop-filter:blur(14px);overflow:hidden}
#zoom button{width:42px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--gold-lt);font-size:18px;transition:.16s}
#zoom button:hover{background:rgba(201,169,110,.1)}#zoom .mid{height:1px;background:var(--line-soft)}
#bar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:28;display:flex;gap:8px;padding:8px;background:var(--panel);border:1px solid var(--line-soft);border-radius:15px;backdrop-filter:blur(18px)}
.bbtn{display:flex;flex-direction:column;align-items:center;gap:4px;width:60px;padding:7px 4px;border-radius:11px;transition:.16s}
.bbtn:hover{background:rgba(201,169,110,.09)}.bbtn.on{background:rgba(201,169,110,.14)}
.bbtn svg{width:17px;height:17px;stroke:var(--gold-lt);fill:none;stroke-width:1.5}
.bbtn span{font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
#compass{position:fixed;bottom:22px;left:20px;z-index:28;width:56px;height:56px;border-radius:50%;background:var(--panel);border:1px solid var(--line-soft);backdrop-filter:blur(14px)}#compass svg{width:100%;height:100%}
.hint{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:22;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,240,228,.4)}

#intro{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(120% 90% at 50% 42%,rgba(6,5,4,.22),rgba(6,5,4,.6));transition:opacity 1s ease}
#intro.hide{opacity:0;pointer-events:none}
#intro img{height:80px;margin-bottom:24px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.55))}
#intro .eye{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
#intro h1{font-family:var(--fd);font-weight:400;font-size:clamp(38px,7.5vw,84px);line-height:.98;color:var(--ink);text-wrap:balance;text-shadow:0 4px 40px rgba(0,0,0,.6)}
#intro .sub{margin-top:18px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
#intro .tag{margin-top:18px;font-family:var(--fd);font-style:italic;font-size:19px;color:var(--gold-lt)}
#begin{margin-top:32px;padding:15px 40px;border:1px solid var(--gold);border-radius:2px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-lt);background:rgba(201,169,110,.06);transition:.25s}
#begin:hover{background:var(--gold);color:#1a1206;letter-spacing:.42em}
#intro .foot{position:absolute;bottom:22px;font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:rgba(201,169,110,.4)}

#ov{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,3,2,.62);backdrop-filter:blur(4px)}#ov.show{display:flex}
.sheet{width:440px;max-width:92vw;background:var(--panel-solid);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 40px 90px rgba(0,0,0,.6);position:relative}
.sheet .x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-soft);color:var(--muted);font-size:16px;transition:.18s}.sheet .x:hover{border-color:var(--gold);color:var(--gold-lt)}
.sheet .eb{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.sheet h2{font-family:var(--fd);font-weight:500;font-size:28px;color:var(--ink);margin-bottom:6px}.sheet p{font-size:12px;line-height:1.7;color:var(--muted)}
.steps{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:rgba(201,169,110,.05);border:1px solid var(--line-soft)}
.steps .n{width:26px;height:26px;flex:none;border-radius:9px;background:var(--gold);color:#1a1206;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.steps b{font-size:11.5px;color:var(--ink);display:block}.steps span{font-size:11px;color:var(--muted)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cc{padding:14px;border:1px solid var(--line-soft);border-radius:14px}.cc .k{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}.cc .v{font-size:13px;color:var(--ink);font-weight:500}
.loclist{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:2px}
.loclist li{display:flex;justify-content:space-between;padding:9px 4px;border-bottom:1px solid var(--line-soft);font-size:12px}
.loclist .l{color:var(--ink)}.loclist .r{color:var(--gold-lt);font-variant-numeric:tabular-nums}
.note{margin-top:12px;font-size:9.5px;color:var(--dim);letter-spacing:.02em}
.wabtn{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;padding:13px;border-radius:12px;background:var(--gold);color:#1a1206;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:.18s}.wabtn:hover{background:var(--gold-lt)}.wabtn svg{width:16px;height:16px;fill:#1a1206}

#load{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s}#load.hide{opacity:0;pointer-events:none}#load .l{font-family:var(--fd);font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);opacity:.85}
@media(max-width:820px){#side{display:none}#about{display:none}.hint{display:none}.view-tag{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}