@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Prata&display=swap');
@import url('./design-system.css');
:root{color-scheme:dark;--ink:#f3eee5;--muted:#aaa297;--gold:#c8a876;--light:#ead7b2;--bg:#090808;--line:rgba(234,215,178,.18);--serif:"Prata",Georgia,serif;--sans:"Manrope",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:150px}body.characters-page{margin:0;min-width:320px;overflow-x:hidden;color:var(--ink);background:var(--bg);font:16px/1.65 var(--sans)}body.menu-open{overflow:hidden}a{color:inherit}img{display:block;max-width:100%}button,input{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:300;top:1rem;left:1rem;padding:.7rem 1rem;color:#080707!important;background:var(--light);transform:translateY(-160%)}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--light);outline-offset:4px}
.site-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;background:linear-gradient(#050505c7,transparent);transition:.35s}.site-header.scrolled,.site-header.open{border-color:var(--line);background:#090808eb;box-shadow:0 15px 50px #0006;backdrop-filter:blur(18px)}.header-inner{display:flex;width:min(1440px,calc(100% - 64px));min-height:84px;margin:auto;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:.9rem;font:400 .92rem var(--serif);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.brand-mark{display:grid;width:42px;height:42px;place-items:center;border:1px solid #ead7b277;color:var(--light);font-size:.5rem;transform:rotate(45deg)}.site-nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.2rem)}.site-nav a{position:relative;padding:.7rem 0;color:#f3eee5bf;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-decoration:none;text-transform:uppercase}.site-nav a::after{position:absolute;right:0;bottom:.3rem;left:0;height:1px;content:"";background:var(--gold);transform:scaleX(0);transition:.2s}.site-nav a:hover,.site-nav a.active{color:var(--ink)}.site-nav a:hover::after,.site-nav a.active::after{transform:scaleX(1)}.menu-toggle{display:none}
.catalog-hero{position:relative;display:grid;min-height:620px;align-items:end;isolation:isolate;background:url("images/paladin_vs_dokain.jpg") center 34%/cover no-repeat}.catalog-hero::before{position:absolute;inset:0;z-index:-1;content:"";background:linear-gradient(90deg,#050404ed,#0907079c 54%,#0907073b),linear-gradient(0deg,var(--bg),transparent 50%,#0003)}.hero-content{width:min(1440px,calc(100% - 64px));margin:auto;padding:10rem 0 7rem}.eyebrow{margin:0 0 1.1rem;color:var(--gold);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}.hero-content h1{margin:0;font:400 clamp(4rem,9vw,9rem)/.9 var(--serif);letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 16px 70px #000c}.hero-content>p:last-child{max-width:680px;margin:1.7rem 0 0;color:#e4ddd3c9;font-size:1.05rem}.tome-nav{position:sticky;top:84px;z-index:80;border-block:1px solid var(--line);background:#0a0909e8;backdrop-filter:blur(16px)}.tome-nav>div{display:flex;width:min(1100px,100%);margin:auto;justify-content:center;overflow-x:auto;scrollbar-width:none}.tome-nav a{padding:1rem clamp(.8rem,2vw,1.8rem);flex:0 0 auto;color:var(--muted);font-size:.69rem;font-weight:600;letter-spacing:.11em;text-decoration:none;text-transform:uppercase}.tome-nav a:hover,.tome-nav a.active{color:var(--light);background:#c8a8760c}
.catalog{padding:clamp(6rem,9vw,9rem) max(32px,calc((100vw - 1440px)/2));background:radial-gradient(circle at 50% 5%,#7d4b2d1c,transparent 30%),#0b0908}.catalog-heading{display:flex;margin-bottom:3.5rem;align-items:end;justify-content:space-between;gap:2rem}.catalog-heading h2{margin:0;font:400 clamp(2.6rem,5vw,5rem)/1.08 var(--serif)}.catalog-heading>p{margin:0;color:var(--muted);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}.catalog-heading>p span{color:var(--light);font:400 1.5rem var(--serif)}.catalog-controls{display:flex;margin-bottom:2.5rem;align-items:center;justify-content:space-between;gap:2rem}.filters{display:flex;overflow-x:auto;scrollbar-width:none}.filters button{padding:.8rem 1.15rem;flex:0 0 auto;border:0;border-bottom:1px solid var(--line);color:var(--muted);background:transparent;font-size:.69rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s}.filters button span{margin-left:.35rem;color:#716a62;font-size:.62rem}.filters button:hover,.filters button.active{color:var(--light);border-color:var(--gold);background:#c8a8760d}.search{position:relative;display:block;width:min(330px,100%);flex:0 0 300px}.search i{position:absolute;top:50%;left:1rem;width:14px;height:14px;border:1px solid var(--muted);border-radius:50%;transform:translateY(-60%)}.search i::after{position:absolute;right:-5px;bottom:-3px;width:6px;height:1px;content:"";background:var(--muted);transform:rotate(45deg)}.search input{width:100%;height:48px;padding:0 2.7rem;border:1px solid var(--line);border-radius:0;color:var(--ink);background:#11100f;outline:0}.search input::placeholder{color:#77716a}.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.search:focus-within input{border-color:var(--gold)}.search button{position:absolute;top:50%;right:.6rem;width:34px;height:34px;border:0;color:var(--muted);background:transparent;font-size:1.2rem;cursor:pointer;transform:translateY(-50%)}
.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}.character-card{--accent:#8c6a4e;min-width:0;animation:card-in .45s both;animation-delay:var(--delay)}.character-card[data-faction="frauster"]{--accent:#9c8a56}.character-card[data-faction="maizervin"]{--accent:#676f91}.character-card[data-faction="cult"]{--accent:#7d4b64}.character-card[hidden]{display:none}.character-card a{position:relative;display:block;min-height:520px;overflow:hidden;border:1px solid var(--line);background:#11100f;text-decoration:none;isolation:isolate}.portrait{position:absolute;inset:0;overflow:hidden}.portrait::after{position:absolute;inset:0;content:"";background:linear-gradient(0deg,#080707f7 0%,#08070752 52%,#0807071f),linear-gradient(90deg,#0807074f,transparent);transition:.4s}.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.82);transition:transform .7s ease,filter .5s}.character-card a:hover .portrait img,.character-card a:focus-visible .portrait img{transform:scale(1.045);filter:saturate(.82) brightness(.95)}.character-card a:hover .portrait::after,.character-card a:focus-visible .portrait::after{background:linear-gradient(0deg,#080707f0,#08070729 65%,transparent)}.card-copy{position:absolute;right:0;bottom:0;left:0;z-index:2;padding:2rem;border-bottom:2px solid var(--accent)}.card-copy>span{color:var(--gold);font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.card-copy h3{margin:.4rem 0 0;font:400 clamp(1.8rem,2.8vw,2.8rem)/1.1 var(--serif);transition:color .25s}.card-copy p{margin:.55rem 0 0;color:#b7afa5;font-size:.82rem}.character-card a:hover h3,.character-card a:focus-visible h3{color:var(--light)}.no-image .portrait{display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#3d4456,#121318 55%,#090909)}.no-image .portrait>span{color:#c6c9d233;font:400 12rem var(--serif)}.empty-state{padding:6rem 1rem;text-align:center;border:1px solid var(--line)}.empty-state p{margin:0 0 1rem;font:400 2rem var(--serif)}.empty-state button{padding:.7rem 1rem;border:1px solid var(--line);color:var(--light);background:transparent;cursor:pointer}
.site-footer{padding:5rem max(32px,calc((100vw - 1440px)/2)) 1.5rem;border-top:1px solid var(--line);background:#070606}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:clamp(2rem,5vw,6rem)}.footer-intro p{max-width:420px;margin:1.5rem 0 0;color:var(--muted);font-size:.88rem}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start;gap:.62rem}.footer-grid h2{margin:0 0 .55rem;color:var(--gold);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}.footer-grid>div:not(:first-child) a{color:var(--muted);font-size:.84rem;text-decoration:none}.footer-grid a:hover{color:var(--ink)}.footer-bottom{display:flex;margin-top:4rem;padding-top:1.4rem;justify-content:space-between;gap:1rem;border-top:1px solid #ead7b21a;color:#77716a;font-size:.68rem;letter-spacing:.06em}@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-controls{align-items:stretch;flex-direction:column}.search{width:100%;flex:auto}.filters{width:100%}}
@media(max-width:980px){.header-inner{width:calc(100% - 40px);min-height:72px}.menu-toggle{display:flex;padding:.7rem 0;align-items:center;gap:.8rem;border:0;color:var(--ink);background:none;font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase}.menu-toggle i,.menu-toggle i::before,.menu-toggle i::after{display:block;width:25px;height:1px;background:currentColor;transition:.25s}.menu-toggle i{position:relative}.menu-toggle i::before,.menu-toggle i::after{position:absolute;content:""}.menu-toggle i::before{top:-6px}.menu-toggle i::after{top:6px}.open .menu-toggle i{background:transparent}.open .menu-toggle i::before{top:0;transform:rotate(45deg)}.open .menu-toggle i::after{top:0;transform:rotate(-45deg)}.site-nav{position:absolute;top:100%;right:0;left:0;display:grid;max-height:0;padding:0 20px;overflow:hidden;background:#090808f7;opacity:0;transition:.3s}.open .site-nav{max-height:500px;padding:.8rem 20px 1.5rem;border-bottom:1px solid var(--line);opacity:1}.site-nav a{padding:.8rem 0}.hero-content{width:calc(100% - 40px)}.tome-nav{top:72px}.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-intro{grid-column:1/-1}}
@media(max-width:760px){.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-card a{min-height:460px}.catalog-heading{align-items:flex-start;flex-direction:column}.catalog-heading>p{align-self:flex-end}}
@media(max-width:520px){html{scroll-padding-top:125px}.brand>span:last-child,.menu-toggle>span{display:none}.catalog-hero{min-height:540px;background-position:56% center}.hero-content{padding:8.5rem 0 5rem}.hero-content h1{font-size:clamp(2.9rem,12vw,4rem)}.hero-content>p:last-child{font-size:.92rem}.tome-nav>div{justify-content:flex-start}.catalog{padding:5.5rem 20px}.filters{margin-inline:-20px;padding-inline:20px}.character-grid{grid-template-columns:1fr;gap:1rem}.character-card a{min-height:520px}.footer-grid{grid-template-columns:1fr 1fr}.site-footer{padding:4rem 20px 1.2rem}.footer-intro{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.catalog-hero{background-image:url("images/characters-archive-hall.jpg")}
.catalog{background:linear-gradient(#0b0908f2,#0b0908f8),url("images/characters-archive-texture.jpg") center top/760px auto repeat-y,#0b0908}

.catalog-breadcrumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 2rem;color:#b7aa96;font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.catalog-breadcrumbs a{color:#d3bd94;text-decoration:none}
.catalog-breadcrumbs a:hover{color:#f3e6ce;text-decoration:underline;text-underline-offset:4px}
.catalog-breadcrumbs [aria-current="page"]{color:#e9e1d4}
@media(max-width:520px){.catalog-breadcrumbs{margin-bottom:1.35rem;font-size:.6rem}}