:root{--ink:#03080d;--night:#071520;--blue:#0c2432;--ice:#a8d7de;--gold:#d6ae5b;--pale:#eaf1ef;--muted:#9badb2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--ink);color:var(--pale);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.7}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#story,#world,#book,#author{scroll-margin-top:1rem}
.skip-link{position:fixed;top:-5rem;left:1rem;z-index:99;background:var(--gold);color:#111;padding:.75rem 1rem}
.skip-link:focus{top:1rem}
.hero{min-height:100svh;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(2,8,13,.96) 0%,rgba(2,8,13,.65) 38%,rgba(2,8,13,.14) 70%),linear-gradient(0deg,var(--ink),transparent 34%),url('assets/asgard-hero.png') 62% center/cover no-repeat}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 25%,transparent 0 20%,rgba(2,7,11,.18) 70%)}
.nav{height:92px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;padding:0 clamp(1.25rem,5vw,5.5rem);border-bottom:1px solid rgba(255,255,255,.12);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.sigil{font-family:Cinzel,serif;font-weight:700}
.sigil span{color:var(--gold);font-size:1.5rem;margin-right:.5rem}
.nav-links{display:flex;gap:2.5rem}
.nav a{transition:color .25s}
.nav a:hover,.nav a:focus-visible{color:var(--gold)}
.nav-cta{border-bottom:1px solid var(--gold);padding:.4rem 0}
.hero-content{position:relative;z-index:1;width:min(710px,90%);padding:clamp(6rem,14vh,10rem) 0 7rem clamp(1.25rem,8vw,8rem)}
.eyebrow{color:var(--gold);font-size:.76rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;margin:0 0 1.4rem}
.hero-eyebrow{max-width:680px;line-height:1.65}
.hero h1,.section h2,.realms h2,.author h2{font-family:Cinzel,Georgia,serif}
.hero h1{font-size:clamp(3.6rem,8vw,8.5rem);line-height:.75;letter-spacing:-.045em;margin:0 0 2.2rem;text-transform:uppercase;text-shadow:0 4px 40px #000}
.hero h1 span,.hero h1 small{display:block}
.hero h1 small{font-size:.18em;line-height:1.9;color:var(--gold);letter-spacing:.5em;margin-left:.3em}
.hero-copy{max-width:570px;color:#d2ddde;font-family:Georgia,serif;font-size:clamp(1.12rem,2vw,1.45rem);line-height:1.65}
.hero-actions{display:flex;align-items:center;gap:2rem;margin-top:2.5rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.5rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--gold);transition:.25s}
.button.gold{background:var(--gold);color:#111}
.button:hover,.button:focus-visible{transform:translateY(-2px);box-shadow:0 10px 35px rgba(214,174,91,.22)}
.text-link{font-size:.86rem;border-bottom:1px solid rgba(255,255,255,.35)}
.scroll-mark{position:absolute;z-index:2;right:4rem;bottom:3rem;display:flex;align-items:center;gap:.7rem;transform:rotate(90deg);transform-origin:right center;color:#96a8ab;font-size:.64rem;letter-spacing:.3em}
.scroll-mark span{display:block;width:42px;height:1px;background:var(--gold)}
.section{position:relative;padding:clamp(6rem,12vw,11rem) clamp(1.25rem,8vw,8rem)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,9vw,10rem);background:linear-gradient(135deg,#06131c,#091c26)}
.section-number{position:absolute;top:3rem;left:4vw;color:rgba(214,174,91,.2);font-family:Cinzel,serif;font-size:6rem}
.story h2,.realms h2,.book h2,.author h2{font-size:clamp(2.25rem,4.5vw,4.8rem);line-height:1.12;margin:.25rem 0}
.story h2 em{color:var(--gold);font-weight:500}
.story-copy{padding-top:4.2rem;color:var(--muted);max-width:560px}
.story-copy .lead{color:var(--pale);font-family:Georgia,serif;font-size:1.3rem}
.synopsis-space{min-height:clamp(2rem,5vw,4rem)}
.note{border-left:2px solid var(--gold);padding-left:1.2rem;font-size:.84rem;color:#71858b}
.realms{min-height:760px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4rem;padding:7rem 8vw;background:radial-gradient(circle at 25% 50%,#143747 0,#061018 35%,#03080d 70%);overflow:hidden}
.realm-orbit{position:relative;aspect-ratio:1;max-width:600px;width:100%;display:grid;place-items:center}
.ring{position:absolute;border:1px solid rgba(168,215,222,.22);border-radius:50%;animation:spin 35s linear infinite}
.r1{inset:8%;border-color:rgba(214,174,91,.42)}
.r2{inset:20%;animation-direction:reverse;transform:rotate(30deg)}
.r3{inset:34%;border-color:rgba(168,215,222,.5)}
.ring:before,.ring:after{content:"◆";position:absolute;top:50%;left:-6px;color:var(--gold);font-size:.65rem}
.ring:after{left:auto;right:-6px}
.realm-core{font-size:clamp(4rem,9vw,8rem);color:var(--gold);filter:drop-shadow(0 0 25px rgba(214,174,91,.5))}
.realms-content{max-width:560px}
.realms-content>p:not(.eyebrow){color:var(--muted)}
.realm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:2rem}
.realm-list span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid rgba(255,255,255,.15);padding:.5rem .8rem;text-align:center;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#cbd7d8}
.world-guide{grid-column:1/-1;width:min(1180px,100%);margin:2.5rem auto 0;padding-top:clamp(3rem,7vw,6rem);border-top:1px solid rgba(214,174,91,.25)}
.world-guide-heading{text-align:center;margin-bottom:2rem}
.world-guide-heading .eyebrow{margin-bottom:.6rem}
.world-guide h3{margin:0;color:var(--pale);font-family:Cinzel,Georgia,serif;font-size:clamp(2rem,4vw,3.8rem);line-height:1.15;text-transform:uppercase}
.world-map{margin:0;padding:clamp(.45rem,1vw,.8rem);border:1px solid rgba(214,174,91,.55);background:rgba(2,8,13,.72);box-shadow:0 26px 70px rgba(0,0,0,.42)}
.world-map-link{display:block}
.world-map img{display:block;width:100%;height:auto;object-fit:contain}
.world-map figcaption{padding:.8rem .25rem .25rem;color:#aebdc0;font-family:Cinzel,Georgia,serif;font-size:.72rem;letter-spacing:.16em;text-align:center;text-transform:uppercase}
.map-hint{color:var(--gold);white-space:nowrap}
.book{display:grid;grid-template-columns:.8fr 1fr;align-items:center;gap:clamp(4rem,10vw,11rem);background:linear-gradient(120deg,#020508,#0d202a)}
.book-mock{width:min(360px,75vw);aspect-ratio:.68;margin:auto;position:relative;perspective:1000px;filter:drop-shadow(28px 30px 25px rgba(0,0,0,.6));transform:rotateY(-12deg)}
.book-cover{height:100%;display:grid;align-content:center;text-align:center;border:1px solid #b9924c;background:radial-gradient(circle at 50% 34%,#1a4656,#07131d 55%,#020609);box-shadow:inset 0 0 0 8px #061019,inset 0 0 0 9px rgba(214,174,91,.45);font-family:Cinzel,serif;text-transform:uppercase}
.book-cover:before{content:"";position:absolute;inset:22px;border:1px solid rgba(214,174,91,.25)}
.cover-mark{font-size:3.3rem;color:var(--gold);margin-bottom:1rem}
.book-cover p{font-size:2.2rem;letter-spacing:.05em;line-height:1;margin:.2rem}
.book-cover small{color:var(--gold);font-size:.75rem;letter-spacing:.5em}
.book-cover b{position:absolute;bottom:3rem;left:0;right:0;font-size:.68rem;letter-spacing:.24em;color:#c7b384}
.book-spine{position:absolute;left:-14px;top:6px;width:18px;height:98%;background:#0a1c25;transform:skewY(-28deg)}
.book-cover-image{display:block;width:100%;height:auto;object-fit:contain;border:1px solid #b9924c;box-shadow:0 0 0 1px rgba(214,174,91,.25)}
.book-copy{max-width:600px}
.book-copy>p:not(.eyebrow){color:var(--muted);font-family:Georgia,serif;font-size:1.2rem;margin-bottom:2rem}
.book-byline strong{color:var(--pale);font-family:Inter,system-ui,sans-serif;font-size:.95em;font-weight:600}
.book-copy>small{display:block;color:#71858b;margin-top:1rem}
.purchase-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:2.25rem}
.purchase-card{display:flex;min-height:64px;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.15rem;border:1px solid rgba(214,174,91,.42);background:rgba(7,21,32,.75);text-align:center;transition:transform .25s,border-color .25s,background .25s}
.purchase-card.featured{grid-column:1/-1;background:var(--gold);color:#111;border-color:var(--gold)}
.purchase-card span{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.purchase-card strong{font-family:Cinzel,Georgia,serif;font-size:1.08rem;line-height:1.35;margin-top:.16rem}
.purchase-card small{font-size:.76rem;opacity:.72;margin-top:.2rem}
.purchase-card:hover,.purchase-card:focus-visible{transform:translateY(-3px);border-color:var(--gold);background:rgba(14,43,56,.95)}
.purchase-card.featured:hover,.purchase-card.featured:focus-visible{background:#e4bd6c}
.author{min-height:500px;display:grid;place-items:center;padding:7rem 1.25rem;background:linear-gradient(rgba(3,8,13,.74),rgba(3,8,13,.94)),url('assets/asgard-hero.png') center 45%/cover no-repeat;background-attachment:fixed}
.author-card{text-align:center;max-width:680px;padding:4rem clamp(1.5rem,7vw,6rem);border:1px solid rgba(214,174,91,.35);background:rgba(3,9,14,.8);backdrop-filter:blur(12px)}
.keep-together{white-space:nowrap}
.author-tagline{font-family:Georgia,serif;font-size:1.12rem;color:var(--pale)}
.author-bio{max-width:590px;margin:1.5rem auto 2rem;color:#bac8ca;font-size:.98rem;line-height:1.8}
.author-link{border-color:var(--gold);color:var(--gold)}
footer{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2.2rem clamp(1.25rem,5vw,5rem);border-top:1px solid rgba(255,255,255,.1);color:#75878b;font-size:.75rem;letter-spacing:.1em}
footer div{display:flex;align-items:center;gap:.8rem;color:#bac6c7}
.footer-rune{color:var(--gold);font-size:1.4rem}
footer a:hover{color:var(--gold)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.ring{animation:none}
.reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:800px){.nav{height:76px}
.nav-links{display:none}
.nav-cta{font-size:.68rem;letter-spacing:.1em}
.hero{background:linear-gradient(90deg,rgba(2,8,13,.92),rgba(2,8,13,.5)),linear-gradient(0deg,var(--ink),transparent 38%),url('assets/asgard-hero.png') 62% center/cover no-repeat}
.hero-content{width:100%;padding:6.5rem 1.25rem 6rem}
.hero-eyebrow{max-width:34rem;font-size:.7rem;letter-spacing:.2em}
.scroll-mark{display:none}
.story,.realms,.book{grid-template-columns:1fr}
.section{padding:5.5rem 1.25rem}
.story-copy{padding-top:0}
.realms{padding:6rem 1.25rem}
.realm-orbit{max-width:430px;margin:auto}
.world-guide{margin-top:1rem;padding-top:4rem}
.world-map{padding:.35rem}
.book-copy{text-align:center}
.book-copy .eyebrow{margin-top:1rem}
.book-mock{transform:rotateY(-7deg)}
.author{padding:5rem 1rem}
.author-card{width:100%;padding:3.25rem 1.25rem}
.author h2{font-size:clamp(2rem,9vw,3.4rem)}
footer{flex-direction:column;text-align:center}
.author{background-attachment:scroll}
}
@media(max-width:470px){.hero h1{font-size:3.55rem}
.purchase-options{grid-template-columns:1fr}
.purchase-card.featured{grid-column:auto}
.purchase-card{width:100%;min-height:58px}
.hero-actions{align-items:flex-start;flex-direction:column;gap:1rem}
.hero-actions .button{width:100%}
.nav{padding-inline:1rem}
.sigil{font-size:.7rem}
.realm-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.realm-list span{min-height:56px;padding:.45rem;font-size:.68rem;letter-spacing:.06em;line-height:1.35}
.world-guide h3{font-size:clamp(1.8rem,9vw,2.6rem)}
.world-map figcaption{font-size:.64rem;letter-spacing:.1em}
.world-map figcaption{line-height:1.65}.map-hint{display:block;margin-top:.2rem;white-space:normal}
.book-copy h2{font-size:clamp(2rem,11vw,3rem)}
.author-bio{font-size:.94rem;line-height:1.7}
}
@media(max-width:370px){.author h2{font-size:1.7rem}
.hero h1{font-size:3.05rem}
.nav-cta{font-size:.62rem}
}