﻿@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{--bg:#10110f;--panel:#171916;--ink:#ecece0;--muted:#9b9e90;--gold:#c9ad78;--line:#ffffff17;--pink:#d990b3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Barlow,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}::selection{background:#c9ad78;color:#10110f}.skip{position:fixed;top:-100px;left:20px;padding:12px;background:var(--gold);color:#111;z-index:20}.skip:focus{top:10px}.header{height:104px;margin:0 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{display:flex;align-items:center;gap:13px;font-size:13px;line-height:1.35;letter-spacing:2px;font-weight:600}.brand b{font-weight:700;color:var(--gold)}nav{display:flex;align-items:center;gap:38px;font-size:15px}nav>a:not(.nav-apply){color:#c5c6b9}nav a:hover{color:var(--gold)}.nav-apply{border:1px solid #c9ad7855;padding:12px 21px}.nav-apply span{margin-left:25px;color:var(--gold)}
.hero{min-height:760px;height:calc(100svh - 104px);max-height:1000px;position:relative;overflow:hidden;padding:70px 5.5% 85px;isolation:isolate}.hero-landscape{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#10110f 10%,#10110fc9 40%,#10110f44 75%),linear-gradient(0deg,#10110f,transparent 40%),url('assets/orc-background.jpg') center 40%/cover;opacity:.65}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 50%,#8d69ae16,transparent 60%);pointer-events:none}.hero-copy{position:relative;z-index:2;max-width:800px}.eyebrow,.section-label,.hero-bottom,.credential-bar,.small-note,.card-number,.character-type,.armory-link,.recruit-tags,.art-caption{font-size:13px;font-weight:600;letter-spacing:2px}.eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b9ce84;box-shadow:0 0 12px #b9ce8460;margin-right:5px}.divider{color:#636659;margin:0 5px}h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(68px,7.6vw,124px);font-weight:800;line-height:.87;letter-spacing:-1.5px;margin:35px 0 28px}h1>span{color:var(--gold)}.title-period{color:var(--ink)}.hero-tagline{font-size:24px;line-height:1.2;font-weight:500;margin:0 0 15px}.hero-description{font-size:16px;color:var(--muted);line-height:1.7}.hero-actions{display:flex;gap:30px;align-items:center;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;background:var(--gold);color:#191a15;padding:16px 23px;font-size:15px;font-weight:700;border:1px solid var(--gold);transition:background .2s,transform .2s}.button:hover{background:#e1c798;transform:translateY(-3px)}.text-link{font-size:14px;border-bottom:1px solid #7a7c6c;padding:8px 0}.text-link span{margin-left:16px;color:var(--gold)}.hero-art{position:absolute;width:63%;height:100%;right:-8%;bottom:0;z-index:0;pointer-events:none}.hero-art>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 50px #a290b926);animation:arrival 1.6s ease-out both}.art-caption{position:absolute;bottom:95px;right:24%;font-size:12px;color:#b4b2a6}.art-caption i{font-style:normal;color:var(--gold);padding:0 10px}.hero-orbit{width:510px;height:510px;position:absolute;right:8%;top:13%;border:1px solid #c9ad7830;border-radius:50%;z-index:-2;box-shadow:0 0 0 22px #c9ad7804,0 0 0 23px #c9ad7810}.hero-orbit:after{content:"✧";font-size:55px;position:absolute;right:48px;top:25px;color:#c9ad7870;animation:glimmer 5s ease-in-out infinite}.hero-bottom{position:absolute;bottom:28px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.hero-bottom>span:last-child span{margin-left:20px;color:var(--gold)}.credential-bar{min-height:86px;border-block:1px solid var(--line);display:flex;align-items:center;justify-content:space-evenly;gap:20px;padding:20px 5.5%;color:#c2c1b0;font-size:13px}.credential-bar i{font-style:normal;font-size:20px;color:var(--gold)}.section{padding:80px 7% 90px;scroll-margin-top:0}.section-label{display:flex;justify-content:space-between;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:22px;font-size:12px}.section-label>span:first-child{color:var(--gold)}.guild-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:12%;padding:60px 0}h2{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(44px,5vw,76px);font-weight:600;letter-spacing:-.5px;line-height:1.05;margin:0}h2 em{font-style:normal;color:var(--gold)}.guild-intro>div>p{color:var(--muted);font-size:16px;max-width:440px}.guild-intro .lead{font-size:23px;line-height:1.3;color:var(--ink);margin-top:0}.small-note{font-size:12px;color:var(--gold);display:block;margin-top:25px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.principles article{border-top:1px solid var(--line);padding-top:24px}.principles article>span{color:var(--gold);font-size:13px}.principles h3{font-size:18px;font-weight:500;margin:16px 0 9px}.principles p{font-size:15px;color:var(--muted);max-width:300px}.roster{background:#141612;border-block:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:45px 0 35px}.section-heading p{color:var(--muted);font-size:15px;margin:0}.roster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.character-card{position:relative;min-height:420px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--class-color,#bda67c) 13%,transparent),transparent 70%),#1b1d18;border:1px solid #ffffff12;overflow:hidden;isolation:isolate;transition:border-color .3s,transform .3s}.character-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#11130ff5 2%,#11130fbd 18%,transparent 52%);z-index:0;pointer-events:none}.character-card>img{position:absolute;width:130%;height:100%;left:-15%;object-fit:contain;object-position:center 30%;transition:transform .6s;z-index:-1}.character-card:hover{border-color:var(--class-color,var(--gold));transform:translateY(-4px)}.character-card:hover>img{transform:scale(1.045)}.card-number{position:absolute;top:19px;left:20px;z-index:1;color:#a4a697;font-size:12px}.card-info{position:absolute;bottom:22px;left:23px;right:15px;z-index:1}.character-type{color:var(--class-color,var(--gold));font-size:12px;letter-spacing:1.6px;text-transform:uppercase}.card-info h3{font-family:'Barlow Condensed',Arial,sans-serif;font-size:30px;line-height:1.2;font-weight:600;margin:6px 0 15px;overflow-wrap:anywhere}.armory-link{font-size:12px;color:#a4a697;letter-spacing:1.3px}.character-card:hover .armory-link{color:var(--ink)}.open-slot{background:repeating-linear-gradient(135deg,transparent,transparent 8px,#ffffff02 8px,#ffffff02 9px),#151712;border:1px dashed #c9ad7844}.slot-symbol{position:absolute;top:29%;left:calc(50% - 28px);font-size:70px;color:#c9ad7855;font-weight:400;line-height:1}.open-slot:after{display:none}.roster-footnote{text-align:center;font-size:13px;color:var(--muted);margin:30px 0 0}.recruit{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#6c548820,transparent 65%)}.recruit-content{text-align:center;padding:45px 0 0;position:relative}.recruit-rune{font-size:75px;color:var(--gold);line-height:1;margin-bottom:26px}.recruit .eyebrow{justify-content:center;font-size:12px}.recruit h2{margin:22px 0;font-size:clamp(48px,5.5vw,85px)}.recruit-content>p:not(.eyebrow){font-size:16px;color:var(--muted)}.recruit-tags{display:flex;justify-content:center;gap:25px;font-size:12px;color:#b0b3a2;margin:28px 0 33px}.recruit-tags span:before{content:"+";color:var(--gold);margin-right:8px}.recruit-content .application-status{font-size:13px;max-width:460px;margin:18px auto 0;min-height:25px}.highlight{color:var(--gold)!important}footer{margin:0 5.5%;padding:35px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);position:relative}footer>span{font-size:13px;color:var(--muted);text-align:center}footer small{font-size:12px;color:#75796b}.kitty{background:none;border:none;color:#808474;cursor:pointer;padding:9px;transition:color .3s,transform .3s}.kitty:hover,.kitty[aria-pressed=true]{color:var(--pink);transform:rotate(-8deg)}.kitty-message{position:absolute;bottom:100%;right:0;max-width:270px;color:var(--pink);font-size:14px}.kitty-mode{--gold:#d990b3}.kitty-mode .hero-orbit{border-color:#d990b388}.kitty-mode .status-dot{background:#e8a4c5}@keyframes arrival{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes glimmer{50%{opacity:.35;transform:rotate(30deg)}}@media(min-width:1600px){.header,.hero-bottom,footer{max-width:1500px;margin-inline:auto}.section{padding-inline:max(7%,calc((100% - 1400px)/2))}.hero{padding-inline:max(5.5%,calc((100% - 1500px)/2))}}@media(max-width:1000px){.hero{min-height:740px}.hero-art{width:80%;right:-25%;opacity:.7}.hero-copy{max-width:600px}h1{font-size:94px}.hero-orbit{right:-10%}.art-caption{display:none}.guild-intro{gap:7%}.character-card{min-height:360px}.card-info h3{font-size:26px}.credential-bar{font-size:12px;letter-spacing:1px}.hero-landscape{opacity:.4}}@media(max-width:700px){.header{height:84px;margin-inline:6%}.brand{font-size:12px;gap:9px;letter-spacing:1.4px}.brand img{width:29px}.header nav{gap:0}.header nav>a:not(.nav-apply){display:none}.nav-apply{font-size:13px;padding:9px 12px}.nav-apply span{margin-left:10px}.hero{height:auto;min-height:850px;padding:42px 6% 260px}.eyebrow{font-size:12px;letter-spacing:1px;gap:6px}h1{font-size:clamp(64px,14.2vw,97px);margin:28px 0 24px;letter-spacing:-.7px}.hero-tagline{font-size:22px}.hero-description{font-size:14px;max-width:280px}.hero-art{width:100%;height:530px;right:-24%;bottom:-65px;opacity:.58;z-index:-1}.hero-orbit{width:320px;height:320px;top:auto;bottom:20px;right:-30%}.hero-actions{gap:20px;flex-wrap:wrap}.button{padding:14px 18px;gap:25px;font-size:14px}.hero-bottom{left:6%;right:6%;font-size:12px;letter-spacing:1px}.hero-bottom>span:last-child{display:none}.credential-bar{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:14px;padding:22px 5%;font-size:12px}.credential-bar i{display:none}.section{padding:48px 6% 55px}.section-label{font-size:12px;letter-spacing:1.4px}.section-label>span:last-child{display:none}.guild-intro{grid-template-columns:1fr;gap:30px;padding:35px 0}.guild-intro>div>p{max-width:none}.guild-intro .lead{font-size:20px}.principles{grid-template-columns:1fr;gap:12px}.principles article{padding-top:18px}.principles article>span{float:left;margin:5px 17px 0 0}.principles h3{margin:0 0 8px}.principles p{max-width:none;margin-left:30px}.section-heading{display:block;margin:32px 0 26px}.section-heading p{margin-top:18px}.roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.character-card{min-height:305px}.card-number{font-size:12px;left:12px;top:14px;letter-spacing:1px}.card-info{left:12px;bottom:17px;right:8px}.card-info h3{font-size:22px;margin:7px 0 12px}.character-type{font-size:12px;letter-spacing:.7px}.armory-link{font-size:12px;letter-spacing:.8px}.character-card>img{width:160%;left:-30%}.recruit-tags{gap:12px;flex-wrap:wrap;font-size:12px}.recruit-content>p:not(.eyebrow){font-size:15px}.recruit-content>p br{display:none}.recruit-content{padding-top:30px}.recruit h2{font-size:49px}footer{flex-wrap:wrap;gap:25px;padding:28px 0}footer>span:not(.kitty-message){order:3;flex-basis:100%;text-align:left;font-size:13px}footer .brand{flex:1}.kitty-message{bottom:90%;font-size:13px}.hero-description br{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Armory exports contain a wide transparent stage: frame the actual characters. */
.hero-art>img{position:absolute;width:220%;height:180%;left:-60%;top:-65%;object-fit:contain;object-position:center}
.character-card>img{width:250%;height:190%;left:-75%;top:-65%;object-position:center}
@media(max-width:700px){.hero-art>img{width:220%;height:180%;left:-60%;top:-65%}.character-card>img{width:250%;left:-75%;height:190%;top:-65%}}

/* Give the larger supporting text enough room at every screen width. */
.hero{min-height:830px}
.eyebrow,.section-label,.hero-bottom,.credential-bar,.small-note,.card-number,.character-type,.armory-link,.recruit-tags,.art-caption{letter-spacing:1.2px}
.credential-bar{flex-wrap:wrap}
.section-label{gap:24px}
.character-type,.armory-link{display:block}
.card-number{right:16px}
.card-info{right:20px}
.hero-actions{flex-wrap:wrap}
footer small{color:var(--muted)}
@media(max-width:1000px){.section-label>span:last-child{text-align:right}.character-card{min-height:390px}}
@media(max-width:700px){
  .hero{min-height:910px}
  .header{min-height:94px;height:auto;padding-block:16px;gap:16px;flex-wrap:wrap}
  .header .brand{font-size:12px;letter-spacing:1px}
  .nav-apply{font-size:14px}
  .eyebrow{flex-wrap:wrap;row-gap:6px}
  .hero-description{max-width:360px}
  .credential-bar{column-gap:20px}
  .character-card{min-height:350px}
  .card-info{right:12px}
  .recruit-tags{gap:12px 20px}
}
@media(max-width:480px){
  .roster-grid{grid-template-columns:1fr;gap:18px}
  .character-card{min-height:430px}
  .card-info{left:22px;right:22px;bottom:24px}
  .card-info h3{font-size:30px}
  .card-number{left:22px;right:22px}
  .credential-bar{grid-template-columns:1fr}
}

/* Each visible model fills the same stage, regardless of race or export padding. */
.character-portrait{
  position:absolute;
  top:52px;
  bottom:135px;
  left:0;
  right:0;
  z-index:-1;
  transform:translate(var(--portrait-x,0%),var(--portrait-y,0%)) scale(var(--portrait-zoom,1));
  transform-origin:50% 100%;
  transition:transform .6s;
}
.character-portrait>img{
  position:absolute;
  left:50%;
  width:auto;
  max-width:none;
  object-fit:contain;
}
.character-card:hover .character-portrait{
  transform:translate(var(--portrait-x,0%),var(--portrait-y,0%)) scale(calc(var(--portrait-zoom,1) * 1.045));
}
@media(max-width:700px){.character-portrait{top:52px;bottom:145px}}
@media(max-width:480px){.character-portrait{top:52px;bottom:145px}}
