@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Spectral:wght@400;500;600&display=swap');
:root{color-scheme:dark;--gold:#eacb8d;--ivory:#f7ecd9;--serif:Spectral,Georgia,serif;--display:Cinzel,Georgia,serif}
*{box-sizing:border-box}body{margin:0;background:#17121b;color:var(--ivory);font:17px/1.45 var(--serif)}a{color:inherit}a:focus-visible{outline:3px solid #ffd57e;outline-offset:5px}.skip{position:absolute;top:10px;left:10px;transform:translateY(-160%);padding:8px;background:#20141d;z-index:8}.skip:focus{transform:none}
.hero{min-height:560px;display:grid;align-items:center;padding:42px max(26px,calc((100vw - 1160px)/2));background:linear-gradient(90deg,#130e17f5 0%,#130e17a0 35%,transparent 76%),url('./corona.webp') center/cover}.hero-title{width:max-content;max-width:100%;padding:25px 0}.hero h1{font:800 clamp(43px,7.5vw,100px)/.95 var(--display);color:#f2d4a0;letter-spacing:-.06em;margin:0;text-shadow:0 2px #624c34,0 6px 16px #000}.hero h1 em{font-style:normal;color:#fbe8bb}.hero p{margin:20px 0 0;color:#fff0d5;font-size:clamp(16px,2.1vw,23px)}
.realms-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 24px;padding:14px 16px;background:#211722;border-block:1px solid #967751}.realms-nav a{font:700 13px/1.3 var(--display);padding:8px 4px;text-decoration:none;color:var(--gold)}.realms-nav a:hover{text-decoration:underline}
.wrap{width:min(1130px,calc(100% - 70px));margin:auto}.realm{--accent:#ffc793;padding:52px 0;background-color:#251616;background-repeat:no-repeat;background-position:center top;background-size:100% auto;scroll-margin-top:8px}.realm+.realm{border-top:2px solid #9f7a4f}#reinos{background-image:linear-gradient(180deg,#23161955,#251519 620px),url('./reinos.webp')}#magia{--accent:#d7c4ff;background-color:#19142c;background-image:linear-gradient(180deg,#17122655,#19142c 620px),url('./magia.webp')}#norte{--accent:#a2eee0;background-color:#102827;background-image:linear-gradient(180deg,#10252233,#102827 620px),url('./norte.webp')}
.realm header{margin-bottom:28px;padding:14px 17px;border-left:3px solid var(--accent);background:#14111adc;width:fit-content}.realm h2{font:700 clamp(24px,4vw,46px)/1.14 var(--display);color:var(--accent);margin:0;text-shadow:0 2px 3px #000}.realm header p{margin:6px 0 0}
.books{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px;margin:0;padding:0;list-style:none}.books li{min-width:0;text-align:center}.cover{display:grid;place-items:center;position:relative;isolation:isolate;aspect-ratio:4/5;border:1px solid #e8d9c239;border-radius:5px;background:#0d0b12bc;padding:9%;box-shadow:0 6px 15px #0007}.cover img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;position:relative;filter:drop-shadow(0 5px 4px #000b)}a.cover::before{content:'';position:absolute;z-index:0;inset:3%;border-radius:40%;background:var(--accent);filter:blur(18px);opacity:0;transition:opacity .2s}.cover.is-opening::before{opacity:.85}.cover.is-opening img{animation:open-book .72s ease both}.books h3{font:600 16px/1.2 var(--serif);margin:10px 0 2px;overflow-wrap:anywhere}.books li p{font-size:14px;color:#ddd0c3;margin:0;overflow-wrap:anywhere}
@keyframes open-book{0%{transform:translateY(0)}35%{transform:translateY(-13px) rotate(-4deg) scale(1.07)}53%{transform:translateY(-13px) rotate(4deg) scale(1.07)}72%{transform:translateY(-13px) rotate(-3deg) scale(1.07)}100%{transform:translateY(-13px) rotate(0) scale(1.07)}}
@media(max-width:820px){.hero{min-height:420px}.books{grid-template-columns:repeat(4,minmax(0,1fr))}.wrap{width:calc(100% - 42px)}}
@media(max-width:510px){.hero{min-height:370px;align-items:end;padding:20px;background-image:linear-gradient(0deg,#130e17f0 6%,#130e1780 47%,transparent 80%),url('./corona.webp');background-position:65% center}.hero-title{padding:0}.hero p{margin-top:10px}.realms-nav{gap:0 11px}.realms-nav a{font-size:11px}.wrap{width:calc(100% - 32px)}.realm{padding:29px 0;background-size:auto 400px}.books{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}}
@media(prefers-reduced-motion:reduce){.cover.is-opening img{animation:none}}