:root{--ink:#070914;--ember:#ffb25a;--gold:#e9c98a;--bone:#f1e9d6;--mist:#9fb0d8;--line:#e9c98a30}
  *{box-sizing:border-box;margin:0}
  html{scroll-behavior:smooth}
  body{background:var(--ink);color:var(--bone);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.2rem;line-height:1.65}
  header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,48px);background:linear-gradient(#070914cc,#07091400);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:linear-gradient(#000 70%,transparent);-webkit-mask-image:linear-gradient(#000 70%,transparent)}
  .brand{display:flex;align-items:center;gap:12px;font-family:Cinzel,serif;letter-spacing:.22em;text-transform:uppercase;font-size:.82rem;color:var(--gold);text-decoration:none}
  .brand svg{width:30px;height:30px;fill:var(--gold)}
  nav a{font-family:Cinzel,serif;color:var(--bone);text-decoration:none;margin-left:clamp(14px,2.5vw,32px);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8;position:relative}
  nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--ember);transition:right .3s}
  nav a:hover{opacity:1;color:var(--ember)}nav a:hover::after{right:0}
  .hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#070914}
  .hero>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .copy{position:absolute;z-index:3;left:0;right:0;top:clamp(84px,17vh,190px);text-align:center;padding:0 20px;pointer-events:none}
  .copy>*{pointer-events:auto}
  .eyebrow{font-family:Cinzel,serif;font-size:clamp(.62rem,1.5vw,.82rem);letter-spacing:.42em;text-transform:uppercase;color:var(--gold);opacity:0;animation:rise 1.4s .2s forwards}
  h1{font-family:Cinzel,serif;font-weight:700;font-size:clamp(2.4rem,8.2vw,6.4rem);line-height:1.02;letter-spacing:.05em;margin:.25em 0 .3em;background:linear-gradient(180deg,#fff8e6 0%,#f1e1b8 45%,#c9a15c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 30px #000c);opacity:0;animation:rise 1.6s .45s forwards}
  .rule{display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 1.4rem;color:var(--gold);opacity:0;animation:rise 1.4s .8s forwards}
  .rule i{display:block;width:clamp(40px,10vw,110px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
  .rule i:last-child{transform:scaleX(-1)}
  .rule span{font-family:"Noto Sans Runic",serif;letter-spacing:.5em;font-size:.9rem}
  .cta{opacity:0;animation:rise 1.4s 1.05s forwards}
  .btn{display:inline-block;padding:16px 34px;font-family:Cinzel,serif;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:#1a0e04;background:linear-gradient(180deg,#ffd08a,#f0922e);text-decoration:none;border-radius:2px;box-shadow:0 0 0 1px #ffd9a055,0 10px 40px #f0922e55;transition:.25s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #ffd9a0aa,0 14px 56px #f0922e99}
  .btn.ghost{background:#07091466;color:var(--bone);box-shadow:inset 0 0 0 1px #f1e9d655;margin-left:12px;backdrop-filter:blur(4px)}
  .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ember);color:var(--ember)}
  .cue{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.4em;color:var(--bone);opacity:.6;text-transform:uppercase}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  /* scene animation */
  .flick{animation:flick 2.1s infinite alternate ease-in-out;transform-box:fill-box;transform-origin:50% 100%}
  .flick2{animation:flick 1.5s .3s infinite alternate ease-in-out;transform-box:fill-box;transform-origin:50% 100%}
  @keyframes flick{0%{opacity:.82;transform:scale(1,.94)}50%{opacity:1;transform:scale(1.04,1.04)}100%{opacity:.9;transform:scale(.97,1)}}
  .pulse{animation:pulse 3s infinite alternate ease-in-out}
  @keyframes pulse{from{opacity:.75}to{opacity:1}}
  .tw{animation:tw 4s infinite ease-in-out}
  @keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
  .aur{animation:aur 22s infinite alternate ease-in-out;transform-box:fill-box;transform-origin:50% 100%}
  @keyframes aur{from{transform:translateX(-60px) skewX(-4deg);opacity:.55}to{transform:translateX(70px) skewX(5deg);opacity:.95}}
  .drift{animation:drift 40s infinite alternate ease-in-out}
  @keyframes drift{from{transform:translateX(-90px)}to{transform:translateX(90px)}}
  .cloud{animation:cdrift 120s linear infinite alternate}
  @keyframes cdrift{from{transform:translateX(-300px)}to{transform:translateX(0)}}
  .cross{animation:cross var(--d) linear infinite;animation-delay:var(--dl)}
  @keyframes cross{from{transform:translate(-160px,var(--y))}to{transform:translate(1760px,calc(var(--y) + 40px))}}
  .wing{transform-box:fill-box;transform-origin:30% 100%;animation:flap .55s infinite ease-in-out}
  @keyframes flap{0%,100%{transform:scaleY(1) skewX(0)}50%{transform:scaleY(-.5) skewX(-10deg)}}
  .smoke{animation:smoke 7s infinite ease-out;transform-box:fill-box;transform-origin:50% 100%}
  @keyframes smoke{from{opacity:.4;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(24px,-110px) scale(2.4)}}
  .layer{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  /* content */
  main{position:relative;background:linear-gradient(#070914,#0b0f1f 40%,#070914)}
  section{max-width:1040px;margin:0 auto;padding:clamp(70px,12vw,130px) 22px}
  .label{font-family:Cinzel,serif;color:var(--ember);font-size:.74rem;letter-spacing:.4em;text-transform:uppercase}
  h2{font-family:Cinzel,serif;font-weight:500;font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:.06em;margin:.3em 0 .5em;color:var(--bone)}
  p.lead{font-size:clamp(1.15rem,2.2vw,1.5rem);max-width:46ch;color:#d9d2c0}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:34px}
  .card{position:relative;padding:30px 26px;border:1px solid var(--line);background:linear-gradient(160deg,#ffffff0b,#ffffff03);border-radius:4px;transition:.35s;overflow:hidden}
  .card:hover{border-color:#ffb25a88;transform:translateY(-4px);background:linear-gradient(160deg,#ffb25a14,#ffffff03)}
  .rune{font-family:"Noto Sans Runic",serif;font-size:2rem;color:var(--ember);display:block;margin-bottom:10px}
  .card h3{font-family:Cinzel,serif;font-weight:500;letter-spacing:.08em;font-size:1.05rem;margin-bottom:6px}
  .card p{font-size:1.08rem;color:#cfc8b6}
  .note{margin-top:22px;font-size:.95rem;opacity:.5;font-style:italic}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s,transform 1s}
  .reveal.in{opacity:1;transform:none}
  footer{text-align:center;padding:50px 20px 60px;color:#f1e9d699;font-size:.95rem;border-top:1px solid var(--line);font-family:Cinzel,serif;letter-spacing:.18em;text-transform:uppercase;font-size:.7rem}
  @media(max-width:700px){.brand{font-size:0;gap:0}.brand svg{width:34px;height:34px}nav a{margin-left:14px;font-size:.62rem;letter-spacing:.14em}.btn.ghost{margin:12px 0 0;display:inline-block}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.eyebrow,h1,.rule,.cta{opacity:1}.reveal{opacity:1;transform:none}}

/* ---------- inner pages ---------- */
body.inner{background:radial-gradient(1200px 600px at 80% -10%,#2a2a5a55,transparent),radial-gradient(900px 500px at 0% 0%,#14304a55,transparent),#070914}
header.solid{background:#070914e6;mask-image:none;-webkit-mask-image:none;border-bottom:1px solid var(--line)}
nav a.on{color:var(--ember);opacity:1}nav a.on::after{right:0}
.pagehead{padding:clamp(120px,18vh,190px) 22px 30px;text-align:center;max-width:900px;margin:0 auto}
.pagehead h1{font-size:clamp(2.2rem,6vw,4.4rem);animation:none;opacity:1}
.pagehead .eyebrow{animation:none;opacity:1}
.pagehead p.lead{margin:0 auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px clamp(60px,10vw,110px)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:800px){.split{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);background:linear-gradient(160deg,#ffffff0d,#ffffff03);border-radius:6px;padding:28px}
.quote{font-size:clamp(1.3rem,3vw,1.9rem);font-style:italic;color:var(--gold);border-left:2px solid var(--ember);padding-left:20px;margin:30px 0}
ul.clean{list-style:none;padding:0}ul.clean li{padding:10px 0;border-bottom:1px solid #ffffff12}
ul.clean li b{font-family:Cinzel,serif;font-weight:500;letter-spacing:.06em;color:var(--bone)}
.tag{display:inline-block;font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:3px 9px;border-radius:2px;margin-bottom:10px}
.tag.soon{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.cta-band{text-align:center;padding:clamp(60px,10vw,110px) 22px;background:linear-gradient(#070914,#1b1530 60%,#070914)}
.cta-band h2{margin-bottom:.8em}
a.inline{color:var(--ember);text-decoration:none;border-bottom:1px solid #ffb25a66}
a.inline:hover{border-bottom-color:var(--ember)}
footer .links{margin-bottom:14px}footer .links a{color:var(--bone);text-decoration:none;margin:0 12px;opacity:.7}footer .links a:hover{color:var(--ember);opacity:1}
/* form */
form.joinform{display:grid;gap:16px;max-width:620px;margin:0 auto}
form label{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:grid;gap:8px}
form input,form textarea,form select{font:inherit;font-size:1.1rem;color:var(--bone);background:#0d1226;border:1px solid var(--line);border-radius:3px;padding:13px 14px;width:100%}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--ember);outline-offset:1px}
form textarea{min-height:140px;resize:vertical}
.check{display:flex!important;align-items:flex-start;gap:12px;font-family:"Cormorant Garamond",serif!important;text-transform:none!important;letter-spacing:0!important;font-size:1.05rem!important;color:#d9d2c0!important}
.check input{width:auto;margin-top:6px}
.hp{position:absolute;left:-9999px}
button.btn{border:0;cursor:pointer}
/* village map */
.mapwrap{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
@media(max-width:900px){.mapwrap{grid-template-columns:1fr}}
#vmap{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px;background:#0a0e1c}
#vmap .spot{cursor:pointer;outline:none}
#vmap .spot .hit{fill:transparent;stroke:transparent;stroke-width:3;transition:.25s}
#vmap .spot:hover .hit,#vmap .spot:focus .hit,#vmap .spot.sel .hit{stroke:var(--ember);fill:#ffb25a1f;filter:drop-shadow(0 0 8px #ffb25a)}
#vmap text{font-family:Cinzel,serif;font-size:11px;letter-spacing:.14em;fill:#f1e9d6cc;pointer-events:none;text-transform:uppercase}
#info{position:sticky;top:90px;min-height:260px}
#info h3{font-family:Cinzel,serif;font-weight:500;font-size:1.4rem;letter-spacing:.06em;margin:.2em 0 .4em}
#info p{color:#d9d2c0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips button{font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:#ffffff08;border:1px solid var(--line);padding:8px 12px;border-radius:2px;cursor:pointer}
.chips button:hover,.chips button.sel{border-color:var(--ember);color:var(--ember)}
.fire2{animation:flick 1.8s infinite alternate ease-in-out;transform-box:fill-box;transform-origin:50% 50%}