@font-face{font-family:"Grenze Gotisch";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/grenze-gotisch-700.woff2) format("woff2")}
@font-face{font-family:"Grenze Gotisch";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/grenze-gotisch-800.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-400.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-serif-4-600.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-400i.woff2) format("woff2")}
:root{--bg:#0c0e11;--panel:#14181d;--line:#2a313a;--text:#e6e2da;--muted:#9aa3ad;--ember:#e8923a;--crimson:#a3283a;--bronze:#c2a068;--rc:#c2a068}
[data-race=elfi]{--rc:#8fbf9a}[data-race=orchi]{--rc:#a3ad6c}[data-race=hobgoblin]{--rc:#cf5d70}[data-race=maghi]{--rc:#86a4e6}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:1.0625rem/1.75 "Source Serif 4",Georgia,serif}
h1,h2,h3,.brand{font-family:"Grenze Gotisch","Iowan Old Style",Georgia,serif;font-weight:700;line-height:1.05;margin:0}
h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:1rem}a{color:var(--ember)}img{display:block;max-width:100%;height:auto}
.wrap{width:min(1180px,100% - 2.4rem);margin-inline:auto}main>section{margin-block:4.5rem}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem clamp(1rem,3vw,2.2rem);background:rgba(12,14,17,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-size:1.9rem;color:var(--text);text-decoration:none;letter-spacing:.01em}.top nav{display:flex;align-items:center;gap:1.3rem;overflow-x:auto}.top nav a{color:var(--text);text-decoration:none;white-space:nowrap}.top nav a:hover{color:var(--ember)}
.btn{display:inline-block;padding:.8rem 1.4rem;border:1px solid var(--bronze);border-radius:4px;color:var(--text);text-decoration:none;font-weight:600;transition:background .2s,color .2s}
.btn:hover{background:rgba(194,160,104,.15)}.btn.primary{background:var(--crimson);border-color:var(--crimson);color:#fff}.btn.primary:hover{background:#bb3248}.btn.sm{padding:.4rem .9rem}
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(12,14,17,.35),rgba(12,14,17,.55) 55%,var(--bg)),var(--hero) center 30%/cover;overflow:hidden}
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;padding-block:6rem 4rem}
.hero h1{font-size:clamp(4rem,13vw,9.5rem);font-weight:800;letter-spacing:-.01em;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.sub{font-family:"Grenze Gotisch",serif;font-size:clamp(1.5rem,4vw,2.6rem);color:var(--bronze);margin:.2rem 0 0}.by{margin:.6rem 0 1.6rem;color:var(--muted);font-style:italic}
.lead{font-size:1.3rem;max-width:30ch;margin:0 0 1.8rem}.actions{display:flex;gap:.8rem;flex-wrap:wrap}.count{margin:1.4rem 0 0;color:var(--ember)}
.cover{width:min(300px,34vw)}.cover img{border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.7)}.cover[hidden]{display:none}
.syn{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:3rem}.syn-text p{max-width:68ch;margin:0 0 1.2rem}
blockquote{margin:2rem 0 0;padding:1.2rem 0 1.2rem 1.5rem;border-left:3px solid var(--crimson);font-style:italic;font-size:1.2rem;max-width:60ch}
.po{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding:2rem;border:1px solid var(--line);border-top:3px solid var(--crimson);background:var(--panel);border-radius:4px}
.po h2{margin-bottom:.4rem}.po p{margin:0;max-width:60ch;color:var(--muted)}.po-act{display:flex;gap:.8rem;flex-wrap:wrap}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}.sechead a{white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.1rem}.grid.places{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{position:relative;display:block;aspect-ratio:4/5;border:1px solid var(--line);border-radius:6px;overflow:hidden;color:inherit;text-decoration:none;background:var(--panel)}
.card.wide{aspect-ratio:16/10}.card img,.card .ph{width:100%;height:100%;object-fit:cover}.card img{transition:transform .6s}.card:hover img{transform:scale(1.04)}.card:hover{border-color:var(--rc)}
.card .ph,.place-hero.none{background:radial-gradient(circle at 70% 20%,#3a2a2e,transparent 55%),linear-gradient(160deg,#1b2128,#0c0e11)}
.card .cap{position:absolute;inset:auto 0 0;padding:3rem .95rem .9rem;background:linear-gradient(transparent,rgba(8,9,11,.93))}.card h3{font-size:1.65rem}.card p{margin:.2rem 0 0;font-size:.92rem;color:var(--muted);line-height:1.4}
.badge{position:absolute;top:.7rem;left:.7rem;padding:.12rem .65rem;font-size:.82rem;background:rgba(8,9,11,.72);border-left:3px solid var(--rc);border-radius:2px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.about p{color:var(--muted);max-width:55ch}
.pagehead{padding-block:3rem 1.5rem}.pagehead h1{font-size:clamp(2.6rem,7vw,4.5rem)}.pagehead p{max-width:62ch;color:var(--muted)}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.filters button{font:inherit;padding:.4rem 1rem;border:1px solid var(--line);border-radius:99px;background:none;color:var(--text);cursor:pointer}.filters button.on{background:var(--bronze);border-color:var(--bronze);color:#15110a}
.profile{display:grid;grid-template-columns:minmax(260px,400px) 1fr;grid-template-areas:"portrait head" "idcard story" "pager pager";gap:1.5rem 3.5rem;padding-block:3rem 4rem}
.portrait{grid-area:portrait;margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}.head{grid-area:head;align-self:end}.idcard{grid-area:idcard}.story{grid-area:story}.pager{grid-area:pager}
.race{display:inline-block;margin:0 0 .6rem;padding:.12rem .7rem;font-size:.9rem;border-left:3px solid var(--rc);background:rgba(255,255,255,.05)}
.profile h1{font-size:clamp(3rem,8vw,5.5rem)}.tag{font-size:1.25rem;color:var(--bronze);font-style:italic;margin:.5rem 0 0}
.idcard{align-self:start;padding:1.3rem 1.4rem;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--rc);border-radius:4px}.idcard h2{font-size:1.7rem}
dl{margin:0}dl div{padding:.55rem 0;border-top:1px solid var(--line)}dt{font-size:.88rem;color:var(--muted)}dd{margin:0}
.story p{max-width:66ch}.story h2,.related h2{font-size:2rem}
.spoiler{margin:2rem 0;border:1px solid var(--line);border-left:3px solid var(--crimson);background:var(--panel);border-radius:4px}.spoiler summary{cursor:pointer;padding:.9rem 1.2rem;display:flex;flex-direction:column;list-style:none}
.spoiler summary::-webkit-details-marker{display:none}.spoiler summary span{font-family:"Grenze Gotisch",serif;font-size:1.4rem}.spoiler summary small{color:var(--muted)}.spoiler[open] summary{border-bottom:1px solid var(--line)}.spoiler p{padding:0 1.2rem;margin:1rem 0}
.related{margin-top:2.5rem}.chips{display:flex;flex-wrap:wrap;gap:.6rem}.chip{display:flex;align-items:center;gap:.6rem;padding:.3rem .9rem .3rem .3rem;border:1px solid var(--line);border-radius:99px;color:var(--text);text-decoration:none;background:var(--panel)}.chip:hover{border-color:var(--bronze)}
.chip img{width:2.2rem;height:2.2rem;border-radius:50%;object-fit:cover;object-position:50% 20%}.chip.place{padding:.45rem 1rem}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}.pager a{color:var(--text);text-decoration:none;font-family:"Grenze Gotisch",serif;font-size:1.5rem}.pager a:last-child{text-align:right}.pager small{display:block;font-family:"Source Serif 4",serif;font-size:.85rem;color:var(--muted)}
.place-hero{position:relative;min-height:min(62svh,560px);display:flex;align-items:flex-end}.place-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.place-hero .shade{position:absolute;inset:0;background:linear-gradient(transparent 30%,var(--bg))}.place-hero .wrap{position:relative;padding-bottom:2rem}.place-hero h1{font-size:clamp(3rem,9vw,6rem)}
.place{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:2rem 3.5rem;padding-block:2.5rem 4rem}.place .gallery,.place .related,.place .pager{grid-column:1/-1}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.gallery figure{margin:0}.gallery img{border-radius:6px;border:1px solid var(--line)}.gallery figcaption{font-size:.9rem;color:var(--muted);margin-top:.4rem}
.foot{border-top:1px solid var(--line);padding:2rem 0;color:var(--muted);font-size:.95rem}.foot p{margin:.3rem 0}.foot a{color:var(--bronze)}
@media(max-width:820px){.hero-grid,.syn,.about{grid-template-columns:1fr}.cover{width:200px}.profile{grid-template-columns:1fr;grid-template-areas:"portrait" "head" "idcard" "story" "pager"}.place{grid-template-columns:1fr}.top nav a:not(.btn){display:none}.top nav a:nth-child(2),.top nav a:nth-child(3){display:inline}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* store preordini */
.btn.store{display:inline-flex;align-items:center;gap:.7rem;background:#f4efe6;border-color:#f4efe6;color:#1b1b1b;font-size:.9rem}
.btn.store img{display:block;height:22px;width:auto}
.btn.store:hover,.btn.store:focus-visible{background:#fff;border-color:#fff}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.2rem 0 0}
.stores>span{color:var(--muted);font-size:.9rem;margin-right:.2rem}
.chip-store{display:inline-flex;align-items:center;padding:.4rem .75rem;background:#f4efe6;border-radius:4px;transition:background .2s}
.chip-store:hover,.chip-store:focus-visible{background:#fff}
.chip-store img{display:block;height:18px;width:auto}
.po-act{align-items:center}
.cover picture{display:block}
.cover img{width:100%;height:auto}
@media(max-width:480px){.top nav{gap:.7rem}.top nav a:not(.btn){font-size:.9rem}.top nav a[href$="#sinossi"]{display:none}}
.home-fab{position:fixed;left:16px;bottom:16px;z-index:50;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .95rem;background:#f4efe6;color:#1b1b1b;border-radius:999px;font-weight:600;font-size:.9rem;text-decoration:none;box-shadow:0 6px 24px rgba(0,0,0,.55);transition:background .2s,transform .2s}
.home-fab:hover,.home-fab:focus-visible{background:#fff;transform:translateY(-2px)}
@media(max-width:480px){.home-fab{padding:.65rem;left:12px;bottom:12px}.home-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* mobile */
.profile>*,.place>*{min-width:0}
.idcard dd,.idcard dt,.story p{overflow-wrap:anywhere}
.gallery{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
@media(max-width:820px){.profile{grid-template-columns:minmax(0,1fr)}.po{padding:1.4rem}.po-act{width:100%}.po-act .btn.store{flex:1 1 220px;justify-content:space-between}}
@media(max-width:480px){.top{gap:.6rem}.brand{font-size:1.35rem}.top nav{gap:.3rem}.top nav a:not(.btn){padding:.6rem .5rem;font-size:.88rem}.btn.primary.sm{padding:.55rem .8rem}.chip-store{padding:.65rem .85rem}.stores>span{width:100%}.hero .actions .btn{flex:1 1 100%;text-align:center}.pager a{font-size:1.2rem}}
@media(max-width:400px){.top{flex-wrap:wrap;row-gap:.2rem;padding-block:.5rem}.top nav{width:100%;justify-content:space-between;overflow:visible}}

/* v2: hero leggero, loghi inline, copertina 3D, rail mobile */
.hero{--hero:url(../img/luoghi/durdam-dum-sm.webp)}
@media(min-width:900px){.hero{--hero:url(../img/luoghi/durdam-dum.webp)}}
.btn.store .logo,.chip-store .logo{display:block;width:auto;transition:transform .25s,filter .25s}
.btn.store .logo{height:22px}.chip-store .logo{height:18px}
.btn.store,.chip-store{transition:background .2s,box-shadow .25s,transform .25s}
.btn.store:hover,.btn.store:focus-visible,.chip-store:hover,.chip-store:focus-visible{box-shadow:0 0 0 1px var(--bronze),0 8px 26px rgba(194,160,104,.38);transform:translateY(-2px)}
.btn.store:hover .logo,.chip-store:hover .logo{transform:scale(1.05)}
.btn.primary{box-shadow:0 0 0 rgba(163,40,58,0);transition:background .2s,box-shadow .3s}.btn.primary:hover,.btn.primary:focus-visible{box-shadow:0 6px 30px rgba(163,40,58,.55)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.cover{perspective:1000px}
.cover img{transform:rotateY(var(--ry,-7deg)) rotateX(var(--rx,2deg));transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 80px rgba(163,40,58,.22);will-change:transform}
.cover.live img{transition:transform .08s linear,box-shadow .5s}
.cover:hover img{box-shadow:0 30px 70px rgba(0,0,0,.75),0 0 100px rgba(194,160,104,.3)}
@media(prefers-reduced-motion:reduce){.cover img{transform:none}}
@media(max-width:820px){
.grid.rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(70%,250px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:.4rem}
.grid.places.rail{grid-auto-columns:min(84%,330px)}
.grid.rail::-webkit-scrollbar{display:none}.grid.rail .card{scroll-snap-align:start}}
.hero-grid{padding-bottom:7rem}

/* estratto */
.reader{max-width:44rem;margin-block:0 4rem}
.rd-head{padding-block:3rem 1rem}.rd-head h1{font-size:clamp(2.6rem,7vw,4.5rem)}.rd-head p{color:var(--muted);max-width:50ch}
.reader article{font-size:1.2rem;line-height:1.9}
.reader article p{margin:0;text-indent:1.6em;hyphens:auto}
.reader article .rd-t+p{text-indent:0}
.rd-t{font-size:clamp(2rem,5vw,2.8rem);margin:3rem 0 1.2rem;text-align:center}
.rd-t span{display:block;font-size:.55em;font-weight:500;color:var(--bronze);margin-top:.3rem}
.rd-sep{border:0;height:1px;margin:3.5rem auto 0;width:40%;background:linear-gradient(90deg,transparent,var(--crimson),transparent)}
.rd-end{margin-top:3.5rem}.rd-end .po-act{width:100%}
@media(max-width:480px){.reader article{font-size:1.1rem}.reader article p{text-indent:1.2em}}
/* pagine luogo: le aree nominate valgono solo per .profile */
.place .idcard,.place .story{grid-area:auto}
.place .idcard{min-width:0}
.place .pager{grid-area:auto;grid-column:1/-1}
/* la scheda non eredita il margine delle sezioni della home */
.idcard{margin-block:0}
.place-hero.none{min-height:min(34svh,300px)}