/* Shared styles for all inner pages. Each page sets body[data-bg] for its own background. */
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;color:#f6ebdd;font-family:Georgia,"Times New Roman",serif;line-height:1.55;background:#07040b;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--bg,#07040b)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(#0000 0,#0008 100%)}
a{color:#ffd58a}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:#000;padding:.5em}.skip:focus{left:.5em}
.home-link{position:fixed;left:50%;transform:translateX(-50%);top:.9rem;z-index:30;display:flex;gap:.4rem}
.home-link a{background:#140806d9;border:1px solid #ff7a3a66;border-radius:.4rem;padding:.45em .8em;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.home-link a:hover,.home-link a:focus-visible{border-color:#ffb27a;outline:none;color:#fff0cc}
main.page{max-width:1000px;margin:0 auto;padding:7.5rem 1.2rem 3rem}
.panel{background:#0c0710d9;border:1px solid #ffffff1f;border-radius:.8rem;padding:1.4rem 1.6rem;box-shadow:0 10px 40px #0009;backdrop-filter:blur(6px)}
h1{font-size:clamp(1.8rem,5vw,2.8rem);letter-spacing:.12em;text-transform:uppercase;margin:.2em 0 .3em;color:#ffe2b0;text-shadow:0 2px 12px #000}
.lede{max-width:44rem;margin:0 0 1.2rem}
.tag{display:inline-block;border:1px dashed #ffb27a;color:#ffb27a;padding:.15em .6em;letter-spacing:.25em;font-size:.7rem;font-weight:bold;text-transform:uppercase}
.crumbs{font-size:.8rem;opacity:.85;margin-bottom:.6rem}.crumbs a{text-decoration:none}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin-top:1.2rem;padding:0;list-style:none}
.card{display:flex;flex-direction:column;background:#120a14e6;border:1px solid #ffb27a40;border-radius:.6rem;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;height:100%}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);border-color:#ffd58a;box-shadow:0 0 22px #ffb27a55;outline:none}
.card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.card .ph{aspect-ratio:1;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#ffffff08 0 12px,#0000 12px 24px),#1a1020;color:#ffb27a;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:1rem}
.card .body{padding:.7rem .9rem}.card h2,.card h3{margin:0 0 .2em;font-size:1.05rem;color:#ffe2b0}.card p{margin:0;font-size:.85rem;opacity:.85}
/* maps */
.map{position:relative;width:100%;aspect-ratio:16/10;border-radius:.8rem;overflow:hidden;border:1px solid #ffffff26;background:radial-gradient(ellipse at 50% 50%,#2a1410 0,#120a0c 70%),#0a0608;box-shadow:inset 0 0 80px #000}
.map .map-note{position:absolute;left:50%;bottom:.8rem;transform:translateX(-50%);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:#ffb27aaa;border:1px dashed #ffb27a66;padding:.2em .7em;border-radius:.3rem;white-space:nowrap;background:#0008}
.region{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;border-radius:50%;width:var(--w,26%);aspect-ratio:1.4;font-size:clamp(.75rem,2.2vw,1.05rem);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;font:inherit;cursor:default;border:1px dashed #ffffff22;background:#ffffff08;color:#ffffff55;padding:0}
.region.live{cursor:pointer;color:#ffe2b0;border:1px solid #ffb27a99;background:radial-gradient(circle,#ff7a3a40,#ff7a3a10 70%);box-shadow:0 0 22px #ff7a3a66,inset 0 0 18px #ff7a3a44;animation:glow 3.2s ease-in-out infinite}
.region.live:hover,.region.live:focus-visible{outline:none;color:#fff;box-shadow:0 0 40px #ffb27aaa,inset 0 0 24px #ffb27a77}
.region small{display:block;font-size:.6rem;letter-spacing:.15em;opacity:.8}
.region.pin{--w:13%;aspect-ratio:1;font-size:clamp(.6rem,1.6vw,.85rem)}
@keyframes glow{50%{box-shadow:0 0 34px #ff7a3a99,inset 0 0 22px #ff7a3a66}}
@media (prefers-reduced-motion:reduce){.region.live{animation:none}.card{transition:none}}
/* popup */
.pop{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:#000a;padding:1rem}
.pop.open{display:grid}
.pop .panel{max-width:24rem;width:100%;text-align:center}
.pop button.x{margin-top:1rem;background:#140806;color:#ffd58a;border:1px solid #ff7a3a66;border-radius:.4rem;padding:.5em 1em;font:inherit;cursor:pointer}
.framed{float:right;width:min(240px,40%);margin:0 0 1rem 1.2rem;border-radius:.6rem;border:1px solid #ffb27a55;box-shadow:0 6px 24px #000a}
.portrait{width:min(320px,100%);border-radius:.6rem;border:1px solid #ffb27a55;display:block;margin:0 auto 1rem}
.blur-bg{position:fixed;inset:-40px;z-index:-2;background-size:cover;background-position:center;filter:blur(18px) brightness(.35) saturate(1.1)}
@media (max-width:700px){
.home-link{top:auto;bottom:.8rem;left:.8rem;transform:none}
main.page{padding:5.5rem .8rem 4.5rem}.panel{padding:1rem}
.cards{grid-template-columns:repeat(2,1fr);gap:.7rem}
.map{aspect-ratio:4/5}.framed{float:none;display:block;width:60%;margin:0 auto 1rem}
}
.card img,.card .ph{flex:none}
.cards li{display:flex}
.framed{float:none;display:block;margin:0 0 1rem}
.region{min-width:7.5em}.region.pin{min-width:6em}
@media (max-width:700px){.framed{margin:0 auto 1rem}}
.card img,.framed,.portrait{height:auto}
.map.art{background-size:cover;background-position:center;box-shadow:none}
.map.art .region{color:transparent;background:radial-gradient(circle,#6fb8ff22,#6fb8ff05 70%);border-color:#9fd0ff88}
.map.art .region.live{animation:glowb 3.2s ease-in-out infinite;box-shadow:0 0 22px #6fb8ff88,inset 0 0 18px #6fb8ff55}
.map.art .region.live:hover,.map.art .region.live:focus-visible{box-shadow:0 0 44px #bfe2ffcc,inset 0 0 26px #bfe2ff88}
@keyframes glowb{50%{box-shadow:0 0 36px #6fb8ffbb,inset 0 0 24px #6fb8ff77}}
@media (max-width:700px){.map.art{aspect-ratio:3/2 !important}}
/* Erathis full map: warm gold glow so it reads against the blue sea */
.map.art[aria-label="Map of Erathis"] .region{border:2px solid #ffd58acc;background:radial-gradient(ellipse,#ffd58a2e,#ffb24a10 65%,transparent 72%)}
.map.art[aria-label="Map of Erathis"] .region.live{animation:glowg 3.2s ease-in-out infinite;box-shadow:0 0 26px #ffc861cc,inset 0 0 22px #ffc86188}
.map.art[aria-label="Map of Erathis"] .region.live:hover,.map.art[aria-label="Map of Erathis"] .region.live:focus-visible{box-shadow:0 0 50px #ffe3a8,inset 0 0 30px #ffe3a8aa}
@keyframes glowg{50%{box-shadow:0 0 42px #ffd27aee,inset 0 0 30px #ffd27aaa}}
.about-bio{max-width:640px;margin:1.2rem auto 0;line-height:1.7;font-size:1.05rem}
.about-bio p{margin:0 0 1rem}
.about-sign{text-align:right;color:#ffe2b0;font-size:1.1rem}
.map.art[aria-label="Map of Vaerathen"] .region{border:2px solid #ffd58acc;background:radial-gradient(ellipse,#ffd58a2e,#ffb24a10 65%,transparent 72%)}
.map.art[aria-label="Map of Vaerathen"] .region.live{animation:glowg 3.2s ease-in-out infinite;box-shadow:0 0 26px #ffc861cc,inset 0 0 22px #ffc86188}
.map.art[aria-label="Map of Vaerathen"] .region.live:hover,.map.art[aria-label="Map of Vaerathen"] .region.live:focus-visible{box-shadow:0 0 50px #ffe3a8,inset 0 0 30px #ffe3a8aa}
.vault-bg{filter:blur(4px) brightness(.45) saturate(1.1)}
.short-embed{max-width:340px;margin:1rem auto 0;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:1px solid #ffb27a55;box-shadow:0 0 24px #0008}.short-embed iframe{width:100%;height:100%;border:0;display:block}
.spotify-frame{position:relative;max-width:900px;margin:1.2rem auto;aspect-ratio:1705/922}
.spotify-frame>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.spotify-frame .win{position:absolute;left:7.6%;right:7.6%;top:17.4%;bottom:17.4%;z-index:1;display:flex;align-items:center;justify-content:center;background:#0b1430;border-radius:6px;overflow:hidden;color:#ffe2b0;letter-spacing:.08em}
.spotify-frame .win iframe{width:100%;height:100%;border:0;display:block}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-top:1rem}
.yt-embed h3{margin:.2rem 0 .5rem;color:#ffe2b0;font-size:1rem}
.yt-embed .v{aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid #ffb27a55;box-shadow:0 0 18px #0008}
.yt-embed .v iframe{width:100%;height:100%;border:0;display:block}
.spotify-frame .win{display:block}
.spotify-frame .win iframe{position:absolute;left:0;top:0;height:352px;transform-origin:0 0}
.card .body p + p{margin-top:.55rem}
.sv-visitors{position:relative;width:min(420px,90%);aspect-ratio:3/1;margin:2rem auto 0;background:url(../assets/img/titles/visitorsframe.png) center/100% 100% no-repeat}
.sv-visitors-num{position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);text-align:center;font-family:Cinzel,Georgia,serif;font-size:clamp(1.4rem,6vw,2.3rem);letter-spacing:.12em;color:#e8f0ff;text-shadow:0 0 10px #6aa8ff,0 0 22px #3b6fd8}